@govtechsg/sgds-web-component 3.21.2-rc.0 → 3.21.2-rc.2

package/components/Datepicker/datepicker-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-header.js","sources":["../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          aria-label=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          aria-label=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["datepickerHeaderStyle"],"mappings":"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"}
+{"version":3,"file":"datepicker-header.js","sources":["../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          .ariaLabel=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          .ariaLabel=${this._ariaLabelForHeaderBtn()}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          .ariaLabel=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["datepickerHeaderStyle"],"mappings":"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"}