@six-group/ui-library 4.0.0-beta.0 → 4.0.0-beta.2

package/dist/components/six-timepicker2.js

@@ -6,71 +6,101 @@ import { h as hasSlot } from './slot.js';
 import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-input2.js';
 
-const isString = (value) => typeof value === 'string';
-// only use '==' instead of '===' to also catch undefined and void
-const isNil = (value) => value == null;
-const isDate = (value) => value instanceof Date;
-const isNumber = (value) => value === 'number';
-
-/*
- * Defines the different time periods for the 12-hour-clock
+/**
+ * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
+ * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
  */
-var SixTimePeriod;
-(function (SixTimePeriod) {
-  SixTimePeriod["AM"] = "AM";
-  SixTimePeriod["PM"] = "PM";
-})(SixTimePeriod || (SixTimePeriod = {}));
-var SixTimePropertyName;
-(function (SixTimePropertyName) {
-  SixTimePropertyName["HOURS"] = "hours";
-  SixTimePropertyName["MINUTES"] = "minutes";
-  SixTimePropertyName["SECONDS"] = "seconds";
-  SixTimePropertyName["MILLISECONDS"] = "milliseconds";
-  SixTimePropertyName["HAS_24_HOURS"] = "has24Hours";
-  SixTimePropertyName["PERIOD"] = "period";
-})(SixTimePropertyName || (SixTimePropertyName = {}));
+function adjustPopupForHoisting(hoist, popup, inputElement, wrapper, minPopupHeight, dropdownDirectionChanged) {
+  if (!hoist || popup == null || inputElement == null || wrapper == null) {
+    return;
+  }
+  // take a snapshot of normally rendered popup
+  const popupDimensions = setPopupAsFixPosition(popup);
+  const inputDimensions = inputElement.getBoundingClientRect();
+  const inputTop = inputDimensions.top;
+  const popupTop = popupDimensions.top;
+  const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);
+  // check screen position to check whether the popup should be moved above or below the trigger element
+  if (isUp && inputTop < popupTop) {
+    //  move popup above input field if datepicker is at bottom of screen
+    popup.style.top = `${popupTop - popupDimensions.height - inputDimensions.height}px`;
+  }
+  dropdownDirectionChanged(isUp);
+}
 /*
- * Defines the different time units allowed to use in a timestring
+ * For small screens the datepicker popup could be cut-off even though there might still be space within the viewport.
+ * This is because the popup is always aligned with the trigger input field. However in the scenario of small screens
+ * we should reposition the popup to use the space available.
  */
-var TIME_FORMAT_CHAR;
-(function (TIME_FORMAT_CHAR) {
-  TIME_FORMAT_CHAR["HOUR_24"] = "HH";
-  TIME_FORMAT_CHAR["HOUR_12"] = "hh";
-  TIME_FORMAT_CHAR["MINUTE"] = "mm";
-  TIME_FORMAT_CHAR["SECOND"] = "ss";
-  TIME_FORMAT_CHAR["MILLISECOND"] = "ms";
-  TIME_FORMAT_CHAR["PERIOD"] = "aa";
-})(TIME_FORMAT_CHAR || (TIME_FORMAT_CHAR = {}));
+function adjustPopupForSmallScreens(popup) {
+  // execute after dropdown has been rendered to make sure the popup reference is correctly set
+  setTimeout(() => {
+    if (popup == null) {
+      return;
+    }
+    const popupDimensions = popup.getBoundingClientRect();
+    if (popupDimensions.y < 0 &&
+      window.innerHeight - popupDimensions.height > 0 &&
+      Math.abs(popupDimensions.y) <= popupDimensions.height) {
+      // handle case where popup is cut-off on top but there is still space available
+      setPopupAsFixPosition(popup);
+      popup.style.top = '0px';
+    }
+    else if (window.innerHeight < popupDimensions.y + popupDimensions.height &&
+      window.innerHeight > popupDimensions.height &&
+      Math.abs(popupDimensions.y - window.innerHeight) <= popupDimensions.height) {
+      // handle case where popup is cut-off at the bottom but there is still space available above
+      // apply screen position to fixed popup
+      setPopupAsFixPosition(popup);
+      popup.style.top = `${window.innerHeight - popupDimensions.height}px`;
+    }
+    if (window.innerWidth < popupDimensions.x + popupDimensions.width &&
+      window.innerWidth > popupDimensions.width &&
+      Math.abs(popupDimensions.x - window.innerWidth) <= popupDimensions.width) {
+      // handle case where popup is cut-off to the right
+      setPopupAsFixPosition(popup);
+      popup.style.left = `${window.innerWidth - popupDimensions.width}px`;
+    }
+  }, 0);
+}
+function calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight) {
+  const inputBoundingRect = inputElement.getBoundingClientRect();
+  const wrapperBoundingRect = wrapper.getBoundingClientRect();
+  const popupHeight = Math.max(wrapperBoundingRect.height, minPopupHeight);
+  const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
+  return moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + popupHeight;
+}
+function setPopupAsFixPosition(popup) {
+  const popupDimensions = popup.getBoundingClientRect();
+  popup.style.position = 'fixed';
+  popup.style.top = popupDimensions['top'] + 'px';
+  popup.style.left = popupDimensions['left'] + 'px';
+  popup.style.width = popupDimensions['width'] + 'px';
+  popup.style.height = popupDimensions['height'] + 'px';
+  return popupDimensions;
+}
 /*
- * Defines a mapping from the time format unit characters to the sixTime property name
+ * The position of the hoisted datepicker needs to be correctly calculated since the position changes to fixed.
+ * Thus if the user scrolls or adjusts the screen size we need to recalculate the datepicker position.
  */
