@govtechsg/sgds-web-component 1.1.0-rc.0 → 1.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker-header.cjs.js","sources":["../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./datepicker-header.scss\";\nimport { ViewEnum } from \"./types\";\n\nconst 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\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\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    if (this.focusedTabIndex < 3) {\n      const buttonToFocus: HTMLButtonElement = this.shadowRoot.querySelector(\n        `button[tabindex=\"${this.focusedTabIndex}\"]`\n      );\n      buttonToFocus.focus();\n      return;\n    }\n    return;\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  private _renderHeader() {\n    const { view, displayDate } = this;\n    if (view === \"months\") {\n      return html` ${displayDate.getFullYear()} `;\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = this.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 html` ${startLimit} - ${endLimit} `;\n    }\n    return html` ${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()} `;\n  }\n\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\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\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <div class=\"text-center d-flex justify-content-between align-items-center\">\n          <button @click=\"${this.handleClickPrevious}\" tabindex=\"0\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-left\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n              />\n            </svg>\n          </button>\n          <button @click=${this._changeView} tabindex=\"1\">${this._renderHeader()}</button>\n          <button @click=\"${this._handleClickNext}\" tabindex=\"2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-right\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n"],"names":["SgdsElement","html","sanitizedPreviousMonth","sanitizedNextMonth","styles","__decorate","property","watch"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAY,GAAG;IACnB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACX,CAAC;AAEI,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAY,CAAA,YAAA,GAAW,EAAE,CAAC;KA4I3B;IAlIC,4BAA4B,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AAC5B,YAAA,MAAM,aAAa,GAAsB,IAAI,CAAC,UAAU,CAAC,aAAa,CACpE,CAAA,iBAAA,EAAoB,IAAI,CAAC,eAAe,CAAA,EAAA,CAAI,CAC7C,CAAC;YACF,aAAa,CAAC,KAAK,EAAE,CAAC;YACtB,OAAO;SACR;QACD,OAAO;KACR;IAEO,WAAW,GAAA;AACjB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,MAAM;AACT,gBAAA,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;gBACrB,MAAM;AACR,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;gBACpB,MAAM;SAGT;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC/C;IAEO,aAAa,GAAA;AACnB,QAAA,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AACnC,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,OAAOC,QAAI,CAAA,CAAI,CAAA,EAAA,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC;SAC7C;AACD,QAAA,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,MAAM,YAAY,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;YACnD,MAAM,SAAS,GAAG,CAAC,WAAW,GAAG,YAAY,IAAI,EAAE,CAAC;AACpD,YAAA,MAAM,aAAa,GAAG,SAAS,GAAG,CAAC,GAAG,EAAE,GAAG,SAAS,GAAG,SAAS,CAAC;AACjE,YAAA,MAAM,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;YAC/C,MAAM,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,EAAE,GAAG,CAAC,CAAC;AACtD,YAAA,OAAOA,QAAI,CAAA,CAAA,CAAA,EAAI,UAAU,CAAM,GAAA,EAAA,QAAQ,GAAG,CAAC;SAC5C;AACD,QAAA,OAAOA,QAAI,CAAA,CAAA,CAAA,EAAI,YAAY,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC;KACrF;;IAGO,mBAAmB,GAAA;QACzB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AAChD,QAAA,IAAI,cAAc,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;AAC3C,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;SAC9D;AAAM,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAChC,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC;SAC/D;aAAM;AACL;;;;;AAKG;YACH,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,WAAW,CAAC,OAAO,EAAE,EAAE;AACnD,gBAAA,cAAc,GAAGC,2BAAsB,CAAC,WAAW,CAAC,CAAC;aACtD;iBAAM;AACL,gBAAA,cAAc,GAAGA,2BAAsB,CAAC,cAAc,CAAC,CAAC;aACzD;SACF;AACD,QAAA,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;;AAElC,QAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;KACjE;;IAGO,gBAAgB,GAAA;QACtB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AAChD,QAAA,IAAI,cAAc,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;AAE3C,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;SAC9D;AAAM,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAChC,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC;SAC/D;aAAM;;YAEL,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,WAAW,CAAC,OAAO,EAAE,EAAE;AACnD,gBAAA,cAAc,GAAGC,uBAAkB,CAAC,WAAW,CAAC,CAAC;aAClD;iBAAM;AACL,gBAAA,cAAc,GAAGA,uBAAkB,CAAC,cAAc,CAAC,CAAC;aACrD;SACF;AACD,QAAA,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;;AAGlC,QAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;KACjE;IAED,MAAM,GAAA;AACJ,QAAA,OAAOF,QAAI,CAAA,CAAA;;;AAGa,0BAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;;;;;;;;;;;;;;;AAezB,yBAAA,EAAA,IAAI,CAAC,WAAW,CAAA,cAAA,EAAiB,IAAI,CAAC,aAAa,EAAE,CAAA;AACpD,0BAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;;;;;;;;;;;;;;;;KAiB5C,CAAC;KACH;;AArJM,gBAAM,CAAA,MAAA,GAAG,CAACD,sBAAW,CAAC,MAAM,EAAEI,2BAAM,CAA9B,CAAgC;AAI7CC,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACL,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI1BD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,EAAE;AACI,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGfD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,EAAE;AACa,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxBD,gBAAA,CAAA;IADCE,WAAK,CAAC,iBAAiB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAUxD,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,8BAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"datepicker-header.cjs.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 styles from \"./datepicker-header.scss\";\nimport { ViewEnum } from \"./types\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\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    if (this.focusedTabIndex < 3) {\n      const buttonToFocus: HTMLButtonElement = this.shadowRoot.querySelector(\n        `button[tabindex=\"${this.focusedTabIndex}\"]`\n      );\n      buttonToFocus.focus();\n    }\n    return;\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  private _renderHeader() {\n    const { view, displayDate } = this;\n    if (view === \"months\") {\n      return html` ${displayDate.getFullYear()} `;\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = this.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 html` ${startLimit} - ${endLimit} `;\n    }\n    return html`${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\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  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <div class=\"text-center d-flex justify-content-between align-items-center\">\n          <button\n            @click=\"${this.handleClickPrevious}\"\n            tabindex=\"0\"\n            class=\"${classMap({ invisible: this._removeCaret() })}\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-left\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n              />\n            </svg>\n          </button>\n          <button @click=${this._changeView} tabindex=\"1\">${this._renderHeader()}</button>\n          <button @click=\"${this._handleClickNext}\" tabindex=\"2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-right\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </button>\n        </div>\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":["SgdsElement","html","sanitizedPreviousMonth","sanitizedNextMonth","isEqual","isBefore","classMap","styles","__decorate","property","watch"],"mappings":"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"}

