@oiz/stzh-components 2.6.0 → 2.7.0-alpha

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

@@ -0,0 +1,724 @@
+import { Host, h, } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ */
+export class StzhMonthyearpicker {
+  constructor() {
+    this.onRootFocus = () => {
+      if (this.monthsDropdown) {
+        this.monthsDropdown.setFocus();
+      }
+    };
+    this.onMonthsDropdownChange = (event) => {
+      const year = this.value.split("-")[0] || "0000";
+      const month = event.detail.value || "00";
+      this.onChange(year, month);
+    };
+    this.onYearsDropdownChange = (event) => {
+      const year = event.detail.value || "0000";
+      const month = this.value.split("-")[1] || "00";
+      this.onChange(year, month);
+    };
+    this.months = undefined;
+    this.years = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.minYear = undefined;
+    this.maxYear = undefined;
+    this.format = "default";
+    this.name = "";
+    this.value = "0000-00";
+    this.popoverPlacement = "bottom";
+    this.monthLabel = "";
+    this.yearLabel = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.descriptionMonth = undefined;
+    this.descriptionYear = undefined;
+    this.descriptionLongMonth = undefined;
+    this.descriptionLongYear = undefined;
+    this.errorMonth = undefined;
+    this.errorYear = undefined;
+    this.invalidMonth = false;
+    this.invalidYear = false;
+    this.a11yDescribedbyMonth = "";
+    this.a11yDescribedbyYear = "";
+    this.localization = undefined;
+  }
+  monthsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._months = JSON.parse(newValue);
+    }
+    else {
+      this._months = newValue;
+    }
+    this.updateMonthOptions();
+  }
+  yearsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._years = JSON.parse(newValue);
+    }
+    else {
+      this._years = newValue;
+    }
+    this.updateYearOptions();
+  }
+  minMaxWatcher() {
+    this.updateMonthOptions();
+    this.updateYearOptions();
+  }
+  onChange(year, month) {
+    this.value = `${year}-${month}`;
+    this.stzhChange.emit({
+      component: "stzh-monthyearpicker",
+      value: this.value,
+      valueMonth: month,
+      valueYear: year
+    });
+  }
+  updateMonthOptions() {
+    const options = [];
+    let months = [];
+    if (this._months) {
+      months = this._months;
+    }
+    else {
+      const currentYear = Number(this.value.split("-")[0] || "0000");
+      let minMonth = 1;
+      let maxMonth = 12;
+      if (this.min) {
+        const minDate = new Date(this.min);
+        if (currentYear === minDate.getFullYear()) {
+          minMonth = minDate.getMonth() + 1;
+        }
+      }
+      if (this.max) {
+        const maxDate = new Date(this.max);
+        if (currentYear === maxDate.getFullYear()) {
+          maxMonth = maxDate.getMonth() + 1;
+        }
+      }
+      for (let i = minMonth; i <= maxMonth; i++) {
+        months.push(i);
+      }
+    }
+    months.forEach((month) => {
+      const paddedMonth = ("00" + month).slice(-2);
+      const monthName = this.localization.$globals.monthNames[month - 1];
+      options.push({
+        text: this.format === "creditcard"
+          ? `${paddedMonth} (${monthName})`
+          : monthName,
+        value: paddedMonth
+      });
+    });
+    this.dropdownMonthOptions = options;
+  }
+  updateYearOptions() {
+    const options = [];
+    let years = [];
+    if (this._years) {
+      years = this._years;
+    }
+    else {
+      const currentMonth = Number(this.value.split("-")[1] || "00");
+      const yearNow = new Date().getFullYear();
+      let minYear = this.minYear || (yearNow - 10);
+      let maxYear = this.maxYear || (yearNow + 10);
+      if (this.min) {
+        const minDate = new Date(this.min);
+        if (currentMonth && currentMonth < minDate.getMonth() + 1) {
+          minYear = minDate.getFullYear() + 1;
+        }
+        else {
+          minYear = minDate.getFullYear();
+        }
+      }
+      if (this.max) {
+        const maxDate = new Date(this.max);
+        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {
+          maxYear = maxDate.getFullYear() - 1;
+        }
+        else {
+          maxYear = maxDate.getFullYear();
+        }
+      }
+      for (let i = minYear; i <= maxYear; i++) {
+        years.push(i);
+      }
+    }
+    years.forEach((year) => {
+      options.push({ text: year, value: year });
+    });
+    this.dropdownYearOptions = options;
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "monthyearpicker");
+    }
+    this.monthsWatcher(this.months);
+    this.yearsWatcher(this.years);
+  }
+  render() {
+    const classes = {
+      "stzh-monthyearpicker": true
+    };
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: (el) => (this.monthsDropdown = el), onStzhChange: this.onMonthsDropdownChange, options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, showMarker: this.showMarker, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, onStzhChange: this.onYearsDropdownChange, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, showMarker: this.showMarker, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
+  }
+  static get is() { return "stzh-monthyearpicker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-monthyearpicker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-monthyearpicker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "months": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "number[] | string",
+          "resolved": "number[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set which months to show (overwrites months from min/max)"
+        },
+        "attribute": "months",
+        "reflect": false
+      },
+      "years": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "number[] | string",
+          "resolved": "number[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set which years to show (overwrites years from min/max)"
+        },
+        "attribute": "years",
+        "reflect": false
+      },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum month and year allowed to be picked in `YYYY-MM` format.\nThis setting can be used alone or together with the `max` property."
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum month and year allowed to be picked in `YYYY-MM` format.\nThis setting can be used alone or together with the `min` property."
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "minYear": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum year (will be overwritten if `min` is used).\nThis setting can be used alone or together with the `maxYear` property."
+        },
+        "attribute": "min-year",
+        "reflect": false
+      },
+      "maxYear": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum year (will be overwritten if `max` is used).\nThis setting can be used alone or together with the `minYear` property."
+        },
+        "attribute": "max-year",
+        "reflect": false
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"creditcard\"",
+          "resolved": "\"creditcard\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Picker format."
+        },
+        "attribute": "format",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the hidden date picker input."
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of hidden input (current selected year and month YYYY-MM)."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"0000-00\""
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\"",
+          "resolved": "\"bottom\" | \"bottom-center\" | \"bottom-end\" | \"top\" | \"top-center\" | \"top-end\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement for the dropdown (if applicable)"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "monthLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Month dropdown label"
+        },
+        "attribute": "month-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "yearLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Year dropdown label"
+        },
+        "attribute": "year-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is readonly or not"
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is disabled or not"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Required status"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\"",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "descriptionMonth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message for month"
+        },
+        "attribute": "description-month",
+        "reflect": false
+      },
+      "descriptionYear": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message for year"
+        },
+        "attribute": "description-year",
+        "reflect": false
+      },
+      "descriptionLongMonth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover for month"
+        },
+        "attribute": "description-long-month",
+        "reflect": false
+      },
+      "descriptionLongYear": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover for year"
+        },
+        "attribute": "description-long-year",
+        "reflect": false
+      },
+      "errorMonth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message for month"
+        },
+        "attribute": "error-month",
+        "reflect": false
+      },
+      "errorYear": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message for year"
+        },
+        "attribute": "error-year",
+        "reflect": false
+      },
+      "invalidMonth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status for month"
+        },
+        "attribute": "invalid-month",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalidYear": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status for year"
+        },
+        "attribute": "invalid-year",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "a11yDescribedbyMonth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the element which describes the month dropdown"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "a11yDescribedbyYear": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the element which describes the year dropdown"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhMonthyearpickerLocalizedText",
+          "resolved": "StzhLocaleComponent & { monthLabel: string; yearLabel: string; }",
+          "references": {
+            "StzhMonthyearpickerLocalizedText": {
+              "location": "import",
+              "path": "./stzh-monthyearpicker.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Monthyearpicker change event"
+        },
+        "complexType": {
+          "original": "StzhMonthyearpickerChangeEvent",
+          "resolved": "{ component: \"stzh-monthyearpicker\"; value: string; valueMonth: string; valueYear: string; }",
+          "references": {
+            "StzhMonthyearpickerChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "months",
+        "methodName": "monthsWatcher"
+      }, {
+        "propName": "years",
+        "methodName": "yearsWatcher"
+      }, {
+        "propName": "value",
+        "methodName": "minMaxWatcher"
+      }, {
+        "propName": "min",
+        "methodName": "minMaxWatcher"
+      }, {
+        "propName": "max",
+        "methodName": "minMaxWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-monthyearpicker.js.map