@govtechsg/sgds-web-component 3.2.0-rc.0 → 3.2.0-rc.1

package/react/components/ComboBox/sgds-combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, 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 { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(item: SgdsComboBoxItemData) {\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this._renderedMenu.map(item => {\n      let isActive = false;\n      if (this.multiSelect) {\n        const selectedItemValueArray = this.selectedItems.map(i => i.value);\n        isActive = selectedItemValueArray.includes(item.value);\n      } else {\n        isActive = item.value === this.value;\n      }\n      return html`\n        <sgds-combo-box-item\n          ?active=${isActive}\n          ?checkbox=${this.multiSelect}\n          value=${item.value}\n          @sgds-select=${this._handleItemSelected}\n          @sgds-unselect=${this._handleItemUnselect}\n        >\n          ${item.label}\n        </sgds-combo-box-item>\n      `;\n    });\n    return this._renderedMenu.length === 0 ? emptyMenu : menu;\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${this.selectedItems.map(\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      @sgds-hide=${() => this._handleBadgeDismissed(item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["comboBoxStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-combo-box.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, 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 { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this._renderedMenu.map(item => {\n      let isActive = false;\n      if (this.multiSelect) {\n        const selectedItemValueArray = this.selectedItems.map(i => i.value);\n        isActive = selectedItemValueArray.includes(item.value);\n      } else {\n        isActive = item.value === this.value;\n      }\n      return html`\n        <sgds-combo-box-item\n          ?active=${isActive}\n          ?checkbox=${this.multiSelect}\n          value=${item.value}\n          @sgds-select=${this._handleItemSelected}\n          @sgds-unselect=${this._handleItemUnselect}\n        >\n          ${item.label}\n        </sgds-combo-box-item>\n      `;\n    });\n    return this._renderedMenu.length === 0 ? emptyMenu : menu;\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${this.selectedItems.map(\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["comboBoxStyle"],"mappings":"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"}

package/react/components/Datepicker/sgds-datepicker.cjs.js

@@ -22,6 +22,7 @@ var sgdsIconButton = require('../IconButton/sgds-icon-button.cjs.js');
 var validatorMixin = require('../../utils/validatorMixin.cjs.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var classMap_js = require('lit/directives/class-map.js');
+var defaultvalue = require('../../utils/defaultvalue.cjs.js');
 
 /**
  * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input
@@ -39,7 +40,17 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
         this.required = false;
         /** When true, adds disabled attribute to input and button element */
         this.disabled = false;
-        /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'["22/12/2023"]' for single & '["22/12/2023","25/12/2023"]' for range respectively  */
+        /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.
+         * Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode
+         * For example, `value="22/12/2023"` for single mode or `value="22/12/2023 - 25/12/2023"` for range mode
+         */
+        this.value = "";
+        /**
+         * @deprecated since v3.1.1 in favour of `value`.
+         * The initial value of DatePicker on first load for single &
+         * range mode as array of string. eg.'["22/12/2023"]' for single &
+         * '["22/12/2023","25/12/2023"]' for range respectively
+         * */
         this.initialValue = [];
         this.dateFormat = "DD/MM/YYYY";
         /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
@@ -58,8 +69,8 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
         this.noFlip = false;
         /** The drop position of menu relative to the toggle button */
         this.drop = "down";
-        /**@internal */
-        this.value = "";
+        /**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. */
+        this.defaultValue = "";
         /**@internal */
         this.invalid = false;
         this.view = "days";
@@ -145,6 +156,7 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
         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(v => v.trim()) : this.initialValue;
         this.initialDisplayDate = this.displayDate || new Date();
         if (this.initialValue && this.initialValue.length > 0) {
             // Validate initialValue against the dateFormat regex
@@ -271,19 +283,22 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
         this._manageInternalsBadInput();
     }
     async _handleEmptyInput() {
-        this._manageEmptyInput();
+        if (this.required) {
+            this._manageEmptyInput();
+        }
+        return;
     }
-    async _resetDatepicker() {
+    async _resetDatepicker(resetValue = "") {
         this.displayDate = this.initialDisplayDate;
         this.selectedDateRange = [];
-        this.value = "";
+        this.value = resetValue;
         this.view = "days";
         const input = await this.datepickerInputAsync;
         input.setInvalid(false);
         input.destroyInputMask();
         await input.applyInputMask();
         this._mixinResetValidity(input);
-        if (this.isValueEmpty() && this.required) {
+        if (this.isValueEmpty()) {
             this._handleEmptyInput();
         }
     }
@@ -317,7 +332,7 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
      * Handles the form "reset" event
      */
     async _mixinResetFormControl() {
-        this._resetDatepicker();
+        this._resetDatepicker(this.defaultValue);
     }
     async _handleInputMaskChange(e) {
         this.value = e.detail;
@@ -411,6 +426,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsDatepicker.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsDatepicker.prototype, "value", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Array, reflect: true })
 ], SgdsDatepicker.prototype, "initialValue", void 0);
@@ -445,8 +463,8 @@ tslib.__decorate([
     decorators_js.property({ attribute: false })
 ], SgdsDatepicker.prototype, "displayDate", void 0);
 tslib.__decorate([
-    decorators_js.state()
-], SgdsDatepicker.prototype, "value", void 0);
+    defaultvalue.defaultValue()
+], SgdsDatepicker.prototype, "defaultValue", void 0);
 tslib.__decorate([
     decorators_js.state()
 ], SgdsDatepicker.prototype, "invalid", void 0);
@@ -472,7 +490,7 @@ tslib.__decorate([
     decorators_js.query("sgds-datepicker-input")
 ], SgdsDatepicker.prototype, "datepickerInput", void 0);
 tslib.__decorate([
-    watch.watch("value")
+    watch.watch("value", { waitUntilFirstUpdate: true })
 ], SgdsDatepicker.prototype, "_handleValueChange", null);
 
 exports.SgdsDatepicker = SgdsDatepicker;

package/react/components/Datepicker/sgds-datepicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-datepicker.cjs.js","sources":["../../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { format, parse } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { type SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport datepickerStyle from \"./datepicker.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\n/**\n * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input\n *\n * @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value\n *\n * @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n */\nexport class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) implements SgdsFormControl {\n  static styles = [...DropdownElement.styles, dropdownMenuStyle, datepickerStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-datepicker-input\": DatepickerInput,\n    \"sgds-datepicker-calendar\": DatepickerCalendar,\n    \"sgds-datepicker-header\": DatepickerHeader,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  /** When true, adds required attribute to input element */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**The datepicker input's name attribute */\n  @property({ reflect: true }) name: string;\n  /** When true, adds disabled attribute to input and button element */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'[\"22/12/2023\"]' for single & '[\"22/12/2023\",\"25/12/2023\"]' for range respectively  */\n  @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n  private dateFormat = \"DD/MM/YYYY\";\n\n  /** ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) minDate = \"\";\n\n  /** ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) maxDate = \"\";\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  /**Feedback text for error state when date input is invalid */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Allows invalidFeedback and invalid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The datepicker input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The datepicker input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: \"up\" | \"down\" = \"down\";\n\n  /** Provides the date context for Calendar to present the appropriate view. Defaults to today's date */\n  @property({ attribute: false }) displayDate: Date;\n  /**@internal */\n  @state() value = \"\";\n  /**@internal */\n  @state() invalid = false;\n\n  @state()\n  private view: ViewEnum = \"days\";\n\n  @state() private selectedDateRange: Date[] = [];\n\n  @state() private focusedDate: Date;\n\n  @state() private focusedTabIndex = 3;\n\n  private isValueEmpty() {\n    return this.value === \"\" || this.value === \"DD/MM/YYYY\" || this.value === \"DD/MM/YYYY - DD/MM/YYYY\";\n  }\n\n  private initialDisplayDate: Date = new Date();\n\n  @queryAsync(\"sgds-datepicker-calendar\")\n  private calendar: Promise<DatepickerCalendar>;\n\n  @queryAsync(\"sgds-datepicker-input\")\n  private datepickerInputAsync: Promise<DatepickerInput>;\n\n  @query(\"sgds-datepicker-input\")\n  private datepickerInput: DatepickerInput;\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  /**\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  async connectedCallback() {\n    super.connectedCallback();\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 8]\n        }\n      }\n    ];\n    this.addEventListener(\"sgds-view\", this._handleViewChanged);\n    this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n    this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n    this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n    this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n    this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n    this.addEventListener(\"sgds-selectdates-input\", this._handleSelectDatesInput);\n    this.addEventListener(\"sgds-empty-input\", this._handleEmptyInput);\n    this.addEventListener(\"keydown\", this._handleTab);\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n    this.addEventListener(\"sgds-show\", this._handleOpenMenu);\n    this.addEventListener(\"blur\", this._mixinCheckValidity);\n    this.initialDisplayDate = this.displayDate || new Date();\n    if (this.initialValue && this.initialValue.length > 0) {\n      // Validate initialValue against the dateFormat regex\n      const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n      // const startDateString = this.initialValue[0];\n      const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n      if (invalidDates.length > 0) {\n        return console.error(\"Invalid date format in initialValue:\", invalidDates);\n      } else {\n        const initialSelectedDates = this.initialValue.map(v =>\n          setTimeToNoon(parse(v, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n        );\n        this._handleSelectDates(initialSelectedDates);\n      }\n    } else {\n      this.displayDate = this.initialDisplayDate;\n    }\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      const input = await this.datepickerInputAsync;\n      this.showMenu();\n      const cal = await this.calendar;\n      cal.focusOnCalendar(input);\n    }\n  }\n\n  /** @internal */\n  private _getDateFormatRegex(): string {\n    // validate date strings and adhere to the specified date format\n    return (\n      this.dateFormat\n        // Replace any special characters with their escaped version using \"\\\\$&\"\n        .replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")\n        // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n        .replace(\"MM\", \"\\\\d{2}\")\n        // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n        .replace(\"DD\", \"\\\\d{2}\")\n        // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n        .replace(\"YYYY\", \"\\\\d{4}\")\n        // Replace '/' with '\\\\/', which matches the forward slash character\n        .replace(\"/\", \"\\\\/\")\n    );\n  }\n  private _handleTab(event: KeyboardEvent) {\n    if (!this.menuIsOpen) {\n      return;\n    }\n    const tabIndexArray = Array(4);\n    if (event.shiftKey && event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n    } else if (event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n    }\n  }\n\n  @watch(\"value\")\n  _handleValueChange() {\n    this.emit(\"sgds-change-date\");\n  }\n\n  private async _handleCloseMenu() {\n    //return focus to input when menu closes\n    const input = await this.datepickerInputAsync;\n    input.focus();\n\n    if (this.selectedDateRange.length === 0) {\n      this.displayDate = this.initialDisplayDate;\n    } else {\n      const selectedDatesLength = this.selectedDateRange.length;\n      this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n      const calendar = await this.calendar;\n      calendar._updateFocusedDate();\n    }\n  }\n  private async _handleOpenMenu() {\n    const cal = await this.calendar;\n    const input = await this.datepickerInputAsync;\n    cal.focusOnCalendar(input);\n  }\n\n  private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n    if (!startDate && !endDate) return this.value;\n    const formatDate = (date: Date) => format(date, DATE_PATTERNS[dateFormat].fnsPattern);\n    switch (this.mode) {\n      case \"single\": {\n        if (startDate) {\n          this.value = formatDate(startDate);\n        }\n        break;\n      }\n      case \"range\": {\n        if (startDate && endDate) {\n          this.value = `${formatDate(startDate)} - ${formatDate(endDate)}`;\n        }\n        if (startDate && !endDate) {\n          this.value = `${formatDate(startDate)} - ${this.dateFormat}`;\n        }\n        break;\n      }\n    }\n    return this.value;\n  };\n  private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n    this._handleSelectDates(event.detail);\n  }\n  private async _handleSelectDates(newSelectedDates: Date[]) {\n    newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n    this.displayDate = newSelectedDates[0];\n    this.focusedDate = newSelectedDates[0];\n    this.selectedDateRange = newSelectedDates;\n    // Get the formattedDate value for the selected dates\n    const formattedDate = this._makeInputValueString(\n      this.selectedDateRange[0],\n      this.selectedDateRange[1],\n      this.dateFormat\n    );\n\n    // Set formattedDate value as the new value for sgds-input\n    this.value = formattedDate;\n    const input = await this.datepickerInputAsync;\n    input.updateMaskValue();\n    this._manageInternalsValid();\n  }\n\n  private async _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n    await this._handleSelectDates(event.detail);\n\n    if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n      this.hideMenu();\n    } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n      this.hideMenu();\n    }\n  }\n\n  /** update latest view state from datepicker-header */\n  private _handleViewChanged(event: CustomEvent<string>) {\n    this.view = event.detail as ViewEnum;\n  }\n\n  private _handleDateChanged(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private _handleFocusDateChanged(event: CustomEvent<Date>) {\n    this.focusedDate = event.detail;\n  }\n\n  private _handleSelectMonth(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n\n  private _handleSelectYear(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private async _handleInvalidInput() {\n    this.selectedDateRange = [];\n    this.displayDate = this.initialDisplayDate;\n    this.invalid = true;\n    this._manageInternalsBadInput();\n  }\n  private async _handleEmptyInput() {\n    this._manageEmptyInput();\n  }\n  private async _resetDatepicker() {\n    this.displayDate = this.initialDisplayDate;\n    this.selectedDateRange = [];\n    this.value = \"\";\n    this.view = \"days\";\n    const input = await this.datepickerInputAsync;\n    input.setInvalid(false);\n    input.destroyInputMask();\n    await input.applyInputMask();\n\n    this._mixinResetValidity(input);\n    if (this.isValueEmpty() && this.required) {\n      this._handleEmptyInput();\n    }\n  }\n\n  private _manageInternalsBadInput() {\n    this._mixinSetValidity(\n      {\n        badInput: true\n      },\n      \"Invalid date input\",\n      this.datepickerInput\n    );\n  }\n  /**\n   * Even though element internals handles the required constraint validation. This custom one is still needed as\n   * datepicker input has a special case where the default input mask \"DD/MM/YYYY\" means an empty input.\n   * However, the required constraint validation sees \"DD/MM/YYYY\" as a non-empty input.\n   */\n  private _manageEmptyInput() {\n    this._mixinSetValidity(\n      {\n        valueMissing: true\n      },\n      \"Please fill in this field\",\n      this.datepickerInput\n    );\n  }\n\n  /**\n   * Called when a valid date is entered via input or selected by calendar\n   * 1. sets validity state to valid\n   * 2. updates invalid prop\n   * 3. sets the form value of datepicker\n   */\n  private _manageInternalsValid() {\n    this._mixinSetValidity({});\n    this.invalid = this.datepickerInput.invalid = false;\n    this._mixinSetFormValue();\n  }\n\n  /**\n   * Handles the form \"reset\" event\n   */\n  private async _mixinResetFormControl() {\n    this._resetDatepicker();\n  }\n  private async _handleInputMaskChange(e: CustomEvent) {\n    this.value = e.detail;\n\n    if (this.isValueEmpty()) {\n      this._resetDatepicker();\n    }\n  }\n\n  private _dialogAriaLabels = {\n    days: \"Choose date\",\n    months: \"Choose month\",\n    years: \"Choose year\"\n  };\n\n  render() {\n    return html`\n      <div class=\"datepicker-container\">\n        <sgds-datepicker-input\n          .value=${live(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          placeholder=${this.mode === \"single\" ? \"DD/MM/YYYY\" : \"DD/MM/YYYY - DD/MM/YYYY\"}\n          mode=${this.mode}\n          invalidFeedback=${ifDefined(this.invalidFeedback ? this.invalidFeedback : this._mixinGetValidationMessage())}\n          @sgds-mask-input-change=${this._handleInputMaskChange}\n          @sgds-invalid-input=${this._handleInvalidInput}\n          minDate=${this.minDate}\n          maxDate=${this.maxDate}\n          label=${this.label}\n          hintText=${this.hintText}\n          name=${this.name}\n          ?invalid=${this.invalid}\n          hasFeedback=${ifDefined(this.hasFeedback ? \"both\" : undefined)}\n        >\n        </sgds-datepicker-input>\n        <sgds-icon-button\n          ${ref(this.myDropdown)}\n          role=\"button\"\n          class=${classMap({\n            \"calendar-btn\": true,\n            \"with-hint-text\": this.hintText || this.invalid,\n            \"with-label\": this.label\n          })}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"dialog\"\n          aria-controls=${this.dropdownMenuId}\n          @click=${() => this.toggleMenu()}\n          ariaLabel=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n          ?disabled=${this.disabled}\n          variant=\"outline\"\n          name=\"calendar\"\n        >\n        </sgds-icon-button>\n        <ul\n          id=${this.dropdownMenuId}\n          class=\"sgds datepicker dropdown-menu\"\n          role=\"dialog\"\n          aria-label=${this._dialogAriaLabels[this.view]}\n          @click=${(event: MouseEvent) => event.stopPropagation()}\n        >\n          <sgds-datepicker-header\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .focusedDate=${this.focusedDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-header>\n          <sgds-datepicker-calendar\n            .show=${this.menuIsOpen}\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .mode=${this.mode}\n            minDate=${this.minDate}\n            maxDate=${this.maxDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-calendar>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDatepicker;\n"],"names":["SgdsFormValidatorMixin","DropdownElement","format","DATE_PATTERNS","setTimeToNoon","parse","html","live","ifDefined","ref","classMap","dropdownMenuStyle","datepickerStyle","DatepickerInput","DatepickerCalendar","DatepickerHeader","SgdsButton","SgdsIconButton","__decorate","property","state","queryAsync","query","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-datepicker.cjs.js","sources":["../../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { format, parse } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { type SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport datepickerStyle from \"./datepicker.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\n\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\n/**\n * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input\n *\n * @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value\n *\n * @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n */\nexport class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) implements SgdsFormControl {\n  static styles = [...DropdownElement.styles, dropdownMenuStyle, datepickerStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-datepicker-input\": DatepickerInput,\n    \"sgds-datepicker-calendar\": DatepickerCalendar,\n    \"sgds-datepicker-header\": DatepickerHeader,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  /** When true, adds required attribute to input element */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**The datepicker input's name attribute */\n  @property({ reflect: true }) name: string;\n  /** When true, adds disabled attribute to input and button element */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.\n   * Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode\n   * For example, `value=\"22/12/2023\"` for single mode or `value=\"22/12/2023 - 25/12/2023\"` for range mode\n   */\n  @property({ type: String, reflect: true }) value = \"\";\n\n  /**\n   * @deprecated since v3.1.1 in favour of `value`.\n   * The initial value of DatePicker on first load for single &\n   * range mode as array of string. eg.'[\"22/12/2023\"]' for single &\n   * '[\"22/12/2023\",\"25/12/2023\"]' for range respectively\n   * */\n  @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n  private dateFormat = \"DD/MM/YYYY\";\n\n  /** ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) minDate = \"\";\n\n  /** ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) maxDate = \"\";\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  /**Feedback text for error state when date input is invalid */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Allows invalidFeedback and invalid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The datepicker input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The datepicker input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: \"up\" | \"down\" = \"down\";\n\n  /** Provides the date context for Calendar to present the appropriate view. Defaults to today's date */\n  @property({ attribute: false }) displayDate: Date;\n\n  /**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\n  /**@internal */\n  @state() invalid = false;\n\n  @state()\n  private view: ViewEnum = \"days\";\n\n  @state() private selectedDateRange: Date[] = [];\n\n  @state() private focusedDate: Date;\n\n  @state() private focusedTabIndex = 3;\n\n  private isValueEmpty() {\n    return this.value === \"\" || this.value === \"DD/MM/YYYY\" || this.value === \"DD/MM/YYYY - DD/MM/YYYY\";\n  }\n\n  private initialDisplayDate: Date = new Date();\n\n  @queryAsync(\"sgds-datepicker-calendar\")\n  private calendar: Promise<DatepickerCalendar>;\n\n  @queryAsync(\"sgds-datepicker-input\")\n  private datepickerInputAsync: Promise<DatepickerInput>;\n\n  @query(\"sgds-datepicker-input\")\n  private datepickerInput: DatepickerInput;\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  /**\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  async connectedCallback() {\n    super.connectedCallback();\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 8]\n        }\n      }\n    ];\n    this.addEventListener(\"sgds-view\", this._handleViewChanged);\n    this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n    this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n    this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n    this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n    this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n    this.addEventListener(\"sgds-selectdates-input\", this._handleSelectDatesInput);\n    this.addEventListener(\"sgds-empty-input\", this._handleEmptyInput);\n    this.addEventListener(\"keydown\", this._handleTab);\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n    this.addEventListener(\"sgds-show\", this._handleOpenMenu);\n    this.addEventListener(\"blur\", this._mixinCheckValidity);\n\n    this.initialValue = this.value ? this.value.split(\" - \").map(v => v.trim()) : this.initialValue;\n    this.initialDisplayDate = this.displayDate || new Date();\n    if (this.initialValue && this.initialValue.length > 0) {\n      // Validate initialValue against the dateFormat regex\n      const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n      // const startDateString = this.initialValue[0];\n      const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n      if (invalidDates.length > 0) {\n        return console.error(\"Invalid date format in initialValue:\", invalidDates);\n      } else {\n        const initialSelectedDates = this.initialValue.map(v =>\n          setTimeToNoon(parse(v, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n        );\n        this._handleSelectDates(initialSelectedDates);\n      }\n    } else {\n      this.displayDate = this.initialDisplayDate;\n    }\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      const input = await this.datepickerInputAsync;\n      this.showMenu();\n      const cal = await this.calendar;\n      cal.focusOnCalendar(input);\n    }\n  }\n\n  /** @internal */\n  private _getDateFormatRegex(): string {\n    // validate date strings and adhere to the specified date format\n    return (\n      this.dateFormat\n        // Replace any special characters with their escaped version using \"\\\\$&\"\n        .replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")\n        // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n        .replace(\"MM\", \"\\\\d{2}\")\n        // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n        .replace(\"DD\", \"\\\\d{2}\")\n        // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n        .replace(\"YYYY\", \"\\\\d{4}\")\n        // Replace '/' with '\\\\/', which matches the forward slash character\n        .replace(\"/\", \"\\\\/\")\n    );\n  }\n  private _handleTab(event: KeyboardEvent) {\n    if (!this.menuIsOpen) {\n      return;\n    }\n    const tabIndexArray = Array(4);\n    if (event.shiftKey && event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n    } else if (event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change-date\");\n  }\n\n  private async _handleCloseMenu() {\n    //return focus to input when menu closes\n    const input = await this.datepickerInputAsync;\n    input.focus();\n\n    if (this.selectedDateRange.length === 0) {\n      this.displayDate = this.initialDisplayDate;\n    } else {\n      const selectedDatesLength = this.selectedDateRange.length;\n      this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n      const calendar = await this.calendar;\n      calendar._updateFocusedDate();\n    }\n  }\n  private async _handleOpenMenu() {\n    const cal = await this.calendar;\n    const input = await this.datepickerInputAsync;\n    cal.focusOnCalendar(input);\n  }\n\n  private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n    if (!startDate && !endDate) return this.value;\n    const formatDate = (date: Date) => format(date, DATE_PATTERNS[dateFormat].fnsPattern);\n    switch (this.mode) {\n      case \"single\": {\n        if (startDate) {\n          this.value = formatDate(startDate);\n        }\n        break;\n      }\n      case \"range\": {\n        if (startDate && endDate) {\n          this.value = `${formatDate(startDate)} - ${formatDate(endDate)}`;\n        }\n        if (startDate && !endDate) {\n          this.value = `${formatDate(startDate)} - ${this.dateFormat}`;\n        }\n        break;\n      }\n    }\n    return this.value;\n  };\n  private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n    this._handleSelectDates(event.detail);\n  }\n  private async _handleSelectDates(newSelectedDates: Date[]) {\n    newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n    this.displayDate = newSelectedDates[0];\n    this.focusedDate = newSelectedDates[0];\n    this.selectedDateRange = newSelectedDates;\n    // Get the formattedDate value for the selected dates\n    const formattedDate = this._makeInputValueString(\n      this.selectedDateRange[0],\n      this.selectedDateRange[1],\n      this.dateFormat\n    );\n\n    // Set formattedDate value as the new value for sgds-input\n    this.value = formattedDate;\n    const input = await this.datepickerInputAsync;\n    input.updateMaskValue();\n    this._manageInternalsValid();\n  }\n\n  private async _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n    await this._handleSelectDates(event.detail);\n\n    if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n      this.hideMenu();\n    } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n      this.hideMenu();\n    }\n  }\n\n  /** update latest view state from datepicker-header */\n  private _handleViewChanged(event: CustomEvent<string>) {\n    this.view = event.detail as ViewEnum;\n  }\n\n  private _handleDateChanged(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private _handleFocusDateChanged(event: CustomEvent<Date>) {\n    this.focusedDate = event.detail;\n  }\n\n  private _handleSelectMonth(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n\n  private _handleSelectYear(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private async _handleInvalidInput() {\n    this.selectedDateRange = [];\n    this.displayDate = this.initialDisplayDate;\n    this.invalid = true;\n    this._manageInternalsBadInput();\n  }\n  private async _handleEmptyInput() {\n    if (this.required) {\n      this._manageEmptyInput();\n    }\n    return;\n  }\n  private async _resetDatepicker(resetValue = \"\") {\n    this.displayDate = this.initialDisplayDate;\n    this.selectedDateRange = [];\n    this.value = resetValue;\n    this.view = \"days\";\n    const input = await this.datepickerInputAsync;\n    input.setInvalid(false);\n    input.destroyInputMask();\n    await input.applyInputMask();\n\n    this._mixinResetValidity(input);\n    if (this.isValueEmpty()) {\n      this._handleEmptyInput();\n    }\n  }\n\n  private _manageInternalsBadInput() {\n    this._mixinSetValidity(\n      {\n        badInput: true\n      },\n      \"Invalid date input\",\n      this.datepickerInput\n    );\n  }\n  /**\n   * Even though element internals handles the required constraint validation. This custom one is still needed as\n   * datepicker input has a special case where the default input mask \"DD/MM/YYYY\" means an empty input.\n   * However, the required constraint validation sees \"DD/MM/YYYY\" as a non-empty input.\n   */\n  private _manageEmptyInput() {\n    this._mixinSetValidity(\n      {\n        valueMissing: true\n      },\n      \"Please fill in this field\",\n      this.datepickerInput\n    );\n  }\n\n  /**\n   * Called when a valid date is entered via input or selected by calendar\n   * 1. sets validity state to valid\n   * 2. updates invalid prop\n   * 3. sets the form value of datepicker\n   */\n  private _manageInternalsValid() {\n    this._mixinSetValidity({});\n    this.invalid = this.datepickerInput.invalid = false;\n    this._mixinSetFormValue();\n  }\n\n  /**\n   * Handles the form \"reset\" event\n   */\n  private async _mixinResetFormControl() {\n    this._resetDatepicker(this.defaultValue);\n  }\n  private async _handleInputMaskChange(e: CustomEvent) {\n    this.value = e.detail;\n\n    if (this.isValueEmpty()) {\n      this._resetDatepicker();\n    }\n  }\n\n  private _dialogAriaLabels = {\n    days: \"Choose date\",\n    months: \"Choose month\",\n    years: \"Choose year\"\n  };\n\n  render() {\n    return html`\n      <div class=\"datepicker-container\">\n        <sgds-datepicker-input\n          .value=${live(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          placeholder=${this.mode === \"single\" ? \"DD/MM/YYYY\" : \"DD/MM/YYYY - DD/MM/YYYY\"}\n          mode=${this.mode}\n          invalidFeedback=${ifDefined(this.invalidFeedback ? this.invalidFeedback : this._mixinGetValidationMessage())}\n          @sgds-mask-input-change=${this._handleInputMaskChange}\n          @sgds-invalid-input=${this._handleInvalidInput}\n          minDate=${this.minDate}\n          maxDate=${this.maxDate}\n          label=${this.label}\n          hintText=${this.hintText}\n          name=${this.name}\n          ?invalid=${this.invalid}\n          hasFeedback=${ifDefined(this.hasFeedback ? \"both\" : undefined)}\n        >\n        </sgds-datepicker-input>\n        <sgds-icon-button\n          ${ref(this.myDropdown)}\n          role=\"button\"\n          class=${classMap({\n            \"calendar-btn\": true,\n            \"with-hint-text\": this.hintText || this.invalid,\n            \"with-label\": this.label\n          })}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"dialog\"\n          aria-controls=${this.dropdownMenuId}\n          @click=${() => this.toggleMenu()}\n          ariaLabel=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n          ?disabled=${this.disabled}\n          variant=\"outline\"\n          name=\"calendar\"\n        >\n        </sgds-icon-button>\n        <ul\n          id=${this.dropdownMenuId}\n          class=\"sgds datepicker dropdown-menu\"\n          role=\"dialog\"\n          aria-label=${this._dialogAriaLabels[this.view]}\n          @click=${(event: MouseEvent) => event.stopPropagation()}\n        >\n          <sgds-datepicker-header\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .focusedDate=${this.focusedDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-header>\n          <sgds-datepicker-calendar\n            .show=${this.menuIsOpen}\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .mode=${this.mode}\n            minDate=${this.minDate}\n            maxDate=${this.maxDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-calendar>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDatepicker;\n"],"names":["SgdsFormValidatorMixin","DropdownElement","format","DATE_PATTERNS","setTimeToNoon","parse","html","live","ifDefined","ref","classMap","dropdownMenuStyle","datepickerStyle","DatepickerInput","DatepickerCalendar","DatepickerHeader","SgdsButton","SgdsIconButton","__decorate","property","defaultValue","state","queryAsync","query","watch"],"mappings":"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"}

package/react/components/Datepicker/sgds-datepicker.js

@@ -18,6 +18,7 @@ import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
 import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { defaultValue } from '../../utils/defaultvalue.js';
 
 /**
  * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input
@@ -35,7 +36,17 @@ class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
         this.required = false;
         /** When true, adds disabled attribute to input and button element */
         this.disabled = false;
-        /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'["22/12/2023"]' for single & '["22/12/2023","25/12/2023"]' for range respectively  */
+        /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.
+         * Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode
+         * For example, `value="22/12/2023"` for single mode or `value="22/12/2023 - 25/12/2023"` for range mode
+         */
+        this.value = "";
+        /**
+         * @deprecated since v3.1.1 in favour of `value`.
+         * The initial value of DatePicker on first load for single &
+         * range mode as array of string. eg.'["22/12/2023"]' for single &
+         * '["22/12/2023","25/12/2023"]' for range respectively
+         * */
         this.initialValue = [];
         this.dateFormat = "DD/MM/YYYY";
         /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
@@ -54,8 +65,8 @@ class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
         this.noFlip = false;
         /** The drop position of menu relative to the toggle button */
         this.drop = "down";
-        /**@internal */
-        this.value = "";
+        /**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. */
+        this.defaultValue = "";
         /**@internal */
         this.invalid = false;
         this.view = "days";
@@ -141,6 +152,7 @@ class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
         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(v => v.trim()) : this.initialValue;
         this.initialDisplayDate = this.displayDate || new Date();
         if (this.initialValue && this.initialValue.length > 0) {
             // Validate initialValue against the dateFormat regex
@@ -267,19 +279,22 @@ class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
         this._manageInternalsBadInput();
     }
     async _handleEmptyInput() {
-        this._manageEmptyInput();
+        if (this.required) {
+            this._manageEmptyInput();
+        }
+        return;
     }
-    async _resetDatepicker() {
+    async _resetDatepicker(resetValue = "") {
         this.displayDate = this.initialDisplayDate;
         this.selectedDateRange = [];
-        this.value = "";
+        this.value = resetValue;
         this.view = "days";
         const input = await this.datepickerInputAsync;
         input.setInvalid(false);
         input.destroyInputMask();
         await input.applyInputMask();
         this._mixinResetValidity(input);
-        if (this.isValueEmpty() && this.required) {
+        if (this.isValueEmpty()) {
             this._handleEmptyInput();
         }
     }
@@ -313,7 +328,7 @@ class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) {
      * Handles the form "reset" event
      */
     async _mixinResetFormControl() {
-        this._resetDatepicker();
+        this._resetDatepicker(this.defaultValue);
     }
     async _handleInputMaskChange(e) {
         this.value = e.detail;
@@ -407,6 +422,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDatepicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDatepicker.prototype, "value", void 0);
 __decorate([
     property({ type: Array, reflect: true })
 ], SgdsDatepicker.prototype, "initialValue", void 0);
@@ -441,8 +459,8 @@ __decorate([
     property({ attribute: false })
 ], SgdsDatepicker.prototype, "displayDate", void 0);
 __decorate([
-    state()
-], SgdsDatepicker.prototype, "value", void 0);
+    defaultValue()
+], SgdsDatepicker.prototype, "defaultValue", void 0);
 __decorate([
     state()
 ], SgdsDatepicker.prototype, "invalid", void 0);
@@ -468,7 +486,7 @@ __decorate([
     query("sgds-datepicker-input")
 ], SgdsDatepicker.prototype, "datepickerInput", void 0);
 __decorate([
-    watch("value")
+    watch("value", { waitUntilFirstUpdate: true })
 ], SgdsDatepicker.prototype, "_handleValueChange", null);
 
 export { SgdsDatepicker, SgdsDatepicker as default };