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

package/dist/collection/components/six-tile/six-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-tile.js","sourceRoot":"","sources":["../../../src/components/six-tile/six-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName;\n\n  /** Flag, whether the tile is closeable. */\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  @Prop() disableTooltip: boolean = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"icon\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"label\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n  }\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"]}
+{"version":3,"file":"six-tile.js","sourceRoot":"","sources":["../../../src/components/six-tile/six-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"]}

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

@@ -1,14 +1,10 @@
 import { h } from '@stencil/core';
 import { ItemPickerType } from '../six-item-picker/types';
-import { SixTimeFormat } from './six-time-format';
-import { SixTimePropertyName, TIME_FORMAT_CHAR } from './six-timepicker.types';
-import { createTimeString, getCurrentTime, isValidTimeString, parseTimeString, TIME_FORMAT_SEPARATOR, } from '../../utils/time.util';
+import { createTimeString, getCurrentTime, isValidTimeString, parseTimeString, } from '../../utils/time.util';
 import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
 import { EventListeners } from '../../utils/event-listeners';
 import { hasSlot } from '../../utils/slot';
-import { isNil } from '../../utils/type-check';
-const TAG = `[SIX-TIMEPICKER]`;
-const DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';
+import { adjustPopupForHoisting, movePopup } from '../../utils/popup';
 const MIN_POPUP_HEIGHT = 145;
 /**
  * @since 2.0.0
@@ -22,43 +18,29 @@ const MIN_POPUP_HEIGHT = 145;
 export class SixTimepicker {
   constructor() {
     this.eventListeners = new EventListeners();
-    this.defaultValue = null;
-    this.handleInputChange = (event) => {
+    this.defaultValue = {};
+    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();
@@ -67,19 +49,23 @@ export class SixTimepicker {
     };
     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 = '';
@@ -94,7 +80,7 @@ export class SixTimepicker {
     this.debounce = DEFAULT_DEBOUNCE_FAST;
     this.isPopupContentUp = false;
     this.isDropDownContentUp = false;
-    this.internalValue = undefined;
+    this.popupValue = {};
   }
   async resizeHandler() {
     this.calcIsPopupContentUp();
@@ -104,43 +90,38 @@ export class SixTimepicker {
     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();
+    var _a;
+    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
-    return this.inputElement.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) {
-    await this.inputElement.setCustomValidity(message);
+    var _a;
+    await ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message));
   }
   /** Resets the formcontrol */
   async reset() {
-    this.internalValue = this.defaultValue;
-    this.inputElement.value = createTimeString(this.internalValue, this.format);
-    await this.inputElement.reset();
+    this.popupValue = this.defaultValue;
+    if (this.inputElement != null) {
+      this.inputElement.value = createTimeString(this.popupValue, this.format);
+      await this.inputElement.reset();
+    }
   }
   componentWillLoad() {
-    this.setupInternalTime();
+    this.updateValue();
+    this.defaultValue = this.popupValue;
     if (this.inline) {
       this.open = true;
     }
@@ -149,14 +130,57 @@ export class SixTimepicker {
     }
   }
   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.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();
@@ -165,61 +189,32 @@ export class SixTimepicker {
     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()) {
@@ -229,23 +224,23 @@ export class SixTimepicker {
     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({
@@ -253,7 +248,7 @@ export class SixTimepicker {
       max: 999,
       class: 'timepicker__item--wide',
       paddingLength: 3,
-      propertyName: SixTimePropertyName.MILLISECONDS,
+      propertyName: 'milliseconds',
     });
   }
   getSeparator() {
@@ -302,55 +297,13 @@ export class SixTimepicker {
         'prefix--right': this.iconPosition === 'right',
       } }, icon));
   }
