@govtechsg/sgds-web-component 3.30.1-rc.5 → 3.30.1-rc.6

package/components/Textarea/sgds-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.js","names":["formTextControlStyles","textareaStyle"],"sources":["../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\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() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\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\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\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  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? 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            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.js","names":["formTextControlStyles","textareaStyle"],"sources":["../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\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() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\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\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    this._setTextareaHeight();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\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  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? 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            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}

package/components/index.umd.min.js

@@ -3258,7 +3258,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
         >
         </sgds-icon-button>
       </div>
-    `}};T([x({attribute:!1})],gv.prototype,`displayDate`,void 0),T([x({attribute:!1})],gv.prototype,`focusedDate`,void 0),T([x({attribute:!1})],gv.prototype,`selectedDate`,void 0),T([x()],gv.prototype,`view`,void 0),T([x()],gv.prototype,`focusedTabIndex`,void 0),T([P(`focusedTabIndex`,{waitUntilFirstUpdate:!0})],gv.prototype,`_handleFocusedTabIndexChange`,null);let _v=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`];var vv=class{constructor(e,t){this.listeners=/* @__PURE__ */ new Map,this.input=e,this.placeholderStr=this._buildPlaceholder(t.pattern),this._state=this.placeholderStr,this.listeners.set(`accept`,[]),this.listeners.set(`complete`,[]);let n={value:``,isComplete:!1};Object.defineProperties(n,{value:{get:()=>this._state,enumerable:!0},isComplete:{get:()=>this._state.length>0&&!/[DMY]/.test(this._state),enumerable:!0}}),this.masked=n,this.input.value&&this.input.value.length===this._state.length&&!/[DMY]/.test(this.input.value)?this._state=this.input.value:this.input.value=this._state,this._boundHandleBeforeInput=this._handleBeforeInput.bind(this),this._boundHandleInput=this._handleInput.bind(this),this._boundHandleKeydown=this._handleKeydown.bind(this),this._boundHandleFocus=this._handleFocus.bind(this),this._boundHandleBlur=this._handleBlur.bind(this),this._valueAtFocus=this._state,this.input.addEventListener(`beforeinput`,this._boundHandleBeforeInput),this.input.addEventListener(`input`,this._boundHandleInput),this.input.addEventListener(`keydown`,this._boundHandleKeydown),this.input.addEventListener(`focus`,this._boundHandleFocus),this.input.addEventListener(`blur`,this._boundHandleBlur)}get value(){return this._state}set value(e){this._state=!e||e===``?this.placeholderStr:e,this.input.value=this._state,this._emit(`accept`)}on(e,t){this.listeners.get(e)?.push(t)}updateValue(){this._state=this.input.value}destroy(){this.input.removeEventListener(`beforeinput`,this._boundHandleBeforeInput),this.input.removeEventListener(`input`,this._boundHandleInput),this.input.removeEventListener(`keydown`,this._boundHandleKeydown),this.input.removeEventListener(`focus`,this._boundHandleFocus),this.input.removeEventListener(`blur`,this._boundHandleBlur),this.listeners.clear()}_handleFocus(){this._valueAtFocus=this._state}_handleBlur(){this._state!==this._valueAtFocus&&this.input.dispatchEvent(new Event(`change`,{bubbles:!0}))}_buildPlaceholder(e){return e.replace(/`/g,``).replace(/\{(\/)\}/g,`$1`).replace(/d/g,`D`).replace(/m/g,`M`).replace(/y/g,`Y`)}_getDigitPositions(){let e=[];for(let t=0;t<this.placeholderStr.length;t++){let n=this.placeholderStr[t];(n===`D`||n===`M`||n===`Y`)&&e.push(t)}return e}_handleBeforeInput(e){e.preventDefault()}_handleInput(){this.input.value!==this._state&&(this.input.value=this._state)}_handleKeydown(e){e.key===`Backspace`?(e.preventDefault(),this._backspace()):e.key===`Delete`?(e.preventDefault(),this._deleteForward()):e.key.length===1&&/\d/.test(e.key)&&(e.preventDefault(),this._insertDigit(e.key))}_insertDigit(e){let t=this._getDigitPositions(),n=this._state.split(``),r=-1;for(let e of t)if(/[DMY]/.test(n[e])){r=e;break}if(r===-1)return;n[r]=e,this._state=n.join(``),this.input.value=this._state;let i=this._findNextInputPos(r);this.input.setSelectionRange(i,i),this._emit(`accept`),this.masked.isComplete&&this._emit(`complete`)}_backspace(){let e=this.input.selectionStart??this._state.length,t=this._state.split(``),n=e-1;for(;n>=0&&!/\d/.test(t[n]);)n--;n>=0&&(t[n]=this.placeholderStr[n],this._state=t.join(``),this.input.value=this._state,this.input.setSelectionRange(n,n),this._emit(`accept`))}_deleteForward(){let e=this.input.selectionStart??0,t=this._state.split(``),n=e;for(;n<t.length&&!/\d/.test(t[n]);)n++;n<t.length&&(t[n]=this.placeholderStr[n],this._state=t.join(``),this.input.value=this._state,this.input.setSelectionRange(e,e),this._emit(`accept`))}_findNextInputPos(e){for(let t=e+1;t<this._state.length;t++)if(/[DMY]/.test(this._state[t]))return t;return this._state.length}_emit(e){let t=this.listeners.get(e);if(t)for(let e of t)e()}};b();var yv=u`:host{--input-border-radius:var(--sgds-form-border-radius);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);height:100%;justify-content:center}.form-control-prefix{border-right:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-right:var(--sgds-form-padding-x)}.form-control-suffix{border-left:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-left:var(--sgds-form-padding-x)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;b();var J=class extends j_(V){constructor(...e){super(...e),this.type=`text`,this.placeholder=`placeholder`,this.autofocus=!1,this.readonly=!1,this.autocomplete=`on`,this.defaultValue=``,this.valid=!1,this.loading=!1,this.required=!1,this.noValidate=!1,this.value=``,this._isTouched=!1,this._showPassword=!1}static{this.styles=[...V.styles,F_,O_,yv]}static{this.dependencies={"sgds-spinner":vm,"sgds-icon":I}}focus(e){this.input.focus(e)}blur(){this.input.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setValidity(e,t,n){return this._mixinSetValidity(e,t,n)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleFocus(){this.emit(`sgds-focus`)}_handleBlur(){let e=this.emit(`sgds-blur`,{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleClick(){this.focus()}_handleChange(e){this.value=this.input.value,!this.emit(`sgds-change`,{cancelable:!0}).defaultPrevented&&super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value,!this.emit(`sgds-input`,{cancelable:!0}).defaultPrevented&&super._mixinHandleInputChange(e)}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_renderInput(){let e=this.hasFeedback===`both`||this.hasFeedback===`style`,t=this.hasFeedback===`both`||this.hasFeedback===`text`,n=[this.hintText?`${this._controlId}Help`:``,this.invalid&&t?`${this._controlId}-invalid`:``].filter(Boolean).join(` `)||void 0;return F`
+    `}};T([x({attribute:!1})],gv.prototype,`displayDate`,void 0),T([x({attribute:!1})],gv.prototype,`focusedDate`,void 0),T([x({attribute:!1})],gv.prototype,`selectedDate`,void 0),T([x()],gv.prototype,`view`,void 0),T([x()],gv.prototype,`focusedTabIndex`,void 0),T([P(`focusedTabIndex`,{waitUntilFirstUpdate:!0})],gv.prototype,`_handleFocusedTabIndexChange`,null);let _v=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`];var vv=class{constructor(e,t){this.listeners=/* @__PURE__ */ new Map,this.input=e,this.placeholderStr=this._buildPlaceholder(t.pattern),this._state=this.placeholderStr,this.listeners.set(`accept`,[]),this.listeners.set(`complete`,[]);let n={value:``,isComplete:!1};Object.defineProperties(n,{value:{get:()=>this._state,enumerable:!0},isComplete:{get:()=>this._state.length>0&&!/[DMY]/.test(this._state),enumerable:!0}}),this.masked=n,this.input.value&&this.input.value.length===this._state.length&&!/[DMY]/.test(this.input.value)?this._state=this.input.value:this.input.value=this._state,this._boundHandleBeforeInput=this._handleBeforeInput.bind(this),this._boundHandleInput=this._handleInput.bind(this),this._boundHandleKeydown=this._handleKeydown.bind(this),this._boundHandleFocus=this._handleFocus.bind(this),this._boundHandleBlur=this._handleBlur.bind(this),this._valueAtFocus=this._state,this.input.addEventListener(`beforeinput`,this._boundHandleBeforeInput),this.input.addEventListener(`input`,this._boundHandleInput),this.input.addEventListener(`keydown`,this._boundHandleKeydown),this.input.addEventListener(`focus`,this._boundHandleFocus),this.input.addEventListener(`blur`,this._boundHandleBlur)}get value(){return this._state}set value(e){this._state=!e||e===``?this.placeholderStr:e,this.input.value=this._state,this._emit(`accept`)}on(e,t){this.listeners.get(e)?.push(t)}updateValue(){this._state=this.input.value}destroy(){this.input.removeEventListener(`beforeinput`,this._boundHandleBeforeInput),this.input.removeEventListener(`input`,this._boundHandleInput),this.input.removeEventListener(`keydown`,this._boundHandleKeydown),this.input.removeEventListener(`focus`,this._boundHandleFocus),this.input.removeEventListener(`blur`,this._boundHandleBlur),this.listeners.clear()}_handleFocus(){this._valueAtFocus=this._state}_handleBlur(){this._state!==this._valueAtFocus&&this.input.dispatchEvent(new Event(`change`,{bubbles:!0}))}_buildPlaceholder(e){return e.replace(/`/g,``).replace(/\{(\/)\}/g,`$1`).replace(/d/g,`D`).replace(/m/g,`M`).replace(/y/g,`Y`)}_getDigitPositions(){let e=[];for(let t=0;t<this.placeholderStr.length;t++){let n=this.placeholderStr[t];(n===`D`||n===`M`||n===`Y`)&&e.push(t)}return e}_handleBeforeInput(e){e.preventDefault()}_handleInput(){this.input.value!==this._state&&(this.input.value=this._state)}_handleKeydown(e){e.key===`Backspace`?(e.preventDefault(),this._backspace()):e.key===`Delete`?(e.preventDefault(),this._deleteForward()):e.key.length===1&&/\d/.test(e.key)&&(e.preventDefault(),this._insertDigit(e.key))}_insertDigit(e){let t=this._getDigitPositions(),n=this._state.split(``),r=-1;for(let e of t)if(/[DMY]/.test(n[e])){r=e;break}if(r===-1)return;n[r]=e,this._state=n.join(``),this.input.value=this._state;let i=this._findNextInputPos(r);this.input.setSelectionRange(i,i),this._emit(`accept`),this.masked.isComplete&&this._emit(`complete`)}_backspace(){let e=this.input.selectionStart??this._state.length,t=this._state.split(``),n=e-1;for(;n>=0&&!/\d/.test(t[n]);)n--;n>=0&&(t[n]=this.placeholderStr[n],this._state=t.join(``),this.input.value=this._state,this.input.setSelectionRange(n,n),this._emit(`accept`))}_deleteForward(){let e=this.input.selectionStart??0,t=this._state.split(``),n=e;for(;n<t.length&&!/\d/.test(t[n]);)n++;n<t.length&&(t[n]=this.placeholderStr[n],this._state=t.join(``),this.input.value=this._state,this.input.setSelectionRange(e,e),this._emit(`accept`))}_findNextInputPos(e){for(let t=e+1;t<this._state.length;t++)if(/[DMY]/.test(this._state[t]))return t;return this._state.length}_emit(e){let t=this.listeners.get(e);if(t)for(let e of t)e()}};b();var yv=u`:host{--input-border-radius:var(--sgds-form-border-radius);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);height:100%;justify-content:center}.form-control-prefix{border-right:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-right:var(--sgds-form-padding-x)}.form-control-suffix{border-left:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);padding-left:var(--sgds-form-padding-x)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;b();var J=class extends j_(V){constructor(...e){super(...e),this.type=`text`,this.placeholder=`placeholder`,this.autofocus=!1,this.readonly=!1,this.autocomplete=`on`,this.defaultValue=``,this.valid=!1,this.loading=!1,this.required=!1,this.noValidate=!1,this.value=``,this._isTouched=!1,this._showPassword=!1}static{this.styles=[...V.styles,F_,O_,yv]}static{this.dependencies={"sgds-spinner":vm,"sgds-icon":I}}focus(e){this.input.focus(e)}blur(){this.input.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setValidity(e,t,n){return this._mixinSetValidity(e,t,n)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleFocus(){this.emit(`sgds-focus`)}_handleBlur(){let e=this.emit(`sgds-blur`,{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleClick(){this.focus()}_handleChange(e){this.value=this.input.value,!this.emit(`sgds-change`,{cancelable:!0}).defaultPrevented&&super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value,!this.emit(`sgds-input`,{cancelable:!0}).defaultPrevented&&super._mixinHandleInputChange(e)}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}async _handleValueChange(){this._mixinSetFormValue(),await this.updateComplete,!this._mixinShouldSkipSgdsValidation()&&this._mixinValidate(this.input)}_renderInput(){let e=this.hasFeedback===`both`||this.hasFeedback===`style`,t=this.hasFeedback===`both`||this.hasFeedback===`text`,n=[this.hintText?`${this._controlId}Help`:``,this.invalid&&t?`${this._controlId}-invalid`:``].filter(Boolean).join(` `)||void 0;return F`
       <div
         class="form-control-group ${D({disabled:this.disabled,readonly:this.readonly,"is-invalid":this.invalid&&e})}"
         @click=${this._handleClick}
@@ -3327,7 +3327,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
         </div>
         ${this._renderFeedback()}
       </div>
-    `}};T([x({reflect:!0})],J.prototype,`type`,void 0),T([x({type:String})],J.prototype,`prefix`,void 0),T([x({type:String})],J.prototype,`suffix`,void 0),T([x({type:Number,reflect:!0})],J.prototype,`minlength`,void 0),T([x({type:Number,reflect:!0})],J.prototype,`maxlength`,void 0),T([x()],J.prototype,`min`,void 0),T([x()],J.prototype,`max`,void 0),T([x({type:String,reflect:!0})],J.prototype,`placeholder`,void 0),T([x({type:String})],J.prototype,`pattern`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`autofocus`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`readonly`,void 0),T([x({type:String,reflect:!0})],J.prototype,`autocomplete`,void 0),T([x()],J.prototype,`step`,void 0),T([x({type:String,reflect:!0})],J.prototype,`hasFeedback`,void 0),T([x({type:String,reflect:!0})],J.prototype,`invalidFeedback`,void 0),T([k_()],J.prototype,`defaultValue`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`valid`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`loading`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`required`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`noValidate`,void 0),T([x({reflect:!0})],J.prototype,`value`,void 0),T([S()],J.prototype,`_isTouched`,void 0),T([S()],J.prototype,`_showPassword`,void 0),T([P(`_isTouched`,{waitUntilFirstUpdate:!0})],J.prototype,`_handleIsTouched`,null),T([P(`disabled`,{waitUntilFirstUpdate:!0})],J.prototype,`_handleDisabledChange`,null),b();var bv=u`.datepicker-input-container{display:flex;flex-direction:row;width:-webkit-fill-available;width:-moz-available}.datepicker-input-container .form-control-group{border-right:0}.calendar-btn{all:unset}`;b();var xv=class extends J{static{this.styles=[...J.styles,bv]}constructor(){super(),this.dateFormat=`DD/MM/YYYY`,this.mode=`single`,this._validateInput=async()=>{let e=this.mask.value.split(` - `).filter(e=>e!==this.dateFormat).map(e=>q(ov(e,sv[this.dateFormat].fnsPattern))),t=e.filter(e=>!iv(e)||tv(e,new Date(0,0,1))||tv(e,q(new Date(this.minDate)))||ev(e,q(new Date(this.maxDate))));if(t.length>0||this.mode===`range`&&e.length===1)return this.setInvalid(!0),this.emit(`i-sgds-invalid-input`);if(t.length===0&&e.length>0)return this.setInvalid(!1),this.emit(`i-sgds-selectdates-input`,{detail:e});if(e.length===0&&t.length===0)return this.setInvalid(!1),this.emit(`i-sgds-empty-input`)},this.type=`text`}_handleBlur(){let e=this.mask.value.split(` - `).filter(e=>e!==this.dateFormat).map(e=>q(ov(e,sv[this.dateFormat].fnsPattern))),t=e.filter(e=>!iv(e)||tv(e,new Date(0,0,1))||tv(e,q(new Date(this.minDate)))||ev(e,q(new Date(this.maxDate))));this.mask.masked.isComplete&&t.length>0&&e.length>0&&(this.value=``,this.mask.value=``,this.setInvalid(!1)),this.emit(`sgds-blur`)}async _handleChange(e){this.value=this.input.value,this.emit(`sgds-change`),super._mixinHandleChange(e),await this._validateInput()}async firstUpdated(e){super.firstUpdated(e),this._applyInputMask(this.dateFormat)}async _applyInputMask(e){let t=await this.shadowInput,n=this.mode===`single`?sv[e].imPattern:sv[e].imRangePattern;this.mask=new vv(t,{pattern:n}),this.mask.on(`accept`,()=>{this.value=this.mask.masked.value,this.emit(`i-sgds-mask-input-change`,{detail:this.value})}),this.mask.on(`complete`,this._validateInput)}updateMaskValue(){this.mask?.updateValue()}destroyInputMask(){this.mask?.destroy()}async applyInputMask(){return await this._applyInputMask(this.dateFormat)}async focus(){return(await this.shadowInput).focus()}render(){return v`
+    `}};T([x({reflect:!0})],J.prototype,`type`,void 0),T([x({type:String})],J.prototype,`prefix`,void 0),T([x({type:String})],J.prototype,`suffix`,void 0),T([x({type:Number,reflect:!0})],J.prototype,`minlength`,void 0),T([x({type:Number,reflect:!0})],J.prototype,`maxlength`,void 0),T([x()],J.prototype,`min`,void 0),T([x()],J.prototype,`max`,void 0),T([x({type:String,reflect:!0})],J.prototype,`placeholder`,void 0),T([x({type:String})],J.prototype,`pattern`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`autofocus`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`readonly`,void 0),T([x({type:String,reflect:!0})],J.prototype,`autocomplete`,void 0),T([x()],J.prototype,`step`,void 0),T([x({type:String,reflect:!0})],J.prototype,`hasFeedback`,void 0),T([x({type:String,reflect:!0})],J.prototype,`invalidFeedback`,void 0),T([k_()],J.prototype,`defaultValue`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`valid`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`loading`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`required`,void 0),T([x({type:Boolean,reflect:!0})],J.prototype,`noValidate`,void 0),T([x({reflect:!0})],J.prototype,`value`,void 0),T([S()],J.prototype,`_isTouched`,void 0),T([S()],J.prototype,`_showPassword`,void 0),T([P(`_isTouched`,{waitUntilFirstUpdate:!0})],J.prototype,`_handleIsTouched`,null),T([P(`disabled`,{waitUntilFirstUpdate:!0})],J.prototype,`_handleDisabledChange`,null),T([P(`value`,{waitUntilFirstUpdate:!0})],J.prototype,`_handleValueChange`,null),b();var bv=u`.datepicker-input-container{display:flex;flex-direction:row;width:-webkit-fill-available;width:-moz-available}.datepicker-input-container .form-control-group{border-right:0}.calendar-btn{all:unset}`;b();var xv=class extends J{static{this.styles=[...J.styles,bv]}constructor(){super(),this.dateFormat=`DD/MM/YYYY`,this.mode=`single`,this._validateInput=async()=>{let e=this.mask.value.split(` - `).filter(e=>e!==this.dateFormat).map(e=>q(ov(e,sv[this.dateFormat].fnsPattern))),t=e.filter(e=>!iv(e)||tv(e,new Date(0,0,1))||tv(e,q(new Date(this.minDate)))||ev(e,q(new Date(this.maxDate))));if(t.length>0||this.mode===`range`&&e.length===1)return this.setInvalid(!0),this.emit(`i-sgds-invalid-input`);if(t.length===0&&e.length>0)return this.setInvalid(!1),this.emit(`i-sgds-selectdates-input`,{detail:e});if(e.length===0&&t.length===0)return this.setInvalid(!1),this.emit(`i-sgds-empty-input`)},this.type=`text`}_handleBlur(){let e=this.mask.value.split(` - `).filter(e=>e!==this.dateFormat).map(e=>q(ov(e,sv[this.dateFormat].fnsPattern))),t=e.filter(e=>!iv(e)||tv(e,new Date(0,0,1))||tv(e,q(new Date(this.minDate)))||ev(e,q(new Date(this.maxDate))));this.mask.masked.isComplete&&t.length>0&&e.length>0&&(this.value=``,this.mask.value=``,this.setInvalid(!1)),this.emit(`sgds-blur`)}async _handleChange(e){this.value=this.input.value,this.emit(`sgds-change`),super._mixinHandleChange(e),await this._validateInput()}async firstUpdated(e){super.firstUpdated(e),this._applyInputMask(this.dateFormat)}async _applyInputMask(e){let t=await this.shadowInput,n=this.mode===`single`?sv[e].imPattern:sv[e].imRangePattern;this.mask=new vv(t,{pattern:n}),this.mask.on(`accept`,()=>{this.value=this.mask.masked.value,this.emit(`i-sgds-mask-input-change`,{detail:this.value})}),this.mask.on(`complete`,this._validateInput)}updateMaskValue(){this.mask?.updateValue()}destroyInputMask(){this.mask?.destroy()}async applyInputMask(){return await this._applyInputMask(this.dateFormat)}async focus(){return(await this.shadowInput).focus()}render(){return v`
       <div
         class="form-control-container ${D({disabled:this.disabled})}"
       >
@@ -3338,7 +3338,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
         </div>
         ${this._renderFeedback()}
       </div>
-    `}};T([x({type:String})],xv.prototype,`minDate`,void 0),T([x({type:String})],xv.prototype,`maxDate`,void 0),T([x({type:String,reflect:!0})],xv.prototype,`mode`,void 0),T([ot(`input`)],xv.prototype,`shadowInput`,void 0),b();var Sv=u`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);border-radius:var(--sgds-overlay-border-radius);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius) 0 0 var(--sgds-form-border-radius);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius) var(--sgds-form-border-radius) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;b();var Y=class extends j_(qg){static{this.styles=[...qg.styles,Yg,Sv]}static{this.dependencies={"sgds-datepicker-input":xv,"sgds-datepicker-calendar":mv,"sgds-datepicker-header":gv,"sgds-button":z,"sgds-icon-button":bm}}constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value=``,this.initialValue=[],this.dateFormat=`DD/MM/YYYY`,this.minDate=``,this.maxDate=``,this.mode=`single`,this.hasFeedback=!1,this.label=``,this.hintText=``,this.noFlip=!1,this.drop=`down`,this.defaultValue=``,this.invalid=!1,this.view=`days`,this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=/* @__PURE__ */ new Date,this._makeInputValueString=(e,t,n)=>{if(!e&&!t)return this.value;let r=e=>Q_(e,sv[n].fnsPattern);switch(this.mode){case`single`:e&&(this.value=r(e));break;case`range`:e&&t&&(this.value=`${r(e)} - ${r(t)}`),e&&!t&&(this.value=`${r(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:`Choose date`,months:`Choose month`,years:`Choose year`},this.floatingOpts={placement:`bottom-end`}}isValueEmpty(){return this.value===``||this.value===`DD/MM/YYYY`||this.value===`DD/MM/YYYY - DD/MM/YYYY`}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(e){this.invalid=e,this.datepickerInput&&this.datepickerInput.setInvalid(e)}setValidity(e,t,n){return this._mixinSetValidity(e,t,n)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener(`sgds-view`,this._handleViewChanged),this.addEventListener(`sgds-change-calendar`,this._handleDateChanged),this.addEventListener(`sgds-update-focus`,this._handleFocusDateChanged),this.addEventListener(`sgds-selectmonth`,this._handleSelectMonth),this.addEventListener(`sgds-selectyear`,this._handleSelectYear),this.addEventListener(`sgds-selectdates`,this._handleSelectDatesAndClose),this.addEventListener(`i-sgds-selectdates-input`,this._handleSelectDatesInput),this.addEventListener(`i-sgds-empty-input`,this._handleEmptyInput),this.addEventListener(`keydown`,this._handleTab),this.addEventListener(`sgds-hide`,this._handleCloseMenu),this.addEventListener(`sgds-show`,this._handleOpenMenu),this.addEventListener(`blur`,this._mixinCheckValidity),this.initialValue=this.value?this.value.split(` - `).map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||/* @__PURE__ */ new Date,this.initialValue&&this.initialValue.length>0){let e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error(`Invalid date format in initialValue:`,t);{let e=this.initialValue.map(e=>q(ov(e,sv[this.dateFormat].fnsPattern)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){let e=await this.datepickerInputAsync;await this.updateFloatingPosition(),(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`).replace(`MM`,`\\d{2}`).replace(`DD`,`\\d{2}`).replace(`YYYY`,`\\d{4}`).replace(`/`,`\\/`)}_handleTab(e){if(!this.menuIsOpen)return;let t=[,,,,];e.shiftKey&&e.key===`Tab`?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):e.key===`Tab`&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit(`sgds-change-date`)}async _handleCloseMenu(){if(this.selectedDateRange.length===0)this.displayDate=this.initialDisplayDate;else{let e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1],(await this.calendar)._updateFocusedDate()}await this.updateComplete,(await this.datepickerInputAsync).focus()}async _handleOpenMenu(){let e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;let t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t,(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),(this.mode===`range`&&this.selectedDateRange.length===2||this.mode===`single`&&this.selectedDateRange.length===1)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,!this._mixinShouldSkipSgdsValidation()&&(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=``){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view=`days`;let t=await this.datepickerInputAsync;t.setInvalid(this.invalid),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},`Invalid date input`,this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},`Please fill in this field`,this.datepickerInput)}_manageInternalsValid(){this._mixinSetFormValue(),!this._mixinShouldSkipSgdsValidation()&&(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1)}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return v`
+    `}};T([x({type:String})],xv.prototype,`minDate`,void 0),T([x({type:String})],xv.prototype,`maxDate`,void 0),T([x({type:String,reflect:!0})],xv.prototype,`mode`,void 0),T([ot(`input`)],xv.prototype,`shadowInput`,void 0),b();var Sv=u`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);border-radius:var(--sgds-overlay-border-radius);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius) 0 0 var(--sgds-form-border-radius);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius) var(--sgds-form-border-radius) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;b();var Y=class extends j_(qg){static{this.styles=[...qg.styles,Yg,Sv]}static{this.dependencies={"sgds-datepicker-input":xv,"sgds-datepicker-calendar":mv,"sgds-datepicker-header":gv,"sgds-button":z,"sgds-icon-button":bm}}constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value=``,this.initialValue=[],this.dateFormat=`DD/MM/YYYY`,this.minDate=``,this.maxDate=``,this.mode=`single`,this.hasFeedback=!1,this.label=``,this.hintText=``,this.noFlip=!1,this.drop=`down`,this.defaultValue=``,this.invalid=!1,this.view=`days`,this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=/* @__PURE__ */ new Date,this._makeInputValueString=(e,t,n)=>{if(!e&&!t)return this.value;let r=e=>Q_(e,sv[n].fnsPattern);switch(this.mode){case`single`:e&&(this.value=r(e));break;case`range`:e&&t&&(this.value=`${r(e)} - ${r(t)}`),e&&!t&&(this.value=`${r(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:`Choose date`,months:`Choose month`,years:`Choose year`},this.floatingOpts={placement:`bottom-end`}}isValueEmpty(){return this.value===``||this.value===`DD/MM/YYYY`||this.value===`DD/MM/YYYY - DD/MM/YYYY`}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(e){this.invalid=e,this.datepickerInput&&this.datepickerInput.setInvalid(e)}setValidity(e,t,n){return this._mixinSetValidity(e,t,n)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener(`sgds-view`,this._handleViewChanged),this.addEventListener(`sgds-change-calendar`,this._handleDateChanged),this.addEventListener(`sgds-update-focus`,this._handleFocusDateChanged),this.addEventListener(`sgds-selectmonth`,this._handleSelectMonth),this.addEventListener(`sgds-selectyear`,this._handleSelectYear),this.addEventListener(`sgds-selectdates`,this._handleSelectDatesAndClose),this.addEventListener(`i-sgds-selectdates-input`,this._handleSelectDatesInput),this.addEventListener(`i-sgds-empty-input`,this._handleEmptyInput),this.addEventListener(`keydown`,this._handleTab),this.addEventListener(`sgds-hide`,this._handleCloseMenu),this.addEventListener(`sgds-show`,this._handleOpenMenu),this.addEventListener(`blur`,this._mixinCheckValidity),this.initialValue=this.value?this.value.split(` - `).map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||/* @__PURE__ */ new Date,this.initialValue&&this.initialValue.length>0){let e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error(`Invalid date format in initialValue:`,t);{let e=this.initialValue.map(e=>q(ov(e,sv[this.dateFormat].fnsPattern)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){let e=await this.datepickerInputAsync;await this.updateFloatingPosition(),(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`).replace(`MM`,`\\d{2}`).replace(`DD`,`\\d{2}`).replace(`YYYY`,`\\d{4}`).replace(`/`,`\\/`)}_handleTab(e){if(!this.menuIsOpen)return;let t=[,,,,];e.shiftKey&&e.key===`Tab`?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):e.key===`Tab`&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}async _handleValueChange(){this._mixinSetFormValue(),this.emit(`sgds-change-date`),await this.updateComplete,!this._mixinShouldSkipSgdsValidation()&&this._mixinValidate(this.input)}async _handleCloseMenu(){if(this.selectedDateRange.length===0)this.displayDate=this.initialDisplayDate;else{let e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1],(await this.calendar)._updateFocusedDate()}await this.updateComplete,(await this.datepickerInputAsync).focus()}async _handleOpenMenu(){let e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;let t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t,(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),(this.mode===`range`&&this.selectedDateRange.length===2||this.mode===`single`&&this.selectedDateRange.length===1)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,!this._mixinShouldSkipSgdsValidation()&&(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=``){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view=`days`;let t=await this.datepickerInputAsync;t.setInvalid(this.invalid),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},`Invalid date input`,this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},`Please fill in this field`,this.datepickerInput)}_manageInternalsValid(){this._mixinSetFormValue(),!this._mixinShouldSkipSgdsValidation()&&(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1)}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return v`
       <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${w_(this.value)}
@@ -3940,7 +3940,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
         </div>
         ${this.label?v`<span class="label">${this.label}</span>`:y}
       </div>
-    `}};T([x({type:String,reflect:!0})],hy.prototype,`variant`,void 0),T([x({type:Number,reflect:!0})],hy.prototype,`value`,void 0),T([x({type:Number,reflect:!0})],hy.prototype,`ariamin`,void 0),T([x({type:Number,reflect:!0})],hy.prototype,`ariamax`,void 0),T([x({type:String,reflect:!0})],hy.prototype,`ariaLabel`,void 0),T([x({type:String,reflect:!0})],hy.prototype,`arialabel`,void 0),T([x({type:String,reflect:!0})],hy.prototype,`label`,void 0),b();var gy=u`sgds-input{--input-min-width:var(--sgds-dimension-0)}.input-group{align-items:stretch;display:flex;gap:var(--sgds-gap-none)}.input-group>sgds-input{--input-border-radius:0;flex:1 1 auto;margin-inline:calc(var(--sgds-form-border-width-default)*-1);min-width:0;position:relative;z-index:1}.input-group>sgds-input:focus-within{z-index:3}.input-group>sgds-icon-button.minus-btn{--btn-border-radius:var(--sgds-form-border-radius) 0 0 var(--sgds-form-border-radius)}.input-group>sgds-icon-button.plus-btn{--btn-border-radius:0 var(--sgds-form-border-radius) var(--sgds-form-border-radius) 0}.input-group sgds-button:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`,_y=class extends j_(V){constructor(...e){super(...e),this.value=0,this.step=1,this.noValidate=!1,this.readonly=!1,this.defaultValue=0}static{this.styles=[...V.styles,O_,ay,F_,gy]}static{this.dependencies={"sgds-input":J,"sgds-icon-button":bm}}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async _handleValueChange(e,t){e.stopPropagation();let n=await this._sgdsInput;(parseInt(n.value)<this.step||n.value===``)&&(n.value=`0`),this.value=parseInt(n.value),this._mixinSetFormValue(),this.emit(t),!this._mixinShouldSkipSgdsValidation()&&(t===`sgds-input`&&(this.invalid=!1),this._mixinValidate(n.input),t===`sgds-change`&&(this.invalid=!this._mixinReportValidity()))}async _mixinResetFormControl(){let e=await this._sgdsInput;this.value=this.defaultValue,e.input.value=this.value.toString(),this._mixinResetValidity(e.input)}_handleKeyDown(e){[`Backspace`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,...Array.from(Array(10).keys()).map(e=>e.toString()),`Tab`].includes(e.key)||e.preventDefault()}_handleInvalid(){this.invalid=!0}_handleValid(){this.invalid=!1}plus(){this.plusBtn.click()}minus(){this.minusBtn.click()}async _onPlus(e){let t=await this._sgdsInput;e.preventDefault(),e.stopPropagation(),this.value=parseInt(t.value)+parseInt(t.step.toString()),this._validateOnClick(t.input),this.emit(`sgds-change`)}async _onMinus(e){let t=await this._sgdsInput;e.preventDefault(),e.stopPropagation(),this.value=this.value<this.step?0:parseInt(t.value)-parseInt(t.step.toString()),this._validateOnClick(t.input),this.emit(`sgds-change`)}async _validateOnClick(e){await(await this._sgdsInput).updateComplete,this._mixinSetFormValue(),!this._mixinShouldSkipSgdsValidation()&&(this._mixinValidate(e),this.invalid=!this._mixinReportValidity())}_renderFeedback(){let e=this.hasFeedback===`both`||this.hasFeedback===`text`;return this.invalid&&e?F` <div class="invalid-feedback-container">
+    `}};T([x({type:String,reflect:!0})],hy.prototype,`variant`,void 0),T([x({type:Number,reflect:!0})],hy.prototype,`value`,void 0),T([x({type:Number,reflect:!0})],hy.prototype,`ariamin`,void 0),T([x({type:Number,reflect:!0})],hy.prototype,`ariamax`,void 0),T([x({type:String,reflect:!0})],hy.prototype,`ariaLabel`,void 0),T([x({type:String,reflect:!0})],hy.prototype,`arialabel`,void 0),T([x({type:String,reflect:!0})],hy.prototype,`label`,void 0),b();var gy=u`sgds-input{--input-min-width:var(--sgds-dimension-0)}.input-group{align-items:stretch;display:flex;gap:var(--sgds-gap-none)}.input-group>sgds-input{--input-border-radius:0;flex:1 1 auto;margin-inline:calc(var(--sgds-form-border-width-default)*-1);min-width:0;position:relative;z-index:1}.input-group>sgds-input:focus-within{z-index:3}.input-group>sgds-icon-button.minus-btn{--btn-border-radius:var(--sgds-form-border-radius) 0 0 var(--sgds-form-border-radius)}.input-group>sgds-icon-button.plus-btn{--btn-border-radius:0 var(--sgds-form-border-radius) var(--sgds-form-border-radius) 0}.input-group sgds-button:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`,_y=class extends j_(V){constructor(...e){super(...e),this.value=0,this.step=1,this.noValidate=!1,this.readonly=!1,this.defaultValue=0}static{this.styles=[...V.styles,O_,ay,F_,gy]}static{this.dependencies={"sgds-input":J,"sgds-icon-button":bm}}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async _handleValuePropertyChange(){if(this._mixinSetFormValue(),await this.updateComplete,this._mixinShouldSkipSgdsValidation())return;let e=await this._sgdsInput;this._mixinValidate(e.input)}async _handleValueChange(e,t){e.stopPropagation();let n=await this._sgdsInput;(parseInt(n.value)<this.step||n.value===``)&&(n.value=`0`),this.value=parseInt(n.value),this._mixinSetFormValue(),this.emit(t),!this._mixinShouldSkipSgdsValidation()&&(t===`sgds-input`&&(this.invalid=!1),this._mixinValidate(n.input),t===`sgds-change`&&(this.invalid=!this._mixinReportValidity()))}async _mixinResetFormControl(){let e=await this._sgdsInput;this.value=this.defaultValue,e.input.value=this.value.toString(),this._mixinResetValidity(e.input)}_handleKeyDown(e){[`Backspace`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,...Array.from(Array(10).keys()).map(e=>e.toString()),`Tab`].includes(e.key)||e.preventDefault()}_handleInvalid(){this.invalid=!0}_handleValid(){this.invalid=!1}plus(){this.plusBtn.click()}minus(){this.minusBtn.click()}async _onPlus(e){let t=await this._sgdsInput;e.preventDefault(),e.stopPropagation(),this.value=parseInt(t.value)+parseInt(t.step.toString()),this._validateOnClick(t.input),this.emit(`sgds-change`)}async _onMinus(e){let t=await this._sgdsInput;e.preventDefault(),e.stopPropagation(),this.value=this.value<this.step?0:parseInt(t.value)-parseInt(t.step.toString()),this._validateOnClick(t.input),this.emit(`sgds-change`)}async _validateOnClick(e){await(await this._sgdsInput).updateComplete,this._mixinSetFormValue(),!this._mixinShouldSkipSgdsValidation()&&(this._mixinValidate(e),this.invalid=!this._mixinReportValidity())}_renderFeedback(){let e=this.hasFeedback===`both`||this.hasFeedback===`text`;return this.invalid&&e?F` <div class="invalid-feedback-container">
           <slot name="invalidIcon">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
               <path
@@ -4008,7 +4008,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
         <div id="${this._controlId}-announcer" aria-live="assertive" class="visually-hidden">${this.value}</div>
         ${this._renderFeedback()}
       </div>
-    `}};T([C(`sgds-icon-button[ariaLabel^='increase by']`)],_y.prototype,`plusBtn`,void 0),T([C(`sgds-icon-button[ariaLabel^='decrease by']`)],_y.prototype,`minusBtn`,void 0),T([x({type:Number,reflect:!0})],_y.prototype,`value`,void 0),T([x({type:Number})],_y.prototype,`step`,void 0),T([x({type:Number})],_y.prototype,`min`,void 0),T([x({type:Number})],_y.prototype,`max`,void 0),T([x({type:String,reflect:!0})],_y.prototype,`hasFeedback`,void 0),T([x({type:String,reflect:!0})],_y.prototype,`invalidFeedback`,void 0),T([x({type:Boolean,reflect:!0})],_y.prototype,`noValidate`,void 0),T([x({type:Boolean,reflect:!0})],_y.prototype,`readonly`,void 0),T([k_()],_y.prototype,`defaultValue`,void 0),T([ot(`sgds-input`)],_y.prototype,`_sgdsInput`,void 0),b();var vy=u`:host{outline:0}.form-check-input[type=radio]{border-radius:50%}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none" viewBox="0 0 8 8"><path fill="%23fff" d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0"/></svg>')}.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;b();var yy=class extends E{constructor(...e){super(...e),this.checked=!1,this.disabled=!1,this.invalid=!1,this.autofocus=!1,this.radioId=mm(`radio`)}static{this.styles=[...E.styles,N_,D_,vy]}connectedCallback(){super.connectedCallback(),this.setInitialAttributes(),this.addEventListeners()}handleCheckedChange(){this.checked&&this.autofocus&&this.input?.focus(),this.setAttribute(`tabindex`,this.checked?`0`:`-1`)}handleDisabledChange(){this.setAttribute(`aria-disabled`,this.disabled?`true`:`false`)}handleBlur(){this.emit(`sgds-blur`)}handleClick(){this.disabled||(this.checked=!0)}handleFocus(){this.emit(`sgds-focus`)}addEventListeners(){this.addEventListener(`blur`,()=>this.handleBlur()),this.addEventListener(`click`,()=>this.handleClick()),this.addEventListener(`focus`,()=>this.handleFocus())}setInitialAttributes(){this.setAttribute(`tabindex`,`-1`),this.setAttribute(`aria-disabled`,this.disabled?`true`:`false`)}render(){return v`
+    `}};T([C(`sgds-icon-button[ariaLabel^='increase by']`)],_y.prototype,`plusBtn`,void 0),T([C(`sgds-icon-button[ariaLabel^='decrease by']`)],_y.prototype,`minusBtn`,void 0),T([x({type:Number,reflect:!0})],_y.prototype,`value`,void 0),T([x({type:Number})],_y.prototype,`step`,void 0),T([x({type:Number})],_y.prototype,`min`,void 0),T([x({type:Number})],_y.prototype,`max`,void 0),T([x({type:String,reflect:!0})],_y.prototype,`hasFeedback`,void 0),T([x({type:String,reflect:!0})],_y.prototype,`invalidFeedback`,void 0),T([x({type:Boolean,reflect:!0})],_y.prototype,`noValidate`,void 0),T([x({type:Boolean,reflect:!0})],_y.prototype,`readonly`,void 0),T([k_()],_y.prototype,`defaultValue`,void 0),T([ot(`sgds-input`)],_y.prototype,`_sgdsInput`,void 0),T([P(`value`,{waitUntilFirstUpdate:!0})],_y.prototype,`_handleValuePropertyChange`,null),b();var vy=u`:host{outline:0}.form-check-input[type=radio]{border-radius:50%}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none" viewBox="0 0 8 8"><path fill="%23fff" d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0"/></svg>')}.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;b();var yy=class extends E{constructor(...e){super(...e),this.checked=!1,this.disabled=!1,this.invalid=!1,this.autofocus=!1,this.radioId=mm(`radio`)}static{this.styles=[...E.styles,N_,D_,vy]}connectedCallback(){super.connectedCallback(),this.setInitialAttributes(),this.addEventListeners()}handleCheckedChange(){this.checked&&this.autofocus&&this.input?.focus(),this.setAttribute(`tabindex`,this.checked?`0`:`-1`)}handleDisabledChange(){this.setAttribute(`aria-disabled`,this.disabled?`true`:`false`)}handleBlur(){this.emit(`sgds-blur`)}handleClick(){this.disabled||(this.checked=!0)}handleFocus(){this.emit(`sgds-focus`)}addEventListeners(){this.addEventListener(`blur`,()=>this.handleBlur()),this.addEventListener(`click`,()=>this.handleClick()),this.addEventListener(`focus`,()=>this.handleFocus())}setInitialAttributes(){this.setAttribute(`tabindex`,`-1`),this.setAttribute(`aria-disabled`,this.disabled?`true`:`false`)}render(){return v`
       <div class="form-check">
         <input
           class=${D({"form-check-input":!0,"is-invalid":this.invalid})}
@@ -4025,7 +4025,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
           <slot></slot>
         </label>
       </div>
-    `}};T([x({type:Boolean,reflect:!0})],yy.prototype,`checked`,void 0),T([x()],yy.prototype,`value`,void 0),T([x({type:Boolean,reflect:!0})],yy.prototype,`disabled`,void 0),T([x({type:Boolean,reflect:!0})],yy.prototype,`invalid`,void 0),T([x({type:Boolean,reflect:!1})],yy.prototype,`autofocus`,void 0),T([C(`input`)],yy.prototype,`input`,void 0),T([P(`checked`)],yy.prototype,`handleCheckedChange`,null),T([P(`disabled`,{waitUntilFirstUpdate:!0})],yy.prototype,`handleDisabledChange`,null),b();var by=u`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;b();var xy=class extends j_(V){constructor(...e){super(...e),this.defaultValue=``,this.value=``,this.invalidFeedback=``,this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.autofocus=!1,this._isTouched=!1}static{this.styles=[...V.styles,by]}_handleValueChange(){this._updateCheckedRadio()}_handleInvalidChange(){this._radios.forEach(e=>e.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue(`reset`),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener(`sgds-blur`,()=>{this._isTouched=!0})}firstUpdated(e){super.firstUpdated(e);let t=this._radios;t.forEach((e,n)=>{if(t.length>1)switch(n){case 0:e.setAttribute(`first-of-type`,``);break;case t.length-1:e.setAttribute(`last-of-type`,``);break;default:e.setAttribute(`nth-of-type`,``)}}),this.value&&this._updateInputValue(`change`)}_handleRadioClick(e){e.preventDefault();let t=e.target;t.disabled||(this.value=t.value,this.emit(`sgds-change`,{detail:{value:this.value}}),this._updateInputValue(),this._radios.forEach(e=>e.checked=e===t))}_updateInputValue(e=`change`){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(e))}_handleKeyDown(e){if(![`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,` `].includes(e.key))return;let t=this._radios.filter(e=>!e.disabled),n=t.find(e=>e.checked)??t[0],r=e.key===` `?0:[`ArrowUp`,`ArrowLeft`].includes(e.key)?-1:1,i=t.indexOf(n)+r;i<0&&(i=t.length-1),i>t.length-1&&(i=0),this._radios.forEach(e=>{e.checked=!1,e.tabIndex=-1}),this.value=t[i].value,this.emit(`sgds-change`,{detail:{value:this.value}}),this._updateInputValue(),t[i].checked=!0,t[i].tabIndex=0,e.preventDefault()}_handleSlotChange(){let e=this._radios;e.forEach(e=>(e.autofocus=this.autofocus,e.checked=e.value===this.value,e)),this._disabledChildRadios(),e.some(e=>e.checked)||e[0]&&(e[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(e=>e.checked=e.value===this.value)}_renderHintText(){let e=v` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){this.disabled&&this._radios.forEach(e=>e.disabled=this.disabled)}render(){let e=v`
+    `}};T([x({type:Boolean,reflect:!0})],yy.prototype,`checked`,void 0),T([x()],yy.prototype,`value`,void 0),T([x({type:Boolean,reflect:!0})],yy.prototype,`disabled`,void 0),T([x({type:Boolean,reflect:!0})],yy.prototype,`invalid`,void 0),T([x({type:Boolean,reflect:!1})],yy.prototype,`autofocus`,void 0),T([C(`input`)],yy.prototype,`input`,void 0),T([P(`checked`)],yy.prototype,`handleCheckedChange`,null),T([P(`disabled`,{waitUntilFirstUpdate:!0})],yy.prototype,`handleDisabledChange`,null),b();var by=u`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;b();var xy=class extends j_(V){constructor(...e){super(...e),this.defaultValue=``,this.value=``,this.invalidFeedback=``,this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.autofocus=!1,this._isTouched=!1}static{this.styles=[...V.styles,by]}async _handleValueChange(){this._updateCheckedRadio(),this._mixinSetFormValue(),await this.updateComplete,!this._mixinShouldSkipSgdsValidation()&&this._mixinValidate(this.input)}_handleInvalidChange(){this._radios.forEach(e=>e.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue(`reset`),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener(`sgds-blur`,()=>{this._isTouched=!0})}firstUpdated(e){super.firstUpdated(e);let t=this._radios;t.forEach((e,n)=>{if(t.length>1)switch(n){case 0:e.setAttribute(`first-of-type`,``);break;case t.length-1:e.setAttribute(`last-of-type`,``);break;default:e.setAttribute(`nth-of-type`,``)}}),this.value&&this._updateInputValue(`change`)}_handleRadioClick(e){e.preventDefault();let t=e.target;t.disabled||(this.value=t.value,this.emit(`sgds-change`,{detail:{value:this.value}}),this._updateInputValue(),this._radios.forEach(e=>e.checked=e===t))}_updateInputValue(e=`change`){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(e))}_handleKeyDown(e){if(![`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,` `].includes(e.key))return;let t=this._radios.filter(e=>!e.disabled),n=t.find(e=>e.checked)??t[0],r=e.key===` `?0:[`ArrowUp`,`ArrowLeft`].includes(e.key)?-1:1,i=t.indexOf(n)+r;i<0&&(i=t.length-1),i>t.length-1&&(i=0),this._radios.forEach(e=>{e.checked=!1,e.tabIndex=-1}),this.value=t[i].value,this.emit(`sgds-change`,{detail:{value:this.value}}),this._updateInputValue(),t[i].checked=!0,t[i].tabIndex=0,e.preventDefault()}_handleSlotChange(){let e=this._radios;e.forEach(e=>(e.autofocus=this.autofocus,e.checked=e.value===this.value,e)),this._disabledChildRadios(),e.some(e=>e.checked)||e[0]&&(e[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(e=>e.checked=e.value===this.value)}_renderHintText(){let e=v` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){this.disabled&&this._radios.forEach(e=>e.disabled=this.disabled)}render(){let e=v`
       <slot
         class="radio-container"
         @click=${this._handleRadioClick}
@@ -4458,7 +4458,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
       <ul class="contents">
         <slot name="contents"></slot>
       </ul>
-    </div> `}};b();var xb=u`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{height:auto;min-height:var(--sgds-dimension-136);overflow:auto;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;b();var $=class extends j_(V){constructor(...e){super(...e),this.value=``,this.spellcheck=!1,this.rows=4,this.placeholder=`Placeholder`,this.invalidFeedback=``,this.autofocus=!1,this.readonly=!1,this.resize=`vertical`,this.defaultValue=``,this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.hintText=``,this._isTouched=!1}static{this.styles=[...V.styles,F_,xb]}focus(e){this.textarea.focus(e)}blur(){this.textarea.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}select(){this.textarea.select()}_handleInvalid(e){e.preventDefault(),this.invalid=!0}_handleChange(e){this.value=this.input.value,this.emit(`sgds-change`),super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value,this.emit(`sgds-input`),super._mixinHandleInputChange(e)}_handleFocus(){this.emit(`sgds-focus`)}_handleBlur(){let e=this.emit(`sgds-blur`,{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleRowsChange(){this._setTextareaHeight()}_setTextareaHeight(){this.resize===`auto`?(this.textarea.style.height=`auto`,this.textarea.style.height=`${this.textarea.scrollHeight}px`):this.textarea.style.height=void 0}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_handleValueChange(){this.updateComplete.then(()=>this._setTextareaHeight())}_renderHintText(){let e=F` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}_wordCount(){return F`
+    </div> `}};b();var xb=u`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{height:auto;min-height:var(--sgds-dimension-136);overflow:auto;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;b();var $=class extends j_(V){constructor(...e){super(...e),this.value=``,this.spellcheck=!1,this.rows=4,this.placeholder=`Placeholder`,this.invalidFeedback=``,this.autofocus=!1,this.readonly=!1,this.resize=`vertical`,this.defaultValue=``,this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.hintText=``,this._isTouched=!1}static{this.styles=[...V.styles,F_,xb]}focus(e){this.textarea.focus(e)}blur(){this.textarea.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}select(){this.textarea.select()}_handleInvalid(e){e.preventDefault(),this.invalid=!0}_handleChange(e){this.value=this.input.value,this.emit(`sgds-change`),super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value,this.emit(`sgds-input`),super._mixinHandleInputChange(e)}_handleFocus(){this.emit(`sgds-focus`)}_handleBlur(){let e=this.emit(`sgds-blur`,{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleRowsChange(){this._setTextareaHeight()}_setTextareaHeight(){this.resize===`auto`?(this.textarea.style.height=`auto`,this.textarea.style.height=`${this.textarea.scrollHeight}px`):this.textarea.style.height=void 0}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}async _handleValueChange(){this._mixinSetFormValue(),await this.updateComplete,this._setTextareaHeight(),!this._mixinShouldSkipSgdsValidation()&&this._mixinValidate(this.input)}_renderHintText(){let e=F` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}_wordCount(){return F`
       <div
         class="form-text word-count ${D({"invalid-feedback":this.invalid&&this.hasFeedback})}"
       >