-const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP = {
-  [TIME_FORMAT_CHAR.HOUR_24]: 'hours',
-  [TIME_FORMAT_CHAR.HOUR_12]: 'hours',
-  [TIME_FORMAT_CHAR.MINUTE]: 'minutes',
-  [TIME_FORMAT_CHAR.SECOND]: 'seconds',
-  [TIME_FORMAT_CHAR.MILLISECOND]: 'milliseconds',
-  [TIME_FORMAT_CHAR.PERIOD]: 'period',
-};
-
-var SixTimeFormat;
-(function (SixTimeFormat) {
-  SixTimeFormat["HHmmss"] = "HH:mm:ss";
-  SixTimeFormat["hhmmssaa"] = "hh:mm:ss:aa";
-  SixTimeFormat["HHmmssms"] = "HH:mm:ss:ms";
-  SixTimeFormat["hhmmssmsaa"] = "hh:mm:ss:ms:aa";
-  SixTimeFormat["HHmm"] = "HH:mm";
-  SixTimeFormat["hhmmaa"] = "hh:mm:aa";
-  SixTimeFormat["HH"] = "HH";
-  SixTimeFormat["hhaa"] = "hh:aa";
-  SixTimeFormat["mm"] = "mm";
-  SixTimeFormat["ss"] = "ss";
-  SixTimeFormat["ms"] = "ms";
-})(SixTimeFormat || (SixTimeFormat = {}));
+function movePopup(hoist, open, popup, inputElement, wrapper, minPopupHeight) {
+  if (!hoist || !open || popup == null || inputElement == null || wrapper == null) {
+    return;
+  }
+  const popupBoundingClientRect = popup.getBoundingClientRect();
+  const popupHeight = popupBoundingClientRect.height;
+  const inputBoundingClientRect = inputElement.getBoundingClientRect();
+  const inputTop = inputBoundingClientRect.top;
+  const inputHeight = inputBoundingClientRect.height;
+  const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);
+  if (isUp) {
+    popup.style.top = `${inputTop - popupHeight}px`;
+  }
+  else {
+    popup.style.top = `${inputTop + inputHeight}px`;
+  }
+}
 