package/components/Datepicker/datepicker-header.d.ts

@@ -19,6 +19,8 @@ export declare class DatepickerHeader extends SgdsElement {
     private handleClickPrevious;
     /** @internal */
     private _handleClickNext;
+    private _removeCaret;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default DatepickerHeader;
+export declare const MONTH_LABELS: string[];

package/components/Datepicker/datepicker-header.js

@@ -1,25 +1,13 @@
 import { __decorate } from 'tslib';
+import { isEqual, isBefore } from 'date-fns';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { sanitizedPreviousMonth, sanitizedNextMonth } from '../../utils/time.js';
 import { watch } from '../../utils/watch.js';
 import css_248z from './datepicker-header2.js';
 
-const MONTH_LABELS = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December"
-];
 class DatepickerHeader extends SgdsElement {
     constructor() {
         super(...arguments);
@@ -30,7 +18,6 @@ class DatepickerHeader extends SgdsElement {
         if (this.focusedTabIndex < 3) {
             const buttonToFocus = this.shadowRoot.querySelector(`button[tabindex="${this.focusedTabIndex}"]`);
             buttonToFocus.focus();
-            return;
         }
         return;
     }
@@ -59,7 +46,7 @@ class DatepickerHeader extends SgdsElement {
             const endLimit = displayYear - yearsPosition + 12 - 1;
             return html ` ${startLimit} - ${endLimit} `;
         }
-        return html ` ${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()} `;
+        return html `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;
     }
     /** @internal */
     handleClickPrevious() {
@@ -112,11 +99,27 @@ class DatepickerHeader extends SgdsElement {
         //emit event to render correct view
         this.emit("sgds-change-calendar", { detail: this.displayDate });
     }
+    _removeCaret() {
+        const displayYear = this.displayDate.getFullYear();
+        const displayMonth = this.displayDate.getMonth();
+        const displayMonthYear = new Date(displayYear, displayMonth);
+        if (this.view === "months") {
+            return displayYear <= 1900;
+        }
+        if (this.view === "years") {
+            return displayYear < 1904;
+        }
+        return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));
+    }
     render() {
         return html `
       <div class="datepicker-header dropdown-header" role="heading">
         <div class="text-center d-flex justify-content-between align-items-center">
-          <button @click="${this.handleClickPrevious}" tabindex="0">
+          <button
+            @click="${this.handleClickPrevious}"
+            tabindex="0"
+            class="${classMap({ invisible: this._removeCaret() })}"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -171,6 +174,20 @@ __decorate([
 __decorate([
     watch("focusedTabIndex", { waitUntilFirstUpdate: true })
 ], DatepickerHeader.prototype, "_handleFocusedTabIndexChange", null);
+const MONTH_LABELS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+];
 
-export { DatepickerHeader, DatepickerHeader as default };
+export { DatepickerHeader, MONTH_LABELS, DatepickerHeader as default };
 //# sourceMappingURL=datepicker-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker-header.js","sources":["../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./datepicker-header.scss\";\nimport { ViewEnum } from \"./types\";\n\nconst 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\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\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    if (this.focusedTabIndex < 3) {\n      const buttonToFocus: HTMLButtonElement = this.shadowRoot.querySelector(\n        `button[tabindex=\"${this.focusedTabIndex}\"]`\n      );\n      buttonToFocus.focus();\n      return;\n    }\n    return;\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  private _renderHeader() {\n    const { view, displayDate } = this;\n    if (view === \"months\") {\n      return html` ${displayDate.getFullYear()} `;\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = this.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 html` ${startLimit} - ${endLimit} `;\n    }\n    return html` ${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()} `;\n  }\n\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\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\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <div class=\"text-center d-flex justify-content-between align-items-center\">\n          <button @click=\"${this.handleClickPrevious}\" tabindex=\"0\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-left\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n              />\n            </svg>\n          </button>\n          <button @click=${this._changeView} tabindex=\"1\">${this._renderHeader()}</button>\n          <button @click=\"${this._handleClickNext}\" tabindex=\"2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-right\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n"],"names":["styles"],"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 styles from \"./datepicker-header.scss\";\nimport { ViewEnum } from \"./types\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\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    if (this.focusedTabIndex < 3) {\n      const buttonToFocus: HTMLButtonElement = this.shadowRoot.querySelector(\n        `button[tabindex=\"${this.focusedTabIndex}\"]`\n      );\n      buttonToFocus.focus();\n    }\n    return;\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  private _renderHeader() {\n    const { view, displayDate } = this;\n    if (view === \"months\") {\n      return html` ${displayDate.getFullYear()} `;\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = this.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 html` ${startLimit} - ${endLimit} `;\n    }\n    return html`${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\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  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <div class=\"text-center d-flex justify-content-between align-items-center\">\n          <button\n            @click=\"${this.handleClickPrevious}\"\n            tabindex=\"0\"\n            class=\"${classMap({ invisible: this._removeCaret() })}\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-left\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n              />\n            </svg>\n          </button>\n          <button @click=${this._changeView} tabindex=\"1\">${this._renderHeader()}</button>\n          <button @click=\"${this._handleClickNext}\" tabindex=\"2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-chevron-right\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </button>\n        </div>\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":["styles"],"mappings":"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"}

package/components/Datepicker/datepicker-input.cjs.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var dateFns = require('date-fns');
+var IMask = require('imask');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var time = require('../../utils/time.cjs.js');
+var sgdsInput = require('../Input/sgds-input.cjs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var IMask__default = /*#__PURE__*/_interopDefaultLegacy(IMask);
+
+class DatepickerInput extends sgdsInput.SgdsInput {
+    constructor() {
+        super();
+        /** Date format reflected on input  */
+        this.dateFormat = "DD/MM/YYYY";
+        /** Changes DatePicker to single date selection or range date selection */
+        this.mode = "single";
+        this._validateInput = async () => {
+            const dates = this.mask.value.split(" - ");
+            const noEmptyDates = dates.filter(d => d !== this.dateFormat.toLowerCase());
+            const dateArray = noEmptyDates.map(date => time.setTimeToNoon(dateFns.parse(date, time.DATE_PATTERNS[this.dateFormat].fnsPattern, new Date())));
+            const invalidDates = dateArray.filter(date => !dateFns.isValid(date) ||
+                dateFns.isBefore(date, new Date(0, 0, 1)) ||
+                dateFns.isBefore(date, time.setTimeToNoon(new Date(this.minDate))) ||
+                dateFns.isAfter(date, time.setTimeToNoon(new Date(this.maxDate))));
+            if (invalidDates.length > 0) {
+                this.setInvalid(true);
+                return this.emit("sgds-invalid-input");
+            }
+            if (this.mode === "range" && dateArray.length === 1) {
+                this.setInvalid(true);
+                return this.emit("sgds-invalid-input");
+            }
+            if (invalidDates.length === 0 && dateArray.length > 0) {
+                this.setInvalid(false);
+                return this.emit("sgds-selectdates-input", { detail: dateArray });
+            }
+            if (dateArray.length === 0 && invalidDates.length === 0) {
+                this.setInvalid(false);
+                return this.emit("sgds-empty-input");
+            }
+        };
+        this.inputClasses = `rounded-0 rounded-start`;
+        this.type = "text";
+        this.hasFeedback = true;
+        this._handleValueChange = () => null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("sgds-change", this._validateInput);
+    }
+    async firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this._applyInputMask(this.dateFormat);
+    }
+    async _applyInputMask(dateFormat) {
+        const shadowInput = await this.shadowInput;
+        const imPattern = this.mode === "single" ? time.DATE_PATTERNS[dateFormat].imPattern : time.DATE_PATTERNS[dateFormat].imRangePattern;
+        const blocks = {
+            d: { mask: IMask__default["default"].MaskedRange, placeholderChar: "d", from: 0, to: 9, maxLength: 1 },
+            m: { mask: IMask__default["default"].MaskedRange, placeholderChar: "m", from: 0, to: 9, maxLength: 1 },
+            y: { mask: IMask__default["default"].MaskedRange, placeholderChar: "y", from: 0, to: 9, maxLength: 1 },
+            D: { mask: IMask__default["default"].MaskedRange, placeholderChar: "d", from: 0, to: 9, maxLength: 1 },
+            M: { mask: IMask__default["default"].MaskedRange, placeholderChar: "m", from: 0, to: 9, maxLength: 1 },
+            Y: { mask: IMask__default["default"].MaskedRange, placeholderChar: "y", from: 0, to: 9, maxLength: 1 }
+        };
+        const maskOptions = {
+            mask: imPattern,
+            pattern: imPattern,
+            eager: true,
+            overwrite: true,
+            // define str -> date convertion
+            parse: function (str) {
+                const dates = str.split(" - ");
+                return dates.map(date => dateFns.parse(date, time.DATE_PATTERNS[dateFormat].fnsPattern, new Date()));
+            },
+            format: function (dateArr) {
+                const dateStrings = dateArr.map(date => {
+                    let dayStr, monthStr = "";
+                    const day = date.getDate();
+                    const month = date.getMonth() + 1;
+                    const year = date.getFullYear();
+                    if (day < 10)
+                        dayStr = "0" + day;
+                    if (month < 10)
+                        monthStr = "0" + month;
+                    return [dayStr, monthStr, year].join("/");
+                });
+                return dateStrings.join(" - ");
+            },
+            lazy: false,
+            blocks
+        };
+        this.mask = IMask__default["default"](shadowInput, maskOptions);
+        this.mask.on("accept", () => {
+            this.value = this.mask.masked.value;
+            this.emit("sgds-mask-input-change", { detail: this.value });
+        });
+        /**
+         * Validation after date is complete
+         */
+        this.mask.on("complete", this._validateInput);
+    }
+    updateMaskValue() {
+        var _a;
+        (_a = this.mask) === null || _a === void 0 ? void 0 : _a.updateValue();
+    }
+    destroyInputMask() {
+        var _a;
+        (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    async applyInputMask() {
+        return await this._applyInputMask(this.dateFormat);
+    }
+    render() {
+        return lit.html `
+      ${this._renderLabel()} ${this._renderHintText()}
+      <div class="d-flex">
+        <div class="d-flex flex-column w-100">${this._renderInput()}</div>
+        <slot name="calendar-btn"></slot>
+        <slot name="reset-btn"></slot>
+      </div>
+    `;
+    }
+}
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], DatepickerInput.prototype, "dateFormat", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], DatepickerInput.prototype, "minDate", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], DatepickerInput.prototype, "maxDate", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], DatepickerInput.prototype, "mode", void 0);
+tslib.__decorate([
+    decorators_js.queryAsync("input")
+], DatepickerInput.prototype, "shadowInput", void 0);
+
+exports.DatepickerInput = DatepickerInput;
+exports["default"] = DatepickerInput;
+//# sourceMappingURL=datepicker-input.cjs.js.map

