@skyux/forms 11.7.0 → 11.9.0

package/fesm2022/skyux-forms.mjs

@@ -108,9 +108,6 @@ const RESOURCES = {
             message: 'This file type is invalid',
         },
         skyux_file_attachment_file_upload_link_label: { message: 'Link to a file' },
-        skyux_file_attachment_file_upload_link_placeholder: {
-            message: 'Start with http:// or https://',
-        },
         skyux_file_attachment_file_upload_or_click_to_browse: {
             message: 'or click to browse',
         },
@@ -1956,970 +1953,973 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
-const MAX_FILE_SIZE_DEFAULT = 500000;
-const MIN_FILE_SIZE_DEFAULT = 0;
 /**
- * Provides an element to attach multiple files where users can browse or drag and drop local files
- * or provide hyperlinks to external files. You can leave the contents of the component
- * blank to display the drop zone's default UI, or you can specify custom content to
- * display instead. When the module initializes, it disables the ability to drag and
- * drop files for the entire window to prevent the browser from opening files that are
- * accidentally dropped outside the target zone. If you implement your own file drop functionality
- * outside of the file drop component, you can place the `sky-file-drop-target` CSS class
- * on the element that receives drop events to exempt it from the drop exclusion rule.
+ * @internal
  */
-class SkyFileDropComponent {
+class SkyInputBoxHostService {
     constructor() {
-        /**
-         * Fires when users add or remove files.
-         */
-        this.filesChanged = new EventEmitter();
-        /**
-         * Fires when the link input box triggers a blur event.
-         */
-        this.linkInputBlur = new EventEmitter();
-        /**
-         * Fires when users add or remove links.
-         */
-        this.linkChanged = new EventEmitter();
-        /**
-         * Whether users can drag and drop multiple files at the same time.
-         */
-        this.multiple = true;
-        /**
-         * Whether to disable the option to browse for files to attach.
-         */
-        this.noClick = false;
-        /**
-         * Whether to display the option to attach files from URLs rather than from local devices.
-         */
-        this.allowLinks = false;
-        /**
-         * Whether to hide `labelText` from view.
-         */
-        this.labelHidden = false;
-        /**
-         * Whether uploading a file or link is required.
-         * When you set this property to `true`, the component adds `aria-required` and `required`
-         * attributes to the input elements so that screen readers announce an invalid state until the input element
-         * is complete.
-         * For more information about the `aria-required` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-required).
-         */
-        this.required = false;
-        /**
-         * Whether the file attachment is stacked on another form component. When specified, the appropriate
-         * vertical spacing is automatically added to the file attachment.
-         */
-        this.stacked = false;
-        this.rejectedOver = false;
-        this.acceptedOver = false;
-        this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT;
-        this.#_minFileSize = MIN_FILE_SIZE_DEFAULT;
-        this.#fileAttachmentService = inject(SkyFileAttachmentService);
-        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
-        this.#resourcesSvc = inject(SkyLibResourcesService);
-        this.#idSvc = inject(SkyIdService);
-        this.errorId = this.#idSvc.generateId();
-        this.rejectedFiles = [];
+        this.#requiredSubject = new BehaviorSubject(false);
+        this.required = this.#requiredSubject.asObservable();
     }
-    /**
-     * The minimum size in bytes for valid files.
-     * @default 0
-     */
-    set minFileSize(value) {
-        this.#_minFileSize = value ?? MIN_FILE_SIZE_DEFAULT;
+    #host;
+    #requiredSubject;
+    get controlId() {
+        return this.#host?.controlId ?? '';
     }
-    get minFileSize() {
-        return this.#_minFileSize;
+    get labelId() {
+        return this.#host?.labelText ? this.#host.labelId : '';
     }
-    /**
-     * The maximum size in bytes for valid files.
-     * @default 500000
-     */
-    set maxFileSize(value) {
-        this.#_maxFileSize = value ?? MAX_FILE_SIZE_DEFAULT;
+    get labelText() {
+        return this.#host?.labelText ?? '';
     }
-    get maxFileSize() {
-        return this.#_maxFileSize;
+    get ariaDescribedBy() {
+        return this.#ariaDescribedBy;
+    }
+    #ariaDescribedBy;
+    init(host) {
+        this.#host = host;
+        this.#ariaDescribedBy = host.ariaDescribedBy.asObservable();
     }
-    #enterEventTarget;
-    #_maxFileSize;
-    #_minFileSize;
-    #fileAttachmentService;
-    #liveAnnouncerSvc;
-    #resourcesSvc;
-    #idSvc;
     ngOnDestroy() {
-        this.filesChanged.complete();
-        this.linkChanged.complete();
-        this.linkInputBlur.complete();
+        this.#requiredSubject.complete();
     }
-    dropClicked() {
-        if (!this.noClick && this.inputEl) {
-            this.inputEl.nativeElement.click();
+    populate(args) {
+        if (!this.#host) {
+            throw new Error('Cannot populate the input box because `SkyInputBoxHostService` has not yet been initialized. Try running the `populate` method within an Angular lifecycle hook, such as `ngOnInit`.');
         }
+        this.#host.populate(args);
     }
-    fileChangeEvent(fileChangeEvent) {
-        this.#handleFiles(fileChangeEvent.target?.files);
-    }
-    fileDragEnter(dragEnterEvent) {
-        // Save this target to know when the drag event leaves
-        this.#enterEventTarget = dragEnterEvent.target;
-        dragEnterEvent.stopPropagation();
-        dragEnterEvent.preventDefault();
-    }
-    fileDragOver(dragOverEvent) {
-        const transfer = dragOverEvent.dataTransfer;
-        dragOverEvent.stopPropagation();
-        dragOverEvent.preventDefault();
-        if (transfer) {
-            if (transfer.items) {
-                const files = Array.from(transfer.items);
-                for (const file of files) {
-                    if (file.type &&
-                        this.#fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
-                        this.rejectedOver = true;
-                        this.acceptedOver = false;
-                        return;
-                    }
-                }
-                if (files.length > 0 && !this.acceptedOver) {
-                    this.rejectedOver = false;
-                    this.acceptedOver = true;
-                }
-            } /* istanbul ignore next: untestable */
-            else if (transfer.files) {
-                // If the browser does not support DataTransfer.items,
-                // defer file-type checking to drop handler.
-                // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
-                this.rejectedOver = false;
-                this.acceptedOver = true;
-            }
+    setHintText(hintText) {
+        if (!this.#host) {
+            throw new Error('Cannot set hint text on the input box because `SkyInputBoxHostService` has not yet been initialized.');
         }
+        this.#host.setHostHintText(hintText);
     }
-    fileDrop(dropEvent) {
-        dropEvent.stopPropagation();
-        dropEvent.preventDefault();
-        this.#enterEventTarget = undefined;
-        this.rejectedOver = false;
-        this.acceptedOver = false;
-        if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
-            const hasDirectory = this.#fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files);
-            const invalidNumberOfFiles = !this.multiple && dropEvent.dataTransfer.files.length > 1;
-            if (hasDirectory || invalidNumberOfFiles) {
-                return;
-            }
-            this.#handleFiles(dropEvent.dataTransfer.files);
+    setHintTextHidden(hide) {
+        if (!this.#host) {
+            throw new Error('Cannot hide hint text on the input box because `SkyInputBoxHostService` has not yet been initialized.');
         }
+        this.#host.setHintTextHidden(hide);
     }
-    fileDragLeave(dragLeaveEvent) {
-        if (this.#enterEventTarget === dragLeaveEvent.target) {
-            this.rejectedOver = false;
-            this.acceptedOver = false;
+    setHintTextScreenReaderOnly(hide) {
+        if (!this.#host) {
+            throw new Error('Cannot remove hint text on the input box because `SkyInputBoxHostService` has not yet been initialized.');
         }
+        this.#host.setHintTextScreenReaderOnly(hide);
     }
-    addLinkEnter(event) {
-        if (event.which === 13) {
-            this.addLink(event);
-        }
+    /**
+     * Set required so that input box displays the label correctly. When the input is supplied by the consumer it is a content
+     * child that input box can read required from and this is unnecessary. When the input is supplied internally by the
+     * component the input box does not have a ref to it, so the component needs to inform the input box of its required state.
+     */
+    setRequired(required) {
+        this.#requiredSubject.next(required);
     }
-    addLink(event) {
-        event.preventDefault();
-        this.linkChanged.emit({ url: this.linkUrl });
-        this.#announceState('skyux_file_attachment_file_upload_link_added', this.linkUrl);
-        this.linkUrl = undefined;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHostService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyInputBoxControlDirective {
+    set autocomplete(value) {
+        this.#_autocomplete = value;
     }
-    onLinkBlur() {
-        this.linkInputBlur.emit();
+    get autocomplete() {
+        return this.#_autocomplete || (this.#hostSvc ? 'off' : undefined);
     }
-    #announceState(resourceString, ...args) {
-        this.#resourcesSvc
-            .getString(resourceString, ...args)
-            .pipe(take(1))
-            .subscribe((internationalizedString) => {
-            this.#liveAnnouncerSvc.announce(internationalizedString);
-        });
+    #_autocomplete;
+    #hostSvc = inject(SkyInputBoxHostService, { optional: true });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: SkyInputBoxControlDirective, isStandalone: true, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: { autocomplete: "autocomplete" }, host: { properties: { "autocomplete": "this.autocomplete" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    'input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)',
+                    standalone: true,
+                }]
+        }], propDecorators: { autocomplete: [{
+                type: HostBinding,
+                args: ['autocomplete']
+            }, {
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyInputBoxHintTextPipe {
+    transform(hintText, hostHintText) {
+        if (hintText && hostHintText) {
+            return `${hintText} ${hostHintText}`;
+        }
+        return hintText || hostHintText;
     }
-    #emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray) {
-        if (totalFiles === rejectedFileArray.length + validFileArray.length) {
-            this.filesChanged.emit({
-                files: validFileArray,
-                rejectedFiles: rejectedFileArray,
-            });
-            if (this.inputEl) {
-                this.inputEl.nativeElement.value = '';
-            }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHintTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHintTextPipe, isStandalone: true, name: "skyInputBoxHintText" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHintTextPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'skyInputBoxHintText',
+                }]
+        }] });
+
+const ARIA_DESCRIBEDBY_ATTR = 'aria-describedby';
+/**
+ * @internal
+ */
+class SkyInputBoxAdapterService {
+    #renderer = inject(RendererFactory2).createRenderer(undefined, null);
+    focusControl(elRef) {
+        const control = elRef.nativeElement.querySelector('.sky-form-control');
+        /* istanbul ignore else */
+        if (control) {
+            control.focus();
         }
     }
-    #filesRejected(file, validFileArray, rejectedFileArray, totalFiles) {
-        rejectedFileArray.push(file);
-        this.#emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
-    }
-    #loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
-        const reader = new FileReader();
-        reader.addEventListener('load', (event) => {
-            file.url = event.target.result;
-            validFileArray.push(file);
-            fileDrop.#emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
-            this.#announceState('skyux_file_attachment_file_upload_file_added', file.file.name);
-        });
-        reader.addEventListener('error', () => {
-            fileDrop.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
-        });
-        reader.addEventListener('abort', () => {
-            fileDrop.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
-        });
-        reader.readAsDataURL(file.file);
-    }
-    #handleFiles(files) {
-        if (files) {
-            const validFileArray = [];
-            const rejectedFileArray = [];
-            const totalFiles = files.length;
-            const processedFiles = this.#fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
-            for (const file of processedFiles) {
-                if (file.errorType) {
-                    this.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
-                }
-                else {
-                    this.#loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
-                }
-            }
-            this.rejectedFiles = rejectedFileArray;
-        }
+    /**
+     * Returns the inline help element.
+     */
+    getInlineHelpElement(elRef) {
+        return elRef.nativeElement.querySelector('.sky-control-help');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", 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" } }, providers: [
-            SkyFileAttachmentService,
-            { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n  @if (labelText) {\n    <legend\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      >\n      @if (required) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    </legend>\n  }\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        [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        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n      ></button>\n\n      <input\n        #fileInput\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      />\n\n      @if (customEl.children.length === 0) {\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\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'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n          </div>\n        </div>\n      }\n\n      <div #customEl class=\"sky-file-drop-contents-custom\">\n        <ng-content />\n      </div>\n    </div>\n    @if (allowLinks) {\n      <div class=\"sky-file-drop-col\">\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'\n                    | 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              #uploadHintText=\"skyId\"\n              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    }\n  </div>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n</fieldset>\n<sky-form-errors\n  [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"rejectedFiles.length > 0\"\n>\n  @for (rejectedFile of rejectedFiles; track rejectedFile) {\n    <div>\n      @if (rejectedFile.errorType === 'fileType') {\n        <sky-form-error\n          errorName=\"fileType\"\n          [errorText]=\"\n            'skyux_file_attachment_file_type_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : rejectedFile.errorParam\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'maxFileSize') {\n        <sky-form-error\n          errorName=\"maxFileSize\"\n          [errorText]=\"\n            acceptedTypesErrorMessage ??\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      } @else if (rejectedFile.errorType === 'minFileSize') {\n        <sky-form-error\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      } @else if (\n        rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n      ) {\n        <sky-form-error\n          errorName=\"validate\"\n          [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n        />\n      }\n    </div>\n  }\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-file-drop', providers: [
-                        SkyFileAttachmentService,
-                        { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        SkyFileSizePipe,
-                        SkyFormErrorComponent,
-                        SkyFormErrorsComponent,
-                        SkyFormsResourcesModule,
-                        SkyHelpInlineModule,
-                        SkyIconModule,
-                        SkyIdModule,
-                    ], template: "<fieldset>\n  @if (labelText) {\n    <legend\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      >\n      @if (required) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    </legend>\n  }\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        [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        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n      ></button>\n\n      <input\n        #fileInput\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      />\n\n      @if (customEl.children.length === 0) {\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\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'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n          </div>\n        </div>\n      }\n\n      <div #customEl class=\"sky-file-drop-contents-custom\">\n        <ng-content />\n      </div>\n    </div>\n    @if (allowLinks) {\n      <div class=\"sky-file-drop-col\">\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'\n                    | 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              #uploadHintText=\"skyId\"\n              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    }\n  </div>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n</fieldset>\n<sky-form-errors\n  [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"rejectedFiles.length > 0\"\n>\n  @for (rejectedFile of rejectedFiles; track rejectedFile) {\n    <div>\n      @if (rejectedFile.errorType === 'fileType') {\n        <sky-form-error\n          errorName=\"fileType\"\n          [errorText]=\"\n            'skyux_file_attachment_file_type_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : rejectedFile.errorParam\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'maxFileSize') {\n        <sky-form-error\n          errorName=\"maxFileSize\"\n          [errorText]=\"\n            acceptedTypesErrorMessage ??\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      } @else if (rejectedFile.errorType === 'minFileSize') {\n        <sky-form-error\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      } @else if (\n        rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n      ) {\n        <sky-form-error\n          errorName=\"validate\"\n          [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n        />\n      }\n    </div>\n  }\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: [{
-                type: Output
-            }], linkChanged: [{
-                type: Output
-            }], fileUploadAriaLabel: [{
-                type: Input
-            }], linkUploadAriaLabel: [{
-                type: Input
-            }], minFileSize: [{
-                type: Input
-            }], maxFileSize: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], validateFn: [{
-                type: Input
-            }], acceptedTypes: [{
-                type: Input
-            }], acceptedTypesErrorMessage: [{
-                type: Input
-            }], noClick: [{
-                type: Input
-            }], allowLinks: [{
-                type: Input
-            }], labelText: [{
-                type: Input
-            }], labelHidden: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hintText: [{
-                type: Input
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], helpPopoverContent: [{
-                type: Input
-            }], helpPopoverTitle: [{
-                type: Input
-            }], stacked: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.sky-margin-stacked-lg']
-            }], helpKey: [{
-                type: Input
-            }], inputEl: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }] } });
-
-class SkyFileItemComponent {
     /**
-     * The summary information to display about file attachments. For local files,
-     * the default summary includes the file name, file size, file preview, and a delete button.
-     * For external files, the default summary includes the URL and a delete button.
-     * You can include additional inputs to display user-entered metadata.
-     * @required
+     * Returns true if the provided element contains the focused element.
      */
-    set fileItem(value) {
-        this.#_fileItem = value;
-        if (value && 'file' in value) {
-            this.isFile = this.#fileItemService.isFile(value);
-            this.isImage = this.#fileItemService.isImage(value);
-            this.fileName = value.file.name;
-            this.fileSize = value.file.size;
-        }
-        else {
-            this.isFile = this.isImage = false;
-            this.fileName = '';
-            this.fileSize = undefined;
+    isFocusInElement(el) {
+        if (el) {
+            return (el === document.activeElement || el.contains(document.activeElement));
         }
-        this.url = value?.url ?? '';
-    }
-    get fileItem() {
-        return this.#_fileItem;
-    }
-    #_fileItem;
-    #differ;
-    #fileItemService;
-    #liveAnnouncerSvc;
-    #resourcesSvc;
-    constructor(differs, fileItemService) {
-        /**
-         * Fires when users select the delete button for an item. The deleted item is passed to the
-         * function.
-         */
-        this.deleteFile = new EventEmitter();
-        this.fileName = '';
-        this.url = '';
-        this.isFile = false;
-        this.isImage = false;
-        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
-        this.#resourcesSvc = inject(SkyLibResourcesService);
-        this.#differ = differs.find({}).create();
-        this.#fileItemService = fileItemService;
+        return false;
     }
-    ngDoCheck() {
-        if (this.fileItem) {
-            const changes = this.#differ.diff(this.fileItem);
-            if (changes) {
-                let cls;
-                const extensionUpper = this.#fileItemService.getFileExtensionUpper(this.fileItem);
-                let fileTypeUpper;
-                switch (extensionUpper) {
-                    case '.PDF':
-                        cls = 'pdf';
-                        break;
-                    case '.GZ':
-                    case '.RAR':
-                    case '.TGZ':
-                    case '.ZIP':
-                        cls = 'archive';
-                        break;
-                    case '.PPT':
-                    case '.PPTX':
-                        cls = 'powerpoint';
-                        break;
-                    case '.DOC':
-                    case '.DOCX':
-                        cls = 'word';
-                        break;
-                    case '.XLS':
-                    case '.XLSX':
-                        cls = 'excel';
-                        break;
-                    case '.TXT':
-                        cls = 'text';
-                        break;
-                    case '.HTM':
-                    case '.HTML':
-                        cls = 'code';
-                        break;
-                    default:
-                        break;
-                }
-                if (!cls) {
-                    fileTypeUpper = this.#fileItemService.getFileTypeUpper(this.fileItem);
-                    switch (fileTypeUpper.substr(0, fileTypeUpper.indexOf('/'))) {
-                        case 'AUDIO':
-                            cls = 'audio';
-                            break;
-                        case 'IMAGE':
-                            // Normally images are displayed as thumbnails, but if an image type is not recognized
-                            // as being widely supported by modern browsers (e.g. TIFF files) then an icon should
-                            // be displayed instead.
-                            cls = 'image';
-                            break;
-                        case 'TEXT':
-                            cls = 'text';
-                            break;
-                        case 'VIDEO':
-                            cls = 'video';
-                            break;
-                        default:
-                            break;
-                    }
-                }
-                this.icon = 'file-' + (cls ? cls + '-' : '') + 'o';
-            }
+    updateDescribedBy(inputRef, hintTextId, hintText) {
+        const inputEl = inputRef.nativeElement;
+        const describedByIds = inputEl
+            .getAttribute(ARIA_DESCRIBEDBY_ATTR)
+            ?.split(' ')
+            .map((id) => id.trim()) ?? [];
+        const hintTextIdIndex = describedByIds.indexOf(hintTextId);
+        const previousCount = describedByIds.length;
+        if (hintText && hintTextIdIndex < 0) {
+            describedByIds.push(hintTextId);
         }
-        else {
-            this.icon = undefined;
+        else if (!hintText && hintTextIdIndex >= 0) {
+            describedByIds.splice(hintTextIdIndex, 1);
+        }
+        if (describedByIds.length !== previousCount) {
+            this.#setDescribedByIds(inputEl, describedByIds);
         }
     }
-    itemDelete() {
-        this.deleteFile.emit(this.fileItem);
-        if (!this.isFile) {
-            this.#resourcesSvc
-                .getString('skyux_file_attachment_file_upload_link_removed', this.url)
-                .pipe(take(1))
-                .subscribe((resourceString) => {
-                this.#liveAnnouncerSvc.announce(resourceString);
-            });
+    #setDescribedByIds(inputEl, describedByIds) {
+        if (describedByIds.length === 0) {
+            this.#renderer.removeAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR);
         }
         else {
-            this.#resourcesSvc
-                .getString('skyux_file_attachment_file_upload_file_removed', this.fileName)
-                .pipe(take(1))
-                .subscribe((resourceString) => {
-                this.#liveAnnouncerSvc.announce(resourceString);
-            });
+            this.#renderer.setAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR, describedByIds.join(' '));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "@if (fileItem) {\n  <div class=\"sky-file-item sky-padding-even-default\">\n    <div class=\"sky-file-item-title\">\n      <div class=\"sky-file-item-name-container\">\n        <div class=\"sky-file-item-name\">\n          @if (isFile) {\n            <strong>{{ fileName }}</strong>\n          } @else {\n            <strong>{{ url }}</strong>\n          }\n        </div>\n        @if (isFile) {\n          <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n        }\n      </div>\n      <div class=\"sky-file-item-controls\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n          [attr.aria-label]=\"\n            'skyux_file_attachment_file_item_delete'\n              | skyLibResources: (isFile ? fileName : url)\n          \"\n          (click)=\"itemDelete()\"\n        >\n          <sky-icon icon=\"trash-o\" size=\"lg\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content\">\n      <div class=\"sky-file-item-preview\">\n        @if (isImage) {\n          <div class=\"sky-file-item-preview-img-container\">\n            <img\n              class=\"sky-file-item-preview-img\"\n              [src]=\"url\"\n              [alt]=\"\n                'skyux_file_attachment_file_upload_image_preview_alt_text'\n                  | skyLibResources\n              \"\n            />\n          </div>\n        } @else {\n          <div class=\"sky-file-item-preview-other\">\n            <sky-icon [icon]=\"icon\" />\n          </div>\n        }\n      </div>\n      <div class=\"sky-file-item-content-custom\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileItemComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', standalone: true, template: "@if (fileItem) {\n  <div class=\"sky-file-item sky-padding-even-default\">\n    <div class=\"sky-file-item-title\">\n      <div class=\"sky-file-item-name-container\">\n        <div class=\"sky-file-item-name\">\n          @if (isFile) {\n            <strong>{{ fileName }}</strong>\n          } @else {\n            <strong>{{ url }}</strong>\n          }\n        </div>\n        @if (isFile) {\n          <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n        }\n      </div>\n      <div class=\"sky-file-item-controls\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n          [attr.aria-label]=\"\n            'skyux_file_attachment_file_item_delete'\n              | skyLibResources: (isFile ? fileName : url)\n          \"\n          (click)=\"itemDelete()\"\n        >\n          <sky-icon icon=\"trash-o\" size=\"lg\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content\">\n      <div class=\"sky-file-item-preview\">\n        @if (isImage) {\n          <div class=\"sky-file-item-preview-img-container\">\n            <img\n              class=\"sky-file-item-preview-img\"\n              [src]=\"url\"\n              [alt]=\"\n                'skyux_file_attachment_file_upload_image_preview_alt_text'\n                  | skyLibResources\n              \"\n            />\n          </div>\n        } @else {\n          <div class=\"sky-file-item-preview-other\">\n            <sky-icon [icon]=\"icon\" />\n          </div>\n        }\n      </div>\n      <div class=\"sky-file-item-content-custom\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
-                type: Input
-            }], deleteFile: [{
-                type: Output
-            }] } });
-
-class SkyFileDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent], exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule],
-                    imports: [SkyFileDropComponent, SkyFileItemComponent],
-                }]
-        }] });
-
-/**
- * @deprecated Import either `SkyFileAttachmentModule` or `SkyFileDropModule`.
- */
-class SkyFileAttachmentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule], exports: [SkyFileAttachmentModule, SkyFileDropModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule, SkyFileAttachmentModule, SkyFileDropModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyFileAttachmentModule, SkyFileDropModule],
-                    imports: [SkyFileAttachmentModule, SkyFileDropModule],
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
+            type: Injectable
         }] });
 
 /**
- * @internal
+ * A wrapper component that provides styling and accessibility to form elements.
  */
