npm - @skyux/forms - Versions diffs - 12.20.0 → 12.22.0 - Mend

@skyux/forms 12.20.0 → 12.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/fesm2022/skyux-forms.mjs +10 -10
package/fesm2022/skyux-forms.mjs.map +1 -1
package/package.json +9 -9

package/fesm2022/skyux-forms.mjs CHANGED Viewed

@@ -2007,7 +2007,7 @@ class SkyFileAttachmentComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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$2.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 iconName=\"folder-open\" />\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\n        class=\"sky-file-attachment-icon\"\n        iconName=\"document\"\n        iconSize=\"xl\"\n      />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a [attr.title]=\"fileName\" (click)=\"emitClick()\">\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 iconName=\"delete\" />\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\"\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-base)) .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-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-container-base ) solid var(--modern-color-gray-20);--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-base)) .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));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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$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", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ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$2.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 iconName=\"folder-open\" />\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\n        class=\"sky-file-attachment-icon\"\n        iconName=\"document\"\n        iconSize=\"xl\"\n      />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a [attr.title]=\"fileName\" (click)=\"emitClick()\">\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 iconName=\"delete\" />\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\"\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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-border: 1px solid transparent;--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-base)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border: none;--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-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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-container-base ) solid var(--modern-color-gray-20);--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-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-border: 1px solid transparent;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .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{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:var(--sky-override-file-attachment-upload-border, none)}.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, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.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, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-danger));border:var(--sky-override-file-attachment-invalid-border, none)}: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));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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$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", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
             type: Component,