package/components/Datepicker/datepicker-input.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-input.cjs.js","sources":["../../../src/components/Datepicker/datepicker-input.ts"],"sourcesContent":["import { isAfter, isBefore, isValid, parse } from \"date-fns\";\nimport IMask, { InputMask } from \"imask\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { SgdsInput } from \"../Input/sgds-input\";\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\nexport class DatepickerInput extends SgdsInput {\n  /** Date format reflected on input  */\n  @property({ type: String }) dateFormat: 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: string;\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: string;\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  @queryAsync(\"input\")\n  shadowInput: Promise<HTMLInputElement>;\n\n  private mask: InputMask;\n  constructor() {\n    super();\n    this.inputClasses = `rounded-0 rounded-start`;\n    this.type = \"text\";\n    this.hasFeedback = true;\n    this._handleValueChange = () => null;\n  }\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-change\", this._validateInput);\n  }\n\n  async firstUpdated(changes) {\n    super.firstUpdated(changes);\n    this._applyInputMask(this.dateFormat);\n  }\n  private async _applyInputMask(dateFormat: string) {\n    const shadowInput = await this.shadowInput;\n    const imPattern =\n      this.mode === \"single\" ? DATE_PATTERNS[dateFormat].imPattern : DATE_PATTERNS[dateFormat].imRangePattern;\n    const blocks = {\n      d: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      m: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 },\n      D: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      M: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      Y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 }\n    };\n    const maskOptions = {\n      mask: imPattern,\n      pattern: imPattern,\n      eager: true,\n      overwrite: true,\n      // define str -> date convertion\n      parse: function (str: string) {\n        const dates = str.split(\" - \");\n        return dates.map(date => parse(date, DATE_PATTERNS[dateFormat].fnsPattern, new Date()));\n      },\n      format: function (dateArr: Date[]) {\n        const dateStrings = dateArr.map(date => {\n          let dayStr: string,\n            monthStr = \"\";\n          const day = date.getDate();\n          const month = date.getMonth() + 1;\n          const year = date.getFullYear();\n\n          if (day < 10) dayStr = \"0\" + day;\n          if (month < 10) monthStr = \"0\" + month;\n\n          return [dayStr, monthStr, year].join(\"/\");\n        });\n        return dateStrings.join(\" - \");\n      },\n      lazy: false,\n      blocks\n    };\n\n    this.mask = IMask(shadowInput, maskOptions);\n    this.mask.on(\"accept\", () => {\n      this.value = this.mask.masked.value;\n      this.emit(\"sgds-mask-input-change\", { detail: this.value });\n    });\n    /**\n     * Validation after date is complete\n     */\n    this.mask.on(\"complete\", this._validateInput);\n  }\n  public updateMaskValue() {\n    this.mask?.updateValue();\n  }\n  private _validateInput = async () => {\n    const dates = this.mask.value.split(\" - \");\n    const noEmptyDates = dates.filter(d => d !== this.dateFormat.toLowerCase());\n    const dateArray: Date[] | string[] = noEmptyDates.map(date =>\n      setTimeToNoon(parse(date, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n    );\n    const invalidDates = dateArray.filter(\n      date =>\n        !isValid(date) ||\n        isBefore(date, new Date(0, 0, 1)) ||\n        isBefore(date, setTimeToNoon(new Date(this.minDate))) ||\n        isAfter(date, setTimeToNoon(new Date(this.maxDate)))\n    );\n\n    if (invalidDates.length > 0) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (this.mode === \"range\" && dateArray.length === 1) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (invalidDates.length === 0 && dateArray.length > 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-selectdates-input\", { detail: dateArray });\n    }\n    if (dateArray.length === 0 && invalidDates.length === 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-empty-input\");\n    }\n  };\n\n  public destroyInputMask() {\n    this.mask?.destroy();\n  }\n  public async applyInputMask() {\n    return await this._applyInputMask(this.dateFormat);\n  }\n\n  render() {\n    return html`\n      ${this._renderLabel()} ${this._renderHintText()}\n      <div class=\"d-flex\">\n        <div class=\"d-flex flex-column w-100\">${this._renderInput()}</div>\n        <slot name=\"calendar-btn\"></slot>\n        <slot name=\"reset-btn\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerInput;\n"],"names":["SgdsInput","setTimeToNoon","parse","DATE_PATTERNS","isValid","isBefore","isAfter","IMask","html","__decorate","property","queryAsync"],"mappings":"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"}

