@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.daba936

package/dist/cjs/six-timepicker.cjs.entry.js

@@ -2,405 +2,390 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
-const types = require('./types-64878648.js');
-const executionControl = require('./execution-control-45c84c46.js');
-const eventListeners = require('./event-listeners-dd94dcfb.js');
-const slot = require('./slot-bccbdb59.js');
-const popup = require('./popup-44836aaf.js');
+const index = require('./index-5dd19c4b.js');
+const types = require('./types-d3da200b.js');
+const executionControl = require('./execution-control-d728da70.js');
+const eventListeners = require('./event-listeners-9fb878f1.js');
+const slot = require('./slot-1b1232a1.js');
+const popup = require('./popup-e854acda.js');
 
 const getCurrentTimeIn24Hours = () => {
-  const now = new Date();
-  return {
-    hours: now.getHours(),
-    minutes: now.getMinutes(),
-    seconds: now.getSeconds(),
-    milliseconds: now.getMilliseconds(),
-    has24Hours: true,
-  };
+    const now = new Date();
+    return {
+        hours: now.getHours(),
+        minutes: now.getMinutes(),
+        seconds: now.getSeconds(),
+        milliseconds: now.getMilliseconds(),
+        has24Hours: true,
+    };
 };
 const HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;
 const getHoursIn12HourFormat = (hours) => hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;
 const getCurrentTimeIn12Hours = () => {
-  const now = new Date();
-  const hours = now.getHours();
-  return {
-    hours: getHoursIn12HourFormat(hours),
-    minutes: now.getMinutes(),
-    seconds: now.getSeconds(),
-    milliseconds: now.getMilliseconds(),
-    has24Hours: false,
-    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',
-  };
+    const now = new Date();
+    const hours = now.getHours();
+    return {
+        hours: getHoursIn12HourFormat(hours),
+        minutes: now.getMinutes(),
+        seconds: now.getSeconds(),
+        milliseconds: now.getMilliseconds(),
+        has24Hours: false,
+        period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',
+    };
 };
 const getCurrentTime = (has24Hours = true) => {
-  return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();
+    return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();
 };
 const isValidTimeString = (timeStr, format) => {
-  const timeStringParts = timeStr.split(':');
-  const timeFormatParts = format.split(':');
-  return timeStringParts.length === timeFormatParts.length;
+    const timeStringParts = timeStr.split(':');
+    const timeFormatParts = format.split(':');
+    return timeStringParts.length === timeFormatParts.length;
 };
 const parseTimeString = (timeStr, format) => {
-  const timeParts = timeStr.split(':');
-  const formatParts = format.split(':');
-  if (!isValidTimeString(timeStr, format)) {
-    console.error(`Timestring did not match expected format.\nExpected format: ${format}\nReceived timestring: ${timeStr}`);
-  }
-  const time = {};
-  timeParts.forEach((timeStringPart, i) => {
-    const formatStringPart = formatParts[i];
-    switch (formatStringPart) {
-      case 'HH':
-        time.hours = Number(timeStringPart);
-        time.has24Hours = true;
-        break;
-      case 'hh':
-        time.hours = Number(timeStringPart);
-        time.has24Hours = false;
-        break;
-      case 'mm':
-        time.minutes = Number(timeStringPart);
-        break;
-      case 'ss':
-        time.seconds = Number(timeStringPart);
-        break;
-      case 'ms':
-        time.milliseconds = Number(timeStringPart);
-        break;
-      case 'aa':
-        time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';
+    const timeParts = timeStr.split(':');
+    const formatParts = format.split(':');
+    if (!isValidTimeString(timeStr, format)) {
+        console.error(`Timestring did not match expected format.\nExpected format: ${format}\nReceived timestring: ${timeStr}`);
     }
-  });
-  return time;
+    const time = {};
+    timeParts.forEach((timeStringPart, i) => {
+        const formatStringPart = formatParts[i];
+        switch (formatStringPart) {
+            case 'HH':
+                time.hours = Number(timeStringPart);
+                time.has24Hours = true;
+                break;
+            case 'hh':
+                time.hours = Number(timeStringPart);
+                time.has24Hours = false;
+                break;
+            case 'mm':
+                time.minutes = Number(timeStringPart);
+                break;
+            case 'ss':
+                time.seconds = Number(timeStringPart);
+                break;
+            case 'ms':
+                time.milliseconds = Number(timeStringPart);
+                break;
+            case 'aa':
+                time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';
+        }
+    });
+    return time;
 };
 const createTimeString = (time, format) => {
-  if (time == null) {
-    return '';
-  }
-  const formatParts = format.split(':');
-  return formatParts
-    .map((timeFormatPart) => {
-    switch (timeFormatPart) {
-      case 'HH':
-      case 'hh':
-        return String(time.hours).padStart(2, '0');
-      case 'mm':
-        return String(time.minutes).padStart(2, '0');
-      case 'ss':
-        return String(time.seconds).padStart(2, '0');
-      case 'ms':
-        return String(time.milliseconds).padStart(3, '0');
-      case 'aa':
-        return String(time.period);
+    if (time == null) {
+        return '';
     }
-  })
-    .join(':');
+    const formatParts = format.split(':');
+    return formatParts
+        .map((timeFormatPart) => {
+        switch (timeFormatPart) {
+            case 'HH':
+            case 'hh':
+                return String(time.hours).padStart(2, '0');
+            case 'mm':
+                return String(time.minutes).padStart(2, '0');
+            case 'ss':
+                return String(time.seconds).padStart(2, '0');
+            case 'ms':
+                return String(time.milliseconds).padStart(3, '0');
+            case 'aa':
+                return String(time.period);
+        }
+    })
+        .join(':');
 };
 
-const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
+const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
 
 const MIN_POPUP_HEIGHT = 145;
 const SixTimepicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixChange = index.createEvent(this, "six-timepicker-change", 7);
-    this.sixChangeDebounced = index.createEvent(this, "six-timepicker-change-debounced", 7);
-    this.sixClear = index.createEvent(this, "six-timepicker-clear", 7);
-    this.eventListeners = new eventListeners.EventListeners();
-    this.defaultValue = {};
-    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.errorOnBlur = false;
-    this.errorText = '';
-    this.label = '';
-    this.name = '';
-    this.clearable = false;
-    this.iconPosition = 'left';
-    this.hoist = false;
-    this.timeout = executionControl.DEFAULT_DEBOUNCE_FAST;
-    this.interval = executionControl.DEFAULT_DEBOUNCE_INSANELY_FAST;
-    this.defaultTime = undefined;
-    this.debounce = executionControl.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();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checkValidity();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    var _a;
-    await ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message));
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.popupValue = this.defaultValue;
-    if (this.inputElement != null) {
-      this.inputElement.value = createTimeString(this.popupValue, this.format);
-      await this.inputElement.reset();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixChange = index.createEvent(this, "six-timepicker-change", 7);
+        this.sixChangeDebounced = index.createEvent(this, "six-timepicker-change-debounced", 7);
+        this.sixClear = index.createEvent(this, "six-timepicker-clear", 7);
+        this.eventListeners = new eventListeners.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 = executionControl.DEFAULT_DEBOUNCE_FAST;
+        this.interval = executionControl.DEFAULT_DEBOUNCE_INSANELY_FAST;
+        this.defaultTime = undefined;
+        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+        this.isPopupContentUp = false;
+        this.isDropDownContentUp = false;
+        this.popupValue = {};
     }