-  calcIsDropDownContentUp() {
-    if (!this.inputElement || !this.wrapper) {
-      return;
-    }
-    const inputBoundingRect = this.inputElement.getBoundingClientRect();
-    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
-    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
-    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
-    this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
-  }
-  /*
-   * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
-   * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
-   */
-  adjustPopupForHoisting() {
-    if (!this.hoist) {
-      return;
-    }
-    // execute after dropdown has been rendered to make sure the popup reference is correctly set
-    setTimeout(() => {
-      if (!this.popup) {
-        return;
-      }
-      // take a snapshot of normally rendered popup
-      const popupBoundingClientRect = this.popup.getBoundingClientRect();
-      // apply screen position to fixed popup
-      this.popup.style.position = 'fixed';
-      ['top', 'left', 'width', 'height'].forEach((property) => {
-        this.popup.style[property] = `${popupBoundingClientRect[property]}px`;
-      });
-      const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-      const inputTop = inputBoundingClientRect.top;
-      const popupTop = popupBoundingClientRect.top;
-      this.calcIsDropDownContentUp();
-      // check screen position to check whether the popup should be moved above or below the trigger element
-      if (this.isDropDownContentUp && inputTop < popupTop) {
-        //  move popup above input field if timepicker is at bottom of screen
-        this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;
-      }
-    }, 0);
-  }
   render() {
-    this.adjustPopupForHoisting();
     return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, size: this.size, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, class: {
-        'input--empty': !this.value,
+        'input--empty': this.value === '',
         'input--hide': this.inline,
       } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null), this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
         timepicker__popup: true,
-        'timepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isPopupContentUp,
+        'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,
         'timepicker__popup--is-inline': this.inline,
       } }, ...this.getContent(), this.getAmPmPicker()))));
   }
@@ -372,12 +325,12 @@ export class SixTimepicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "SixTimeFormat",
-          "resolved": "SixTimeFormat.HH | SixTimeFormat.HHmm | SixTimeFormat.HHmmss | SixTimeFormat.HHmmssms | SixTimeFormat.hhaa | SixTimeFormat.hhmmaa | SixTimeFormat.hhmmssaa | SixTimeFormat.hhmmssmsaa | SixTimeFormat.mm | SixTimeFormat.ms | SixTimeFormat.ss",
+          "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": {
-            "SixTimeFormat": {
+            "TimeFormat": {
               "location": "import",
-              "path": "./six-time-format"
+              "path": "../../utils/time.util"
             }
           }
         },
@@ -389,7 +342,7 @@ export class SixTimepicker {
         },
         "attribute": "format",
         "reflect": false,
-        "defaultValue": "SixTimeFormat.HHmmss"
+        "defaultValue": "'HH:mm:ss'"
       },
       "separator": {
         "type": "string",
@@ -407,24 +360,25 @@ export class SixTimepicker {
         },
         "attribute": "separator",
         "reflect": false,
-        "defaultValue": "TIME_FORMAT_SEPARATOR"
+        "defaultValue": "':'"
       },
       "value": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string | null",
+          "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "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
+        "reflect": false,
+        "defaultValue": "''"
       },
       "open": {
         "type": "boolean",
@@ -438,7 +392,7 @@ export class SixTimepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods."
+          "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,
@@ -456,7 +410,7 @@ export class SixTimepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicates whether or not the timepicker should be shown as an inline (always open) component"
+          "text": "Indicates whether the timepicker should be shown as an inline (always open) component"
         },
         "attribute": "inline",
         "reflect": true,
@@ -503,11 +457,11 @@ export class SixTimepicker {
         "mutable": false,
         "complexType": {
           "original": "'top' | 'bottom'",
-          "resolved": "\"bottom\" | \"top\"",
+          "resolved": "\"bottom\" | \"top\" | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The enforced placement of the dropdown panel."
@@ -548,14 +502,15 @@ export class SixTimepicker {
           "text": "Set to true to make the input a required field."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
       "placeholder": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | null",
-          "resolved": "string",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -733,8 +688,8 @@ export class SixTimepicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | null",
-          "resolved": "string",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -770,7 +725,7 @@ export class SixTimepicker {
     return {
       "isPopupContentUp": {},
       "isDropDownContentUp": {},
-      "internalValue": {}
+      "popupValue": {}
     };
   }
   static get events() {
@@ -840,14 +795,14 @@ export class SixTimepicker {
     return {
       "reportValidity": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<boolean | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
           "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
@@ -856,14 +811,14 @@ export class SixTimepicker {
       },
       "checkValidity": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<boolean | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
           "text": "Checks for validity.",
@@ -910,9 +865,6 @@ export class SixTimepicker {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "debounce",
-        "methodName": "debounceChanged"
-      }, {
         "propName": "value",
         "methodName": "valueChanged"
       }];