@skyux/forms 11.27.0 → 11.29.0

package/fesm2022/skyux-forms.mjs

@@ -7,7 +7,7 @@ import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_A
 import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import * as i1$2 from '@skyux/core';
-import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyMediaBreakpoints } from '@skyux/core';
+import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyFileReaderService, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyMediaBreakpoints } from '@skyux/core';
 import * as i4 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
 import * as i5 from '@skyux/icon';
@@ -1474,6 +1474,7 @@ const MIN_FILE_SIZE_DEFAULT$1 = 0;
  * Provides an element to attach a single local file.
  */
 class SkyFileAttachmentComponent {
+    #fileReaderSvc;
     /**
      * The maximum size in bytes for valid files.
      * @default 500000
@@ -1534,6 +1535,7 @@ class SkyFileAttachmentComponent {
     #liveAnnouncerSvc;
     #resourcesSvc;
     constructor(changeDetector, fileAttachmentService, fileItemService, ngControl, themeSvc) {
+        this.#fileReaderSvc = inject(SkyFileReaderService);
         /**
          * Whether to disable the input on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
          * To set the disabled state on reactive forms, use the `FormControl` instead.
@@ -1623,6 +1625,13 @@ class SkyFileAttachmentComponent {
                 });
                 this.#changeDetector.markForCheck();
             });
+            // There is some disconnect between the host control and the form control.
+            // This handles that by running change detection whenever the host control
+            // has any changes. This is a workaround for this existing bug and will be
+            // addressed in a future story that refactors file attachment.
+            this.ngControl.control?.events.subscribe(() => {
+                this.#changeDetector.markForCheck();
+            });
         }
     }
     ngAfterContentInit() {
@@ -1638,6 +1647,9 @@ class SkyFileAttachmentComponent {
             });
         }
     }
+    onButtonBlur() {
+        this.#onTouched();
+    }
     onDropClicked() {
         this.#onTouched();
         /* istanbul ignore else */
@@ -1684,6 +1696,7 @@ class SkyFileAttachmentComponent {
         }
     }
     fileDrop(dropEvent) {
+        this.#onTouched();
         dropEvent.stopPropagation();
         dropEvent.preventDefault();
         this.#enterEventTarget = undefined;
@@ -1778,27 +1791,22 @@ class SkyFileAttachmentComponent {
             this.inputEl.nativeElement.value = '';
         }
     }
-    #loadFile(file) {
+    async #loadFile(file) {
         if (file.file) {
-            const reader = new FileReader();
-            reader.addEventListener('load', (event) => {
+            try {
                 const previousFileName = this.value?.file.name;
-                file.url = event.target.result;
-                this.#emitFileChangeEvent(file);
                 if (previousFileName) {
                     this.#announceState('skyux_file_attachment_file_upload_file_replaced', previousFileName, file.file.name);
                 }
                 else {
                     this.#announceState('skyux_file_attachment_file_upload_file_added', file.file.name);
                 }
-            });
-            reader.addEventListener('error', () => {
+                file.url = await this.#fileReaderSvc.readAsDataURL(file.file);
                 this.#emitFileChangeEvent(file);
-            });
-            reader.addEventListener('abort', () => {
+            }
+            catch {
                 this.#emitFileChangeEvent(file);
-            });
-            reader.readAsDataURL(file.file);
+            }
         }
     }
     #handleFiles(files) {
@@ -1809,7 +1817,7 @@ class SkyFileAttachmentComponent {
                     this.#emitFileChangeEvent(file);
                 }
                 else {
-                    this.#loadFile(file);
+                    void this.#loadFile(file);
                 }
             }
         }