-  }
-  componentWillLoad() {
-    this.updateValue();
-    this.defaultValue = this.popupValue;
-    if (this.inline) {
-      this.open = true;
+    async resizeHandler() {
+        this.calcIsPopupContentUp();
+        this.moveOpenHoistedPopup();
     }
-    if (this.open) {
-      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+    async scrollHandler() {
+        this.calcIsPopupContentUp();
+        this.moveOpenHoistedPopup();
     }
-  }
-  componentDidLoad() {
-    if (this.inputElement == null)
-      return;
-    const inputElement = this.inputElement;
-    // emit debounced change event
-    this.eventListeners.add(this.host, 'six-timepicker-change', executionControl.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', executionControl.debounce((event) => {
-      event.stopPropagation();
-      // emit empty event if time string is invalid
-      if (!isValidTimeString(inputElement.value, this.format)) {
-        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() {
-    popup.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 the native input element when the value changes
+     */
+    valueChanged() {
+        this.updateValue();
     }
-    // update popup value
-    if (this.value === '') {
-      if (this.defaultTime == null) {
-        this.popupValue = getCurrentTime(this.is24HourClock());
-      }
-      else {
-        this.popupValue = parseTimeString(this.defaultTime, this.format);
-      }
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
     }
-    else {
-      this.popupValue = parseTimeString(this.value, this.format);
+    connectedCallback() {
+        this.eventListeners.forward('six-timepicker-change', 'change', this.host);
     }
-  }
-  calcIsPopupContentUp() {
-    if (this.inputElement == null || this.wrapper == null) {
-      return;
+    componentWillLoad() {
+        this.updateValue();
+        if (this.inline) {
+            this.open = true;
+        }
+        if (this.open) {
+            this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+        }
     }
-    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() {
-    popup.movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
-  }
-  getSixTimeUnitPicker(params) {
-    return (index.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 || types.ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handlePickerChange(event, params.propertyName) }));
-  }
-  getHour24Picker() {
-    if (!this.is24HourClock()) {
-      return;
+    componentDidLoad() {
+        if (this.inputElement == null)
+            return;
+        const inputElement = this.inputElement;
+        // emit debounced change event
+        this.eventListeners.add(this.host, 'six-timepicker-change', executionControl.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', executionControl.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));
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });
-  }
-  is24HourClock() {
-    return this.format.includes('HH');
-  }
-  getHour12Picker() {
-    if (!this.is12HourClock()) {
-      return;
+    componentDidRender() {
+        popup.adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });
-  }
-  is12HourClock() {
-    return this.format.includes('hh');
-  }
-  getAmPmPicker() {
-    if (!this.is12HourClock()) {
-      return;
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
     }
-    const items = ['AM', 'PM'];
-    return this.getSixTimeUnitPicker({
-      items,
-      type: types.ItemPickerType.CUSTOM,
-      propertyName: 'period',
-    });
-  }
-  getMinutePicker() {
-    if (!this.format.includes('mm')) {
-      return;
+    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);
+        }
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });
-  }
-  getSecondsPicker() {
-    if (!this.format.includes('ss')) {
-      return;
+    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;
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });
-  }
-  getMillisecondsPicker() {
-    if (!this.format.includes('ms')) {
-      return;
+    moveOpenHoistedPopup() {
+        popup.movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
     }
-    return this.getSixTimeUnitPicker({
-      min: 0,
-      max: 999,
-      class: 'timepicker__item--wide',
-      paddingLength: 3,
-      propertyName: 'milliseconds',
-    });
-  }
-  getSeparator() {
-    return (index.h("div", { class: "timepicker__separator" }, index.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);
+    getSixTimeUnitPicker(params) {
+        return (index.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 || types.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: types.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 (index.h("div", { class: "timepicker__separator" }, index.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 && (index.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" }, index.h("six-icon", { size: "small" }, "clear"))));
+    }
+    renderCustomIcon() {
+        const icon = slot.hasSlot(this.host, 'custom-icon') ? (index.h("slot", { name: "custom-icon" })) : (index.h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "watch_later"));
+        return (index.h("span", { slot: "prefix", part: "icon", class: {
+                prefix: true,
+                'prefix--right': this.iconPosition === 'right',
+            } }, icon));
     }
-  }
-  closePopup() {
-    if (this.inline) {
-      return;
+    render() {
+        return (index.h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, index.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(), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null), this.open && (index.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()))));
     }
-    this.open = false;
-    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
-  }
-  renderClearable() {
-    return (this.clearable && (index.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" }, index.h("six-icon", { size: "small" }, "clear"))));
-  }
-  renderCustomIcon() {
-    const icon = slot.hasSlot(this.host, 'custom-icon') ? (index.h("slot", { name: "custom-icon" })) : (index.h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "watch_later"));
-    return (index.h("span", { slot: "prefix", part: "icon", class: {
-        prefix: true,
-        'prefix--right': this.iconPosition === 'right',
-      } }, icon));
-  }
-  render() {
-    return (index.h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, index.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(), slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null, slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null), this.open && (index.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()))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
 };
 SixTimepicker.style = sixTimepickerCss;