@salla.sa/twilight-components 1.6.2 → 1.6.4

package/dist/collection/components/salla-datetime-picker/salla-datetime-picker.js

@@ -0,0 +1,1374 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import flatpickr from "flatpickr";
+import { Component, h, Prop, Event } from '@stencil/core';
+export class SallaDatetimePicker {
+  constructor() {
+    /**
+     * Two way data binding to retrieve the selected date[time] value
+     */
+    this.value = null;
+    /**
+     * Placeholder text to show on the input element
+     */
+    this.placeholder = salla.lang.get('blocks.buy_as_gift.select_send_date_and_time');
+    /**
+     * Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
+     */
+    this.allowInput = false;
+    /**
+     * Allows the preloading of an invalid date. When disabled, the field will be cleared if the provided date is invalid
+     */
+    this.allowInvalidPreload = false;
+    /**
+     * Exactly the same as date format, but for the altInput field.
+     */
+    this.altFormat = "F j, Y";
+    /**
+     * Show the user a readable date (as per altFormat), but return something totally different to the server.
+     */
+    this.altInput = false;
+    /**
+     * Instead of body, appends the calendar to the specified node instead.
+     */
+    this.appendTo = undefined;
+    /**
+     * Defines how the date will be formatted in the aria-label for calendar days,
+     * using the same tokens as dateFormat. If you change this, you should choose a
+     * value that will make sense if a screen reader reads it out loud.
+     */
+    this.ariaDateFormat = "F j, Y";
+    /**
+     * Whether the default time should be auto-filled when the input is empty and gains or loses focus.
+     */
+    this.autoFillDefaultTime = true;
+    /**
+     * Whether clicking on the input should open the picker.
+     * Set it to false if you only want to open the calendar programmatically with [open()]
+     */
+    this.clickOpens = true;
+    /**
+     * Whether calendar should close after date selection or not
+     */
+    this.closeOnSelect = true;
+    /**
+     * A string of characters which are used to define how the date will be displayed in the input box.
+     * The supported characters are defined in the table below.
+     */
+    this.dateFormat = "Y-m-d";
+    /**
+     * Initial value of the hour element, when no date is selected
+     */
+    this.defaultHour = 12;
+    /**
+     * Initial value of the minute element, when no date is selected
+     */
+    this.defaultMinute = 0;
+    /**
+     * Initial value of the seconds element, when no date is selected
+     */
+    this.defaultSeconds = 0;
+    /**
+     * Disables certain dates, preventing them from being selected.
+     * See https://chmln.github.io/flatpickr/examples/#disabling-specific-dates
+     */
+    this.disable = [];
+    /**
+     * Set this to true to always use the non-native picker on mobile devices.
+     * By default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
+     */
+    this.disableMobile = false;
+    /**
+     * Disables all dates except these specified. See https://chmln.github.io/flatpickr/examples/#disabling-all-dates-except-select-few
+     */
+    this.enable = [(_) => true];
+    /**
+     * Enables seconds selection in the time picker.
+     */
+    this.enableSeconds = false;
+    /**
+     * Enables the time picker
+     */
+    this.enableTime = false;
+    /**
+     * Adjusts the step for the hour input (incl. scrolling)
+     */
+    this.hourIncrement = 1;
+    /**
+     * Displays the calendar inline
+     */
+    this.inline = false;
+    /**
+     * The locale, either as a string (e.g. "ar", "en") or as an object.
+     * See https://chmln.github.io/flatpickr/localization/
+     */
+    this.locale = "en";
+    /**
+     * The maximum date that a user can pick to (inclusive).
+     */
+    this.maxDate = null;
+    /**
+     * The minimum date that a user can start picking from (inclusive).
+     */
+    this.maxTime = null;
+    /**
+     * The minimum date that a user can start picking from (inclusive).
+     */
+    this.minDate = null;
+    /**
+     * The minimum time that a user can start picking from (inclusive).
+     */
+    this.minTime = null;
+    /**
+     * Adjusts the step for the minute input (incl. scrolling) Defaults to 5
+     */
+    this.minuteIncrement = 5;
+    /**
+     * Date selection mode, defaults to "single"
+     */
+    this.mode = "single";
+    /**
+     * How the month should be displayed in the header of the calendar.
+     * If showMonths has a value greater than 1, the month is always shown as static.
+     */
+    this.monthSelectorType = "dropdown";
+    /**
+     * HTML for the arrow icon, used to switch months.
+     */
+    this.nextArrow = '<span class="sicon-keyboard_arrow_right"></span>';
+    /**
+     * Hides the day selection in calendar. Use it along with enableTime to create a time picker.
+     */
+    this.noCalendar = false;
+    /**
+     * How the calendar should be positioned with regards to the input. Defaults to "auto"
+     */
+    this.position = "auto";
+    /**
+     * HTML for the left arrow icon, used to switch months.
+     */
+    this.prevArrow = '<span class="sicon-keyboard_arrow_left"></span>';
+    /**
+     * Whether to display the current month name in shorthand mode, e.g. "Sep" instead "September"
+     */
+    this.shorthandCurrentMonth = false;
+    /**
+     * Position the calendar inside the wrapper and next to the input element*.
+     */
+    this.static = false;
+    /**
+     * The number of months to be shown at the same time when displaying the calendar.
+     */
+    this.showMonths = 1;
+    /**
+     * Displays time picker in 24 hour mode without AM/PM selection when enabled.
+     */
+    this.time_24hr = false;
+    /**
+     * Enables display of week numbers in calendar.
+     */
+    this.weekNumbers = false;
+    /**
+     * See https://chmln.github.io/flatpickr/examples/#flatpickr-external-elements
+     */
+    this.wrap = false;
+  }
+  onInputChange(event) {
+    this.value = event.target.value;
+    this.picked.emit(this.value);
+  }
+  componentDidLoad() {
+    this.initPicker();
+  }
+  initPicker() {
+    let options = {
+      allowInput: this.allowInput,
+      allowInvalidPreload: this.allowInvalidPreload,
+      altFormat: this.altFormat,
+      altInput: this.altInput,
+      altInputClass: this.altInputClass,
+      appendTo: this.appendTo,
+      ariaDateFormat: this.ariaDateFormat,
+      autoFillDefaultTime: this.autoFillDefaultTime,
+      clickOpens: this.clickOpens,
+      closeOnSelect: this.closeOnSelect,
+      conjunction: this.conjunction,
+      dateFormat: this.dateFormat,
+      defaultDate: !!this.value ? Date.parse(this.value) : this.defaultDate,
+      defaultHour: this.defaultHour,
+      defaultMinute: this.defaultMinute,
+      defaultSeconds: this.defaultSeconds,
+      disable: this.disable,
+      disableMobile: this.disableMobile,
+      enable: this.enable,
+      enableSeconds: this.enableSeconds,
+      enableTime: this.enableTime,
+      formatDate: this.formatDate,
+      hourIncrement: this.hourIncrement,
+      inline: this.inline,
+      locale: this.locale,
+      maxDate: this.maxDate,
+      maxTime: this.maxTime,
+      minDate: this.minDate,
+      minTime: this.minTime,
+      minuteIncrement: this.minuteIncrement,
+      mode: this.mode,
+      monthSelectorType: this.monthSelectorType,
+      nextArrow: this.nextArrow,
+      noCalendar: this.noCalendar,
+      onChange: this.onChange,
+      onClose: this.onClose,
+      onDayCreate: this.onDayCreate,
+      onDestroy: this.onDestroy,
+      onKeyDown: this.onKeyDown,
+      onMonthChange: this.onMonthChange,
+      onOpen: this.onOpen,
+      onParseConfig: this.onParseConfig,
+      onReady: this.onReady,
+      onValueUpdate: this.onValueUpdate,
+      onYearChange: this.onYearChange,
+      parseDate: this.dateParser,
+      position: this.position,
+      positionElement: this.positionElement,
+      prevArrow: this.prevArrow,
+      shorthandCurrentMonth: this.shorthandCurrentMonth,
+      static: this.static,
+      showMonths: this.showMonths,
+      time_24hr: this.time_24hr,
+      weekNumbers: this.weekNumbers,
+      wrap: this.wrap,
+    };
+    flatpickr(this.dateInput, options);
+  }
+  render() {
+    return (h("div", { class: "s-datetime-picker" },
+      h("input", { type: "datetime", class: "s-datetime-picker-input", ref: (el) => this.dateInput = el, value: this.value, placeholder: this.placeholder, onInput: this.onInputChange.bind(this) })));
+  }
+  static get is() { return "salla-datetime-picker"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-datetime-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-datetime-picker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Two way data binding to retrieve the selected date[time] value"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Placeholder text to show on the input element"
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('blocks.buy_as_gift.select_send_date_and_time')"
+    },
+    "allowInput": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows the user to enter a date directly into the input field. By default, direct entry is disabled."
+      },
+      "attribute": "allow-input",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "allowInvalidPreload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows the preloading of an invalid date. When disabled, the field will be cleared if the provided date is invalid"
+      },
+      "attribute": "allow-invalid-preload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "altFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Exactly the same as date format, but for the altInput field."
+      },
+      "attribute": "alt-format",
+      "reflect": false,
+      "defaultValue": "\"F j, Y\""
+    },
+    "altInput": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show the user a readable date (as per altFormat), but return something totally different to the server."
+      },
+      "attribute": "alt-input",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "altInputClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This class will be added to the input element created by the altInput option.\nNote that altInput already inherits classes from the original input."
+      },
+      "attribute": "alt-input-class",
+      "reflect": false
+    },
+    "appendTo": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Instead of body, appends the calendar to the specified node instead."
+      },
+      "defaultValue": "undefined"
+    },
+    "ariaDateFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines how the date will be formatted in the aria-label for calendar days, \nusing the same tokens as dateFormat. If you change this, you should choose a \nvalue that will make sense if a screen reader reads it out loud."
+      },
+      "attribute": "aria-date-format",
+      "reflect": false,
+      "defaultValue": "\"F j, Y\""
+    },
+    "autoFillDefaultTime": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the default time should be auto-filled when the input is empty and gains or loses focus."
+      },
+      "attribute": "auto-fill-default-time",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "clickOpens": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether clicking on the input should open the picker. \nSet it to false if you only want to open the calendar programmatically with [open()]"
+      },
+      "attribute": "click-opens",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "closeOnSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether calendar should close after date selection or not"
+      },
+      "attribute": "close-on-select",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "conjunction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When in \"multiple\" mode, conjunction is used to separate dates in the entry field."
+      },
+      "attribute": "conjunction",
+      "reflect": false
+    },
+    "dateFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A string of characters which are used to define how the date will be displayed in the input box. \nThe supported characters are defined in the table below."
+      },
+      "attribute": "date-format",
+      "reflect": false,
+      "defaultValue": "\"Y-m-d\""
+    },
+    "defaultDate": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "DateOption | DateOption[]",
+        "resolved": "Date | DateOption[] | number | string",
+        "references": {
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the initial selected date(s). If you're using mode: \"multiple\" or a range calendar supply an \nArray of Date objects or an Array of date strings which follow your dateFormat. Otherwise, you can supply \na single Date object or a date string."
+      },
+      "attribute": "default-date",
+      "reflect": false
+    },
+    "defaultHour": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Initial value of the hour element, when no date is selected"
+      },
+      "attribute": "default-hour",
+      "reflect": false,
+      "defaultValue": "12"
+    },
+    "defaultMinute": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Initial value of the minute element, when no date is selected"
+      },
+      "attribute": "default-minute",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "defaultSeconds": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Initial value of the seconds element, when no date is selected"
+      },
+      "attribute": "default-seconds",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "disable": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DateLimit<DateOption>[]",
+        "resolved": "DateLimit<DateOption>[]",
+        "references": {
+          "DateLimit": {
+            "location": "import",
+            "path": "./interfaces"
+          },
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables certain dates, preventing them from being selected. \nSee https://chmln.github.io/flatpickr/examples/#disabling-specific-dates"
+      },
+      "defaultValue": "[]"
+    },
+    "disableMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to always use the non-native picker on mobile devices. \nBy default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used."
+      },
+      "attribute": "disable-mobile",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "enable": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DateLimit<DateOption>[]",
+        "resolved": "DateLimit<DateOption>[]",
+        "references": {
+          "DateLimit": {
+            "location": "import",
+            "path": "./interfaces"
+          },
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables all dates except these specified. See https://chmln.github.io/flatpickr/examples/#disabling-all-dates-except-select-few"
+      },
+      "defaultValue": "[(_) => true]"
+    },
+    "enableSeconds": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables seconds selection in the time picker."
+      },
+      "attribute": "enable-seconds",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "enableTime": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables the time picker"
+      },
+      "attribute": "enable-time",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "formatDate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(date: Date, format: string, locale: Object) => string",
+        "resolved": "(date: Date, format: string, locale: Object) => string",
+        "references": {
+          "Date": {
+            "location": "global"
+          },
+          "Object": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc."
+      }
+    },
+    "hourIncrement": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Adjusts the step for the hour input (incl. scrolling)"
+      },
+      "attribute": "hour-increment",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displays the calendar inline"
+      },
+      "attribute": "inline",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "LocaleKey",
+        "resolved": "\"ar\" | \"at\" | \"az\" | \"be\" | \"bg\" | \"bn\" | \"bs\" | \"ca\" | \"cat\" | \"ckb\" | \"cs\" | \"cy\" | \"da\" | \"de\" | \"default\" | \"en\" | \"eo\" | \"es\" | \"et\" | \"fa\" | \"fi\" | \"fo\" | \"fr\" | \"gr\" | \"he\" | \"hi\" | \"hr\" | \"hu\" | \"hy\" | \"id\" | \"is\" | \"it\" | \"ja\" | \"ka\" | \"ko\" | \"km\" | \"kz\" | \"lt\" | \"lv\" | \"mk\" | \"mn\" | \"ms\" | \"my\" | \"nl\" | \"nn\" | \"no\" | \"pa\" | \"pl\" | \"pt\" | \"ro\" | \"ru\" | \"si\" | \"sk\" | \"sl\" | \"sq\" | \"sr\" | \"sv\" | \"th\" | \"tr\" | \"uk\" | \"vn\" | \"zh\" | \"uz\" | \"uz_latn\" | \"zh_tw\"",
+        "references": {
+          "LocaleKey": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The locale, either as a string (e.g. \"ar\", \"en\") or as an object.\nSee https://chmln.github.io/flatpickr/localization/"
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "\"en\""
+    },
+    "maxDate": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "DateOption",
+        "resolved": "Date | number | string",
+        "references": {
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum date that a user can pick to (inclusive)."
+      },
+      "attribute": "max-date",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "maxTime": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "DateOption",
+        "resolved": "Date | number | string",
+        "references": {
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The minimum date that a user can start picking from (inclusive)."
+      },
+      "attribute": "max-time",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "minDate": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "DateOption",
+        "resolved": "Date | number | string",
+        "references": {
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The minimum date that a user can start picking from (inclusive)."
+      },
+      "attribute": "min-date",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "minTime": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "DateOption",
+        "resolved": "Date | number | string",
+        "references": {
+          "DateOption": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The minimum time that a user can start picking from (inclusive)."
+      },
+      "attribute": "min-time",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "minuteIncrement": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Adjusts the step for the minute input (incl. scrolling) Defaults to 5"
+      },
+      "attribute": "minute-increment",
+      "reflect": false,
+      "defaultValue": "5"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"single\" | \"multiple\" | \"range\" | \"time\"",
+        "resolved": "\"multiple\" | \"range\" | \"single\" | \"time\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Date selection mode, defaults to \"single\""
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "\"single\""
+    },
+    "monthSelectorType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"dropdown\" | \"static\"",
+        "resolved": "\"dropdown\" | \"static\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "How the month should be displayed in the header of the calendar.\nIf showMonths has a value greater than 1, the month is always shown as static."
+      },
+      "attribute": "month-selector-type",
+      "reflect": false,
+      "defaultValue": "\"dropdown\""
+    },
+    "nextArrow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "HTML for the arrow icon, used to switch months."
+      },
+      "attribute": "next-arrow",
+      "reflect": false,
+      "defaultValue": "'<span class=\"sicon-keyboard_arrow_right\"></span>'"
+    },
+    "noCalendar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hides the day selection in calendar. Use it along with enableTime to create a time picker."
+      },
+      "attribute": "no-calendar",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "onChange": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the selected dates have changed - when a date is picked or cleared, by user or programmatically."
+      }
+    },
+    "onClose": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the calendar is closed"
+      }
+    },
+    "onDayCreate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires for every day cell in the calendar, where the fourth argument is the html element of the cell. \nSee https://chmln.github.io/flatpickr/events/#ondaycreate"
+      }
+    },
+    "onDestroy": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires before the calendar instance is destroyed"
+      }
+    },
+    "onKeyDown": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires when valid keyboard input for calendar is detected"
+      }
+    },
+    "onMonthChange": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires after the month has changed"
+      }
+    },
+    "onOpen": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires after the calendar is opened"
+      }
+    },
+    "onParseConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires after the configuration for the calendar is parsed"
+      }
+    },
+    "onReady": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires once the calendar instance is ready"
+      }
+    },
+    "onValueUpdate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Like onChange, but fires immediately after any date changes"
+      }
+    },
+    "onYearChange": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Hook | Hook[]",
+        "resolved": "((dates: Date[], currentDateString: string, self: any, data?: any) => void) | Hook[]",
+        "references": {
+          "Hook": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fires after the year has changed"
+      }
+    },
+    "dateParser": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(date: string, format: string) => Date",
+        "resolved": "(date: string, format: string) => Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A custom datestring parser"
+      }
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"auto\" | \"above\" | \"below\" | \"auto left\" | \"auto center\" | \"auto right\" | \"above left\" | \"above center\" | \"above right\" | \"below left\" | \"below center\" | \"below right\" | ((self: any, customElement: HTMLElement | undefined) => void)",
+        "resolved": "\"above center\" | \"above left\" | \"above right\" | \"above\" | \"auto center\" | \"auto left\" | \"auto right\" | \"auto\" | \"below center\" | \"below left\" | \"below right\" | \"below\" | ((self: any, customElement: HTMLElement) => void)",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "How the calendar should be positioned with regards to the input. Defaults to \"auto\""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"auto\""
+    },
+    "positionElement": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The element off of which the calendar will be positioned. Defaults to the date input"
+      }
+    },
+    "prevArrow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "HTML for the left arrow icon, used to switch months."
+      },
+      "attribute": "prev-arrow",
+      "reflect": false,
+      "defaultValue": "'<span class=\"sicon-keyboard_arrow_left\"></span>'"
+    },
+    "shorthandCurrentMonth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether to display the current month name in shorthand mode, e.g. \"Sep\" instead \"September\""
+      },
+      "attribute": "shorthand-current-month",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "static": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Position the calendar inside the wrapper and next to the input element*."
+      },
+      "attribute": "static",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showMonths": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The number of months to be shown at the same time when displaying the calendar."
+      },
+      "attribute": "show-months",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "time_24hr": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displays time picker in 24 hour mode without AM/PM selection when enabled."
+      },
+      "attribute": "time_-2-4hr",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "weekNumbers": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables display of week numbers in calendar."
+      },
+      "attribute": "week-numbers",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "wrap": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "See https://chmln.github.io/flatpickr/examples/#flatpickr-external-elements"
+      },
+      "attribute": "wrap",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "picked",
+      "name": "picked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}