@@ -1845,7 +1853,7 @@ class SkyFileAttachmentComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyFileAttachmentComponent, isStandalone: true, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: ["required", "required", booleanAttribute] }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
             SkyFileAttachmentService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span\n          class=\"sky-control-label\"\n          [attr.id]=\"labelId\"\n          [ngClass]=\"{\n            'sky-control-label-required': isRequired\n          }\"\n          >{{ labelText }}</span\n        >\n      }\n    } @else {\n      <ng-content select=\"sky-file-attachment-label\" />\n    }\n    @if (isRequired && (hasLabelComponent || labelText)) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_file_attachment_required' | skyLibResources\n      }}</span>\n    }\n    @if (labelText && (helpPopoverContent || helpKey)) {\n      <span class=\"sky-control-help-container\">\n        <sky-help-inline\n          [labelText]=\"labelText\"\n          [helpKey]=\"helpKey\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      </span>\n    }\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      #fileDropDescriptionRef=\"skyId\"\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      skyId\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      #fileInputRef\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n    />\n    @if (showFileAttachmentButton) {\n      <button\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        [attr.aria-describedby]=\"\n          hintText && hintTextEl.id\n            | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n        \"\n        [attr.aria-labelledby]=\"\n          attachButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n        [attr.aria-errormessage]=\"\n          !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    }\n    @if (value && !isImage && currentThemeName === 'modern') {\n      <sky-icon class=\"sky-file-attachment-icon\" icon=\"file-o\" />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a\n            [href]=\"isData ? value.url : undefined\"\n            [download]=\"isData ? value.file.name : undefined\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"md\" />\n      </button>\n    }\n  </div>\n\n  @if (value && isImage) {\n    <img\n      class=\"sky-file-attachment-preview-img\"\n      [alt]=\"\n        'skyux_file_attachment_file_upload_image_preview_alt_text'\n          | skyLibResources\n      \"\n      [src]=\"value.url\"\n    />\n  }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div\n      class=\"sky-file-attachment-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n    >\n      {{ hintText }}\n    </div>\n  }\n</div>\n\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @if (ngControl?.touched) {\n    @if (fileErrorName === 'fileType') {\n      <sky-form-error\n        errorName=\"fileType\"\n        [errorText]=\"\n          acceptedTypesErrorMessage ??\n            'skyux_file_attachment_file_type_error_label_text'\n            | skyLibResources: fileErrorParam\n        \"\n      />\n    } @else if (fileErrorName === 'maxFileSize') {\n      <sky-form-error\n        errorName=\"maxFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_max_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    } @else if (fileErrorName === 'minFileSize') {\n      <sky-form-error\n        errorName=\"minFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_min_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    }\n  }\n</sky-form-errors>\n\n<span\n  #attachButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{\n    value\n      ? ('skyux_file_attachment_button_label_replace_file_label'\n        | skyLibResources: fileName)\n      : ('skyux_file_attachment_button_label_choose_file_label'\n        | skyLibResources)\n  }}\n</span>\n\n<span\n  #deleteButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-font-size: 30px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));font-size:var(--sky-override-file-attachment-file-icon-font-size, var(--sky-size-icon-xl));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { 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.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$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span\n          class=\"sky-control-label\"\n          [attr.id]=\"labelId\"\n          [ngClass]=\"{\n            'sky-control-label-required': isRequired\n          }\"\n          >{{ labelText }}</span\n        >\n      }\n    } @else {\n      <ng-content select=\"sky-file-attachment-label\" />\n    }\n    @if (isRequired && (hasLabelComponent || labelText)) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_file_attachment_required' | skyLibResources\n      }}</span>\n    }\n    @if (labelText && (helpPopoverContent || helpKey)) {\n      <span class=\"sky-control-help-container\">\n        <sky-help-inline\n          [labelText]=\"labelText\"\n          [helpKey]=\"helpKey\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      </span>\n    }\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      #fileDropDescriptionRef=\"skyId\"\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      skyId\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      #fileInputRef\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n    />\n    @if (showFileAttachmentButton) {\n      <button\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        [attr.aria-describedby]=\"\n          hintText && hintTextEl.id\n            | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n        \"\n        [attr.aria-labelledby]=\"\n          attachButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n        [attr.aria-errormessage]=\"\n          !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        (blur)=\"onButtonBlur()\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    }\n    @if (value && !isImage && currentThemeName === 'modern') {\n      <sky-icon class=\"sky-file-attachment-icon\" icon=\"file-o\" />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a\n            [href]=\"isData ? value.url : undefined\"\n            [download]=\"isData ? value.file.name : undefined\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"md\" />\n      </button>\n    }\n  </div>\n\n  @if (value && isImage) {\n    <img\n      class=\"sky-file-attachment-preview-img\"\n      [alt]=\"\n        'skyux_file_attachment_file_upload_image_preview_alt_text'\n          | skyLibResources\n      \"\n      [src]=\"value.url\"\n    />\n  }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div\n      class=\"sky-file-attachment-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n    >\n      {{ hintText }}\n    </div>\n  }\n</div>\n\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @if (ngControl?.touched) {\n    @if (fileErrorName === 'fileType') {\n      <sky-form-error\n        errorName=\"fileType\"\n        [errorText]=\"\n          acceptedTypesErrorMessage ??\n            'skyux_file_attachment_file_type_error_label_text'\n            | skyLibResources: fileErrorParam\n        \"\n      />\n    } @else if (fileErrorName === 'maxFileSize') {\n      <sky-form-error\n        errorName=\"maxFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_max_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    } @else if (fileErrorName === 'minFileSize') {\n      <sky-form-error\n        errorName=\"minFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_min_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    }\n  }\n</sky-form-errors>\n\n<span\n  #attachButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{\n    value\n      ? ('skyux_file_attachment_button_label_replace_file_label'\n        | skyLibResources: fileName)\n      : ('skyux_file_attachment_button_label_choose_file_label'\n        | skyLibResources)\n  }}\n</span>\n\n<span\n  #deleteButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-font-size: 30px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));font-size:var(--sky-override-file-attachment-file-icon-font-size, var(--sky-size-icon-xl));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { 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.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$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
             type: Component,