@@ -2026,7 +2026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     ], providers: [
                         SkyFileAttachmentService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', 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 iconName=\"folder-open\" />\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\n        class=\"sky-file-attachment-icon\"\n        iconName=\"document\"\n        iconSize=\"xl\"\n      />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a [attr.title]=\"fileName\" (click)=\"emitClick()\">\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 iconName=\"delete\" />\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\"\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-base)) .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-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-container-base ) solid var(--modern-color-gray-20);--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-base)) .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));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"] }]
+                    ], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', 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 iconName=\"folder-open\" />\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\n        class=\"sky-file-attachment-icon\"\n        iconName=\"document\"\n        iconSize=\"xl\"\n      />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a [attr.title]=\"fileName\" (click)=\"emitClick()\">\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 iconName=\"delete\" />\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\"\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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-border: 1px solid transparent;--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-base)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border: none;--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-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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-container-base ) solid var(--modern-color-gray-20);--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-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-border: 1px solid transparent;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .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{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:var(--sky-override-file-attachment-upload-border, none)}.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, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.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, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-danger));border:var(--sky-override-file-attachment-invalid-border, none)}: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));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -2948,7 +2948,7 @@ class SkyFileDropComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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-form-field-stacked": "this.stacked" } }, providers: [
             SkyFileAttachmentService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset class=\"sky-file-drop-wrapper\">\n  @if (labelText) {\n    <legend\n      class=\"sky-control-label sky-font-body-default\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': labelHidden\n      }\"\n    >\n      <span\n        class=\"sky-file-drop-label-text\"\n        [ngClass]=\"{\n          'sky-control-label-required': isRequired\n        }\"\n        >{{ labelText }}</span\n      >\n      @if (isRequired) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverTitle]=\"helpPopoverTitle\"\n            [popoverContent]=\"helpPopoverContent\"\n          />\n        </span>\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-file-drop-upload-contents\">\n          <div class=\"sky-file-drop-contents-not-over\">\n            <div\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\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\n              class=\"sky-file-upload-icon\"\n              iconName=\"arrow-upload\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_drop_files_here'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon\"\n              iconName=\"target\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_invalid_file'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon\"\n              iconName=\"close\"\n              iconSize=\"xl\"\n            />\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\">\n          <div class=\"sky-file-drop-link\">\n            <div class=\"sky-file-drop-link-header\">\n              <div\n                class=\"sky-file-drop-text-header\"\n                [skyThemeClass]=\"{\n                  'sky-font-display-3': 'default'\n                }\"\n              >\n                {{\n                  'skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <sky-input-box [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\n        class=\"sky-font-deemphasized sky-file-drop-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</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n  [dirty]=\"ngControl?.dirty\"\n  [errors]=\"ngControl?.errors\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @for (rejectedFile of rejectedFiles; track rejectedFile.url) {\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: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.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:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger))}.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;max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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", "iconSize"] }, { 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"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset class=\"sky-file-drop-wrapper\">\n  @if (labelText) {\n    <legend\n      class=\"sky-control-label sky-font-body-default\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': labelHidden\n      }\"\n    >\n      <span\n        class=\"sky-file-drop-label-text\"\n        [ngClass]=\"{\n          'sky-control-label-required': isRequired\n        }\"\n        >{{ labelText }}</span\n      >\n      @if (isRequired) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverTitle]=\"helpPopoverTitle\"\n            [popoverContent]=\"helpPopoverContent\"\n          />\n        </span>\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-file-drop-upload-contents\">\n          <div class=\"sky-file-drop-contents-not-over\">\n            <div\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\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\n              class=\"sky-file-upload-icon\"\n              iconName=\"arrow-upload\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_drop_files_here'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon sky-file-upload-icon-target\"\n              iconName=\"target\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_invalid_file'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon sky-file-upload-icon-close\"\n              iconName=\"prohibited\"\n              iconSize=\"xl\"\n            />\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\">\n          <div class=\"sky-file-drop-link\">\n            <div class=\"sky-file-drop-link-header\">\n              <div\n                class=\"sky-file-drop-text-header\"\n                [skyThemeClass]=\"{\n                  'sky-font-display-3': 'default'\n                }\"\n              >\n                {{\n                  'skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <sky-input-box [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\n        class=\"sky-font-deemphasized sky-file-drop-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</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n  [dirty]=\"ngControl?.dirty\"\n  [errors]=\"ngControl?.errors\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @for (rejectedFile of rejectedFiles; track rejectedFile.url) {\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: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-drag-contents-border-style: dashed;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px;--sky-override-file-upload-icon-close-color: none}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-drag-border-width: var( --sky-border-width-input-hover );--sky-override-file-drop-drag-contents-border-style: dashed;--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10);--sky-override-file-upload-icon-color: var(--sky-color-icon-deemphasized)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:var(--sky-override-file-drop-drag-contents-border-style, solid);border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.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:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.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;max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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", "iconSize"] }, { 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"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyFileDropComponent, decorators: [{
             type: Component,
@@ -2967,7 +2967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         SkyIdModule,
                         SkyInputBoxModule,
                         SkyThemeModule,
-                    ], template: "<fieldset class=\"sky-file-drop-wrapper\">\n  @if (labelText) {\n    <legend\n      class=\"sky-control-label sky-font-body-default\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': labelHidden\n      }\"\n    >\n      <span\n        class=\"sky-file-drop-label-text\"\n        [ngClass]=\"{\n          'sky-control-label-required': isRequired\n        }\"\n        >{{ labelText }}</span\n      >\n      @if (isRequired) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverTitle]=\"helpPopoverTitle\"\n            [popoverContent]=\"helpPopoverContent\"\n          />\n        </span>\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-file-drop-upload-contents\">\n          <div class=\"sky-file-drop-contents-not-over\">\n            <div\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\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\n              class=\"sky-file-upload-icon\"\n              iconName=\"arrow-upload\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_drop_files_here'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon\"\n              iconName=\"target\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_invalid_file'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon\"\n              iconName=\"close\"\n              iconSize=\"xl\"\n            />\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\">\n          <div class=\"sky-file-drop-link\">\n            <div class=\"sky-file-drop-link-header\">\n              <div\n                class=\"sky-file-drop-text-header\"\n                [skyThemeClass]=\"{\n                  'sky-font-display-3': 'default'\n                }\"\n              >\n                {{\n                  'skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <sky-input-box [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\n        class=\"sky-font-deemphasized sky-file-drop-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</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n  [dirty]=\"ngControl?.dirty\"\n  [errors]=\"ngControl?.errors\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @for (rejectedFile of rejectedFiles; track rejectedFile.url) {\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: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.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:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger))}.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;max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"] }]
+                    ], template: "<fieldset class=\"sky-file-drop-wrapper\">\n  @if (labelText) {\n    <legend\n      class=\"sky-control-label sky-font-body-default\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': labelHidden\n      }\"\n    >\n      <span\n        class=\"sky-file-drop-label-text\"\n        [ngClass]=\"{\n          'sky-control-label-required': isRequired\n        }\"\n        >{{ labelText }}</span\n      >\n      @if (isRequired) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <span class=\"sky-control-help-container\">\n          <sky-help-inline\n            [helpKey]=\"helpKey\"\n            [labelText]=\"labelText\"\n            [popoverTitle]=\"helpPopoverTitle\"\n            [popoverContent]=\"helpPopoverContent\"\n          />\n        </span>\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-file-drop-upload-contents\">\n          <div class=\"sky-file-drop-contents-not-over\">\n            <div\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\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\n              class=\"sky-file-upload-icon\"\n              iconName=\"arrow-upload\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_drop_files_here'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon sky-file-upload-icon-target\"\n              iconName=\"target\"\n              iconSize=\"xl\"\n            />\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\n              class=\"sky-file-drop-text-header\"\n              [skyThemeClass]=\"{\n                'sky-font-display-3': 'default'\n              }\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_invalid_file'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon\n              class=\"sky-file-upload-icon sky-file-upload-icon-close\"\n              iconName=\"prohibited\"\n              iconSize=\"xl\"\n            />\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\">\n          <div class=\"sky-file-drop-link\">\n            <div class=\"sky-file-drop-link-header\">\n              <div\n                class=\"sky-file-drop-text-header\"\n                [skyThemeClass]=\"{\n                  'sky-font-display-3': 'default'\n                }\"\n              >\n                {{\n                  'skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <sky-input-box [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\n        class=\"sky-font-deemphasized sky-file-drop-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</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n  [dirty]=\"ngControl?.dirty\"\n  [errors]=\"ngControl?.errors\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @for (rejectedFile of rejectedFiles; track rejectedFile.url) {\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: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-drag-contents-border-style: dashed;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px;--sky-override-file-upload-icon-close-color: none}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-drag-border-width: var( --sky-border-width-input-hover );--sky-override-file-drop-drag-contents-border-style: dashed;--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10);--sky-override-file-upload-icon-color: var(--sky-color-icon-deemphasized)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}: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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));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:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:var(--sky-override-file-drop-drag-contents-border-style, solid);border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.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:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.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;max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filesChanged: [{
                 type: Output
             }], linkInputBlur: [{
@@ -3157,11 +3157,11 @@ class SkyFileItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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\">\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            {{ fileName }}\n          } @else {\n            {{ url }}\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 iconName=\"delete\" />\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 iconSize=\"xxxl\" [iconName]=\"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:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-item{--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: var(--modern-size-1) solid #e2e3e4;--sky-override-file-item-border-radius: var(--modern-border-radius-0);--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: var(--sky-font-size-body-m);--sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m)}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-space-inset-balanced-s))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-weight-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-weight-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));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:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));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", "iconSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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\">\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            {{ fileName }}\n          } @else {\n            {{ url }}\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 iconName=\"delete\" />\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 iconSize=\"xxxl\" [iconName]=\"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:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-item{--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: var(--modern-size-1) solid #e2e3e4;--sky-override-file-item-border-radius: var(--modern-border-radius-0);--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: var(--sky-font-size-body-m);--sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m)}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-weight-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-weight-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));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:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));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", "iconSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyFileItemComponent, decorators: [{
             type: Component,
-            args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', template: "@if (fileItem) {\n  <div class=\"sky-file-item\">\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            {{ fileName }}\n          } @else {\n            {{ url }}\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 iconName=\"delete\" />\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 iconSize=\"xxxl\" [iconName]=\"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:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-item{--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: var(--modern-size-1) solid #e2e3e4;--sky-override-file-item-border-radius: var(--modern-border-radius-0);--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: var(--sky-font-size-body-m);--sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m)}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-space-inset-balanced-s))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-weight-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-weight-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));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:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"] }]
+            args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', template: "@if (fileItem) {\n  <div class=\"sky-file-item\">\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            {{ fileName }}\n          } @else {\n            {{ url }}\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 iconName=\"delete\" />\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 iconSize=\"xxxl\" [iconName]=\"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:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-file-item{--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: var(--modern-size-1) solid #e2e3e4;--sky-override-file-item-border-radius: var(--modern-border-radius-0);--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: var(--sky-font-size-body-m);--sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m)}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-weight-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-weight-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));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:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
                 type: Input
             }], deleteFile: [{
@@ -4321,11 +4321,11 @@ class SkySelectionBoxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SkySelectionBoxComponent, isStandalone: false, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n  #selectionBox\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div\n    #icon\n    class=\"sky-selection-box-icon\"\n    [ngClass]=\"{\n      'sky-selection-box-icon-hidden': !icon.innerHTML.trim()\n    }\"\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div class=\"sky-selection-box-header sky-font-display-2\">\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div class=\"sky-selection-box-description sky-font-deemphasized\">\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div #control class=\"sky-selection-box-control\">\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box:not(.sky-theme-modern *){--sky-override-selection-box-background-hover: #ffffff;--sky-override-selection-box-background-selected: #f1eef6;--sky-override-selection-box-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-box-shadow-hover: 0px 0px 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px #00b4f1;--sky-override-selection-box-box-shadow-selected: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-content-margin-right: 10px;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 0;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-icon-background: transparent;--sky-override-selection-box-icon-border-radius: 0;--sky-override-selection-box-icon-color: #0974a1;--sky-override-selection-box-icon-margin: 10px;--sky-override-selection-box-icon-size: 42px;--sky-override-selection-box-padding: 15px 15px 15px 15px;--sky-override-selection-box-switch-border-hover: solid 1px #00b4f1;--sky-override-selection-box-switch-control-outline-hover: auto;--sky-override-selection-box-switch-control-box-shadow-focus: none;--sky-override-selection-box-switch-control-border-focus: 1px solid #cdcfd2;--sky-override-selection-box-background-color-disabled: #eeeeef;--sky-override-selection-box-icon-color-disabled: #686c73;--sky-override-selection-box-icon-background-color-disabled: transparent;--sky-override-selection-box-header-color-disabled: var( --sky-text-color-default )}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box{--sky-override-selection-box-box-shadow: var(--sky-elevation-raised-100);--sky-override-selection-box-box-shadow-hover: var(--sky-elevation-raised-100), inset 0 0 0 1px #1870B8;--sky-override-selection-box-box-shadow-selected: inset 0 0 0 2px #1870b8, 0px 1px 8px 0px rgba(0, 0, 0, .3), inset 6px 0 0 0 #0974a1;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 3px;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-header-color-disabled: var( --sky-color-text-default )}.sky-selection-box{display:flex;flex-flow:row nowrap;text-align:left}.sky-selection-box.sky-btn-default{padding:var(--sky-override-selection-box-padding, var(--sky-space-inset-balanced-xl))}.sky-selection-box.sky-btn-default:not(.sky-selection-box-disabled){box-shadow:var(--sky-override-selection-box-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default:hover{background:var(--sky-override-selection-box-background-hover, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover .sky-switch-control{border:var(--sky-override-selection-box-switch-border-hover, solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control{outline:var(--sky-override-selection-box-switch-control-outline-hover, none);border:var(--sky-override-selection-box-switch-control-border-focus, none);box-shadow:var(--sky-override-selection-box-switch-control-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-selection-box.sky-btn-default.sky-selection-box-selected,.sky-selection-box.sky-btn-default:hover.sky-selection-box-selected,.sky-selection-box.sky-btn-default:focus.sky-selection-box-selected{background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-selection-box-disabled{background:var(--sky-override-selection-box-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-header{color:var(--sky-override-selection-box-header-color-disabled, var(--sky-color-text-deemphasized))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:var(--sky-override-selection-box-icon-color-disabled, var(--sky-color-icon-deemphasized));background:var(--sky-override-selection-box-icon-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box .sky-selection-box-icon{background:var(--sky-override-selection-box-icon-background, var(--sky-color-background-icon_matte-action-soft));color:var(--sky-override-selection-box-icon-color, var(--sky-color-icon-action));margin:0 var(--sky-override-selection-box-icon-margin, var(--sky-space-inline-m)) 0 0;width:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));height:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));border-radius:var(--sky-override-selection-box-icon-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-icon.sky-selection-box-icon-hidden{display:none}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 var(--sky-override-selection-box-content-margin-right, var(--sky-space-inline-xl)) 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:var(--sky-override-selection-box-header-padding-top, 0)}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:var(--sky-override-selection-box-control-padding-top, 0)}.sky-selection-box .sky-selection-box-description{margin-top:var(--sky-override-selection-box-description-margin-top, var(--sky-space-stacked-xs))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SkySelectionBoxComponent, isStandalone: false, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n  #selectionBox\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div\n    #icon\n    class=\"sky-selection-box-icon\"\n    [ngClass]=\"{\n      'sky-selection-box-icon-hidden': !icon.innerHTML.trim()\n    }\"\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div class=\"sky-selection-box-header sky-font-display-2\">\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div class=\"sky-selection-box-description sky-font-deemphasized\">\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div #control class=\"sky-selection-box-control\">\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box:not(.sky-theme-modern *){--sky-override-selection-box-background-hover: #ffffff;--sky-override-selection-box-background-selected: #f1eef6;--sky-override-selection-box-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-box-shadow-hover: 0px 0px 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px #00b4f1;--sky-override-selection-box-box-shadow-selected: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-content-margin-right: 10px;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 0;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-icon-background: transparent;--sky-override-selection-box-icon-border-radius: 0;--sky-override-selection-box-icon-color: #0974a1;--sky-override-selection-box-icon-margin: 10px;--sky-override-selection-box-icon-size: 42px;--sky-override-selection-box-padding: 15px 15px 15px 15px;--sky-override-selection-box-switch-border-hover: solid 1px #00b4f1;--sky-override-selection-box-switch-control-outline-hover: auto;--sky-override-selection-box-switch-control-box-shadow-focus: none;--sky-override-selection-box-switch-control-border-focus: 1px solid #cdcfd2;--sky-override-selection-box-background-color-disabled: #eeeeef;--sky-override-selection-box-icon-color-disabled: #686c73;--sky-override-selection-box-icon-background-color-disabled: transparent;--sky-override-selection-box-header-color-disabled: var( --sky-text-color-default )}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box{--sky-override-selection-box-box-shadow: var(--sky-elevation-raised-100);--sky-override-selection-box-box-shadow-hover: var(--sky-elevation-raised-100), inset 0 0 0 1px #1870B8;--sky-override-selection-box-box-shadow-selected: inset 0 0 0 2px #1870b8, 0px 1px 8px 0px rgba(0, 0, 0, .3), inset 6px 0 0 0 #0974a1;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 3px;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-header-color-disabled: var( --sky-color-text-default )}.sky-selection-box{display:flex;flex-flow:row nowrap;text-align:left}.sky-selection-box.sky-btn-default{padding:var(--sky-override-selection-box-padding, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box.sky-btn-default:not(.sky-selection-box-disabled){box-shadow:var(--sky-override-selection-box-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default:hover{background:var(--sky-override-selection-box-background-hover, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover .sky-switch-control{border:var(--sky-override-selection-box-switch-border-hover, solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control{outline:var(--sky-override-selection-box-switch-control-outline-hover, none);border:var(--sky-override-selection-box-switch-control-border-focus, none);box-shadow:var(--sky-override-selection-box-switch-control-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-selection-box.sky-btn-default.sky-selection-box-selected,.sky-selection-box.sky-btn-default:hover.sky-selection-box-selected,.sky-selection-box.sky-btn-default:focus.sky-selection-box-selected{background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-selection-box-disabled{background:var(--sky-override-selection-box-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-header{color:var(--sky-override-selection-box-header-color-disabled, var(--sky-color-text-deemphasized))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:var(--sky-override-selection-box-icon-color-disabled, var(--sky-color-icon-deemphasized));background:var(--sky-override-selection-box-icon-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box .sky-selection-box-icon{background:var(--sky-override-selection-box-icon-background, var(--sky-color-background-icon_matte-action-soft));color:var(--sky-override-selection-box-icon-color, var(--sky-color-icon-action));margin:0 var(--sky-override-selection-box-icon-margin, var(--sky-space-inline-m)) 0 0;width:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));height:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));border-radius:var(--sky-override-selection-box-icon-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-icon.sky-selection-box-icon-hidden{display:none}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 var(--sky-override-selection-box-content-margin-right, var(--sky-space-inline-xl)) 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:var(--sky-override-selection-box-header-padding-top, 0)}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:var(--sky-override-selection-box-control-padding-top, 0)}.sky-selection-box .sky-selection-box-description{margin-top:var(--sky-override-selection-box-description-margin-top, var(--sky-space-stacked-xs))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<label\n  #selectionBox\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div\n    #icon\n    class=\"sky-selection-box-icon\"\n    [ngClass]=\"{\n      'sky-selection-box-icon-hidden': !icon.innerHTML.trim()\n    }\"\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div class=\"sky-selection-box-header sky-font-display-2\">\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div class=\"sky-selection-box-description sky-font-deemphasized\">\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div #control class=\"sky-selection-box-control\">\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box:not(.sky-theme-modern *){--sky-override-selection-box-background-hover: #ffffff;--sky-override-selection-box-background-selected: #f1eef6;--sky-override-selection-box-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-box-shadow-hover: 0px 0px 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px #00b4f1;--sky-override-selection-box-box-shadow-selected: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-content-margin-right: 10px;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 0;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-icon-background: transparent;--sky-override-selection-box-icon-border-radius: 0;--sky-override-selection-box-icon-color: #0974a1;--sky-override-selection-box-icon-margin: 10px;--sky-override-selection-box-icon-size: 42px;--sky-override-selection-box-padding: 15px 15px 15px 15px;--sky-override-selection-box-switch-border-hover: solid 1px #00b4f1;--sky-override-selection-box-switch-control-outline-hover: auto;--sky-override-selection-box-switch-control-box-shadow-focus: none;--sky-override-selection-box-switch-control-border-focus: 1px solid #cdcfd2;--sky-override-selection-box-background-color-disabled: #eeeeef;--sky-override-selection-box-icon-color-disabled: #686c73;--sky-override-selection-box-icon-background-color-disabled: transparent;--sky-override-selection-box-header-color-disabled: var( --sky-text-color-default )}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box{--sky-override-selection-box-box-shadow: var(--sky-elevation-raised-100);--sky-override-selection-box-box-shadow-hover: var(--sky-elevation-raised-100), inset 0 0 0 1px #1870B8;--sky-override-selection-box-box-shadow-selected: inset 0 0 0 2px #1870b8, 0px 1px 8px 0px rgba(0, 0, 0, .3), inset 6px 0 0 0 #0974a1;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 3px;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-header-color-disabled: var( --sky-color-text-default )}.sky-selection-box{display:flex;flex-flow:row nowrap;text-align:left}.sky-selection-box.sky-btn-default{padding:var(--sky-override-selection-box-padding, var(--sky-space-inset-balanced-xl))}.sky-selection-box.sky-btn-default:not(.sky-selection-box-disabled){box-shadow:var(--sky-override-selection-box-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default:hover{background:var(--sky-override-selection-box-background-hover, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover .sky-switch-control{border:var(--sky-override-selection-box-switch-border-hover, solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control{outline:var(--sky-override-selection-box-switch-control-outline-hover, none);border:var(--sky-override-selection-box-switch-control-border-focus, none);box-shadow:var(--sky-override-selection-box-switch-control-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-selection-box.sky-btn-default.sky-selection-box-selected,.sky-selection-box.sky-btn-default:hover.sky-selection-box-selected,.sky-selection-box.sky-btn-default:focus.sky-selection-box-selected{background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-selection-box-disabled{background:var(--sky-override-selection-box-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-header{color:var(--sky-override-selection-box-header-color-disabled, var(--sky-color-text-deemphasized))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:var(--sky-override-selection-box-icon-color-disabled, var(--sky-color-icon-deemphasized));background:var(--sky-override-selection-box-icon-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box .sky-selection-box-icon{background:var(--sky-override-selection-box-icon-background, var(--sky-color-background-icon_matte-action-soft));color:var(--sky-override-selection-box-icon-color, var(--sky-color-icon-action));margin:0 var(--sky-override-selection-box-icon-margin, var(--sky-space-inline-m)) 0 0;width:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));height:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));border-radius:var(--sky-override-selection-box-icon-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-icon.sky-selection-box-icon-hidden{display:none}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 var(--sky-override-selection-box-content-margin-right, var(--sky-space-inline-xl)) 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:var(--sky-override-selection-box-header-padding-top, 0)}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:var(--sky-override-selection-box-control-padding-top, 0)}.sky-selection-box .sky-selection-box-description{margin-top:var(--sky-override-selection-box-description-margin-top, var(--sky-space-stacked-xs))}\n"] }]
+            args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<label\n  #selectionBox\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div\n    #icon\n    class=\"sky-selection-box-icon\"\n    [ngClass]=\"{\n      'sky-selection-box-icon-hidden': !icon.innerHTML.trim()\n    }\"\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div class=\"sky-selection-box-header sky-font-display-2\">\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div class=\"sky-selection-box-description sky-font-deemphasized\">\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div #control class=\"sky-selection-box-control\">\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box:not(.sky-theme-modern *){--sky-override-selection-box-background-hover: #ffffff;--sky-override-selection-box-background-selected: #f1eef6;--sky-override-selection-box-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-box-shadow-hover: 0px 0px 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px #00b4f1;--sky-override-selection-box-box-shadow-selected: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-content-margin-right: 10px;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 0;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-icon-background: transparent;--sky-override-selection-box-icon-border-radius: 0;--sky-override-selection-box-icon-color: #0974a1;--sky-override-selection-box-icon-margin: 10px;--sky-override-selection-box-icon-size: 42px;--sky-override-selection-box-padding: 15px 15px 15px 15px;--sky-override-selection-box-switch-border-hover: solid 1px #00b4f1;--sky-override-selection-box-switch-control-outline-hover: auto;--sky-override-selection-box-switch-control-box-shadow-focus: none;--sky-override-selection-box-switch-control-border-focus: 1px solid #cdcfd2;--sky-override-selection-box-background-color-disabled: #eeeeef;--sky-override-selection-box-icon-color-disabled: #686c73;--sky-override-selection-box-icon-background-color-disabled: transparent;--sky-override-selection-box-header-color-disabled: var( --sky-text-color-default )}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box{--sky-override-selection-box-box-shadow: var(--sky-elevation-raised-100);--sky-override-selection-box-box-shadow-hover: var(--sky-elevation-raised-100), inset 0 0 0 1px #1870B8;--sky-override-selection-box-box-shadow-selected: inset 0 0 0 2px #1870b8, 0px 1px 8px 0px rgba(0, 0, 0, .3), inset 6px 0 0 0 #0974a1;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 3px;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-header-color-disabled: var( --sky-color-text-default )}.sky-selection-box{display:flex;flex-flow:row nowrap;text-align:left}.sky-selection-box.sky-btn-default{padding:var(--sky-override-selection-box-padding, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box.sky-btn-default:not(.sky-selection-box-disabled){box-shadow:var(--sky-override-selection-box-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default:hover{background:var(--sky-override-selection-box-background-hover, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover .sky-switch-control{border:var(--sky-override-selection-box-switch-border-hover, solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control{outline:var(--sky-override-selection-box-switch-control-outline-hover, none);border:var(--sky-override-selection-box-switch-control-border-focus, none);box-shadow:var(--sky-override-selection-box-switch-control-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default:focus-visible .sky-switch-control .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-selection-box.sky-btn-default.sky-selection-box-selected,.sky-selection-box.sky-btn-default:hover.sky-selection-box-selected,.sky-selection-box.sky-btn-default:focus.sky-selection-box-selected{background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-selection-box-disabled{background:var(--sky-override-selection-box-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-header{color:var(--sky-override-selection-box-header-color-disabled, var(--sky-color-text-deemphasized))}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:var(--sky-override-selection-box-icon-color-disabled, var(--sky-color-icon-deemphasized));background:var(--sky-override-selection-box-icon-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box .sky-selection-box-icon{background:var(--sky-override-selection-box-icon-background, var(--sky-color-background-icon_matte-action-soft));color:var(--sky-override-selection-box-icon-color, var(--sky-color-icon-action));margin:0 var(--sky-override-selection-box-icon-margin, var(--sky-space-inline-m)) 0 0;width:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));height:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));border-radius:var(--sky-override-selection-box-icon-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-icon.sky-selection-box-icon-hidden{display:none}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 var(--sky-override-selection-box-content-margin-right, var(--sky-space-inline-xl)) 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:var(--sky-override-selection-box-header-padding-top, 0)}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:var(--sky-override-selection-box-control-padding-top, 0)}.sky-selection-box .sky-selection-box-description{margin-top:var(--sky-override-selection-box-description-margin-top, var(--sky-space-stacked-xs))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }], propDecorators: { control: [{
                 type: Input
             }], controlEl: [{
@@ -4449,11 +4449,11 @@ class SkySelectionBoxGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$3.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i1$3.SkyMutationObserverService }, { token: i0.NgZone }, { token: i1$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box-grid{--sky-override-selection-box-header-heading-2-font-size: 24px;--sky-override-selection-box-header-heading-2-font-weight: 400;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-space-inset-balanced-m))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-space-inset-balanced-m))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box-grid{--sky-override-selection-box-header-heading-2-font-size: 24px;--sky-override-selection-box-header-heading-2-font-weight: 400;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-collapsed-space-inset-top) var(--sky-comp-selection_box-collapsed-space-inset-right) var(--sky-comp-selection_box-collapsed-space-inset-bottom) var(--sky-comp-selection_box-collapsed-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  #container\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box-grid{--sky-override-selection-box-header-heading-2-font-size: 24px;--sky-override-selection-box-header-heading-2-font-weight: 400;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-space-inset-balanced-m))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-space-inset-balanced-m))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"] }]
+            args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  #container\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}.sky-theme-modern:not(.sky-theme-brand-base) .sky-selection-box-grid{--sky-override-selection-box-header-heading-2-font-size: 24px;--sky-override-selection-box-header-heading-2-font-weight: 400;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-collapsed-space-inset-top) var(--sky-comp-selection_box-collapsed-space-inset-right) var(--sky-comp-selection_box-collapsed-space-inset-bottom) var(--sky-comp-selection_box-collapsed-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-weight-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i1$3.SkyMutationObserverService }, { type: i0.NgZone }, { type: i1$2.SkyThemeService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { alignItems: [{