-class SkyInputBoxHostService {
+class SkyInputBoxComponent {
     constructor() {
-        this.#requiredSubject = new BehaviorSubject(false);
-        this.required = this.#requiredSubject.asObservable();
+        this.#changeRef = inject(ChangeDetectorRef);
+        this.#inputBoxHostSvc = inject(SkyInputBoxHostService);
+        this.#adapterService = inject(SkyInputBoxAdapterService);
+        this.#idSvc = inject(SkyIdService);
+        this.#elementRef = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.formControlHasFocus = false;
+        this.hintTextHidden = false;
+        this.hintTextScreenReaderOnly = false;
+        this.controlId = this.#idSvc.generateId();
+        this.labelId = this.#idSvc.generateId();
+        this.errorId = this.#idSvc.generateId();
+        this.hintTextId = this.#idSvc.generateId();
+        this.ariaDescribedBy = new ReplaySubject(1);
+        this.cssClass = '';
+        this.characterCountScreenReader = 0;
+        this.#_stacked = false;
+        this.#ngUnsubscribe = new Subject();
     }
-    #host;
-    #requiredSubject;
-    get controlId() {
-        return this.#host?.controlId ?? '';
+    #changeRef;
+    #inputBoxHostSvc;
+    #adapterService;
+    #idSvc;
+    #elementRef;
+    #renderer;
+    /**
+     * The maximum number of characters allowed in the input. A [SKY UX character count](https://developer.blackbaud.com/skyux/components/character-count)
+     * will be placed on the input element with the appropriate validator.
+     */
+    set characterLimit(value) {
+        this.#_characterLimit =
+            value === undefined ? undefined : coerceNumberProperty(value, undefined);
+        this.#updateMaxLengthValidator();
     }
-    get labelId() {
-        return this.#host?.labelText ? this.#host.labelId : '';
+    get characterLimit() {
+        return this.#_characterLimit;
     }
-    get labelText() {
-        return this.#host?.labelText ?? '';
+    /**
+     * Whether the input box is stacked on another input box. When specified, the appropriate
+     * vertical spacing is automatically added to the input box.
+     */
+    set stacked(value) {
+        this.#_stacked = coerceBooleanProperty(value);
+        this.cssClass = this.#_stacked ? 'sky-margin-stacked-lg' : '';
+    }
+    /**
+     * [Persistent inline help text](https://developer.blackbaud.com/skyux/design/guidelines/user-assistance#inline-help) that provides
+     * additional context to the user.
+     */
+    set hintText(value) {
+        this.#_hintText = value;
+        this.ariaDescribedBy.next(value ? this.hintTextId : undefined);
+    }
+    get hintText() {
+        return this.#_hintText;
+    }
+    #requiredByFormField;
+    get isDisabled() {
+        return !!(this.disabled ||
+            this.controlDir?.control?.disabled ||
+            this.inputRef?.nativeElement?.disabled);
+    }
+    get hasErrorsComputed() {
+        if (this.hasErrors === undefined) {
+            return this.#controlHasErrors(this.controlDir);
+        }
+        return this.hasErrors;
     }
-    get ariaDescribedBy() {
-        return this.#ariaDescribedBy;
+    get required() {
+        return (this.#hasRequiredValidator() ||
+            this.inputRef?.nativeElement.required ||
+            this.#requiredByFormField);
     }
-    #ariaDescribedBy;
-    init(host) {
-        this.#host = host;
-        this.#ariaDescribedBy = host.ariaDescribedBy.asObservable();
+    #_stacked;
+    #_characterLimit;
+    #_hintText;
+    #previousInputRef;
+    #previousMaxLengthValidator;
+    #ngUnsubscribe;
+    ngOnInit() {
+        this.#inputBoxHostSvc.init(this);
+        this.#inputBoxHostSvc.required
+            .pipe(takeUntil$1(this.#ngUnsubscribe))
+            .subscribe((required) => {
+            this.#requiredByFormField = required;
+            this.#changeRef.markForCheck();
+        });
+    }
+    ngAfterContentChecked() {
+        this.controlDir =
+            this.formControl || this.formControlByName || this.ngModel;
+        if (!this.formControlHasFocus) {
+            this.characterCountScreenReader = this.controlDir?.value?.length || 0;
+        }
+        this.#updateInputRef();
     }
     ngOnDestroy() {
-        this.#requiredSubject.complete();
+        this.ariaDescribedBy.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
     }
-    populate(args) {
-        if (!this.#host) {
-            throw new Error('Cannot populate the input box because `SkyInputBoxHostService` has not yet been initialized. Try running the `populate` method within an Angular lifecycle hook, such as `ngOnInit`.');
+    formControlFocusIn() {
+        const inlineHelpEl = this.#adapterService.getInlineHelpElement(this.#elementRef);
+        if (!this.#adapterService.isFocusInElement(inlineHelpEl)) {
+            this.#updateHasFocus(true);
         }
-        this.#host.populate(args);
     }
-    setHintText(hintText) {
-        if (!this.#host) {
-            throw new Error('Cannot set hint text on the input box because `SkyInputBoxHostService` has not yet been initialized.');
+    formControlFocusOut() {
+        this.characterCountScreenReader = this.controlDir?.value?.length || 0;
+        this.#updateHasFocus(false);
+    }
+    onInsetIconClick() {
+        if (!this.isDisabled) {
+            this.#adapterService.focusControl(this.#elementRef);
         }
-        this.#host.setHostHintText(hintText);
+    }
+    populate(args) {
+        this.hostInputTemplate = args.inputTemplate;
+        this.hostButtonsTemplate = args.buttonsTemplate;
+        this.hostButtonsLeftTemplate = args.buttonsLeftTemplate;
+        this.hostButtonsInsetTemplate = args.buttonsInsetTemplate;
+        this.hostIconsInsetTemplate = args.iconsInsetTemplate;
+        this.hostIconsInsetLeftTemplate = args.iconsInsetLeftTemplate;
+        this.#changeRef.markForCheck();
     }
     setHintTextHidden(hide) {
-        if (!this.#host) {
-            throw new Error('Cannot hide hint text on the input box because `SkyInputBoxHostService` has not yet been initialized.');
-        }
-        this.#host.setHintTextHidden(hide);
+        this.hintTextHidden = hide;
+        this.#changeRef.markForCheck();
+    }
+    setHostHintText(value) {
+        this.hostHintText = value;
+        this.#changeRef.markForCheck();
     }
     setHintTextScreenReaderOnly(hide) {
-        if (!this.#host) {
-            throw new Error('Cannot remove hint text on the input box because `SkyInputBoxHostService` has not yet been initialized.');
-        }
-        this.#host.setHintTextScreenReaderOnly(hide);
+        this.hintTextScreenReaderOnly = hide;
+        this.#changeRef.markForCheck();
     }
-    /**
-     * Set required so that input box displays the label correctly. When the input is supplied by the consumer it is a content
-     * child that input box can read required from and this is unnecessary. When the input is supplied internally by the
-     * component the input box does not have a ref to it, so the component needs to inform the input box of its required state.
-     */
-    setRequired(required) {
-        this.#requiredSubject.next(required);
+    #hasRequiredValidator() {
+        return !!this.controlDir?.control?.hasValidator(Validators.required);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHostService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @internal
- */
-class SkyInputBoxControlDirective {
-    set autocomplete(value) {
-        this.#_autocomplete = value;
+    #updateHasFocus(hasFocus) {
+        // Some components manipulate the focus of elements inside an input box programmatically,
+        // which can cause an `ExpressionChangedAfterItHasBeenCheckedError` if focus was set after
+        // initial change detection. Using `setTimeout()` here fixes it.
+        setTimeout(() => {
+            this.formControlHasFocus = hasFocus;
+            this.#changeRef.markForCheck();
+        });
     }
-    get autocomplete() {
-        return this.#_autocomplete || (this.#hostSvc ? 'off' : undefined);
+    #controlHasErrors(control) {
+        return !!(control && control.invalid && (control.dirty || control.touched));
     }
-    #_autocomplete;
-    #hostSvc = inject(SkyInputBoxHostService, { optional: true });
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: SkyInputBoxControlDirective, isStandalone: true, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: { autocomplete: "autocomplete" }, host: { properties: { "autocomplete": "this.autocomplete" } }, ngImport: i0 }); }
+    #updateInputRef() {
+        if (!this.inputRef) {
+            return;
+        }
+        const inputEl = this.inputRef.nativeElement;
+        // Check for the Angular required validator and add an aria-required attribute
+        // to match. For template-driven forms, the input will have a `required` attribute
+        // so the aria-required attribute is unnecessary.
+        const hasRequiredValidator = this.#hasRequiredValidator();
+        const ariaRequired = inputEl.ariaRequired;
+        if (hasRequiredValidator && ariaRequired !== 'true') {
+            inputEl.ariaRequired = 'true';
+        }
+        else if (!hasRequiredValidator && ariaRequired === 'true') {
+            inputEl.ariaRequired = null;
+        }
+        if (this.hasErrorsComputed) {
+            this.#renderer.setAttribute(inputEl, 'aria-invalid', 'true');
+            this.#renderer.setAttribute(inputEl, 'aria-errormessage', this.errorId);
+        }
+        else {
+            this.#renderer.removeAttribute(inputEl, 'aria-invalid');
+            this.#renderer.removeAttribute(inputEl, 'aria-errormessage');
+        }
+        this.#adapterService.updateDescribedBy(this.inputRef, this.hintTextId, this.hintText ?? this.hostHintText);
+        if (this.inputRef !== this.#previousInputRef) {
+            this.#renderer.addClass(inputEl, 'sky-form-control');
+            this.#renderer.setAttribute(inputEl, 'id', this.controlId);
+            this.#updateMaxLengthValidator();
+            this.#previousInputRef = this.inputRef;
+        }
+    }
+    #updateMaxLengthValidator() {
+        const control = this.controlDir?.control;
+        if (this.#previousMaxLengthValidator) {
+            control?.removeValidators(this.#previousMaxLengthValidator);
+            this.#previousMaxLengthValidator = undefined;
+        }
+        if (control && this.characterLimit !== undefined) {
+            this.#previousMaxLengthValidator = Validators.maxLength(this.characterLimit);
+            control.addValidators([this.#previousMaxLengthValidator]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled", labelText: "labelText", characterLimit: "characterLimit", stacked: "stacked", helpPopoverTitle: "helpPopoverTitle", helpPopoverContent: "helpPopoverContent", helpKey: "helpKey", hintText: "hintText" }, host: { properties: { "class": "this.cssClass" } }, providers: [
+            SkyContentInfoProvider,
+            SkyInputBoxAdapterService,
+            SkyInputBoxHostService,
+            {
+                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  @if (labelText) {\n    <label\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  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\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  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\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  @if (hostInputTemplate) {\n    <ng-container [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  @if (hostButtonsLeftTemplate) {\n    <ng-container [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  @if (hostButtonsTemplate) {\n    <ng-container [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  @if (hostButtonsInsetTemplate) {\n    <ng-container [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    @if (hostIconsInsetTemplate) {\n      <ng-container [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    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [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    [touched]=\"controlDir?.touched\"\n    [dirty]=\"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  @if (hintText || hostHintText) {\n    <div\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  }\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);text-align:left}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.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", "touched", "dirty"] }, { 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: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    'input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)',
-                    standalone: true,
-                }]
-        }], propDecorators: { autocomplete: [{
-                type: HostBinding,
-                args: ['autocomplete']
-            }, {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-input-box', providers: [
+                        SkyContentInfoProvider,
+                        SkyInputBoxAdapterService,
+                        SkyInputBoxHostService,
+                        {
+                            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  @if (labelText) {\n    <label\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  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\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  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\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  @if (hostInputTemplate) {\n    <ng-container [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  @if (hostButtonsLeftTemplate) {\n    <ng-container [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  @if (hostButtonsTemplate) {\n    <ng-container [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  @if (hostButtonsInsetTemplate) {\n    <ng-container [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    @if (hostIconsInsetTemplate) {\n      <ng-container [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    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [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    [touched]=\"controlDir?.touched\"\n    [dirty]=\"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  @if (hintText || hostHintText) {\n    <div\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  }\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);text-align:left}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: [{
+                type: Input
+            }], labelText: [{
+                type: Input
+            }], characterLimit: [{
+                type: Input
+            }], stacked: [{
+                type: Input
+            }], helpPopoverTitle: [{
+                type: Input
+            }], helpPopoverContent: [{
+                type: Input
+            }], helpKey: [{
+                type: Input
+            }], hintText: [{
                 type: Input
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], formControl: [{
+                type: ContentChild,
+                args: [FormControlDirective]
+            }], formControlByName: [{
+                type: ContentChild,
+                args: [FormControlName]
+            }], ngModel: [{
+                type: ContentChild,
+                args: [NgModel]
+            }], inputRef: [{
+                type: ContentChild,
+                args: [SkyInputBoxControlDirective, {
+                        read: ElementRef,
+                    }]
             }] } });
 
-/**
- * @internal
- */
-class SkyInputBoxHintTextPipe {
-    transform(hintText, hostHintText) {
-        if (hintText && hostHintText) {
-            return `${hintText} ${hostHintText}`;
-        }
-        return hintText || hostHintText;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHintTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHintTextPipe, isStandalone: true, name: "skyInputBoxHintText" }); }
+class SkyInputBoxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
+            SkyCharacterCounterModule,
+            SkyFormErrorsModule,
+            SkyFormErrorModule,
+            SkyFormsResourcesModule,
+            SkyHelpInlineModule,
+            SkyInputBoxControlDirective,
+            SkyInputBoxHintTextPipe,
+            SkyThemeModule], exports: [SkyInputBoxHintTextPipe,
+            SkyInputBoxComponent,
+            SkyInputBoxControlDirective,
+            SkyFormErrorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
+            SkyCharacterCounterModule,
+            SkyFormErrorsModule,
+            SkyFormErrorModule,
+            SkyFormsResourcesModule,
+            SkyHelpInlineModule,
+            SkyThemeModule, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxHintTextPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, decorators: [{
+            type: NgModule,
             args: [{
-                    standalone: true,
-                    name: 'skyInputBoxHintText',
+                    declarations: [SkyInputBoxComponent],
+                    imports: [
+                        CommonModule,
+                        SkyCharacterCounterModule,
+                        SkyFormErrorsModule,
+                        SkyFormErrorModule,
+                        SkyFormsResourcesModule,
+                        SkyHelpInlineModule,
+                        SkyInputBoxControlDirective,
+                        SkyInputBoxHintTextPipe,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyInputBoxHintTextPipe,
+                        SkyInputBoxComponent,
+                        SkyInputBoxControlDirective,
+                        SkyFormErrorModule,
+                    ],
                 }]
         }] });
 
-const ARIA_DESCRIBEDBY_ATTR = 'aria-describedby';
-/**
- * @internal
- */
-class SkyInputBoxAdapterService {
-    #renderer = inject(RendererFactory2).createRenderer(undefined, null);
-    focusControl(elRef) {
-        const control = elRef.nativeElement.querySelector('.sky-form-control');
-        /* istanbul ignore else */
-        if (control) {
-            control.focus();
-        }
-    }
-    /**
-     * Returns the inline help element.
-     */
-    getInlineHelpElement(elRef) {
-        return elRef.nativeElement.querySelector('.sky-control-help');
-    }
-    /**
-     * Returns true if the provided element contains the focused element.
-     */
-    isFocusInElement(el) {
-        if (el) {
-            return (el === document.activeElement || el.contains(document.activeElement));
-        }
-        return false;
-    }
-    updateDescribedBy(inputRef, hintTextId, hintText) {
-        const inputEl = inputRef.nativeElement;
-        const describedByIds = inputEl
-            .getAttribute(ARIA_DESCRIBEDBY_ATTR)
-            ?.split(' ')
-            .map((id) => id.trim()) ?? [];
-        const hintTextIdIndex = describedByIds.indexOf(hintTextId);
-        const previousCount = describedByIds.length;
-        if (hintText && hintTextIdIndex < 0) {
-            describedByIds.push(hintTextId);
-        }
-        else if (!hintText && hintTextIdIndex >= 0) {
-            describedByIds.splice(hintTextIdIndex, 1);
-        }
-        if (describedByIds.length !== previousCount) {
-            this.#setDescribedByIds(inputEl, describedByIds);
-        }
-    }
-    #setDescribedByIds(inputEl, describedByIds) {
-        if (describedByIds.length === 0) {
-            this.#renderer.removeAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR);
-        }
-        else {
-            this.#renderer.setAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR, describedByIds.join(' '));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxAdapterService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
-            type: Injectable
-        }] });
-
+const MAX_FILE_SIZE_DEFAULT = 500000;
+const MIN_FILE_SIZE_DEFAULT = 0;
 /**
- * A wrapper component that provides styling and accessibility to form elements.
+ * Provides an element to attach multiple files where users can browse or drag and drop local files
+ * or provide hyperlinks to external files. You can leave the contents of the component
+ * blank to display the drop zone's default UI, or you can specify custom content to
+ * display instead. When the module initializes, it disables the ability to drag and
+ * drop files for the entire window to prevent the browser from opening files that are
+ * accidentally dropped outside the target zone. If you implement your own file drop functionality
+ * outside of the file drop component, you can place the `sky-file-drop-target` CSS class
+ * on the element that receives drop events to exempt it from the drop exclusion rule.
  */
-class SkyInputBoxComponent {
+class SkyFileDropComponent {
     constructor() {
-        this.#changeRef = inject(ChangeDetectorRef);
-        this.#inputBoxHostSvc = inject(SkyInputBoxHostService);
-        this.#adapterService = inject(SkyInputBoxAdapterService);
+        /**
+         * Fires when users add or remove files.
+         */
+        this.filesChanged = new EventEmitter();
+        /**
+         * Fires when the link input box triggers a blur event.
+         */
+        this.linkInputBlur = new EventEmitter();
+        /**
+         * Fires when users add or remove links.
+         */
+        this.linkChanged = new EventEmitter();
+        /**
+         * Whether users can drag and drop multiple files at the same time.
+         */
+        this.multiple = true;
+        /**
+         * Whether to disable the option to browse for files to attach.
+         */
+        this.noClick = false;
+        /**
+         * Whether to display the option to attach files from URLs rather than from local devices.
+         */
+        this.allowLinks = false;
+        /**
+         * Whether to hide `labelText` from view.
+         */
+        this.labelHidden = false;
+        /**
+         * Whether uploading a file or link is required.
+         * When you set this property to `true`, the component adds `aria-required` and `required`
+         * attributes to the input elements so that screen readers announce an invalid state until the input element
+         * is complete.
+         * For more information about the `aria-required` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-required).
+         */
+        this.required = false;
+        /**
+         * Whether the file attachment is stacked on another form component. When specified, the appropriate
+         * vertical spacing is automatically added to the file attachment.
+         */
+        this.stacked = false;
+        this.rejectedOver = false;
+        this.acceptedOver = false;
+        this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT;
+        this.#_minFileSize = MIN_FILE_SIZE_DEFAULT;
+        this.#fileAttachmentService = inject(SkyFileAttachmentService);
+        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
+        this.#resourcesSvc = inject(SkyLibResourcesService);
         this.#idSvc = inject(SkyIdService);
-        this.#elementRef = inject(ElementRef);
-        this.#renderer = inject(Renderer2);
-        this.formControlHasFocus = false;
-        this.hintTextHidden = false;
-        this.hintTextScreenReaderOnly = false;
-        this.controlId = this.#idSvc.generateId();
-        this.labelId = this.#idSvc.generateId();
         this.errorId = this.#idSvc.generateId();
-        this.hintTextId = this.#idSvc.generateId();
-        this.ariaDescribedBy = new ReplaySubject(1);
-        this.cssClass = '';
-        this.characterCountScreenReader = 0;
-        this.#_stacked = false;
-        this.#ngUnsubscribe = new Subject();
+        this.rejectedFiles = [];
     }
-    #changeRef;
-    #inputBoxHostSvc;
-    #adapterService;
-    #idSvc;
-    #elementRef;
-    #renderer;
     /**
-     * The maximum number of characters allowed in the input. A [SKY UX character count](https://developer.blackbaud.com/skyux/components/character-count)
-     * will be placed on the input element with the appropriate validator.
+     * The minimum size in bytes for valid files.
+     * @default 0
      */
-    set characterLimit(value) {
-        this.#_characterLimit =
-            value === undefined ? undefined : coerceNumberProperty(value, undefined);
-        this.#updateMaxLengthValidator();
-    }
-    get characterLimit() {
-        return this.#_characterLimit;
+    set minFileSize(value) {
+        this.#_minFileSize = value ?? MIN_FILE_SIZE_DEFAULT;
     }
-    /**
-     * Whether the input box is stacked on another input box. When specified, the appropriate
-     * vertical spacing is automatically added to the input box.
-     */
-    set stacked(value) {
-        this.#_stacked = coerceBooleanProperty(value);
-        this.cssClass = this.#_stacked ? 'sky-margin-stacked-lg' : '';
+    get minFileSize() {
+        return this.#_minFileSize;
     }
     /**
-     * [Persistent inline help text](https://developer.blackbaud.com/skyux/design/guidelines/user-assistance#inline-help) that provides
-     * additional context to the user.
+     * The maximum size in bytes for valid files.
+     * @default 500000
      */
-    set hintText(value) {
-        this.#_hintText = value;
-        this.ariaDescribedBy.next(value ? this.hintTextId : undefined);
-    }
-    get hintText() {
-        return this.#_hintText;
-    }
-    #requiredByFormField;
-    get isDisabled() {
-        return !!(this.disabled ||
-            this.controlDir?.control?.disabled ||
-            this.inputRef?.nativeElement?.disabled);
-    }
-    get hasErrorsComputed() {
-        if (this.hasErrors === undefined) {
-            return this.#controlHasErrors(this.controlDir);
-        }
-        return this.hasErrors;
+    set maxFileSize(value) {
+        this.#_maxFileSize = value ?? MAX_FILE_SIZE_DEFAULT;
     }
-    get required() {
-        return (this.#hasRequiredValidator() ||
-            this.inputRef?.nativeElement.required ||
-            this.#requiredByFormField);
+    get maxFileSize() {
+        return this.#_maxFileSize;
     }
-    #_stacked;
-    #_characterLimit;
-    #_hintText;
-    #previousInputRef;
-    #previousMaxLengthValidator;
-    #ngUnsubscribe;
-    ngOnInit() {
-        this.#inputBoxHostSvc.init(this);
-        this.#inputBoxHostSvc.required
-            .pipe(takeUntil$1(this.#ngUnsubscribe))
-            .subscribe((required) => {
-            this.#requiredByFormField = required;
-            this.#changeRef.markForCheck();
-        });
+    #enterEventTarget;
+    #_maxFileSize;
+    #_minFileSize;
+    #fileAttachmentService;
+    #liveAnnouncerSvc;
+    #resourcesSvc;
+    #idSvc;
+    ngOnDestroy() {
+        this.filesChanged.complete();
+        this.linkChanged.complete();
+        this.linkInputBlur.complete();
     }
-    ngAfterContentChecked() {
-        this.controlDir =
-            this.formControl || this.formControlByName || this.ngModel;
-        if (!this.formControlHasFocus) {
-            this.characterCountScreenReader = this.controlDir?.value?.length || 0;
+    dropClicked() {
+        if (!this.noClick && this.inputEl) {
+            this.inputEl.nativeElement.click();
         }
-        this.#updateInputRef();
     }
-    ngOnDestroy() {
-        this.ariaDescribedBy.complete();
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
+    fileChangeEvent(fileChangeEvent) {
+        this.#handleFiles(fileChangeEvent.target?.files);
     }
-    formControlFocusIn() {
-        const inlineHelpEl = this.#adapterService.getInlineHelpElement(this.#elementRef);
-        if (!this.#adapterService.isFocusInElement(inlineHelpEl)) {
-            this.#updateHasFocus(true);
+    fileDragEnter(dragEnterEvent) {
+        // Save this target to know when the drag event leaves
+        this.#enterEventTarget = dragEnterEvent.target;
+        dragEnterEvent.stopPropagation();
+        dragEnterEvent.preventDefault();
+    }
+    fileDragOver(dragOverEvent) {
+        const transfer = dragOverEvent.dataTransfer;
+        dragOverEvent.stopPropagation();
+        dragOverEvent.preventDefault();
+        if (transfer) {
+            if (transfer.items) {
+                const files = Array.from(transfer.items);
+                for (const file of files) {
+                    if (file.type &&
+                        this.#fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
+                        this.rejectedOver = true;
+                        this.acceptedOver = false;
+                        return;
+                    }
+                }
+                if (files.length > 0 && !this.acceptedOver) {
+                    this.rejectedOver = false;
+                    this.acceptedOver = true;
+                }
+            } /* istanbul ignore next: untestable */
+            else if (transfer.files) {
+                // If the browser does not support DataTransfer.items,
+                // defer file-type checking to drop handler.
+                // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
+                this.rejectedOver = false;
+                this.acceptedOver = true;
+            }
         }
     }
-    formControlFocusOut() {
-        this.characterCountScreenReader = this.controlDir?.value?.length || 0;
-        this.#updateHasFocus(false);
+    fileDrop(dropEvent) {
+        dropEvent.stopPropagation();
+        dropEvent.preventDefault();
+        this.#enterEventTarget = undefined;
+        this.rejectedOver = false;
+        this.acceptedOver = false;
+        if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
+            const hasDirectory = this.#fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files);
+            const invalidNumberOfFiles = !this.multiple && dropEvent.dataTransfer.files.length > 1;
+            if (hasDirectory || invalidNumberOfFiles) {
+                return;
+            }
+            this.#handleFiles(dropEvent.dataTransfer.files);
+        }
     }
-    onInsetIconClick() {
-        if (!this.isDisabled) {
-            this.#adapterService.focusControl(this.#elementRef);
+    fileDragLeave(dragLeaveEvent) {
+        if (this.#enterEventTarget === dragLeaveEvent.target) {
+            this.rejectedOver = false;
+            this.acceptedOver = false;
         }
     }
-    populate(args) {
-        this.hostInputTemplate = args.inputTemplate;
-        this.hostButtonsTemplate = args.buttonsTemplate;
-        this.hostButtonsLeftTemplate = args.buttonsLeftTemplate;
-        this.hostButtonsInsetTemplate = args.buttonsInsetTemplate;
-        this.hostIconsInsetTemplate = args.iconsInsetTemplate;
-        this.hostIconsInsetLeftTemplate = args.iconsInsetLeftTemplate;
-        this.#changeRef.markForCheck();
+    addLinkEnter(event) {
+        if (event.which === 13) {
+            this.addLink(event);
+        }
     }
-    setHintTextHidden(hide) {
-        this.hintTextHidden = hide;
-        this.#changeRef.markForCheck();
+    addLink(event) {
+        event.preventDefault();
+        this.linkChanged.emit({ url: this.linkUrl });
+        this.#announceState('skyux_file_attachment_file_upload_link_added', this.linkUrl);
+        this.linkUrl = undefined;
     }
-    setHostHintText(value) {
-        this.hostHintText = value;
-        this.#changeRef.markForCheck();
+    onLinkBlur() {
+        this.linkInputBlur.emit();
     }
-    setHintTextScreenReaderOnly(hide) {
-        this.hintTextScreenReaderOnly = hide;
-        this.#changeRef.markForCheck();
+    #announceState(resourceString, ...args) {
+        this.#resourcesSvc
+            .getString(resourceString, ...args)
+            .pipe(take(1))
+            .subscribe((internationalizedString) => {
+            this.#liveAnnouncerSvc.announce(internationalizedString);
+        });
     }
-    #hasRequiredValidator() {
-        return !!this.controlDir?.control?.hasValidator(Validators.required);
+    #emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray) {
+        if (totalFiles === rejectedFileArray.length + validFileArray.length) {
+            this.filesChanged.emit({
+                files: validFileArray,
+                rejectedFiles: rejectedFileArray,
+            });
+            if (this.inputEl) {
+                this.inputEl.nativeElement.value = '';
+            }
+        }
     }
-    #updateHasFocus(hasFocus) {
-        // Some components manipulate the focus of elements inside an input box programmatically,
-        // which can cause an `ExpressionChangedAfterItHasBeenCheckedError` if focus was set after
-        // initial change detection. Using `setTimeout()` here fixes it.
-        setTimeout(() => {
-            this.formControlHasFocus = hasFocus;
-            this.#changeRef.markForCheck();
-        });
+    #filesRejected(file, validFileArray, rejectedFileArray, totalFiles) {
+        rejectedFileArray.push(file);
+        this.#emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
     }
-    #controlHasErrors(control) {
-        return !!(control && control.invalid && (control.dirty || control.touched));
+    #loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
+        const reader = new FileReader();
+        reader.addEventListener('load', (event) => {
+            file.url = event.target.result;
+            validFileArray.push(file);
+            fileDrop.#emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
+            this.#announceState('skyux_file_attachment_file_upload_file_added', file.file.name);
+        });
+        reader.addEventListener('error', () => {
+            fileDrop.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
+        });
+        reader.addEventListener('abort', () => {
+            fileDrop.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
+        });
+        reader.readAsDataURL(file.file);
     }
-    #updateInputRef() {
-        if (!this.inputRef) {
-            return;
+    #handleFiles(files) {
+        if (files) {
+            const validFileArray = [];
+            const rejectedFileArray = [];
+            const totalFiles = files.length;
+            const processedFiles = this.#fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
+            for (const file of processedFiles) {
+                if (file.errorType) {
+                    this.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
+                }
+                else {
+                    this.#loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
+                }
+            }
+            this.rejectedFiles = rejectedFileArray;
         }
-        const inputEl = this.inputRef.nativeElement;
-        // Check for the Angular required validator and add an aria-required attribute
-        // to match. For template-driven forms, the input will have a `required` attribute
-        // so the aria-required attribute is unnecessary.
-        const hasRequiredValidator = this.#hasRequiredValidator();
-        const ariaRequired = inputEl.ariaRequired;
-        if (hasRequiredValidator && ariaRequired !== 'true') {
-            inputEl.ariaRequired = 'true';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", linkUploadHintText: "linkUploadHintText", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", 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" } }, providers: [
+            SkyFileAttachmentService,
+            { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n  @if (labelText) {\n    <legend\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      >\n      @if (required) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    </legend>\n  }\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        [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        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n      ></button>\n\n      <input\n        #fileInput\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      />\n\n      @if (customEl.children.length === 0) {\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\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'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n          </div>\n        </div>\n      }\n\n      <div #customEl class=\"sky-file-drop-contents-custom\">\n        <ng-content />\n      </div>\n    </div>\n    @if (allowLinks) {\n      <div class=\"sky-file-drop-col\">\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'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <sky-input-box stacked [hintText]=\"linkUploadHintText\">\n              <input\n                type=\"text\"\n                [attr.aria-label]=\"\n                  linkUploadAriaLabel ||\n                  ('skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources)\n                \"\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            </sky-input-box>\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    }\n  </div>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n</fieldset>\n<sky-form-errors\n  [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"rejectedFiles.length > 0\"\n>\n  @for (rejectedFile of rejectedFiles; track rejectedFile) {\n    <div>\n      @if (rejectedFile.errorType === 'fileType') {\n        <sky-form-error\n          errorName=\"fileType\"\n          [errorText]=\"\n            'skyux_file_attachment_file_type_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : rejectedFile.errorParam\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'maxFileSize') {\n        <sky-form-error\n          errorName=\"maxFileSize\"\n          [errorText]=\"\n            acceptedTypesErrorMessage ??\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      } @else if (rejectedFile.errorType === 'minFileSize') {\n        <sky-form-error\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      } @else if (\n        rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n      ) {\n        <sky-form-error\n          errorName=\"validate\"\n          [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n        />\n      }\n    </div>\n  }\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: SkyInputBoxControlDirective, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-file-drop', providers: [
+                        SkyFileAttachmentService,
+                        { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
+                    ], standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyFileSizePipe,
+                        SkyFormErrorComponent,
+                        SkyFormErrorsComponent,
+                        SkyFormsResourcesModule,
+                        SkyHelpInlineModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyInputBoxModule,
+                    ], template: "<fieldset>\n  @if (labelText) {\n    <legend\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      >\n      @if (required) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    </legend>\n  }\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        [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        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n      ></button>\n\n      <input\n        #fileInput\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      />\n\n      @if (customEl.children.length === 0) {\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\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'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n          </div>\n        </div>\n      }\n\n      <div #customEl class=\"sky-file-drop-contents-custom\">\n        <ng-content />\n      </div>\n    </div>\n    @if (allowLinks) {\n      <div class=\"sky-file-drop-col\">\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'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <sky-input-box stacked [hintText]=\"linkUploadHintText\">\n              <input\n                type=\"text\"\n                [attr.aria-label]=\"\n                  linkUploadAriaLabel ||\n                  ('skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources)\n                \"\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            </sky-input-box>\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    }\n  </div>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n</fieldset>\n<sky-form-errors\n  [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"rejectedFiles.length > 0\"\n>\n  @for (rejectedFile of rejectedFiles; track rejectedFile) {\n    <div>\n      @if (rejectedFile.errorType === 'fileType') {\n        <sky-form-error\n          errorName=\"fileType\"\n          [errorText]=\"\n            'skyux_file_attachment_file_type_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : rejectedFile.errorParam\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'maxFileSize') {\n        <sky-form-error\n          errorName=\"maxFileSize\"\n          [errorText]=\"\n            acceptedTypesErrorMessage ??\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      } @else if (rejectedFile.errorType === 'minFileSize') {\n        <sky-form-error\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      } @else if (\n        rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n      ) {\n        <sky-form-error\n          errorName=\"validate\"\n          [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n        />\n      }\n    </div>\n  }\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: [{
+                type: Output
+            }], linkChanged: [{
+                type: Output
+            }], fileUploadAriaLabel: [{
+                type: Input
+            }], linkUploadAriaLabel: [{
+                type: Input
+            }], linkUploadHintText: [{
+                type: Input
+            }], minFileSize: [{
+                type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], validateFn: [{
+                type: Input
+            }], acceptedTypes: [{
+                type: Input
+            }], acceptedTypesErrorMessage: [{
+                type: Input
+            }], noClick: [{
+                type: Input
+            }], allowLinks: [{
+                type: Input
+            }], labelText: [{
+                type: Input
+            }], labelHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hintText: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], helpPopoverContent: [{
+                type: Input
+            }], helpPopoverTitle: [{
+                type: Input
+            }], stacked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.sky-margin-stacked-lg']
+            }], helpKey: [{
+                type: Input
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class SkyFileItemComponent {
+    /**
+     * The summary information to display about file attachments. For local files,
+     * the default summary includes the file name, file size, file preview, and a delete button.
+     * For external files, the default summary includes the URL and a delete button.
+     * You can include additional inputs to display user-entered metadata.
+     * @required
+     */
+    set fileItem(value) {
+        this.#_fileItem = value;
+        if (value && 'file' in value) {
+            this.isFile = this.#fileItemService.isFile(value);
+            this.isImage = this.#fileItemService.isImage(value);
+            this.fileName = value.file.name;
+            this.fileSize = value.file.size;
         }
-        else if (!hasRequiredValidator && ariaRequired === 'true') {
-            inputEl.ariaRequired = null;
+        else {
+            this.isFile = this.isImage = false;
+            this.fileName = '';
+            this.fileSize = undefined;
         }
-        if (this.hasErrorsComputed) {
-            this.#renderer.setAttribute(inputEl, 'aria-invalid', 'true');
-            this.#renderer.setAttribute(inputEl, 'aria-errormessage', this.errorId);
+        this.url = value?.url ?? '';
+    }
+    get fileItem() {
+        return this.#_fileItem;
+    }
+    #_fileItem;
+    #differ;
+    #fileItemService;
+    #liveAnnouncerSvc;
+    #resourcesSvc;
+    constructor(differs, fileItemService) {
+        /**
+         * Fires when users select the delete button for an item. The deleted item is passed to the
+         * function.
+         */
+        this.deleteFile = new EventEmitter();
+        this.fileName = '';
+        this.url = '';
+        this.isFile = false;
+        this.isImage = false;
+        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
+        this.#resourcesSvc = inject(SkyLibResourcesService);
+        this.#differ = differs.find({}).create();
+        this.#fileItemService = fileItemService;
+    }
+    ngDoCheck() {
+        if (this.fileItem) {
+            const changes = this.#differ.diff(this.fileItem);
+            if (changes) {
+                let cls;
+                const extensionUpper = this.#fileItemService.getFileExtensionUpper(this.fileItem);
+                let fileTypeUpper;
+                switch (extensionUpper) {
+                    case '.PDF':
+                        cls = 'pdf';
+                        break;
+                    case '.GZ':
+                    case '.RAR':
+                    case '.TGZ':
+                    case '.ZIP':
+                        cls = 'archive';
+                        break;
+                    case '.PPT':
+                    case '.PPTX':
+                        cls = 'powerpoint';
+                        break;
+                    case '.DOC':
+                    case '.DOCX':
+                        cls = 'word';
+                        break;
+                    case '.XLS':
+                    case '.XLSX':
+                        cls = 'excel';
+                        break;
+                    case '.TXT':
+                        cls = 'text';
+                        break;
+                    case '.HTM':
+                    case '.HTML':
+                        cls = 'code';
+                        break;
+                    default:
+                        break;
+                }
+                if (!cls) {
+                    fileTypeUpper = this.#fileItemService.getFileTypeUpper(this.fileItem);
+                    switch (fileTypeUpper.substr(0, fileTypeUpper.indexOf('/'))) {
+                        case 'AUDIO':
+                            cls = 'audio';
+                            break;
+                        case 'IMAGE':
+                            // Normally images are displayed as thumbnails, but if an image type is not recognized
+                            // as being widely supported by modern browsers (e.g. TIFF files) then an icon should
+                            // be displayed instead.
+                            cls = 'image';
+                            break;
+                        case 'TEXT':
+                            cls = 'text';
+                            break;
+                        case 'VIDEO':
+                            cls = 'video';
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                this.icon = 'file-' + (cls ? cls + '-' : '') + 'o';
+            }
         }
         else {
-            this.#renderer.removeAttribute(inputEl, 'aria-invalid');
-            this.#renderer.removeAttribute(inputEl, 'aria-errormessage');
-        }
-        this.#adapterService.updateDescribedBy(this.inputRef, this.hintTextId, this.hintText ?? this.hostHintText);
-        if (this.inputRef !== this.#previousInputRef) {
-            this.#renderer.addClass(inputEl, 'sky-form-control');
-            this.#renderer.setAttribute(inputEl, 'id', this.controlId);
-            this.#updateMaxLengthValidator();
-            this.#previousInputRef = this.inputRef;
+            this.icon = undefined;
         }
     }
-    #updateMaxLengthValidator() {
-        const control = this.controlDir?.control;
-        if (this.#previousMaxLengthValidator) {
-            control?.removeValidators(this.#previousMaxLengthValidator);
-            this.#previousMaxLengthValidator = undefined;
+    itemDelete() {
+        this.deleteFile.emit(this.fileItem);
+        if (!this.isFile) {
+            this.#resourcesSvc
+                .getString('skyux_file_attachment_file_upload_link_removed', this.url)
+                .pipe(take(1))
+                .subscribe((resourceString) => {
+                this.#liveAnnouncerSvc.announce(resourceString);
+            });
         }
-        if (control && this.characterLimit !== undefined) {
-            this.#previousMaxLengthValidator = Validators.maxLength(this.characterLimit);
-            control.addValidators([this.#previousMaxLengthValidator]);
+        else {
+            this.#resourcesSvc
+                .getString('skyux_file_attachment_file_upload_file_removed', this.fileName)
+                .pipe(take(1))
+                .subscribe((resourceString) => {
+                this.#liveAnnouncerSvc.announce(resourceString);
+            });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled", labelText: "labelText", characterLimit: "characterLimit", stacked: "stacked", helpPopoverTitle: "helpPopoverTitle", helpPopoverContent: "helpPopoverContent", helpKey: "helpKey", hintText: "hintText" }, host: { properties: { "class": "this.cssClass" } }, providers: [
-            SkyContentInfoProvider,
-            SkyInputBoxAdapterService,
-            SkyInputBoxHostService,
-            {
-                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  @if (labelText) {\n    <label\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  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\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  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\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  @if (hostInputTemplate) {\n    <ng-container [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  @if (hostButtonsLeftTemplate) {\n    <ng-container [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  @if (hostButtonsTemplate) {\n    <ng-container [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  @if (hostButtonsInsetTemplate) {\n    <ng-container [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    @if (hostIconsInsetTemplate) {\n      <ng-container [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    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [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    [touched]=\"controlDir?.touched\"\n    [dirty]=\"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  @if (hintText || hostHintText) {\n    <div\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  }\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.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", "touched", "dirty"] }, { 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: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "@if (fileItem) {\n  <div class=\"sky-file-item sky-padding-even-default\">\n    <div class=\"sky-file-item-title\">\n      <div class=\"sky-file-item-name-container\">\n        <div class=\"sky-file-item-name\">\n          @if (isFile) {\n            <strong>{{ fileName }}</strong>\n          } @else {\n            <strong>{{ url }}</strong>\n          }\n        </div>\n        @if (isFile) {\n          <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n        }\n      </div>\n      <div class=\"sky-file-item-controls\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n          [attr.aria-label]=\"\n            'skyux_file_attachment_file_item_delete'\n              | skyLibResources: (isFile ? fileName : url)\n          \"\n          (click)=\"itemDelete()\"\n        >\n          <sky-icon icon=\"trash-o\" size=\"lg\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content\">\n      <div class=\"sky-file-item-preview\">\n        @if (isImage) {\n          <div class=\"sky-file-item-preview-img-container\">\n            <img\n              class=\"sky-file-item-preview-img\"\n              [src]=\"url\"\n              [alt]=\"\n                'skyux_file_attachment_file_upload_image_preview_alt_text'\n                  | skyLibResources\n              \"\n            />\n          </div>\n        } @else {\n          <div class=\"sky-file-item-preview-other\">\n            <sky-icon [icon]=\"icon\" />\n          </div>\n        }\n      </div>\n      <div class=\"sky-file-item-content-custom\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-input-box', providers: [
-                        SkyContentInfoProvider,
-                        SkyInputBoxAdapterService,
-                        SkyInputBoxHostService,
-                        {
-                            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  @if (labelText) {\n    <label\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  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\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  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\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  @if (hostInputTemplate) {\n    <ng-container [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  @if (hostButtonsLeftTemplate) {\n    <ng-container [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  @if (hostButtonsTemplate) {\n    <ng-container [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  @if (hostButtonsInsetTemplate) {\n    <ng-container [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    @if (hostIconsInsetTemplate) {\n      <ng-container [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    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [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    [touched]=\"controlDir?.touched\"\n    [dirty]=\"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  @if (hintText || hostHintText) {\n    <div\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  }\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: [{
-                type: Input
-            }], labelText: [{
-                type: Input
-            }], characterLimit: [{
-                type: Input
-            }], stacked: [{
-                type: Input
-            }], helpPopoverTitle: [{
-                type: Input
-            }], helpPopoverContent: [{
-                type: Input
-            }], helpKey: [{
-                type: Input
-            }], hintText: [{
+            args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', standalone: true, template: "@if (fileItem) {\n  <div class=\"sky-file-item sky-padding-even-default\">\n    <div class=\"sky-file-item-title\">\n      <div class=\"sky-file-item-name-container\">\n        <div class=\"sky-file-item-name\">\n          @if (isFile) {\n            <strong>{{ fileName }}</strong>\n          } @else {\n            <strong>{{ url }}</strong>\n          }\n        </div>\n        @if (isFile) {\n          <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n        }\n      </div>\n      <div class=\"sky-file-item-controls\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n          [attr.aria-label]=\"\n            'skyux_file_attachment_file_item_delete'\n              | skyLibResources: (isFile ? fileName : url)\n          \"\n          (click)=\"itemDelete()\"\n        >\n          <sky-icon icon=\"trash-o\" size=\"lg\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content\">\n      <div class=\"sky-file-item-preview\">\n        @if (isImage) {\n          <div class=\"sky-file-item-preview-img-container\">\n            <img\n              class=\"sky-file-item-preview-img\"\n              [src]=\"url\"\n              [alt]=\"\n                'skyux_file_attachment_file_upload_image_preview_alt_text'\n                  | skyLibResources\n              \"\n            />\n          </div>\n        } @else {\n          <div class=\"sky-file-item-preview-other\">\n            <sky-icon [icon]=\"icon\" />\n          </div>\n        }\n      </div>\n      <div class=\"sky-file-item-content-custom\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
                 type: Input
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], formControl: [{
-                type: ContentChild,
-                args: [FormControlDirective]
-            }], formControlByName: [{
-                type: ContentChild,
-                args: [FormControlName]
-            }], ngModel: [{
-                type: ContentChild,
-                args: [NgModel]
-            }], inputRef: [{
-                type: ContentChild,
-                args: [SkyInputBoxControlDirective, {
-                        read: ElementRef,
-                    }]
+            }], deleteFile: [{
+                type: Output
             }] } });
 
-class SkyInputBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
-            SkyCharacterCounterModule,
-            SkyFormErrorsModule,
-            SkyFormErrorModule,
-            SkyFormsResourcesModule,
-            SkyHelpInlineModule,
-            SkyInputBoxControlDirective,
-            SkyInputBoxHintTextPipe,
-            SkyThemeModule], exports: [SkyInputBoxHintTextPipe,
-            SkyInputBoxComponent,
-            SkyInputBoxControlDirective,
-            SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
-            SkyCharacterCounterModule,
-            SkyFormErrorsModule,
-            SkyFormErrorModule,
-            SkyFormsResourcesModule,
-            SkyHelpInlineModule,
-            SkyThemeModule, SkyFormErrorModule] }); }
+class SkyFileDropModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent], exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyInputBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileDropModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SkyInputBoxComponent],
-                    imports: [
-                        CommonModule,
-                        SkyCharacterCounterModule,
-                        SkyFormErrorsModule,
-                        SkyFormErrorModule,
-                        SkyFormsResourcesModule,
-                        SkyHelpInlineModule,
-                        SkyInputBoxControlDirective,
-                        SkyInputBoxHintTextPipe,
-                        SkyThemeModule,
-                    ],
-                    exports: [
-                        SkyInputBoxHintTextPipe,
-                        SkyInputBoxComponent,
-                        SkyInputBoxControlDirective,
-                        SkyFormErrorModule,
-                    ],
+                    exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule],
+                    imports: [SkyFileDropComponent, SkyFileItemComponent],
+                }]
+        }] });
+
+/**
+ * @deprecated Import either `SkyFileAttachmentModule` or `SkyFileDropModule`.
+ */
+class SkyFileAttachmentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule], exports: [SkyFileAttachmentModule, SkyFileDropModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule, SkyFileAttachmentModule, SkyFileDropModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyFileAttachmentModule, SkyFileDropModule],
+                    imports: [SkyFileAttachmentModule, SkyFileDropModule],
                 }]
         }] });