npm - @oiz/stzh-components - Versions diffs - 0.0.1-pretest → 1.4.0-npmjstest - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (924) hide show

package/dist/collection/components/stzh-datepicker/stzh-datepicker.js CHANGED Viewed

@@ -1,586 +1,586 @@
-import { Host, h, Fragment } from "@stencil/core";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { printISODate, parseISODate } from "../../utils/date-utils";
-import { createGlobalAdapter } from "../../utils/date-adapter";
-/**
- * @slot - Slot to place input, calendar and popover element inside
- */
-export class StzhDatepicker {
-  constructor() {
-    /**
-     * 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.calendarMin = "";
-    /**
-     * 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.calendarMax = "";
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.calendarIsDateDisabled = () => false;
-    /** Name of the hidden date picker input. */
-    this.name = "";
-    /** Value of hidden date picker input (current selected date in ISO format). */
-    this.value = "";
-    /** Label for input field and popover */
-    this.label = "";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Size variant */
-    this.size = "default";
-    /** Show calendar inline */
-    this.inline = false;
-    this.onInputChange = () => {
-      const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
-      if (this.input.value === "" || parsedDate) {
-        const isoDate = printISODate(parsedDate);
-        if (this.calendar) {
-          this.calendar.value = isoDate;
-        }
-        this.value = isoDate;
-        this.stzhChange.emit({
-          component: "stzh-datepicker",
-          value: this.value,
-          valueAsDate: parsedDate,
-        });
-      }
-    };
-    this.onCalendarChange = (event) => {
-      this.value = event.detail.value;
-      this.stzhChange.emit({
-        component: "stzh-datepicker",
-        value: this.value,
-        valueAsDate: event.detail.valueAsDate,
-      });
-      if (this.input) {
-        this.input.value = event.detail.valueAsDate
-          && this.dateAdapter.format(event.detail.valueAsDate, "inputdate");
-      }
-      if (this.popover) {
-        this.popover.hide();
-      }
-    };
-  }
-  createDateFormatters() {
-    if (this.localization) {
-      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {
-        day: "numeric",
-        month: "long",
-        year: "numeric",
-      });
-    }
-  }
-  /** Update calendar and input when value prop has changed */
-  valueWatcher(newValue) {
-    const date = parseISODate(newValue);
-    if (this.calendar) {
-      this.calendar.value = newValue;
-    }
-    if (this.input) {
-      this.input.value = this.dateAdapter.format(date, "inputdate");
-    }
-    this.updateButtonAccessibleLabel();
-  }
-  /** Set value by a JS Date object */
-  async setDate(date) {
-    this.value = printISODate(date);
-  }
-  /** Return internal popover element */
-  async getPopover() {
-    return this.popover;
-  }
-  updateButtonAccessibleLabel() {
-    if (!this.localization) {
-      return;
-    }
-    try {
-      const valueAsDate = parseISODate(this.value);
-      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
-    }
-    catch (err) {
-      this.buttonLabel = this.localization.buttonLabel;
-    }
-  }
-  connectedCallback() {
-    this.createDateFormatters();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "datepicker");
-    }
-    if (!this.dateAdapter) {
-      this.dateAdapter = createGlobalAdapter(this.localization.$formats, this.localization.$globals);
-    }
-  }
-  componentDidLoad() {
-    this.valueWatcher(this.value);
-  }
-  render() {
-    const classes = {
-      "stzh-datepicker": true,
-      "stzh-datepicker--inline": this.inline
-    };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
-      h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
-      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, placeholder: this.placeholder, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
-  }
-  static get is() { return "stzh-datepicker"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-datepicker.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-datepicker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "calendarMin": {
-        "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": "calendar-min",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "calendarMax": {
-        "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": "calendar-max",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "calendarIsDateDisabled": {
-        "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"
-      },
-      "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 date picker input (current selected date in ISO format)."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for input field and popover"
-        },
-        "attribute": "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"
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Description message (use description slot as alternative)"
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "descriptionLong": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
-        },
-        "attribute": "description-long",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "One or multiple error message (use error slot as alternative)"
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Invalid status"
-        },
-        "attribute": "invalid",
-        "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 noting"
-        },
-        "attribute": "show-marker",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder text"
-        },
-        "attribute": "placeholder",
-        "reflect": 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\""
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show calendar inline"
-        },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "dateAdapter": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhLocaleAdapter",
-          "resolved": "StzhLocaleAdapter",
-          "references": {
-            "StzhLocaleAdapter": {
-              "location": "import",
-              "path": "../../utils/date-adapter"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Date adapter, for custom parsing/formatting.\r\nMust be object with a `parse` function which accepts a `string` and returns a `Date`,\r\nand a `format` function which accepts a `Date` and returns a `string`."
-        }
-      },
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhDatepickerLocalizedText",
-          "resolved": "StzhLocaleComponent & { buttonLabel: string; selectedDateMessage: string; }",
-          "references": {
-            "StzhDatepickerLocalizedText": {
-              "location": "import",
-              "path": "./stzh-datepicker.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings."
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "buttonLabel": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhChange",
-        "name": "stzhChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Datepicker change event"
-        },
-        "complexType": {
-          "original": "StzhDatepickerChangeEvent",
-          "resolved": "{ component: \"stzh-datepicker\"; value: string; valueAsDate: Date; }",
-          "references": {
-            "StzhDatepickerChangeEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "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": []
-        }
-      },
-      "getPopover": {
-        "complexType": {
-          "signature": "() => Promise<HTMLStzhPopoverElement>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLStzhPopoverElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<HTMLStzhPopoverElement>"
-        },
-        "docs": {
-          "text": "Return internal popover element",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "localization",
-        "methodName": "createDateFormatters"
-      }, {
-        "propName": "value",
-        "methodName": "valueWatcher"
-      }];
-  }
-}
+import { Host, h, Fragment } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { printISODate, parseISODate } from "../../utils/date-utils";
+import { createGlobalAdapter } from "../../utils/date-adapter";
+/**
+ * @slot - Slot to place input, calendar and popover element inside
+ */
+export class StzhDatepicker {
+  constructor() {
+    /**
+     * 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.calendarMin = "";
+    /**
+     * 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.calendarMax = "";
+    /**
+     * Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     */
+    this.calendarIsDateDisabled = () => false;
+    /** Name of the hidden date picker input. */
+    this.name = "";
+    /** Value of hidden date picker input (current selected date in ISO format). */
+    this.value = "";
+    /** Label for input field and popover */
+    this.label = "";
+    /** Whether the element is readonly or not */
+    this.readonly = false;
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** Size variant */
+    this.size = "default";
+    /** Show calendar inline */
+    this.inline = false;
+    this.onInputChange = () => {
+      const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
+      if (this.input.value === "" || parsedDate) {
+        const isoDate = printISODate(parsedDate);
+        if (this.calendar) {
+          this.calendar.value = isoDate;
+        }
+        this.value = isoDate;
+        this.stzhChange.emit({
+          component: "stzh-datepicker",
+          value: this.value,
+          valueAsDate: parsedDate,
+        });
+      }
+    };
+    this.onCalendarChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-datepicker",
+        value: this.value,
+        valueAsDate: event.detail.valueAsDate,
+      });
+      if (this.input) {
+        this.input.value = event.detail.valueAsDate
+          && this.dateAdapter.format(event.detail.valueAsDate, "inputdate");
+      }
+      if (this.popover) {
+        this.popover.hide();
+      }
+    };
+  }
+  createDateFormatters() {
+    if (this.localization) {
+      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      });
+    }
+  }
+  /** Update calendar and input when value prop has changed */
+  valueWatcher(newValue) {
+    const date = parseISODate(newValue);
+    if (this.calendar) {
+      this.calendar.value = newValue;
+    }
+    if (this.input) {
+      this.input.value = this.dateAdapter.format(date, "inputdate");
+    }
+    this.updateButtonAccessibleLabel();
+  }
+  /** Set value by a JS Date object */
+  async setDate(date) {
+    this.value = printISODate(date);
+  }
+  /** Return internal popover element */
+  async getPopover() {
+    return this.popover;
+  }
+  updateButtonAccessibleLabel() {
+    if (!this.localization) {
+      return;
+    }
+    try {
+      const valueAsDate = parseISODate(this.value);
+      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
+    }
+    catch (err) {
+      this.buttonLabel = this.localization.buttonLabel;
+    }
+  }
+  connectedCallback() {
+    this.createDateFormatters();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "datepicker");
+    }
+    if (!this.dateAdapter) {
+      this.dateAdapter = createGlobalAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
+  componentDidLoad() {
+    this.valueWatcher(this.value);
+  }
+  render() {
+    const classes = {
+      "stzh-datepicker": true,
+      "stzh-datepicker--inline": this.inline
+    };
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
+      h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
+      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, placeholder: this.placeholder, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
+  }
+  static get is() { return "stzh-datepicker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-datepicker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-datepicker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "calendarMin": {
+        "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": "calendar-min",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "calendarMax": {
+        "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": "calendar-max",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "calendarIsDateDisabled": {
+        "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"
+      },
+      "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 date picker input (current selected date in ISO format)."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for input field and popover"
+        },
+        "attribute": "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"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "descriptionLong": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        "attribute": "description-long",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status"
+        },
+        "attribute": "invalid",
+        "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 noting"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": "Placeholder text"
+        },
+        "attribute": "placeholder",
+        "reflect": 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\""
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show calendar inline"
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dateAdapter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleAdapter",
+          "resolved": "StzhLocaleAdapter",
+          "references": {
+            "StzhLocaleAdapter": {
+              "location": "import",
+              "path": "../../utils/date-adapter"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date adapter, for custom parsing/formatting.\nMust be object with a `parse` function which accepts a `string` and returns a `Date`,\nand a `format` function which accepts a `Date` and returns a `string`."
+        }
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDatepickerLocalizedText",
+          "resolved": "StzhLocaleComponent & { buttonLabel: string; selectedDateMessage: string; }",
+          "references": {
+            "StzhDatepickerLocalizedText": {
+              "location": "import",
+              "path": "./stzh-datepicker.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "buttonLabel": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datepicker change event"
+        },
+        "complexType": {
+          "original": "StzhDatepickerChangeEvent",
+          "resolved": "{ component: \"stzh-datepicker\"; value: string; valueAsDate: Date; }",
+          "references": {
+            "StzhDatepickerChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "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": []
+        }
+      },
+      "getPopover": {
+        "complexType": {
+          "signature": "() => Promise<HTMLStzhPopoverElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLStzhPopoverElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLStzhPopoverElement>"
+        },
+        "docs": {
+          "text": "Return internal popover element",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "localization",
+        "methodName": "createDateFormatters"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }];
+  }
+}