@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/collection/components/six-timepicker/six-timepicker.js

@@ -1,980 +1,980 @@
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { ItemPickerType } from '../six-item-picker/types';
-import { SixTimeFormat } from './six-time-format';
-import { SixTimePropertyName, TIME_FORMAT_CHAR } from './six-timepicker.types';
-import { createTimeString, getCurrentTime, isValidTimeString, parseTimeString, TIME_FORMAT_SEPARATOR, } from '../../utils/time.util';
-import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
-import { EventListeners } from '../../utils/event-listeners';
-import { hasSlot } from '../../utils/slot';
-import { isNil } from '../../utils/type-check';
-const TAG = `[SIX-TIMEPICKER]`;
-const DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';
-const MIN_POPUP_HEIGHT = 145;
-/**
- * @since 2.0.0
- * @status experimental
- *
- * @part input - The input field
- * @part container - The container of whole component
- * @part popup - The popup of the timepicker component
- *
- */
-export class SixTimepicker {
-  constructor() {
-    this.eventListeners = new EventListeners();
-    /**
-     * Define the time format. Valid formats are:
-     *
-     * HH:mm:ss
-     * hh:mm:ss:aa
-     * HH:mm:ss:ms
-     * hh:mm:ss:ms:aa
-     * HH:mm
-     * hh:mm:aa
-     * HH
-     * hh:aa
-     * mm
-     * ss
-     * ms
-     *
-     * where HH is the 24 hour format
-     * and hh is the 12 hour format
-     *
-     * Please notice that when using the 12-hour-clock (hh)
-     * you always need a period indicator (aa). So the time can be parsed as either am or pm
-     * */
-    this.format = SixTimeFormat.HHmmss;
-    /**
-     * Define the separator to be shown between the time unit pickers.
-     * Please be aware that this property will modify the displayed separator only.
-     * The separator for a timestring is always expected to be a colon (eg. '13:52:20')
-     * */
-    this.separator = TIME_FORMAT_SEPARATOR;
-    /** Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /** Indicates whether or not the timepicker should be shown as an inline (always open) component */
-    this.inline = false;
-    /**
-     * If `true` the user can only select a time via the timepicker but not directly edit the input field.
-     */
-    this.readonly = false;
-    /**
-     * If `true` the component is disabled.
-     */
-    this.disabled = false;
-    /** Timepicker size. */
-    this.size = 'medium';
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** The input's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** The input's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** The input's name attribute. */
-    this.name = '';
-    /** Set to true to add a clear button when the input is populated. */
-    this.clearable = false;
-    /** Set the position of the icon */
-    this.iconPosition = 'left';
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    this.hoist = false;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
-     */
-    this.timeout = DEFAULT_DEBOUNCE_FAST;
-    /**
-     * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
-     */
-    this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.
-     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
-     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
-     * (and keep pressed) and once you release
-     */
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.isPopupContentUp = false;
-    this.isDropDownContentUp = false;
-    this.defaultValue = null;
-    this.handleInputChange = (event) => {
-      event.stopPropagation();
-      const inputValue = this.inputElement.value;
-      if (!isValidTimeString(inputValue, this.format)) {
-        this.sixChange.emit({
-          value: {},
-          valueAsString: '',
-        });
-        return;
-      }
-      this.internalValue = parseTimeString(inputValue, this.format);
-      this.sixChange.emit({
-        value: this.internalValue,
-        valueAsString: createTimeString(this.internalValue, this.format),
-      });
-    };
-    this.handleSixTimepickerChangeDebounced = ({ detail }) => {
-      this.sixChangeDebounced.emit(detail);
-    };
-    this.handleChange = (event, property) => {
-      // stop propagation, since the timepicker should not expose the events of the underlying item-picker
-      event.stopPropagation();
-      // update the internal state
-      this.internalValue[property] = event.detail;
-      const timeString = createTimeString(this.internalValue, this.format);
-      // fire timepicker's own event
-      this.sixChange.emit({
-        changedProperty: property,
-        value: this.internalValue,
-        valueAsString: timeString,
-      });
-      // update the input value
-      this.value = timeString;
-    };
-    this.handleDocumentMouseDown = (event) => {
-      // Close when clicking outside of the containing element
-      const path = event.composedPath();
-      if (!path.includes(this.host)) {
-        this.closePopup();
-        return;
-      }
-    };
-    this.handleClearClick = (event) => {
-      event.stopPropagation();
-      this.value = undefined;
-      this.sixClear.emit();
-    };
-  }
-  async resizeHandler() {
-    this.calcIsPopupContentUp();
-    this.moveOpenHoistedPopup();
-  }
-  async scrollHandler() {
-    this.calcIsPopupContentUp();
-    this.moveOpenHoistedPopup();
-  }
-  debounceChanged() {
-    this.eventListeners.removeByIdentifier(DEBOUNCE_TIMEPICKER_LISTENER);
-    this.eventListeners.add(this.host, 'six-timepicker-change', debounce(this.handleSixTimepickerChangeDebounced, this.debounce), DEBOUNCE_TIMEPICKER_LISTENER);
-  }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged(newValue) {
-    if (this.value !== newValue) {
-      this.value = newValue;
-    }
-    this.setupInternalTime();
-    this.sixChange.emit({
-      value: this.internalValue,
-      valueAsString: createTimeString(this.internalValue, this.format),
-    });
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.inputElement.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.inputElement.checkValidity();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    await this.inputElement.setCustomValidity(message);
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.internalValue = this.defaultValue;
-    this.inputElement.value = createTimeString(this.internalValue, this.format);
-    await this.inputElement.reset();
-  }
-  componentWillLoad() {
-    this.setupInternalTime();
-    if (this.inline) {
-      this.open = true;
-    }
-    if (this.open) {
-      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
-    }
-  }
-  componentDidLoad() {
-    this.eventListeners.add(this.host, 'six-timepicker-change', debounce(this.handleSixTimepickerChangeDebounced, this.debounce), DEBOUNCE_TIMEPICKER_LISTENER);
-    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  calcIsPopupContentUp() {
-    if (!this.inputElement || !this.wrapper) {
-      return;
-    }
-    const inputBoundingRect = this.inputElement.getBoundingClientRect();
-    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
-    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
-    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
-    this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
-  }
-  /*
-   * The position of the hoisted timepicker needs to be correctly calculated since the position changes to fixed.
-   * Thus if the user scrolls or adjusts the screen size we need to recalculate the timepicker position.
-   */
-  moveOpenHoistedPopup() {
-    if (!this.hoist || !this.open) {
-      return;
-    }
-    const popupBoundingClientRect = this.popup.getBoundingClientRect();
-    const popupHeight = popupBoundingClientRect.height;
-    const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-    const inputTop = inputBoundingClientRect.top;
-    const inputHeight = inputBoundingClientRect.height;
-    this.calcIsPopupContentUp();
-    if (this.isPopupContentUp) {
-      this.popup.style.top = `${inputTop - popupHeight}px`;
-    }
-    else {
-      this.popup.style.top = `${inputTop + inputHeight}px`;
-    }
-  }
-  getSixTimeUnitPicker(params) {
-    return (h("six-item-picker", { class: params.class, timeout: this.timeout, interval: this.interval, padded: true, min: params.min, max: params.max, value: this.internalValue[params.propertyName], items: params.items, type: params.type || ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handleChange(event, params.propertyName) }));
-  }
-  setupInternalTime() {
-    if (this.is12HourClock() && !this.format.includes(TIME_FORMAT_CHAR.PERIOD)) {
-      console.error(`${TAG} You provided a 12-hour-clock format but are missing the period (am or pm) in the time-format-string!`);
-    }
-    if (this.value === null || this.value === undefined) {
-      this.internalValue = isNil(this.defaultTime)
-        ? getCurrentTime(this.is24HourClock())
-        : parseTimeString(this.defaultTime, this.format);
-    }
-    else {
-      this.internalValue = parseTimeString(this.value, this.format);
-    }
-    this.defaultValue = this.internalValue;
-  }
-  getHour24Picker() {
-    if (!this.is24HourClock()) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: SixTimePropertyName.HOURS });
-  }
-  is24HourClock() {
-    return this.format.includes(TIME_FORMAT_CHAR.HOUR_24);
-  }
-  getHour12Picker() {
-    if (!this.is12HourClock()) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: SixTimePropertyName.HOURS });
-  }
-  is12HourClock() {
-    return this.format.includes(TIME_FORMAT_CHAR.HOUR_12);
-  }
-  getAmPmPicker() {
-    if (!this.is12HourClock()) {
-      return;
-    }
-    const items = ['AM', 'PM'];
-    return this.getSixTimeUnitPicker({
-      items,
-      type: ItemPickerType.CUSTOM,
-      propertyName: SixTimePropertyName.PERIOD,
-    });
-  }
-  getMinutePicker() {
-    if (!this.format.includes(TIME_FORMAT_CHAR.MINUTE)) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.MINUTES });
-  }
-  getSecondsPicker() {
-    if (!this.format.includes(TIME_FORMAT_CHAR.SECOND)) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.SECONDS });
-  }
-  getMillisecondsPicker() {
-    if (!this.format.includes(TIME_FORMAT_CHAR.MILLISECOND)) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({
-      min: 0,
-      max: 999,
-      class: 'timepicker__item--wide',
-      paddingLength: 3,
-      propertyName: SixTimePropertyName.MILLISECONDS,
-    });
-  }
-  getSeparator() {
-    return (h("div", { class: "timepicker__separator" },
-      h("span", null, this.separator)));
-  }
-  getContent() {
-    const elementsInOrder = [
-      this.getHour24Picker(),
-      this.getHour12Picker(),
-      this.getMinutePicker(),
-      this.getSecondsPicker(),
-      this.getMillisecondsPicker(),
-    ];
-    const visibleElements = elementsInOrder.filter((el) => el !== undefined);
-    return visibleElements.map((el, idx) => {
-      if (idx === visibleElements.length - 1) {
-        return [el];
-      }
-      return [el, this.getSeparator()];
-    });
-  }
-  openPopup() {
-    if (!this.open && !this.disabled) {
-      this.open = true;
-      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
-    }
-  }
-  closePopup() {
-    if (this.inline) {
-      return;
-    }
-    this.open = false;
-    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
-  }
-  renderClearable() {
-    return (this.clearable && (h("button", { slot: "suffix", class: {
-        timepicker_clear: true,
-        'timepicker_clear--right': this.iconPosition === 'left',
-        'timepicker_clear--left': this.iconPosition === 'right',
-      }, type: "button", onClick: this.handleClearClick, tabindex: "-1" },
-      h("six-icon", { size: "small" }, "clear"))));
-  }
-  renderCustomIcon() {
-    const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "watch_later"));
-    return (h("span", { slot: "prefix", part: "icon", class: {
-        prefix: true,
-        'prefix--right': this.iconPosition === 'right',
-      } }, icon));
-  }
-  calcIsDropDownContentUp() {
-    if (!this.inputElement || !this.wrapper) {
-      return;
-    }
-    const inputBoundingRect = this.inputElement.getBoundingClientRect();
-    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
-    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
-    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
-    this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
-  }
-  /*
-   * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
-   * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
-   */
-  adjustPopupForHoisting() {
-    if (!this.hoist) {
-      return;
-    }
-    // execute after dropdown has been rendered to make sure the popup reference is correctly set
-    setTimeout(() => {
-      if (!this.popup) {
-        return;
-      }
-      // take a snapshot of normally rendered popup
-      const popupBoundingClientRect = this.popup.getBoundingClientRect();
-      // apply screen position to fixed popup
-      this.popup.style.position = 'fixed';
-      ['top', 'left', 'width', 'height'].forEach((property) => {
-        this.popup.style[property] = `${popupBoundingClientRect[property]}px`;
-      });
-      const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-      const inputTop = inputBoundingClientRect.top;
-      const popupTop = popupBoundingClientRect.top;
-      this.calcIsDropDownContentUp();
-      // check screen position to check whether the popup should be moved above or below the trigger element
-      if (this.isDropDownContentUp && inputTop < popupTop) {
-        //  move popup above input field if timepicker is at bottom of screen
-        this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;
-      }
-    }, 0);
-  }
-  render() {
-    this.adjustPopupForHoisting();
-    return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" },
-      h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, size: this.size, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, class: {
-          'input--empty': !this.value,
-          'input--hide': this.inline,
-        } },
-        this.renderCustomIcon(),
-        this.renderClearable(),
-        hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" },
-          h("slot", { name: "error-text" }))) : null,
-        hasSlot(this.host, 'label') ? (h("span", { slot: "label" },
-          h("slot", { name: "label" }))) : null),
-      this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
-          timepicker__popup: true,
-          'timepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isPopupContentUp,
-          'timepicker__popup--is-inline': this.inline,
-        } },
-        ...this.getContent(),
-        this.getAmPmPicker()))));
-  }
-  static get is() { return "six-timepicker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-timepicker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-timepicker.css"]
-  }; }
-  static get properties() { return {
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "SixTimeFormat",
-        "resolved": "SixTimeFormat.HH | SixTimeFormat.HHmm | SixTimeFormat.HHmmss | SixTimeFormat.HHmmssms | SixTimeFormat.hhaa | SixTimeFormat.hhmmaa | SixTimeFormat.hhmmssaa | SixTimeFormat.hhmmssmsaa | SixTimeFormat.mm | SixTimeFormat.ms | SixTimeFormat.ss",
-        "references": {
-          "SixTimeFormat": {
-            "location": "import",
-            "path": "./six-time-format"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define the time format. Valid formats are:\n\nHH:mm:ss\nhh:mm:ss:aa\nHH:mm:ss:ms\nhh:mm:ss:ms:aa\nHH:mm\nhh:mm:aa\nHH\nhh:aa\nmm\nss\nms\n\nwhere HH is the 24 hour format\nand hh is the 12 hour format\n\nPlease notice that when using the 12-hour-clock (hh)\nyou always need a period indicator (aa). So the time can be parsed as either am or pm"
-      },
-      "attribute": "format",
-      "reflect": false,
-      "defaultValue": "SixTimeFormat.HHmmss"
-    },
-    "separator": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define the separator to be shown between the time unit pickers.\nPlease be aware that this property will modify the displayed separator only.\nThe separator for a timestring is always expected to be a colon (eg. '13:52:20')"
-      },
-      "attribute": "separator",
-      "reflect": false,
-      "defaultValue": "TIME_FORMAT_SEPARATOR"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The value of the timepicker provided as a string. The string mast match the provided format (or default format)"
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "inline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether or not the timepicker should be shown as an inline (always open) component"
-      },
-      "attribute": "inline",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If `true` the user can only select a time via the timepicker but not directly edit the input field."
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If `true` the component is disabled."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'top' | 'bottom'",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The enforced placement of the dropdown panel."
-      },
-      "attribute": "placement",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Timepicker size."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to make the input a required field."
-      },
-      "attribute": "required",
-      "reflect": true
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The placeholder defines what text to be shown on the input element"
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "errorOnBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to display the error text on blur and not when typing"
-      },
-      "attribute": "error-on-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "errorText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's error text. Alternatively, you can use the error-text slot."
-      },
-      "attribute": "error-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's label. Alternatively, you can use the label slot."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's name attribute."
-      },
-      "attribute": "name",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to add a clear button when the input is populated."
-      },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "iconPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'right'",
-        "resolved": "\"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the position of the icon"
-      },
-      "attribute": "icon-position",
-      "reflect": false,
-      "defaultValue": "'left'"
-    },
-    "hoist": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
-      },
-      "attribute": "hoist",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "timeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours)."
-      },
-      "attribute": "timeout",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "interval": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed."
-      },
-      "attribute": "interval",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
-    },
-    "defaultTime": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format."
-      },
-      "attribute": "default-time",
-      "reflect": false
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\nIf you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\nis a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n(and keep pressed) and once you release"
-      },
-      "attribute": "debounce",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    }
-  }; }
-  static get states() { return {
-    "isPopupContentUp": {},
-    "isDropDownContentUp": {},
-    "internalValue": {}
-  }; }
-  static get events() { return [{
-      "method": "sixChange",
-      "name": "six-timepicker-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the timepicker's value changes"
-      },
-      "complexType": {
-        "original": "SixTimepickerChange",
-        "resolved": "SixTimepickerChange",
-        "references": {
-          "SixTimepickerChange": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "sixChangeDebounced",
-      "name": "six-timepicker-change-debounced",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the timepicker's value changes, but debounced"
-      },
-      "complexType": {
-        "original": "SixTimepickerChange",
-        "resolved": "SixTimepickerChange",
-        "references": {
-          "SixTimepickerChange": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "sixClear",
-      "name": "six-timepicker-clear",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the clear button is activated."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "reportValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-        "tags": []
-      }
-    },
-    "checkValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Checks for validity.",
-        "tags": []
-      }
-    },
-    "setCustomValidity": {
-      "complexType": {
-        "signature": "(message: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-        "tags": []
-      }
-    },
-    "reset": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "debounce",
-      "methodName": "debounceChanged"
-    }, {
-      "propName": "value",
-      "methodName": "valueChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "resizeHandler",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "scroll",
-      "method": "scrollHandler",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
-}
+import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { ItemPickerType } from '../six-item-picker/types';
+import { SixTimeFormat } from './six-time-format';
+import { SixTimePropertyName, TIME_FORMAT_CHAR } from './six-timepicker.types';
+import { createTimeString, getCurrentTime, isValidTimeString, parseTimeString, TIME_FORMAT_SEPARATOR, } from '../../utils/time.util';
+import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
+import { EventListeners } from '../../utils/event-listeners';
+import { hasSlot } from '../../utils/slot';
+import { isNil } from '../../utils/type-check';
+const TAG = `[SIX-TIMEPICKER]`;
+const DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';
+const MIN_POPUP_HEIGHT = 145;
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ * @part input - The input field
+ * @part container - The container of whole component
+ * @part popup - The popup of the timepicker component
+ *
+ */
+export class SixTimepicker {
+  constructor() {
+    this.eventListeners = new EventListeners();
+    /**
+     * Define the time format. Valid formats are:
+     *
+     * HH:mm:ss
+     * hh:mm:ss:aa
+     * HH:mm:ss:ms
+     * hh:mm:ss:ms:aa
+     * HH:mm
+     * hh:mm:aa
+     * HH
+     * hh:aa
+     * mm
+     * ss
+     * ms
+     *
+     * where HH is the 24 hour format
+     * and hh is the 12 hour format
+     *
+     * Please notice that when using the 12-hour-clock (hh)
+     * you always need a period indicator (aa). So the time can be parsed as either am or pm
+     * */
+    this.format = SixTimeFormat.HHmmss;
+    /**
+     * Define the separator to be shown between the time unit pickers.
+     * Please be aware that this property will modify the displayed separator only.
+     * The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+     * */
+    this.separator = TIME_FORMAT_SEPARATOR;
+    /** Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Indicates whether or not the timepicker should be shown as an inline (always open) component */
+    this.inline = false;
+    /**
+     * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+     */
+    this.readonly = false;
+    /**
+     * If `true` the component is disabled.
+     */
+    this.disabled = false;
+    /** Timepicker size. */
+    this.size = 'medium';
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** The input's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** The input's label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The input's name attribute. */
+    this.name = '';
+    /** Set to true to add a clear button when the input is populated. */
+    this.clearable = false;
+    /** Set the position of the icon */
+    this.iconPosition = 'left';
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    this.hoist = false;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+     */
+    this.timeout = DEFAULT_DEBOUNCE_FAST;
+    /**
+     * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
+     */
+    this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.
+     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+     * (and keep pressed) and once you release
+     */
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    this.isPopupContentUp = false;
+    this.isDropDownContentUp = false;
+    this.defaultValue = null;
+    this.handleInputChange = (event) => {
+      event.stopPropagation();
+      const inputValue = this.inputElement.value;
+      if (!isValidTimeString(inputValue, this.format)) {
+        this.sixChange.emit({
+          value: {},
+          valueAsString: '',
+        });
+        return;
+      }
+      this.internalValue = parseTimeString(inputValue, this.format);
+      this.sixChange.emit({
+        value: this.internalValue,
+        valueAsString: createTimeString(this.internalValue, this.format),
+      });
+    };
+    this.handleSixTimepickerChangeDebounced = ({ detail }) => {
+      this.sixChangeDebounced.emit(detail);
+    };
+    this.handleChange = (event, property) => {
+      // stop propagation, since the timepicker should not expose the events of the underlying item-picker
+      event.stopPropagation();
+      // update the internal state
+      this.internalValue[property] = event.detail;
+      const timeString = createTimeString(this.internalValue, this.format);
+      // fire timepicker's own event
+      this.sixChange.emit({
+        changedProperty: property,
+        value: this.internalValue,
+        valueAsString: timeString,
+      });
+      // update the input value
+      this.value = timeString;
+    };
+    this.handleDocumentMouseDown = (event) => {
+      // Close when clicking outside of the containing element
+      const path = event.composedPath();
+      if (!path.includes(this.host)) {
+        this.closePopup();
+        return;
+      }
+    };
+    this.handleClearClick = (event) => {
+      event.stopPropagation();
+      this.value = undefined;
+      this.sixClear.emit();
+    };
+  }
+  async resizeHandler() {
+    this.calcIsPopupContentUp();
+    this.moveOpenHoistedPopup();
+  }
+  async scrollHandler() {
+    this.calcIsPopupContentUp();
+    this.moveOpenHoistedPopup();
+  }
+  debounceChanged() {
+    this.eventListeners.removeByIdentifier(DEBOUNCE_TIMEPICKER_LISTENER);
+    this.eventListeners.add(this.host, 'six-timepicker-change', debounce(this.handleSixTimepickerChangeDebounced, this.debounce), DEBOUNCE_TIMEPICKER_LISTENER);
+  }
+  /**
+   * Update the native input element when the value changes
+   */
+  valueChanged(newValue) {
+    if (this.value !== newValue) {
+      this.value = newValue;
+    }
+    this.setupInternalTime();
+    this.sixChange.emit({
+      value: this.internalValue,
+      valueAsString: createTimeString(this.internalValue, this.format),
+    });
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.inputElement.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.inputElement.checkValidity();
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    await this.inputElement.setCustomValidity(message);
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.internalValue = this.defaultValue;
+    this.inputElement.value = createTimeString(this.internalValue, this.format);
+    await this.inputElement.reset();
+  }
+  componentWillLoad() {
+    this.setupInternalTime();
+    if (this.inline) {
+      this.open = true;
+    }
+    if (this.open) {
+      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+    }
+  }
+  componentDidLoad() {
+    this.eventListeners.add(this.host, 'six-timepicker-change', debounce(this.handleSixTimepickerChangeDebounced, this.debounce), DEBOUNCE_TIMEPICKER_LISTENER);
+    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  calcIsPopupContentUp() {
+    if (!this.inputElement || !this.wrapper) {
+      return;
+    }
+    const inputBoundingRect = this.inputElement.getBoundingClientRect();
+    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
+    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
+    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
+    this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
+  }
+  /*
+   * The position of the hoisted timepicker needs to be correctly calculated since the position changes to fixed.
+   * Thus if the user scrolls or adjusts the screen size we need to recalculate the timepicker position.
+   */
+  moveOpenHoistedPopup() {
+    if (!this.hoist || !this.open) {
+      return;
+    }
+    const popupBoundingClientRect = this.popup.getBoundingClientRect();
+    const popupHeight = popupBoundingClientRect.height;
+    const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
+    const inputTop = inputBoundingClientRect.top;
+    const inputHeight = inputBoundingClientRect.height;
+    this.calcIsPopupContentUp();
+    if (this.isPopupContentUp) {
+      this.popup.style.top = `${inputTop - popupHeight}px`;
+    }
+    else {
+      this.popup.style.top = `${inputTop + inputHeight}px`;
+    }
+  }
+  getSixTimeUnitPicker(params) {
+    return (h("six-item-picker", { class: params.class, timeout: this.timeout, interval: this.interval, padded: true, min: params.min, max: params.max, value: this.internalValue[params.propertyName], items: params.items, type: params.type || ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handleChange(event, params.propertyName) }));
+  }
+  setupInternalTime() {
+    if (this.is12HourClock() && !this.format.includes(TIME_FORMAT_CHAR.PERIOD)) {
+      console.error(`${TAG} You provided a 12-hour-clock format but are missing the period (am or pm) in the time-format-string!`);
+    }
+    if (this.value === null || this.value === undefined) {
+      this.internalValue = isNil(this.defaultTime)
+        ? getCurrentTime(this.is24HourClock())
+        : parseTimeString(this.defaultTime, this.format);
+    }
+    else {
+      this.internalValue = parseTimeString(this.value, this.format);
+    }
+    this.defaultValue = this.internalValue;
+  }
+  getHour24Picker() {
+    if (!this.is24HourClock()) {
+      return;
+    }
+    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: SixTimePropertyName.HOURS });
+  }
+  is24HourClock() {
+    return this.format.includes(TIME_FORMAT_CHAR.HOUR_24);
+  }
+  getHour12Picker() {
+    if (!this.is12HourClock()) {
+      return;
+    }
+    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: SixTimePropertyName.HOURS });
+  }
+  is12HourClock() {
+    return this.format.includes(TIME_FORMAT_CHAR.HOUR_12);
+  }
+  getAmPmPicker() {
+    if (!this.is12HourClock()) {
+      return;
+    }
+    const items = ['AM', 'PM'];
+    return this.getSixTimeUnitPicker({
+      items,
+      type: ItemPickerType.CUSTOM,
+      propertyName: SixTimePropertyName.PERIOD,
+    });
+  }
+  getMinutePicker() {
+    if (!this.format.includes(TIME_FORMAT_CHAR.MINUTE)) {
+      return;
+    }
+    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.MINUTES });
+  }
+  getSecondsPicker() {
+    if (!this.format.includes(TIME_FORMAT_CHAR.SECOND)) {
+      return;
+    }
+    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.SECONDS });
+  }
+  getMillisecondsPicker() {
+    if (!this.format.includes(TIME_FORMAT_CHAR.MILLISECOND)) {
+      return;
+    }
+    return this.getSixTimeUnitPicker({
+      min: 0,
+      max: 999,
+      class: 'timepicker__item--wide',
+      paddingLength: 3,
+      propertyName: SixTimePropertyName.MILLISECONDS,
+    });
+  }
+  getSeparator() {
+    return (h("div", { class: "timepicker__separator" },
+      h("span", null, this.separator)));
+  }
+  getContent() {
+    const elementsInOrder = [
+      this.getHour24Picker(),
+      this.getHour12Picker(),
+      this.getMinutePicker(),
+      this.getSecondsPicker(),
+      this.getMillisecondsPicker(),
+    ];
+    const visibleElements = elementsInOrder.filter((el) => el !== undefined);
+    return visibleElements.map((el, idx) => {
+      if (idx === visibleElements.length - 1) {
+        return [el];
+      }
+      return [el, this.getSeparator()];
+    });
+  }
+  openPopup() {
+    if (!this.open && !this.disabled) {
+      this.open = true;
+      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+    }
+  }
+  closePopup() {
+    if (this.inline) {
+      return;
+    }
+    this.open = false;
+    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+  }
+  renderClearable() {
+    return (this.clearable && (h("button", { slot: "suffix", class: {
+        timepicker_clear: true,
+        'timepicker_clear--right': this.iconPosition === 'left',
+        'timepicker_clear--left': this.iconPosition === 'right',
+      }, type: "button", onClick: this.handleClearClick, tabindex: "-1" },
+      h("six-icon", { size: "small" }, "clear"))));
+  }
+  renderCustomIcon() {
+    const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "watch_later"));
+    return (h("span", { slot: "prefix", part: "icon", class: {
+        prefix: true,
+        'prefix--right': this.iconPosition === 'right',
+      } }, icon));
+  }
+  calcIsDropDownContentUp() {
+    if (!this.inputElement || !this.wrapper) {
+      return;
+    }
+    const inputBoundingRect = this.inputElement.getBoundingClientRect();
+    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
+    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
+    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
+    this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
+  }
+  /*
+   * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
+   * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
+   */
+  adjustPopupForHoisting() {
+    if (!this.hoist) {
+      return;
+    }
+    // execute after dropdown has been rendered to make sure the popup reference is correctly set
+    setTimeout(() => {
+      if (!this.popup) {
+        return;
+      }
+      // take a snapshot of normally rendered popup
+      const popupBoundingClientRect = this.popup.getBoundingClientRect();
+      // apply screen position to fixed popup
+      this.popup.style.position = 'fixed';
+      ['top', 'left', 'width', 'height'].forEach((property) => {
+        this.popup.style[property] = `${popupBoundingClientRect[property]}px`;
+      });
+      const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
+      const inputTop = inputBoundingClientRect.top;
+      const popupTop = popupBoundingClientRect.top;
+      this.calcIsDropDownContentUp();
+      // check screen position to check whether the popup should be moved above or below the trigger element
+      if (this.isDropDownContentUp && inputTop < popupTop) {
+        //  move popup above input field if timepicker is at bottom of screen
+        this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;
+      }
+    }, 0);
+  }
+  render() {
+    this.adjustPopupForHoisting();
+    return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" },
+      h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, size: this.size, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, class: {
+          'input--empty': !this.value,
+          'input--hide': this.inline,
+        } },
+        this.renderCustomIcon(),
+        this.renderClearable(),
+        hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" },
+          h("slot", { name: "error-text" }))) : null,
+        hasSlot(this.host, 'label') ? (h("span", { slot: "label" },
+          h("slot", { name: "label" }))) : null),
+      this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
+          timepicker__popup: true,
+          'timepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isPopupContentUp,
+          'timepicker__popup--is-inline': this.inline,
+        } },
+        ...this.getContent(),
+        this.getAmPmPicker()))));
+  }
+  static get is() { return "six-timepicker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-timepicker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-timepicker.css"]
+  }; }
+  static get properties() { return {
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SixTimeFormat",
+        "resolved": "SixTimeFormat.HH | SixTimeFormat.HHmm | SixTimeFormat.HHmmss | SixTimeFormat.HHmmssms | SixTimeFormat.hhaa | SixTimeFormat.hhmmaa | SixTimeFormat.hhmmssaa | SixTimeFormat.hhmmssmsaa | SixTimeFormat.mm | SixTimeFormat.ms | SixTimeFormat.ss",
+        "references": {
+          "SixTimeFormat": {
+            "location": "import",
+            "path": "./six-time-format"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define the time format. Valid formats are:\n\nHH:mm:ss\nhh:mm:ss:aa\nHH:mm:ss:ms\nhh:mm:ss:ms:aa\nHH:mm\nhh:mm:aa\nHH\nhh:aa\nmm\nss\nms\n\nwhere HH is the 24 hour format\nand hh is the 12 hour format\n\nPlease notice that when using the 12-hour-clock (hh)\nyou always need a period indicator (aa). So the time can be parsed as either am or pm"
+      },
+      "attribute": "format",
+      "reflect": false,
+      "defaultValue": "SixTimeFormat.HHmmss"
+    },
+    "separator": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define the separator to be shown between the time unit pickers.\nPlease be aware that this property will modify the displayed separator only.\nThe separator for a timestring is always expected to be a colon (eg. '13:52:20')"
+      },
+      "attribute": "separator",
+      "reflect": false,
+      "defaultValue": "TIME_FORMAT_SEPARATOR"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The value of the timepicker provided as a string. The string mast match the provided format (or default format)"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the timepicker should be shown as an inline (always open) component"
+      },
+      "attribute": "inline",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true` the user can only select a time via the timepicker but not directly edit the input field."
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true` the component is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'top' | 'bottom'",
+        "resolved": "\"bottom\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The enforced placement of the dropdown panel."
+      },
+      "attribute": "placement",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Timepicker size."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to make the input a required field."
+      },
+      "attribute": "required",
+      "reflect": true
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder defines what text to be shown on the input element"
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "errorOnBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to display the error text on blur and not when typing"
+      },
+      "attribute": "error-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "errorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's error text. Alternatively, you can use the error-text slot."
+      },
+      "attribute": "error-text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's label. Alternatively, you can use the label slot."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's name attribute."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to add a clear button when the input is populated."
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "iconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right'",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the position of the icon"
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "'left'"
+    },
+    "hoist": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+      },
+      "attribute": "hoist",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "timeout": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours)."
+      },
+      "attribute": "timeout",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+    },
+    "interval": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed."
+      },
+      "attribute": "interval",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
+    },
+    "defaultTime": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format."
+      },
+      "attribute": "default-time",
+      "reflect": false
+    },
+    "debounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\nIf you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\nis a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n(and keep pressed) and once you release"
+      },
+      "attribute": "debounce",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+    }
+  }; }
+  static get states() { return {
+    "isPopupContentUp": {},
+    "isDropDownContentUp": {},
+    "internalValue": {}
+  }; }
+  static get events() { return [{
+      "method": "sixChange",
+      "name": "six-timepicker-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the timepicker's value changes"
+      },
+      "complexType": {
+        "original": "SixTimepickerChange",
+        "resolved": "SixTimepickerChange",
+        "references": {
+          "SixTimepickerChange": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixChangeDebounced",
+      "name": "six-timepicker-change-debounced",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the timepicker's value changes, but debounced"
+      },
+      "complexType": {
+        "original": "SixTimepickerChange",
+        "resolved": "SixTimepickerChange",
+        "references": {
+          "SixTimepickerChange": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixClear",
+      "name": "six-timepicker-clear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the clear button is activated."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "reportValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+        "tags": []
+      }
+    },
+    "checkValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity.",
+        "tags": []
+      }
+    },
+    "setCustomValidity": {
+      "complexType": {
+        "signature": "(message: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+        "tags": []
+      }
+    },
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resets the formcontrol",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "debounce",
+      "methodName": "debounceChanged"
+    }, {
+      "propName": "value",
+      "methodName": "valueChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "resizeHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "scroll",
+      "method": "scrollHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}