@skyux/forms 14.0.0-alpha.8 → 14.0.0-beta.0

package/fesm2022/skyux-forms.mjs

@@ -2012,7 +2012,7 @@ class SkyFileAttachmentComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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      (cancel)=\"onFileCancel()\"\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\n            class=\"sky-btn sky-btn-link-inline\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon 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.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: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: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-touched) .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-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: i4$1.λ1, selector: "sky-icon", inputs: ["iconName", "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]" }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], 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      (cancel)=\"onFileCancel()\"\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\n            class=\"sky-btn sky-btn-link-inline\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon 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.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: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: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 var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}:host(.ng-invalid.ng-touched) .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-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: i4$1.λ1, selector: "sky-icon", inputs: ["iconName", "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]" }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
             type: Component,
@@ -2031,7 +2031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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      (cancel)=\"onFileCancel()\"\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\n            class=\"sky-btn sky-btn-link-inline\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon 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.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: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: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-touched) .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-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);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      (cancel)=\"onFileCancel()\"\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\n            class=\"sky-btn sky-btn-link-inline\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon 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.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: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: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 var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}:host(.ng-invalid.ng-touched) .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-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -2547,7 +2547,7 @@ class SkyInputBoxComponent {
                 provide: SKY_FORM_ERRORS_ENABLED,
                 useValue: true,
             },