-/*
- * Returns the current time in the format of your choice
- */
 const getCurrentTimeIn24Hours = () => {
   const now = new Date();
   return {
@@ -92,60 +122,76 @@ const getCurrentTimeIn12Hours = () => {
     seconds: now.getSeconds(),
     milliseconds: now.getMilliseconds(),
     has24Hours: false,
-    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? SixTimePeriod.PM : SixTimePeriod.AM,
+    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',
   };
 };
 const getCurrentTime = (has24Hours = true) => {
   return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();
 };
-const TIME_FORMAT_SEPARATOR = ':';
 const isValidTimeString = (timeStr, format) => {
-  const timeStringParts = timeStr.split(TIME_FORMAT_SEPARATOR);
-  const timeFormatParts = format.split(TIME_FORMAT_SEPARATOR);
+  const timeStringParts = timeStr.split(':');
+  const timeFormatParts = format.split(':');
   return timeStringParts.length === timeFormatParts.length;
 };
 const parseTimeString = (timeStr, format) => {
-  const timeStringParts = timeStr.split(TIME_FORMAT_SEPARATOR);
-  const timeFormatParts = format.split(TIME_FORMAT_SEPARATOR);
+  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 sixTime = {};
-  timeStringParts.forEach((timeStringPart, i) => {
-    const formatStringPart = timeFormatParts[i];
-    const sixTimePropertyName = TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP[formatStringPart];
-    if (sixTimePropertyName !== undefined) {
-      if (formatStringPart === TIME_FORMAT_CHAR.PERIOD) {
-        sixTime.period = timeStringPart.toUpperCase() === SixTimePeriod.PM ? SixTimePeriod.PM : SixTimePeriod.AM;
-      }
-      else {
-        sixTime[sixTimePropertyName] = Number(timeStringPart);
-      }
-    }
-    if (formatStringPart === TIME_FORMAT_CHAR.HOUR_24) {
-      sixTime.has24Hours = true;
-    }
-    else if (formatStringPart === TIME_FORMAT_CHAR.HOUR_12) {
-      sixTime.has24Hours = false;
+  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 sixTime;
+  return time;
 };
 const createTimeString = (time, format) => {
-  return format
-    .split(TIME_FORMAT_SEPARATOR)
+  if (time == null) {
+    return '';
+  }
+  const formatParts = format.split(':');
+  return formatParts
     .map((timeFormatPart) => {
-    const sixTimePropertyName = TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP[timeFormatPart];
-    const paddingLength = timeFormatPart === TIME_FORMAT_CHAR.MILLISECOND ? 3 : 2;
-    return String(time[sixTimePropertyName]).padStart(paddingLength, '0');
+    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(TIME_FORMAT_SEPARATOR);
+    .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 TAG = `[SIX-TIMEPICKER]`;
-const DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';
 const MIN_POPUP_HEIGHT = 145;
 const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker extends HTMLElement {
   constructor() {
@@ -156,43 +202,28 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     this.sixChangeDebounced = createEvent(this, "six-timepicker-change-debounced", 7);
     this.sixClear = createEvent(this, "six-timepicker-clear", 7);
     this.eventListeners = new EventListeners();
-    this.defaultValue = null;
-    this.handleInputChange = (event) => {
+    this.handlePickerChange = (event, property) => {
+      // stop propagation, since the timepicker should not expose the events of the underlying item-picker
       event.stopPropagation();
-      const inputValue = this.inputElement.value;
-      if (!isValidTimeString(inputValue, this.format)) {
-        this.sixChange.emit({
-          value: {},
-          valueAsString: '',
-        });
+      if (this.popupValue == null) {
         return;
       }
-      this.internalValue = parseTimeString(inputValue, this.format);
-      this.sixChange.emit({
-        value: this.internalValue,
-        valueAsString: createTimeString(this.internalValue, this.format),
-      });
-    };
-    this.handleSixTimepickerChangeDebounced = ({ detail }) => {
-      this.sixChangeDebounced.emit(detail);
-    };
-    this.handleChange = (event, property) => {
-      // stop propagation, since the timepicker should not expose the events of the underlying item-picker
-      event.stopPropagation();
       // update the internal state
-      this.internalValue[property] = event.detail;
-      const timeString = createTimeString(this.internalValue, this.format);
-      // fire timepicker's own event
+      // 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.internalValue,
+        value: this.popupValue,
         valueAsString: timeString,
       });
-      // update the input value
-      this.value = timeString;
     };
     this.handleDocumentMouseDown = (event) => {
-      // Close when clicking outside of the containing element
+      // Close when clicking outside the containing element
       const path = event.composedPath();
       if (!path.includes(this.host)) {
         this.closePopup();
@@ -201,23 +232,27 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     };
     this.handleClearClick = (event) => {
       event.stopPropagation();
-      this.value = undefined;
+      this.value = '';
       this.sixClear.emit();
+      this.sixChange.emit({
+        value: {},
+        valueAsString: '',
+      });
     };
-    this.format = SixTimeFormat.HHmmss;
-    this.separator = TIME_FORMAT_SEPARATOR;
-    this.value = undefined;
+    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 = undefined;
+    this.required = false;
     this.placeholder = undefined;
-    this.errorOnBlur = false;
     this.errorText = '';
     this.label = '';
+    this.invalid = false;
     this.name = '';
     this.clearable = false;
     this.iconPosition = 'left';
@@ -228,7 +263,7 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     this.debounce = DEFAULT_DEBOUNCE_FAST;
     this.isPopupContentUp = false;
     this.isDropDownContentUp = false;
-    this.internalValue = undefined;
+    this.popupValue = {};
   }
   async resizeHandler() {
     this.calcIsPopupContentUp();
@@ -238,43 +273,27 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     this.calcIsPopupContentUp();
     this.moveOpenHoistedPopup();
   }
-  debounceChanged() {
-    this.eventListeners.removeByIdentifier(DEBOUNCE_TIMEPICKER_LISTENER);
-    this.eventListeners.add(this.host, 'six-timepicker-change', debounce(this.handleSixTimepickerChangeDebounced, this.debounce), DEBOUNCE_TIMEPICKER_LISTENER);
-  }
   /**
    * Update the native input element when the value changes
    */
-  valueChanged(newValue) {
-    if (this.value !== newValue) {
-      this.value = newValue;
-    }
-    this.setupInternalTime();
-    this.sixChange.emit({
-      value: this.internalValue,
-      valueAsString: createTimeString(this.internalValue, this.format),
-    });
+  valueChanged() {
+    this.updateValue();
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.inputElement.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.inputElement.checkValidity();
+  invalidChanged(invalid) {
+    if (this.inputElement) {
+      this.inputElement.invalid = invalid;
+    }
   }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    await this.inputElement.setCustomValidity(message);
+  /** Sets focus on the datepickers input. */
+  async setFocus(options) {
+    var _a;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
   }
-  /** Resets the formcontrol */
-  async reset() {
-    this.internalValue = this.defaultValue;
-    this.inputElement.value = createTimeString(this.internalValue, this.format);
-    await this.inputElement.reset();
+  connectedCallback() {
+    this.eventListeners.forward('six-timepicker-change', 'change', this.host);
   }
   componentWillLoad() {
-    this.setupInternalTime();
+    this.updateValue();
     if (this.inline) {
       this.open = true;
     }
@@ -283,14 +302,58 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     }
   }
   componentDidLoad() {
-    this.eventListeners.add(this.host, 'six-timepicker-change', debounce(this.handleSixTimepickerChangeDebounced, this.debounce), DEBOUNCE_TIMEPICKER_LISTENER);
-    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+    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 || !this.wrapper) {
+    if (this.inputElement == null || this.wrapper == null) {
       return;
     }
     const inputBoundingRect = this.inputElement.getBoundingClientRect();
@@ -299,61 +362,32 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
     this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
   }
-  /*
-   * The position of the hoisted timepicker needs to be correctly calculated since the position changes to fixed.
-   * Thus if the user scrolls or adjusts the screen size we need to recalculate the timepicker position.
-   */
   moveOpenHoistedPopup() {
-    if (!this.hoist || !this.open) {
-      return;
-    }
-    const popupBoundingClientRect = this.popup.getBoundingClientRect();
-    const popupHeight = popupBoundingClientRect.height;
-    const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-    const inputTop = inputBoundingClientRect.top;
-    const inputHeight = inputBoundingClientRect.height;
-    this.calcIsPopupContentUp();
-    if (this.isPopupContentUp) {
-      this.popup.style.top = `${inputTop - popupHeight}px`;
-    }
-    else {
-      this.popup.style.top = `${inputTop + inputHeight}px`;
-    }
+    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, value: this.internalValue[params.propertyName], items: params.items, type: params.type || ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handleChange(event, params.propertyName) }));
-  }
-  setupInternalTime() {
-    if (this.is12HourClock() && !this.format.includes(TIME_FORMAT_CHAR.PERIOD)) {
-      console.error(`${TAG} You provided a 12-hour-clock format but are missing the period (am or pm) in the time-format-string!`);
-    }
-    if (this.value === null || this.value === undefined) {
-      this.internalValue = isNil(this.defaultTime)
-        ? getCurrentTime(this.is24HourClock())
-        : parseTimeString(this.defaultTime, this.format);
-    }
-    else {
-      this.internalValue = parseTimeString(this.value, this.format);
-    }
-    this.defaultValue = this.internalValue;
+    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: SixTimePropertyName.HOURS });
+    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });
   }
   is24HourClock() {
-    return this.format.includes(TIME_FORMAT_CHAR.HOUR_24);
+    return this.format.includes('HH');
   }
   getHour12Picker() {
     if (!this.is12HourClock()) {
       return;
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: SixTimePropertyName.HOURS });
+    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });
   }
   is12HourClock() {
-    return this.format.includes(TIME_FORMAT_CHAR.HOUR_12);
+    return this.format.includes('hh');
   }
   getAmPmPicker() {
     if (!this.is12HourClock()) {
@@ -363,23 +397,23 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     return this.getSixTimeUnitPicker({
       items,
       type: ItemPickerType.CUSTOM,
-      propertyName: SixTimePropertyName.PERIOD,
+      propertyName: 'period',
     });
   }
   getMinutePicker() {
-    if (!this.format.includes(TIME_FORMAT_CHAR.MINUTE)) {
+    if (!this.format.includes('mm')) {
       return;
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.MINUTES });
+    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });
   }
   getSecondsPicker() {
-    if (!this.format.includes(TIME_FORMAT_CHAR.SECOND)) {
+    if (!this.format.includes('ss')) {
       return;
     }
-    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.SECONDS });
+    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });
   }
   getMillisecondsPicker() {
-    if (!this.format.includes(TIME_FORMAT_CHAR.MILLISECOND)) {
+    if (!this.format.includes('ms')) {
       return;
     }
     return this.getSixTimeUnitPicker({
@@ -387,7 +421,7 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
       max: 999,
       class: 'timepicker__item--wide',
       paddingLength: 3,
-      propertyName: SixTimePropertyName.MILLISECONDS,
+      propertyName: 'milliseconds',
     });
   }
   getSeparator() {
@@ -436,62 +470,20 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
         'prefix--right': this.iconPosition === 'right',
       } }, icon));
   }