@@ -1864,7 +1872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], providers: [
                         SkyFileAttachmentService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', standalone: true, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span\n          class=\"sky-control-label\"\n          [attr.id]=\"labelId\"\n          [ngClass]=\"{\n            'sky-control-label-required': isRequired\n          }\"\n          >{{ labelText }}</span\n        >\n      }\n    } @else {\n      <ng-content select=\"sky-file-attachment-label\" />\n    }\n    @if (isRequired && (hasLabelComponent || labelText)) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_file_attachment_required' | skyLibResources\n      }}</span>\n    }\n    @if (labelText && (helpPopoverContent || helpKey)) {\n      <span class=\"sky-control-help-container\">\n        <sky-help-inline\n          [labelText]=\"labelText\"\n          [helpKey]=\"helpKey\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      </span>\n    }\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      #fileDropDescriptionRef=\"skyId\"\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      skyId\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      #fileInputRef\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n    />\n    @if (showFileAttachmentButton) {\n      <button\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        [attr.aria-describedby]=\"\n          hintText && hintTextEl.id\n            | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n        \"\n        [attr.aria-labelledby]=\"\n          attachButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n        [attr.aria-errormessage]=\"\n          !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    }\n    @if (value && !isImage && currentThemeName === 'modern') {\n      <sky-icon class=\"sky-file-attachment-icon\" icon=\"file-o\" />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a\n            [href]=\"isData ? value.url : undefined\"\n            [download]=\"isData ? value.file.name : undefined\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"md\" />\n      </button>\n    }\n  </div>\n\n  @if (value && isImage) {\n    <img\n      class=\"sky-file-attachment-preview-img\"\n      [alt]=\"\n        'skyux_file_attachment_file_upload_image_preview_alt_text'\n          | skyLibResources\n      \"\n      [src]=\"value.url\"\n    />\n  }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div\n      class=\"sky-file-attachment-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n    >\n      {{ hintText }}\n    </div>\n  }\n</div>\n\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @if (ngControl?.touched) {\n    @if (fileErrorName === 'fileType') {\n      <sky-form-error\n        errorName=\"fileType\"\n        [errorText]=\"\n          acceptedTypesErrorMessage ??\n            'skyux_file_attachment_file_type_error_label_text'\n            | skyLibResources: fileErrorParam\n        \"\n      />\n    } @else if (fileErrorName === 'maxFileSize') {\n      <sky-form-error\n        errorName=\"maxFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_max_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    } @else if (fileErrorName === 'minFileSize') {\n      <sky-form-error\n        errorName=\"minFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_min_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    }\n  }\n</sky-form-errors>\n\n<span\n  #attachButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{\n    value\n      ? ('skyux_file_attachment_button_label_replace_file_label'\n        | skyLibResources: fileName)\n      : ('skyux_file_attachment_button_label_choose_file_label'\n        | skyLibResources)\n  }}\n</span>\n\n<span\n  #deleteButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-font-size: 30px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));font-size:var(--sky-override-file-attachment-file-icon-font-size, var(--sky-size-icon-xl));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"] }]