-        ], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  @if (labelText) {\n    <label\n      class=\"sky-control-label\"\n      [attr.aria-label]=\"\n        characterLimit !== undefined\n          ? labelText +\n            ' ' +\n            ('skyux_character_count_message'\n              | skyLibResources: characterCountScreenReader : characterLimit)\n          : null\n      \"\n      [for]=\"controlId\"\n      [id]=\"labelId\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</label\n    >\n  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-control-help\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverContent]=\"helpPopoverContent\"\n      [popoverTitle]=\"helpPopoverTitle\"\n    />\n  }\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\n  }\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-autocomplete,sky-text-editor\"\n  />\n  @if (hostInputTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n  }\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  @if (hostButtonsLeftTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  @if (hostButtonsTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  @if (hostButtonsInsetTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n  }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    @if (hostIconsInsetTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [touched]=\"controlDir?.touched\"\n    [dirty]=\"controlDir?.dirty\"\n  >\n    <ng-content\n      select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n    />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  @if (hintText || hostHintText) {\n    <div\n      class=\"sky-input-box-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n      [ngClass]=\"{\n        'sky-input-box-hint-text-hidden': hintTextHidden,\n        'sky-screen-reader-only': hintTextScreenReaderOnly\n      }\"\n      [id]=\"hintTextId\"\n    >\n      {{ hintText | skyInputBoxHintText: hostHintText }}\n    </div>\n  }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-input-base )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box sky-form-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMC41MzAzIDIuNzE5NjdDMTAuMjM3NCAyLjQyNjc4IDkuNzYyNTYgMi40MjY3OCA5LjQ2OTY3IDIuNzE5NjdMNS4yMTk2NyA2Ljk2OTY3QzQuOTI2NzggNy4yNjI1NiA0LjkyNjc4IDcuNzM3NDQgNS4yMTk2NyA4LjAzMDMzQzUuNTEyNTYgOC4zMjMyMiA1Ljk4NzQ0IDguMzIzMjIgNi4yODAzMyA4LjAzMDMzTDEwIDQuMzEwNjZMMTMuNzE5NyA4LjAzMDMzQzE0LjAxMjYgOC4zMjMyMiAxNC40ODc0IDguMzIzMjIgMTQuNzgwMyA4LjAzMDMzQzE1LjA3MzIgNy43Mzc0NCAxNS4wNzMyIDcuMjYyNTYgMTQuNzgwMyA2Ljk2OTY3TDEwLjUzMDMgMi43MTk2N1pNMTQuNzgwMyAxMy4wMzAzTDEwLjUzMDMgMTcuMjgwM0MxMC4yMzc0IDE3LjU3MzIgOS43NjI1NiAxNy41NzMyIDkuNDY5NjcgMTcuMjgwM0w1LjIxOTY3IDEzLjAzMDNDNC45MjY3OCAxMi43Mzc0IDQuOTI2NzggMTIuMjYyNiA1LjIxOTY3IDExLjk2OTdDNS41MTI1NiAxMS42NzY4IDUuOTg3NDQgMTEuNjc2OCA2LjI4MDMzIDExLjk2OTdMMTAgMTUuNjg5M0wxMy43MTk3IDExLjk2OTdDMTQuMDEyNiAxMS42NzY4IDE0LjQ4NzQgMTEuNjc2OCAxNC43ODAzIDExLjk2OTdDMTUuMDczMiAxMi4yNjI2IDE1LjA3MzIgMTIuNzM3NCAxNC43ODAzIDEzLjAzMDNaIiBmaWxsPSIjMmI2YmQ1Ii8+DQo8L3N2Zz4NCg==) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUzMDMgMi43MTk2N0MxMC4yMzc0IDIuNDI2NzggOS43NjI1NiAyLjQyNjc4IDkuNDY5NjcgMi43MTk2N0w1LjIxOTY3IDYuOTY5NjdDNC45MjY3OCA3LjI2MjU2IDQuOTI2NzggNy43Mzc0NCA1LjIxOTY3IDguMDMwMzNDNS41MTI1NiA4LjMyMzIyIDUuOTg3NDQgOC4zMjMyMiA2LjI4MDMzIDguMDMwMzNMMTAgNC4zMTA2NkwxMy43MTk3IDguMDMwMzNDMTQuMDEyNiA4LjMyMzIyIDE0LjQ4NzQgOC4zMjMyMiAxNC43ODAzIDguMDMwMzNDMTUuMDczMiA3LjczNzQ0IDE1LjA3MzIgNy4yNjI1NiAxNC43ODAzIDYuOTY5NjdMMTAuNTMwMyAyLjcxOTY3Wk0xNC43ODAzIDEzLjAzMDNMMTAuNTMwMyAxNy4yODAzQzEwLjIzNzQgMTcuNTczMiA5Ljc2MjU2IDE3LjU3MzIgOS40Njk2NyAxNy4yODAzTDUuMjE5NjcgMTMuMDMwM0M0LjkyNjc4IDEyLjczNzQgNC45MjY3OCAxMi4yNjI2IDUuMjE5NjcgMTEuOTY5N0M1LjUxMjU2IDExLjY3NjggNS45ODc0NCAxMS42NzY4IDYuMjgwMzMgMTEuOTY5N0wxMCAxNS42ODkzTDEzLjcxOTcgMTEuOTY5N0MxNC4wMTI2IDExLjY3NjggMTQuNDg3NCAxMS42NzY4IDE0Ljc4MDMgMTEuOTY5N0MxNS4wNzMyIDEyLjI2MjYgMTUuMDczMiAxMi43Mzc0IDE0Ljc4MDMgMTMuMDMwM1oiIGZpbGw9IiM2NjZiNzAiLz4KPC9zdmc+) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-group-btn .sky-btn{padding:4.5px 12px}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-icon-input-action);margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-input-action);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-default);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-comp-input-label-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:var(--sky-input-box-space-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-comp-input-value-space-inset-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;border-top:var(--sky-input-box-space-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-input-box-space-top) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: var( --sky-color-border-action-input-base );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-hover );--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-focus );--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-error );--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-hover );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-active );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-focus );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  @if (labelText) {\n    <label\n      class=\"sky-control-label\"\n      [attr.aria-label]=\"\n        characterLimit !== undefined\n          ? labelText +\n            ' ' +\n            ('skyux_character_count_message'\n              | skyLibResources: characterCountScreenReader : characterLimit)\n          : null\n      \"\n      [for]=\"controlId\"\n      [id]=\"labelId\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</label\n    >\n  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-control-help\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverContent]=\"helpPopoverContent\"\n      [popoverTitle]=\"helpPopoverTitle\"\n    />\n  }\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\n  }\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-autocomplete,sky-text-editor\"\n  />\n  @if (hostInputTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n  }\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  @if (hostButtonsLeftTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  @if (hostButtonsTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  @if (hostButtonsInsetTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n  }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    @if (hostIconsInsetTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [touched]=\"controlDir?.touched\"\n    [dirty]=\"controlDir?.dirty\"\n  >\n    <ng-content\n      select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n    />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  @if (hintText || hostHintText) {\n    <div\n      class=\"sky-input-box-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n      [ngClass]=\"{\n        'sky-input-box-hint-text-hidden': hintTextHidden,\n        'sky-screen-reader-only': hintTextScreenReaderOnly\n      }\"\n      [id]=\"hintTextId\"\n    >\n      {{ hintText | skyInputBoxHintText: hostHintText }}\n    </div>\n  }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-input-base )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box sky-form-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMC41MzAzIDIuNzE5NjdDMTAuMjM3NCAyLjQyNjc4IDkuNzYyNTYgMi40MjY3OCA5LjQ2OTY3IDIuNzE5NjdMNS4yMTk2NyA2Ljk2OTY3QzQuOTI2NzggNy4yNjI1NiA0LjkyNjc4IDcuNzM3NDQgNS4yMTk2NyA4LjAzMDMzQzUuNTEyNTYgOC4zMjMyMiA1Ljk4NzQ0IDguMzIzMjIgNi4yODAzMyA4LjAzMDMzTDEwIDQuMzEwNjZMMTMuNzE5NyA4LjAzMDMzQzE0LjAxMjYgOC4zMjMyMiAxNC40ODc0IDguMzIzMjIgMTQuNzgwMyA4LjAzMDMzQzE1LjA3MzIgNy43Mzc0NCAxNS4wNzMyIDcuMjYyNTYgMTQuNzgwMyA2Ljk2OTY3TDEwLjUzMDMgMi43MTk2N1pNMTQuNzgwMyAxMy4wMzAzTDEwLjUzMDMgMTcuMjgwM0MxMC4yMzc0IDE3LjU3MzIgOS43NjI1NiAxNy41NzMyIDkuNDY5NjcgMTcuMjgwM0w1LjIxOTY3IDEzLjAzMDNDNC45MjY3OCAxMi43Mzc0IDQuOTI2NzggMTIuMjYyNiA1LjIxOTY3IDExLjk2OTdDNS41MTI1NiAxMS42NzY4IDUuOTg3NDQgMTEuNjc2OCA2LjI4MDMzIDExLjk2OTdMMTAgMTUuNjg5M0wxMy43MTk3IDExLjk2OTdDMTQuMDEyNiAxMS42NzY4IDE0LjQ4NzQgMTEuNjc2OCAxNC43ODAzIDExLjk2OTdDMTUuMDczMiAxMi4yNjI2IDE1LjA3MzIgMTIuNzM3NCAxNC43ODAzIDEzLjAzMDNaIiBmaWxsPSIjMmI2YmQ1Ii8+DQo8L3N2Zz4NCg==) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUzMDMgMi43MTk2N0MxMC4yMzc0IDIuNDI2NzggOS43NjI1NiAyLjQyNjc4IDkuNDY5NjcgMi43MTk2N0w1LjIxOTY3IDYuOTY5NjdDNC45MjY3OCA3LjI2MjU2IDQuOTI2NzggNy43Mzc0NCA1LjIxOTY3IDguMDMwMzNDNS41MTI1NiA4LjMyMzIyIDUuOTg3NDQgOC4zMjMyMiA2LjI4MDMzIDguMDMwMzNMMTAgNC4zMTA2NkwxMy43MTk3IDguMDMwMzNDMTQuMDEyNiA4LjMyMzIyIDE0LjQ4NzQgOC4zMjMyMiAxNC43ODAzIDguMDMwMzNDMTUuMDczMiA3LjczNzQ0IDE1LjA3MzIgNy4yNjI1NiAxNC43ODAzIDYuOTY5NjdMMTAuNTMwMyAyLjcxOTY3Wk0xNC43ODAzIDEzLjAzMDNMMTAuNTMwMyAxNy4yODAzQzEwLjIzNzQgMTcuNTczMiA5Ljc2MjU2IDE3LjU3MzIgOS40Njk2NyAxNy4yODAzTDUuMjE5NjcgMTMuMDMwM0M0LjkyNjc4IDEyLjczNzQgNC45MjY3OCAxMi4yNjI2IDUuMjE5NjcgMTEuOTY5N0M1LjUxMjU2IDExLjY3NjggNS45ODc0NCAxMS42NzY4IDYuMjgwMzMgMTEuOTY5N0wxMCAxNS42ODkzTDEzLjcxOTcgMTEuOTY5N0MxNC4wMTI2IDExLjY3NjggMTQuNDg3NCAxMS42NzY4IDE0Ljc4MDMgMTEuOTY5N0MxNS4wNzMyIDEyLjI2MjYgMTUuMDczMiAxMi43Mzc0IDE0Ljc4MDMgMTMuMDMwM1oiIGZpbGw9IiM2NjZiNzAiLz4KPC9zdmc+) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-group-btn .sky-btn{padding:4.5px 12px}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-icon-input-action);margin:0;padding:0;position:relative;transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short);width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-input-action);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-default);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-comp-input-label-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:var(--sky-input-box-space-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-comp-input-value-space-inset-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;border-top:var(--sky-input-box-space-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-input-box-space-top) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: var( --sky-color-border-action-input-base );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-hover );--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-focus );--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-error );--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-hover );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-active );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-focus );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
             type: Component,
@@ -2559,7 +2559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             provide: SKY_FORM_ERRORS_ENABLED,
                             useValue: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  @if (labelText) {\n    <label\n      class=\"sky-control-label\"\n      [attr.aria-label]=\"\n        characterLimit !== undefined\n          ? labelText +\n            ' ' +\n            ('skyux_character_count_message'\n              | skyLibResources: characterCountScreenReader : characterLimit)\n          : null\n      \"\n      [for]=\"controlId\"\n      [id]=\"labelId\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</label\n    >\n  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-control-help\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverContent]=\"helpPopoverContent\"\n      [popoverTitle]=\"helpPopoverTitle\"\n    />\n  }\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\n  }\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-autocomplete,sky-text-editor\"\n  />\n  @if (hostInputTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n  }\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  @if (hostButtonsLeftTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  @if (hostButtonsTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  @if (hostButtonsInsetTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n  }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    @if (hostIconsInsetTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [touched]=\"controlDir?.touched\"\n    [dirty]=\"controlDir?.dirty\"\n  >\n    <ng-content\n      select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n    />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  @if (hintText || hostHintText) {\n    <div\n      class=\"sky-input-box-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n      [ngClass]=\"{\n        'sky-input-box-hint-text-hidden': hintTextHidden,\n        'sky-screen-reader-only': hintTextScreenReaderOnly\n      }\"\n      [id]=\"hintTextId\"\n    >\n      {{ hintText | skyInputBoxHintText: hostHintText }}\n    </div>\n  }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-input-base )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box sky-form-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMC41MzAzIDIuNzE5NjdDMTAuMjM3NCAyLjQyNjc4IDkuNzYyNTYgMi40MjY3OCA5LjQ2OTY3IDIuNzE5NjdMNS4yMTk2NyA2Ljk2OTY3QzQuOTI2NzggNy4yNjI1NiA0LjkyNjc4IDcuNzM3NDQgNS4yMTk2NyA4LjAzMDMzQzUuNTEyNTYgOC4zMjMyMiA1Ljk4NzQ0IDguMzIzMjIgNi4yODAzMyA4LjAzMDMzTDEwIDQuMzEwNjZMMTMuNzE5NyA4LjAzMDMzQzE0LjAxMjYgOC4zMjMyMiAxNC40ODc0IDguMzIzMjIgMTQuNzgwMyA4LjAzMDMzQzE1LjA3MzIgNy43Mzc0NCAxNS4wNzMyIDcuMjYyNTYgMTQuNzgwMyA2Ljk2OTY3TDEwLjUzMDMgMi43MTk2N1pNMTQuNzgwMyAxMy4wMzAzTDEwLjUzMDMgMTcuMjgwM0MxMC4yMzc0IDE3LjU3MzIgOS43NjI1NiAxNy41NzMyIDkuNDY5NjcgMTcuMjgwM0w1LjIxOTY3IDEzLjAzMDNDNC45MjY3OCAxMi43Mzc0IDQuOTI2NzggMTIuMjYyNiA1LjIxOTY3IDExLjk2OTdDNS41MTI1NiAxMS42NzY4IDUuOTg3NDQgMTEuNjc2OCA2LjI4MDMzIDExLjk2OTdMMTAgMTUuNjg5M0wxMy43MTk3IDExLjk2OTdDMTQuMDEyNiAxMS42NzY4IDE0LjQ4NzQgMTEuNjc2OCAxNC43ODAzIDExLjk2OTdDMTUuMDczMiAxMi4yNjI2IDE1LjA3MzIgMTIuNzM3NCAxNC43ODAzIDEzLjAzMDNaIiBmaWxsPSIjMmI2YmQ1Ii8+DQo8L3N2Zz4NCg==) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUzMDMgMi43MTk2N0MxMC4yMzc0IDIuNDI2NzggOS43NjI1NiAyLjQyNjc4IDkuNDY5NjcgMi43MTk2N0w1LjIxOTY3IDYuOTY5NjdDNC45MjY3OCA3LjI2MjU2IDQuOTI2NzggNy43Mzc0NCA1LjIxOTY3IDguMDMwMzNDNS41MTI1NiA4LjMyMzIyIDUuOTg3NDQgOC4zMjMyMiA2LjI4MDMzIDguMDMwMzNMMTAgNC4zMTA2NkwxMy43MTk3IDguMDMwMzNDMTQuMDEyNiA4LjMyMzIyIDE0LjQ4NzQgOC4zMjMyMiAxNC43ODAzIDguMDMwMzNDMTUuMDczMiA3LjczNzQ0IDE1LjA3MzIgNy4yNjI1NiAxNC43ODAzIDYuOTY5NjdMMTAuNTMwMyAyLjcxOTY3Wk0xNC43ODAzIDEzLjAzMDNMMTAuNTMwMyAxNy4yODAzQzEwLjIzNzQgMTcuNTczMiA5Ljc2MjU2IDE3LjU3MzIgOS40Njk2NyAxNy4yODAzTDUuMjE5NjcgMTMuMDMwM0M0LjkyNjc4IDEyLjczNzQgNC45MjY3OCAxMi4yNjI2IDUuMjE5NjcgMTEuOTY5N0M1LjUxMjU2IDExLjY3NjggNS45ODc0NCAxMS42NzY4IDYuMjgwMzMgMTEuOTY5N0wxMCAxNS42ODkzTDEzLjcxOTcgMTEuOTY5N0MxNC4wMTI2IDExLjY3NjggMTQuNDg3NCAxMS42NzY4IDE0Ljc4MDMgMTEuOTY5N0MxNS4wNzMyIDEyLjI2MjYgMTUuMDczMiAxMi43Mzc0IDE0Ljc4MDMgMTMuMDMwM1oiIGZpbGw9IiM2NjZiNzAiLz4KPC9zdmc+) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-group-btn .sky-btn{padding:4.5px 12px}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-icon-input-action);margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-input-action);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-default);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-comp-input-label-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:var(--sky-input-box-space-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-comp-input-value-space-inset-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;border-top:var(--sky-input-box-space-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-input-box-space-top) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: var( --sky-color-border-action-input-base );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-hover );--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-focus );--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-error );--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-hover );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-active );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-focus );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  @if (labelText) {\n    <label\n      class=\"sky-control-label\"\n      [attr.aria-label]=\"\n        characterLimit !== undefined\n          ? labelText +\n            ' ' +\n            ('skyux_character_count_message'\n              | skyLibResources: characterCountScreenReader : characterLimit)\n          : null\n      \"\n      [for]=\"controlId\"\n      [id]=\"labelId\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</label\n    >\n  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-control-help\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverContent]=\"helpPopoverContent\"\n      [popoverTitle]=\"helpPopoverTitle\"\n    />\n  }\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\n  }\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-autocomplete,sky-text-editor\"\n  />\n  @if (hostInputTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n  }\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  @if (hostButtonsLeftTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  @if (hostButtonsTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  @if (hostButtonsInsetTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n  }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    @if (hostIconsInsetTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [touched]=\"controlDir?.touched\"\n    [dirty]=\"controlDir?.dirty\"\n  >\n    <ng-content\n      select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n    />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  @if (hintText || hostHintText) {\n    <div\n      class=\"sky-input-box-hint-text\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'default',\n        'sky-font-hint-text-s': 'modern'\n      }\"\n      [ngClass]=\"{\n        'sky-input-box-hint-text-hidden': hintTextHidden,\n        'sky-screen-reader-only': hintTextScreenReaderOnly\n      }\"\n      [id]=\"hintTextId\"\n    >\n      {{ hintText | skyInputBoxHintText: hostHintText }}\n    </div>\n  }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-input-base )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box sky-form-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMC41MzAzIDIuNzE5NjdDMTAuMjM3NCAyLjQyNjc4IDkuNzYyNTYgMi40MjY3OCA5LjQ2OTY3IDIuNzE5NjdMNS4yMTk2NyA2Ljk2OTY3QzQuOTI2NzggNy4yNjI1NiA0LjkyNjc4IDcuNzM3NDQgNS4yMTk2NyA4LjAzMDMzQzUuNTEyNTYgOC4zMjMyMiA1Ljk4NzQ0IDguMzIzMjIgNi4yODAzMyA4LjAzMDMzTDEwIDQuMzEwNjZMMTMuNzE5NyA4LjAzMDMzQzE0LjAxMjYgOC4zMjMyMiAxNC40ODc0IDguMzIzMjIgMTQuNzgwMyA4LjAzMDMzQzE1LjA3MzIgNy43Mzc0NCAxNS4wNzMyIDcuMjYyNTYgMTQuNzgwMyA2Ljk2OTY3TDEwLjUzMDMgMi43MTk2N1pNMTQuNzgwMyAxMy4wMzAzTDEwLjUzMDMgMTcuMjgwM0MxMC4yMzc0IDE3LjU3MzIgOS43NjI1NiAxNy41NzMyIDkuNDY5NjcgMTcuMjgwM0w1LjIxOTY3IDEzLjAzMDNDNC45MjY3OCAxMi43Mzc0IDQuOTI2NzggMTIuMjYyNiA1LjIxOTY3IDExLjk2OTdDNS41MTI1NiAxMS42NzY4IDUuOTg3NDQgMTEuNjc2OCA2LjI4MDMzIDExLjk2OTdMMTAgMTUuNjg5M0wxMy43MTk3IDExLjk2OTdDMTQuMDEyNiAxMS42NzY4IDE0LjQ4NzQgMTEuNjc2OCAxNC43ODAzIDExLjk2OTdDMTUuMDczMiAxMi4yNjI2IDE1LjA3MzIgMTIuNzM3NCAxNC43ODAzIDEzLjAzMDNaIiBmaWxsPSIjMmI2YmQ1Ii8+DQo8L3N2Zz4NCg==) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUzMDMgMi43MTk2N0MxMC4yMzc0IDIuNDI2NzggOS43NjI1NiAyLjQyNjc4IDkuNDY5NjcgMi43MTk2N0w1LjIxOTY3IDYuOTY5NjdDNC45MjY3OCA3LjI2MjU2IDQuOTI2NzggNy43Mzc0NCA1LjIxOTY3IDguMDMwMzNDNS41MTI1NiA4LjMyMzIyIDUuOTg3NDQgOC4zMjMyMiA2LjI4MDMzIDguMDMwMzNMMTAgNC4zMTA2NkwxMy43MTk3IDguMDMwMzNDMTQuMDEyNiA4LjMyMzIyIDE0LjQ4NzQgOC4zMjMyMiAxNC43ODAzIDguMDMwMzNDMTUuMDczMiA3LjczNzQ0IDE1LjA3MzIgNy4yNjI1NiAxNC43ODAzIDYuOTY5NjdMMTAuNTMwMyAyLjcxOTY3Wk0xNC43ODAzIDEzLjAzMDNMMTAuNTMwMyAxNy4yODAzQzEwLjIzNzQgMTcuNTczMiA5Ljc2MjU2IDE3LjU3MzIgOS40Njk2NyAxNy4yODAzTDUuMjE5NjcgMTMuMDMwM0M0LjkyNjc4IDEyLjczNzQgNC45MjY3OCAxMi4yNjI2IDUuMjE5NjcgMTEuOTY5N0M1LjUxMjU2IDExLjY3NjggNS45ODc0NCAxMS42NzY4IDYuMjgwMzMgMTEuOTY5N0wxMCAxNS42ODkzTDEzLjcxOTcgMTEuOTY5N0MxNC4wMTI2IDExLjY3NjggMTQuNDg3NCAxMS42NzY4IDE0Ljc4MDMgMTEuOTY5N0MxNS4wNzMyIDEyLjI2MjYgMTUuMDczMiAxMi43Mzc0IDE0Ljc4MDMgMTMuMDMwM1oiIGZpbGw9IiM2NjZiNzAiLz4KPC9zdmc+) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-group-btn .sky-btn{padding:4.5px 12px}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-icon-input-action);margin:0;padding:0;position:relative;transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short);width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-input-action);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-default);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-comp-input-label-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:var(--sky-input-box-space-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-comp-input-value-space-inset-top)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;border-top:var(--sky-input-box-space-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-input-box-space-top) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: var( --sky-color-border-action-input-base );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-hover );--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-focus );--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-error );--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-hover );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-active );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-focus );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"] }]
         }], propDecorators: { hasErrors: [{
                 type: Input
             }], disabled: [{
@@ -4700,14 +4700,14 @@ class SkyToggleSwitchComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyToggleSwitchComponent, isStandalone: false, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", tabIndex: "tabIndex", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], helpKey: "helpKey" }, outputs: { toggleChange: "toggleChange" }, providers: [
             SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
             SKY_TOGGLE_SWITCH_VALIDATOR,
-        ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    #toggle=\"skyId\"\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    @if (hasLabelComponent || labelText) {\n      <label\n        class=\"sky-toggle-switch-label\"\n        [for]=\"toggle.id\"\n        [attr.id]=\"labelId\"\n      >\n        @if (labelText) {\n          @if (!labelHidden) {\n            <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n          }\n        } @else {\n          <ng-content select=\"sky-toggle-switch-label\" />\n        }\n      </label>\n    }\n    <span class=\"sky-control-help-container\">\n      @if (labelText && (helpPopoverContent || helpKey)) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #00b4f1;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width-active: 2px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 0;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:none}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible):not(:active) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    #toggle=\"skyId\"\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    @if (hasLabelComponent || labelText) {\n      <label\n        class=\"sky-toggle-switch-label\"\n        [for]=\"toggle.id\"\n        [attr.id]=\"labelId\"\n      >\n        @if (labelText) {\n          @if (!labelHidden) {\n            <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n          }\n        } @else {\n          <ng-content select=\"sky-toggle-switch-label\" />\n        }\n      </label>\n    }\n    <span class=\"sky-control-help-container\">\n      @if (labelText && (helpPopoverContent || helpKey)) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #00b4f1;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width-active: 2px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 0;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:none}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible):not(:active) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left var(--sky-global-duration-short)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-toggle-switch', providers: [
                         SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
                         SKY_TOGGLE_SWITCH_VALIDATOR,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    #toggle=\"skyId\"\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    @if (hasLabelComponent || labelText) {\n      <label\n        class=\"sky-toggle-switch-label\"\n        [for]=\"toggle.id\"\n        [attr.id]=\"labelId\"\n      >\n        @if (labelText) {\n          @if (!labelHidden) {\n            <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n          }\n        } @else {\n          <ng-content select=\"sky-toggle-switch-label\" />\n        }\n      </label>\n    }\n    <span class=\"sky-control-help-container\">\n      @if (labelText && (helpPopoverContent || helpKey)) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #00b4f1;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width-active: 2px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 0;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:none}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible):not(:active) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    #toggle=\"skyId\"\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    @if (hasLabelComponent || labelText) {\n      <label\n        class=\"sky-toggle-switch-label\"\n        [for]=\"toggle.id\"\n        [attr.id]=\"labelId\"\n      >\n        @if (labelText) {\n          @if (!labelHidden) {\n            <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n          }\n        } @else {\n          <ng-content select=\"sky-toggle-switch-label\" />\n        }\n      </label>\n    }\n    <span class=\"sky-control-help-container\">\n      @if (labelText && (helpPopoverContent || helpKey)) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #00b4f1;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width-active: 2px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 0;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:none}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible):not(:active) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left var(--sky-global-duration-short)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.SkyIdService }], propDecorators: { ariaLabel: [{
                 type: Input
             }], checked: [{