@govtechsg/sgds-web-component 3.16.1-rc.2 → 3.16.1-rc.3

package/components/Textarea/sgds-textarea.js

@@ -164,7 +164,7 @@ class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) {
     render() {
         return html `
       <div
-        class="form-control-container ${classMap({
+        class="form-control-container m-width-256 ${classMap({
             disabled: this.disabled
         })}"
       >

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.js","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 */\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 ${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"],"names":["formTextControlStyles","textareaStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.js","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 */\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"],"names":["formTextControlStyles","textareaStyle"],"mappings":"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"}

package/components/index.umd.min.js

@@ -2557,7 +2557,7 @@ class extends We{constructor(e){if(super(e),e.type!==qe&&e.type!==Ne&&e.type!==Y
               </div>
             `:ae}
       </fieldset>
-    `}}Da.styles=[...ka.styles,Va],t([De({reflect:!0})],Da.prototype,"label",void 0),t([De({type:String,reflect:!0})],Da.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],Da.prototype,"hasFeedback",void 0),t([De({reflect:!0})],Da.prototype,"hintText",void 0),t([De({type:Boolean,reflect:!0})],Da.prototype,"required",void 0),t([De({reflect:!0})],Da.prototype,"value",void 0),t([Ee()],Da.prototype,"_isTouched",void 0),t([_a()],Da.prototype,"defaultValue",void 0),t([Ee()],Da.prototype,"_blurredCheckboxes",void 0),t([Ee()],Da.prototype,"formEvent",void 0),t([Te()],Da.prototype,"_checkboxes",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],Da.prototype,"_handleValueChange",null),t([ot("_isTouched",{waitUntilFirstUpdate:!0})],Da.prototype,"_handleIsTouched",null),t([ot("invalid",{waitUntilFirstUpdate:!0})],Da.prototype,"_updateInvalid",null);var Ea=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;overflow:hidden;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);min-width:0;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)}`,Ia=r`.empty-menu,.loading-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px);pointer-events:none}.loading-menu{align-items:center;display:flex;gap:var(--sgds-gap-xs)}`;class Za extends(Sa(Ui)){constructor(){super(),this.label="",this.hintText="",this.autofocus=!1,this.disabled=!1,this.required=!1,this.loading=!1,this.value="",this.displayValue="",this.defaultValue="",this.hasFeedback=!1,this.invalidFeedback="",this.invalid=!1,this.menuList=[],this.selectedItems=[],this.filteredList=[],this._isTouched=!1,this._controlId=Oi("input"),this._labelId=Oi("label"),this.floatingOpts={middleware:[Bi({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}}connectedCallback(){super.connectedCallback(),this.addEventListener("blur",async e=>{var t;const s=this.constructor.childName,i=(null===(t=e.relatedTarget)||void 0===t?void 0:t.tagName.toLowerCase())===s;this.invalid=!i&&!this._mixinReportValidity()})}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_renderFeedback(){return this.invalid&&this.hasFeedback?te` <div class="invalid-feedback-container">
+    `}}Da.styles=[...ka.styles,Va],t([De({reflect:!0})],Da.prototype,"label",void 0),t([De({type:String,reflect:!0})],Da.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],Da.prototype,"hasFeedback",void 0),t([De({reflect:!0})],Da.prototype,"hintText",void 0),t([De({type:Boolean,reflect:!0})],Da.prototype,"required",void 0),t([De({reflect:!0})],Da.prototype,"value",void 0),t([Ee()],Da.prototype,"_isTouched",void 0),t([_a()],Da.prototype,"defaultValue",void 0),t([Ee()],Da.prototype,"_blurredCheckboxes",void 0),t([Ee()],Da.prototype,"formEvent",void 0),t([Te()],Da.prototype,"_checkboxes",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],Da.prototype,"_handleValueChange",null),t([ot("_isTouched",{waitUntilFirstUpdate:!0})],Da.prototype,"_handleIsTouched",null),t([ot("invalid",{waitUntilFirstUpdate:!0})],Da.prototype,"_updateInvalid",null);var Ea=r`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.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;overflow:hidden;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);min-width:0;outline:none;padding:0;width:100%}.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)}`,Ia=r`.empty-menu,.loading-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px);pointer-events:none}.loading-menu{align-items:center;display:flex;gap:var(--sgds-gap-xs)}`;class Za extends(Sa(Ui)){constructor(){super(),this.label="",this.hintText="",this.autofocus=!1,this.disabled=!1,this.required=!1,this.loading=!1,this.value="",this.displayValue="",this.defaultValue="",this.hasFeedback=!1,this.invalidFeedback="",this.invalid=!1,this.menuList=[],this.selectedItems=[],this.filteredList=[],this._isTouched=!1,this._controlId=Oi("input"),this._labelId=Oi("label"),this.floatingOpts={middleware:[Bi({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}}connectedCallback(){super.connectedCallback(),this.addEventListener("blur",async e=>{var t;const s=this.constructor.childName,i=(null===(t=e.relatedTarget)||void 0===t?void 0:t.tagName.toLowerCase())===s;this.invalid=!i&&!this._mixinReportValidity()})}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_renderFeedback(){return this.invalid&&this.hasFeedback?te` <div class="invalid-feedback-container">
           <slot name="invalidIcon">
             <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
           </slot>
@@ -2571,7 +2571,7 @@ class extends We{constructor(e){if(super(e),e.type!==qe&&e.type!==Ne&&e.type!==Y
         class=${Ke({"form-label":!0,required:this.required})}
         >${this.label}</label
       >
-    `;return this.label&&e}_handleClick(){if(this.readonly)return null;this.menuIsOpen?this.hideMenu():this.showMenu()}async _getMenuListFromOptions(e){const t=e.map(async e=>(await e.updateComplete,e)),s=await Promise.all(t);return null==s?void 0:s.map(e=>{var t;return{label:e.innerText,value:e.getAttribute("value"),disabled:null!==(t=e.disabled)&&void 0!==t?t:void 0}})}_renderEmptyMenu(){return te` <div class="empty-menu">No options</div> `}_renderLoadingMenu(){return te`<div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>`}}Za.styles=[...Ui.styles,qi,wa,ba,Ea,Ia],t([De({reflect:!0})],Za.prototype,"label",void 0),t([De({reflect:!0})],Za.prototype,"hintText",void 0),t([De({reflect:!0})],Za.prototype,"name",void 0),t([De({type:String,reflect:!0})],Za.prototype,"placeholder",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"autofocus",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"disabled",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"required",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"loading",void 0),t([De({type:String,reflect:!0})],Za.prototype,"value",void 0),t([Ee()],Za.prototype,"displayValue",void 0),t([_a()],Za.prototype,"defaultValue",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"hasFeedback",void 0),t([De({type:String,reflect:!0})],Za.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"invalid",void 0),t([De({type:Array})],Za.prototype,"menuList",void 0),t([Ee()],Za.prototype,"selectedItems",void 0),t([Ee()],Za.prototype,"filteredList",void 0),t([Le("input.form-control")],Za.prototype,"_input",void 0);var Ba=r`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.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}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,La=r`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Ta extends He{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){const e={disabled:this.disabled,active:this.active};return te`
+    `;return this.label&&e}_handleClick(){if(this.readonly)return null;this.menuIsOpen?this.hideMenu():this.showMenu()}async _getMenuListFromOptions(e){const t=e.map(async e=>(await e.updateComplete,e)),s=await Promise.all(t);return null==s?void 0:s.map(e=>{var t;return{label:e.innerText,value:e.getAttribute("value"),disabled:null!==(t=e.disabled)&&void 0!==t?t:void 0}})}_renderEmptyMenu(){return te` <div class="empty-menu">No options</div> `}_renderLoadingMenu(){return te`<div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>`}}Za.styles=[...Ui.styles,qi,wa,ba,Ea,Ia],t([De({reflect:!0})],Za.prototype,"label",void 0),t([De({reflect:!0})],Za.prototype,"hintText",void 0),t([De({reflect:!0})],Za.prototype,"name",void 0),t([De({type:String,reflect:!0})],Za.prototype,"placeholder",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"autofocus",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"disabled",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"required",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"loading",void 0),t([De({type:String,reflect:!0})],Za.prototype,"value",void 0),t([Ee()],Za.prototype,"displayValue",void 0),t([_a()],Za.prototype,"defaultValue",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"hasFeedback",void 0),t([De({type:String,reflect:!0})],Za.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],Za.prototype,"invalid",void 0),t([De({type:Array})],Za.prototype,"menuList",void 0),t([Ee()],Za.prototype,"selectedItems",void 0),t([Ee()],Za.prototype,"filteredList",void 0),t([Le("input.form-control")],Za.prototype,"_input",void 0);var Ba=r`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.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}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,La=r`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Ta extends He{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){const e={disabled:this.disabled,active:this.active};return te`
       <div class="dropdown-item ${Ke(e)}" tabindex=${this.disabled?"-1":"0"}>
         ${this._renderItemContent()}
       </div>
@@ -2662,7 +2662,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
       </div>
     `}_renderFeedbackMenu(){return this.loading?this._renderLoadingMenu():this.async?this.emptyMenuAsync||0===this.optionList.length?this._renderEmptyMenu():ae:0===this.optionList.length||this.emptyMenuAfterFiltering&&this.optionList.length>0?this._renderEmptyMenu():ae}render(){const e=(this.isFocused||this.menuIsOpen)&&""!==this.value&&this.clearable&&!this.readonly;return te`
       <div
-        class=${Ke({"form-control-container":!0,disabled:this.disabled,combobox:!0})}
+        class=${Ke({"form-control-container":!0,"m-width-256":!0,disabled:this.disabled,combobox:!0})}
         @keydown=${this._handleMultiSelectKeyDown}
       >
         ${this._renderLabel()}
@@ -2861,7 +2861,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
       >
     `;return this.label&&e}_renderHintText(){const e=ut` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}render(){return ut`
       <div
-        class="form-control-container ${Ke({disabled:this.disabled})}"
+        class="form-control-container m-width-160 ${Ke({disabled:this.disabled})}"
       >
         ${this._renderLabel()}
         <div class="form-control-row">
@@ -2881,8 +2881,8 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
         </div>
         ${this._renderFeedback()}
       </div>
-    `}}Nr.styles=[...Rr.styles,Or],t([De({type:String})],Nr.prototype,"minDate",void 0),t([De({type:String})],Nr.prototype,"maxDate",void 0),t([De({type:String,reflect:!0})],Nr.prototype,"mode",void 0),t([Le("input")],Nr.prototype,"shadowInput",void 0);var Ur=r`: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;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);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-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}.calendar-btn.with-hint-text.with-label{align-self:center;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}`;class qr extends(Sa(Ni)){constructor(){super(),this.required=!1,this.disabled=!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=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(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||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}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("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("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||new Date,this.initialValue&&this.initialValue.length>0){const 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);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const 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;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const 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;const 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),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&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.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";const t=await this.datepickerInputAsync;t.setInvalid(!1),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._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue()}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return te`
-      <div class="datepicker-container">
+    `}}Nr.styles=[...Rr.styles,Or],t([De({type:String})],Nr.prototype,"minDate",void 0),t([De({type:String})],Nr.prototype,"maxDate",void 0),t([De({type:String,reflect:!0})],Nr.prototype,"mode",void 0),t([Le("input")],Nr.prototype,"shadowInput",void 0);var Ur=r`: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;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);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-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}.calendar-btn.with-hint-text.with-label{align-self:center;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}`;class qr extends(Sa(Ni)){constructor(){super(),this.required=!1,this.disabled=!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=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(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||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}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("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("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||new Date,this.initialValue&&this.initialValue.length>0){const 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);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const 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;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const 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;const 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),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&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.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";const t=await this.datepickerInputAsync;t.setInvalid(!1),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._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue()}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return te`
+      <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${fa(this.value)}
           ?required=${this.required}
@@ -3581,7 +3581,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
         >${this.label}</label
       >
     `;return this.label&&e}_renderHintText(){const e=ut` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}render(){return ut`
-      <div class="form-control-container">
+      <div class="form-control-container m-width-256">
         ${this._renderLabel()}
         <div class="input-group">
           <sgds-icon-button
@@ -3724,7 +3724,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
       </div>
     `}render(){return te`
       <div
-        class=${Ke({disabled:this.disabled,select:!0,"form-control-container":!0})}
+        class=${Ke({disabled:this.disabled,select:!0,"form-control-container":!0,"m-width-160":!0})}
       >
         ${this._renderLabel()}
         <!-- The input -->
@@ -4048,7 +4048,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
       </div>
     `}render(){return ut`
       <div
-        class="form-control-container ${Ke({disabled:this.disabled})}"
+        class="form-control-container m-width-256 ${Ke({disabled:this.disabled})}"
       >
         <label for=${this._controlId} class="form-label">${this.label}</label>
         <textarea