+                    ], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', standalone: true, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span\n          class=\"sky-control-label\"\n          [attr.id]=\"labelId\"\n          [ngClass]=\"{\n            'sky-control-label-required': isRequired\n          }\"\n          >{{ labelText }}</span\n        >\n      }\n    } @else {\n      <ng-content select=\"sky-file-attachment-label\" />\n    }\n    @if (isRequired && (hasLabelComponent || labelText)) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_file_attachment_required' | skyLibResources\n      }}</span>\n    }\n    @if (labelText && (helpPopoverContent || helpKey)) {\n      <span class=\"sky-control-help-container\">\n        <sky-help-inline\n          [labelText]=\"labelText\"\n          [helpKey]=\"helpKey\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      </span>\n    }\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      #fileDropDescriptionRef=\"skyId\"\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      skyId\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      #fileInputRef\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n    />\n    @if (showFileAttachmentButton) {\n      <button\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        [attr.aria-describedby]=\"\n          hintText && hintTextEl.id\n            | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n        \"\n        [attr.aria-labelledby]=\"\n          attachButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n        [attr.aria-errormessage]=\"\n          !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        (blur)=\"onButtonBlur()\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    }\n    @if (value && !isImage && currentThemeName === 'modern') {\n      <sky-icon class=\"sky-file-attachment-icon\" icon=\"file-o\" />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a\n            [href]=\"isData ? value.url : undefined\"\n            [download]=\"isData ? value.file.name : undefined\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"md\" />\n      </button>\n    }\n  </div>\n\n  @if (value && isImage) {\n    <img\n      class=\"sky-file-attachment-preview-img\"\n      [alt]=\"\n        'skyux_file_attachment_file_upload_image_preview_alt_text'\n          | skyLibResources\n      \"\n      [src]=\"value.url\"\n    />\n  }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div\n      class=\"sky-file-attachment-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n    >\n      {{ hintText }}\n    </div>\n  }\n</div>\n\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @if (ngControl?.touched) {\n    @if (fileErrorName === 'fileType') {\n      <sky-form-error\n        errorName=\"fileType\"\n        [errorText]=\"\n          acceptedTypesErrorMessage ??\n            'skyux_file_attachment_file_type_error_label_text'\n            | skyLibResources: fileErrorParam\n        \"\n      />\n    } @else if (fileErrorName === 'maxFileSize') {\n      <sky-form-error\n        errorName=\"maxFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_max_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    } @else if (fileErrorName === 'minFileSize') {\n      <sky-form-error\n        errorName=\"minFileSize\"\n        [errorText]=\"\n          'skyux_file_attachment_min_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    }\n  }\n</sky-form-errors>\n\n<span\n  #attachButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{\n    value\n      ? ('skyux_file_attachment_button_label_replace_file_label'\n        | skyLibResources: fileName)\n      : ('skyux_file_attachment_button_label_choose_file_label'\n        | skyLibResources)\n  }}\n</span>\n\n<span\n  #deleteButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-font-size: 30px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));font-size:var(--sky-override-file-attachment-file-icon-font-size, var(--sky-size-icon-xl));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$2.NgControl, decorators: [{
                     type: Self
                 }, {