-  calcIsDropDownContentUp() {
-    if (!this.inputElement || !this.wrapper) {
-      return;
-    }
-    const inputBoundingRect = this.inputElement.getBoundingClientRect();
-    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
-    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
-    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
-    this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
-  }
-  /*
-   * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
-   * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
-   */
-  adjustPopupForHoisting() {
-    if (!this.hoist) {
-      return;
-    }
-    // execute after dropdown has been rendered to make sure the popup reference is correctly set
-    setTimeout(() => {
-      if (!this.popup) {
-        return;
-      }
-      // take a snapshot of normally rendered popup
-      const popupBoundingClientRect = this.popup.getBoundingClientRect();
-      // apply screen position to fixed popup
-      this.popup.style.position = 'fixed';
-      ['top', 'left', 'width', 'height'].forEach((property) => {
-        this.popup.style[property] = `${popupBoundingClientRect[property]}px`;
-      });
-      const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-      const inputTop = inputBoundingClientRect.top;
-      const popupTop = popupBoundingClientRect.top;
-      this.calcIsDropDownContentUp();
-      // check screen position to check whether the popup should be moved above or below the trigger element
-      if (this.isDropDownContentUp && inputTop < popupTop) {
-        //  move popup above input field if timepicker is at bottom of screen
-        this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;
-      }
-    }, 0);
-  }
   render() {
-    this.adjustPopupForHoisting();
-    return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, size: this.size, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, class: {
-        'input--empty': !this.value,
+    return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, size: this.size, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, class: {
+        'input--empty': this.value === '',
         'input--hide': this.inline,
-      } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null), this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
+      } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null), this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
         timepicker__popup: true,
