@oiz/stzh-components 2.6.0 → 2.7.0-alpha

package/dist/components/stzh-monthyearpicker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhMonthyearpicker extends Components.StzhMonthyearpicker, HTMLElement {}
+export const StzhMonthyearpicker: {
+  prototype: StzhMonthyearpicker;
+  new (): StzhMonthyearpicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-monthyearpicker.js

@@ -0,0 +1,251 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as fetchTranslations } from './translation-utils.js';
+import { d as defineCustomElement$4 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+
+const stzhMonthyearpickerCss = ".sc-stzh-monthyearpicker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-monthyearpicker-h{display:none}.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::before,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-monthyearpicker-h{width:100%;--separator-height:var(--stzh-form-input-height)}[size=small].sc-stzh-monthyearpicker-h{--separator-height:var(--stzh-form-input-small-height)}.stzh-monthyearpicker__wrapper.sc-stzh-monthyearpicker{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-monthyearpicker__separator.sc-stzh-monthyearpicker{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);height:var(--separator-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
+
+const StzhMonthyearpicker$1 = /*@__PURE__*/ proxyCustomElement(class StzhMonthyearpicker extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    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 })))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "months": ["monthsWatcher"],
+    "years": ["yearsWatcher"],
+    "value": ["minMaxWatcher"],
+    "min": ["minMaxWatcher"],
+    "max": ["minMaxWatcher"]
+  }; }
+  static get style() { return stzhMonthyearpickerCss; }
+}, [2, "stzh-monthyearpicker", {
+    "months": [1],
+    "years": [1],
+    "min": [1],
+    "max": [1],
+    "minYear": [2, "min-year"],
+    "maxYear": [2, "max-year"],
+    "format": [513],
+    "name": [513],
+    "value": [1025],
+    "popoverPlacement": [513, "popover-placement"],
+    "monthLabel": [1, "month-label"],
+    "yearLabel": [1, "year-label"],
+    "readonly": [516],
+    "disabled": [516],
+    "required": [516],
+    "showMarker": [516, "show-marker"],
+    "size": [513],
+    "descriptionMonth": [1, "description-month"],
+    "descriptionYear": [1, "description-year"],
+    "descriptionLongMonth": [1, "description-long-month"],
+    "descriptionLongYear": [1, "description-long-year"],
+    "errorMonth": [1, "error-month"],
+    "errorYear": [1, "error-year"],
+    "invalidMonth": [516, "invalid-month"],
+    "invalidYear": [516, "invalid-year"],
+    "a11yDescribedbyMonth": [1, "a11y-describedby"],
+    "a11yDescribedbyYear": [1, "a11y-describedby"],
+    "localization": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-monthyearpicker", "stzh-dropdown", "stzh-icon", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-monthyearpicker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhMonthyearpicker$1);
+      }
+      break;
+    case "stzh-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhMonthyearpicker = StzhMonthyearpicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhMonthyearpicker, defineCustomElement };
+
+//# sourceMappingURL=stzh-monthyearpicker.js.map

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

@@ -0,0 +1 @@
+{"file":"stzh-monthyearpicker.js","mappings":"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","names":["StzhMonthyearpicker"],"sources":["./src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","./src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.setFocus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private updateYearOptions(): void {\n    const options = [];\n    let years = [];\n\n    if (this._years) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.forEach((year) => {\n      options.push({ text: year, value: year });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              onStzhChange={this.onMonthsDropdownChange}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              showMarker={this.showMarker}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              onStzhChange={this.onYearsDropdownChange}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              showMarker={this.showMarker}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}