@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

package/dist/collection/components/stzh-calendar/stzh-calendar.js

@@ -1,463 +1,463 @@
-import { Host, h } from "@stencil/core";
-import { addDays, startOfWeek, endOfWeek, setMonth, setYear, clamp, inRange, endOfMonth, startOfMonth, printISODate, parseISODate, DaysOfWeek, } from "../../utils/date-utils";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { StzhCalendarMonth } from "./stzh-calendar-month";
-function range(from, to) {
-  var result = [];
-  for (var i = from; i <= to; i++) {
-    result.push(i);
-  }
-  return result;
-}
-const keyCode = {
-  TAB: 9,
-  ESC: 27,
-  SPACE: 32,
-  PAGE_UP: 33,
-  PAGE_DOWN: 34,
-  END: 35,
-  HOME: 36,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-};
-let calendarCounter = 0;
-export class StzhCalendar {
-  constructor() {
-    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
-    this.value = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.min = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.max = "";
-    /**
-     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
-     * Default is Monday.
-     */
-    this.firstDayOfWeek = DaysOfWeek.Monday;
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.isDateDisabled = () => false;
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    // private focusedDayNode: HTMLButtonElement
-    this.initialTouchX = null;
-    this.initialTouchY = null;
-    this.enableActiveFocus = () => {
-      this.activeFocus = true;
-    };
-    this.disableActiveFocus = () => {
-      this.activeFocus = false;
-    };
-    this.handleTouchStart = (event) => {
-      const touch = event.changedTouches[0];
-      this.initialTouchX = touch.pageX;
-      this.initialTouchY = touch.pageY;
-    };
-    // private handleTouchMove = (event: TouchEvent) => {
-    //   event.preventDefault()
-    // }
-    this.handleTouchEnd = (event) => {
-      const touch = event.changedTouches[0];
-      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
-      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
-      const threshold = 70;
-      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
-      if (isHorizontalSwipe) {
-        this.addMonths(distX < 0 ? 1 : -1);
-      }
-      this.initialTouchY = null;
-      this.initialTouchX = null;
-    };
-    this.handleNextMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(1);
-    };
-    this.handlePreviousMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(-1);
-    };
-    this.handleKeyboardNavigation = (event) => {
-      var handled = true;
-      switch (event.keyCode) {
-        case keyCode.RIGHT:
-          this.addDays(1);
-          break;
-        case keyCode.LEFT:
-          this.addDays(-1);
-          break;
-        case keyCode.DOWN:
-          this.addDays(7);
-          break;
-        case keyCode.UP:
-          this.addDays(-7);
-          break;
-        case keyCode.PAGE_UP:
-          if (event.shiftKey) {
-            this.addYears(-1);
-          }
-          else {
-            this.addMonths(-1);
-          }
-          break;
-        case keyCode.PAGE_DOWN:
-          if (event.shiftKey) {
-            this.addYears(1);
-          }
-          else {
-            this.addMonths(1);
-          }
-          break;
-        case keyCode.HOME:
-          this.startOfWeek();
-          break;
-        case keyCode.END:
-          this.endOfWeek();
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.enableActiveFocus();
-      }
-    };
-    this.handleDaySelect = (_event, day) => {
-      const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max));
-      const isAllowed = !this.isDateDisabled(day);
-      if (isInRange && isAllowed) {
-        this.setDate(day);
-        this.stzhChange.emit({
-          component: "stzh-calendar",
-          value: this.value,
-          valueAsDate: day,
-        });
-      }
-      else {
-        // for consistency we should set the focused day in cases where
-        // user has selected a day that has been specifically disallowed
-        this.setFocusedDay(day);
-      }
-    };
-    this.handleMonthSelect = e => {
-      this.setMonth(parseInt(e.target.value, 10));
-    };
-    this.handleYearSelect = e => {
-      this.setYear(parseInt(e.target.value, 10));
-    };
-    this.processFocusedDayNode = (element) => {
-      // this.focusedDayNode = element
-      if (this.activeFocus) {
-        setTimeout(() => element.focus(), 0);
-      }
-    };
-  }
-  createDateFormatters() {
-    if (this.localization) {
-      this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: "numeric", month: "long" });
-    }
-  }
-  valueWatcher(newValue) {
-    if (newValue) {
-      this.setFocusedDay(parseISODate(this.value));
-    }
-    else {
-      this.setFocusedDay(new Date());
-    }
-  }
-  /** Set focused day element by a JS Date object */
-  async setFocusedDay(day) {
-    this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
-  }
-  /** Set value by a JS Date object */
-  async setDate(date) {
-    this.value = printISODate(date);
-  }
-  addDays(days) {
-    this.setFocusedDay(addDays(this.focusedDay, days));
-  }
-  addMonths(months) {
-    this.setMonth(this.focusedDay.getMonth() + months);
-  }
-  addYears(years) {
-    this.setYear(this.focusedDay.getFullYear() + years);
-  }
-  startOfWeek() {
-    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));
-  }
-  endOfWeek() {
-    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
-  }
-  setMonth(month) {
-    const min = setMonth(startOfMonth(this.focusedDay), month);
-    const max = endOfMonth(min);
-    const date = setMonth(this.focusedDay, month);
-    this.setFocusedDay(clamp(date, min, max));
-  }
-  setYear(year) {
-    const min = setYear(startOfMonth(this.focusedDay), year);
-    const max = endOfMonth(min);
-    const date = setYear(this.focusedDay, year);
-    this.setFocusedDay(clamp(date, min, max));
-  }
-  async componentWillLoad() {
-    this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;
-    this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;
-    this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;
-    calendarCounter++;
-    this.valueWatcher(this.value);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'calendar');
-    }
-  }
-  connectedCallback() {
-    this.createDateFormatters();
-  }
-  render() {
-    const valueAsDate = parseISODate(this.value);
-    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
-    const focusedMonth = this.focusedDay.getMonth();
-    const focusedYear = this.focusedDay.getFullYear();
-    const minDate = parseISODate(this.min);
-    const maxDate = parseISODate(this.max);
-    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
-    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10;
-    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10;
-    return (h(Host, null, h("div", { class: {
-        "stzh-calendar": true
-      },
-      /* onTouchMove={this.handleTouchMove} */
-      onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "stzh-calendar__wrapper" }, h("div", { class: "stzh-calendar__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "stzh-calendar__vhidden", "aria-live": "polite", "aria-atomic": "true" }, this.localization.$globals.monthNames[focusedMonth], this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "stzh-calendar__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "stzh-calendar__select-wrapper" }, h("select", { id: this.monthSelectId, class: "stzh-calendar__select stzh-calendar__select--month", onChange: this.handleMonthSelect }, this.localization.$globals.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { class: "stzh-calendar__select-label", "aria-hidden": "true" }, h("span", null, this.localization.$globals.monthNamesShort[focusedMonth]), h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-down" }))), h("label", { htmlFor: this.yearSelectId, class: "stzh-calendar__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "stzh-calendar__select-wrapper" }, h("select", { id: this.yearSelectId, class: "stzh-calendar__select stzh-calendar__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "stzh-calendar__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-down" })))), h("div", { class: "stzh-calendar__nav" }, h("button", { class: "stzh-calendar__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-left" }), h("span", { class: "stzh-calendar__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "stzh-calendar__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-right" }), h("span", { class: "stzh-calendar__vhidden" }, this.localization.nextMonthLabel)))), h(StzhCalendarMonth, { dateFormatter: this.dateFormatShort, selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))));
-  }
-  static get is() { return "stzh-calendar"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-calendar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-calendar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Date value. Must be in IS0-8601 format: YYYY-MM-DD."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\r\nThis setting can be used alone or together with the max property."
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "max": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\r\nThis setting can be used alone or together with the min property."
-        },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "firstDayOfWeek": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "DaysOfWeek",
-          "resolved": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday",
-          "references": {
-            "DaysOfWeek": {
-              "location": "import",
-              "path": "../../utils/date-utils"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\r\nDefault is Monday."
-        },
-        "attribute": "first-day-of-week",
-        "reflect": false,
-        "defaultValue": "DaysOfWeek.Monday"
-      },
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhCalendarLocalizedText",
-          "resolved": "StzhLocaleComponent & { prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; }",
-          "references": {
-            "StzhCalendarLocalizedText": {
-              "location": "import",
-              "path": "./stzh-calendar.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Day names, month names, etc, used for localization."
-        }
-      },
-      "isDateDisabled": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhCalendarDateDisabledPredicate",
-          "resolved": "(date: Date) => boolean",
-          "references": {
-            "StzhCalendarDateDisabledPredicate": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls which days are disabled and therefore disallowed.\r\nFor example, this can be used to disallow selection of weekends."
-        },
-        "defaultValue": "() => false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "activeFocus": {},
-      "focusedDay": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhChange",
-        "name": "stzhChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when a date is selected."
-        },
-        "complexType": {
-          "original": "StzhCalendarChangeEvent",
-          "resolved": "{ component: \"stzh-calendar\"; valueAsDate: Date; value: string; }",
-          "references": {
-            "StzhCalendarChangeEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocusedDay": {
-        "complexType": {
-          "signature": "(day: Date) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "Date": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set focused day element by a JS Date object",
-          "tags": []
-        }
-      },
-      "setDate": {
-        "complexType": {
-          "signature": "(date: Date) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "Date": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set value by a JS Date object",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "localization",
-        "methodName": "createDateFormatters"
-      }, {
-        "propName": "value",
-        "methodName": "valueWatcher"
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { addDays, startOfWeek, endOfWeek, setMonth, setYear, clamp, inRange, endOfMonth, startOfMonth, printISODate, parseISODate, DaysOfWeek, } from "../../utils/date-utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { StzhCalendarMonth } from "./stzh-calendar-month";
+function range(from, to) {
+  var result = [];
+  for (var i = from; i <= to; i++) {
+    result.push(i);
+  }
+  return result;
+}
+const keyCode = {
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+};
+let calendarCounter = 0;
+export class StzhCalendar {
+  constructor() {
+    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    /**
+     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+     * Default is Monday.
+     */
+    this.firstDayOfWeek = DaysOfWeek.Monday;
+    /**
+     * Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     */
+    this.isDateDisabled = () => false;
+    this.activeFocus = false;
+    this.focusedDay = new Date();
+    // private focusedDayNode: HTMLButtonElement
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    // private handleTouchMove = (event: TouchEvent) => {
+    //   event.preventDefault()
+    // }
+    this.handleTouchEnd = (event) => {
+      const touch = event.changedTouches[0];
+      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
+      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const threshold = 70;
+      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+      if (isHorizontalSwipe) {
+        this.addMonths(distX < 0 ? 1 : -1);
+      }
+      this.initialTouchY = null;
+      this.initialTouchX = null;
+    };
+    this.handleNextMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(1);
+    };
+    this.handlePreviousMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(-1);
+    };
+    this.handleKeyboardNavigation = (event) => {
+      var handled = true;
+      switch (event.keyCode) {
+        case keyCode.RIGHT:
+          this.addDays(1);
+          break;
+        case keyCode.LEFT:
+          this.addDays(-1);
+          break;
+        case keyCode.DOWN:
+          this.addDays(7);
+          break;
+        case keyCode.UP:
+          this.addDays(-7);
+          break;
+        case keyCode.PAGE_UP:
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case keyCode.PAGE_DOWN:
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case keyCode.HOME:
+          this.startOfWeek();
+          break;
+        case keyCode.END:
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max));
+      const isAllowed = !this.isDateDisabled(day);
+      if (isInRange && isAllowed) {
+        this.setDate(day);
+        this.stzhChange.emit({
+          component: "stzh-calendar",
+          value: this.value,
+          valueAsDate: day,
+        });
+      }
+      else {
+        // for consistency we should set the focused day in cases where
+        // user has selected a day that has been specifically disallowed
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.processFocusedDayNode = (element) => {
+      // this.focusedDayNode = element
+      if (this.activeFocus) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  createDateFormatters() {
+    if (this.localization) {
+      this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: "numeric", month: "long" });
+    }
+  }
+  valueWatcher(newValue) {
+    if (newValue) {
+      this.setFocusedDay(parseISODate(this.value));
+    }
+    else {
+      this.setFocusedDay(new Date());
+    }
+  }
+  /** Set focused day element by a JS Date object */
+  async setFocusedDay(day) {
+    this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
+  }
+  /** Set value by a JS Date object */
+  async setDate(date) {
+    this.value = printISODate(date);
+  }
+  addDays(days) {
+    this.setFocusedDay(addDays(this.focusedDay, days));
+  }
+  addMonths(months) {
+    this.setMonth(this.focusedDay.getMonth() + months);
+  }
+  addYears(years) {
+    this.setYear(this.focusedDay.getFullYear() + years);
+  }
+  startOfWeek() {
+    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));
+  }
+  endOfWeek() {
+    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
+  }
+  setMonth(month) {
+    const min = setMonth(startOfMonth(this.focusedDay), month);
+    const max = endOfMonth(min);
+    const date = setMonth(this.focusedDay, month);
+    this.setFocusedDay(clamp(date, min, max));
+  }
+  setYear(year) {
+    const min = setYear(startOfMonth(this.focusedDay), year);
+    const max = endOfMonth(min);
+    const date = setYear(this.focusedDay, year);
+    this.setFocusedDay(clamp(date, min, max));
+  }
+  async componentWillLoad() {
+    this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;
+    this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;
+    this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;
+    calendarCounter++;
+    this.valueWatcher(this.value);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'calendar');
+    }
+  }
+  connectedCallback() {
+    this.createDateFormatters();
+  }
+  render() {
+    const valueAsDate = parseISODate(this.value);
+    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
+    const focusedMonth = this.focusedDay.getMonth();
+    const focusedYear = this.focusedDay.getFullYear();
+    const minDate = parseISODate(this.min);
+    const maxDate = parseISODate(this.max);
+    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10;
+    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10;
+    return (h(Host, null, h("div", { class: {
+        "stzh-calendar": true
+      },
+      /* onTouchMove={this.handleTouchMove} */
+      onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "stzh-calendar__wrapper" }, h("div", { class: "stzh-calendar__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "stzh-calendar__vhidden", "aria-live": "polite", "aria-atomic": "true" }, this.localization.$globals.monthNames[focusedMonth], this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "stzh-calendar__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "stzh-calendar__select-wrapper" }, h("select", { id: this.monthSelectId, class: "stzh-calendar__select stzh-calendar__select--month", onChange: this.handleMonthSelect }, this.localization.$globals.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { class: "stzh-calendar__select-label", "aria-hidden": "true" }, h("span", null, this.localization.$globals.monthNamesShort[focusedMonth]), h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-down" }))), h("label", { htmlFor: this.yearSelectId, class: "stzh-calendar__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "stzh-calendar__select-wrapper" }, h("select", { id: this.yearSelectId, class: "stzh-calendar__select stzh-calendar__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "stzh-calendar__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-down" })))), h("div", { class: "stzh-calendar__nav" }, h("button", { class: "stzh-calendar__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-left" }), h("span", { class: "stzh-calendar__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "stzh-calendar__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-right" }), h("span", { class: "stzh-calendar__vhidden" }, this.localization.nextMonthLabel)))), h(StzhCalendarMonth, { dateFormatter: this.dateFormatShort, selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))));
+  }
+  static get is() { return "stzh-calendar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-calendar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-calendar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date value. Must be in IS0-8601 format: YYYY-MM-DD."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "firstDayOfWeek": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "DaysOfWeek",
+          "resolved": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday",
+          "references": {
+            "DaysOfWeek": {
+              "location": "import",
+              "path": "../../utils/date-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
+        },
+        "attribute": "first-day-of-week",
+        "reflect": false,
+        "defaultValue": "DaysOfWeek.Monday"
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhCalendarLocalizedText",
+          "resolved": "StzhLocaleComponent & { prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; }",
+          "references": {
+            "StzhCalendarLocalizedText": {
+              "location": "import",
+              "path": "./stzh-calendar.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Day names, month names, etc, used for localization."
+        }
+      },
+      "isDateDisabled": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhCalendarDateDisabledPredicate",
+          "resolved": "(date: Date) => boolean",
+          "references": {
+            "StzhCalendarDateDisabledPredicate": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+        },
+        "defaultValue": "() => false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "activeFocus": {},
+      "focusedDay": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when a date is selected."
+        },
+        "complexType": {
+          "original": "StzhCalendarChangeEvent",
+          "resolved": "{ component: \"stzh-calendar\"; valueAsDate: Date; value: string; }",
+          "references": {
+            "StzhCalendarChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocusedDay": {
+        "complexType": {
+          "signature": "(day: Date) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set focused day element by a JS Date object",
+          "tags": []
+        }
+      },
+      "setDate": {
+        "complexType": {
+          "signature": "(date: Date) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set value by a JS Date object",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "localization",
+        "methodName": "createDateFormatters"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }];
+  }
+}