npm - @six-group/ui-library - Versions diffs - 4.0.0-beta.0 → 4.0.0-beta.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1067) hide show

package/dist/collection/components/six-timepicker/six-timepicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-timepicker.js","sourceRoot":"","sources":["../../../src/components/six-timepicker/six-timepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport { SixTimeFormat } from './six-time-format';\nimport { SixTime, SixTimePropertyName, TIME_FORMAT_CHAR } from './six-timepicker.types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n TIME_FORMAT_SEPARATOR,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { isNil } from '../../utils/type-check';\n\ninterface SixTimepickerBasePayload {\n value: SixTime;\n valueAsString: string;\n}\n\nexport interface SixTimepickerChange extends SixTimepickerBasePayload {\n changedProperty?: string;\n}\n\nexport interface SixTimepickerInput extends SixTimepickerBasePayload {}\n\nexport interface SixTimepickerBlur extends SixTimepickerBasePayload {}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: string;\n}\n\nconst TAG = `[SIX-TIMEPICKER]`;\nconst DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';\nconst MIN_POPUP_HEIGHT = 145;\n\n/*\n @since 2.0.0\n * @status experimental\n \n @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n \n /\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private readonly eventListeners = new EventListeners();\n\n private popup: HTMLElement;\n\n private wrapper: HTMLElement;\n\n private inputElement: HTMLSixInputElement;\n\n @Element() host: HTMLSixTimepickerElement;\n\n /*\n Define the time format. Valid formats are:\n \n HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n \n where HH is the 24 hour format\n * and hh is the 12 hour format\n \n Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * /\n @Prop() format: SixTimeFormat = SixTimeFormat.HHmmss;\n\n /\n Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * /\n @Prop() separator = TIME_FORMAT_SEPARATOR;\n\n /\n The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n /\n @Prop({ mutable: true }) value?: string \| null;\n\n /* Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Indicates whether or not the timepicker should be shown as an inline (always open) component /\n @Prop({ reflect: true }) inline = false;\n\n /\n If `true` the user can only select a time via the timepicker but not directly edit the input field.\n /\n @Prop() readonly = false;\n\n /\n If `true` the component is disabled.\n /\n @Prop() disabled = false;\n\n /\n The enforced placement of the dropdown panel.\n /\n @Prop() placement: 'top' \| 'bottom';\n\n /* Timepicker size. /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to make the input a required field. /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The placeholder defines what text to be shown on the input element\n /\n @Prop() placeholder?: string \| null;\n\n /* Set to display the error text on blur and not when typing /\n @Prop() errorOnBlur = false;\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText = '';\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set the position of the icon /\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n /\n @Prop() defaultTime?: string \| null;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n /\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /\n Emitted when the timepicker's value changes\n /\n @Event({ eventName: 'six-timepicker-change' }) sixChange: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the timepicker's value changes, but debounced\n /\n @Event({ eventName: 'six-timepicker-change-debounced' })\n sixChangeDebounced: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the clear button is activated.\n /\n @Event({ eventName: 'six-timepicker-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n this.eventListeners.removeByIdentifier(DEBOUNCE_TIMEPICKER_LISTENER);\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce(this.handleSixTimepickerChangeDebounced, this.debounce),\n DEBOUNCE_TIMEPICKER_LISTENER\n );\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged(newValue: string) {\n if (this.value !== newValue) {\n this.value = newValue;\n }\n this.setupInternalTime();\n this.sixChange.emit({\n value: this.internalValue,\n valueAsString: createTimeString(this.internalValue, this.format),\n });\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.inputElement.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity() {\n return this.inputElement.checkValidity();\n }\n\n /* Sets a custom validation message. If `message` is not empty, the field will be considered invalid. /\n @Method()\n async setCustomValidity(message: string) {\n await this.inputElement.setCustomValidity(message);\n }\n\n /* Resets the formcontrol /\n @Method()\n async reset() {\n this.internalValue = this.defaultValue;\n this.inputElement.value = createTimeString(this.internalValue, this.format);\n await this.inputElement.reset();\n }\n\n /\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n /\n @State()\n private internalValue: SixTime;\n\n private defaultValue: SixTime = null;\n\n componentWillLoad() {\n this.setupInternalTime();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce(this.handleSixTimepickerChangeDebounced, this.debounce),\n DEBOUNCE_TIMEPICKER_LISTENER\n );\n this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n private handleInputChange = (event: Event) => {\n event.stopPropagation();\n const inputValue = this.inputElement.value;\n\n if (!isValidTimeString(inputValue, this.format)) {\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n this.internalValue = parseTimeString(inputValue, this.format);\n this.sixChange.emit({\n value: this.internalValue,\n valueAsString: createTimeString(this.internalValue, this.format),\n });\n };\n\n private calcIsPopupContentUp() {\n if (!this.inputElement \|\| !this.wrapper) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n /\n * The position of the hoisted timepicker needs to be correctly calculated since the position changes to fixed.\n * Thus if the user scrolls or adjusts the screen size we need to recalculate the timepicker position.\n /\n private moveOpenHoistedPopup() {\n if (!this.hoist \|\| !this.open) {\n return;\n }\n\n const popupBoundingClientRect = this.popup.getBoundingClientRect();\n const popupHeight = popupBoundingClientRect.height;\n const inputBoundingClientRect = this.inputElement.getBoundingClientRect();\n const inputTop = inputBoundingClientRect.top;\n const inputHeight = inputBoundingClientRect.height;\n\n this.calcIsPopupContentUp();\n\n if (this.isPopupContentUp) {\n this.popup.style.top = `${inputTop - popupHeight}px`;\n } else {\n this.popup.style.top = `${inputTop + inputHeight}px`;\n }\n }\n\n private handleSixTimepickerChangeDebounced = ({ detail }) => {\n this.sixChangeDebounced.emit(detail);\n };\n\n private handleChange = (event: CustomEvent<SixItemPickerChangePayload>, property: string) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n\n // update the internal state\n this.internalValue[property] = event.detail;\n\n const timeString = createTimeString(this.internalValue, this.format);\n\n // fire timepicker's own event\n this.sixChange.emit({\n changedProperty: property,\n value: this.internalValue,\n valueAsString: timeString,\n });\n\n // update the input value\n this.value = timeString;\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n value={this.internalValue[params.propertyName]}\n items={params.items}\n type={params.type \|\| ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handleChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private setupInternalTime() {\n if (this.is12HourClock() && !this.format.includes(TIME_FORMAT_CHAR.PERIOD)) {\n console.error(\n `${TAG} You provided a 12-hour-clock format but are missing the period (am or pm) in the time-format-string!`\n );\n }\n\n if (this.value === null \|\| this.value === undefined) {\n this.internalValue = isNil(this.defaultTime)\n ? getCurrentTime(this.is24HourClock())\n : parseTimeString(this.defaultTime, this.format);\n } else {\n this.internalValue = parseTimeString(this.value, this.format);\n }\n\n this.defaultValue = this.internalValue;\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: SixTimePropertyName.HOURS });\n }\n\n private is24HourClock() {\n return this.format.includes(TIME_FORMAT_CHAR.HOUR_24);\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: SixTimePropertyName.HOURS });\n }\n\n private is12HourClock() {\n return this.format.includes(TIME_FORMAT_CHAR.HOUR_12);\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: SixTimePropertyName.PERIOD,\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes(TIME_FORMAT_CHAR.MINUTE)) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.MINUTES });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes(TIME_FORMAT_CHAR.SECOND)) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.SECONDS });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes(TIME_FORMAT_CHAR.MILLISECOND)) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: SixTimePropertyName.MILLISECONDS,\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: MouseEvent) => {\n // Close when clicking outside of the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = undefined;\n this.sixClear.emit();\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n private calcIsDropDownContentUp() {\n if (!this.inputElement \|\| !this.wrapper) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n /\n * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.\n * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup\n */\n private adjustPopupForHoisting() {\n if (!this.hoist) {\n return;\n }\n\n // execute after dropdown has been rendered to make sure the popup reference is correctly set\n setTimeout(() => {\n if (!this.popup) {\n return;\n }\n\n // take a snapshot of normally rendered popup\n const popupBoundingClientRect = this.popup.getBoundingClientRect();\n\n // apply screen position to fixed popup\n this.popup.style.position = 'fixed';\n ['top', 'left', 'width', 'height'].forEach((property) => {\n this.popup.style[property] = `${popupBoundingClientRect[property]}px`;\n });\n\n const inputBoundingClientRect = this.inputElement.getBoundingClientRect();\n const inputTop = inputBoundingClientRect.top;\n const popupTop = popupBoundingClientRect.top;\n\n this.calcIsDropDownContentUp();\n // check screen position to check whether the popup should be moved above or below the trigger element\n if (this.isDropDownContentUp && inputTop < popupTop) {\n // move popup above input field if timepicker is at bottom of screen\n this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;\n }\n }, 0);\n }\n\n render() {\n this.adjustPopupForHoisting();\n\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n error-text={this.errorText}\n error-on-blur={this.errorOnBlur}\n class={{\n 'input--empty': !this.value,\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-timepicker.js","sourceRoot":"","sources":["../../../src/components/six-timepicker/six-timepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/*\n @since 2.0.0\n * @status experimental\n \n @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n \n /\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n @Element() host!: HTMLSixTimepickerElement;\n\n /*\n Define the time format. Valid formats are:\n \n HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n \n where HH is the 24 hour format\n * and hh is the 12 hour format\n \n Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * /\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /\n Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * /\n @Prop() separator = ':';\n\n /\n The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n /\n @Prop({ mutable: true }) value = '';\n\n /* Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Indicates whether the timepicker should be shown as an inline (always open) component /\n @Prop({ reflect: true }) inline = false;\n\n /\n If `true` the user can only select a time via the timepicker but not directly edit the input field.\n /\n @Prop() readonly = false;\n\n /\n If `true` the component is disabled.\n /\n @Prop() disabled = false;\n\n /\n The enforced placement of the dropdown panel.\n /\n @Prop() placement?: 'top' \| 'bottom';\n\n /* Timepicker size. /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /\n The placeholder defines what text to be shown on the input element\n /\n @Prop() placeholder?: string;\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText = '';\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set the position of the icon /\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n /\n @Prop() defaultTime?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n /\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /\n Emitted when the timepicker's value changes\n /\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the timepicker's value changes, but debounced\n /\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the clear button is activated.\n /\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n @Watch('invalid')\n protected invalidChanged(invalid: boolean) {\n if (this.inputElement) {\n this.inputElement.invalid = invalid;\n }\n }\n\n /* Sets focus on the datepickers input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n // update value and popup value, and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' \|\| !isValidTimeString(this.value, this.format)) {\n this.value = '';\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null \|\| this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type \|\| ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n error-text={this.errorText}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/six-timepicker/test/six-timepicker.spec.js ADDED Viewed

@@ -0,0 +1,496 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTimepicker } from "../six-timepicker";
+describe('six-timepicker', () => {
+  it('should render default timepicker', async () => {
+    var _a, _b;
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker></six-timepicker>`,
+    };
+    // when initially loaded
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-timepicker>
+    <mock:shadow-root>
+      <div class="timepicker__container" part="container">
+        <six-input class="input--empty" error-text="" label="" part="input" size="medium" value="">
+          <span class="prefix" part="icon" slot="prefix">
+            <six-icon size="medium">
+              watch_later
+            </six-icon>
+          </span>
+        </six-input>
+      </div>
+    </mock:shadow-root>
+  </six-timepicker>
+   `);
+    // when setting a value and opening the popup
+    if (((_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) != null) {
+      page.root.value = '20:00:00';
+      (_b = page.root.shadowRoot.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.click();
+    }
+    await page.waitForChanges();
+    // then expect the correct time to be rendered
+    expect(page.root).toEqualHtml(`
+<six-timepicker open="">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input error-text="" label="" part="input" size="medium" value="20:00:00">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="0"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="0"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render open timepicker', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker open value="13:20:59"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-timepicker open="" value="13:20:59">
+      <mock:shadow-root>
+        <div class="timepicker__container" part="container">
+          <six-input error-text="" label="" part="input" size="medium" value="13:20:59">
+            <span class="prefix" part="icon" slot="prefix">
+              <six-icon size="medium">
+                watch_later
+              </six-icon>
+            </span>
+          </six-input>
+          <div class="timepicker__popup" part="popup">
+            <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                :
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                :
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-timepicker>
+   `);
+  });
+  it('should render inline timepicker', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker inline value="13:20:59"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-timepicker inline="" open="" value="13:20:59">
+    <mock:shadow-root>
+      <div class="timepicker__container" part="container">
+        <six-input class="input--hide" error-text="" label="" part="input" size="medium" value="13:20:59">
+          <span class="prefix" part="icon" slot="prefix">
+            <six-icon size="medium">
+              watch_later
+            </six-icon>
+          </span>
+        </six-input>
+        <div class="timepicker__popup timepicker__popup--is-inline" part="popup">
+          <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+        </div>
+      </div>
+    </mock:shadow-root>
+  </six-timepicker>
+   `);
+  });
+  it('should render open timepicker with default time', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker open default-time="13:20:59"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-timepicker default-time="13:20:59" open="">
+    <mock:shadow-root>
+      <div class="timepicker__container" part="container">
+        <six-input class="input--empty" error-text="" label="" part="input" size="medium" value="">
+          <span class="prefix" part="icon" slot="prefix">
+            <six-icon size="medium">
+              watch_later
+            </six-icon>
+          </span>
+        </six-input>
+        <div class="timepicker__popup" part="popup">
+          <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+        </div>
+      </div>
+    </mock:shadow-root>
+  </six-timepicker>
+   `);
+  });
+  it('should render timepicker with different separator', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker open value="11:59:20" separator="-"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-timepicker open="" separator="-" value="11:59:20">
+      <mock:shadow-root>
+        <div class="timepicker__container" part="container">
+          <six-input error-text="" label="" part="input" size="medium" value="11:59:20">
+            <span class="prefix" part="icon" slot="prefix">
+              <six-icon size="medium">
+                watch_later
+              </six-icon>
+            </span>
+          </six-input>
+          <div class="timepicker__popup" part="popup">
+            <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="11"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                -
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                -
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-timepicker>
+   `);
+  });
+  it('should render timepicker with different format', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker open value="03:45:20:PM" format="hh:mm:ss:aa"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker format="hh:mm:ss:aa" open="" value="03:45:20:PM">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input error-text="" label="" part="input" size="medium" value="03:45:20:PM">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="35" max="11" min="0" padded="" timeout="300" type="number" value="3"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="45"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+        <six-item-picker interval="35" padded="" timeout="300" type="custom" value="PM"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render timepicker with adjusted timeout and interval', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker open value="13:20:59" timeout="500" interval="150"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker interval="150" open="" timeout="500" value="13:20:59">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input error-text="" label="" part="input" size="medium" value="13:20:59">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="150" max="23" min="0" padded="" timeout="500" type="number" value="13"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="150" max="59" min="0" padded="" timeout="500" type="number" value="20"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="150" max="59" min="0" padded="" timeout="500" type="number" value="59"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render timepicker with placeholder', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker placeholder="HH:mm:ss"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker placeholder="HH:mm:ss">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" error-text="" label="" part="input" placeholder="HH:mm:ss" size="medium" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render readonly timepicker', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker value="02:00:00" readonly></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker readonly="" value="02:00:00">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input error-text="" label="" part="input" readonly="" size="medium" value="02:00:00">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render disabled timepicker', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker value="02:00:00" disabled></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker disabled="" value="02:00:00">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input disabled="" error-text="" label="" part="input" size="medium" value="02:00:00">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render timepicker in correct sizes', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker size="small"></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker size="small">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" error-text="" label="" part="input" size="small" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="small">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    // when changing size
+    if (page.root != null) {
+      page.root.size = 'medium';
+    }
+    await page.waitForChanges();
+    // then expect medium sized timepicker
+    expect(page.root).toEqualHtml(`
+<six-timepicker size="small">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" error-text="" label="" part="input" size="medium" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    // when changing size
+    if (page.root != null) {
+      page.root.size = 'large';
+    }
+    await page.waitForChanges();
+    // then expect medium sized timepicker
+    expect(page.root).toEqualHtml(`
+<six-timepicker size="small">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" error-text="" label="" part="input" size="large" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+  it('should render open timepicker with icon on the right', async () => {
+    // given
+    const config = {
+      components: [SixTimepicker],
+      html: `<six-timepicker open value="13:20:59" icon-position="right" clearable></six-timepicker>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+<six-timepicker clearable="" icon-position="right" open="" value="13:20:59">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input error-text="" label="" part="input" size="medium" value="13:20:59">
+        <span class="prefix prefix--right" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+        <button class="timepicker_clear timepicker_clear--left" slot="suffix" tabindex="-1" type="button">
+          <six-icon size="small">
+            clear
+          </six-icon>
+        </button>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+  });
+});
+//# sourceMappingURL=six-timepicker.spec.js.map