@six-group/ui-library 0.0.0-insider.e5360cd → 0.0.0-insider.e8b5a11

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

@@ -18,836 +18,944 @@ const MIN_POPUP_HEIGHT = 145;
  *
  */
 export class SixTimepicker {
-  constructor() {
-    this.eventListeners = new EventListeners();
-    this.handlePickerChange = (event, property) => {
-      // stop propagation, since the timepicker should not expose the events of the underlying item-picker
-      event.stopPropagation();
-      if (this.popupValue == null) {
-        return;
-      }
-      // update the internal state
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      this.popupValue[property] = event.detail;
-      const timeString = createTimeString(this.popupValue, this.format);
-      // update the input value
-      this.value = timeString;
-      // emit change event
-      this.sixChange.emit({
-        changedProperty: property,
-        value: this.popupValue,
-        valueAsString: timeString,
-      });
-    };
-    this.handleDocumentMouseDown = (event) => {
-      // Close when clicking outside the containing element
-      const path = event.composedPath();
-      if (!path.includes(this.host)) {
-        this.closePopup();
-        return;
-      }
-    };
-    this.handleClearClick = (event) => {
-      event.stopPropagation();
-      this.value = '';
-      this.sixClear.emit();
-      this.sixChange.emit({
-        value: {},
-        valueAsString: '',
-      });
-    };
-    this.format = 'HH:mm:ss';
-    this.separator = ':';
-    this.value = '';
-    this.open = false;
-    this.inline = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.placement = undefined;
-    this.size = 'medium';
-    this.required = false;
-    this.placeholder = undefined;
-    this.errorText = '';
-    this.errorTextCount = undefined;
-    this.label = '';
-    this.invalid = false;
-    this.name = '';
-    this.clearable = false;
-    this.iconPosition = 'left';
-    this.hoist = false;
-    this.timeout = DEFAULT_DEBOUNCE_FAST;
-    this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
-    this.defaultTime = undefined;
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.isPopupContentUp = false;
-    this.isDropDownContentUp = false;
-    this.popupValue = {};
-  }
-  async resizeHandler() {
-    this.calcIsPopupContentUp();
-    this.moveOpenHoistedPopup();
-  }
-  async scrollHandler() {
-    this.calcIsPopupContentUp();
-    this.moveOpenHoistedPopup();
-  }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged() {
-    this.updateValue();
-  }
-  /** Sets focus on the datepickers input. */
-  async setFocus(options) {
-    var _a;
-    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
-  }
-  connectedCallback() {
-    this.eventListeners.forward('six-timepicker-change', 'change', this.host);
-  }
-  componentWillLoad() {
-    this.updateValue();
-    if (this.inline) {
-      this.open = true;
-    }
-    if (this.open) {
-      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
-    }
-  }
-  componentDidLoad() {
-    if (this.inputElement == null)
-      return;
-    const inputElement = this.inputElement;
-    // emit debounced change event
-    this.eventListeners.add(this.host, 'six-timepicker-change', debounce((event) => this.sixChangeDebounced.emit(event.detail), this.debounce));
-    // update value and popup value based on input-element value
-    this.eventListeners.add(inputElement, 'six-input-input', debounce((event) => {
-      event.stopPropagation();
-      // emit empty event if time string is invalid
-      if (!isValidTimeString(inputElement.value, this.format)) {
-        this.value = inputElement.value;
-        this.sixChange.emit({
-          value: {},
-          valueAsString: '',
-        });
-        return;
-      }
-      // update value and popup value, and emit the new value
-      this.value = inputElement.value;
-      this.popupValue = parseTimeString(inputElement.value, this.format);
-      this.sixChange.emit({
-        value: this.popupValue,
-        valueAsString: createTimeString(this.popupValue, this.format),
-      });
-    }, this.debounce));
-  }
-  componentDidRender() {
-    adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  updateValue() {
-    // normalize value
-    if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
-      this.value = '';
-    }
-    // update popup value
-    if (this.value === '') {
-      if (this.defaultTime == null) {
-        this.popupValue = getCurrentTime(this.is24HourClock());
-      }
-      else {
-        this.popupValue = parseTimeString(this.defaultTime, this.format);
-      }
-    }
-    else {
-      this.popupValue = parseTimeString(this.value, this.format);
-    }
-  }
-  calcIsPopupContentUp() {
-    if (this.inputElement == null || this.wrapper == null) {
-      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;
-  }
-  moveOpenHoistedPopup() {
-    movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
-  }
-  getSixTimeUnitPicker(params) {
-    return (h("six-item-picker", { class: params.class, timeout: this.timeout, interval: this.interval, padded: true, min: params.min, max: params.max,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      value: this.popupValue[params.propertyName], items: params.items, type: params.type || ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handlePickerChange(event, params.propertyName) }));
-  }
-  getHour24Picker() {
-    if (!this.is24HourClock()) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });
-  }
-  is24HourClock() {
-    return this.format.includes('HH');
-  }
-  getHour12Picker() {
-    if (!this.is12HourClock()) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });
-  }
-  is12HourClock() {
-    return this.format.includes('hh');
-  }
-  getAmPmPicker() {
-    if (!this.is12HourClock()) {
-      return;
-    }
-    const items = ['AM', 'PM'];
-    return this.getSixTimeUnitPicker({
-      items,
-      type: ItemPickerType.CUSTOM,
-      propertyName: 'period',
-    });
-  }
-  getMinutePicker() {
-    if (!this.format.includes('mm')) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });
-  }
-  getSecondsPicker() {
-    if (!this.format.includes('ss')) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });
-  }
-  getMillisecondsPicker() {
-    if (!this.format.includes('ms')) {
-      return;
-    }
-    return this.getSixTimeUnitPicker({
-      min: 0,
-      max: 999,
-      class: 'timepicker__item--wide',
-      paddingLength: 3,
-      propertyName: '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));
-  }
-  render() {
-    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, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
-        'input--empty': this.value === '',
-        'input--hide': this.inline,
-      } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
-        timepicker__popup: true,
-        'timepicker__popup--is-up': this.placement == null ? 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": "TimeFormat",
-          "resolved": "\"HH\" | \"HH:mm\" | \"HH:mm:ss\" | \"HH:mm:ss:ms\" | \"hh:aa\" | \"hh:mm:aa\" | \"hh:mm:ss:aa\" | \"hh:mm:ss:ms:aa\" | \"mm\" | \"ms\" | \"ss\"",
-          "references": {
-            "TimeFormat": {
-              "location": "import",
-              "path": "../../utils/time.util",
-              "id": "src/utils/time.util.ts::TimeFormat"
+    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 = 'HH:mm:ss';
+        /**
+         * 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 = ':';
+        /**
+         * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+         */
+        this.value = '';
+        /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Indicates whether 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 true to show an asterisk beneath the label. */
+        this.required = 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 = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** 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;
+        /*
+         * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,
+         * when switching between formats
+         */
+        this.popupValue = {};
+        this.handlePickerChange = (event, property) => {
+            // stop propagation, since the timepicker should not expose the events of the underlying item-picker
+            event.stopPropagation();
+            if (this.popupValue == null) {
+                return;
             }
-          }
-        },
-        "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": "'HH:mm:ss'"
-      },
-      "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": "':'"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "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,
-        "defaultValue": "''"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether 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 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\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "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 show an asterisk beneath the label."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder defines what text to be shown on the input element"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | 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": "''"
-      },
-      "errorTextCount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
-        },
-        "attribute": "error-text-count",
-        "reflect": false
-      },
-      "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": "''"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "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",
-          "resolved": "string | undefined",
-          "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": {},
-      "popupValue": {}
-    };
-  }
-  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",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-timepicker/six-timepicker.tsx",
-              "id": "src/components/six-timepicker/six-timepicker.tsx::SixTimepickerChange"
+            // update the internal state
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            this.popupValue[property] = event.detail;
+            const timeString = createTimeString(this.popupValue, this.format);
+            // update the input value
+            this.value = timeString;
+            // emit change event
+            this.sixChange.emit({
+                changedProperty: property,
+                value: this.popupValue,
+                valueAsString: timeString,
+            });
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.host)) {
+                this.closePopup();
+                return;
             }