-        'timepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isPopupContentUp,
+        'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,
         'timepicker__popup--is-inline': this.inline,
       } }, ...this.getContent(), this.getAmPmPicker()))));
   }
   get host() { return this; }
   static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "value": ["valueChanged"]
+    "value": ["valueChanged"],
+    "invalid": ["invalidChanged"]
   }; }
   static get style() { return sixTimepickerCss; }
 }, [1, "six-timepicker", {
@@ -504,11 +496,11 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     "disabled": [4],
     "placement": [1],
     "size": [1],
-    "required": [516],
+    "required": [4],
     "placeholder": [1],
-    "errorOnBlur": [4, "error-on-blur"],
     "errorText": [1, "error-text"],
     "label": [1],
+    "invalid": [516],
     "name": [513],
     "clearable": [4],
     "iconPosition": [1, "icon-position"],
@@ -519,11 +511,8 @@ const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker exten
     "debounce": [2],
     "isPopupContentUp": [32],
     "isDropDownContentUp": [32],
-    "internalValue": [32],
-    "reportValidity": [64],
-    "checkValidity": [64],
-    "setCustomValidity": [64],
-    "reset": [64]
+    "popupValue": [32],
+    "setFocus": [64]
   }, [[9, "resize", "resizeHandler"], [9, "scroll", "scrollHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -554,6 +543,6 @@ function defineCustomElement() {
   } });
 }
 
-export { SixTimePropertyName as S, isNumber as a, isDate as b, isString as c, defineCustomElement as d, SixTimepicker as e, isNil as i };
+export { SixTimepicker as S, adjustPopupForHoisting as a, adjustPopupForSmallScreens as b, calcIsDropDownContentUp as c, defineCustomElement as d, movePopup as m };
 
 //# sourceMappingURL=six-timepicker2.js.map