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

package/dist/components/stzh-datepicker2.js

@@ -10,212 +10,212 @@ import { d as defineCustomElement$1 } from './stzh-popover2.js';
 
 const stzhDatepickerCss = ".sc-stzh-datepicker-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-datepicker-h{display:none}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-datepicker-h{width:100%}.stzh-datepicker__popover.sc-stzh-datepicker{--padding:var(--stzh-space-medium);--width:auto}.stzh-datepicker__actions.sc-stzh-datepicker{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-top:var(--stzh-space-xsmall)}";
 
-const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhChange = createEvent(this, "stzhChange", 7);
-    /**
-     * 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" }))))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "localization": ["createDateFormatters"],
-    "value": ["valueWatcher"]
-  }; }
-  static get style() { return stzhDatepickerCss; }
-}, [6, "stzh-datepicker", {
-    "calendarMin": [1, "calendar-min"],
-    "calendarMax": [1, "calendar-max"],
-    "calendarIsDateDisabled": [16],
-    "name": [513],
-    "value": [1025],
-    "label": [1],
-    "readonly": [516],
-    "disabled": [516],
-    "description": [1],
-    "descriptionLong": [1, "description-long"],
-    "error": [1],
-    "invalid": [516],
-    "required": [516],
-    "showMarker": [516, "show-marker"],
-    "placeholder": [1],
-    "size": [513],
-    "inline": [4],
-    "dateAdapter": [16],
-    "localization": [16],
-    "buttonLabel": [32],
-    "setDate": [64],
-    "getPopover": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-datepicker", "stzh-badge", "stzh-button", "stzh-calendar", "stzh-icon", "stzh-input", "stzh-popover"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-datepicker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhDatepicker);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "stzh-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "stzh-calendar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "stzh-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    /**
+     * 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" }))))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "localization": ["createDateFormatters"],
+    "value": ["valueWatcher"]
+  }; }
+  static get style() { return stzhDatepickerCss; }
+}, [6, "stzh-datepicker", {
+    "calendarMin": [1, "calendar-min"],
+    "calendarMax": [1, "calendar-max"],
+    "calendarIsDateDisabled": [16],
+    "name": [513],
+    "value": [1025],
+    "label": [1],
+    "readonly": [516],
+    "disabled": [516],
+    "description": [1],
+    "descriptionLong": [1, "description-long"],
+    "error": [1],
+    "invalid": [516],
+    "required": [516],
+    "showMarker": [516, "show-marker"],
+    "placeholder": [1],
+    "size": [513],
+    "inline": [4],
+    "dateAdapter": [16],
+    "localization": [16],
+    "buttonLabel": [32],
+    "setDate": [64],
+    "getPopover": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-datepicker", "stzh-badge", "stzh-button", "stzh-calendar", "stzh-icon", "stzh-input", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-datepicker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhDatepicker);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-calendar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { StzhDatepicker as S, defineCustomElement as d };