-          }
+        };
+        this.handleClearClick = (event) => {
+            event.stopPropagation();
+            this.value = '';
+            this.sixClear.emit();
+            this.sixChange.emit({
+                value: {},
+                valueAsString: '',
+            });
+        };
+    }
+    async resizeHandler() {
+        this.calcIsPopupContentUp();
+        this.moveOpenHoistedPopup();
+    }
+    async scrollHandler() {
+        this.calcIsPopupContentUp();
+        this.moveOpenHoistedPopup();
+    }
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        this.updateValue();
+    }
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-timepicker-change', 'change', this.host);
+    }
+    componentWillLoad() {
+        this.updateValue();
+        if (this.inline) {
+            this.open = true;
+        }
+        if (this.open) {
+            this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
         }
-      }, {
-        "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",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-timepicker/six-timepicker.tsx",
-              "id": "src/components/six-timepicker/six-timepicker.tsx::SixTimepickerChange"
+    }
+    componentDidLoad() {
+        if (this.inputElement == null)
+            return;
+        const inputElement = this.inputElement;
+        // emit debounced change event
+        this.eventListeners.add(this.host, 'six-timepicker-change', debounce((event) => this.sixChangeDebounced.emit(event.detail), this.debounce));
+        // update value and popup value based on input-element value
+        this.eventListeners.add(inputElement, 'six-input-input', debounce((event) => {
+            event.stopPropagation();
+            // emit empty event if time string is invalid
+            if (!isValidTimeString(inputElement.value, this.format)) {
+                this.value = inputElement.value;
+                this.sixChange.emit({
+                    value: {},
+                    valueAsString: '',
+                });
+                return;
             }
-          }
+            // update value and popup value, and emit the new value
+            this.value = inputElement.value;
+            this.popupValue = parseTimeString(inputElement.value, this.format);
+            this.sixChange.emit({
+                value: this.popupValue,
+                valueAsString: createTimeString(this.popupValue, this.format),
+            });
+        }, this.debounce));
+    }
+    componentDidRender() {
+        adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    updateValue() {
+        // normalize value
+        if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
+            this.value = '';
         }
-      }, {
-        "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",
-              "id": "src/utils/types.ts::EmptyPayload"
+        // update popup value
+        if (this.value === '') {
+            if (this.defaultTime == null) {
+                this.popupValue = getCurrentTime(this.is24HourClock());
+            }
+            else {
+                this.popupValue = parseTimeString(this.defaultTime, this.format);
             }
-          }
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+        else {
+            this.popupValue = parseTimeString(this.value, this.format);
+        }
+    }
+    calcIsPopupContentUp() {
+        if (this.inputElement == null || this.wrapper == null) {
+            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;
+    }
+    moveOpenHoistedPopup() {
+        movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    getSixTimeUnitPicker(params) {
+        return (h("six-item-picker", { class: params.class, timeout: this.timeout, interval: this.interval, padded: true, min: params.min, max: params.max,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            value: this.popupValue[params.propertyName], items: params.items, type: params.type || ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handlePickerChange(event, params.propertyName) }));
+    }
+    getHour24Picker() {
+        if (!this.is24HourClock()) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });
+    }
+    is24HourClock() {
+        return this.format.includes('HH');
+    }
+    getHour12Picker() {
+        if (!this.is12HourClock()) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });
+    }
+    is12HourClock() {
+        return this.format.includes('hh');
+    }
+    getAmPmPicker() {
+        if (!this.is12HourClock()) {
+            return;
+        }
+        const items = ['AM', 'PM'];
+        return this.getSixTimeUnitPicker({
+            items,
+            type: ItemPickerType.CUSTOM,
+            propertyName: 'period',
+        });
+    }
+    getMinutePicker() {
+        if (!this.format.includes('mm')) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });
+    }
+    getSecondsPicker() {
+        if (!this.format.includes('ss')) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });
+    }
+    getMillisecondsPicker() {
+        if (!this.format.includes('ms')) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({
+            min: 0,
+            max: 999,
+            class: 'timepicker__item--wide',
+            paddingLength: 3,
+            propertyName: '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": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the datepickers input.",
-          "tags": []
+            return [el, this.getSeparator()];
+        });
+    }
+    openPopup() {
+        if (!this.open && !this.disabled) {
+            this.open = true;
+            this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
         }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "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
-      }];
-  }
+    }
+    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));
+    }
+    render() {
+        return (h("div", { key: '58240c7c32227225d1811fa59e9cf336aad03a4d', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: '1b6e9b28d997b67a933d055fa3e73e3c0751aa53', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
+                'input--empty': this.value === '',
+                'input--hide': this.inline,
+            } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: 'b762116d0af1bc11d7f2cbb255b071e8fe3b52cf', ref: (el) => (this.popup = el), part: "popup", class: {
+                timepicker__popup: true,
+                'timepicker__popup--is-up': this.placement == null ? 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": "TimeFormat",
+                    "resolved": "\"HH\" | \"HH:mm\" | \"HH:mm:ss\" | \"HH:mm:ss:ms\" | \"hh:aa\" | \"hh:mm:aa\" | \"hh:mm:ss:aa\" | \"hh:mm:ss:ms:aa\" | \"mm\" | \"ms\" | \"ss\"",
+                    "references": {
+                        "TimeFormat": {
+                            "location": "import",
+                            "path": "../../utils/time.util",
+                            "id": "src/utils/time.util.ts::TimeFormat"
+                        }
+                    }
+                },
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "format",
+                "reflect": false,
+                "defaultValue": "'HH:mm:ss'"
+            },
+            "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')"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "separator",
+                "reflect": false,
+                "defaultValue": "':'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the timepicker provided as a string. The string mast match the provided format (or default format)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods."
+                },
+                "getter": false,
+                "setter": false,
+                "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 the timepicker should be shown as an inline (always open) component"
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The enforced placement of the dropdown panel."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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 show an asterisk beneath the label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder defines what text to be shown on the input element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's error text. Alternatively, you can use the error-text slot."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's name attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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`."
+                },
+                "getter": false,
+                "setter": false,
+                "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)."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "interval",
+                "reflect": false,
+                "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
+            },
+            "defaultTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "debounce",
+                "reflect": false,
+                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPopupContentUp": {},
+            "isDropDownContentUp": {},
+            "popupValue": {}
+        };
+    }
+    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",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-timepicker/six-timepicker.tsx",
+                            "id": "src/components/six-timepicker/six-timepicker.tsx::SixTimepickerChange"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-timepicker/six-timepicker.tsx",
+                            "id": "src/components/six-timepicker/six-timepicker.tsx::SixTimepickerChange"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the datepickers input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "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
+            }];
+    }
 }
 //# sourceMappingURL=six-timepicker.js.map