@skyux/forms 11.0.0-alpha.5 → 11.0.0-alpha.6

package/fesm2022/skyux-forms.mjs

@@ -7,7 +7,7 @@ import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_A
 import * as i2 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i1$2 from '@skyux/core';
-import { SkyIdModule, SkyIdService, SkyFormsUtility, SkyLogService, SkyTrimModule, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyMediaBreakpoints } from '@skyux/core';
+import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyLiveAnnouncerService, SkyFormsUtility, SkyContentInfoProvider, SkyMediaBreakpoints } from '@skyux/core';
 import * as i4 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
 import * as i5 from '@skyux/icon';
@@ -768,10 +768,9 @@ class SkyCheckboxComponent {
      * @default false
      */
     set disabled(value) {
-        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
-        if (coercedValue !== this.#_disabled) {
-            this.#_disabled = coercedValue;
-            this.#disabledChange.next(coercedValue);
+        if (value !== this.#_disabled) {
+            this.#_disabled = value;
+            this.#disabledChange.next(value);
         }
     }
     /**
@@ -1027,7 +1026,7 @@ class SkyCheckboxComponent {
         this.checked = !this.checked;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: ["required", "required", booleanAttribute], labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: ["required", "required", booleanAttribute], labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
             { provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1055,7 +1054,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
             }], id: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabindex: [{
                 type: Input
             }], name: [{
@@ -1488,20 +1488,6 @@ const MIN_FILE_SIZE_DEFAULT$1 = 0;
  * Provides an element to attach a single local file.
  */
 class SkyFileAttachmentComponent {
-    /**
-     * Whether to disable the input on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
-     * To set the disabled state on reactive forms, use the `FormControl` instead.
-     * @default false
-     */
-    set disabled(value) {
-        const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
-        if (this.#_disabled !== newDisabledState) {
-            this.#_disabled = newDisabledState;
-        }
-    }
-    get disabled() {
-        return this.#_disabled;
-    }
     /**
      * The maximum size in bytes for valid files.
      * @default 500000
@@ -1546,7 +1532,6 @@ class SkyFileAttachmentComponent {
     #enterEventTarget;
     #fileAttachmentId;
     #ngUnsubscribe;
-    #_disabled;
     #_maxFileSize;
     #_minFileSize;
     #_value;
@@ -1559,6 +1544,11 @@ class SkyFileAttachmentComponent {
     #resourcesSvc;
     #labelTextRequired;
     constructor(changeDetector, fileAttachmentService, fileItemService, ngControl, themeSvc) {
+        /**
+         * Whether to disable the input on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
+         * To set the disabled state on reactive forms, use the `FormControl` instead.
+         */
+        this.disabled = false;
         /**
          * Whether to hide `labelText` from view.
          */
@@ -1594,7 +1584,6 @@ class SkyFileAttachmentComponent {
         this.isImage = false;
         this.#fileAttachmentId = uniqueId++;
         this.#ngUnsubscribe = new Subject();
-        this.#_disabled = false;
         this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT$1;
         this.#_minFileSize = MIN_FILE_SIZE_DEFAULT$1;
         this.#idSvc = inject(SkyIdService);
@@ -1875,17 +1864,17 @@ class SkyFileAttachmentComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #onTouched;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i2$1.NgControl, optional: true, self: true }, { token: i4$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
             SkyFileAttachmentService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{\n      'sky-control-label-required': !labelText && required && hasLabelComponent,\n    }\"\n  >\n    <ng-container *ngIf=\"labelText; else labelContent\">\n      <span\n        *ngIf=\"!labelHidden\"\n        class=\"sky-control-label sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': required,\n        }\"\n        >{{ labelText }}</span\n      ><sky-help-inline\n        *ngIf=\"helpPopoverContent || helpKey\"\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    </ng-container>\n    <span\n      class=\"sky-screen-reader-only\"\n      *ngIf=\"required && (hasLabelComponent || labelText)\"\n      >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n    >\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver,\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\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    <ng-container *ngIf=\"showFileAttachmentButton\">\n      <button\n        *ngIf=\"showFileAttachmentButton\"\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        skyId\n        [attr.aria-describedby]=\"\n          (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n        \"\n        [attr.aria-label]=\"\n          value\n            ? ('skyux_file_attachment_button_label_replace_file_label'\n              | skyLibResources: fileName)\n            : ('skyux_file_attachment_button_label_choose_file_label'\n              | skyLibResources)\n        \"\n        [attr.aria-labelledby]=\"\n          attachButton.id +\n          ' ' +\n          (labelText\n            ? labelElementId\n            : hasLabelComponent\n              ? labelComponents?.get(0)?.labelContentId?.id\n              : undefined)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        #attachButton=\"skyId\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    </ng-container>\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    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"fileName\"\n        (click)=\"emitClick()\"\n      >\n        {{ truncatedFileName }}\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      skyId\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n      \"\n      [attr.aria-labelledby]=\"\n        deleteButton.id +\n        ' ' +\n        (hasLabelComponent\n          ? labelComponents?.get(0)?.labelContentId?.id\n          : undefined)\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern',\n      }\"\n      (click)=\"deleteFileAttachment()\"\n      #deleteButton=\"skyId\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\" />\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<div skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n  >\n    {{ hintText }}\n  </div>\n</div>\n\n<sky-form-errors\n  *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n  [id]=\"errorId\"\n  [errors]=\"\n    ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n  \"\n  [labelText]=\"labelText\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'fileType'\"\n    [errorName]=\"'fileType'\"\n    [errorText]=\"\n      'skyux_file_attachment_file_type_error_label_text'\n        | skyLibResources: fileErrorParam\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'maxFileSize'\"\n    [errorName]=\"'maxFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_max_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'minFileSize'\"\n    [errorName]=\"'minFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_min_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n</sky-form-errors>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.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-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}: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-control-label{color:#686c73;font-size:13px}.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{\n      'sky-control-label-required': !labelText && required && hasLabelComponent\n    }\"\n  >\n    <ng-container *ngIf=\"labelText; else labelContent\">\n      <span\n        *ngIf=\"!labelHidden\"\n        class=\"sky-control-label sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': required\n        }\"\n        >{{ labelText }}</span\n      ><sky-help-inline\n        *ngIf=\"helpPopoverContent || helpKey\"\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    </ng-container>\n    <span\n      class=\"sky-screen-reader-only\"\n      *ngIf=\"required && (hasLabelComponent || labelText)\"\n      >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n    >\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\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    <ng-container *ngIf=\"showFileAttachmentButton\">\n      <button\n        *ngIf=\"showFileAttachmentButton\"\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        skyId\n        [attr.aria-describedby]=\"\n          (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n        \"\n        [attr.aria-label]=\"\n          value\n            ? ('skyux_file_attachment_button_label_replace_file_label'\n              | skyLibResources: fileName)\n            : ('skyux_file_attachment_button_label_choose_file_label'\n              | skyLibResources)\n        \"\n        [attr.aria-labelledby]=\"\n          attachButton.id +\n          ' ' +\n          (labelText\n            ? labelElementId\n            : hasLabelComponent\n              ? labelComponents?.get(0)?.labelContentId?.id\n              : undefined)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        #attachButton=\"skyId\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    </ng-container>\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    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"fileName\"\n        (click)=\"emitClick()\"\n      >\n        {{ truncatedFileName }}\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      skyId\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n      \"\n      [attr.aria-labelledby]=\"\n        deleteButton.id +\n        ' ' +\n        (hasLabelComponent\n          ? labelComponents?.get(0)?.labelContentId?.id\n          : undefined)\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n      #deleteButton=\"skyId\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\" />\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<div skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n  >\n    {{ hintText }}\n  </div>\n</div>\n\n<sky-form-errors\n  *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n  [id]=\"errorId\"\n  [errors]=\"\n    ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n  \"\n  [labelText]=\"labelText\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'fileType'\"\n    [errorName]=\"'fileType'\"\n    [errorText]=\"\n      'skyux_file_attachment_file_type_error_label_text'\n        | skyLibResources: fileErrorParam\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'maxFileSize'\"\n    [errorName]=\"'maxFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_max_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'minFileSize'\"\n    [errorName]=\"'minFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_min_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n</sky-form-errors>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.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-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}: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-control-label{color:#686c73;font-size:13px}.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-file-attachment', providers: [
                         SkyFileAttachmentService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{\n      'sky-control-label-required': !labelText && required && hasLabelComponent,\n    }\"\n  >\n    <ng-container *ngIf=\"labelText; else labelContent\">\n      <span\n        *ngIf=\"!labelHidden\"\n        class=\"sky-control-label sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': required,\n        }\"\n        >{{ labelText }}</span\n      ><sky-help-inline\n        *ngIf=\"helpPopoverContent || helpKey\"\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    </ng-container>\n    <span\n      class=\"sky-screen-reader-only\"\n      *ngIf=\"required && (hasLabelComponent || labelText)\"\n      >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n    >\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver,\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\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    <ng-container *ngIf=\"showFileAttachmentButton\">\n      <button\n        *ngIf=\"showFileAttachmentButton\"\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        skyId\n        [attr.aria-describedby]=\"\n          (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n        \"\n        [attr.aria-label]=\"\n          value\n            ? ('skyux_file_attachment_button_label_replace_file_label'\n              | skyLibResources: fileName)\n            : ('skyux_file_attachment_button_label_choose_file_label'\n              | skyLibResources)\n        \"\n        [attr.aria-labelledby]=\"\n          attachButton.id +\n          ' ' +\n          (labelText\n            ? labelElementId\n            : hasLabelComponent\n              ? labelComponents?.get(0)?.labelContentId?.id\n              : undefined)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        #attachButton=\"skyId\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    </ng-container>\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    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"fileName\"\n        (click)=\"emitClick()\"\n      >\n        {{ truncatedFileName }}\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      skyId\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n      \"\n      [attr.aria-labelledby]=\"\n        deleteButton.id +\n        ' ' +\n        (hasLabelComponent\n          ? labelComponents?.get(0)?.labelContentId?.id\n          : undefined)\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern',\n      }\"\n      (click)=\"deleteFileAttachment()\"\n      #deleteButton=\"skyId\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\" />\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<div skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n  >\n    {{ hintText }}\n  </div>\n</div>\n\n<sky-form-errors\n  *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n  [id]=\"errorId\"\n  [errors]=\"\n    ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n  \"\n  [labelText]=\"labelText\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'fileType'\"\n    [errorName]=\"'fileType'\"\n    [errorText]=\"\n      'skyux_file_attachment_file_type_error_label_text'\n        | skyLibResources: fileErrorParam\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'maxFileSize'\"\n    [errorName]=\"'maxFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_max_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'minFileSize'\"\n    [errorName]=\"'minFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_min_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n</sky-form-errors>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.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-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}: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-control-label{color:#686c73;font-size:13px}.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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{\n      'sky-control-label-required': !labelText && required && hasLabelComponent\n    }\"\n  >\n    <ng-container *ngIf=\"labelText; else labelContent\">\n      <span\n        *ngIf=\"!labelHidden\"\n        class=\"sky-control-label sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': required\n        }\"\n        >{{ labelText }}</span\n      ><sky-help-inline\n        *ngIf=\"helpPopoverContent || helpKey\"\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    </ng-container>\n    <span\n      class=\"sky-screen-reader-only\"\n      *ngIf=\"required && (hasLabelComponent || labelText)\"\n      >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n    >\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\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    <ng-container *ngIf=\"showFileAttachmentButton\">\n      <button\n        *ngIf=\"showFileAttachmentButton\"\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        skyId\n        [attr.aria-describedby]=\"\n          (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n        \"\n        [attr.aria-label]=\"\n          value\n            ? ('skyux_file_attachment_button_label_replace_file_label'\n              | skyLibResources: fileName)\n            : ('skyux_file_attachment_button_label_choose_file_label'\n              | skyLibResources)\n        \"\n        [attr.aria-labelledby]=\"\n          attachButton.id +\n          ' ' +\n          (labelText\n            ? labelElementId\n            : hasLabelComponent\n              ? labelComponents?.get(0)?.labelContentId?.id\n              : undefined)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        #attachButton=\"skyId\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    </ng-container>\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    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"fileName\"\n        (click)=\"emitClick()\"\n      >\n        {{ truncatedFileName }}\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      skyId\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n      \"\n      [attr.aria-labelledby]=\"\n        deleteButton.id +\n        ' ' +\n        (hasLabelComponent\n          ? labelComponents?.get(0)?.labelContentId?.id\n          : undefined)\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n      #deleteButton=\"skyId\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\" />\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<div skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n  >\n    {{ hintText }}\n  </div>\n</div>\n\n<sky-form-errors\n  *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n  [id]=\"errorId\"\n  [errors]=\"\n    ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n  \"\n  [labelText]=\"labelText\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'fileType'\"\n    [errorName]=\"'fileType'\"\n    [errorText]=\"\n      'skyux_file_attachment_file_type_error_label_text'\n        | skyLibResources: fileErrorParam\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'maxFileSize'\"\n    [errorName]=\"'maxFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_max_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'minFileSize'\"\n    [errorName]=\"'minFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_min_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n</sky-form-errors>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.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-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}: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-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1895,7 +1884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                 }] }], propDecorators: { acceptedTypes: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], helpPopoverContent: [{
                 type: Input
             }], helpPopoverTitle: [{
@@ -2184,14 +2174,14 @@ class SkyFileDropComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", 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", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
             SkyFileAttachmentService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': labelHidden,\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required,\n      }\"\n      >{{ labelText }}</span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_file_attachment_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <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        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drag_file_here'\n                | 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\" />\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-font-display-3\">\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\" />\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n        </div>\n      </div>\n\n      <div class=\"sky-file-drop-contents-custom\" #customEl>\n        <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-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_link_label' | skyLibResources\n              }}\n            </div>\n          </div>\n          <div class=\"sky-margin-stacked-xs\">\n            <input\n              type=\"text\"\n              class=\"sky-form-control\"\n              [attr.aria-label]=\"\n                linkUploadAriaLabel ||\n                ('skyux_file_attachment_file_upload_link_label'\n                  | skyLibResources)\n              \"\n              [attr.aria-describedby]=\"uploadHintText.id\"\n              [attr.aria-invalid]=\"!!rejectedFiles.length\"\n              [attr.aria-errormessage]=\"\n                labelText && rejectedFiles.length ? errorId : undefined\n              \"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #uploadHintText=\"skyId\"\n            class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\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_link_done' | skyLibResources\n            }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div skyId #hintTextEl=\"skyId\">\n    <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n      {{ hintText }}\n    </div>\n  </div>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"labelText && rejectedFiles.length\"\n  class=\"sky-file-drop-errors\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"rejectedFiles.length\"\n>\n  <div *ngFor=\"let rejectedFile of rejectedFiles\">\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'fileType'\"\n      errorName=\"fileType\"\n      [errorText]=\"\n        'skyux_file_attachment_file_type_error_label_text_with_name'\n          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n      errorName=\"maxFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_max_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n      errorName=\"minFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_min_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n      errorName=\"validate\"\n      [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n    />\n  </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{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-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type){margin-bottom:0}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}: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;inset: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-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.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}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }] }); }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': labelHidden\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_file_attachment_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <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        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drag_file_here'\n                | 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\" />\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-font-display-3\">\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\" />\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n        </div>\n      </div>\n\n      <div class=\"sky-file-drop-contents-custom\" #customEl>\n        <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-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_link_label' | skyLibResources\n              }}\n            </div>\n          </div>\n          <div class=\"sky-margin-stacked-xs\">\n            <input\n              type=\"text\"\n              class=\"sky-form-control\"\n              [attr.aria-label]=\"\n                linkUploadAriaLabel ||\n                ('skyux_file_attachment_file_upload_link_label'\n                  | skyLibResources)\n              \"\n              [attr.aria-describedby]=\"uploadHintText.id\"\n              [attr.aria-invalid]=\"!!rejectedFiles.length\"\n              [attr.aria-errormessage]=\"\n                labelText && rejectedFiles.length ? errorId : undefined\n              \"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #uploadHintText=\"skyId\"\n            class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\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_link_done' | skyLibResources\n            }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div skyId #hintTextEl=\"skyId\">\n    <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n      {{ hintText }}\n    </div>\n  </div>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"labelText && rejectedFiles.length\"\n  class=\"sky-file-drop-errors\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"rejectedFiles.length\"\n>\n  <div *ngFor=\"let rejectedFile of rejectedFiles\">\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'fileType'\"\n      errorName=\"fileType\"\n      [errorText]=\"\n        'skyux_file_attachment_file_type_error_label_text_with_name'\n          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n      errorName=\"maxFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_max_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n      errorName=\"minFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_min_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n      errorName=\"validate\"\n      [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n    />\n  </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{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-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type){margin-bottom:0}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}: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;inset: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-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.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}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyFileDropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-file-drop', providers: [
                         SkyFileAttachmentService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': labelHidden,\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required,\n      }\"\n      >{{ labelText }}</span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_file_attachment_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <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        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drag_file_here'\n                | 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\" />\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-font-display-3\">\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\" />\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n        </div>\n      </div>\n\n      <div class=\"sky-file-drop-contents-custom\" #customEl>\n        <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-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_link_label' | skyLibResources\n              }}\n            </div>\n          </div>\n          <div class=\"sky-margin-stacked-xs\">\n            <input\n              type=\"text\"\n              class=\"sky-form-control\"\n              [attr.aria-label]=\"\n                linkUploadAriaLabel ||\n                ('skyux_file_attachment_file_upload_link_label'\n                  | skyLibResources)\n              \"\n              [attr.aria-describedby]=\"uploadHintText.id\"\n              [attr.aria-invalid]=\"!!rejectedFiles.length\"\n              [attr.aria-errormessage]=\"\n                labelText && rejectedFiles.length ? errorId : undefined\n              \"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #uploadHintText=\"skyId\"\n            class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\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_link_done' | skyLibResources\n            }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div skyId #hintTextEl=\"skyId\">\n    <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n      {{ hintText }}\n    </div>\n  </div>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"labelText && rejectedFiles.length\"\n  class=\"sky-file-drop-errors\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"rejectedFiles.length\"\n>\n  <div *ngFor=\"let rejectedFile of rejectedFiles\">\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'fileType'\"\n      errorName=\"fileType\"\n      [errorText]=\"\n        'skyux_file_attachment_file_type_error_label_text_with_name'\n          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n      errorName=\"maxFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_max_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n      errorName=\"minFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_min_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n      errorName=\"validate\"\n      [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n    />\n  </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{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-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type){margin-bottom:0}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}: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;inset: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-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.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}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
+                    ], template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': labelHidden\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_file_attachment_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <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        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drag_file_here'\n                | 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\" />\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-font-display-3\">\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\" />\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-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n        </div>\n      </div>\n\n      <div class=\"sky-file-drop-contents-custom\" #customEl>\n        <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-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_link_label' | skyLibResources\n              }}\n            </div>\n          </div>\n          <div class=\"sky-margin-stacked-xs\">\n            <input\n              type=\"text\"\n              class=\"sky-form-control\"\n              [attr.aria-label]=\"\n                linkUploadAriaLabel ||\n                ('skyux_file_attachment_file_upload_link_label'\n                  | skyLibResources)\n              \"\n              [attr.aria-describedby]=\"uploadHintText.id\"\n              [attr.aria-invalid]=\"!!rejectedFiles.length\"\n              [attr.aria-errormessage]=\"\n                labelText && rejectedFiles.length ? errorId : undefined\n              \"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #uploadHintText=\"skyId\"\n            class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\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_link_done' | skyLibResources\n            }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div skyId #hintTextEl=\"skyId\">\n    <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n      {{ hintText }}\n    </div>\n  </div>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"labelText && rejectedFiles.length\"\n  class=\"sky-file-drop-errors\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"rejectedFiles.length\"\n>\n  <div *ngFor=\"let rejectedFile of rejectedFiles\">\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'fileType'\"\n      errorName=\"fileType\"\n      [errorText]=\"\n        'skyux_file_attachment_file_type_error_label_text_with_name'\n          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n      errorName=\"maxFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_max_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n      errorName=\"minFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_min_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n      errorName=\"validate\"\n      [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n    />\n  </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{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-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}: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-col:not(:last-of-type){margin-bottom:0}: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-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}: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;inset: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-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.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}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
         }], propDecorators: { filesChanged: [{
                 type: Output
             }], linkInputBlur: [{
@@ -2832,7 +2822,7 @@ class SkyInputBoxComponent {
                 provide: SKY_FORM_ERRORS_ENABLED,
                 useValue: true,
             },
-        ], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled,\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled,\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\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              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  <label\n    *ngIf=\"labelText\"\n    class=\"sky-control-label\"\n    [attr.aria-label]=\"\n      characterLimit !== undefined\n        ? labelText +\n          ' ' +\n          ('skyux_character_count_message'\n            | skyLibResources: characterCountScreenReader : characterLimit)\n        : null\n    \"\n    [for]=\"controlId\"\n    [id]=\"labelId\"\n    [ngClass]=\"{\n      'sky-control-label-required': required,\n    }\"\n    >{{ labelText }}</label\n  >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <sky-help-inline\n    *ngIf=\"helpPopoverContent || helpKey\"\n    class=\"sky-control-help\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverContent]=\"helpPopoverContent\"\n    [popoverTitle]=\"helpPopoverTitle\"\n  />\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <sky-character-counter-indicator\n    *ngIf=\"characterLimit !== undefined\"\n    [characterCount]=\"controlDir?.value?.length || 0\"\n    [characterCountLimit]=\"characterLimit\"\n  />\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  <ng-container\n    *ngIf=\"hostInputTemplate\"\n    [ngTemplateOutlet]=\"hostInputTemplate\"\n  />\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  <ng-container\n    *ngIf=\"hostButtonsLeftTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsLeftTemplate\"\n  />\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  />\n  <ng-container\n    *ngIf=\"hostButtonsTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  <ng-container\n    *ngIf=\"hostButtonsInsetTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsInsetTemplate\"\n  />\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetTemplate\"\n    />\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 select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetLeftTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n    [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  <div\n    *ngIf=\"hintText || hostHintText\"\n    class=\"sky-font-deemphasized sky-input-box-hint-text\"\n    [ngClass]=\"{\n      'sky-input-box-hint-text-hidden': hintTextHidden,\n      'sky-screen-reader-only': hintTextScreenReaderOnly,\n    }\"\n    [id]=\"hintTextId\"\n  >\n    {{ hintText | skyInputBoxHintText: hostHintText }}\n  </div>\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}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-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.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 var(--sky-highlight-color-danger);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{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-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-help{z-index:4}.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:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.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{margin-top:-23px;padding-top:26px}.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:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.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-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.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}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-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{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.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 var(--sky-highlight-color-danger);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 var(--sky-highlight-color-danger);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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i4$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\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              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  <label\n    *ngIf=\"labelText\"\n    class=\"sky-control-label\"\n    [attr.aria-label]=\"\n      characterLimit !== undefined\n        ? labelText +\n          ' ' +\n          ('skyux_character_count_message'\n            | skyLibResources: characterCountScreenReader : characterLimit)\n        : null\n    \"\n    [for]=\"controlId\"\n    [id]=\"labelId\"\n    [ngClass]=\"{\n      'sky-control-label-required': required\n    }\"\n    >{{ labelText }}</label\n  >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <sky-help-inline\n    *ngIf=\"helpPopoverContent || helpKey\"\n    class=\"sky-control-help\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverContent]=\"helpPopoverContent\"\n    [popoverTitle]=\"helpPopoverTitle\"\n  />\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <sky-character-counter-indicator\n    *ngIf=\"characterLimit !== undefined\"\n    [characterCount]=\"controlDir?.value?.length || 0\"\n    [characterCountLimit]=\"characterLimit\"\n  />\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  <ng-container\n    *ngIf=\"hostInputTemplate\"\n    [ngTemplateOutlet]=\"hostInputTemplate\"\n  />\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  <ng-container\n    *ngIf=\"hostButtonsLeftTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsLeftTemplate\"\n  />\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  />\n  <ng-container\n    *ngIf=\"hostButtonsTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  <ng-container\n    *ngIf=\"hostButtonsInsetTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsInsetTemplate\"\n  />\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetTemplate\"\n    />\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 select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetLeftTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n    [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  <div\n    *ngIf=\"hintText || hostHintText\"\n    class=\"sky-font-deemphasized sky-input-box-hint-text\"\n    [ngClass]=\"{\n      'sky-input-box-hint-text-hidden': hintTextHidden,\n      'sky-screen-reader-only': hintTextScreenReaderOnly\n    }\"\n    [id]=\"hintTextId\"\n  >\n    {{ hintText | skyInputBoxHintText: hostHintText }}\n  </div>\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}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-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.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 var(--sky-highlight-color-danger);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{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-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-help{z-index:4}.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:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.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{margin-top:-23px;padding-top:26px}.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:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.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-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.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}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-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{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.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 var(--sky-highlight-color-danger);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 var(--sky-highlight-color-danger);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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i4$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
             type: Component,
@@ -2844,7 +2834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                             provide: SKY_FORM_ERRORS_ENABLED,
                             useValue: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled,\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled,\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\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              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  <label\n    *ngIf=\"labelText\"\n    class=\"sky-control-label\"\n    [attr.aria-label]=\"\n      characterLimit !== undefined\n        ? labelText +\n          ' ' +\n          ('skyux_character_count_message'\n            | skyLibResources: characterCountScreenReader : characterLimit)\n        : null\n    \"\n    [for]=\"controlId\"\n    [id]=\"labelId\"\n    [ngClass]=\"{\n      'sky-control-label-required': required,\n    }\"\n    >{{ labelText }}</label\n  >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <sky-help-inline\n    *ngIf=\"helpPopoverContent || helpKey\"\n    class=\"sky-control-help\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverContent]=\"helpPopoverContent\"\n    [popoverTitle]=\"helpPopoverTitle\"\n  />\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <sky-character-counter-indicator\n    *ngIf=\"characterLimit !== undefined\"\n    [characterCount]=\"controlDir?.value?.length || 0\"\n    [characterCountLimit]=\"characterLimit\"\n  />\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  <ng-container\n    *ngIf=\"hostInputTemplate\"\n    [ngTemplateOutlet]=\"hostInputTemplate\"\n  />\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  <ng-container\n    *ngIf=\"hostButtonsLeftTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsLeftTemplate\"\n  />\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  />\n  <ng-container\n    *ngIf=\"hostButtonsTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  <ng-container\n    *ngIf=\"hostButtonsInsetTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsInsetTemplate\"\n  />\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetTemplate\"\n    />\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 select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetLeftTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n    [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  <div\n    *ngIf=\"hintText || hostHintText\"\n    class=\"sky-font-deemphasized sky-input-box-hint-text\"\n    [ngClass]=\"{\n      'sky-input-box-hint-text-hidden': hintTextHidden,\n      'sky-screen-reader-only': hintTextScreenReaderOnly,\n    }\"\n    [id]=\"hintTextId\"\n  >\n    {{ hintText | skyInputBoxHintText: hostHintText }}\n  </div>\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}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-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.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 var(--sky-highlight-color-danger);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{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-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-help{z-index:4}.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:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.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{margin-top:-23px;padding-top:26px}.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:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.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-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.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}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-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{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.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 var(--sky-highlight-color-danger);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 var(--sky-highlight-color-danger);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"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\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\" />\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              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  <label\n    *ngIf=\"labelText\"\n    class=\"sky-control-label\"\n    [attr.aria-label]=\"\n      characterLimit !== undefined\n        ? labelText +\n          ' ' +\n          ('skyux_character_count_message'\n            | skyLibResources: characterCountScreenReader : characterLimit)\n        : null\n    \"\n    [for]=\"controlId\"\n    [id]=\"labelId\"\n    [ngClass]=\"{\n      'sky-control-label-required': required\n    }\"\n    >{{ labelText }}</label\n  >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <sky-help-inline\n    *ngIf=\"helpPopoverContent || helpKey\"\n    class=\"sky-control-help\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverContent]=\"helpPopoverContent\"\n    [popoverTitle]=\"helpPopoverTitle\"\n  />\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <sky-character-counter-indicator\n    *ngIf=\"characterLimit !== undefined\"\n    [characterCount]=\"controlDir?.value?.length || 0\"\n    [characterCountLimit]=\"characterLimit\"\n  />\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  <ng-container\n    *ngIf=\"hostInputTemplate\"\n    [ngTemplateOutlet]=\"hostInputTemplate\"\n  />\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  <ng-container\n    *ngIf=\"hostButtonsLeftTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsLeftTemplate\"\n  />\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  />\n  <ng-container\n    *ngIf=\"hostButtonsTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  <ng-container\n    *ngIf=\"hostButtonsInsetTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsInsetTemplate\"\n  />\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetTemplate\"\n    />\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 select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetLeftTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n    [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  <div\n    *ngIf=\"hintText || hostHintText\"\n    class=\"sky-font-deemphasized sky-input-box-hint-text\"\n    [ngClass]=\"{\n      'sky-input-box-hint-text-hidden': hintTextHidden,\n      'sky-screen-reader-only': hintTextScreenReaderOnly\n    }\"\n    [id]=\"hintTextId\"\n  >\n    {{ hintText | skyInputBoxHintText: hostHintText }}\n  </div>\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}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-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.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 var(--sky-highlight-color-danger);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{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-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-help{z-index:4}.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:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.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{margin-top:-23px;padding-top:26px}.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:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.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-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.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}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-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{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.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 var(--sky-highlight-color-danger);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 var(--sky-highlight-color-danger);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"] }]
         }], propDecorators: { hasErrors: [{
                 type: Input
             }], disabled: [{
@@ -3017,10 +3007,9 @@ class SkyRadioComponent {
      * @default false
      */
     set disabled(value) {
-        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
-        if (coercedValue !== this.disabled) {
-            this.#_disabled = coercedValue;
-            this.disabledChange.next(coercedValue);
+        if (value !== this.disabled) {
+            this.#_disabled = value;
+            this.disabledChange.next(value);
             this.#changeDetector.markForCheck();
         }
     }
@@ -3287,7 +3276,7 @@ class SkyRadioComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #onTouchedCallback;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, host: { properties: { "style.display": "this.display" } }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n    </span>\n    <ng-container *ngIf=\"labelText; else labelElement\">\n      <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n    </ng-container>\n    <ng-template #labelElement>\n      <ng-content select=\"sky-radio-label\" />\n    </ng-template>\n  </label>\n  <sky-help-inline\n    *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n    class=\"sky-radio-help-inline\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverTitle]=\"helpPopoverTitle\"\n    [popoverContent]=\"helpPopoverContent\"\n  />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n  <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n    {{ hintText }}\n  </div>\n</div>\n", styles: [":host{display:inline-block}.sky-radio-outer-wrapper,.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, host: { properties: { "style.display": "this.display" } }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n    </span>\n    <ng-container *ngIf=\"labelText; else labelElement\">\n      <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n    </ng-container>\n    <ng-template #labelElement>\n      <ng-content select=\"sky-radio-label\" />\n    </ng-template>\n  </label>\n  <sky-help-inline\n    *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n    class=\"sky-radio-help-inline\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverTitle]=\"helpPopoverTitle\"\n    [popoverContent]=\"helpPopoverContent\"\n  />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n  <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n    {{ hintText }}\n  </div>\n</div>\n", styles: [":host{display:inline-block}.sky-radio-outer-wrapper,.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyRadioComponent, decorators: [{
             type: Component,
@@ -3295,7 +3284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
         }], ctorParameters: () => [], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], id: [{
                 type: Input
             }], label: [{
@@ -3391,9 +3381,8 @@ class SkyRadioGroupComponent {
      * @default false
      */
     set disabled(value) {
-        const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
-        if (this.#_disabled !== newDisabledState) {
-            this.#_disabled = newDisabledState;
+        if (this.#_disabled !== value) {
+            this.#_disabled = value;
             this.#updateRadioButtonDisabled();
         }
     }
@@ -3659,7 +3648,7 @@ class SkyRadioGroupComponent {
         this.stackedXL = !!this.headingLevel && this.stacked;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: "required", stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "style.display": "this.display", "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.1", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: "required", stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "style.display": "this.display", "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
             SkyRadioGroupIdService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
         ], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': required,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
@@ -3679,7 +3668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
             }], ariaLabel: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], headingLevel: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]