package/components/Datepicker/datepicker-input.d.ts

@@ -0,0 +1,24 @@
+import { SgdsInput } from "../Input/sgds-input";
+export type DateFormat = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD";
+export declare class DatepickerInput extends SgdsInput {
+    /** Date format reflected on input  */
+    dateFormat: DateFormat;
+    /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+    minDate: string;
+    /** ISO date string to set the highest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+    maxDate: string;
+    /** Changes DatePicker to single date selection or range date selection */
+    mode: "single" | "range";
+    shadowInput: Promise<HTMLInputElement>;
+    private mask;
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(changes: any): Promise<void>;
+    private _applyInputMask;
+    updateMaskValue(): void;
+    private _validateInput;
+    destroyInputMask(): void;
+    applyInputMask(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default DatepickerInput;

package/components/Datepicker/datepicker-input.js

@@ -0,0 +1,141 @@
+import { __decorate } from 'tslib';
+import { parse, isValid, isBefore, isAfter } from 'date-fns';
+import IMask from 'imask';
+import { html } from 'lit';
+import { property, queryAsync } from 'lit/decorators.js';
+import { setTimeToNoon, DATE_PATTERNS } from '../../utils/time.js';
+import { SgdsInput } from '../Input/sgds-input.js';
+
+class DatepickerInput extends SgdsInput {
+    constructor() {
+        super();
+        /** Date format reflected on input  */
+        this.dateFormat = "DD/MM/YYYY";
+        /** Changes DatePicker to single date selection or range date selection */
+        this.mode = "single";
+        this._validateInput = async () => {
+            const dates = this.mask.value.split(" - ");
+            const noEmptyDates = dates.filter(d => d !== this.dateFormat.toLowerCase());
+            const dateArray = noEmptyDates.map(date => setTimeToNoon(parse(date, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date())));
+            const invalidDates = dateArray.filter(date => !isValid(date) ||
+                isBefore(date, new Date(0, 0, 1)) ||
+                isBefore(date, setTimeToNoon(new Date(this.minDate))) ||
+                isAfter(date, setTimeToNoon(new Date(this.maxDate))));
+            if (invalidDates.length > 0) {
+                this.setInvalid(true);
+                return this.emit("sgds-invalid-input");
+            }
+            if (this.mode === "range" && dateArray.length === 1) {
+                this.setInvalid(true);
+                return this.emit("sgds-invalid-input");
+            }
+            if (invalidDates.length === 0 && dateArray.length > 0) {
+                this.setInvalid(false);
+                return this.emit("sgds-selectdates-input", { detail: dateArray });
+            }
+            if (dateArray.length === 0 && invalidDates.length === 0) {
+                this.setInvalid(false);
+                return this.emit("sgds-empty-input");
+            }
+        };
+        this.inputClasses = `rounded-0 rounded-start`;
+        this.type = "text";
+        this.hasFeedback = true;
+        this._handleValueChange = () => null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("sgds-change", this._validateInput);
+    }
+    async firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this._applyInputMask(this.dateFormat);
+    }
+    async _applyInputMask(dateFormat) {
+        const shadowInput = await this.shadowInput;
+        const imPattern = this.mode === "single" ? DATE_PATTERNS[dateFormat].imPattern : DATE_PATTERNS[dateFormat].imRangePattern;
+        const blocks = {
+            d: { mask: IMask.MaskedRange, placeholderChar: "d", from: 0, to: 9, maxLength: 1 },
+            m: { mask: IMask.MaskedRange, placeholderChar: "m", from: 0, to: 9, maxLength: 1 },
+            y: { mask: IMask.MaskedRange, placeholderChar: "y", from: 0, to: 9, maxLength: 1 },
+            D: { mask: IMask.MaskedRange, placeholderChar: "d", from: 0, to: 9, maxLength: 1 },
+            M: { mask: IMask.MaskedRange, placeholderChar: "m", from: 0, to: 9, maxLength: 1 },
+            Y: { mask: IMask.MaskedRange, placeholderChar: "y", from: 0, to: 9, maxLength: 1 }
+        };
+        const maskOptions = {
+            mask: imPattern,
+            pattern: imPattern,
+            eager: true,
+            overwrite: true,
+            // define str -> date convertion
+            parse: function (str) {
+                const dates = str.split(" - ");
+                return dates.map(date => parse(date, DATE_PATTERNS[dateFormat].fnsPattern, new Date()));
+            },
+            format: function (dateArr) {
+                const dateStrings = dateArr.map(date => {
+                    let dayStr, monthStr = "";
+                    const day = date.getDate();
+                    const month = date.getMonth() + 1;
+                    const year = date.getFullYear();
+                    if (day < 10)
+                        dayStr = "0" + day;
+                    if (month < 10)
+                        monthStr = "0" + month;
+                    return [dayStr, monthStr, year].join("/");
+                });
+                return dateStrings.join(" - ");
+            },
+            lazy: false,
+            blocks
+        };
+        this.mask = IMask(shadowInput, maskOptions);
+        this.mask.on("accept", () => {
+            this.value = this.mask.masked.value;
+            this.emit("sgds-mask-input-change", { detail: this.value });
+        });
+        /**
+         * Validation after date is complete
+         */
+        this.mask.on("complete", this._validateInput);
+    }
+    updateMaskValue() {
+        var _a;
+        (_a = this.mask) === null || _a === void 0 ? void 0 : _a.updateValue();
+    }
+    destroyInputMask() {
+        var _a;
+        (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    async applyInputMask() {
+        return await this._applyInputMask(this.dateFormat);
+    }
+    render() {
+        return html `
+      ${this._renderLabel()} ${this._renderHintText()}
+      <div class="d-flex">
+        <div class="d-flex flex-column w-100">${this._renderInput()}</div>
+        <slot name="calendar-btn"></slot>
+        <slot name="reset-btn"></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], DatepickerInput.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String })
+], DatepickerInput.prototype, "minDate", void 0);
+__decorate([
+    property({ type: String })
+], DatepickerInput.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], DatepickerInput.prototype, "mode", void 0);
+__decorate([
+    queryAsync("input")
+], DatepickerInput.prototype, "shadowInput", void 0);
+
+export { DatepickerInput, DatepickerInput as default };
+//# sourceMappingURL=datepicker-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-input.js","sources":["../../../src/components/Datepicker/datepicker-input.ts"],"sourcesContent":["import { isAfter, isBefore, isValid, parse } from \"date-fns\";\nimport IMask, { InputMask } from \"imask\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { SgdsInput } from \"../Input/sgds-input\";\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\nexport class DatepickerInput extends SgdsInput {\n  /** Date format reflected on input  */\n  @property({ type: String }) dateFormat: 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: string;\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: string;\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  @queryAsync(\"input\")\n  shadowInput: Promise<HTMLInputElement>;\n\n  private mask: InputMask;\n  constructor() {\n    super();\n    this.inputClasses = `rounded-0 rounded-start`;\n    this.type = \"text\";\n    this.hasFeedback = true;\n    this._handleValueChange = () => null;\n  }\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-change\", this._validateInput);\n  }\n\n  async firstUpdated(changes) {\n    super.firstUpdated(changes);\n    this._applyInputMask(this.dateFormat);\n  }\n  private async _applyInputMask(dateFormat: string) {\n    const shadowInput = await this.shadowInput;\n    const imPattern =\n      this.mode === \"single\" ? DATE_PATTERNS[dateFormat].imPattern : DATE_PATTERNS[dateFormat].imRangePattern;\n    const blocks = {\n      d: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      m: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 },\n      D: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      M: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      Y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 }\n    };\n    const maskOptions = {\n      mask: imPattern,\n      pattern: imPattern,\n      eager: true,\n      overwrite: true,\n      // define str -> date convertion\n      parse: function (str: string) {\n        const dates = str.split(\" - \");\n        return dates.map(date => parse(date, DATE_PATTERNS[dateFormat].fnsPattern, new Date()));\n      },\n      format: function (dateArr: Date[]) {\n        const dateStrings = dateArr.map(date => {\n          let dayStr: string,\n            monthStr = \"\";\n          const day = date.getDate();\n          const month = date.getMonth() + 1;\n          const year = date.getFullYear();\n\n          if (day < 10) dayStr = \"0\" + day;\n          if (month < 10) monthStr = \"0\" + month;\n\n          return [dayStr, monthStr, year].join(\"/\");\n        });\n        return dateStrings.join(\" - \");\n      },\n      lazy: false,\n      blocks\n    };\n\n    this.mask = IMask(shadowInput, maskOptions);\n    this.mask.on(\"accept\", () => {\n      this.value = this.mask.masked.value;\n      this.emit(\"sgds-mask-input-change\", { detail: this.value });\n    });\n    /**\n     * Validation after date is complete\n     */\n    this.mask.on(\"complete\", this._validateInput);\n  }\n  public updateMaskValue() {\n    this.mask?.updateValue();\n  }\n  private _validateInput = async () => {\n    const dates = this.mask.value.split(\" - \");\n    const noEmptyDates = dates.filter(d => d !== this.dateFormat.toLowerCase());\n    const dateArray: Date[] | string[] = noEmptyDates.map(date =>\n      setTimeToNoon(parse(date, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n    );\n    const invalidDates = dateArray.filter(\n      date =>\n        !isValid(date) ||\n        isBefore(date, new Date(0, 0, 1)) ||\n        isBefore(date, setTimeToNoon(new Date(this.minDate))) ||\n        isAfter(date, setTimeToNoon(new Date(this.maxDate)))\n    );\n\n    if (invalidDates.length > 0) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (this.mode === \"range\" && dateArray.length === 1) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (invalidDates.length === 0 && dateArray.length > 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-selectdates-input\", { detail: dateArray });\n    }\n    if (dateArray.length === 0 && invalidDates.length === 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-empty-input\");\n    }\n  };\n\n  public destroyInputMask() {\n    this.mask?.destroy();\n  }\n  public async applyInputMask() {\n    return await this._applyInputMask(this.dateFormat);\n  }\n\n  render() {\n    return html`\n      ${this._renderLabel()} ${this._renderHintText()}\n      <div class=\"d-flex\">\n        <div class=\"d-flex flex-column w-100\">${this._renderInput()}</div>\n        <slot name=\"calendar-btn\"></slot>\n        <slot name=\"reset-btn\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerInput;\n"],"names":[],"mappings":"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"}

package/components/Datepicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Datepicker/index.ts"],"sourcesContent":["import { SgdsDatepicker } from \"./sgds-datepicker\";\n\ncustomElements.define(\"sgds-datepicker\", SgdsDatepicker);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-datepicker\": SgdsDatepicker;\n  }\n}\n"],"names":[],"mappings":";;AAEA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Datepicker/index.ts"],"sourcesContent":["import { SgdsDatepicker } from \"./sgds-datepicker\";\n\ncustomElements.define(\"sgds-datepicker\", SgdsDatepicker);\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-datepicker\": SgdsDatepicker;\n  }\n}\n"],"names":[],"mappings":";;AAEA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC"}