@govtechsg/sgds-web-component 3.10.0-rc.4 → 3.10.0

package/components/FileUpload/sgds-file-upload.d.ts

@@ -12,7 +12,6 @@ declare const SgdsFileUpload_base: (new (...args: any[]) => import("../../utils/
  */
 export declare class SgdsFileUpload extends SgdsFileUpload_base {
     static styles: import("lit").CSSResult[];
-    static formAssociated: boolean;
     /**@internal */
     static dependencies: {
         "sgds-button": typeof SgdsButton;

package/components/FileUpload/sgds-file-upload.js

@@ -182,7 +182,6 @@ class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {
     }
 }
 SgdsFileUpload.styles = [...FormControlElement.styles, css_248z];
-SgdsFileUpload.formAssociated = true;
 /**@internal */
 SgdsFileUpload.dependencies = {
     "sgds-button": SgdsButton,

package/components/FileUpload/sgds-file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-file-upload.js","sources":["../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  static formAssociated = true;\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-file-upload.js","sources":["../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}

package/components/Input/index.umd.min.js

@@ -70,7 +70,7 @@ class extends Ae{constructor(e){if(super(e),e.type!==Se&&e.type!==Be&&e.type!==k
    * @license
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */var Re,De=r`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,Fe=r`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`,We=r`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,qe=r`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`,je=r`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ge extends xe{emit(e,t){const l=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(l),l}static define(e,t=this,l={}){if(customElements.get(e));else try{customElements.define(e,t,l)}catch(i){customElements.define(e,class extends t{},l)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}function Je(e="",t=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${e}-${t}`}Ge.styles=[je],Ge.dependencies={},e([Ve({type:Boolean,reflect:!0})],Ge.prototype,"ssr",void 0);class Ye extends Ge{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=Je("input"),this._labelId=Je("label")}setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Ye.styles=[...Ge.styles,De,Fe,We,qe],e([Ve({reflect:!0})],Ye.prototype,"label",void 0),e([Ve({reflect:!0})],Ye.prototype,"hintText",void 0),e([Ve({reflect:!0})],Ye.prototype,"name",void 0),e([Ve({type:Boolean,reflect:!0})],Ye.prototype,"disabled",void 0),e([Ve({type:Boolean,reflect:!0})],Ye.prototype,"invalid",void 0);var Xe=r`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-24);outline:none;padding:0}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Ke{constructor(e,t,l){(this.host=e).addController(this),this._internals=t,this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},l)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,l){return this._internals.setValidity(e,t,l)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const l in t)t[l]&&(this.validationError=l.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const Qe=t=>{class l extends t{constructor(...e){var t;super(...e),this._isTouched=!1,this._internals=this.attachInternals(),null!==(t=this.inputValidationController)&&void 0!==t||(this.inputValidationController=new Ke(this,this._internals))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinShouldSkipSgdsValidation()||(this._mixinSetFormValue(),this._mixinValidate(this.input))}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(e),this._isTouched&&(this._isTouched=!1)}_mixinValidate(e){this.inputValidationController.validateInput(e)}_mixinSetFormValue(){this.inputValidationController.setFormValue()}_mixinCheckValidity(){return this.inputValidationController.checkValidity()}_mixinReportValidity(){return this.inputValidationController.reportValidity()}_mixinGetValidity(){return this.inputValidationController.validity}_mixinGetValidationMessage(){return this.inputValidationController.validationMessage}_mixinSetValidity(e,t,l){return this.inputValidationController.setValidity(e,t,l)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return e([$e("sgds-input")],l.prototype,"sgdsInput",void 0),e([$e("sgds-datepicker-input")],l.prototype,"sgdsDatepickerInput",void 0),l};function et(e,t){const l=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),a=this[o];t!==a&&(l.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}var tt=r`:host{--sgds-spinner-bg:var(--sgds-primary-surface-default);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-surface-default)}:host([tone=neutral]){--sgds-spinner-bg:var(--sgds-surface-inverse)}:host([tone=inverse]){--sgds-spinner-bg:var(--sgds-surface-default)}:host([tone=fixed-light]){--sgds-spinner-bg:var(--sgds-surface-fixed-light)}:host([tone=fixed-dark]){--sgds-spinner-bg:var(--sgds-surface-fixed-dark)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner-wrapper.horizontal{flex-direction:row}.spinner{--border-thickness:4px;animation:spinner .75s linear infinite;border:var(--border-thickness) solid var(--sgds-bg-translucent);border-radius:50%;border-right:var(--border-thickness) solid var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-xs{--border-thickness:2px;height:var(--sgds-dimension-16);width:var(--sgds-dimension-16)}.spinner-sm{--border-thickness:3px;height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{--border-thickness:6px;height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-xl{--border-thickness:8px;height:var(--sgds-dimension-64);width:var(--sgds-dimension-64)}.spinner-label{color:var(--sgds-neutral-color-default);font-size:var(--sgds-font-size-14)}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}
+   */var Re,De=r`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,Fe=r`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`,We=r`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,qe=r`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`,je=r`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ge extends xe{emit(e,t){const l=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(l),l}static define(e,t=this,l={}){if(customElements.get(e));else try{customElements.define(e,t,l)}catch(i){customElements.define(e,class extends t{},l)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}function Je(e="",t=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${e}-${t}`}Ge.styles=[je],Ge.dependencies={},e([Ve({type:Boolean,reflect:!0})],Ge.prototype,"ssr",void 0);class Ye extends Ge{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=Je("input"),this._labelId=Je("label")}setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Ye.styles=[...Ge.styles,De,Fe,We,qe],e([Ve({reflect:!0})],Ye.prototype,"label",void 0),e([Ve({reflect:!0})],Ye.prototype,"hintText",void 0),e([Ve({reflect:!0})],Ye.prototype,"name",void 0),e([Ve({type:Boolean,reflect:!0})],Ye.prototype,"disabled",void 0),e([Ve({type:Boolean,reflect:!0})],Ye.prototype,"invalid",void 0);var Xe=r`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-24);outline:none;padding:0}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Ke{constructor(e,t){(this.host=e).addController(this),this._internals=this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,l){return this._internals.setValidity(e,t,l)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const l in t)t[l]&&(this.validationError=l.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const Qe=t=>{class l extends t{constructor(){super(...arguments),this._isTouched=!1}connectedCallback(){var e;super.connectedCallback(),this._mixinShouldSkipSgdsValidation()||null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new Ke(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinShouldSkipSgdsValidation()||(this._mixinSetFormValue(),this._mixinValidate(this.input))}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(e),this._isTouched&&(this._isTouched=!1)}_mixinValidate(e){this.inputValidationController.validateInput(e)}_mixinSetFormValue(){this.inputValidationController.setFormValue()}_mixinCheckValidity(){return this.inputValidationController.checkValidity()}_mixinReportValidity(){return this.inputValidationController.reportValidity()}_mixinGetValidity(){return this.inputValidationController.validity}_mixinGetValidationMessage(){return this.inputValidationController.validationMessage}_mixinSetValidity(e,t,l){return this.inputValidationController.setValidity(e,t,l)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return l.formAssociated=!0,e([$e("sgds-input")],l.prototype,"sgdsInput",void 0),e([$e("sgds-datepicker-input")],l.prototype,"sgdsDatepickerInput",void 0),l};function et(e,t){const l=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),a=this[o];t!==a&&(l.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}var tt=r`:host{--sgds-spinner-bg:var(--sgds-primary-surface-default);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-surface-default)}:host([tone=neutral]){--sgds-spinner-bg:var(--sgds-surface-inverse)}:host([tone=inverse]){--sgds-spinner-bg:var(--sgds-surface-default)}:host([tone=fixed-light]){--sgds-spinner-bg:var(--sgds-surface-fixed-light)}:host([tone=fixed-dark]){--sgds-spinner-bg:var(--sgds-surface-fixed-dark)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner-wrapper.horizontal{flex-direction:row}.spinner{--border-thickness:4px;animation:spinner .75s linear infinite;border:var(--border-thickness) solid var(--sgds-bg-translucent);border-radius:50%;border-right:var(--border-thickness) solid var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-xs{--border-thickness:2px;height:var(--sgds-dimension-16);width:var(--sgds-dimension-16)}.spinner-sm{--border-thickness:3px;height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{--border-thickness:6px;height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-xl{--border-thickness:8px;height:var(--sgds-dimension-64);width:var(--sgds-dimension-64)}.spinner-label{color:var(--sgds-neutral-color-default);font-size:var(--sgds-font-size-14)}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}
 
 /*! CSS Used keyframes */@keyframes spinner{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`,lt=r`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;class it extends Ge{constructor(){super(...arguments),this.variant="primary",this.tone="brand",this.size="md",this.orientation="vertical"}render(){return Oe`
       <div
@@ -2139,5 +2139,5 @@ class extends Ae{constructor(e){if(super(e),e.type!==Se&&e.type!==Be&&e.type!==k
         </div>
         ${this._renderFeedback()}
       </div>
-    `}}ht.styles=[...Ye.styles,Xe,qe,at],ht.formAssociated=!0,ht.dependencies={"sgds-spinner":it,"sgds-icon":ct},e([Ve({reflect:!0})],ht.prototype,"type",void 0),e([Ve({type:String})],ht.prototype,"prefix",void 0),e([Ve({type:String})],ht.prototype,"suffix",void 0),e([Ve({type:Number,reflect:!0})],ht.prototype,"minlength",void 0),e([Ve({type:Number,reflect:!0})],ht.prototype,"maxlength",void 0),e([Ve()],ht.prototype,"min",void 0),e([Ve()],ht.prototype,"max",void 0),e([Ve({type:String,reflect:!0})],ht.prototype,"placeholder",void 0),e([Ve({type:String})],ht.prototype,"pattern",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"autofocus",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"readonly",void 0),e([Ve()],ht.prototype,"step",void 0),e([Ve({type:String,reflect:!0})],ht.prototype,"hasFeedback",void 0),e([Ve({type:String,reflect:!0})],ht.prototype,"invalidFeedback",void 0),e([((e="value")=>(t,l)=>{const i=t.constructor,a=i.prototype.attributeChangedCallback;i.prototype.attributeChangedCallback=function(t,o,r){var s;const n=i.getPropertyOptions(e);if(t===("string"==typeof n.attribute?n.attribute:e).toLowerCase()){const t=n.converter||C,i=("function"==typeof t?t:null!==(s=null==t?void 0:t.fromAttribute)&&void 0!==s?s:C.fromAttribute)(r,n.type);this[e]!==i&&(this[l]=i)}a.call(this,t,o,r)}})()],ht.prototype,"defaultValue",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"valid",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"loading",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"noValidate",void 0),e([Ve({reflect:!0})],ht.prototype,"value",void 0),e([He()],ht.prototype,"_isTouched",void 0),e([He()],ht.prototype,"_showPassword",void 0),e([et("_isTouched",{waitUntilFirstUpdate:!0})],ht.prototype,"_handleIsTouched",null),e([et("disabled",{waitUntilFirstUpdate:!0})],ht.prototype,"_handleDisabledChange",null),rt="sgds-input",st=ht,customElements.get(rt)||customElements.define(rt,st)});
+    `}}ht.styles=[...Ye.styles,Xe,qe,at],ht.dependencies={"sgds-spinner":it,"sgds-icon":ct},e([Ve({reflect:!0})],ht.prototype,"type",void 0),e([Ve({type:String})],ht.prototype,"prefix",void 0),e([Ve({type:String})],ht.prototype,"suffix",void 0),e([Ve({type:Number,reflect:!0})],ht.prototype,"minlength",void 0),e([Ve({type:Number,reflect:!0})],ht.prototype,"maxlength",void 0),e([Ve()],ht.prototype,"min",void 0),e([Ve()],ht.prototype,"max",void 0),e([Ve({type:String,reflect:!0})],ht.prototype,"placeholder",void 0),e([Ve({type:String})],ht.prototype,"pattern",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"autofocus",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"readonly",void 0),e([Ve()],ht.prototype,"step",void 0),e([Ve({type:String,reflect:!0})],ht.prototype,"hasFeedback",void 0),e([Ve({type:String,reflect:!0})],ht.prototype,"invalidFeedback",void 0),e([((e="value")=>(t,l)=>{const i=t.constructor,a=i.prototype.attributeChangedCallback;i.prototype.attributeChangedCallback=function(t,o,r){var s;const n=i.getPropertyOptions(e);if(t===("string"==typeof n.attribute?n.attribute:e).toLowerCase()){const t=n.converter||C,i=("function"==typeof t?t:null!==(s=null==t?void 0:t.fromAttribute)&&void 0!==s?s:C.fromAttribute)(r,n.type);this[e]!==i&&(this[l]=i)}a.call(this,t,o,r)}})()],ht.prototype,"defaultValue",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"valid",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"loading",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],ht.prototype,"noValidate",void 0),e([Ve({reflect:!0})],ht.prototype,"value",void 0),e([He()],ht.prototype,"_isTouched",void 0),e([He()],ht.prototype,"_showPassword",void 0),e([et("_isTouched",{waitUntilFirstUpdate:!0})],ht.prototype,"_handleIsTouched",null),e([et("disabled",{waitUntilFirstUpdate:!0})],ht.prototype,"_handleDisabledChange",null),rt="sgds-input",st=ht,customElements.get(rt)||customElements.define(rt,st)});
 //# sourceMappingURL=index.umd.min.js.map