<cx-vui-component-wrapper
	:elementId="currentId"
	:label="label"
	:description="description"
	:wrapper-css="wrapperCss"
	:preventWrap="preventWrap"
	v-if="isVisible()"
>
	<span :class="controlClasses">
		<vue-timepicker
			v-model="currentValue"
			@keyup.enter="handleEnter"
			@keyup="handleKeyup"
			@keypress="handleKeypress"
			@keydown="handleKeydown"
			@focus="handleFocus"
			@blur="handleBlur"
			@input="handleInput"
			@change="handleChange"
			@open="handleOpen"
			@close="handleClose"
			@error="handleError"

			:id="currentId"
			:input-class="controlClasses"
			:name="name"
			:placeholder="placeholder"
			:autocomplete="autocomplete"
			:size="size"
			:autofocus="autofocus"
			:format="format"
			:minute-interval="minuteInterval"
			:second-interval="secondInterval"
			:hide-clear-button="hideClearButton"
			:disabled="disabled"
			:close-on-complete="closeOnComplete"
			:auto-scroll="autoScroll"
			:hour-range="hourRange"
			:minute-range="minuteRange"
			:second-range="secondRange"
			:hide-disabled-hours="hideDisabledHours"
			:hide-disabled-minutes="hideDisabledMinutes"
			:hide-disabled-seconds="hideDisabledSeconds"
			:hide-disabled-items="hideDisabledItems"
			:advanced-keyboard="advancedKeyboard"
			:blur-delay="blurDelay"
			:manual-input="manualDnput"
			:manual-input-timeout="manualInputTimeout"
			:hide-dropdown="hideDropdown"
			:fixed-dropdown-button="fixedDropdownButton"
			:drop-direction="dropDirection"
			:container-id="containerId"
			:drop-offset-height="dropOffsetHeight"
			:lazy="lazy"
			:debug-mode="debugMode"
		></vue-timepicker>
	</span>
</cx-vui-component-wrapper>