diff --git a/app/package.json b/app/package.json index fe1453b..88f6e33 100644 --- a/app/package.json +++ b/app/package.json @@ -32,60 +32,61 @@ "/dist/*" ], "devDependencies": { - "@babel/core": "7.17.8", - "@babel/eslint-parser": "7.17.0", - "@babel/plugin-proposal-class-properties": "7.16.7", - "@babel/plugin-transform-runtime": "7.17.0", - "@babel/preset-env": "7.16.11", - "@babel/preset-typescript": "7.16.7", - "@rollup/plugin-babel": "5.2.2", - "@rollup/plugin-commonjs": "17.0.0", - "@rollup/plugin-json": "4.1.0", - "@rollup/plugin-node-resolve": "11.1.0", - "@rollup/plugin-replace": "2.3.4", - "@types/node": "17.0.22", - "@types/prismjs": "1.26.0", - "@typescript-eslint/eslint-plugin": "^5.16.0", - "@typescript-eslint/parser": "^5.16.0", - "babel-loader": "8.2.2", - "babel-plugin-prismjs": "2.1.0", - "css-loader": "5.0.1", - "css-modules-typescript-loader": "4.0.1", - "eslint": "8.11.0", - "eslint-config-airbnb-base": "15.0.0", - "eslint-config-airbnb-typescript": "^16.1.4", - "eslint-config-eslint": "7.0.0", + "@babel/core": "^7.18.13", + "@babel/eslint-parser": "^7.18.9", + "@babel/plugin-proposal-class-properties": "^7.18.6", + "@babel/plugin-transform-runtime": "^7.18.10", + "@babel/preset-env": "^7.18.10", + "@babel/preset-typescript": "^7.18.6", + "@rollup/plugin-babel": "^5.3.1", + "@rollup/plugin-commonjs": "^17.1.0", + "@rollup/plugin-json": "^4.1.0", + "@rollup/plugin-node-resolve": "^11.2.1", + "@rollup/plugin-replace": "^2.4.2", + "@types/node": "^17.0.45", + "@types/prismjs": "^1.26.0", + "@typescript-eslint/eslint-plugin": "^5.36.1", + "@typescript-eslint/parser": "^5.36.1", + "babel-loader": "^8.2.5", + "babel-plugin-prismjs": "^2.1.0", + "css-loader": "^5.2.7", + "css-modules-typescript-loader": "^4.0.1", + "eslint": "^8.23.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-airbnb-typescript": "^16.2.0", + "eslint-config-eslint": "^7.0.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-import": "2.25.4", - "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-tree-shaking": "^1.10.0", - "file-loader": "6.2.0", - "html-webpack-plugin": "5.5.0", - "husky": "4.3.8", - "jest": "27.5.1", - "lint-staged": "12.3.7", - "prettier": "2.6.0", - "pretty-quick": "3.1.3", - "prismjs": "1.27.0", - "rollup": "2.32.1", - "rollup-plugin-cleanup": "3.2.1", - "rollup-plugin-dts": "2.0.1", - "rollup-plugin-peer-deps-external": "2.2.4", - "rollup-plugin-postcss": "3.1.8", - "rollup-plugin-scss": "2.6.1", - "rollup-plugin-serve": "1.1.0", - "rollup-plugin-terser": "7.0.2", - "rollup-plugin-typescript2": "0.29.0", - "sass-loader": "12.6.0", - "style-loader": "3.3.1", - "svg-sprite-loader": "6.0.11", - "svg-url-loader": "7.1.1", - "svgo-loader": "3.0.0", - "ts-loader": "9.2.8", - "typescript": "4.6.2", - "url-loader": "4.1.1", - "webpack": "5.70.0", - "webpack-cli": "4.9.2", - "webpack-dev-server": "4.7.4" + "file-loader": "^6.2.0", + "html-webpack-plugin": "^5.5.0", + "husky": "^4.3.8", + "jest": "^27.5.1", + "lint-staged": "^12.5.0", + "prettier": "^2.7.1", + "pretty-quick": "^3.1.3", + "prismjs": "^1.29.0", + "rollup": "^2.79.0", + "rollup-plugin-cleanup": "^3.2.1", + "rollup-plugin-dts": "^2.0.1", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-scss": "^3.0.0", + "rollup-plugin-serve": "^1.1.0", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.29.0", + "sass": "^1.54.8", + "sass-loader": "^12.6.0", + "style-loader": "^3.3.1", + "svg-sprite-loader": "^2.0.3", + "svg-url-loader": "^7.1.1", + "svgo-loader": "^3.0.1", + "ts-loader": "^9.3.1", + "typescript": "^4.8.2", + "url-loader": "^4.1.1", + "webpack": "^5.74.0", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.10.1" } } diff --git a/app/src/timepicker/index.d.ts b/app/src/timepicker/index.d.ts index afbeb17..6f46df5 100644 --- a/app/src/timepicker/index.d.ts +++ b/app/src/timepicker/index.d.ts @@ -1,134 +1,137 @@ -import './styles/main.scss'; -import './styles/theme.scss'; -import type { OptionTypes } from './utils/types'; -declare type TypeFunction = () => void; -export default class TimepickerUI { - private _degreesHours; - private _degreesMinutes; - private _options; - private _eventsClickMobile; - private _eventsClickMobileHandler; - private _mutliEventsMove; - private _mutliEventsMoveHandler; - private _clickTouchEvents; - private _element; - private _isMobileView; - private _isTouchMouseMove; - private _disabledTime; - private _cloned; - private _inputEvents; - private _isModalRemove?; - constructor(element: HTMLElement, options?: OptionTypes); - private get modalTemplate(); - private get modalElement(); - private get clockFace(); - private get input(); - private get clockHand(); - private get circle(); - private get tipsWrapper(); - private get tipsWrapperFor24h(); - private get minutes(); - private get hour(); - private get AM(); - private get PM(); - private get minutesTips(); - private get hourTips(); - private get allValueTips(); - private get openElementData(); - private get openElement(); - private get cancelButton(); - private get okButton(); - private get activeTypeMode(); - private get keyboardClockIcon(); - private get footer(); - private get wrapper(); - /** - * @description The create method that init timepicker - */ - create: () => void; - /** - * @description The open method opens immediately timepicker after init - * @param callback - The callback function triggered when timepicker is open by this method - */ - open: (callback?: (() => void) | undefined) => void; - /** - * @description Closure method closes the timepicker - * @param args - These parameters in this method are optional and order is any. You can set callback function first or boolean, - * or just boolean or just callback. If the boolean is set to true the input will be updating with the current value on picker. - * The callback function start immediately after close, if is invoke. The max parameters length is set to 2 - */ - close: (...args: (boolean | TypeFunction)[]) => void; - /** - * @description The destroy method destroy actual instance of picker by cloning element. - * @param callback - The callback function is started after destroyed method. This parameter is optional. - */ - destroy: (callback?: TypeFunction | undefined) => void; - /** - * @description The update method which update timepicker with new options and can create a new instance. - * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current - * instance and is `required`. The `create` key is a boolean which if is set to true it starting the create() method after invoke update - * function and is optional. The `create` option is useful if you are using destroy and update methods together. - * @param callback - The `callback` function is started after update method. This parameter is optional. - */ - update: (value: { - options: OptionTypes; - create?: boolean; - }, callback?: TypeFunction | undefined) => void; - private _preventClockTypeByCurrentTime; - private _updateInputValueWithCurrentTimeOnStart; - private _checkDisabledValuesOnStart; - private _checkMobileOption; - private _getDisableTime; - private _removeCircleClockClasses24h; - private _setCircleClockClasses24h; - private _setErrorHandler; - private _removeErrorHandler; - private _setOnStartCSSClassesIfClockType24h; - private _setTheme; - private _setInputClassToInputElement; - private _setDataOpenToInputIfDosentExistInWrapper; - private _setClassTopOpenElement; - private _removeBackdrop; - private _setNormalizeClass; - private _setFlexEndToFooterIfNoKeyboardIcon; - private _eventsBundle; - private _handleOpenOnClick; - private _getInputValueOnOpenAndSet; - private _handleCancelButton; - private _handleOkButton; - private _setShowClassToBackdrop; - private _handleBackdropClick; - private _setBgColorToCirleWithHourTips; - private _setBgColorToCircleWithMinutesTips; - private _removeBgColorToCirleWithMinutesTips; - private _setTimepickerClassToElement; - private _setClassActiveToHourOnOpen; - private _setMinutesToClock; - private _setHoursToClock; - private _setTransformToCircleWithSwitchesHour; - private _setTransformToCircleWithSwitchesMinutes; - private _getDestructuringObj; - private _handleAmClick; - private _handlePmClick; - private _handleAnimationClock; - private _handleAnimationSwitchTipsMode; - private _handleClasses24h; - private _handleHourEvents; - private _handleMinutesEvents; - private _handleEventToMoveHand; - private _toggleClassActiveToValueTips; - private _handleMoveHand; - private _setModalTemplate; - private _setScrollbarOrNot; - private _setAnimationToOpen; - private _removeAnimationToClose; - private _handlerViewChange; - private _handleIconChangeView; - private _handlerClickHourMinutes; - private _handleClickOnHourMobile; - private _handleKeyPress; - private _handleEscClick; - private _focusTrapHandler; - private _handleOpenOnEnterFocus; -} -export {}; +import './styles/main.scss'; +import './styles/theme.scss'; +import type { OptionTypes } from './utils/types'; +declare type TypeFunction = () => void; +export default class TimepickerUI { + private _degreesHours; + private _degreesMinutes; + private _options; + private _eventsClickMobile; + private _eventsClickMobileHandler; + private _mutliEventsMove; + private _mutliEventsMoveHandler; + private _clickTouchEvents; + private _element; + private _isMobileView; + private _isTouchMouseMove; + private _disabledTime; + private _cloned; + private _inputEvents; + private _isModalRemove?; + constructor(element: HTMLElement, options?: OptionTypes); + private get modalTemplate(); + private get modalElement(); + private get clockFace(); + private get input(); + private get clockHand(); + private get circle(); + private get tipsWrapper(); + private get tipsWrapperFor24h(); + private get minutes(); + private get hour(); + private get AM(); + private get PM(); + private get minutesTips(); + private get hourTips(); + private get allValueTips(); + private get openElementData(); + private get openElement(); + private get cancelButton(); + private get okButton(); + private get activeTypeMode(); + private get keyboardClockIcon(); + private get footer(); + private get wrapper(); + /** + * @description The create method that init timepicker + */ + create: () => void; + /** + * @description The open method opens immediately timepicker after init + * @param callback - The callback function triggered when timepicker is open by this method + */ + open: (callback?: () => void) => void; + /** + * @description Closure method closes the timepicker + * @param args - These parameters in this method are optional and order is any. You can set callback function first or boolean, + * or just boolean or just callback. If the boolean is set to true the input will be updating with the current value on picker. + * The callback function start immediately after close, if is invoke. The max parameters length is set to 2 + */ + close: (...args: (boolean | TypeFunction)[]) => void; + /** + * @description The destroy method destroy actual instance of picker by cloning element. + * @param callback - The callback function is started after destroyed method. This parameter is optional. + */ + destroy: (callback?: TypeFunction) => void; + /** + * @description The update method which update timepicker with new options and can create a new instance. + * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current + * instance and is `required`. The `create` key is a boolean which if is set to true it starting the create() method after invoke update + * function and is optional. The `create` option is useful if you are using destroy and update methods together. + * @param callback - The `callback` function is started after update method. This parameter is optional. + */ + update: ( + value: { + options: OptionTypes; + create?: boolean; + }, + callback?: TypeFunction, + ) => void; + private _preventClockTypeByCurrentTime; + private _updateInputValueWithCurrentTimeOnStart; + private _checkDisabledValuesOnStart; + private _checkMobileOption; + private _getDisableTime; + private _removeCircleClockClasses24h; + private _setCircleClockClasses24h; + private _setErrorHandler; + private _removeErrorHandler; + private _setOnStartCSSClassesIfClockType24h; + private _setTheme; + private _setInputClassToInputElement; + private _setDataOpenToInputIfDosentExistInWrapper; + private _setClassTopOpenElement; + private _removeBackdrop; + private _setNormalizeClass; + private _setFlexEndToFooterIfNoKeyboardIcon; + private _eventsBundle; + private _handleOpenOnClick; + private _getInputValueOnOpenAndSet; + private _handleCancelButton; + private _handleOkButton; + private _setShowClassToBackdrop; + private _handleBackdropClick; + private _setBgColorToCirleWithHourTips; + private _setBgColorToCircleWithMinutesTips; + private _removeBgColorToCirleWithMinutesTips; + private _setTimepickerClassToElement; + private _setClassActiveToHourOnOpen; + private _setMinutesToClock; + private _setHoursToClock; + private _setTransformToCircleWithSwitchesHour; + private _setTransformToCircleWithSwitchesMinutes; + private _getDestructuringObj; + private _handleAmClick; + private _handlePmClick; + private _handleAnimationClock; + private _handleAnimationSwitchTipsMode; + private _handleClasses24h; + private _handleHourEvents; + private _handleMinutesEvents; + private _handleEventToMoveHand; + private _toggleClassActiveToValueTips; + private _handleMoveHand; + private _setModalTemplate; + private _setScrollbarOrNot; + private _setAnimationToOpen; + private _removeAnimationToClose; + private _handlerViewChange; + private _handleIconChangeView; + private _handlerClickHourMinutes; + private _handleClickOnHourMobile; + private _handleKeyPress; + private _handleEscClick; + private _focusTrapHandler; + private _handleOpenOnEnterFocus; +} +export {}; diff --git a/app/src/timepicker/index.ts b/app/src/timepicker/index.ts index dd2dcbd..56a559a 100644 --- a/app/src/timepicker/index.ts +++ b/app/src/timepicker/index.ts @@ -1,1872 +1,1865 @@ -/* eslint-disable no-useless-return */ -import { - createNewEvent, - createObjectFromData, - getBrowser, - getClickTouchPosition, - getConfig, - getIncrementTimes, - getScrollbarWidth, - hasClass, - initCallback, -} from './utils'; -import { getInputValue, handleValueAndCheck } from './utils/input'; -import { - createDisabledTime, - checkDisabledHoursAndMinutes, - checkedDisabledValuesInterval, -} from './utils/disable'; -import './styles/main.scss'; -import './styles/theme.scss'; -import variables from './styles/variables.scss'; -import { options as optionsDefault } from './utils/options'; -import type { OptionTypes } from './utils/types'; -import { name, allEvents, selectorActive } from './utils/variables'; -import { - getMobileModalTemplate, - getModalTemplate, - getNumberOfHours12, - getNumberOfMinutes, - getNumberOfHours24, -} from './utils/templates'; -import ClockFace from './components/ClockFace'; - -const debounce = ReturnType>( - callback: T, - timeout: number, -): ((...args: Parameters) => void) => { - let timer: ReturnType; - - return (...args: Parameters) => { - clearTimeout(timer); - timer = setTimeout(() => { - callback(...args); - }, timeout); - }; -}; - -type TypeFunction = () => void; - -export default class TimepickerUI { - private _degreesHours: number | null; - - private _degreesMinutes: number | null; - - private _options: OptionTypes; - - private _eventsClickMobile: (event: Event) => Promise; - - private _eventsClickMobileHandler: EventListenerOrEventListenerObject; - - private _mutliEventsMove: (event: Event) => void; - - private _mutliEventsMoveHandler: EventListenerOrEventListenerObject; - - private _clickTouchEvents: string[]; - - private _element: HTMLElement; - - private _isMobileView: boolean | null; - - private _isTouchMouseMove: boolean | null; - - private _disabledTime: any; - - private _cloned: Node | null; - - private _inputEvents: string[]; - - private _isModalRemove?: boolean; - - constructor(element: HTMLElement, options?: OptionTypes) { - this._element = element; - this._cloned = null; - this._options = getConfig( - { ...options, ...createObjectFromData(this._element?.dataset) }, - optionsDefault, - ); - - this._isTouchMouseMove = false; - this._degreesHours = - Number( - getInputValue(this._element?.querySelector('input') as HTMLInputElement, this._options.clockType) - .hour, - ) * 30; - this._degreesMinutes = - Number( - getInputValue(this._element?.querySelector('input') as HTMLInputElement, this._options.clockType) - .minutes, - ) * 6; - - this._isMobileView = false; - - this._mutliEventsMove = (event) => this._handleEventToMoveHand(event as TouchEvent); - this._mutliEventsMoveHandler = this._mutliEventsMove.bind(this); - - this._eventsClickMobile = (event) => this._handlerClickHourMinutes(event); - this._eventsClickMobileHandler = this._eventsClickMobile.bind(this); - - this._checkMobileOption(); - - this._clickTouchEvents = ['click', 'mousedown', 'touchstart']; - this._inputEvents = ['change', ...this._clickTouchEvents]; - - this._disabledTime = null; - - this._preventClockTypeByCurrentTime(); - - this._isModalRemove = true; - } - - private get modalTemplate() { - if (!this._options.mobile || !this._isMobileView) { - return getModalTemplate(this._options); - } - return getMobileModalTemplate(this._options); - } - - private get modalElement() { - return document.querySelector('.timepicker-ui-modal') as HTMLDivElement; - } - - private get clockFace() { - return document.querySelector('.timepicker-ui-clock-face') as HTMLDivElement; - } - - private get input() { - return this._element?.querySelector('input') as HTMLInputElement; - } - - private get clockHand() { - return document.querySelector('.timepicker-ui-clock-hand') as HTMLDivElement; - } - - private get circle() { - return document.querySelector('.timepicker-ui-circle-hand') as HTMLDivElement; - } - - private get tipsWrapper() { - return document.querySelector('.timepicker-ui-tips-wrapper') as HTMLDivElement; - } - - private get tipsWrapperFor24h() { - return document.querySelector('.timepicker-ui-tips-wrapper-24h') as HTMLDivElement; - } - - private get minutes() { - return document.querySelector('.timepicker-ui-minutes') as HTMLInputElement; - } - - private get hour() { - return document.querySelector('.timepicker-ui-hour') as HTMLInputElement; - } - - private get AM() { - return document.querySelector('.timepicker-ui-am') as HTMLDivElement; - } - - private get PM() { - return document.querySelector('.timepicker-ui-pm') as HTMLDivElement; - } - - private get minutesTips() { - return document.querySelector('.timepicker-ui-minutes-time') as HTMLDivElement; - } - - private get hourTips() { - return document.querySelector('.timepicker-ui-hour-time-12') as HTMLDivElement; - } - - private get allValueTips() { - return [ - ...document.querySelectorAll('.timepicker-ui-value-tips'), - ...document.querySelectorAll('.timepicker-ui-value-tips-24h'), - ] as const as Array; - } - - private get openElementData() { - const data: NodeListOf = this._element?.querySelectorAll('[data-open]'); - - if (data?.length > 0) { - const arr: string[] = []; - - data.forEach(({ dataset }) => arr.push(dataset.open ?? '')); - return [...new Set(arr)]; - } - - return null; - } - - private get openElement() { - if (this.openElementData === null) { - this.input?.setAttribute('data-open', 'timepicker-ui-input'); - - return [this.input]; - } - - return ( - this.openElementData.map((open) => this._element?.querySelectorAll(`[data-open='${open}']`))[0] ?? '' - ); - } - - private get cancelButton() { - return document.querySelector('.timepicker-ui-cancel-btn') as HTMLButtonElement; - } - - private get okButton() { - return document.querySelector('.timepicker-ui-ok-btn') as HTMLButtonElement; - } - - private get activeTypeMode() { - return document.querySelector('.timepicker-ui-type-mode.active') as HTMLButtonElement; - } - - private get keyboardClockIcon() { - return document.querySelector('.timepicker-ui-keyboard-icon-wrapper') as HTMLButtonElement; - } - - private get footer() { - return document.querySelector('.timepicker-ui-footer') as HTMLDivElement; - } - - private get wrapper() { - return document.querySelector('.timepicker-ui-wrapper') as HTMLDivElement; - } - - /** - * @description The create method that init timepicker - */ - public create = (): void => { - this._updateInputValueWithCurrentTimeOnStart(); - this._checkDisabledValuesOnStart(); - this._setTimepickerClassToElement(); - this._setInputClassToInputElement(); - this._setDataOpenToInputIfDosentExistInWrapper(); - this._setClassTopOpenElement(); - this._handleOpenOnEnterFocus(); - this._handleOpenOnClick(); - this._getDisableTime(); - }; - - /** - * @description The open method opens immediately timepicker after init - * @param callback - The callback function triggered when timepicker is open by this method - */ - public open = (callback?: () => void): void => { - this.create(); - this._eventsBundle(); - - initCallback(callback); - }; - - /** - * @description Closure method closes the timepicker - * @param args - These parameters in this method are optional and order is any. You can set callback function first or boolean, - * or just boolean or just callback. If the boolean is set to true the input will be updating with the current value on picker. - * The callback function start immediately after close, if is invoke. The max parameters length is set to 2 - */ - public close = debounce((...args: Array): void => { - if (args.length > 2 || !this.modalElement) return; - - const [update] = args.filter((e) => typeof e === 'boolean'); - const [callback] = args.filter((e) => typeof e === 'function'); - - if (update) { - this._handleOkButton(); - this.okButton?.click(); - } - - this._isTouchMouseMove = false; - - allEvents - .split(' ') - .map((event) => document.removeEventListener(event, this._mutliEventsMoveHandler, false)); - - document.removeEventListener('mousedown', this._eventsClickMobileHandler); - document.removeEventListener('touchstart', this._eventsClickMobileHandler); - document.removeEventListener('keypress', this._handleEscClick); - this.wrapper.removeEventListener('keydown', this._focusTrapHandler); - - if (this._options.enableSwitchIcon) { - this.keyboardClockIcon.removeEventListener('touchstart', this._handlerViewChange); - this.keyboardClockIcon.removeEventListener('mousedown', this._handlerViewChange); - } - - this._removeAnimationToClose(); - - this.openElement.forEach((openEl) => openEl?.classList.remove('disabled')); - - setTimeout(() => { - document.body.style.overflowY = ''; - document.body.style.paddingRight = ''; - }, 400); - - this.openElement.forEach((openEl) => openEl?.classList.remove('disabled')); - - setTimeout(() => { - if (this._options.focusInputAfterCloseModal) this.input?.focus(); - - if (this.modalElement === null) return; - - this.modalElement.remove(); - - this._isModalRemove = true; - }, 300); - - initCallback(callback as TypeFunction); - }, 300); - - /** - * @description The destroy method destroy actual instance of picker by cloning element. - * @param callback - The callback function is started after destroyed method. This parameter is optional. - */ - public destroy = (callback?: TypeFunction) => { - allEvents - .split(' ') - .map((event) => document.removeEventListener(event, this._mutliEventsMoveHandler, false)); - - document.removeEventListener('mousedown', this._eventsClickMobileHandler); - document.removeEventListener('touchstart', this._eventsClickMobileHandler); - - if (this._options.enableSwitchIcon && this.keyboardClockIcon) { - this.keyboardClockIcon.removeEventListener('touchstart', this._handlerViewChange); - this.keyboardClockIcon.removeEventListener('mousedown', this._handlerViewChange); - } - - this._cloned = this._element.cloneNode(true); - this._element.after(this._cloned); - this._element.remove(); - // @ts-ignore - this._element = null; - - if (this._element === null) { - initCallback(callback); - } - - this._element = this._cloned as HTMLElement; - }; - - /** - * @description The update method which update timepicker with new options and can create a new instance. - * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current - * instance and is `required`. The `create` key is a boolean which if is set to true it starting the create() method after invoke update - * function and is optional. The `create` option is useful if you are using destroy and update methods together. - * @param callback - The `callback` function is started after update method. This parameter is optional. - */ - public update = ( - value: { - options: OptionTypes; - create?: boolean; - }, - callback?: TypeFunction, - ): void => { - this._options = { ...this._options, ...value.options }; - - this._checkMobileOption(); - - if (value.create) { - this.create(); - } - - initCallback(callback); - }; - - private _preventClockTypeByCurrentTime = () => { - if ( - (typeof this._options?.currentTime !== 'boolean' && this._options?.currentTime?.preventClockType) || - (typeof this._options?.currentTime === 'boolean' && this._options?.currentTime) - ) { - const { currentTime, clockType } = this._options; - const { type } = getInputValue(this.input as unknown as HTMLInputElement, clockType, currentTime, true); - - this._options.clockType = type ? '12h' : '24h'; - } - }; - - private _updateInputValueWithCurrentTimeOnStart = () => { - if ( - (typeof this._options?.currentTime !== 'boolean' && this._options?.currentTime?.updateInput) || - (typeof this._options?.currentTime === 'boolean' && this._options?.currentTime) - ) { - const { hour, minutes, type } = getInputValue( - this.input as unknown as HTMLInputElement, - this._options.clockType, - this._options.currentTime, - ); - - this.input.value = type ? `${hour}:${minutes} ${type}` : `${hour}:${minutes}`; - } - }; - - private _checkDisabledValuesOnStart() { - if (!this._options.disabledTime || this._options.disabledTime.interval) return; - - const { - disabledTime: { hours, minutes }, - clockType, - } = this._options; - - const isValidHours = hours ? checkDisabledHoursAndMinutes(hours, 'hour', clockType) : true; - const isValidMinutes = minutes ? checkDisabledHoursAndMinutes(minutes, 'minutes', clockType) : true; - - if (!isValidHours || !isValidMinutes) { - throw new Error('You set wrong hours or minutes in disabled option'); - } - } - - private _checkMobileOption() { - this._isMobileView = !!this._options.mobile; - - if (this._options.mobile) { - this._options.editable = true; - } - } - - private _getDisableTime() { - this._disabledTime = createDisabledTime(this._options); - } - - private _removeCircleClockClasses24h() { - this.circle?.classList.remove('timepicker-ui-circle-hand-24h'); - this.clockHand?.classList.remove('timepicker-ui-clock-hand-24h'); - } - - private _setCircleClockClasses24h() { - if (this.circle) { - this.circle?.classList.add('timepicker-ui-circle-hand-24h'); - } - if (this.clockHand) { - this.clockHand?.classList.add('timepicker-ui-clock-hand-24h'); - } - } - - private _setErrorHandler() { - const { error, currentHour, currentMin, currentType, currentLength } = getInputValue( - this.input as unknown as HTMLInputElement, - this._options.clockType, - ); - - if (error) { - const newEl = document.createElement('div'); - this.input?.classList.add('timepicker-ui-invalid-format'); - newEl.classList.add('timepicker-ui-invalid-text'); - newEl.innerHTML = 'Invalid Time Format'; - - if ( - this.input?.parentElement && - this.input?.parentElement.querySelector('.timepicker-ui-invalid-text') === null - ) { - this.input?.after(newEl); - } - - createNewEvent(this._element, 'geterror', { - error, - currentHour, - currentMin, - currentType, - currentLength, - }); - - throw new Error(`Invalid Time Format: ${error}`); - } - - // eslint-disable-next-line no-useless-return - return; - } - - private _removeErrorHandler() { - this.input?.classList.remove('timepicker-ui-invalid-format'); - const divToRemove = this._element?.querySelector('.timepicker-ui-invalid-text') as HTMLDivElement; - if (divToRemove) { - divToRemove.remove(); - } - } - - private _setOnStartCSSClassesIfClockType24h() { - if (this._options.clockType === '24h') { - let { hour } = getInputValue( - this.input as unknown as HTMLInputElement, - this._options.clockType, - this._options.currentTime, - ); - - if (this.input.value.length > 0) { - // eslint-disable-next-line prefer-destructuring - hour = this.input.value.split(':')[0]; - } - - if (Number(hour) > 12 || Number(hour) === 0) { - this._setCircleClockClasses24h(); - } - } - } - - private _setTheme = (): void => { - const allDiv = this.modalElement?.querySelectorAll('div'); - const allInput = this.modalElement?.querySelectorAll('input'); - const allElements = [...allInput, ...allDiv] as Array; - - const { theme } = this._options; - if (theme === 'crane-straight') { - allElements.forEach((el) => el.classList.add('crane-straight')); - } else if (theme === 'crane-radius') { - allElements.forEach((el) => el.classList.add('crane-straight', 'radius')); - } - }; - - private _setInputClassToInputElement = (): void => { - if (!hasClass(this.input as unknown as HTMLInputElement, 'timepicker-ui-input')) { - this.input?.classList.add('timepicker-ui-input'); - } - }; - - private _setDataOpenToInputIfDosentExistInWrapper = (): void => { - if (this.openElementData === null) { - this.input?.setAttribute('data-open', 'timepicker-ui-input'); - } - }; - - private _setClassTopOpenElement = (): void => { - this.openElement.forEach((openEl) => openEl?.classList.add('timepicker-ui-open-element')); - }; - - private _removeBackdrop = (): void => { - if (this._options.backdrop) return; - - this.modalElement?.classList.add('removed'); - this.openElement.forEach((openEl) => openEl?.classList.add('disabled')); - }; - - private _setNormalizeClass = (): void => { - const allElement = this.modalElement?.querySelectorAll('div'); - - this.modalElement?.classList.add('timepicker-ui-normalize'); - allElement?.forEach((div) => div.classList.add('timepicker-ui-normalize')); - }; - - private _setFlexEndToFooterIfNoKeyboardIcon = (): void => { - if (!this._options.enableSwitchIcon && this.footer) { - this.footer.style.justifyContent = 'flex-end'; - } - }; - - private _eventsBundle = (): void => { - if (!this._isModalRemove) { - return; - } - - this._handleEscClick(); - this._setErrorHandler(); - this._removeErrorHandler(); - - this.openElement.forEach((openEl) => openEl?.classList.add('disabled')); - this.input?.blur(); - - this._setScrollbarOrNot(); - this._setModalTemplate(); - this._setNormalizeClass(); - this._removeBackdrop(); - this._setBgColorToCirleWithHourTips(); - this._setOnStartCSSClassesIfClockType24h(); - this._setClassActiveToHourOnOpen(); - - if (this.clockFace !== null) { - const initClockFace = new ClockFace({ - array: getNumberOfHours12, - classToAdd: 'timepicker-ui-hour-time-12', - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - theme: this._options.theme, - disabledTime: this._disabledTime?.value?.isInterval - ? this._disabledTime?.value.rangeArrHour - : this._disabledTime?.value?.hours, - clockType: '12h', - hour: this.hour.value, - }); - - initClockFace.create(); - - if (this._options.clockType === '24h') { - const initClockFace24h = new ClockFace({ - array: getNumberOfHours24, - classToAdd: 'timepicker-ui-hour-time-24', - clockFace: this.tipsWrapperFor24h, - tipsWrapper: this.tipsWrapperFor24h, - theme: this._options.theme, - clockType: '24h', - disabledTime: this._disabledTime?.value?.isInterval - ? this._disabledTime?.value.rangeArrHour - : this._disabledTime?.value?.hours, - hour: this.hour.value, - }); - - initClockFace24h.create(); - } else { - if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { - setTimeout(() => { - if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { - initClockFace.updateDisable({ - hoursToUpdate: this._disabledTime?.value?.rangeArrHour, - minutesToUpdate: { - endMinutes: this._disabledTime?.value.endMinutes, - removedEndHour: this._disabledTime?.value.removedEndHour, - removedStartedHour: this._disabledTime?.value.removedStartedHour, - actualHour: this.hour.value, - startMinutes: this._disabledTime?.value.startMinutes, - }, - }); - } - }, 300); - } else { - setTimeout(() => { - initClockFace.updateDisable({ - minutesToUpdate: { - actualHour: this.hour.value, - pmHours: this._disabledTime?.value.pmHours, - amHours: this._disabledTime?.value.amHours, - activeMode: this.activeTypeMode?.textContent, - }, - }); - }, 300); - } - - initClockFace.updateDisable(); - } - } - - this._setFlexEndToFooterIfNoKeyboardIcon(); - - setTimeout(() => { - this._setTheme(); - }, 0); - - this._setAnimationToOpen(); - this._getInputValueOnOpenAndSet(); - this._toggleClassActiveToValueTips(this.hour.value); - - if (!this._isMobileView) { - this._setTransformToCircleWithSwitchesHour(this.hour.value); - this._handleAnimationClock(); - } - - this._handleMinutesEvents(); - this._handleHourEvents(); - - if (this._options.clockType !== '24h') { - this._handleAmClick(); - this._handlePmClick(); - } - - if (this.clockFace) { - this._handleMoveHand(); - } - - this._handleCancelButton(); - this._handleOkButton(); - - if (this.modalElement) { - this._setShowClassToBackdrop(); - this._handleBackdropClick(); - } - - this._handleIconChangeView(); - this._handleClickOnHourMobile(); - - if (this._options.focusTrap) { - this._focusTrapHandler(); - } - }; - - private _handleOpenOnClick = (): void => { - this.openElement.forEach((openEl) => - this._clickTouchEvents.forEach((el: string) => - openEl?.addEventListener(el, () => this._eventsBundle()), - ), - ); - }; - - private _getInputValueOnOpenAndSet = (): void => { - const value = getInputValue( - this.input as unknown as HTMLInputElement, - this._options.clockType, - this._options.currentTime, - ); - - if (value === undefined) { - this.hour.value = '12'; - this.minutes.value = '00'; - - createNewEvent(this._element, 'show', { - hour: this.hour.value, - minutes: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - - if (this._options.clockType !== '24h') { - this.AM.classList.add(selectorActive); - } - - return; - } - - let [hour, minutes, type] = this.input.value.split(':').join(' ').split(' '); - - if (this.input.value.length === 0) { - hour = value.hour as string; - minutes = value.minutes as string; - type = value.type as string; - } - - this.hour.value = hour; - this.minutes.value = minutes; - - const typeMode = document.querySelector(`[data-type='${type}']`) as HTMLElement; - - if (this._options.clockType !== '24h' && typeMode) { - typeMode.classList.add(selectorActive); - } - - createNewEvent(this._element, 'show', { - ...value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - }; - - private _handleCancelButton = (): void => { - this._clickTouchEvents.forEach((el: string) => { - this.cancelButton.addEventListener(el, () => { - const value = getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType); - - createNewEvent(this._element, 'cancel', { - ...value, - hourNotAccepted: this.hour.value, - minutesNotAccepted: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - - this.close(); - }); - }); - }; - - private _handleOkButton = (): void => { - this._clickTouchEvents.forEach((el: string) => { - this.okButton?.addEventListener(el, () => { - const { clockType, disabledTime } = this._options; - - const validHours = handleValueAndCheck(this.hour.value, 'hour', clockType); - const validMinutes = handleValueAndCheck(this.minutes.value, 'minutes', clockType); - let checkDisable: undefined | boolean; - const validHoursDisabled = checkDisabledHoursAndMinutes( - this.hour.value as string, - 'hour', - clockType, - disabledTime?.hours, - ); - - const validMinutesDisabled = checkDisabledHoursAndMinutes( - this.minutes.value as string, - 'minutes', - clockType, - disabledTime?.minutes, - ); - - if (disabledTime?.interval) { - checkDisable = checkedDisabledValuesInterval( - this.hour.value, - this.minutes.value, - this.activeTypeMode?.textContent, - disabledTime.interval, - ); - } - - if ( - checkDisable === false || - validHours === false || - validMinutes === false || - validHoursDisabled === false || - validMinutesDisabled === false - ) { - if (checkDisable === false || !validMinutes || !validMinutesDisabled) { - this.minutes.classList.add('invalid-value'); - } - - if (checkDisable === false || !validHours || !validHoursDisabled) { - this.hour.classList.add('invalid-value'); - } - - return; - } - - this.input.value = `${this.hour.value}:${this.minutes.value} ${ - this._options.clockType === '24h' ? '' : this.activeTypeMode?.dataset.type - }`.trimEnd(); - - createNewEvent(this._element, 'accept', { - hour: this.hour.value, - minutes: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - - this.close(); - }); - }); - }; - - private _setShowClassToBackdrop = (): void => { - if (this._options.backdrop) { - setTimeout(() => { - this.modalElement.classList.add('show'); - }, 300); - } - }; - - private _handleBackdropClick = (): void => { - this.modalElement?.addEventListener('click', (ev) => { - const target = ev.target as Element as HTMLElement; - - if (!hasClass(target, 'timepicker-ui-modal')) return; - - const value = getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType); - - createNewEvent(this._element, 'cancel', { - ...value, - hourNotAccepted: this.hour.value, - minutesNotAccepted: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - - this.close(); - }); - }; - - private _setBgColorToCirleWithHourTips = (): void => { - if (!this._options) return; - - const { mobile, theme } = this._options; - - if (mobile || this.circle === null) return; - - if (theme === 'crane-straight' || theme === 'crane-radius') { - this.circle.style.backgroundColor = variables.cranered400; - } else { - this.circle.style.backgroundColor = variables.purple; - } - }; - - private _setBgColorToCircleWithMinutesTips = (): void => { - const { theme } = this._options; - - if (this.minutes.value && getNumberOfMinutes.includes(this.minutes.value)) { - if (theme === 'crane-straight' || theme === 'crane-radius') { - this.circle.style.backgroundColor = variables.cranered400; - } else { - this.circle.style.backgroundColor = variables.purple; - } - this.circle.classList.remove('small-circle'); - } - }; - - private _removeBgColorToCirleWithMinutesTips = (): void => { - if (this.minutes.value && getNumberOfMinutes.includes(this.minutes.value)) return; - - this.circle.style.backgroundColor = ''; - this.circle.classList.add('small-circle'); - }; - - private _setTimepickerClassToElement = (): void => { - this._element?.classList.add(name); - }; - - private _setClassActiveToHourOnOpen = (): void => { - if (this._options.mobile || this._isMobileView) return; - - this.hour?.classList.add(selectorActive); - }; - - private _setMinutesToClock = (value: string | null): void => { - if (this.clockFace !== null) this._setTransformToCircleWithSwitchesMinutes(value); - this._removeBgColorToCirleWithMinutesTips(); - - const getDisabledMinutes = this._disabledTime?.value?.minutes - ? this._disabledTime?.value?.minutes - : this._disabledTime?.value; - - const initClockFace = new ClockFace({ - array: getNumberOfMinutes, - classToAdd: 'timepicker-ui-minutes-time', - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - theme: this._options.theme, - disabledTime: getDisabledMinutes, - hour: this.hour.value, - clockType: this._options.clockType, - }); - - initClockFace.create(); - - if (this._options.clockType === '12h') { - initClockFace.updateDisable(); - } - - this._toggleClassActiveToValueTips(value); - - if (this._options.clockType === '24h') { - this.tipsWrapperFor24h.innerHTML = ''; - } - }; - - private _setHoursToClock = (value: string | null): void => { - if (this.clockFace !== null) { - this._setTransformToCircleWithSwitchesHour(value); - this._setBgColorToCirleWithHourTips(); - - const disabledTime = this._disabledTime?.value?.isInterval - ? this._disabledTime?.value.rangeArrHour - : this._disabledTime?.value?.hours; - - const init12h = new ClockFace({ - array: getNumberOfHours12, - classToAdd: 'timepicker-ui-hour-time-12', - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - theme: this._options.theme, - disabledTime, - clockType: '12h', - hour: this.hour.value, - }); - - init12h.create(); - - if (this._options.clockType === '24h') { - new ClockFace({ - array: getNumberOfHours24, - classToAdd: 'timepicker-ui-hour-time-24', - clockFace: this.tipsWrapperFor24h, - tipsWrapper: this.tipsWrapperFor24h, - theme: this._options.theme, - clockType: '24h', - disabledTime, - hour: this.hour.value, - }).create(); - } else { - init12h.updateDisable(); - } - - this._toggleClassActiveToValueTips(value); - } - }; - - private _setTransformToCircleWithSwitchesHour = (val: string | null): void => { - const value = Number(val); - - let degrees = value > 12 ? value * 30 - 360 : value * 30; - - if (degrees === 360) { - degrees = 0; - } - - if (degrees > 360) return; - - this.clockHand.style.transform = `rotateZ(${degrees}deg)`; - }; - - private _setTransformToCircleWithSwitchesMinutes = (val: string | null): void => { - const degrees = Number(val) * 6; - - if (degrees > 360) return; - - this.clockHand.style.transform = `rotateZ(${degrees}deg)`; - }; - - private _getDestructuringObj(isAmPm?: boolean) { - const { - endMinutes, - removedEndHour, - removedStartedHour, - startMinutes, - pmHours, - amHours, - removedAmHour, - removedPmHour, - } = this._disabledTime.value; - - if (isAmPm) { - return { - minutesToUpdate: { - actualHour: this.hour.value, - pmHours, - amHours, - activeMode: this.activeTypeMode?.textContent, - startMinutes, - endMinutes, - removedAmHour, - removedPmHour, - }, - }; - } - - return { - minutesToUpdate: { - endMinutes, - removedEndHour, - removedStartedHour, - actualHour: this.hour.value, - startMinutes, - }, - }; - } - - private _handleAmClick = (): void => { - this._clickTouchEvents.forEach((e: string) => { - this.AM.addEventListener(e, (ev) => { - const target = ev.target as Element; - - target.classList.add(selectorActive); - this.PM.classList.remove(selectorActive); - - if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { - const initClockFace = new ClockFace({ - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, - }); - - if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { - setTimeout(() => { - if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { - initClockFace.updateDisable({ - hoursToUpdate: this._disabledTime?.value?.rangeArrHour, - ...this._getDestructuringObj(), - }); - } else { - initClockFace.clean(); - } - }, 300); - } else { - setTimeout(() => { - initClockFace.updateDisable({ - ...this._getDestructuringObj(true), - }); - }, 300); - } - - initClockFace.updateDisable(); - } - - createNewEvent(this._element, 'selectamtypemode', { - hour: this.hour.value, - minutes: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - }); - }); - }; - - private _handlePmClick = (): void => { - this._clickTouchEvents.forEach((el: string) => { - this.PM.addEventListener(el, (ev) => { - const target = ev.target as Element; - - target.classList.add(selectorActive); - this.AM.classList.remove(selectorActive); - - if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { - const initClockFace = new ClockFace({ - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, - }); - - if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { - setTimeout(() => { - if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { - initClockFace.updateDisable({ - hoursToUpdate: this._disabledTime?.value?.rangeArrHour, - ...this._getDestructuringObj(), - }); - } else { - initClockFace.clean(); - } - }, 300); - } else { - setTimeout(() => { - initClockFace.updateDisable({ - ...this._getDestructuringObj(true), - }); - }, 300); - } - } - - createNewEvent(this._element, 'selectpmtypemode', { - hour: this.hour.value, - minutes: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - }); - }); - }; - - private _handleAnimationClock = (): void => { - if (this._options.animation) { - setTimeout(() => { - this.clockFace?.classList.add('timepicker-ui-clock-animation'); - - setTimeout(() => { - this.clockFace?.classList.remove('timepicker-ui-clock-animation'); - }, 600); - }, 150); - } - }; - - private _handleAnimationSwitchTipsMode = (): void => { - this.clockHand.classList.add('timepicker-ui-tips-animation'); - setTimeout(() => { - this.clockHand?.classList.remove('timepicker-ui-tips-animation'); - }, 401); - }; - - private _handleClasses24h = (ev: any, element?: HTMLInputElement) => { - const target = ev.target as HTMLInputElement; - - if (this.hourTips) { - if (this._options.clockType === '24h') { - if (Number(target.textContent) > 12 || Number(target.textContent) === 0) { - this._setCircleClockClasses24h(); - } else { - this._removeCircleClockClasses24h(); - } - - if (!this._options.mobile) { - this.tipsWrapperFor24h?.classList.remove('timepicker-ui-tips-wrapper-24h-disabled'); - } - } - } - - if (!target || !element) return; - - element.value = (target.value as string).replace(/\D+/g, ''); - element.click(); - }; - - private _handleHourEvents = (): void => { - this._inputEvents.forEach((el) => { - this.hour?.addEventListener(el, (ev) => { - const target = ev.target as HTMLInputElement; - - if (this.clockFace !== null) this._handleAnimationSwitchTipsMode(); - - if (this._options.clockType === '24h') { - if (Number(target.value) > 12 || Number(target.value) === 0) { - this._setCircleClockClasses24h(); - } else { - this._removeCircleClockClasses24h(); - } - - if (!this._options.mobile) { - this.tipsWrapperFor24h?.classList.remove('timepicker-ui-tips-wrapper-24h-disabled'); - } - } - - this._setHoursToClock(target.value); - target.classList.add(selectorActive); - this.minutes.classList.remove(selectorActive); - - if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { - const initClockFace = new ClockFace({ - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, - }); - - if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { - setTimeout(() => { - if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { - initClockFace.updateDisable({ - hoursToUpdate: this._disabledTime?.value?.rangeArrHour, - ...this._getDestructuringObj(), - }); - } else { - initClockFace.clean(); - } - }, 300); - } else { - setTimeout(() => { - initClockFace.updateDisable({ - ...this._getDestructuringObj(true), - }); - }, 300); - } - } - - createNewEvent(this._element, 'selecthourmode', { - hour: this.hour.value, - minutes: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - - if (this.clockFace !== null) this.circle.classList.remove('small-circle'); - }); - }); - - this.hour?.addEventListener('blur', (e) => this._handleClasses24h(e, this.hour)); - this.hour?.addEventListener('focus', (e) => this._handleClasses24h(e, this.hour)); - }; - - private _handleMinutesEvents = (): void => { - this._inputEvents.forEach((el) => { - this.minutes.addEventListener(el, (ev) => { - const target = ev.target as HTMLInputElement; - - if (this.clockFace !== null) { - this._handleAnimationSwitchTipsMode(); - this._setMinutesToClock(target.value); - } - - if (this._options.clockType === '24h') { - this._removeCircleClockClasses24h(); - - if (!this._options.mobile) { - this.tipsWrapperFor24h?.classList.add('timepicker-ui-tips-wrapper-24h-disabled'); - } - } - - target.classList.add(selectorActive); - this.hour?.classList.remove(selectorActive); - - if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { - const initClockFace = new ClockFace({ - clockFace: this.clockFace, - tipsWrapper: this.tipsWrapper, - array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, - }); - - if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { - setTimeout(() => { - if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { - initClockFace.updateDisable({ - hoursToUpdate: this._disabledTime?.value.rangeArrHour, - ...this._getDestructuringObj(), - }); - } else { - initClockFace.clean(); - } - }, 300); - } else { - setTimeout(() => { - initClockFace.updateDisable({ - ...this._getDestructuringObj(true), - }); - }, 300); - } - } - - createNewEvent(this._element, 'selectminutemode', { - hour: this.hour.value, - minutes: this.minutes.value, - type: this.activeTypeMode?.dataset.type, - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - }); - }); - }); - - this.minutes?.addEventListener('blur', (e) => this._handleClasses24h(e, this.minutes)); - this.minutes?.addEventListener('focus', (e) => this._handleClasses24h(e, this.minutes)); - }; - - private _handleEventToMoveHand = (event: TouchEvent): void => { - const { target: t, type, touches } = event; - const target = t as Element; - - const { incrementMinutes, incrementHours, switchToMinutesAfterSelectHour } = this._options; - - if (!getClickTouchPosition(event, this.clockFace)) return; - - const obj = getClickTouchPosition(event, this.clockFace); - - const clockFaceRadius = this.clockFace.offsetWidth / 2; - - let rtangens = obj && Math.atan2(obj.y - clockFaceRadius, obj.x - clockFaceRadius); - - if (getBrowser()) { - const touched = getClickTouchPosition(event, this.clockFace, true); - if (!touched) return; - - rtangens = Math.atan2(touched.y - clockFaceRadius, touched.x - clockFaceRadius); - } - - if (type === 'mouseup' || type === 'touchend') { - this._isTouchMouseMove = false; - - if ( - switchToMinutesAfterSelectHour && - (hasClass(target, 'timepicker-ui-value-tips') || - hasClass(target, 'timepicker-ui-value-tips-24h') || - hasClass(target, 'timepicker-ui-tips-wrapper')) - ) { - this.minutes.click(); - } - - return; - } - - if (type === 'mousedown' || type === 'mousemove' || type === 'touchmove' || type === 'touchstart') { - if (type === 'mousedown' || type === 'touchstart' || type === 'touchmove') { - if ( - (hasClass(target, 'timepicker-ui-clock-face') || - hasClass(target, 'timepicker-ui-circle-hand') || - hasClass(target, 'timepicker-ui-hour-time-12') || - hasClass(target, 'timepicker-ui-minutes-time') || - hasClass(target, 'timepicker-ui-clock-hand') || - hasClass(target, 'timepicker-ui-value-tips') || - hasClass(target, 'timepicker-ui-value-tips-24h') || - hasClass(target, 'timepicker-ui-tips-wrapper') || - hasClass(target, 'timepicker-ui-tips-wrapper-24h')) && - !hasClass(target, 'timepicker-ui-tips-disabled') - ) { - event.preventDefault(); - this._isTouchMouseMove = true; - } else { - this._isTouchMouseMove = false; - } - } - } - - if (!this._isTouchMouseMove) return; - - if (this.minutesTips !== null) { - this.minutes.classList.add(selectorActive); - let deg = - rtangens && getIncrementTimes(Math.trunc((rtangens * 180) / Math.PI) + 90, incrementMinutes, 6); - - if (deg === undefined) return; - - let minute: number; - - if (deg < 0) { - minute = Math.round(360 + deg / 6) % 60; - deg = 360 + Math.round(deg / 6) * 6; - } else { - minute = Math.round(deg / 6) % 60; - deg = Math.round(deg / 6) * 6; - } - - if (!this._disabledTime?.value.isInterval) { - if (this._disabledTime?.value?.minutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`)) { - return; - } - } else { - // eslint-disable-next-line no-lonely-if - if (this._disabledTime?.value.endType === this._disabledTime?.value.startType) { - if ( - this._disabledTime?.value?.endMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && - this.hour.value === this._disabledTime?.value?.removedEndHour && - this._disabledTime?.value.endType === this.activeTypeMode?.textContent - ) { - return; - } - - if ( - this._disabledTime?.value?.startMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && - this.hour.value === this._disabledTime?.value?.removedStartedHour && - this._disabledTime?.value.startType === this.activeTypeMode?.textContent - ) { - return; - } - } else { - if (this.activeTypeMode?.textContent === this._disabledTime?.value.endType) { - if ( - (this._disabledTime?.value?.endMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && - this._disabledTime?.value.removedPmHour === this.hour.value) || - this._disabledTime?.value.pmHours.map(Number).includes(Number(this.hour.value)) - ) { - return; - } - } - if (this.activeTypeMode?.textContent === this._disabledTime?.value.startType) { - if ( - (this._disabledTime?.value?.startMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && - this._disabledTime?.value.removedAmHour === this.hour.value) || - this._disabledTime?.value.amHours.map(Number).includes(Number(this.hour.value)) - ) { - return; - } - } - } - } - - this.minutes.value = minute >= 10 ? `${minute}` : `0${minute}`; - this.clockHand.style.transform = `rotateZ(${deg}deg)`; - - this._degreesMinutes = deg; - - this._toggleClassActiveToValueTips(this.minutes.value); - this._removeBgColorToCirleWithMinutesTips(); - this._setBgColorToCircleWithMinutesTips(); - - createNewEvent(this._element, 'update', { - ...getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType), - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - eventType: type, - type: this.activeTypeMode?.dataset.type, - }); - } - - const myLocation = touches ? touches[0] : undefined; - const realTarget = - touches && myLocation - ? (document.elementFromPoint(myLocation.clientX, myLocation.clientY) as HTMLDivElement) - : null; - - if (this.hourTips !== null) { - this.hour?.classList.add(selectorActive); - if ( - !hasClass(realTarget || target, 'timepicker-ui-value-tips-24h') && - !hasClass(realTarget || target, 'timepicker-ui-tips-disabled') && - (hasClass(realTarget || target, 'timepicker-ui-value-tips') || - hasClass(realTarget || target, 'timepicker-ui-tips-wrapper')) - ) { - let deg = - rtangens && getIncrementTimes(Math.trunc((rtangens * 180) / Math.PI) + 90, incrementHours, 30); - - this._degreesHours = deg as number; - - if (deg === undefined) return; - - let hour: number; - - if (deg < 0) { - hour = Math.round(360 + deg / 30) % 12; - deg = 360 + deg; - } else { - hour = Math.round(deg / 30) % 12; - if (hour === 0 || hour > 12) hour = 12; - } - - const isInterval = this._disabledTime?.value.isInterval ? 'rangeArrHour' : 'hours'; - - if (this._disabledTime?.value.endType === this._disabledTime?.value?.startType) { - if (typeof this._disabledTime?.value?.endType === 'string') { - if ( - this._disabledTime?.value?.endType === this.activeTypeMode?.textContent && - this._disabledTime?.value?.startType === this.activeTypeMode?.textContent - ) { - if (this._disabledTime?.value[isInterval]?.includes(hour.toString())) { - return; - } - } - } else if (this._disabledTime?.value[isInterval]?.includes(hour.toString())) { - return; - } - } else { - if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { - if (this._disabledTime?.value.amHours.includes(hour.toString())) { - return; - } - } - - if (this._disabledTime?.value.endType === this.activeTypeMode?.textContent) { - if (this._disabledTime?.value.pmHours.includes(hour.toString())) { - return; - } - } - } - - this.clockHand.style.transform = `rotateZ(${deg}deg)`; - this.hour.value = hour > 9 ? `${hour}` : `0${hour}`; - - this._removeCircleClockClasses24h(); - this._toggleClassActiveToValueTips(hour); - } - - if ( - (hasClass(realTarget || target, 'timepicker-ui-value-tips-24h') || - hasClass(realTarget || target, 'timepicker-ui-tips-wrapper-24h')) && - !hasClass(realTarget || target, 'timepicker-ui-tips-disabled') - ) { - let deg = - rtangens && getIncrementTimes(Math.trunc((rtangens * 180) / Math.PI) + 90, incrementHours, 30); - - this._degreesHours = deg as number; - - let hour: number | string; - - if (deg === undefined) return; - - if (deg < 0) { - hour = Math.round(360 + deg / 30) % 24; - deg = 360 + deg; - } else { - hour = Math.round(deg / 30) + 12; - - if (hour === 12) { - hour = '00'; - } - } - - const isInterval = this._disabledTime?.value.isInterval ? 'rangeArrHour' : 'hours'; - - if (this._disabledTime?.value[isInterval]?.includes(hour.toString())) { - return; - } - - this._setCircleClockClasses24h(); - - this.clockHand.style.transform = `rotateZ(${deg}deg)`; - this.hour.value = `${hour}`; - - this._toggleClassActiveToValueTips(hour); - } - - createNewEvent(this._element, 'update', { - ...getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType), - degreesHours: this._degreesHours, - degreesMinutes: this._degreesMinutes, - eventType: type, - type: this.activeTypeMode?.dataset.type, - }); - } - }; - - private _toggleClassActiveToValueTips = (value: string | number | null): void => { - const element = this.allValueTips.find((tip: HTMLElement) => Number(tip.innerText) === Number(value)); - - this.allValueTips.map((el) => el.classList.remove(selectorActive)); - - if (element === undefined) return; - - element.classList.add(selectorActive); - }; - - private _handleMoveHand = (): void => { - if (this._options.mobile || this._isMobileView) return; - - allEvents.split(' ').forEach((event) => { - if (event === 'touchstart' || event === 'touchmove' || event === 'touchend') { - document.addEventListener(event, this._mutliEventsMoveHandler, { - passive: false, - }); - } else { - document.addEventListener(event, this._mutliEventsMoveHandler, false); - } - }); - }; - - private _setModalTemplate = (): void => { - if (!this._options) return; - - const { appendModalSelector } = this._options; - - if (appendModalSelector === '' || !appendModalSelector) { - document.body.insertAdjacentHTML('afterend', this.modalTemplate); - } else { - const element = document?.querySelector(appendModalSelector); - element?.insertAdjacentHTML('beforeend', this.modalTemplate); - } - }; - - private _setScrollbarOrNot = (): void => { - if (!this._options.enableScrollbar) { - document.body.style.paddingRight = `${getScrollbarWidth()}px`; - document.body.style.overflowY = 'hidden'; - } else { - setTimeout(() => { - document.body.style.overflowY = ''; - document.body.style.paddingRight = ''; - }, 400); - } - }; - - private _setAnimationToOpen = (): void => { - this.modalElement?.classList.add('opacity'); - - if (this._options.animation) { - setTimeout(() => { - this.modalElement?.classList.add('show'); - }, 150); - } else { - this.modalElement?.classList.add('show'); - } - }; - - private _removeAnimationToClose = (): void => { - if (this.modalElement) { - if (this._options.animation) { - setTimeout(() => { - this.modalElement?.classList.remove('show'); - }, 150); - } else { - this.modalElement?.classList.remove('show'); - } - } - }; - - private _handlerViewChange = debounce(() => { - const { clockType } = this._options; - - if (!hasClass(this.modalElement, 'mobile')) { - this.close(); - - this._isMobileView = true; - this._options.mobile = true; - - const beforeHourContent = this.hour.value; - const beforeMinutesContent = this.minutes.value; - const beforeTypeModeContent = this.activeTypeMode?.dataset.type; - - setTimeout(() => { - this.destroy(); - this.update({ - options: { mobile: true }, - }); - setTimeout(() => { - this.open(); - - this.hour.value = beforeHourContent; - this.minutes.value = beforeMinutesContent; - - if (this._options.clockType === '12h') { - const toAddType = beforeTypeModeContent === 'PM' ? 'PM' : 'AM'; - const toRemoveType = beforeTypeModeContent === 'PM' ? 'AM' : 'PM'; - - // @ts-ignore - this[toAddType].classList.add(selectorActive); - // @ts-ignore - this[toRemoveType].classList.remove(selectorActive); - } - }, 300); - }, 300); - } else { - const validHours = handleValueAndCheck(this.hour.value, 'hour', clockType); - const validMinutes = handleValueAndCheck(this.minutes.value, 'minutes', clockType); - - if (validHours === false || validMinutes === false) { - if (!validMinutes) { - this.minutes.classList.add('invalid-value'); - } - - if (!validHours) { - this.hour?.classList.add('invalid-value'); - } - - return; - } - - if (validHours === true && validMinutes === true) { - if (validMinutes) { - this.minutes.classList.remove('invalid-value'); - } - - if (validHours) { - this.hour?.classList.remove('invalid-value'); - } - } - - this.close(); - - this._isMobileView = false; - this._options.mobile = false; - - const beforeHourContent = this.hour.value; - const beforeMinutesContent = this.minutes.value; - const beforeTypeModeContent = this.activeTypeMode?.dataset.type; - - setTimeout(() => { - this.destroy(); - this.update({ - options: { mobile: false }, - }); - setTimeout(() => { - this.open(); - - this.hour.value = beforeHourContent; - this.minutes.value = beforeMinutesContent; - - if (this._options.clockType === '12h') { - const toAddType = beforeTypeModeContent === 'PM' ? 'PM' : 'AM'; - const toRemoveType = beforeTypeModeContent === 'PM' ? 'AM' : 'PM'; - - // @ts-ignore - this[toAddType].classList.add(selectorActive); - // @ts-ignore - this[toRemoveType].classList.remove(selectorActive); - } - - this._setTransformToCircleWithSwitchesHour(this.hour.value); - this._toggleClassActiveToValueTips(this.hour.value); - - if (Number(this.hour.value) > 12 || Number(this.hour.value) === 0) { - this._setCircleClockClasses24h(); - } else { - this._removeCircleClockClasses24h(); - } - }, 300); - }, 300); - } - }, 400); - - private _handleIconChangeView = async (): Promise => { - if (this._options.enableSwitchIcon) { - if (getBrowser()) { - this.keyboardClockIcon.addEventListener('touchstart', this._handlerViewChange); - } else { - this.keyboardClockIcon.addEventListener('click', this._handlerViewChange); - } - } - }; - - private _handlerClickHourMinutes = async (event: Event): Promise => { - if (!this.modalElement) return; - const { clockType, editable } = this._options; - - const target = event.target as HTMLDivElement; - const validHours = handleValueAndCheck(this.hour.value, 'hour', clockType); - const validMinutes = handleValueAndCheck(this.minutes.value, 'minutes', clockType); - - if (!editable) return; - - if (!hasClass(target, 'timepicker-ui-hour') && !hasClass(target, 'timepicker-ui-minutes')) { - if (validHours === true && validMinutes === true) { - if (validMinutes) this.minutes.classList.remove('invalid-value'); - if (validHours) this.hour?.classList.remove('invalid-value'); - } - } else if (validHours === false || validMinutes === false) { - if (!validMinutes) this.minutes.classList.add('invalid-value'); - if (!validHours) this.hour?.classList.add('invalid-value'); - } - }; - - private _handleClickOnHourMobile = (): void => { - document.addEventListener('mousedown', this._eventsClickMobileHandler); - document.addEventListener('touchstart', this._eventsClickMobileHandler); - }; - - private _handleKeyPress = (e: KeyboardEvent) => { - if (e.key === 'Escape' && this.modalElement) { - this.close(); - } - }; - - private _handleEscClick = (): void => { - document.addEventListener('keydown', this._handleKeyPress); - }; - - private _focusTrapHandler = (): void => { - setTimeout(() => { - const focusableEls = this.wrapper?.querySelectorAll('div[tabindex="0"]:not([disabled])'); - const focusableInputs = this.wrapper?.querySelectorAll('input[tabindex="0"]:not([disabled])'); - - if (!focusableEls || focusableEls.length <= 0 || focusableInputs.length <= 0) return; - - const allFcousablElements = [...focusableInputs, ...focusableEls]; - const firstFocusableEl = allFcousablElements[0] as HTMLDivElement; - const lastFocusableEl = allFcousablElements[allFcousablElements.length - 1] as HTMLDivElement; - - this.wrapper.focus(); - - this.wrapper.addEventListener('keydown', ({ key, shiftKey, target: t }) => { - const target = t as HTMLDivElement; - - if (key === 'Tab') { - if (shiftKey) { - if (document.activeElement === firstFocusableEl) { - lastFocusableEl.focus(); - } - } else if (document.activeElement === lastFocusableEl) { - firstFocusableEl.focus(); - } - } - - if (key === 'Enter') { - if (hasClass(target, 'timepicker-ui-minutes')) { - this.minutes.click(); - } - - if (hasClass(target, 'timepicker-ui-hour')) { - this.hour.click(); - } - - if (hasClass(target, 'timepicker-ui-cancel-btn')) { - this.cancelButton.click(); - } - - if (hasClass(target, 'timepicker-ui-ok-btn')) { - this.okButton.click(); - } - - if (hasClass(target, 'timepicker-ui-keyboard-icon-wrapper')) { - this.keyboardClockIcon.click(); - } - - if (hasClass(target, 'timepicker-ui-am')) { - this.AM.click(); - } - - if (hasClass(target, 'timepicker-ui-pm')) { - this.PM.click(); - } - - if ( - hasClass(target, 'timepicker-ui-value-tips') || - hasClass(target, 'timepicker-ui-value-tips-24h') - ) { - const { left, top, x, y, width, height } = target.getBoundingClientRect(); - const tabIndexElement = document.elementFromPoint(x, y); - - // eslint-disable-next-line no-inner-declarations - const simulateMousedownEvent = () => { - const ev = new MouseEvent('mousedown', { - clientX: left + width / 2, - clientY: top + height / 2, - cancelable: true, - bubbles: true, - }); - - if (hasClass(tabIndexElement, 'timepicker-ui-value-tips-24h')) { - tabIndexElement?.dispatchEvent(ev); - } else { - tabIndexElement?.childNodes[0]?.dispatchEvent(ev); - } - - this._isTouchMouseMove = false; - }; - - simulateMousedownEvent(); - } - } - - setTimeout(() => { - this.wrapper.addEventListener('mousedown', () => (document.activeElement as HTMLDivElement).blur()); - }, 100); - }); - }, 301); - }; - - private _handleOpenOnEnterFocus = (): void => { - this.input.addEventListener('keydown', ({ target, key }) => { - if ((target as HTMLInputElement).disabled) return; - - if (key === 'Enter') { - this.open(); - } - }); - }; -} +/* eslint-disable no-useless-return */ +import { + createNewEvent, + createObjectFromData, + getBrowser, + getClickTouchPosition, + getConfig, + getIncrementTimes, + getScrollbarWidth, + hasClass, + initCallback, +} from './utils'; +import { getInputValue, handleValueAndCheck } from './utils/input'; +import { + createDisabledTime, + checkDisabledHoursAndMinutes, + checkedDisabledValuesInterval, +} from './utils/disable'; +import './styles/main.scss'; +import './styles/theme.scss'; +import variables from './styles/variables.scss'; +import { options as optionsDefault } from './utils/options'; +import type { OptionTypes } from './utils/types'; +import { name, allEvents, selectorActive } from './utils/variables'; +import { + getMobileModalTemplate, + getModalTemplate, + getNumberOfHours12, + getNumberOfMinutes, + getNumberOfHours24, +} from './utils/templates'; +import ClockFace from './components/ClockFace'; + +const debounce = ReturnType>( + callback: T, + timeout: number, +): ((...args: Parameters) => void) => { + let timer: ReturnType; + + return (...args: Parameters) => { + clearTimeout(timer); + timer = setTimeout(() => { + callback(...args); + }, timeout); + }; +}; + +type TypeFunction = () => void; + +export default class TimepickerUI { + private _degreesHours: number | null; + + private _degreesMinutes: number | null; + + private _options: OptionTypes; + + private _eventsClickMobile: (event: Event) => Promise; + + private _eventsClickMobileHandler: EventListenerOrEventListenerObject; + + private _mutliEventsMove: (event: Event) => void; + + private _mutliEventsMoveHandler: EventListenerOrEventListenerObject; + + private _clickTouchEvents: string[]; + + private _element: HTMLElement; + + private _isMobileView: boolean | null; + + private _isTouchMouseMove: boolean | null; + + private _disabledTime: any; + + private _cloned: Node | null; + + private _inputEvents: string[]; + + private _isModalRemove?: boolean; + + constructor(element: HTMLElement, options?: OptionTypes) { + this._element = element; + this._cloned = null; + this._options = getConfig( + { ...options, ...createObjectFromData(this._element?.dataset) }, + optionsDefault, + ); + + this._isTouchMouseMove = false; + this._degreesHours = + Number( + getInputValue(this._element?.querySelector('input') as HTMLInputElement, this._options.clockType) + .hour, + ) * 30; + this._degreesMinutes = + Number( + getInputValue(this._element?.querySelector('input') as HTMLInputElement, this._options.clockType) + .minutes, + ) * 6; + + this._isMobileView = false; + + this._mutliEventsMove = (event) => this._handleEventToMoveHand(event as TouchEvent); + this._mutliEventsMoveHandler = this._mutliEventsMove.bind(this); + + this._eventsClickMobile = (event) => this._handlerClickHourMinutes(event); + this._eventsClickMobileHandler = this._eventsClickMobile.bind(this); + + this._checkMobileOption(); + + this._clickTouchEvents = ['click', 'mousedown', 'touchstart']; + this._inputEvents = ['change', ...this._clickTouchEvents]; + + this._disabledTime = null; + + this._preventClockTypeByCurrentTime(); + + this._isModalRemove = true; + } + + private get modalTemplate() { + if (!this._options.mobile || !this._isMobileView) { + return getModalTemplate(this._options); + } + return getMobileModalTemplate(this._options); + } + + private get modalElement() { + return document.querySelector('.timepicker-ui-modal') as HTMLDivElement; + } + + private get clockFace() { + return document.querySelector('.timepicker-ui-clock-face') as HTMLDivElement; + } + + private get input() { + return this._element?.querySelector('input') as HTMLInputElement; + } + + private get clockHand() { + return document.querySelector('.timepicker-ui-clock-hand') as HTMLDivElement; + } + + private get circle() { + return document.querySelector('.timepicker-ui-circle-hand') as HTMLDivElement; + } + + private get tipsWrapper() { + return document.querySelector('.timepicker-ui-tips-wrapper') as HTMLDivElement; + } + + private get tipsWrapperFor24h() { + return document.querySelector('.timepicker-ui-tips-wrapper-24h') as HTMLDivElement; + } + + private get minutes() { + return document.querySelector('.timepicker-ui-minutes') as HTMLInputElement; + } + + private get hour() { + return document.querySelector('.timepicker-ui-hour') as HTMLInputElement; + } + + private get AM() { + return document.querySelector('.timepicker-ui-am') as HTMLDivElement; + } + + private get PM() { + return document.querySelector('.timepicker-ui-pm') as HTMLDivElement; + } + + private get minutesTips() { + return document.querySelector('.timepicker-ui-minutes-time') as HTMLDivElement; + } + + private get hourTips() { + return document.querySelector('.timepicker-ui-hour-time-12') as HTMLDivElement; + } + + private get allValueTips() { + return [ + ...document.querySelectorAll('.timepicker-ui-value-tips'), + ...document.querySelectorAll('.timepicker-ui-value-tips-24h'), + ] as const as Array; + } + + private get openElementData() { + const data: NodeListOf = this._element?.querySelectorAll('[data-open]'); + + if (data?.length > 0) { + const arr: string[] = []; + + data.forEach(({ dataset }) => arr.push(dataset.open ?? '')); + return [...new Set(arr)]; + } + + return null; + } + + private get openElement() { + if (this.openElementData === null) { + this.input?.setAttribute('data-open', 'timepicker-ui-input'); + + return [this.input]; + } + + return ( + this.openElementData.map((open) => this._element?.querySelectorAll(`[data-open='${open}']`))[0] ?? '' + ); + } + + private get cancelButton() { + return document.querySelector('.timepicker-ui-cancel-btn') as HTMLButtonElement; + } + + private get okButton() { + return document.querySelector('.timepicker-ui-ok-btn') as HTMLButtonElement; + } + + private get activeTypeMode() { + return document.querySelector('.timepicker-ui-type-mode.active') as HTMLButtonElement; + } + + private get keyboardClockIcon() { + return document.querySelector('.timepicker-ui-keyboard-icon-wrapper') as HTMLButtonElement; + } + + private get footer() { + return document.querySelector('.timepicker-ui-footer') as HTMLDivElement; + } + + private get wrapper() { + return document.querySelector('.timepicker-ui-wrapper') as HTMLDivElement; + } + + /** + * @description The create method that init timepicker + */ + public create = (): void => { + this._updateInputValueWithCurrentTimeOnStart(); + this._checkDisabledValuesOnStart(); + this._setTimepickerClassToElement(); + this._setInputClassToInputElement(); + this._setDataOpenToInputIfDosentExistInWrapper(); + this._setClassTopOpenElement(); + this._handleOpenOnEnterFocus(); + this._handleOpenOnClick(); + this._getDisableTime(); + }; + + /** + * @description The open method opens immediately timepicker after init + * @param callback - The callback function triggered when timepicker is open by this method + */ + public open = (callback?: () => void): void => { + this.create(); + this._eventsBundle(); + + initCallback(callback); + }; + + /** + * @description Closure method closes the timepicker + * @param args - These parameters in this method are optional and order is any. You can set callback function first or boolean, + * or just boolean or just callback. If the boolean is set to true the input will be updating with the current value on picker. + * The callback function start immediately after close, if is invoke. The max parameters length is set to 2 + */ + public close = debounce((...args: Array): void => { + if (args.length > 2 || !this.modalElement) return; + + const [update] = args.filter((e) => typeof e === 'boolean'); + const [callback] = args.filter((e) => typeof e === 'function'); + + if (update) { + this._handleOkButton(); + this.okButton?.click(); + } + + this._isTouchMouseMove = false; + + allEvents + .split(' ') + .map((event) => document.removeEventListener(event, this._mutliEventsMoveHandler, false)); + + document.removeEventListener('mousedown', this._eventsClickMobileHandler); + document.removeEventListener('touchstart', this._eventsClickMobileHandler); + document.removeEventListener('keypress', this._handleEscClick); + this.wrapper.removeEventListener('keydown', this._focusTrapHandler); + + if (this._options.enableSwitchIcon) { + this.keyboardClockIcon.removeEventListener('touchstart', this._handlerViewChange); + this.keyboardClockIcon.removeEventListener('mousedown', this._handlerViewChange); + } + + this._removeAnimationToClose(); + + this.openElement.forEach((openEl) => openEl?.classList.remove('disabled')); + + setTimeout(() => { + document.body.style.overflowY = ''; + document.body.style.paddingRight = ''; + }, 400); + + this.openElement.forEach((openEl) => openEl?.classList.remove('disabled')); + + setTimeout(() => { + if (this._options.focusInputAfterCloseModal) this.input?.focus(); + + if (this.modalElement === null) return; + + this.modalElement.remove(); + + this._isModalRemove = true; + }, 300); + + initCallback(callback as TypeFunction); + }, 300); + + /** + * @description The destroy method destroy actual instance of picker by cloning element. + * @param callback - The callback function is started after destroyed method. This parameter is optional. + */ + public destroy = (callback?: TypeFunction) => { + allEvents + .split(' ') + .map((event) => document.removeEventListener(event, this._mutliEventsMoveHandler, false)); + + document.removeEventListener('mousedown', this._eventsClickMobileHandler); + document.removeEventListener('touchstart', this._eventsClickMobileHandler); + + if (this._options.enableSwitchIcon && this.keyboardClockIcon) { + this.keyboardClockIcon.removeEventListener('touchstart', this._handlerViewChange); + this.keyboardClockIcon.removeEventListener('mousedown', this._handlerViewChange); + } + + this._cloned = this._element.cloneNode(true); + this._element.after(this._cloned); + this._element.remove(); + // @ts-ignore + this._element = null; + + if (this._element === null) { + initCallback(callback); + } + + this._element = this._cloned as HTMLElement; + }; + + /** + * @description The update method which update timepicker with new options and can create a new instance. + * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current + * instance and is `required`. The `create` key is a boolean which if is set to true it starting the create() method after invoke update + * function and is optional. The `create` option is useful if you are using destroy and update methods together. + * @param callback - The `callback` function is started after update method. This parameter is optional. + */ + public update = ( + value: { + options: OptionTypes; + create?: boolean; + }, + callback?: TypeFunction, + ): void => { + this._options = { ...this._options, ...value.options }; + + this._checkMobileOption(); + + if (value.create) { + this.create(); + } + + initCallback(callback); + }; + + private _preventClockTypeByCurrentTime = () => { + if ( + (typeof this._options?.currentTime !== 'boolean' && this._options?.currentTime?.preventClockType) || + (typeof this._options?.currentTime === 'boolean' && this._options?.currentTime) + ) { + const { currentTime, clockType } = this._options; + const { type } = getInputValue(this.input as unknown as HTMLInputElement, clockType, currentTime, true); + + this._options.clockType = type ? '12h' : '24h'; + } + }; + + private _updateInputValueWithCurrentTimeOnStart = () => { + if ( + (typeof this._options?.currentTime !== 'boolean' && this._options?.currentTime?.updateInput) || + (typeof this._options?.currentTime === 'boolean' && this._options?.currentTime) + ) { + const { hour, minutes, type } = getInputValue( + this.input as unknown as HTMLInputElement, + this._options.clockType, + this._options.currentTime, + ); + + this.input.value = type ? `${hour}:${minutes} ${type}` : `${hour}:${minutes}`; + } + }; + + private _checkDisabledValuesOnStart() { + if (!this._options.disabledTime || this._options.disabledTime.interval) return; + + const { + disabledTime: { hours, minutes }, + clockType, + } = this._options; + + const isValidHours = hours ? checkDisabledHoursAndMinutes(hours, 'hour', clockType) : true; + const isValidMinutes = minutes ? checkDisabledHoursAndMinutes(minutes, 'minutes', clockType) : true; + + if (!isValidHours || !isValidMinutes) { + throw new Error('You set wrong hours or minutes in disabled option'); + } + } + + private _checkMobileOption() { + this._isMobileView = !!this._options.mobile; + + if (this._options.mobile) { + this._options.editable = true; + } + } + + private _getDisableTime() { + this._disabledTime = createDisabledTime(this._options); + } + + private _removeCircleClockClasses24h() { + this.circle?.classList.remove('timepicker-ui-circle-hand-24h'); + this.clockHand?.classList.remove('timepicker-ui-clock-hand-24h'); + } + + private _setCircleClockClasses24h() { + if (this.circle) { + this.circle?.classList.add('timepicker-ui-circle-hand-24h'); + } + if (this.clockHand) { + this.clockHand?.classList.add('timepicker-ui-clock-hand-24h'); + } + } + + private _setErrorHandler() { + const { error, currentHour, currentMin, currentType, currentLength } = getInputValue( + this.input as unknown as HTMLInputElement, + this._options.clockType, + ); + + if (error) { + const newEl = document.createElement('div'); + this.input?.classList.add('timepicker-ui-invalid-format'); + newEl.classList.add('timepicker-ui-invalid-text'); + newEl.innerHTML = 'Invalid Time Format'; + + if ( + this.input?.parentElement && + this.input?.parentElement.querySelector('.timepicker-ui-invalid-text') === null + ) { + this.input?.after(newEl); + } + + createNewEvent(this._element, 'geterror', { + error, + currentHour, + currentMin, + currentType, + currentLength, + }); + + throw new Error(`Invalid Time Format: ${error}`); + } + + // eslint-disable-next-line no-useless-return + return; + } + + private _removeErrorHandler() { + this.input?.classList.remove('timepicker-ui-invalid-format'); + const divToRemove = this._element?.querySelector('.timepicker-ui-invalid-text') as HTMLDivElement; + if (divToRemove) { + divToRemove.remove(); + } + } + + private _setOnStartCSSClassesIfClockType24h() { + if (this._options.clockType === '24h') { + let { hour } = getInputValue( + this.input as unknown as HTMLInputElement, + this._options.clockType, + this._options.currentTime, + ); + + if (this.input.value.length > 0) { + // eslint-disable-next-line prefer-destructuring + hour = this.input.value.split(':')[0]; + } + + if (Number(hour) > 12 || Number(hour) === 0) { + this._setCircleClockClasses24h(); + } + } + } + + private _setTheme = (): void => { + const allDiv = this.modalElement?.querySelectorAll('div'); + const allInput = this.modalElement?.querySelectorAll('input'); + const allElements = [...allInput, ...allDiv] as Array; + + const { theme } = this._options; + if (theme === 'crane-straight') { + allElements.forEach((el) => el.classList.add('crane-straight')); + } else if (theme === 'crane-radius') { + allElements.forEach((el) => el.classList.add('crane-straight', 'radius')); + } + }; + + private _setInputClassToInputElement = (): void => { + if (!hasClass(this.input as unknown as HTMLInputElement, 'timepicker-ui-input')) { + this.input?.classList.add('timepicker-ui-input'); + } + }; + + private _setDataOpenToInputIfDosentExistInWrapper = (): void => { + if (this.openElementData === null) { + this.input?.setAttribute('data-open', 'timepicker-ui-input'); + } + }; + + private _setClassTopOpenElement = (): void => { + this.openElement.forEach((openEl) => openEl?.classList.add('timepicker-ui-open-element')); + }; + + private _removeBackdrop = (): void => { + if (this._options.backdrop) return; + + this.modalElement?.classList.add('removed'); + this.openElement.forEach((openEl) => openEl?.classList.add('disabled')); + }; + + private _setNormalizeClass = (): void => { + const allElement = this.modalElement?.querySelectorAll('div'); + + this.modalElement?.classList.add('timepicker-ui-normalize'); + allElement?.forEach((div) => div.classList.add('timepicker-ui-normalize')); + }; + + private _setFlexEndToFooterIfNoKeyboardIcon = (): void => { + if (!this._options.enableSwitchIcon && this.footer) { + this.footer.style.justifyContent = 'flex-end'; + } + }; + + private _eventsBundle = (): void => { + if (!this._isModalRemove) { + return; + } + + this._handleEscClick(); + this._setErrorHandler(); + this._removeErrorHandler(); + + this.openElement.forEach((openEl) => openEl?.classList.add('disabled')); + this.input?.blur(); + + this._setScrollbarOrNot(); + this._setModalTemplate(); + this._setNormalizeClass(); + this._removeBackdrop(); + this._setBgColorToCirleWithHourTips(); + this._setOnStartCSSClassesIfClockType24h(); + this._setClassActiveToHourOnOpen(); + + if (this.clockFace !== null) { + const initClockFace = new ClockFace({ + array: getNumberOfHours12, + classToAdd: 'timepicker-ui-hour-time-12', + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + theme: this._options.theme, + disabledTime: this._disabledTime?.value?.isInterval + ? this._disabledTime?.value.rangeArrHour + : this._disabledTime?.value?.hours, + clockType: '12h', + hour: this.hour.value, + }); + + initClockFace.create(); + + if (this._options.clockType === '24h') { + const initClockFace24h = new ClockFace({ + array: getNumberOfHours24, + classToAdd: 'timepicker-ui-hour-time-24', + clockFace: this.tipsWrapperFor24h, + tipsWrapper: this.tipsWrapperFor24h, + theme: this._options.theme, + clockType: '24h', + disabledTime: this._disabledTime?.value?.isInterval + ? this._disabledTime?.value.rangeArrHour + : this._disabledTime?.value?.hours, + hour: this.hour.value, + }); + + initClockFace24h.create(); + } else { + if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { + setTimeout(() => { + if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { + initClockFace.updateDisable({ + hoursToUpdate: this._disabledTime?.value?.rangeArrHour, + minutesToUpdate: { + endMinutes: this._disabledTime?.value.endMinutes, + removedEndHour: this._disabledTime?.value.removedEndHour, + removedStartedHour: this._disabledTime?.value.removedStartedHour, + actualHour: this.hour.value, + startMinutes: this._disabledTime?.value.startMinutes, + }, + }); + } + }, 300); + } else { + setTimeout(() => { + initClockFace.updateDisable({ + minutesToUpdate: { + actualHour: this.hour.value, + pmHours: this._disabledTime?.value.pmHours, + amHours: this._disabledTime?.value.amHours, + activeMode: this.activeTypeMode?.textContent, + }, + }); + }, 300); + } + + initClockFace.updateDisable(); + } + } + + this._setFlexEndToFooterIfNoKeyboardIcon(); + + setTimeout(() => { + this._setTheme(); + }, 0); + + this._setAnimationToOpen(); + this._getInputValueOnOpenAndSet(); + this._toggleClassActiveToValueTips(this.hour.value); + + if (!this._isMobileView) { + this._setTransformToCircleWithSwitchesHour(this.hour.value); + this._handleAnimationClock(); + } + + this._handleMinutesEvents(); + this._handleHourEvents(); + + if (this._options.clockType !== '24h') { + this._handleAmClick(); + this._handlePmClick(); + } + + if (this.clockFace) { + this._handleMoveHand(); + } + + this._handleCancelButton(); + this._handleOkButton(); + + if (this.modalElement) { + this._setShowClassToBackdrop(); + this._handleBackdropClick(); + } + + this._handleIconChangeView(); + this._handleClickOnHourMobile(); + + if (this._options.focusTrap) { + this._focusTrapHandler(); + } + }; + + private _handleOpenOnClick = (): void => { + this.openElement.forEach((openEl) => + this._clickTouchEvents.forEach((el: string) => + openEl?.addEventListener(el, () => this._eventsBundle()), + ), + ); + }; + + private _getInputValueOnOpenAndSet = (): void => { + const value = getInputValue( + this.input as unknown as HTMLInputElement, + this._options.clockType, + this._options.currentTime, + ); + + if (value === undefined) { + this.hour.value = '12'; + this.minutes.value = '00'; + + createNewEvent(this._element, 'show', { + hour: this.hour.value, + minutes: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + + if (this._options.clockType !== '24h') { + this.AM.classList.add(selectorActive); + } + + return; + } + + let [hour, minutes, type] = this.input.value.split(':').join(' ').split(' '); + + if (this.input.value.length === 0) { + hour = value.hour as string; + minutes = value.minutes as string; + type = value.type as string; + } + + this.hour.value = hour; + this.minutes.value = minutes; + + const typeMode = document.querySelector(`[data-type='${type}']`) as HTMLElement; + + if (this._options.clockType !== '24h' && typeMode) { + typeMode.classList.add(selectorActive); + } + + createNewEvent(this._element, 'show', { + ...value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + }; + + private _handleCancelButton = (): void => { + this._clickTouchEvents.forEach((el: string) => { + this.cancelButton.addEventListener(el, () => { + const value = getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType); + + createNewEvent(this._element, 'cancel', { + ...value, + hourNotAccepted: this.hour.value, + minutesNotAccepted: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + + this.close(); + }); + }); + }; + + private _handleOkButton = (): void => { + this._clickTouchEvents.forEach((el: string) => { + this.okButton?.addEventListener(el, () => { + const { clockType, disabledTime } = this._options; + + const validHours = handleValueAndCheck(this.hour.value, 'hour', clockType); + const validMinutes = handleValueAndCheck(this.minutes.value, 'minutes', clockType); + let checkDisable: undefined | boolean; + const validHoursDisabled = checkDisabledHoursAndMinutes( + this.hour.value as string, + 'hour', + clockType, + disabledTime?.hours, + ); + + const validMinutesDisabled = checkDisabledHoursAndMinutes( + this.minutes.value as string, + 'minutes', + clockType, + disabledTime?.minutes, + ); + + if (disabledTime?.interval) { + checkDisable = checkedDisabledValuesInterval( + this.hour.value, + this.minutes.value, + this.activeTypeMode?.textContent, + disabledTime.interval, + ); + } + + if ( + checkDisable === false || + validHours === false || + validMinutes === false || + validHoursDisabled === false || + validMinutesDisabled === false + ) { + if (checkDisable === false || !validMinutes || !validMinutesDisabled) { + this.minutes.classList.add('invalid-value'); + } + + if (checkDisable === false || !validHours || !validHoursDisabled) { + this.hour.classList.add('invalid-value'); + } + + return; + } + + this.input.value = `${this.hour.value}:${this.minutes.value} ${ + this._options.clockType === '24h' ? '' : this.activeTypeMode?.dataset.type + }`.trimEnd(); + + createNewEvent(this._element, 'accept', { + hour: this.hour.value, + minutes: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + + this.close(); + }); + }); + }; + + private _setShowClassToBackdrop = (): void => { + if (this._options.backdrop) { + setTimeout(() => { + this.modalElement.classList.add('show'); + }, 300); + } + }; + + private _handleBackdropClick = (): void => { + this.modalElement?.addEventListener('click', (ev) => { + const target = ev.target as Element as HTMLElement; + + if (!hasClass(target, 'timepicker-ui-modal')) return; + + const value = getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType); + + createNewEvent(this._element, 'cancel', { + ...value, + hourNotAccepted: this.hour.value, + minutesNotAccepted: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + + this.close(); + }); + }; + + private _setBgColorToCirleWithHourTips = (): void => { + if (!this._options) return; + + const { mobile, theme } = this._options; + + if (mobile || this.circle === null) return; + + if (theme === 'crane-straight' || theme === 'crane-radius') { + this.circle.style.backgroundColor = variables.cranered400; + } else { + this.circle.style.backgroundColor = variables.purple; + } + }; + + private _setBgColorToCircleWithMinutesTips = (): void => { + const { theme } = this._options; + + if (this.minutes.value && getNumberOfMinutes.includes(this.minutes.value)) { + if (theme === 'crane-straight' || theme === 'crane-radius') { + this.circle.style.backgroundColor = variables.cranered400; + } else { + this.circle.style.backgroundColor = variables.purple; + } + this.circle.classList.remove('small-circle'); + } + }; + + private _removeBgColorToCirleWithMinutesTips = (): void => { + if (this.minutes.value && getNumberOfMinutes.includes(this.minutes.value)) return; + + this.circle.style.backgroundColor = ''; + this.circle.classList.add('small-circle'); + }; + + private _setTimepickerClassToElement = (): void => { + this._element?.classList.add(name); + }; + + private _setClassActiveToHourOnOpen = (): void => { + if (this._options.mobile || this._isMobileView) return; + + this.hour?.classList.add(selectorActive); + }; + + private _setMinutesToClock = (value: string | null): void => { + if (this.clockFace !== null) this._setTransformToCircleWithSwitchesMinutes(value); + this._removeBgColorToCirleWithMinutesTips(); + + const getDisabledMinutes = this._disabledTime?.value?.minutes + ? this._disabledTime?.value?.minutes + : this._disabledTime?.value; + + const initClockFace = new ClockFace({ + array: getNumberOfMinutes, + classToAdd: 'timepicker-ui-minutes-time', + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + theme: this._options.theme, + disabledTime: getDisabledMinutes, + hour: this.hour.value, + clockType: this._options.clockType, + }); + + initClockFace.create(); + + if (this._options.clockType === '12h') { + initClockFace.updateDisable(); + } + + this._toggleClassActiveToValueTips(value); + + if (this._options.clockType === '24h') { + this.tipsWrapperFor24h.innerHTML = ''; + } + }; + + private _setHoursToClock = (value: string | null): void => { + if (this.clockFace !== null) { + this._setTransformToCircleWithSwitchesHour(value); + this._setBgColorToCirleWithHourTips(); + + const disabledTime = this._disabledTime?.value?.isInterval + ? this._disabledTime?.value.rangeArrHour + : this._disabledTime?.value?.hours; + + const init12h = new ClockFace({ + array: getNumberOfHours12, + classToAdd: 'timepicker-ui-hour-time-12', + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + theme: this._options.theme, + disabledTime, + clockType: '12h', + hour: this.hour.value, + }); + + init12h.create(); + + if (this._options.clockType === '24h') { + new ClockFace({ + array: getNumberOfHours24, + classToAdd: 'timepicker-ui-hour-time-24', + clockFace: this.tipsWrapperFor24h, + tipsWrapper: this.tipsWrapperFor24h, + theme: this._options.theme, + clockType: '24h', + disabledTime, + hour: this.hour.value, + }).create(); + } else { + init12h.updateDisable(); + } + + this._toggleClassActiveToValueTips(value); + } + }; + + private _setTransformToCircleWithSwitchesHour = (val: string | null): void => { + const value = Number(val); + + let degrees = value > 12 ? value * 30 - 360 : value * 30; + + if (degrees === 360) { + degrees = 0; + } + + if (degrees > 360) return; + + this.clockHand.style.transform = `rotateZ(${degrees}deg)`; + }; + + private _setTransformToCircleWithSwitchesMinutes = (val: string | null): void => { + const degrees = Number(val) * 6; + + if (degrees > 360) return; + + this.clockHand.style.transform = `rotateZ(${degrees}deg)`; + }; + + private _getDestructuringObj(isAmPm?: boolean) { + const { + endMinutes, + removedEndHour, + removedStartedHour, + startMinutes, + pmHours, + amHours, + removedAmHour, + removedPmHour, + } = this._disabledTime.value; + + if (isAmPm) { + return { + minutesToUpdate: { + actualHour: this.hour.value, + pmHours, + amHours, + activeMode: this.activeTypeMode?.textContent, + startMinutes, + endMinutes, + removedAmHour, + removedPmHour, + }, + }; + } + + return { + minutesToUpdate: { + endMinutes, + removedEndHour, + removedStartedHour, + actualHour: this.hour.value, + startMinutes, + }, + }; + } + + private _handleAmClick = (): void => { + this._clickTouchEvents.forEach((e: string) => { + this.AM.addEventListener(e, (ev) => { + const target = ev.target as Element; + + target.classList.add(selectorActive); + this.PM.classList.remove(selectorActive); + + if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { + const initClockFace = new ClockFace({ + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, + }); + + if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { + setTimeout(() => { + if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { + initClockFace.updateDisable({ + hoursToUpdate: this._disabledTime?.value?.rangeArrHour, + ...this._getDestructuringObj(), + }); + } else { + initClockFace.clean(); + } + }, 300); + } else { + setTimeout(() => { + initClockFace.updateDisable({ + ...this._getDestructuringObj(true), + }); + }, 300); + } + + initClockFace.updateDisable(); + } + + createNewEvent(this._element, 'selectamtypemode', { + hour: this.hour.value, + minutes: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + }); + }); + }; + + private _handlePmClick = (): void => { + this._clickTouchEvents.forEach((el: string) => { + this.PM.addEventListener(el, (ev) => { + const target = ev.target as Element; + + target.classList.add(selectorActive); + this.AM.classList.remove(selectorActive); + + if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { + const initClockFace = new ClockFace({ + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, + }); + + if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { + setTimeout(() => { + if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { + initClockFace.updateDisable({ + hoursToUpdate: this._disabledTime?.value?.rangeArrHour, + ...this._getDestructuringObj(), + }); + } else { + initClockFace.clean(); + } + }, 300); + } else { + setTimeout(() => { + initClockFace.updateDisable({ + ...this._getDestructuringObj(true), + }); + }, 300); + } + } + + createNewEvent(this._element, 'selectpmtypemode', { + hour: this.hour.value, + minutes: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + }); + }); + }; + + private _handleAnimationClock = (): void => { + if (this._options.animation) { + setTimeout(() => { + this.clockFace?.classList.add('timepicker-ui-clock-animation'); + + setTimeout(() => { + this.clockFace?.classList.remove('timepicker-ui-clock-animation'); + }, 600); + }, 150); + } + }; + + private _handleAnimationSwitchTipsMode = (): void => { + this.clockHand.classList.add('timepicker-ui-tips-animation'); + setTimeout(() => { + this.clockHand?.classList.remove('timepicker-ui-tips-animation'); + }, 401); + }; + + private _handleClasses24h = (ev: any, element?: HTMLInputElement) => { + const target = ev.target as HTMLInputElement; + + if (this.hourTips) { + if (this._options.clockType === '24h') { + if (Number(target.textContent) > 12 || Number(target.textContent) === 0) { + this._setCircleClockClasses24h(); + } else { + this._removeCircleClockClasses24h(); + } + + if (!this._options.mobile) { + this.tipsWrapperFor24h?.classList.remove('timepicker-ui-tips-wrapper-24h-disabled'); + } + } + } + + if (!target || !element) return; + + element.value = (target.value as string).replace(/\D+/g, ''); + element.click(); + }; + + private _handleHourEvents = (): void => { + this._inputEvents.forEach((el) => { + this.hour?.addEventListener(el, (ev) => { + const target = ev.target as HTMLInputElement; + + if (this.clockFace !== null) this._handleAnimationSwitchTipsMode(); + + if (this._options.clockType === '24h') { + if (Number(target.value) > 12 || Number(target.value) === 0) { + this._setCircleClockClasses24h(); + } else { + this._removeCircleClockClasses24h(); + } + + if (!this._options.mobile) { + this.tipsWrapperFor24h?.classList.remove('timepicker-ui-tips-wrapper-24h-disabled'); + } + } + + this._setHoursToClock(target.value); + target.classList.add(selectorActive); + this.minutes.classList.remove(selectorActive); + + if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { + const initClockFace = new ClockFace({ + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, + }); + + if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { + setTimeout(() => { + if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { + initClockFace.updateDisable({ + hoursToUpdate: this._disabledTime?.value?.rangeArrHour, + ...this._getDestructuringObj(), + }); + } else { + initClockFace.clean(); + } + }, 300); + } else { + setTimeout(() => { + initClockFace.updateDisable({ + ...this._getDestructuringObj(true), + }); + }, 300); + } + } + + createNewEvent(this._element, 'selecthourmode', { + hour: this.hour.value, + minutes: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + + if (this.clockFace !== null) this.circle.classList.remove('small-circle'); + }); + }); + + this.hour?.addEventListener('blur', (e) => this._handleClasses24h(e, this.hour)); + this.hour?.addEventListener('focus', (e) => this._handleClasses24h(e, this.hour)); + }; + + private _handleMinutesEvents = (): void => { + this._inputEvents.forEach((el) => { + this.minutes.addEventListener(el, (ev) => { + const target = ev.target as HTMLInputElement; + + if (this.clockFace !== null) { + this._handleAnimationSwitchTipsMode(); + this._setMinutesToClock(target.value); + } + + if (this._options.clockType === '24h') { + this._removeCircleClockClasses24h(); + + if (!this._options.mobile) { + this.tipsWrapperFor24h?.classList.add('timepicker-ui-tips-wrapper-24h-disabled'); + } + } + + target.classList.add(selectorActive); + this.hour?.classList.remove(selectorActive); + + if (this._options.clockType === '12h' && this._options.disabledTime?.interval) { + const initClockFace = new ClockFace({ + clockFace: this.clockFace, + tipsWrapper: this.tipsWrapper, + array: hasClass(this.hour, selectorActive) ? getNumberOfHours12 : getNumberOfMinutes, + }); + + if (this._disabledTime?.value.startType === this._disabledTime?.value.endType) { + setTimeout(() => { + if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { + initClockFace.updateDisable({ + hoursToUpdate: this._disabledTime?.value.rangeArrHour, + ...this._getDestructuringObj(), + }); + } else { + initClockFace.clean(); + } + }, 300); + } else { + setTimeout(() => { + initClockFace.updateDisable({ + ...this._getDestructuringObj(true), + }); + }, 300); + } + } + + createNewEvent(this._element, 'selectminutemode', { + hour: this.hour.value, + minutes: this.minutes.value, + type: this.activeTypeMode?.dataset.type, + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + }); + }); + }); + + this.minutes?.addEventListener('blur', (e) => this._handleClasses24h(e, this.minutes)); + this.minutes?.addEventListener('focus', (e) => this._handleClasses24h(e, this.minutes)); + }; + + private _handleEventToMoveHand = (event: TouchEvent): void => { + const { target: t, type, touches } = event; + const target = t as Element; + + const { incrementMinutes, incrementHours, switchToMinutesAfterSelectHour } = this._options; + + if (!getClickTouchPosition(event, this.clockFace)) return; + + const obj = getClickTouchPosition(event, this.clockFace); + + const clockFaceRadius = this.clockFace.offsetWidth / 2; + + const rtangens = obj && Math.atan2(obj.y - clockFaceRadius, obj.x - clockFaceRadius); + + if (type === 'mouseup' || type === 'touchend') { + this._isTouchMouseMove = false; + + if ( + switchToMinutesAfterSelectHour && + (hasClass(target, 'timepicker-ui-value-tips') || + hasClass(target, 'timepicker-ui-value-tips-24h') || + hasClass(target, 'timepicker-ui-tips-wrapper')) + ) { + this.minutes.click(); + } + + return; + } + + if (type === 'mousedown' || type === 'mousemove' || type === 'touchmove' || type === 'touchstart') { + if (type === 'mousedown' || type === 'touchstart' || type === 'touchmove') { + if ( + (hasClass(target, 'timepicker-ui-clock-face') || + hasClass(target, 'timepicker-ui-circle-hand') || + hasClass(target, 'timepicker-ui-hour-time-12') || + hasClass(target, 'timepicker-ui-minutes-time') || + hasClass(target, 'timepicker-ui-clock-hand') || + hasClass(target, 'timepicker-ui-value-tips') || + hasClass(target, 'timepicker-ui-value-tips-24h') || + hasClass(target, 'timepicker-ui-tips-wrapper') || + hasClass(target, 'timepicker-ui-tips-wrapper-24h')) && + !hasClass(target, 'timepicker-ui-tips-disabled') + ) { + event.preventDefault(); + this._isTouchMouseMove = true; + } else { + this._isTouchMouseMove = false; + } + } + } + + if (!this._isTouchMouseMove) return; + + if (this.minutesTips !== null) { + this.minutes.classList.add(selectorActive); + let deg = + rtangens && getIncrementTimes(Math.trunc((rtangens * 180) / Math.PI) + 90, incrementMinutes, 6); + + if (deg === undefined) return; + + let minute: number; + + if (deg < 0) { + minute = Math.round(360 + deg / 6) % 60; + deg = 360 + Math.round(deg / 6) * 6; + } else { + minute = Math.round(deg / 6) % 60; + deg = Math.round(deg / 6) * 6; + } + + if (!this._disabledTime?.value.isInterval) { + if (this._disabledTime?.value?.minutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`)) { + return; + } + } else { + // eslint-disable-next-line no-lonely-if + if (this._disabledTime?.value.endType === this._disabledTime?.value.startType) { + if ( + this._disabledTime?.value?.endMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && + this.hour.value === this._disabledTime?.value?.removedEndHour && + this._disabledTime?.value.endType === this.activeTypeMode?.textContent + ) { + return; + } + + if ( + this._disabledTime?.value?.startMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && + this.hour.value === this._disabledTime?.value?.removedStartedHour && + this._disabledTime?.value.startType === this.activeTypeMode?.textContent + ) { + return; + } + } else { + if (this.activeTypeMode?.textContent === this._disabledTime?.value.endType) { + if ( + (this._disabledTime?.value?.endMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && + this._disabledTime?.value.removedPmHour === this.hour.value) || + this._disabledTime?.value.pmHours.map(Number).includes(Number(this.hour.value)) + ) { + return; + } + } + if (this.activeTypeMode?.textContent === this._disabledTime?.value.startType) { + if ( + (this._disabledTime?.value?.startMinutes?.includes(minute <= 9 ? `0${minute}` : `${minute}`) && + this._disabledTime?.value.removedAmHour === this.hour.value) || + this._disabledTime?.value.amHours.map(Number).includes(Number(this.hour.value)) + ) { + return; + } + } + } + } + + this.minutes.value = minute >= 10 ? `${minute}` : `0${minute}`; + this.clockHand.style.transform = `rotateZ(${deg}deg)`; + + this._degreesMinutes = deg; + + this._toggleClassActiveToValueTips(this.minutes.value); + this._removeBgColorToCirleWithMinutesTips(); + this._setBgColorToCircleWithMinutesTips(); + + createNewEvent(this._element, 'update', { + ...getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType), + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + eventType: type, + type: this.activeTypeMode?.dataset.type, + }); + } + + const myLocation = touches ? touches[0] : undefined; + const realTarget = + touches && myLocation + ? (document.elementFromPoint(myLocation.clientX, myLocation.clientY) as HTMLDivElement) + : null; + + if (this.hourTips !== null) { + this.hour?.classList.add(selectorActive); + if ( + !hasClass(realTarget || target, 'timepicker-ui-value-tips-24h') && + !hasClass(realTarget || target, 'timepicker-ui-tips-disabled') && + (hasClass(realTarget || target, 'timepicker-ui-value-tips') || + hasClass(realTarget || target, 'timepicker-ui-tips-wrapper')) + ) { + let deg = + rtangens && getIncrementTimes(Math.trunc((rtangens * 180) / Math.PI) + 90, incrementHours, 30); + + this._degreesHours = deg as number; + + if (deg === undefined) return; + + let hour: number; + + if (deg < 0) { + hour = Math.round(360 + deg / 30) % 12; + deg = 360 + deg; + } else { + hour = Math.round(deg / 30) % 12; + if (hour === 0 || hour > 12) hour = 12; + } + + const isInterval = this._disabledTime?.value.isInterval ? 'rangeArrHour' : 'hours'; + + if (this._disabledTime?.value.endType === this._disabledTime?.value?.startType) { + if (typeof this._disabledTime?.value?.endType === 'string') { + if ( + this._disabledTime?.value?.endType === this.activeTypeMode?.textContent && + this._disabledTime?.value?.startType === this.activeTypeMode?.textContent + ) { + if (this._disabledTime?.value[isInterval]?.includes(hour.toString())) { + return; + } + } + } else if (this._disabledTime?.value[isInterval]?.includes(hour.toString())) { + return; + } + } else { + if (this._disabledTime?.value.startType === this.activeTypeMode?.textContent) { + if (this._disabledTime?.value.amHours.includes(hour.toString())) { + return; + } + } + + if (this._disabledTime?.value.endType === this.activeTypeMode?.textContent) { + if (this._disabledTime?.value.pmHours.includes(hour.toString())) { + return; + } + } + } + + this.clockHand.style.transform = `rotateZ(${deg}deg)`; + this.hour.value = hour > 9 ? `${hour}` : `0${hour}`; + + this._removeCircleClockClasses24h(); + this._toggleClassActiveToValueTips(hour); + } + + if ( + (hasClass(realTarget || target, 'timepicker-ui-value-tips-24h') || + hasClass(realTarget || target, 'timepicker-ui-tips-wrapper-24h')) && + !hasClass(realTarget || target, 'timepicker-ui-tips-disabled') + ) { + let deg = + rtangens && getIncrementTimes(Math.trunc((rtangens * 180) / Math.PI) + 90, incrementHours, 30); + + this._degreesHours = deg as number; + + let hour: number | string; + + if (deg === undefined) return; + + if (deg < 0) { + hour = Math.round(360 + deg / 30) % 24; + deg = 360 + deg; + } else { + hour = Math.round(deg / 30) + 12; + + if (hour === 12) { + hour = '00'; + } + } + + const isInterval = this._disabledTime?.value.isInterval ? 'rangeArrHour' : 'hours'; + + if (this._disabledTime?.value[isInterval]?.includes(hour.toString())) { + return; + } + + this._setCircleClockClasses24h(); + + this.clockHand.style.transform = `rotateZ(${deg}deg)`; + this.hour.value = `${hour}`; + + this._toggleClassActiveToValueTips(hour); + } + + createNewEvent(this._element, 'update', { + ...getInputValue(this.input as unknown as HTMLInputElement, this._options.clockType), + degreesHours: this._degreesHours, + degreesMinutes: this._degreesMinutes, + eventType: type, + type: this.activeTypeMode?.dataset.type, + }); + } + }; + + private _toggleClassActiveToValueTips = (value: string | number | null): void => { + const element = this.allValueTips.find((tip: HTMLElement) => Number(tip.innerText) === Number(value)); + + this.allValueTips.map((el) => el.classList.remove(selectorActive)); + + if (element === undefined) return; + + element.classList.add(selectorActive); + }; + + private _handleMoveHand = (): void => { + if (this._options.mobile || this._isMobileView) return; + + allEvents.split(' ').forEach((event) => { + if (event === 'touchstart' || event === 'touchmove' || event === 'touchend') { + document.addEventListener(event, this._mutliEventsMoveHandler, { + passive: false, + }); + } else { + document.addEventListener(event, this._mutliEventsMoveHandler, false); + } + }); + }; + + private _setModalTemplate = (): void => { + if (!this._options) return; + + const { appendModalSelector } = this._options; + + if (appendModalSelector === '' || !appendModalSelector) { + document.body.insertAdjacentHTML('afterend', this.modalTemplate); + } else { + const element = document?.querySelector(appendModalSelector); + element?.insertAdjacentHTML('beforeend', this.modalTemplate); + } + }; + + private _setScrollbarOrNot = (): void => { + if (!this._options.enableScrollbar) { + document.body.style.paddingRight = `${getScrollbarWidth()}px`; + document.body.style.overflowY = 'hidden'; + } else { + setTimeout(() => { + document.body.style.overflowY = ''; + document.body.style.paddingRight = ''; + }, 400); + } + }; + + private _setAnimationToOpen = (): void => { + this.modalElement?.classList.add('opacity'); + + if (this._options.animation) { + setTimeout(() => { + this.modalElement?.classList.add('show'); + }, 150); + } else { + this.modalElement?.classList.add('show'); + } + }; + + private _removeAnimationToClose = (): void => { + if (this.modalElement) { + if (this._options.animation) { + setTimeout(() => { + this.modalElement?.classList.remove('show'); + }, 150); + } else { + this.modalElement?.classList.remove('show'); + } + } + }; + + private _handlerViewChange = debounce(() => { + const { clockType } = this._options; + + if (!hasClass(this.modalElement, 'mobile')) { + this.close(); + + this._isMobileView = true; + this._options.mobile = true; + + const beforeHourContent = this.hour.value; + const beforeMinutesContent = this.minutes.value; + const beforeTypeModeContent = this.activeTypeMode?.dataset.type; + + setTimeout(() => { + this.destroy(); + this.update({ + options: { mobile: true }, + }); + setTimeout(() => { + this.open(); + + this.hour.value = beforeHourContent; + this.minutes.value = beforeMinutesContent; + + if (this._options.clockType === '12h') { + const toAddType = beforeTypeModeContent === 'PM' ? 'PM' : 'AM'; + const toRemoveType = beforeTypeModeContent === 'PM' ? 'AM' : 'PM'; + + // @ts-ignore + this[toAddType].classList.add(selectorActive); + // @ts-ignore + this[toRemoveType].classList.remove(selectorActive); + } + }, 300); + }, 300); + } else { + const validHours = handleValueAndCheck(this.hour.value, 'hour', clockType); + const validMinutes = handleValueAndCheck(this.minutes.value, 'minutes', clockType); + + if (validHours === false || validMinutes === false) { + if (!validMinutes) { + this.minutes.classList.add('invalid-value'); + } + + if (!validHours) { + this.hour?.classList.add('invalid-value'); + } + + return; + } + + if (validHours === true && validMinutes === true) { + if (validMinutes) { + this.minutes.classList.remove('invalid-value'); + } + + if (validHours) { + this.hour?.classList.remove('invalid-value'); + } + } + + this.close(); + + this._isMobileView = false; + this._options.mobile = false; + + const beforeHourContent = this.hour.value; + const beforeMinutesContent = this.minutes.value; + const beforeTypeModeContent = this.activeTypeMode?.dataset.type; + + setTimeout(() => { + this.destroy(); + this.update({ + options: { mobile: false }, + }); + setTimeout(() => { + this.open(); + + this.hour.value = beforeHourContent; + this.minutes.value = beforeMinutesContent; + + if (this._options.clockType === '12h') { + const toAddType = beforeTypeModeContent === 'PM' ? 'PM' : 'AM'; + const toRemoveType = beforeTypeModeContent === 'PM' ? 'AM' : 'PM'; + + // @ts-ignore + this[toAddType].classList.add(selectorActive); + // @ts-ignore + this[toRemoveType].classList.remove(selectorActive); + } + + this._setTransformToCircleWithSwitchesHour(this.hour.value); + this._toggleClassActiveToValueTips(this.hour.value); + + if (Number(this.hour.value) > 12 || Number(this.hour.value) === 0) { + this._setCircleClockClasses24h(); + } else { + this._removeCircleClockClasses24h(); + } + }, 300); + }, 300); + } + }, 400); + + private _handleIconChangeView = async (): Promise => { + if (this._options.enableSwitchIcon) { + if (getBrowser()) { + this.keyboardClockIcon.addEventListener('touchstart', this._handlerViewChange); + } else { + this.keyboardClockIcon.addEventListener('click', this._handlerViewChange); + } + } + }; + + private _handlerClickHourMinutes = async (event: Event): Promise => { + if (!this.modalElement) return; + const { clockType, editable } = this._options; + + const target = event.target as HTMLDivElement; + const validHours = handleValueAndCheck(this.hour.value, 'hour', clockType); + const validMinutes = handleValueAndCheck(this.minutes.value, 'minutes', clockType); + + if (!editable) return; + + if (!hasClass(target, 'timepicker-ui-hour') && !hasClass(target, 'timepicker-ui-minutes')) { + if (validHours === true && validMinutes === true) { + if (validMinutes) this.minutes.classList.remove('invalid-value'); + if (validHours) this.hour?.classList.remove('invalid-value'); + } + } else if (validHours === false || validMinutes === false) { + if (!validMinutes) this.minutes.classList.add('invalid-value'); + if (!validHours) this.hour?.classList.add('invalid-value'); + } + }; + + private _handleClickOnHourMobile = (): void => { + document.addEventListener('mousedown', this._eventsClickMobileHandler); + document.addEventListener('touchstart', this._eventsClickMobileHandler); + }; + + private _handleKeyPress = (e: KeyboardEvent) => { + if (e.key === 'Escape' && this.modalElement) { + this.close(); + } + }; + + private _handleEscClick = (): void => { + document.addEventListener('keydown', this._handleKeyPress); + }; + + private _focusTrapHandler = (): void => { + setTimeout(() => { + const focusableEls = this.wrapper?.querySelectorAll('div[tabindex="0"]:not([disabled])'); + const focusableInputs = this.wrapper?.querySelectorAll('input[tabindex="0"]:not([disabled])'); + + if (!focusableEls || focusableEls.length <= 0 || focusableInputs.length <= 0) return; + + const allFcousablElements = [...focusableInputs, ...focusableEls]; + const firstFocusableEl = allFcousablElements[0] as HTMLDivElement; + const lastFocusableEl = allFcousablElements[allFcousablElements.length - 1] as HTMLDivElement; + + this.wrapper.focus(); + + this.wrapper.addEventListener('keydown', ({ key, shiftKey, target: t }) => { + const target = t as HTMLDivElement; + + if (key === 'Tab') { + if (shiftKey) { + if (document.activeElement === firstFocusableEl) { + lastFocusableEl.focus(); + } + } else if (document.activeElement === lastFocusableEl) { + firstFocusableEl.focus(); + } + } + + if (key === 'Enter') { + if (hasClass(target, 'timepicker-ui-minutes')) { + this.minutes.click(); + } + + if (hasClass(target, 'timepicker-ui-hour')) { + this.hour.click(); + } + + if (hasClass(target, 'timepicker-ui-cancel-btn')) { + this.cancelButton.click(); + } + + if (hasClass(target, 'timepicker-ui-ok-btn')) { + this.okButton.click(); + } + + if (hasClass(target, 'timepicker-ui-keyboard-icon-wrapper')) { + this.keyboardClockIcon.click(); + } + + if (hasClass(target, 'timepicker-ui-am')) { + this.AM.click(); + } + + if (hasClass(target, 'timepicker-ui-pm')) { + this.PM.click(); + } + + if ( + hasClass(target, 'timepicker-ui-value-tips') || + hasClass(target, 'timepicker-ui-value-tips-24h') + ) { + const { left, top, x, y, width, height } = target.getBoundingClientRect(); + const tabIndexElement = document.elementFromPoint(x, y); + + // eslint-disable-next-line no-inner-declarations + const simulateMousedownEvent = () => { + const ev = new MouseEvent('mousedown', { + clientX: left + width / 2, + clientY: top + height / 2, + cancelable: true, + bubbles: true, + }); + + if (hasClass(tabIndexElement, 'timepicker-ui-value-tips-24h')) { + tabIndexElement?.dispatchEvent(ev); + } else { + tabIndexElement?.childNodes[0]?.dispatchEvent(ev); + } + + this._isTouchMouseMove = false; + }; + + simulateMousedownEvent(); + } + } + + setTimeout(() => { + this.wrapper.addEventListener('mousedown', () => (document.activeElement as HTMLDivElement).blur()); + }, 100); + }); + }, 301); + }; + + private _handleOpenOnEnterFocus = (): void => { + this.input.addEventListener('keydown', ({ target, key }) => { + if ((target as HTMLInputElement).disabled) return; + + if (key === 'Enter') { + this.open(); + } + }); + }; +} diff --git a/app/src/timepicker/styles/main.scss b/app/src/timepicker/styles/main.scss index 8c63ab5..2003af6 100644 --- a/app/src/timepicker/styles/main.scss +++ b/app/src/timepicker/styles/main.scss @@ -1,663 +1,663 @@ -@import './variables.scss'; - -.timepicker-ui { - * { - box-sizing: border-box !important; - } - - &-modal { - font-family: 'Roboto', sans-serif; - position: fixed; - opacity: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(156, 155, 155, 0.6); - z-index: 5000; - pointer-events: none; - - &.show { - pointer-events: auto; - } - - &.removed { - top: auto; - bottom: auto; - left: auto; - right: auto; - background-color: transparent; - } - } - - &-measure { - position: absolute; - top: -9999px; - width: $mesaruelength; - height: $mesaruelength; - overflow: scroll; - } - - &-wrapper, - &-wrapper.mobile { - position: fixed; - z-index: 5001; - width: 328px; - height: 500px; - top: $tm50percent; - left: $tm50percent; - transform: $tmtranslatetransform; - background-color: #fff; - border-radius: 4px; - box-shadow: $tmwrapperboxshadow; - display: flex; - flex-direction: column; - outline: none; - } - - &-wrapper:not(.timepicker-ui-wrapper + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - flex-direction: row; - height: 360px; - width: 584px; - } - - @media screen and (max-width: 330px) and(orientation:portrait) { - width: 315px; - } - } - - &-wrapper.mobile { - height: 218px; - - @media screen and (max-width: 330px) { - width: 315px; - } - } - - &-header, - &-header.mobile { - padding-top: 52px; - padding-bottom: 36px; - padding-right: 24px; - padding-left: 24px; - height: 104px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - position: relative; - height: 100%; - } - - &-header.mobile { - padding-bottom: 0; - padding-top: 35px; - } - - &-header:not(.timepicker-ui-header + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - height: auto; - flex-direction: column; - } - } - - &-select-time, - &-select-time.mobile { - text-transform: uppercase; - position: absolute; - top: calc(28px - 12px); - left: 24px; - font-size: 12px; - color: #a9a9a9; - } - - &-body { - height: 256px; - width: 256px; - margin: 0 auto; - position: relative; - border-radius: 100%; - - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - padding-right: 0; - padding-left: 0; - display: flex; - align-items: center; - justify-content: center; - margin-top: 23px; - } - } - - &-wrapper-landspace { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - display: flex; - flex-direction: column; - width: 100%; - } - } - - &-footer, - &-footer-mobile { - height: 76px; - display: flex; - justify-content: space-between; - margin-bottom: 4px; - } - - &-footer:not(.timepicker-ui-footer + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - justify-content: flex-end; - } - } - - &-footer.mobile { - align-items: flex-start; - } - - &-clock-face { - background-color: #e0e0e0; - height: 100%; - width: 100%; - border-radius: 100%; - position: relative; - - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - height: 256px; - width: 256px; - top: 15px; - } - } - - &-dot { - position: absolute; - top: $tm50percent; - left: $tm50percent; - user-select: none; - touch-action: none; - transform: $tmtranslatetransform; - background-color: $purple; - height: 8px; - width: 8px; - border-radius: 100%; - } - &-tips-wrapper { - height: 100%; - width: 100%; - } - &-tips-wrapper-24h { - position: absolute; - height: 160px; - width: 160px; - z-index: 0; - transform: translate(-50%, -50%); - left: 50%; - top: 50%; - border-radius: 50%; - - &-disabled { - pointer-events: none; - touch-action: none; - user-select: none; - } - } - - &-hour-time-12, - &-minutes-time, - &-hour-time-24 { - position: absolute; - width: 32px; - height: 32px; - text-align: center; - cursor: pointer; - font-size: 17.6px; - display: flex; - justify-content: center; - align-items: center; - touch-action: none; - user-select: none; - - span { - touch-action: none; - user-select: none; - } - } - - &-hour-time-12 { - display: block; - display: flex; - justify-content: center; - align-items: center; - } - - &-wrapper-time, - &-wrapper-time.mobile { - display: flex; - margin-right: 10px; - height: 100%; - justify-content: center; - align-items: center; - } - &-wrapper-time:not(.timepicker-ui-wrapper-time + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - margin-right: 0; - height: auto; - } - } - - &-wrapper-time-24h { - margin-right: 0px; - } - - &-wrapper-time.mobile { - position: relative; - } - - &-hour, - &-minutes, - &-hour.mobile, - &-minutes.mobile { - display: flex; - justify-content: center; - align-items: center; - font-size: 51.2px; - background-color: #e4e4e4; - border-radius: 7px; - cursor: pointer; - transition: all 0.3s ease; - outline: none; - border: 2px solid transparent; - padding: 10px; - width: 96px; - text-align: center; - - &:focus-visible { - outline: auto; - } - - &:hover, - &.active { - color: $purple; - background-color: #ece0fd; - } - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none !important; - margin: 0 !important; - } - &[type='number'] { - -moz-appearance: textfield !important; - } - } - - &-hour, - &-minutes { - outline: none; - border: 2px solid transparent; - &[contenteditable='true']:focus, - &[contenteditable='true']:active { - border: 2px solid $purple; - outline-color: $purple; - user-select: all; - } - } - - &-hour.mobile, - &-minutes.mobile { - height: 70px; - outline: none; - border: 2px solid transparent; - &[contenteditable='true']:focus, - &[contenteditable='true']:active { - border: 2px solid $purple; - outline-color: $purple; - user-select: all; - } - } - - &-dots, - &-dots.mobile { - padding-left: 5px; - padding-right: 5px; - display: flex; - justify-content: center; - align-items: center; - font-size: 57.6px; - user-select: none; - touch-action: none; - } - - &-wrapper-type-time, - &-wrapper-type-time.mobile { - display: flex; - flex-direction: column; - height: 80px; - justify-content: center; - align-items: center; - font-size: 16px; - font-weight: 500; - color: #787878; - } - - &-wrapper-type-time { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - flex-direction: row; - width: 100%; - } - } - - &-wrapper-type-time.mobile { - height: 70px; - } - - &-am, - &-pm, - &-am.mobile, - &-pm.mobile { - display: flex; - justify-content: center; - align-items: center; - border: 2px solid #d6d6d6; - transition: all 0.3s ease; - cursor: pointer; - width: 100%; - height: 100%; - - &:hover, - &.active { - color: $purple; - background-color: #ece0fd; - } - - &.active { - pointer-events: none; - } - } - - &-am:not(.timepicker-ui-am + .mobile), - &-pm:not(.timepicker-ui-pm + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - width: 50%; - height: 44px; - } - } - - &-am, - &-am.mobile { - border-top-left-radius: 7px; - border-top-right-radius: 7px; - border-bottom-width: calc(0.7504px / 2); - } - - &-am.mobile { - border-bottom-left-radius: 0; - } - - &-am:not(.timepicker-ui-am + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; - border-top-right-radius: 0; - border-top-width: 1.5008px; - border-right-width: calc(0.7504px / 2); - } - } - - &-pm, - &-pm.mobile { - border-bottom-left-radius: 7px; - border-bottom-right-radius: 7px; - border-top-width: calc(0.7504px / 2); - width: 54px; - } - - &-pm.mobile { - border-top-right-radius: 0; - } - - &-pm:not(.timepicker-ui-pm + .mobile) { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - border-bottom-right-radius: 7px; - border-top-right-radius: 7px; - border-bottom-left-radius: 0; - border-bottom-width: 1.5008px; - border-left-width: calc(0.7504px / 2); - width: 50%; - height: 44px; - } - } - - &-cancel-btn, - &-ok-btn, - &-cancel-btn.mobile, - &-ok.btn-mobile { - color: $purple; - text-transform: uppercase; - border-radius: 7px; - background-color: transparent; - text-align: center; - font-size: 15.2px; - padding-top: 9px; - padding-bottom: 9px; - font-weight: 500; - transition: all 0.3s ease; - cursor: pointer; - - &:hover { - background-color: #d6d6d6; - } - } - - &-cancel-btn, - &-cancel-btn.mobile { - width: 72px; - margin-right: 4px; - } - - &-ok-btn, - &-ok-btn.mobile { - width: 64px; - margin-left: 4px; - } - - &-wrapper-btn, - &-keyboard-icon, - &-wrapper-btn-mobile, - &-keyboard-icon-mobile { - display: flex; - justify-content: center; - align-items: center; - } - - &-keyboard-icon-wrapper, - &-keyboard-icon-wrapper.mobile { - width: 44px; - height: 44px; - position: relative; - bottom: -26px; - left: 12px; - transition: all 0.3s ease; - - &:hover .timepicker-ui-keyboard-icon, - &:hover .timepicker-ui-keyboard-icon.mobile { - background-color: #d6d6d6; - border-radius: 7px; - } - } - - &-keyboard-icon-wrapper.mobile { - bottom: -5px; - } - - &-keyboard-icon, - &-keyboard-icon.mobile { - padding: 12px; - cursor: pointer; - transition: all 0.3s ease; - color: #4e545a; - height: 44px; - width: 44px; - - &:hover { - color: $purple; - } - } - - &-keyboard-icon-wrapper, - &-keyboard-icon-wrapper.mobile { - @media screen and (min-width: 320px) and (max-width: 825px) and(orientation:landscape) { - position: absolute; - bottom: 8px; - } - } - - &-wrapper-btn, - &-wrapper-btn.mobile { - margin-right: 8px; - position: relative; - bottom: -14px; - } - - &-hour-text, - &-minute-text, - &-hour-text.mobile, - &-minute-text.mobile { - position: absolute; - bottom: 6px; - font-size: 12.8px; - color: #a9a9a9; - left: 0; - } - - &-minute-text, - &-minute-text.mobile { - left: 120px; - } - - &-clock-hand { - position: absolute; - background-color: $purple; - bottom: $tm50percent; - height: 40%; - left: calc(50% - 1px); - transform-origin: center bottom 0; - width: 2px; - } - - &-clock-hand-24h { - height: 23%; - } - - &-circle-hand { - position: absolute; - transform: translate(-48%, -50%); - width: 4px; - height: 4px; - border-radius: 100%; - transition: all 0.2s ease; - height: 46px; - width: 46px; - box-sizing: border-box !important; - background-color: $purple; - - &.small-circle { - height: 36px; - width: 36px; - box-sizing: border-box !important; - } - } - - &-circle-hand-24h { - transform: translate(-50%, -50%); - height: 32px; - width: 32px; - top: 4px; - left: 1px; - } - - &-value-tips, - &-value-tips-24h { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - transition: 0.3s ease color; - border-radius: 50%; - outline: none; - - &:focus { - background: rgba(143, 143, 143, 0.315); - box-shadow: $tmwrapperboxshadow; - } - - &.active { - color: #fff; - transition: none; - } - } - - &-clock-animation { - animation: clockanimation 350ms linear; - } - - &-open-element { - &.disabled { - pointer-events: none; - touch-action: none; - user-select: none; - } - } - - &-tips-animation { - transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, - height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } - - &-tips-disabled { - color: rgba(156, 155, 155, 0.6); - pointer-events: none; - } -} - -.opacity { - transition: $tmopacity; - - &.show { - opacity: 1; - } -} - -.invalid-value { - border-color: $redtovalid !important; - color: $redtovalid !important; - - &:hover, - &:focus, - &:active { - border-color: $redtovalid !important; - color: $redtovalid !important; - } -} - -@keyframes clockanimation { - 0% { - opacity: 0; - transform: scale(0.8); - } - - to { - opacity: 1; - transform: scale(1); - } -} - -.timepicker-ui-invalid-format { - border: 2px solid red; - color: red; -} - -.timepicker-ui-invalid-text { - color: red; -} +@import './variables.scss'; + +.timepicker-ui { + * { + box-sizing: border-box !important; + } + + &-modal { + font-family: 'Roboto', sans-serif; + position: fixed; + opacity: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(156, 155, 155, 0.6); + z-index: 5000; + pointer-events: none; + + &.show { + pointer-events: auto; + } + + &.removed { + top: auto; + bottom: auto; + left: auto; + right: auto; + background-color: transparent; + } + } + + &-measure { + position: absolute; + top: -9999px; + width: $mesaruelength; + height: $mesaruelength; + overflow: scroll; + } + + &-wrapper, + &-wrapper.mobile { + position: fixed; + z-index: 5001; + width: 328px; + height: 500px; + top: $tm50percent; + left: $tm50percent; + transform: $tmtranslatetransform; + background-color: #fff; + border-radius: 4px; + box-shadow: $tmwrapperboxshadow; + display: flex; + flex-direction: column; + outline: none; + } + + &-wrapper:not(.timepicker-ui-wrapper + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + flex-direction: row; + height: 360px; + width: 584px; + } + + @media screen and (max-width: 330px) and (orientation: portrait) { + width: 315px; + } + } + + &-wrapper.mobile { + height: 218px; + + @media screen and (max-width: 330px) { + width: 315px; + } + } + + &-header, + &-header.mobile { + padding-top: 52px; + padding-bottom: 36px; + padding-right: 24px; + padding-left: 24px; + height: 104px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + position: relative; + height: 100%; + } + + &-header.mobile { + padding-bottom: 0; + padding-top: 35px; + } + + &-header:not(.timepicker-ui-header + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + height: auto; + flex-direction: column; + } + } + + &-select-time, + &-select-time.mobile { + text-transform: uppercase; + position: absolute; + top: calc(28px - 12px); + left: 24px; + font-size: 12px; + color: #a9a9a9; + } + + &-body { + height: 256px; + width: 256px; + margin: 0 auto; + position: relative; + border-radius: 100%; + + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + padding-right: 0; + padding-left: 0; + display: flex; + align-items: center; + justify-content: center; + margin-top: 23px; + } + } + + &-wrapper-landspace { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + display: flex; + flex-direction: column; + width: 100%; + } + } + + &-footer, + &-footer-mobile { + height: 76px; + display: flex; + justify-content: space-between; + margin-bottom: 4px; + } + + &-footer:not(.timepicker-ui-footer + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + justify-content: flex-end; + } + } + + &-footer.mobile { + align-items: flex-start; + } + + &-clock-face { + background-color: #e0e0e0; + height: 100%; + width: 100%; + border-radius: 100%; + position: relative; + + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + height: 256px; + width: 256px; + top: 15px; + } + } + + &-dot { + position: absolute; + top: $tm50percent; + left: $tm50percent; + user-select: none; + touch-action: none; + transform: $tmtranslatetransform; + background-color: $purple; + height: 8px; + width: 8px; + border-radius: 100%; + } + &-tips-wrapper { + height: 100%; + width: 100%; + } + &-tips-wrapper-24h { + position: absolute; + height: 160px; + width: 160px; + z-index: 0; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; + border-radius: 50%; + + &-disabled { + pointer-events: none; + touch-action: none; + user-select: none; + } + } + + &-hour-time-12, + &-minutes-time, + &-hour-time-24 { + position: absolute; + width: 32px; + height: 32px; + text-align: center; + cursor: pointer; + font-size: 17.6px; + display: flex; + justify-content: center; + align-items: center; + touch-action: none; + user-select: none; + + span { + touch-action: none; + user-select: none; + } + } + + &-hour-time-12 { + display: block; + display: flex; + justify-content: center; + align-items: center; + } + + &-wrapper-time, + &-wrapper-time.mobile { + display: flex; + margin-right: 10px; + height: 100%; + justify-content: center; + align-items: center; + } + &-wrapper-time:not(.timepicker-ui-wrapper-time + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + margin-right: 0; + height: auto; + } + } + + &-wrapper-time-24h { + margin-right: 0px; + } + + &-wrapper-time.mobile { + position: relative; + } + + &-hour, + &-minutes, + &-hour.mobile, + &-minutes.mobile { + display: flex; + justify-content: center; + align-items: center; + font-size: 51.2px; + background-color: #e4e4e4; + border-radius: 7px; + cursor: pointer; + transition: all 0.3s ease; + outline: none; + border: 2px solid transparent; + padding: 10px; + width: 96px; + text-align: center; + + &:focus-visible { + outline: auto; + } + + &:hover, + &.active { + color: $purple; + background-color: #ece0fd; + } + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none !important; + margin: 0 !important; + } + &[type='number'] { + -moz-appearance: textfield !important; + } + } + + &-hour, + &-minutes { + outline: none; + border: 2px solid transparent; + &[contenteditable='true']:focus, + &[contenteditable='true']:active { + border: 2px solid $purple; + outline-color: $purple; + user-select: all; + } + } + + &-hour.mobile, + &-minutes.mobile { + height: 70px; + outline: none; + border: 2px solid transparent; + &[contenteditable='true']:focus, + &[contenteditable='true']:active { + border: 2px solid $purple; + outline-color: $purple; + user-select: all; + } + } + + &-dots, + &-dots.mobile { + padding-left: 5px; + padding-right: 5px; + display: flex; + justify-content: center; + align-items: center; + font-size: 57.6px; + user-select: none; + touch-action: none; + } + + &-wrapper-type-time, + &-wrapper-type-time.mobile { + display: flex; + flex-direction: column; + height: 80px; + justify-content: center; + align-items: center; + font-size: 16px; + font-weight: 500; + color: #787878; + } + + &-wrapper-type-time { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + flex-direction: row; + width: 100%; + } + } + + &-wrapper-type-time.mobile { + height: 70px; + } + + &-am, + &-pm, + &-am.mobile, + &-pm.mobile { + display: flex; + justify-content: center; + align-items: center; + border: 2px solid #d6d6d6; + transition: all 0.3s ease; + cursor: pointer; + width: 100%; + height: 100%; + + &:hover, + &.active { + color: $purple; + background-color: #ece0fd; + } + + &.active { + pointer-events: none; + } + } + + &-am:not(.timepicker-ui-am + .mobile), + &-pm:not(.timepicker-ui-pm + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + width: 50%; + height: 44px; + } + } + + &-am, + &-am.mobile { + border-top-left-radius: 7px; + border-top-right-radius: 7px; + border-bottom-width: calc(0.7504px / 2); + } + + &-am.mobile { + border-bottom-left-radius: 0; + } + + &-am:not(.timepicker-ui-am + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + border-top-right-radius: 0; + border-top-width: 1.5008px; + border-right-width: calc(0.7504px / 2); + } + } + + &-pm, + &-pm.mobile { + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; + border-top-width: calc(0.7504px / 2); + width: 54px; + } + + &-pm.mobile { + border-top-right-radius: 0; + } + + &-pm:not(.timepicker-ui-pm + .mobile) { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + border-bottom-right-radius: 7px; + border-top-right-radius: 7px; + border-bottom-left-radius: 0; + border-bottom-width: 1.5008px; + border-left-width: calc(0.7504px / 2); + width: 50%; + height: 44px; + } + } + + &-cancel-btn, + &-ok-btn, + &-cancel-btn.mobile, + &-ok.btn-mobile { + color: $purple; + text-transform: uppercase; + border-radius: 7px; + background-color: transparent; + text-align: center; + font-size: 15.2px; + padding-top: 9px; + padding-bottom: 9px; + font-weight: 500; + transition: all 0.3s ease; + cursor: pointer; + + &:hover { + background-color: #d6d6d6; + } + } + + &-cancel-btn, + &-cancel-btn.mobile { + width: 72px; + margin-right: 4px; + } + + &-ok-btn, + &-ok-btn.mobile { + width: 64px; + margin-left: 4px; + } + + &-wrapper-btn, + &-keyboard-icon, + &-wrapper-btn-mobile, + &-keyboard-icon-mobile { + display: flex; + justify-content: center; + align-items: center; + } + + &-keyboard-icon-wrapper, + &-keyboard-icon-wrapper.mobile { + width: 44px; + height: 44px; + position: relative; + bottom: -26px; + left: 12px; + transition: all 0.3s ease; + + &:hover .timepicker-ui-keyboard-icon, + &:hover .timepicker-ui-keyboard-icon.mobile { + background-color: #d6d6d6; + border-radius: 7px; + } + } + + &-keyboard-icon-wrapper.mobile { + bottom: -5px; + } + + &-keyboard-icon, + &-keyboard-icon.mobile { + padding: 12px; + cursor: pointer; + transition: all 0.3s ease; + color: #4e545a; + height: 44px; + width: 44px; + + &:hover { + color: $purple; + } + } + + &-keyboard-icon-wrapper, + &-keyboard-icon-wrapper.mobile { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + position: absolute; + bottom: 8px; + } + } + + &-wrapper-btn, + &-wrapper-btn.mobile { + margin-right: 8px; + position: relative; + bottom: -14px; + } + + &-hour-text, + &-minute-text, + &-hour-text.mobile, + &-minute-text.mobile { + position: absolute; + bottom: 6px; + font-size: 12.8px; + color: #a9a9a9; + left: 0; + } + + &-minute-text, + &-minute-text.mobile { + left: 120px; + } + + &-clock-hand { + position: absolute; + background-color: $purple; + bottom: $tm50percent; + height: 40%; + left: calc(50% - 1px); + transform-origin: center bottom 0; + width: 2px; + } + + &-clock-hand-24h { + height: 23%; + } + + &-circle-hand { + position: absolute; + transform: translate(-48%, -50%); + width: 4px; + height: 4px; + border-radius: 100%; + transition: all 0.2s ease; + height: 46px; + width: 46px; + box-sizing: border-box !important; + background-color: $purple; + + &.small-circle { + height: 36px; + width: 36px; + box-sizing: border-box !important; + } + } + + &-circle-hand-24h { + transform: translate(-50%, -50%); + height: 32px; + width: 32px; + top: 4px; + left: 1px; + } + + &-value-tips, + &-value-tips-24h { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s ease color; + border-radius: 50%; + outline: none; + + &:focus { + background: rgba(143, 143, 143, 0.315); + box-shadow: $tmwrapperboxshadow; + } + + &.active { + color: #fff; + transition: none; + } + } + + &-clock-animation { + animation: clockanimation 350ms linear; + } + + &-open-element { + &.disabled { + pointer-events: none; + touch-action: none; + user-select: none; + } + } + + &-tips-animation { + transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, + height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + } + + &-tips-disabled { + color: rgba(156, 155, 155, 0.6); + pointer-events: none; + } +} + +.opacity { + transition: $tmopacity; + + &.show { + opacity: 1; + } +} + +.invalid-value { + border-color: $redtovalid !important; + color: $redtovalid !important; + + &:hover, + &:focus, + &:active { + border-color: $redtovalid !important; + color: $redtovalid !important; + } +} + +@keyframes clockanimation { + 0% { + opacity: 0; + transform: scale(0.8); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +.timepicker-ui-invalid-format { + border: 2px solid red; + color: red; +} + +.timepicker-ui-invalid-text { + color: red; +} diff --git a/app/src/timepicker/styles/theme.scss b/app/src/timepicker/styles/theme.scss index 021f659..3942b62 100644 --- a/app/src/timepicker/styles/theme.scss +++ b/app/src/timepicker/styles/theme.scss @@ -1,245 +1,245 @@ -@import './variables.scss'; - -.timepicker-ui { - &-wrapper, - &-wrapper.mobile { - &.crane-straight { - border-radius: 0; - background-color: $cranepurple900; - color: #fff; - - &.radius { - border-radius: 1.25rem; - } - } - } - - &-select-time, - &-select-time.mobile { - &.crane-straight { - color: #e5e5e5; - } - } - - &-clock-face, - &-clock-face.mobile { - &.crane-straight { - background-color: $cranepurple700; - } - } - - &-dot, - &-dot.mobile { - &.crane-straight { - background-color: $cranered400; - } - } - - &-hour, - &-minutes, - &-hour.mobile, - &-minutes.mobile { - &.crane-straight { - background-color: $cranepurple700; - border-radius: 0; - color: $white; - - &.radius { - border-radius: 1.25rem; - } - - &:hover, - &.active { - background-color: $cranered400; - } - } - } - - &-hour.mobile, - &-minutes.mobile { - &.crane-straight { - &[contenteditable='true']:focus, - &[contenteditable='true']:active { - border-color: $white; - outline-color: $white; - } - } - } - - &-dots, - &-dots.mobile { - &.crane-straight { - color: $white; - } - } - - &-wrapper-type-time, - &-wrapper-type-time.mobile { - &.crane-straight { - color: $white; - } - } - - &-am, - &-pm, - &-am.mobile, - &-pm.mobile { - &.crane-straight { - border: 0.125rem solid transparent; - border-radius: 0; - background-color: $cranepurple700; - } - - &:hover, - &.active { - &.crane-straight { - color: $white; - background-color: $cranered400; - } - } - } - - &-am { - &.crane-straight { - &.radius { - border-top-left-radius: 1.25rem; - border-top-right-radius: 1.25rem; - } - } - } - - &-pm { - &.crane-straight { - &.radius { - border-bottom-left-radius: 1.25rem; - border-bottom-right-radius: 1.25rem; - } - } - } - - &-am:not(.timepicker-ui-am + .mobile) { - &.crane-straight { - &.radius { - @media screen and (min-width: 320px) and (max-width: 826px) and(orientation:landscape) { - border-bottom-left-radius: 1.25rem; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } - } - - &-pm:not(.timepicker-ui-pm + .mobile) { - &.crane-straight { - &.radius { - @media screen and (min-width: 320px) and (max-width: 826px) and(orientation:landscape) { - border-bottom-right-radius: 1.25rem; - border-top-right-radius: 1.25rem; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } - } - } - - &-am.mobile { - &.crane-straight { - &.radius { - @media screen and (min-width: 320px) and (max-width: 767px) and(orientation:landscape) { - border-bottom-left-radius: 0rem; - border-bottom-right-radius: 0rem; - } - } - } - } - - &-pm.mobile { - &.crane-straight { - &.radius { - @media screen and (min-width: 320px) and (max-width: 767px) and(orientation:landscape) { - border-top-left-radius: 0rem; - border-top-right-radius: 0rem; - } - } - } - } - - &-cancel-btn, - &-ok-btn, - &-cancel-btn.mobile, - &-ok-btn.mobile { - &.crane-straight { - color: $white; - border-radius: 0rem; - - &.radius { - border-radius: 0.8125rem; - } - } - - &:hover { - &.crane-straight { - background-color: $cranered400; - } - } - } - - &-keyboard-icon-wrapper, - &-keyboard-icon-wrapper.mobile { - &.crane-straight { - color: $white; - - &.radius { - border-radius: 1.25rem; - } - } - - &.crane-straight { - &:hover .timepicker-ui-keyboard-icon, - &:hover .timepicker-ui-keyboard-icon.mobile { - background-color: $cranered400; - color: $white; - border-radius: 0; - } - - &.radius { - &:hover .timepicker-ui-keyboard-icon, - &:hover .timepicker-ui-keyboard-icon.mobile { - border-radius: 0.875rem; - } - } - } - } - - &-keyboard-icon, - &-keyboard-icon.mobile { - &.crane-straight { - &:hover { - color: $white; - - &.radius { - border-radius: 1.25rem; - } - } - } - } - - &-clock-hand { - &.crane-straight { - background-color: $cranered400; - } - } - - &-circle-hand { - &.crane-straight { - border-color: $cranered400; - background-color: $cranered400; - } - } - - &-value-tips { - &.crane-straight { - color: #fff; - } - } -} +@import './variables.scss'; + +.timepicker-ui { + &-wrapper, + &-wrapper.mobile { + &.crane-straight { + border-radius: 0; + background-color: $cranepurple900; + color: #fff; + + &.radius { + border-radius: 1.25rem; + } + } + } + + &-select-time, + &-select-time.mobile { + &.crane-straight { + color: #e5e5e5; + } + } + + &-clock-face, + &-clock-face.mobile { + &.crane-straight { + background-color: $cranepurple700; + } + } + + &-dot, + &-dot.mobile { + &.crane-straight { + background-color: $cranered400; + } + } + + &-hour, + &-minutes, + &-hour.mobile, + &-minutes.mobile { + &.crane-straight { + background-color: $cranepurple700; + border-radius: 0; + color: $white; + + &.radius { + border-radius: 1.25rem; + } + + &:hover, + &.active { + background-color: $cranered400; + } + } + } + + &-hour.mobile, + &-minutes.mobile { + &.crane-straight { + &[contenteditable='true']:focus, + &[contenteditable='true']:active { + border-color: $white; + outline-color: $white; + } + } + } + + &-dots, + &-dots.mobile { + &.crane-straight { + color: $white; + } + } + + &-wrapper-type-time, + &-wrapper-type-time.mobile { + &.crane-straight { + color: $white; + } + } + + &-am, + &-pm, + &-am.mobile, + &-pm.mobile { + &.crane-straight { + border: 0.125rem solid transparent; + border-radius: 0; + background-color: $cranepurple700; + } + + &:hover, + &.active { + &.crane-straight { + color: $white; + background-color: $cranered400; + } + } + } + + &-am { + &.crane-straight { + &.radius { + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; + } + } + } + + &-pm { + &.crane-straight { + &.radius { + border-bottom-left-radius: 1.25rem; + border-bottom-right-radius: 1.25rem; + } + } + } + + &-am:not(.timepicker-ui-am + .mobile) { + &.crane-straight { + &.radius { + @media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) { + border-bottom-left-radius: 1.25rem; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } + } + + &-pm:not(.timepicker-ui-pm + .mobile) { + &.crane-straight { + &.radius { + @media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) { + border-bottom-right-radius: 1.25rem; + border-top-right-radius: 1.25rem; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } + } + } + + &-am.mobile { + &.crane-straight { + &.radius { + @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { + border-bottom-left-radius: 0rem; + border-bottom-right-radius: 0rem; + } + } + } + } + + &-pm.mobile { + &.crane-straight { + &.radius { + @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { + border-top-left-radius: 0rem; + border-top-right-radius: 0rem; + } + } + } + } + + &-cancel-btn, + &-ok-btn, + &-cancel-btn.mobile, + &-ok-btn.mobile { + &.crane-straight { + color: $white; + border-radius: 0rem; + + &.radius { + border-radius: 0.8125rem; + } + } + + &:hover { + &.crane-straight { + background-color: $cranered400; + } + } + } + + &-keyboard-icon-wrapper, + &-keyboard-icon-wrapper.mobile { + &.crane-straight { + color: $white; + + &.radius { + border-radius: 1.25rem; + } + } + + &.crane-straight { + &:hover .timepicker-ui-keyboard-icon, + &:hover .timepicker-ui-keyboard-icon.mobile { + background-color: $cranered400; + color: $white; + border-radius: 0; + } + + &.radius { + &:hover .timepicker-ui-keyboard-icon, + &:hover .timepicker-ui-keyboard-icon.mobile { + border-radius: 0.875rem; + } + } + } + } + + &-keyboard-icon, + &-keyboard-icon.mobile { + &.crane-straight { + &:hover { + color: $white; + + &.radius { + border-radius: 1.25rem; + } + } + } + } + + &-clock-hand { + &.crane-straight { + background-color: $cranered400; + } + } + + &-circle-hand { + &.crane-straight { + border-color: $cranered400; + background-color: $cranered400; + } + } + + &-value-tips { + &.crane-straight { + color: #fff; + } + } +} diff --git a/app/src/timepicker/utils/disable.d.ts b/app/src/timepicker/utils/disable.d.ts index 6358ed1..6e16715 100644 --- a/app/src/timepicker/utils/disable.d.ts +++ b/app/src/timepicker/utils/disable.d.ts @@ -1,55 +1,69 @@ -import { OptionTypes } from './types'; -export declare const createDisabledTime: (options: any) => { - value: { - removedStartedHour: any; - removedEndHour: any; - rangeArrHour: string[]; - isInterval: boolean; - startMinutes: string[]; - endMinutes: string[]; - endType: string | undefined; - startType: string | undefined; - pmHours?: undefined; - amHours?: undefined; - removedAmHour?: undefined; - removedPmHour?: undefined; - hours?: undefined; - minutes?: undefined; - }; -} | { - value: { - isInterval: boolean; - endType: string | undefined; - startType: string | undefined; - pmHours: string[]; - amHours: string[]; - startMinutes: string[]; - endMinutes: string[]; - removedAmHour: string; - removedPmHour: string; - removedStartedHour?: undefined; - removedEndHour?: undefined; - rangeArrHour?: undefined; - hours?: undefined; - minutes?: undefined; - }; -} | { - value: { - hours: any; - minutes: any; - removedStartedHour?: undefined; - removedEndHour?: undefined; - rangeArrHour?: undefined; - isInterval?: undefined; - startMinutes?: undefined; - endMinutes?: undefined; - endType?: undefined; - startType?: undefined; - pmHours?: undefined; - amHours?: undefined; - removedAmHour?: undefined; - removedPmHour?: undefined; - }; -} | undefined; -export declare const checkDisabledHoursAndMinutes: (value: (string | number)[] | string | number | undefined, type: 'hour' | 'minutes', clockType?: OptionTypes['clockType'], arrValue?: (string | number)[] | undefined) => boolean | undefined; -export declare const checkedDisabledValuesInterval: (hour?: any, minutes?: any, type?: any, interval?: any) => boolean; +import { OptionTypes } from './types'; +export declare const createDisabledTime: (options: any) => + | { + value: { + removedStartedHour: any; + removedEndHour: any; + rangeArrHour: string[]; + isInterval: boolean; + startMinutes: string[]; + endMinutes: string[]; + endType: string | undefined; + startType: string | undefined; + pmHours?: undefined; + amHours?: undefined; + removedAmHour?: undefined; + removedPmHour?: undefined; + hours?: undefined; + minutes?: undefined; + }; + } + | { + value: { + isInterval: boolean; + endType: string | undefined; + startType: string | undefined; + pmHours: string[]; + amHours: string[]; + startMinutes: string[]; + endMinutes: string[]; + removedAmHour: string; + removedPmHour: string; + removedStartedHour?: undefined; + removedEndHour?: undefined; + rangeArrHour?: undefined; + hours?: undefined; + minutes?: undefined; + }; + } + | { + value: { + hours: any; + minutes: any; + removedStartedHour?: undefined; + removedEndHour?: undefined; + rangeArrHour?: undefined; + isInterval?: undefined; + startMinutes?: undefined; + endMinutes?: undefined; + endType?: undefined; + startType?: undefined; + pmHours?: undefined; + amHours?: undefined; + removedAmHour?: undefined; + removedPmHour?: undefined; + }; + } + | undefined; +export declare const checkDisabledHoursAndMinutes: ( + value: (string | number)[] | string | number | undefined, + type: 'hour' | 'minutes', + clockType?: OptionTypes['clockType'], + arrValue?: (string | number)[], +) => boolean | undefined; +export declare const checkedDisabledValuesInterval: ( + hour?: any, + minutes?: any, + type?: any, + interval?: any, +) => boolean; diff --git a/app/src/timepicker/utils/index.d.ts b/app/src/timepicker/utils/index.d.ts index 59b14a4..652dc87 100644 --- a/app/src/timepicker/utils/index.d.ts +++ b/app/src/timepicker/utils/index.d.ts @@ -1,41 +1,61 @@ -import { OptionTypes } from './types'; -export declare const toType: (obj: null | undefined | string | number) => string; -export declare const isElement: (obj: string | any[] | any) => string; -export declare const typeCheckConfig: (componentName: string, config: { - [x: string]: any; -}, configTypes: { - [x: string]: any; -}) => void; -export declare const getConfig: (options?: OptionTypes | undefined, defaultOptions?: Record | undefined) => Record; -export declare const getScrollbarWidth: () => number; -export declare const getRadians: (el: number) => number; -export declare const getClickTouchPosition: (event: TouchEvent, object: HTMLElement, isMobile?: boolean) => { - x: number; - y: number; -} | undefined; -export declare const getMathDegIncrement: (degrees: number, num: number) => number; -export declare const hasClass: (el: HTMLElement | null | Element, selector: string) => boolean; -export declare const createNewEvent: (el: Element, eventName: string, value: { - hour?: string | null; - minutes?: string | null; - type?: string | null; - degreesHours?: number | null; - degreesMinutes?: number | null; - hourNotAccepted?: string | null; - minutesNotAccepted?: string | null; - eventType?: any; - test?: string; - error?: string; - currentHour?: string | number; - currentMin?: string | number; - currentType?: string; - currentLength?: string | number; -}) => void; -export declare const getBrowser: () => boolean; -export declare const getIncrementTimes: (degrees: number, type: any, count: number) => number; -export declare const createObjectFromData: (obj: OptionTypes) => any; -export declare const range: (start?: string | number | undefined, stop?: string | number | undefined) => number[]; -export declare const reverseRange: (start?: string | number | undefined, stop?: string | number | undefined) => number[]; -export declare const initCallback: (callback?: (() => void) | undefined) => void; -export declare const timeConversion: (str?: string) => string; -export declare const debounce: ReturnType>(callback: T, timeout: number) => (...args: Parameters) => void; +import { OptionTypes } from './types'; +export declare const toType: (obj: null | undefined | string | number) => string; +export declare const isElement: (obj: string | any[] | any) => string; +export declare const typeCheckConfig: ( + componentName: string, + config: { + [x: string]: any; + }, + configTypes: { + [x: string]: any; + }, +) => void; +export declare const getConfig: ( + options?: OptionTypes, + defaultOptions?: Record, +) => Record; +export declare const getScrollbarWidth: () => number; +export declare const getRadians: (el: number) => number; +export declare const getClickTouchPosition: ( + event: TouchEvent, + object: HTMLElement, + isMobile?: boolean, +) => + | { + x: number; + y: number; + } + | undefined; +export declare const getMathDegIncrement: (degrees: number, num: number) => number; +export declare const hasClass: (el: HTMLElement | null | Element, selector: string) => boolean; +export declare const createNewEvent: ( + el: Element, + eventName: string, + value: { + hour?: string | null; + minutes?: string | null; + type?: string | null; + degreesHours?: number | null; + degreesMinutes?: number | null; + hourNotAccepted?: string | null; + minutesNotAccepted?: string | null; + eventType?: any; + test?: string; + error?: string; + currentHour?: string | number; + currentMin?: string | number; + currentType?: string; + currentLength?: string | number; + }, +) => void; +export declare const getBrowser: () => boolean; +export declare const getIncrementTimes: (degrees: number, type: any, count: number) => number; +export declare const createObjectFromData: (obj: OptionTypes) => any; +export declare const range: (start?: number | string, stop?: number | string) => number[]; +export declare const reverseRange: (start?: number | string, stop?: number | string) => number[]; +export declare const initCallback: (callback?: () => void) => void; +export declare const timeConversion: (str?: string) => string; +export declare const debounce: ReturnType>( + callback: T, + timeout: number, +) => (...args: Parameters) => void; diff --git a/app/src/timepicker/utils/index.ts b/app/src/timepicker/utils/index.ts index 8b79104..f7edeb9 100644 --- a/app/src/timepicker/utils/index.ts +++ b/app/src/timepicker/utils/index.ts @@ -1,182 +1,182 @@ -/* eslint-disable no-else-return */ -import { OptionTypes } from './types'; - -export const toType = (obj: null | undefined | string | number): string => { - if (obj === null || obj === undefined) { - return `${obj}`; - } - - // @ts-ignore - return {}.toString - .call(obj) - .match(/\s([a-z]+)/i)[1] - .toLowerCase(); -}; - -export const isElement = (obj: string | any[] | any): string => (obj[0] || obj).nodeType; - -export const typeCheckConfig = ( - componentName: string, - config: { [x: string]: any }, - configTypes: { [x: string]: any }, -): void => { - Object.keys(configTypes).forEach((property) => { - const expectedTypes = configTypes[property]; - const value = config[property]; - const valueType = value && isElement(value) ? 'el' : toType(value); - - if (!new RegExp(expectedTypes).test(valueType)) { - throw new Error( - `${componentName.toUpperCase()}: ` + - `Option "${property}" provided type "${valueType}" ` + - `but expected type "${expectedTypes}".`, - ); - } - }); -}; - -export const getConfig = ( - options?: OptionTypes, - defaultOptions?: Record, -): Record => { - const config = { - ...defaultOptions, - ...options, - }; - - return config; -}; - -export const getScrollbarWidth = (): number => { - const scrollDiv = document.createElement('div'); - scrollDiv.className = 'timepicker-ui-measure'; - document.body.appendChild(scrollDiv); - const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth; - - document.body.removeChild(scrollDiv); - return scrollbarWidth; -}; - -export const getRadians = (el: number): number => el * (Math.PI / 180); - -export const getClickTouchPosition = (event: TouchEvent, object: HTMLElement, isMobile = false) => { - const { touches } = event; - const { clientX, clientY } = event as unknown as MouseEvent; - - if (!object) return; - - const { left, top } = object.getBoundingClientRect(); - let obj: { x: number; y: number } = { x: 0, y: 0 }; - - if (!isMobile) { - obj = { - x: clientX - left, - y: clientY - top, - }; - } else if (isMobile && touches !== undefined) { - if (Object.keys(touches).length > 0) { - const { clientX: clx, clientY: cly } = touches[0]; - - obj = { - x: clx - left, - y: cly - top, - }; - } - } - - if (Object.keys(obj).length === 0 && obj.constructor === Object) return; - - return obj; -}; - -export const getMathDegIncrement = (degrees: number, num: number): number => Math.round(degrees / num) * num; - -export const hasClass = (el: HTMLElement | null | Element, selector: string): boolean => - el ? el.classList.contains(selector) : false; - -export const createNewEvent = ( - el: Element, - eventName: string, - value: { - hour?: string | null; - minutes?: string | null; - type?: string | null; - degreesHours?: number | null; - degreesMinutes?: number | null; - hourNotAccepted?: string | null; - minutesNotAccepted?: string | null; - eventType?: any; - test?: string; - error?: string; - currentHour?: string | number; - currentMin?: string | number; - currentType?: string; - currentLength?: string | number; - }, -): void => { - if (!el) return; - - const ev = new CustomEvent(eventName, { detail: value }); - - el.dispatchEvent(ev); -}; - -export const getBrowser = (): boolean => - /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); - -export const getIncrementTimes = (degrees: number, type: any, count: number) => - getMathDegIncrement(degrees, (type as never) * count); - -export const createObjectFromData = (obj: OptionTypes): any => { - if (!obj) return; - - const parse = JSON.parse(JSON.stringify(obj)); - const keys = Object.keys(parse); - - return Object.values(parse).reduce((acc: any, curr, index) => { - if (Number(curr)) { - acc[keys[index]] = Number(curr); - } else if (curr === 'true' || curr === 'false') { - acc[keys[index]] = JSON.parse(curr); - } else { - acc[keys[index]] = curr; - } - - return acc; - }, {}); -}; - -export const range = (start?: number | string, stop?: number | string) => - Array.from({ length: Number(stop) - Number(start) + 1 }, (_, i) => Number(start) + i); - -export const reverseRange = (start?: number | string, stop?: number | string) => - Array.from({ length: Number(stop) - Number(start) + 1 }, (_, i) => Number(stop) - i).reverse(); - -export const initCallback = (callback?: () => void): void => { - if (callback && typeof callback === 'function') { - callback(); - } -}; - -export const timeConversion = (str = '') => { - const time = str.replace(/(AM|PM|am|pm)/, (match) => ` ${match}`); - const date = new Date(`September 20, 2000 ${time}`); - const hours = date.getHours().toString().padStart(2, '0'); - const mins = date.getMinutes().toString().padStart(2, '0'); - - return `${hours}:${mins}`; -}; - -export const debounce = ReturnType>( - callback: T, - timeout: number, -): ((...args: Parameters) => void) => { - let timer: ReturnType; - - return (...args: Parameters) => { - clearTimeout(timer); - timer = setTimeout(() => { - callback(...args); - }, timeout); - }; -}; +/* eslint-disable no-else-return */ +import { OptionTypes } from './types'; + +export const toType = (obj: null | undefined | string | number): string => { + if (obj === null || obj === undefined) { + return `${obj}`; + } + + // @ts-ignore + return {}.toString + .call(obj) + .match(/\s([a-z]+)/i)[1] + .toLowerCase(); +}; + +export const isElement = (obj: string | any[] | any): string => (obj[0] || obj).nodeType; + +export const typeCheckConfig = ( + componentName: string, + config: { [x: string]: any }, + configTypes: { [x: string]: any }, +): void => { + Object.keys(configTypes).forEach((property) => { + const expectedTypes = configTypes[property]; + const value = config[property]; + const valueType = value && isElement(value) ? 'el' : toType(value); + + if (!new RegExp(expectedTypes).test(valueType)) { + throw new Error( + `${componentName.toUpperCase()}: ` + + `Option "${property}" provided type "${valueType}" ` + + `but expected type "${expectedTypes}".`, + ); + } + }); +}; + +export const getConfig = ( + options?: OptionTypes, + defaultOptions?: Record, +): Record => { + const config = { + ...defaultOptions, + ...options, + }; + + return config; +}; + +export const getScrollbarWidth = (): number => { + const scrollDiv = document.createElement('div'); + scrollDiv.className = 'timepicker-ui-measure'; + document.body.appendChild(scrollDiv); + const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth; + + document.body.removeChild(scrollDiv); + return scrollbarWidth; +}; + +export const getRadians = (el: number): number => el * (Math.PI / 180); + +export const getClickTouchPosition = (event: TouchEvent, object: HTMLElement, isMobile = false) => { + const { touches } = event; + const { clientX, clientY } = event as unknown as MouseEvent; + + if (!object) return; + + const { left, top } = object.getBoundingClientRect(); + let obj: { x: number; y: number } = { x: 0, y: 0 }; + + if (touches === undefined) { + obj = { + x: clientX - left, + y: clientY - top, + }; + } else if (touches !== undefined && touches.length > 0) { + if (Object.keys(touches).length > 0) { + const { clientX: clx, clientY: cly } = touches[0]; + + obj = { + x: clx - left, + y: cly - top, + }; + } + } + + if (Object.keys(obj).length === 0 && obj.constructor === Object) return; + + return obj; +}; + +export const getMathDegIncrement = (degrees: number, num: number): number => Math.round(degrees / num) * num; + +export const hasClass = (el: HTMLElement | null | Element, selector: string): boolean => + el ? el.classList.contains(selector) : false; + +export const createNewEvent = ( + el: Element, + eventName: string, + value: { + hour?: string | null; + minutes?: string | null; + type?: string | null; + degreesHours?: number | null; + degreesMinutes?: number | null; + hourNotAccepted?: string | null; + minutesNotAccepted?: string | null; + eventType?: any; + test?: string; + error?: string; + currentHour?: string | number; + currentMin?: string | number; + currentType?: string; + currentLength?: string | number; + }, +): void => { + if (!el) return; + + const ev = new CustomEvent(eventName, { detail: value }); + + el.dispatchEvent(ev); +}; + +export const getBrowser = (): boolean => + /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + +export const getIncrementTimes = (degrees: number, type: any, count: number) => + getMathDegIncrement(degrees, (type as never) * count); + +export const createObjectFromData = (obj: OptionTypes): any => { + if (!obj) return; + + const parse = JSON.parse(JSON.stringify(obj)); + const keys = Object.keys(parse); + + return Object.values(parse).reduce((acc: any, curr, index) => { + if (Number(curr)) { + acc[keys[index]] = Number(curr); + } else if (curr === 'true' || curr === 'false') { + acc[keys[index]] = JSON.parse(curr); + } else { + acc[keys[index]] = curr; + } + + return acc; + }, {}); +}; + +export const range = (start?: number | string, stop?: number | string) => + Array.from({ length: Number(stop) - Number(start) + 1 }, (_, i) => Number(start) + i); + +export const reverseRange = (start?: number | string, stop?: number | string) => + Array.from({ length: Number(stop) - Number(start) + 1 }, (_, i) => Number(stop) - i).reverse(); + +export const initCallback = (callback?: () => void): void => { + if (callback && typeof callback === 'function') { + callback(); + } +}; + +export const timeConversion = (str = '') => { + const time = str.replace(/(AM|PM|am|pm)/, (match) => ` ${match}`); + const date = new Date(`September 20, 2000 ${time}`); + const hours = date.getHours().toString().padStart(2, '0'); + const mins = date.getMinutes().toString().padStart(2, '0'); + + return `${hours}:${mins}`; +}; + +export const debounce = ReturnType>( + callback: T, + timeout: number, +): ((...args: Parameters) => void) => { + let timer: ReturnType; + + return (...args: Parameters) => { + clearTimeout(timer); + timer = setTimeout(() => { + callback(...args); + }, timeout); + }; +}; diff --git a/app/src/timepicker/utils/input.d.ts b/app/src/timepicker/utils/input.d.ts index e8f4f03..f000227 100644 --- a/app/src/timepicker/utils/input.d.ts +++ b/app/src/timepicker/utils/input.d.ts @@ -1,66 +1,82 @@ -import { OptionTypes } from './types'; -export declare const getInputValue: (el: HTMLInputElement, clockType?: string | undefined, currentTime?: OptionTypes['currentTime'], updateOptions?: boolean | undefined) => { - hour: string; - minutes: string; - type: string | undefined; - error?: undefined; - currentLength?: undefined; - currentType?: undefined; - currentHour?: undefined; - currentMin?: undefined; -} | { - error: string; - hour?: undefined; - minutes?: undefined; - type?: undefined; - currentLength?: undefined; - currentType?: undefined; - currentHour?: undefined; - currentMin?: undefined; -} | { - error: string; - currentLength: number; - hour?: undefined; - minutes?: undefined; - type?: undefined; - currentType?: undefined; - currentHour?: undefined; - currentMin?: undefined; -} | { - error: string; - currentLength: number; - currentType: string; - hour?: undefined; - minutes?: undefined; - type?: undefined; - currentHour?: undefined; - currentMin?: undefined; -} | { - error: string; - currentHour: number; - currentMin: string | number; - currentType: string; - hour?: undefined; - minutes?: undefined; - type?: undefined; - currentLength?: undefined; -} | { - error: string; - currentHour: number; - currentMin: string | number; - hour?: undefined; - minutes?: undefined; - type?: undefined; - currentLength?: undefined; - currentType?: undefined; -} | { - hour: string; - minutes: string; - type?: undefined; - error?: undefined; - currentLength?: undefined; - currentType?: undefined; - currentHour?: undefined; - currentMin?: undefined; -}; -export declare const handleValueAndCheck: (val: string | number | null, type: 'hour' | 'minutes', clockType?: OptionTypes['clockType']) => undefined | boolean; +import { OptionTypes } from './types'; +export declare const getInputValue: ( + el: HTMLInputElement, + clockType?: string, + currentTime?: OptionTypes['currentTime'], + updateOptions?: boolean, +) => + | { + hour: string; + minutes: string; + type: string | undefined; + error?: undefined; + currentLength?: undefined; + currentType?: undefined; + currentHour?: undefined; + currentMin?: undefined; + } + | { + error: string; + hour?: undefined; + minutes?: undefined; + type?: undefined; + currentLength?: undefined; + currentType?: undefined; + currentHour?: undefined; + currentMin?: undefined; + } + | { + error: string; + currentLength: number; + hour?: undefined; + minutes?: undefined; + type?: undefined; + currentType?: undefined; + currentHour?: undefined; + currentMin?: undefined; + } + | { + error: string; + currentLength: number; + currentType: string; + hour?: undefined; + minutes?: undefined; + type?: undefined; + currentHour?: undefined; + currentMin?: undefined; + } + | { + error: string; + currentHour: number; + currentMin: string | number; + currentType: string; + hour?: undefined; + minutes?: undefined; + type?: undefined; + currentLength?: undefined; + } + | { + error: string; + currentHour: number; + currentMin: string | number; + hour?: undefined; + minutes?: undefined; + type?: undefined; + currentLength?: undefined; + currentType?: undefined; + } + | { + hour: string; + minutes: string; + type?: undefined; + error?: undefined; + currentLength?: undefined; + currentType?: undefined; + currentHour?: undefined; + currentMin?: undefined; + }; +export declare const handleValueAndCheck: ( + val: string | number | null, + type: 'hour' | 'minutes', + clockType?: OptionTypes['clockType'], +) => undefined | boolean; diff --git a/dist/timepicker-ui.esm.js b/dist/timepicker-ui.esm.js index 359e8b8..17f95fb 100644 --- a/dist/timepicker-ui.esm.js +++ b/dist/timepicker-ui.esm.js @@ -1 +1 @@ -function e(e,i,t,n){return new(t||(t=Promise))((function(r,s){function o(e){try{l(n.next(e))}catch(e){s(e)}}function a(e){try{l(n.throw(e))}catch(e){s(e)}}function l(e){var i;e.done?r(e.value):(i=e.value,i instanceof t?i:new t((function(e){e(i)}))).then(o,a)}l((n=n.apply(e,i||[])).next())}))}const i=(e,i,t=!1)=>{const{touches:n}=e,{clientX:r,clientY:s}=e;if(!i)return;const{left:o,top:a}=i.getBoundingClientRect();let l={x:0,y:0};if(t){if(t&&void 0!==n&&Object.keys(n).length>0){const{clientX:e,clientY:i}=n[0];l={x:e-o,y:i-a}}}else l={x:r-o,y:s-a};return 0!==Object.keys(l).length||l.constructor!==Object?l:void 0},t=(e,i)=>!!e&&e.classList.contains(i),n=(e,i,t)=>{if(!e)return;const n=new CustomEvent(i,{detail:t});e.dispatchEvent(n)},r=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),s=(e,i,t)=>((e,i)=>Math.round(e/i)*i)(e,i*t),o=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((i,t)=>Number(e)+t)),a=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((e,t)=>Number(i)-t)).reverse(),l=e=>{e&&"function"==typeof e&&e()},u=(e="")=>{const i=e.replace(/(AM|PM|am|pm)/,(e=>` ${e}`)),t=new Date(`September 20, 2000 ${i}`);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}`},d=(e,i,t,n)=>{if(!e)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const{value:r}=e;if(t){if("boolean"==typeof t&&t){const[e,t]=(new Date).toLocaleTimeString().split(":");if(/[a-z]/i.test(t)&&"12h"===i){const[i,n]=t.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:t,type:void 0}}{const{time:e,locales:r,preventClockType:s}=t;let o=e;if(e||(o=new Date),s&&n){const[e,i]=new Date(o).toLocaleTimeString().split(":");if(/[a-z]/i.test(i)){const[t,n]=i.split(" ");return{hour:e,minutes:t,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:void 0}}const[a,l]=new Date(o).toLocaleTimeString(r,{timeStyle:"short"}).split(":");if(/[a-z]/i.test(l)&&"12h"===i){const[e,i]=l.split(" ");return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:e,type:i}}if("12h"===i){const[e,i]=new Date(`1970-01-01T${a}:${l}Z`).toLocaleTimeString("en-US",{timeZone:"UTC",hour12:!0,hour:"numeric",minute:"numeric"}).split(":"),[t,n]=i.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:a,minutes:t,type:n}}return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:l,type:void 0}}}if(""===r||!r)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const[s,o]=r.split(" "),[a,l]=s.split(":");if(/[a-z]/i.test(s))return{error:"The input contains invalid letters or whitespace."};if(r.includes(" ")){if(!o)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 5), currentLength: ${r.length}.`,currentLength:r.length};if(r.length>8||"AM"!==o&&"PM"!==o)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 8), currentLength: ${r.length} or invalid type (PM or AM), currentType: ${o}.`,currentLength:r.length,currentType:o}}let u=Number(l);const d=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?d>12||u>59||u<0||0===d||"AM"!==o&&"PM"!==o?{error:`The input contains invalid letters or numbers. Problem is with hour which should be less than 13 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${o}.`,currentHour:d,currentMin:u,currentType:o}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString(),type:o}:d<0||d>23||u>59?{error:`The input contains invalid numbers. Problem is with hour which should be less than 24 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:d,currentMin:u}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString()}},c=(e,i,t)=>{const n=Number(e);return"hour"===i?"24h"!==t?n>0&&n<=12:n>=0&&n<=23:"minutes"===i?n>=0&&n<=59:void 0},p=(e,i,t,n)=>{if(e){if(Array.isArray(e)&&e.length>0){return!e.map((e=>c(e,i,t))).some((e=>!1===e))}if("string"==typeof e||"number"==typeof e){const r=c(e,i,t),s=null==n?void 0:n.map(Number).includes(Number(e));return!(!r||s)}}};function h(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}h(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n\n.timepicker-ui * {\n box-sizing: border-box !important; }\n\n.timepicker-ui-modal {\n font-family: 'Roboto', sans-serif;\n position: fixed;\n opacity: 0;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(156, 155, 155, 0.6);\n z-index: 5000;\n pointer-events: none; }\n .timepicker-ui-modal.show {\n pointer-events: auto; }\n .timepicker-ui-modal.removed {\n top: auto;\n bottom: auto;\n left: auto;\n right: auto;\n background-color: transparent; }\n\n.timepicker-ui-measure {\n position: absolute;\n top: -9999px;\n width: 3.125rem;\n height: 3.125rem;\n overflow: scroll; }\n\n.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {\n position: fixed;\n z-index: 5001;\n width: 328px;\n height: 500px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n display: flex;\n flex-direction: column;\n outline: none; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper {\n flex-direction: row;\n height: 360px;\n width: 584px; } }\n\n@media screen and (max-width: 330px) and (orientation: portrait) {\n .timepicker-ui-wrapper {\n width: 315px; } }\n\n.timepicker-ui-wrapper.mobile {\n height: 218px; }\n @media screen and (max-width: 330px) {\n .timepicker-ui-wrapper.mobile {\n width: 315px; } }\n\n.timepicker-ui-header, .timepicker-ui-header.mobile {\n padding-top: 52px;\n padding-bottom: 36px;\n padding-right: 24px;\n padding-left: 24px;\n height: 104px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 100%; }\n\n.timepicker-ui-header.mobile {\n padding-bottom: 0;\n padding-top: 35px; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-header {\n height: auto;\n flex-direction: column; } }\n\n.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {\n text-transform: uppercase;\n position: absolute;\n top: calc(28px - 12px);\n left: 24px;\n font-size: 12px;\n color: #a9a9a9; }\n\n.timepicker-ui-body {\n height: 256px;\n width: 256px;\n margin: 0 auto;\n position: relative;\n border-radius: 100%; }\n @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-body {\n padding-right: 0;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 23px; } }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-landspace {\n display: flex;\n flex-direction: column;\n width: 100%; } }\n\n.timepicker-ui-footer, .timepicker-ui-footer-mobile {\n height: 76px;\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-footer {\n justify-content: flex-end; } }\n\n.timepicker-ui-footer.mobile {\n align-items: flex-start; }\n\n.timepicker-ui-clock-face {\n background-color: #e0e0e0;\n height: 100%;\n width: 100%;\n border-radius: 100%;\n position: relative; }\n @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-clock-face {\n height: 256px;\n width: 256px;\n top: 15px; } }\n\n.timepicker-ui-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n user-select: none;\n touch-action: none;\n transform: translate(-50%, -50%);\n background-color: #6200ee;\n height: 8px;\n width: 8px;\n border-radius: 100%; }\n\n.timepicker-ui-tips-wrapper {\n height: 100%;\n width: 100%; }\n\n.timepicker-ui-tips-wrapper-24h {\n position: absolute;\n height: 160px;\n width: 160px;\n z-index: 0;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n border-radius: 50%; }\n .timepicker-ui-tips-wrapper-24h-disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24 {\n position: absolute;\n width: 32px;\n height: 32px;\n text-align: center;\n cursor: pointer;\n font-size: 17.6px;\n display: flex;\n justify-content: center;\n align-items: center;\n touch-action: none;\n user-select: none; }\n .timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span, .timepicker-ui-hour-time-24 span {\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-hour-time-12 {\n display: block;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {\n display: flex;\n margin-right: 10px;\n height: 100%;\n justify-content: center;\n align-items: center; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-time {\n margin-right: 0;\n height: auto; } }\n\n.timepicker-ui-wrapper-time-24h {\n margin-right: 0px; }\n\n.timepicker-ui-wrapper-time.mobile {\n position: relative; }\n\n.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 51.2px;\n background-color: #e4e4e4;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s ease;\n outline: none;\n border: 2px solid transparent;\n padding: 10px;\n width: 96px;\n text-align: center; }\n .timepicker-ui-hour:focus-visible, .timepicker-ui-minutes:focus-visible, .timepicker-ui-hour.mobile:focus-visible, .timepicker-ui-minutes.mobile:focus-visible {\n outline: auto; }\n .timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {\n color: #6200ee;\n background-color: #ece0fd; }\n .timepicker-ui-hour::-webkit-outer-spin-button, .timepicker-ui-hour::-webkit-inner-spin-button, .timepicker-ui-minutes::-webkit-outer-spin-button, .timepicker-ui-minutes::-webkit-inner-spin-button, .timepicker-ui-hour.mobile::-webkit-outer-spin-button, .timepicker-ui-hour.mobile::-webkit-inner-spin-button, .timepicker-ui-minutes.mobile::-webkit-outer-spin-button, .timepicker-ui-minutes.mobile::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important; }\n .timepicker-ui-hour[type='number'], .timepicker-ui-minutes[type='number'], .timepicker-ui-hour.mobile[type='number'], .timepicker-ui-minutes.mobile[type='number'] {\n -moz-appearance: textfield !important; }\n\n.timepicker-ui-hour, .timepicker-ui-minutes {\n outline: none;\n border: 2px solid transparent; }\n .timepicker-ui-hour[contenteditable='true']:focus, .timepicker-ui-hour[contenteditable='true']:active, .timepicker-ui-minutes[contenteditable='true']:focus, .timepicker-ui-minutes[contenteditable='true']:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all; }\n\n.timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n height: 70px;\n outline: none;\n border: 2px solid transparent; }\n .timepicker-ui-hour.mobile[contenteditable='true']:focus, .timepicker-ui-hour.mobile[contenteditable='true']:active, .timepicker-ui-minutes.mobile[contenteditable='true']:focus, .timepicker-ui-minutes.mobile[contenteditable='true']:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all; }\n\n.timepicker-ui-dots, .timepicker-ui-dots.mobile {\n padding-left: 5px;\n padding-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 57.6px;\n user-select: none;\n touch-action: none; }\n\n.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {\n display: flex;\n flex-direction: column;\n height: 80px;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 500;\n color: #787878; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-type-time {\n flex-direction: row;\n width: 100%; } }\n\n.timepicker-ui-wrapper-type-time.mobile {\n height: 70px; }\n\n.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid #d6d6d6;\n transition: all 0.3s ease;\n cursor: pointer;\n width: 100%;\n height: 100%; }\n .timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {\n color: #6200ee;\n background-color: #ece0fd; }\n .timepicker-ui-am.active, .timepicker-ui-pm.active, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile.active {\n pointer-events: none; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am, .timepicker-ui-pm {\n width: 50%;\n height: 44px; } }\n\n.timepicker-ui-am, .timepicker-ui-am.mobile {\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-width: calc(0.7504px / 2); }\n\n.timepicker-ui-am.mobile {\n border-bottom-left-radius: 0; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am {\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n border-top-right-radius: 0;\n border-top-width: 1.5008px;\n border-right-width: calc(0.7504px / 2); } }\n\n.timepicker-ui-pm, .timepicker-ui-pm.mobile {\n border-bottom-left-radius: 7px;\n border-bottom-right-radius: 7px;\n border-top-width: calc(0.7504px / 2);\n width: 54px; }\n\n.timepicker-ui-pm.mobile {\n border-top-right-radius: 0; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-pm {\n border-bottom-right-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-width: 1.5008px;\n border-left-width: calc(0.7504px / 2);\n width: 50%;\n height: 44px; } }\n\n.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {\n color: #6200ee;\n text-transform: uppercase;\n border-radius: 7px;\n background-color: transparent;\n text-align: center;\n font-size: 15.2px;\n padding-top: 9px;\n padding-bottom: 9px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer; }\n .timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {\n background-color: #d6d6d6; }\n\n.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {\n width: 72px;\n margin-right: 4px; }\n\n.timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {\n width: 64px;\n margin-left: 4px; }\n\n.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n width: 44px;\n height: 44px;\n position: relative;\n bottom: -26px;\n left: 12px;\n transition: all 0.3s ease; }\n .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon,\n .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon,\n .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #d6d6d6;\n border-radius: 7px; }\n\n.timepicker-ui-keyboard-icon-wrapper.mobile {\n bottom: -5px; }\n\n.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {\n padding: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #4e545a;\n height: 44px;\n width: 44px; }\n .timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {\n color: #6200ee; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n position: absolute;\n bottom: 8px; } }\n\n.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {\n margin-right: 8px;\n position: relative;\n bottom: -14px; }\n\n.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {\n position: absolute;\n bottom: 6px;\n font-size: 12.8px;\n color: #a9a9a9;\n left: 0; }\n\n.timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {\n left: 120px; }\n\n.timepicker-ui-clock-hand {\n position: absolute;\n background-color: #6200ee;\n bottom: 50%;\n height: 40%;\n left: calc(50% - 1px);\n transform-origin: center bottom 0;\n width: 2px; }\n\n.timepicker-ui-clock-hand-24h {\n height: 23%; }\n\n.timepicker-ui-circle-hand {\n position: absolute;\n transform: translate(-48%, -50%);\n width: 4px;\n height: 4px;\n border-radius: 100%;\n transition: all 0.2s ease;\n height: 46px;\n width: 46px;\n box-sizing: border-box !important;\n background-color: #6200ee; }\n .timepicker-ui-circle-hand.small-circle {\n height: 36px;\n width: 36px;\n box-sizing: border-box !important; }\n\n.timepicker-ui-circle-hand-24h {\n transform: translate(-50%, -50%);\n height: 32px;\n width: 32px;\n top: 4px;\n left: 1px; }\n\n.timepicker-ui-value-tips, .timepicker-ui-value-tips-24h {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s ease color;\n border-radius: 50%;\n outline: none; }\n .timepicker-ui-value-tips:focus, .timepicker-ui-value-tips-24h:focus {\n background: rgba(143, 143, 143, 0.315);\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }\n .timepicker-ui-value-tips.active, .timepicker-ui-value-tips-24h.active {\n color: #fff;\n transition: none; }\n\n.timepicker-ui-clock-animation {\n animation: clockanimation 350ms linear; }\n\n.timepicker-ui-open-element.disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-tips-animation {\n transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n\n.timepicker-ui-tips-disabled {\n color: rgba(156, 155, 155, 0.6);\n pointer-events: none; }\n\n.opacity {\n transition: opacity 0.15s linear; }\n .opacity.show {\n opacity: 1; }\n\n.invalid-value {\n border-color: #d50000 !important;\n color: #d50000 !important; }\n .invalid-value:hover, .invalid-value:focus, .invalid-value:active {\n border-color: #d50000 !important;\n color: #d50000 !important; }\n\n@keyframes clockanimation {\n 0% {\n opacity: 0;\n transform: scale(0.8); }\n to {\n opacity: 1;\n transform: scale(1); } }\n\n.timepicker-ui-invalid-format {\n border: 2px solid red;\n color: red; }\n\n.timepicker-ui-invalid-text {\n color: red; }\n");h(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n\n.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {\n border-radius: 0;\n background-color: #4e0d3a;\n color: #fff; }\n .timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {\n color: #e5e5e5; }\n\n.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {\n background-color: #71135c; }\n\n.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {\n background-color: #71135c;\n border-radius: 0;\n color: #fff; }\n .timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n .timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {\n background-color: #f7363e; }\n\n.timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:active {\n border-color: #fff;\n outline-color: #fff; }\n\n.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {\n color: #fff; }\n\n.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {\n color: #fff; }\n\n.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {\n border: 0.125rem solid transparent;\n border-radius: 0;\n background-color: #71135c; }\n\n.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {\n color: #fff;\n background-color: #f7363e; }\n\n.timepicker-ui-am.crane-straight.radius {\n border-top-left-radius: 1.25rem;\n border-top-right-radius: 1.25rem; }\n\n.timepicker-ui-pm.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-bottom-right-radius: 1.25rem; }\n\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-am.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; } }\n\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-pm.crane-straight.radius {\n border-bottom-right-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0; } }\n\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-am.mobile.crane-straight.radius {\n border-bottom-left-radius: 0rem;\n border-bottom-right-radius: 0rem; } }\n\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-pm.mobile.crane-straight.radius {\n border-top-left-radius: 0rem;\n border-top-right-radius: 0rem; } }\n\n.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {\n color: #fff;\n border-radius: 0rem; }\n .timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {\n border-radius: 0.8125rem; }\n\n.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {\n color: #fff; }\n .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #f7363e;\n color: #fff;\n border-radius: 0; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {\n border-radius: 0.875rem; }\n\n.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {\n color: #fff; }\n .timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-clock-hand.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-circle-hand.crane-straight {\n border-color: #f7363e;\n background-color: #f7363e; }\n\n.timepicker-ui-value-tips.crane-straight {\n color: #fff; }\n");var m=":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n";h(m);const v={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'keyboard',iconTemplateMobile:'schedule',incrementHours:1,incrementMinutes:1,minuteMobileLabel:"Minute",mobile:!1,okLabel:"OK",pmLabel:"PM",timeLabel:"Select Time",switchToMinutesAfterSelectHour:!1,theme:"basic",clockType:"12h",disabledTime:void 0,currentTime:void 0,focusTrap:!0},b="mousedown mouseup mousemove mouseleave mouseover touchstart touchmove touchend",k=["00","13","14","15","16","17","18","19","20","21","22","23"],g=["12","1","2","3","4","5","6","7","8","9","10","11"],y=["00","05","10","15","20","25","30","35","40","45","50","55"];class _{constructor(e){this.clean=()=>{var e,i;const t=null===(e=this.tipsWrapper)||void 0===e?void 0:e.querySelectorAll("span.timepicker-ui-hour-time-12"),n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-minutes-time");this._removeClasses(t),this._removeClasses(n)},this.create=()=>{var e;if(!(this.clockFace&&this.array&&this.classToAdd&&this.tipsWrapper))return;const i=(this.clockFace.offsetWidth-32)/2,n=(this.clockFace.offsetHeight-32)/2,r=i-9;this.tipsWrapper.innerHTML="",null===(e=this.array)||void 0===e||e.forEach(((e,s)=>{var o,a,l,u,d,c;const p=s*(360/this.array.length)*(Math.PI/180);const h=document.createElement("span"),m=document.createElement("span");m.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(o=this.disabledTime)||void 0===o?void 0:o.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled")),this.hour===this.disabledTime.removedStartedHour&&(null===(l=null===(a=this.disabledTime)||void 0===a?void 0:a.startMinutes)||void 0===l?void 0:l.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(d=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===d?void 0:d.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1)),"24h"===this.clockType?(m.classList.add("timepicker-ui-value-tips-24h"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)):(m.classList.add("timepicker-ui-value-tips"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)),h.classList.add(this.classToAdd),"crane-straight"===this.theme&&(h.classList.add("crane-straight"),m.classList.add("crane-straight")),h.style.left=i+Math.sin(p)*r-h.offsetWidth+"px",h.style.bottom=n+Math.cos(p)*r-h.offsetHeight+"px",h.appendChild(m),null===(c=this.tipsWrapper)||void 0===c||c.appendChild(h)}))},this.updateDisable=e=>{var i,t;const n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-hour-time-12"),r=null===(t=this.tipsWrapper)||void 0===t?void 0:t.querySelectorAll("span.timepicker-ui-minutes-time");if(this._removeClasses(n),this._removeClasses(r),(null==e?void 0:e.hoursToUpdate)&&n&&this._addClassesWithIncludes(n,e.hoursToUpdate),(null==e?void 0:e.minutesToUpdate)&&r){const{actualHour:i,removedEndHour:t,removedStartedHour:n,startMinutes:s,endMinutes:o}=e.minutesToUpdate;t===i&&o.length>0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)0?this._addClassesWithIncludes(r,s):Number(i)>Number(n)&&Number(i)=Number(i[0])&&this._addClasses(r),0===o.length&&a.length>1&&Number(d)>=Number(l)&&this._addClasses(r),o.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,o):Number(d)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&o.length>0&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,o):Number(d)>Number(l)&&this._addClasses(r))),"PM"===s&&(d0&&Number(d)===u-1&&this._addClassesWithIncludes(r,a)))}},this._removeClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.remove("timepicker-ui-tips-disabled"),i[0].classList.remove("timepicker-ui-tips-disabled"),i[0].tabIndex=0}))},this._addClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.add("timepicker-ui-tips-disabled"),i[0].classList.add("timepicker-ui-tips-disabled"),i[0].tabIndex=-1}))},this._addClassesWithIncludes=(e,i)=>{null==e||e.forEach((({classList:e,children:t,textContent:n})=>{(null==i?void 0:i.includes(n))&&(e.add("timepicker-ui-tips-disabled"),t[0].classList.add("timepicker-ui-tips-disabled"),t[0].tabIndex=-1)}))},this.array=null==e?void 0:e.array,this.classToAdd=null==e?void 0:e.classToAdd,this.clockFace=null==e?void 0:e.clockFace,this.tipsWrapper=null==e?void 0:e.tipsWrapper,this.theme=null==e?void 0:e.theme,this.clockType=null==e?void 0:e.clockType,this.disabledTime=null==e?void 0:e.disabledTime,this.hour=null==e?void 0:e.hour}}const T=(e,i)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout((()=>{e(...n)}),i)}};class f{constructor(o,a){var h,f,x;this.create=()=>{this._updateInputValueWithCurrentTimeOnStart(),this._checkDisabledValuesOnStart(),this._setTimepickerClassToElement(),this._setInputClassToInputElement(),this._setDataOpenToInputIfDosentExistInWrapper(),this._setClassTopOpenElement(),this._handleOpenOnEnterFocus(),this._handleOpenOnClick(),this._getDisableTime()},this.open=e=>{this.create(),this._eventsBundle(),l(e)},this.close=T(((...e)=>{var i;if(e.length>2||!this.modalElement)return;const[t]=e.filter((e=>"boolean"==typeof e)),[n]=e.filter((e=>"function"==typeof e));t&&(this._handleOkButton(),null===(i=this.okButton)||void 0===i||i.click()),this._isTouchMouseMove=!1,b.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),document.removeEventListener("keypress",this._handleEscClick),this.wrapper.removeEventListener("keydown",this._focusTrapHandler),this._options.enableSwitchIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._removeAnimationToClose(),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{var e;this._options.focusInputAfterCloseModal&&(null===(e=this.input)||void 0===e||e.focus()),null!==this.modalElement&&(this.modalElement.remove(),this._isModalRemove=!0)}),300),l(n)}),300),this.destroy=e=>{b.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),this._options.enableSwitchIcon&&this.keyboardClockIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._cloned=this._element.cloneNode(!0),this._element.after(this._cloned),this._element.remove(),this._element=null,null===this._element&&l(e),this._element=this._cloned},this.update=(e,i)=>{this._options=Object.assign(Object.assign({},this._options),e.options),this._checkMobileOption(),e.create&&this.create(),l(i)},this._preventClockTypeByCurrentTime=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.preventClockType)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{currentTime:e,clockType:i}=this._options,{type:t}=d(this.input,i,e,!0);this._options.clockType=t?"12h":"24h"}},this._updateInputValueWithCurrentTimeOnStart=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.updateInput)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{hour:e,minutes:i,type:t}=d(this.input,this._options.clockType,this._options.currentTime);this.input.value=t?`${e}:${i} ${t}`:`${e}:${i}`}},this._setTheme=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div"),n=[...null===(i=this.modalElement)||void 0===i?void 0:i.querySelectorAll("input"),...t],{theme:r}=this._options;"crane-straight"===r?n.forEach((e=>e.classList.add("crane-straight"))):"crane-radius"===r&&n.forEach((e=>e.classList.add("crane-straight","radius")))},this._setInputClassToInputElement=()=>{var e;t(this.input,"timepicker-ui-input")||null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-input")},this._setDataOpenToInputIfDosentExistInWrapper=()=>{var e;null===this.openElementData&&(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"))},this._setClassTopOpenElement=()=>{this.openElement.forEach((e=>null==e?void 0:e.classList.add("timepicker-ui-open-element")))},this._removeBackdrop=()=>{var e;this._options.backdrop||(null===(e=this.modalElement)||void 0===e||e.classList.add("removed"),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))))},this._setNormalizeClass=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div");null===(i=this.modalElement)||void 0===i||i.classList.add("timepicker-ui-normalize"),null==t||t.forEach((e=>e.classList.add("timepicker-ui-normalize")))},this._setFlexEndToFooterIfNoKeyboardIcon=()=>{!this._options.enableSwitchIcon&&this.footer&&(this.footer.style.justifyContent="flex-end")},this._eventsBundle=()=>{var e,i,t,n,r,s,o,a,l,u,d,c,p;if(this._isModalRemove){if(this._handleEscClick(),this._setErrorHandler(),this._removeErrorHandler(),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))),null===(e=this.input)||void 0===e||e.blur(),this._setScrollbarOrNot(),this._setModalTemplate(),this._setNormalizeClass(),this._removeBackdrop(),this._setBgColorToCirleWithHourTips(),this._setOnStartCSSClassesIfClockType24h(),this._setClassActiveToHourOnOpen(),null!==this.clockFace){const e=new _({array:g,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(s=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===s?void 0:s.hours,clockType:"12h",hour:this.hour.value});if(e.create(),"24h"===this._options.clockType){new _({array:k,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:(null===(a=null===(o=this._disabledTime)||void 0===o?void 0:o.value)||void 0===a?void 0:a.isInterval)?null===(l=this._disabledTime)||void 0===l?void 0:l.value.rangeArrHour:null===(d=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===d?void 0:d.hours,hour:this.hour.value}).create()}else(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.endType)?setTimeout((()=>{var i,t,n,r,s,o,a,l;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)&&e.updateDisable({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour,minutesToUpdate:{endMinutes:null===(s=this._disabledTime)||void 0===s?void 0:s.value.endMinutes,removedEndHour:null===(o=this._disabledTime)||void 0===o?void 0:o.value.removedEndHour,removedStartedHour:null===(a=this._disabledTime)||void 0===a?void 0:a.value.removedStartedHour,actualHour:this.hour.value,startMinutes:null===(l=this._disabledTime)||void 0===l?void 0:l.value.startMinutes}})}),300):setTimeout((()=>{var i,t,n;e.updateDisable({minutesToUpdate:{actualHour:this.hour.value,pmHours:null===(i=this._disabledTime)||void 0===i?void 0:i.value.pmHours,amHours:null===(t=this._disabledTime)||void 0===t?void 0:t.value.amHours,activeMode:null===(n=this.activeTypeMode)||void 0===n?void 0:n.textContent}})}),300),e.updateDisable()}this._setFlexEndToFooterIfNoKeyboardIcon(),setTimeout((()=>{this._setTheme()}),0),this._setAnimationToOpen(),this._getInputValueOnOpenAndSet(),this._toggleClassActiveToValueTips(this.hour.value),this._isMobileView||(this._setTransformToCircleWithSwitchesHour(this.hour.value),this._handleAnimationClock()),this._handleMinutesEvents(),this._handleHourEvents(),"24h"!==this._options.clockType&&(this._handleAmClick(),this._handlePmClick()),this.clockFace&&this._handleMoveHand(),this._handleCancelButton(),this._handleOkButton(),this.modalElement&&(this._setShowClassToBackdrop(),this._handleBackdropClick()),this._handleIconChangeView(),this._handleClickOnHourMobile(),this._options.focusTrap&&this._focusTrapHandler()}},this._handleOpenOnClick=()=>{this.openElement.forEach((e=>this._clickTouchEvents.forEach((i=>null==e?void 0:e.addEventListener(i,(()=>this._eventsBundle()))))))},this._getInputValueOnOpenAndSet=()=>{var e,i;const t=d(this.input,this._options.clockType,this._options.currentTime);if(void 0===t)return this.hour.value="12",this.minutes.value="00",n(this._element,"show",{hour:this.hour.value,minutes:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),void("24h"!==this._options.clockType&&this.AM.classList.add("active"));let[r,s,o]=this.input.value.split(":").join(" ").split(" ");0===this.input.value.length&&(r=t.hour,s=t.minutes,o=t.type),this.hour.value=r,this.minutes.value=s;const a=document.querySelector(`[data-type='${o}']`);"24h"!==this._options.clockType&&a&&a.classList.add("active"),n(this._element,"show",Object.assign(Object.assign({},t),{type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}))},this._handleCancelButton=()=>{this._clickTouchEvents.forEach((e=>{this.cancelButton.addEventListener(e,(()=>{var e;const i=d(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},i),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))}))},this._handleOkButton=()=>{this._clickTouchEvents.forEach((e=>{var i;null===(i=this.okButton)||void 0===i||i.addEventListener(e,(()=>{var e,i,t;const{clockType:r,disabledTime:s}=this._options,o=c(this.hour.value,"hour",r),a=c(this.minutes.value,"minutes",r);let l;const d=p(this.hour.value,"hour",r,null==s?void 0:s.hours),h=p(this.minutes.value,"minutes",r,null==s?void 0:s.minutes);if((null==s?void 0:s.interval)&&(l=((e,i,t,n)=>{const r=t?u(`${e}:${i} ${t}`.trim()):`${e}:${i}`.trim();let s,o;if(t){const[e,i]=n.trim().split("-").map((e=>e.trim()));s=u(e),o=u(i)}else{const[e,i]=n.trim().split("-"),t=e=>e.trim().split(":").map((e=>Number(e)<=9?`0${Number(e)}`:e)).join(":");s=t(e),o=t(i)}return ro})(this.hour.value,this.minutes.value,null===(e=this.activeTypeMode)||void 0===e?void 0:e.textContent,s.interval)),!1===l||!1===o||!1===a||!1===d||!1===h)return!1!==l&&a&&h||this.minutes.classList.add("invalid-value"),void(!1!==l&&o&&d||this.hour.classList.add("invalid-value"));this.input.value=`${this.hour.value}:${this.minutes.value} ${"24h"===this._options.clockType?"":null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type}`.trimEnd(),n(this._element,"accept",{hour:this.hour.value,minutes:this.minutes.value,type:null===(t=this.activeTypeMode)||void 0===t?void 0:t.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),this.close()}))}))},this._setShowClassToBackdrop=()=>{this._options.backdrop&&setTimeout((()=>{this.modalElement.classList.add("show")}),300)},this._handleBackdropClick=()=>{var e;null===(e=this.modalElement)||void 0===e||e.addEventListener("click",(e=>{var i;const r=e.target;if(!t(r,"timepicker-ui-modal"))return;const s=d(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},s),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))},this._setBgColorToCirleWithHourTips=()=>{if(!this._options)return;const{mobile:e,theme:i}=this._options;e||null===this.circle||(this.circle.style.backgroundColor="crane-straight"===i||"crane-radius"===i?m.cranered400:m.purple)},this._setBgColorToCircleWithMinutesTips=()=>{const{theme:e}=this._options;this.minutes.value&&y.includes(this.minutes.value)&&(this.circle.style.backgroundColor="crane-straight"===e||"crane-radius"===e?m.cranered400:m.purple,this.circle.classList.remove("small-circle"))},this._removeBgColorToCirleWithMinutesTips=()=>{this.minutes.value&&y.includes(this.minutes.value)||(this.circle.style.backgroundColor="",this.circle.classList.add("small-circle"))},this._setTimepickerClassToElement=()=>{var e;null===(e=this._element)||void 0===e||e.classList.add("timepicker-ui")},this._setClassActiveToHourOnOpen=()=>{var e;this._options.mobile||this._isMobileView||null===(e=this.hour)||void 0===e||e.classList.add("active")},this._setMinutesToClock=e=>{var i,t,n,r,s;null!==this.clockFace&&this._setTransformToCircleWithSwitchesMinutes(e),this._removeBgColorToCirleWithMinutesTips();const o=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.minutes)?null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.minutes:null===(s=this._disabledTime)||void 0===s?void 0:s.value,a=new _({array:y,classToAdd:"timepicker-ui-minutes-time",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:o,hour:this.hour.value,clockType:this._options.clockType});a.create(),"12h"===this._options.clockType&&a.updateDisable(),this._toggleClassActiveToValueTips(e),"24h"===this._options.clockType&&(this.tipsWrapperFor24h.innerHTML="")},this._setHoursToClock=e=>{var i,t,n,r,s;if(null!==this.clockFace){this._setTransformToCircleWithSwitchesHour(e),this._setBgColorToCirleWithHourTips();const o=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(s=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===s?void 0:s.hours,a=new _({array:g,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:o,clockType:"12h",hour:this.hour.value});a.create(),"24h"===this._options.clockType?new _({array:k,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:o,hour:this.hour.value}).create():a.updateDisable(),this._toggleClassActiveToValueTips(e)}},this._setTransformToCircleWithSwitchesHour=e=>{const i=Number(e);let t=i>12?30*i-360:30*i;360===t&&(t=0),t>360||(this.clockHand.style.transform=`rotateZ(${t}deg)`)},this._setTransformToCircleWithSwitchesMinutes=e=>{const i=6*Number(e);i>360||(this.clockHand.style.transform=`rotateZ(${i}deg)`)},this._handleAmClick=()=>{this._clickTouchEvents.forEach((e=>{this.AM.addEventListener(e,(e=>{var i,r,s,o;if(e.target.classList.add("active"),this.PM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300),e.updateDisable()}n(this._element,"selectamtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(o=this.activeTypeMode)||void 0===o?void 0:o.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handlePmClick=()=>{this._clickTouchEvents.forEach((e=>{this.PM.addEventListener(e,(e=>{var i,r,s,o;if(e.target.classList.add("active"),this.AM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectpmtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(o=this.activeTypeMode)||void 0===o?void 0:o.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handleAnimationClock=()=>{this._options.animation&&setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.add("timepicker-ui-clock-animation"),setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.remove("timepicker-ui-clock-animation")}),600)}),150)},this._handleAnimationSwitchTipsMode=()=>{this.clockHand.classList.add("timepicker-ui-tips-animation"),setTimeout((()=>{var e;null===(e=this.clockHand)||void 0===e||e.classList.remove("timepicker-ui-tips-animation")}),401)},this._handleClasses24h=(e,i)=>{var t;const n=e.target;this.hourTips&&"24h"===this._options.clockType&&(Number(n.textContent)>12||0===Number(n.textContent)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(t=this.tipsWrapperFor24h)||void 0===t||t.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),n&&i&&(i.value=n.value.replace(/\D+/g,""),i.click())},this._handleHourEvents=()=>{var e,i;this._inputEvents.forEach((e=>{var i;null===(i=this.hour)||void 0===i||i.addEventListener(e,(e=>{var i,r,s,o,a;const l=e.target;if(null!==this.clockFace&&this._handleAnimationSwitchTipsMode(),"24h"===this._options.clockType&&(Number(l.value)>12||0===Number(l.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),this._setHoursToClock(l.value),l.classList.add("active"),this.minutes.classList.remove("active"),"12h"===this._options.clockType&&(null===(r=this._options.disabledTime)||void 0===r?void 0:r.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(s=this._disabledTime)||void 0===s?void 0:s.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selecthourmode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(a=this.activeTypeMode)||void 0===a?void 0:a.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),null!==this.clockFace&&this.circle.classList.remove("small-circle")}))})),null===(e=this.hour)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.hour))),null===(i=this.hour)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.hour)))},this._handleMinutesEvents=()=>{var e,i;this._inputEvents.forEach((e=>{this.minutes.addEventListener(e,(e=>{var i,r,s,o,a,l;const u=e.target;if(null!==this.clockFace&&(this._handleAnimationSwitchTipsMode(),this._setMinutesToClock(u.value)),"24h"===this._options.clockType&&(this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.add("timepicker-ui-tips-wrapper-24h-disabled")),u.classList.add("active"),null===(r=this.hour)||void 0===r||r.classList.remove("active"),"12h"===this._options.clockType&&(null===(s=this._options.disabledTime)||void 0===s?void 0:s.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(o=this._disabledTime)||void 0===o?void 0:o.value.startType)===(null===(a=this._disabledTime)||void 0===a?void 0:a.value.endType)?setTimeout((()=>{var i,t,n;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectminutemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(l=this.activeTypeMode)||void 0===l?void 0:l.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))})),null===(e=this.minutes)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.minutes))),null===(i=this.minutes)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.minutes)))},this._handleEventToMoveHand=e=>{var o,a,l,u,c,p,h,m,v,b,k,g,y,_,T,f,x,w,M,C,E,H,L,S,N,$,A,O,I,W,j,F,P,D,q,B,V,z,U,R,Y,Z,K,X,J,G,Q,ee,ie,te,ne,re,se,oe,ae,le,ue,de,ce,pe,he,me;const{target:ve,type:be,touches:ke}=e,ge=ve,{incrementMinutes:ye,incrementHours:_e,switchToMinutesAfterSelectHour:Te}=this._options;if(!i(e,this.clockFace))return;const fe=i(e,this.clockFace),xe=this.clockFace.offsetWidth/2;let we=fe&&Math.atan2(fe.y-xe,fe.x-xe);if(r()){const t=i(e,this.clockFace,!0);if(!t)return;we=Math.atan2(t.y-xe,t.x-xe)}if("mouseup"===be||"touchend"===be)return this._isTouchMouseMove=!1,void(Te&&(t(ge,"timepicker-ui-value-tips")||t(ge,"timepicker-ui-value-tips-24h")||t(ge,"timepicker-ui-tips-wrapper"))&&this.minutes.click());if("mousedown"!==be&&"mousemove"!==be&&"touchmove"!==be&&"touchstart"!==be||"mousedown"!==be&&"touchstart"!==be&&"touchmove"!==be||((t(ge,"timepicker-ui-clock-face")||t(ge,"timepicker-ui-circle-hand")||t(ge,"timepicker-ui-hour-time-12")||t(ge,"timepicker-ui-minutes-time")||t(ge,"timepicker-ui-clock-hand")||t(ge,"timepicker-ui-value-tips")||t(ge,"timepicker-ui-value-tips-24h")||t(ge,"timepicker-ui-tips-wrapper")||t(ge,"timepicker-ui-tips-wrapper-24h"))&&!t(ge,"timepicker-ui-tips-disabled")?(e.preventDefault(),this._isTouchMouseMove=!0):this._isTouchMouseMove=!1),!this._isTouchMouseMove)return;if(null!==this.minutesTips){this.minutes.classList.add("active");let e,i=we&&s(Math.trunc(180*we/Math.PI)+90,ye,6);if(void 0===i)return;if(i<0?(e=Math.round(360+i/6)%60,i=360+6*Math.round(i/6)):(e=Math.round(i/6)%60,i=6*Math.round(i/6)),null===(o=this._disabledTime)||void 0===o?void 0:o.value.isInterval)if((null===(c=this._disabledTime)||void 0===c?void 0:c.value.endType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.startType)){if((null===(v=null===(m=null===(h=this._disabledTime)||void 0===h?void 0:h.value)||void 0===m?void 0:m.endMinutes)||void 0===v?void 0:v.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(k=null===(b=this._disabledTime)||void 0===b?void 0:b.value)||void 0===k?void 0:k.removedEndHour)&&(null===(g=this._disabledTime)||void 0===g?void 0:g.value.endType)===(null===(y=this.activeTypeMode)||void 0===y?void 0:y.textContent))return;if((null===(f=null===(T=null===(_=this._disabledTime)||void 0===_?void 0:_.value)||void 0===T?void 0:T.startMinutes)||void 0===f?void 0:f.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(w=null===(x=this._disabledTime)||void 0===x?void 0:x.value)||void 0===w?void 0:w.removedStartedHour)&&(null===(M=this._disabledTime)||void 0===M?void 0:M.value.startType)===(null===(C=this.activeTypeMode)||void 0===C?void 0:C.textContent))return}else{if((null===(E=this.activeTypeMode)||void 0===E?void 0:E.textContent)===(null===(H=this._disabledTime)||void 0===H?void 0:H.value.endType)&&((null===(N=null===(S=null===(L=this._disabledTime)||void 0===L?void 0:L.value)||void 0===S?void 0:S.endMinutes)||void 0===N?void 0:N.includes(e<=9?`0${e}`:`${e}`))&&(null===($=this._disabledTime)||void 0===$?void 0:$.value.removedPmHour)===this.hour.value||(null===(A=this._disabledTime)||void 0===A?void 0:A.value.pmHours.map(Number).includes(Number(this.hour.value)))))return;if((null===(O=this.activeTypeMode)||void 0===O?void 0:O.textContent)===(null===(I=this._disabledTime)||void 0===I?void 0:I.value.startType)&&((null===(F=null===(j=null===(W=this._disabledTime)||void 0===W?void 0:W.value)||void 0===j?void 0:j.startMinutes)||void 0===F?void 0:F.includes(e<=9?`0${e}`:`${e}`))&&(null===(P=this._disabledTime)||void 0===P?void 0:P.value.removedAmHour)===this.hour.value||(null===(D=this._disabledTime)||void 0===D?void 0:D.value.amHours.map(Number).includes(Number(this.hour.value)))))return}else if(null===(u=null===(l=null===(a=this._disabledTime)||void 0===a?void 0:a.value)||void 0===l?void 0:l.minutes)||void 0===u?void 0:u.includes(e<=9?`0${e}`:`${e}`))return;this.minutes.value=e>=10?`${e}`:`0${e}`,this.clockHand.style.transform=`rotateZ(${i}deg)`,this._degreesMinutes=i,this._toggleClassActiveToValueTips(this.minutes.value),this._removeBgColorToCirleWithMinutesTips(),this._setBgColorToCircleWithMinutesTips(),n(this._element,"update",Object.assign(Object.assign({},d(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:be,type:null===(q=this.activeTypeMode)||void 0===q?void 0:q.dataset.type}))}const Me=ke?ke[0]:void 0,Ce=ke&&Me?document.elementFromPoint(Me.clientX,Me.clientY):null;if(null!==this.hourTips){if(null===(B=this.hour)||void 0===B||B.classList.add("active"),!t(Ce||ge,"timepicker-ui-value-tips-24h")&&!t(Ce||ge,"timepicker-ui-tips-disabled")&&(t(Ce||ge,"timepicker-ui-value-tips")||t(Ce||ge,"timepicker-ui-tips-wrapper"))){let e,i=we&&s(Math.trunc(180*we/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%12,i=360+i):(e=Math.round(i/30)%12,(0===e||e>12)&&(e=12));const t=(null===(V=this._disabledTime)||void 0===V?void 0:V.value.isInterval)?"rangeArrHour":"hours";if((null===(z=this._disabledTime)||void 0===z?void 0:z.value.endType)===(null===(R=null===(U=this._disabledTime)||void 0===U?void 0:U.value)||void 0===R?void 0:R.startType)){if("string"==typeof(null===(Z=null===(Y=this._disabledTime)||void 0===Y?void 0:Y.value)||void 0===Z?void 0:Z.endType)){if((null===(X=null===(K=this._disabledTime)||void 0===K?void 0:K.value)||void 0===X?void 0:X.endType)===(null===(J=this.activeTypeMode)||void 0===J?void 0:J.textContent)&&(null===(Q=null===(G=this._disabledTime)||void 0===G?void 0:G.value)||void 0===Q?void 0:Q.startType)===(null===(ee=this.activeTypeMode)||void 0===ee?void 0:ee.textContent)&&(null===(te=null===(ie=this._disabledTime)||void 0===ie?void 0:ie.value[t])||void 0===te?void 0:te.includes(e.toString())))return}else if(null===(re=null===(ne=this._disabledTime)||void 0===ne?void 0:ne.value[t])||void 0===re?void 0:re.includes(e.toString()))return}else{if((null===(se=this._disabledTime)||void 0===se?void 0:se.value.startType)===(null===(oe=this.activeTypeMode)||void 0===oe?void 0:oe.textContent)&&(null===(ae=this._disabledTime)||void 0===ae?void 0:ae.value.amHours.includes(e.toString())))return;if((null===(le=this._disabledTime)||void 0===le?void 0:le.value.endType)===(null===(ue=this.activeTypeMode)||void 0===ue?void 0:ue.textContent)&&(null===(de=this._disabledTime)||void 0===de?void 0:de.value.pmHours.includes(e.toString())))return}this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=e>9?`${e}`:`0${e}`,this._removeCircleClockClasses24h(),this._toggleClassActiveToValueTips(e)}if((t(Ce||ge,"timepicker-ui-value-tips-24h")||t(Ce||ge,"timepicker-ui-tips-wrapper-24h"))&&!t(Ce||ge,"timepicker-ui-tips-disabled")){let e,i=we&&s(Math.trunc(180*we/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%24,i=360+i):(e=Math.round(i/30)+12,12===e&&(e="00"));const t=(null===(ce=this._disabledTime)||void 0===ce?void 0:ce.value.isInterval)?"rangeArrHour":"hours";if(null===(he=null===(pe=this._disabledTime)||void 0===pe?void 0:pe.value[t])||void 0===he?void 0:he.includes(e.toString()))return;this._setCircleClockClasses24h(),this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=`${e}`,this._toggleClassActiveToValueTips(e)}n(this._element,"update",Object.assign(Object.assign({},d(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:be,type:null===(me=this.activeTypeMode)||void 0===me?void 0:me.dataset.type}))}},this._toggleClassActiveToValueTips=e=>{const i=this.allValueTips.find((i=>Number(i.innerText)===Number(e)));this.allValueTips.map((e=>e.classList.remove("active"))),void 0!==i&&i.classList.add("active")},this._handleMoveHand=()=>{this._options.mobile||this._isMobileView||b.split(" ").forEach((e=>{"touchstart"===e||"touchmove"===e||"touchend"===e?document.addEventListener(e,this._mutliEventsMoveHandler,{passive:!1}):document.addEventListener(e,this._mutliEventsMoveHandler,!1)}))},this._setModalTemplate=()=>{if(!this._options)return;const{appendModalSelector:e}=this._options;if(""!==e&&e){const i=null===document||void 0===document?void 0:document.querySelector(e);null==i||i.insertAdjacentHTML("beforeend",this.modalTemplate)}else document.body.insertAdjacentHTML("afterend",this.modalTemplate)},this._setScrollbarOrNot=()=>{this._options.enableScrollbar?setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400):(document.body.style.paddingRight=`${(()=>{const e=document.createElement("div");e.className="timepicker-ui-measure",document.body.appendChild(e);const i=e.getBoundingClientRect().width-e.clientWidth;return document.body.removeChild(e),i})()}px`,document.body.style.overflowY="hidden")},this._setAnimationToOpen=()=>{var e,i;null===(e=this.modalElement)||void 0===e||e.classList.add("opacity"),this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.add("show")}),150):null===(i=this.modalElement)||void 0===i||i.classList.add("show")},this._removeAnimationToClose=()=>{var e;this.modalElement&&(this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.remove("show")}),150):null===(e=this.modalElement)||void 0===e||e.classList.remove("show"))},this._handlerViewChange=T((()=>{var e,i,n,r;const{clockType:s}=this._options;if(t(this.modalElement,"mobile")){const e=c(this.hour.value,"hour",s),t=c(this.minutes.value,"minutes",s);if(!1===e||!1===t)return t||this.minutes.classList.add("invalid-value"),void(e||null===(i=this.hour)||void 0===i||i.classList.add("invalid-value"));!0===e&&!0===t&&(t&&this.minutes.classList.remove("invalid-value"),e&&(null===(n=this.hour)||void 0===n||n.classList.remove("invalid-value"))),this.close(),this._isMobileView=!1,this._options.mobile=!1;const o=this.hour.value,a=this.minutes.value,l=null===(r=this.activeTypeMode)||void 0===r?void 0:r.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!1}}),setTimeout((()=>{if(this.open(),this.hour.value=o,this.minutes.value=a,"12h"===this._options.clockType){const e="PM"===l?"AM":"PM";this["PM"===l?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}this._setTransformToCircleWithSwitchesHour(this.hour.value),this._toggleClassActiveToValueTips(this.hour.value),Number(this.hour.value)>12||0===Number(this.hour.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h()}),300)}),300)}else{this.close(),this._isMobileView=!0,this._options.mobile=!0;const i=this.hour.value,t=this.minutes.value,n=null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!0}}),setTimeout((()=>{if(this.open(),this.hour.value=i,this.minutes.value=t,"12h"===this._options.clockType){const e="PM"===n?"AM":"PM";this["PM"===n?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}}),300)}),300)}}),400),this._handleIconChangeView=()=>e(this,void 0,void 0,(function*(){this._options.enableSwitchIcon&&(r()?this.keyboardClockIcon.addEventListener("touchstart",this._handlerViewChange):this.keyboardClockIcon.addEventListener("click",this._handlerViewChange))})),this._handlerClickHourMinutes=i=>e(this,void 0,void 0,(function*(){var e,n;if(!this.modalElement)return;const{clockType:r,editable:s}=this._options,o=i.target,a=c(this.hour.value,"hour",r),l=c(this.minutes.value,"minutes",r);s&&(t(o,"timepicker-ui-hour")||t(o,"timepicker-ui-minutes")?!1!==a&&!1!==l||(l||this.minutes.classList.add("invalid-value"),a||null===(n=this.hour)||void 0===n||n.classList.add("invalid-value")):!0===a&&!0===l&&(l&&this.minutes.classList.remove("invalid-value"),a&&(null===(e=this.hour)||void 0===e||e.classList.remove("invalid-value"))))})),this._handleClickOnHourMobile=()=>{document.addEventListener("mousedown",this._eventsClickMobileHandler),document.addEventListener("touchstart",this._eventsClickMobileHandler)},this._handleKeyPress=e=>{"Escape"===e.key&&this.modalElement&&this.close()},this._handleEscClick=()=>{document.addEventListener("keydown",this._handleKeyPress)},this._focusTrapHandler=()=>{setTimeout((()=>{var e,i;const n=null===(e=this.wrapper)||void 0===e?void 0:e.querySelectorAll('div[tabindex="0"]:not([disabled])'),r=null===(i=this.wrapper)||void 0===i?void 0:i.querySelectorAll('input[tabindex="0"]:not([disabled])');if(!n||n.length<=0||r.length<=0)return;const s=[...r,...n],o=s[0],a=s[s.length-1];this.wrapper.focus(),this.wrapper.addEventListener("keydown",(({key:e,shiftKey:i,target:n})=>{const r=n;if("Tab"===e&&(i?document.activeElement===o&&a.focus():document.activeElement===a&&o.focus()),"Enter"===e&&(t(r,"timepicker-ui-minutes")&&this.minutes.click(),t(r,"timepicker-ui-hour")&&this.hour.click(),t(r,"timepicker-ui-cancel-btn")&&this.cancelButton.click(),t(r,"timepicker-ui-ok-btn")&&this.okButton.click(),t(r,"timepicker-ui-keyboard-icon-wrapper")&&this.keyboardClockIcon.click(),t(r,"timepicker-ui-am")&&this.AM.click(),t(r,"timepicker-ui-pm")&&this.PM.click(),t(r,"timepicker-ui-value-tips")||t(r,"timepicker-ui-value-tips-24h"))){const{left:e,top:i,x:n,y:s,width:o,height:a}=r.getBoundingClientRect(),l=document.elementFromPoint(n,s),u=()=>{var n;const r=new MouseEvent("mousedown",{clientX:e+o/2,clientY:i+a/2,cancelable:!0,bubbles:!0});t(l,"timepicker-ui-value-tips-24h")?null==l||l.dispatchEvent(r):null===(n=null==l?void 0:l.childNodes[0])||void 0===n||n.dispatchEvent(r),this._isTouchMouseMove=!1};u()}setTimeout((()=>{this.wrapper.addEventListener("mousedown",(()=>document.activeElement.blur()))}),100)}))}),301)},this._handleOpenOnEnterFocus=()=>{this.input.addEventListener("keydown",(({target:e,key:i})=>{e.disabled||"Enter"===i&&this.open()}))},this._element=o,this._cloned=null,this._options=((e,i)=>Object.assign(Object.assign({},i),e))(Object.assign(Object.assign({},a),(e=>{if(!e)return;const i=JSON.parse(JSON.stringify(e)),t=Object.keys(i);return Object.values(i).reduce(((e,i,n)=>(Number(i)?e[t[n]]=Number(i):e[t[n]]="true"===i||"false"===i?JSON.parse(i):i,e)),{})})(null===(h=this._element)||void 0===h?void 0:h.dataset)),v),this._isTouchMouseMove=!1,this._degreesHours=30*Number(d(null===(f=this._element)||void 0===f?void 0:f.querySelector("input"),this._options.clockType).hour),this._degreesMinutes=6*Number(d(null===(x=this._element)||void 0===x?void 0:x.querySelector("input"),this._options.clockType).minutes),this._isMobileView=!1,this._mutliEventsMove=e=>this._handleEventToMoveHand(e),this._mutliEventsMoveHandler=this._mutliEventsMove.bind(this),this._eventsClickMobile=e=>this._handlerClickHourMinutes(e),this._eventsClickMobileHandler=this._eventsClickMobile.bind(this),this._checkMobileOption(),this._clickTouchEvents=["click","mousedown","touchstart"],this._inputEvents=["change",...this._clickTouchEvents],this._disabledTime=null,this._preventClockTypeByCurrentTime(),this._isModalRemove=!0}get modalTemplate(){return this._options.mobile&&this._isMobileView?(e=>{const{mobileTimeLabel:i,amLabel:t,pmLabel:n,cancelLabel:r,okLabel:s,iconTemplateMobile:o,minuteMobileLabel:a,hourMobileLabel:l,enableSwitchIcon:u,animation:d,clockType:c}=e;return`\n `})(this._options):(e=>{const{iconTemplate:i,timeLabel:t,amLabel:n,pmLabel:r,cancelLabel:s,okLabel:o,enableSwitchIcon:a,animation:l,clockType:u,editable:d}=e;return`\n `})(this._options)}get modalElement(){return document.querySelector(".timepicker-ui-modal")}get clockFace(){return document.querySelector(".timepicker-ui-clock-face")}get input(){var e;return null===(e=this._element)||void 0===e?void 0:e.querySelector("input")}get clockHand(){return document.querySelector(".timepicker-ui-clock-hand")}get circle(){return document.querySelector(".timepicker-ui-circle-hand")}get tipsWrapper(){return document.querySelector(".timepicker-ui-tips-wrapper")}get tipsWrapperFor24h(){return document.querySelector(".timepicker-ui-tips-wrapper-24h")}get minutes(){return document.querySelector(".timepicker-ui-minutes")}get hour(){return document.querySelector(".timepicker-ui-hour")}get AM(){return document.querySelector(".timepicker-ui-am")}get PM(){return document.querySelector(".timepicker-ui-pm")}get minutesTips(){return document.querySelector(".timepicker-ui-minutes-time")}get hourTips(){return document.querySelector(".timepicker-ui-hour-time-12")}get allValueTips(){return[...document.querySelectorAll(".timepicker-ui-value-tips"),...document.querySelectorAll(".timepicker-ui-value-tips-24h")]}get openElementData(){var e;const i=null===(e=this._element)||void 0===e?void 0:e.querySelectorAll("[data-open]");if((null==i?void 0:i.length)>0){const e=[];return i.forEach((({dataset:i})=>{var t;return e.push(null!==(t=i.open)&&void 0!==t?t:"")})),[...new Set(e)]}return null}get openElement(){var e,i;return null===this.openElementData?(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"),[this.input]):null!==(i=this.openElementData.map((e=>{var i;return null===(i=this._element)||void 0===i?void 0:i.querySelectorAll(`[data-open='${e}']`)}))[0])&&void 0!==i?i:""}get cancelButton(){return document.querySelector(".timepicker-ui-cancel-btn")}get okButton(){return document.querySelector(".timepicker-ui-ok-btn")}get activeTypeMode(){return document.querySelector(".timepicker-ui-type-mode.active")}get keyboardClockIcon(){return document.querySelector(".timepicker-ui-keyboard-icon-wrapper")}get footer(){return document.querySelector(".timepicker-ui-footer")}get wrapper(){return document.querySelector(".timepicker-ui-wrapper")}_checkDisabledValuesOnStart(){if(!this._options.disabledTime||this._options.disabledTime.interval)return;const{disabledTime:{hours:e,minutes:i},clockType:t}=this._options,n=!e||p(e,"hour",t),r=!i||p(i,"minutes",t);if(!n||!r)throw new Error("You set wrong hours or minutes in disabled option")}_checkMobileOption(){this._isMobileView=!!this._options.mobile,this._options.mobile&&(this._options.editable=!0)}_getDisableTime(){this._disabledTime=(e=>{if(!e)return;const{disabledTime:i,clockType:t}=e;if(!i||Object.keys(i).length<=0||"Object"!==i.constructor.name)return;const{hours:n,interval:r,minutes:s}=i;if(r){delete i.hours,delete i.minutes;const[e,n]=r.toString().split("-"),{hour:s,minutes:l,type:u}=d({value:e.trimEnd()},t),{hour:c,minutes:p,type:h}=d({value:n.trimEnd().trimStart()},t);let m=o(s,c).map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`));const v=[],b=Number(l),k=Number(p);if(h===u)return b>0&&k<=0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):k<59&&k>0&&b<=0?(v.push(void 0,m[m.length-1]),m=m.slice(0,-1)):k>0&&b>0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):0===k&&0===b&&(v.push(void 0,m[m.length-1]),m.pop()),{value:{removedStartedHour:Number(v[0])<=9?`0${v[0]}`:v[0],removedEndHour:Number(v[1])<=9?`0${v[1]}`:v[1],rangeArrHour:m,isInterval:!0,startMinutes:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:a(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endType:h,startType:u}};{const e=o(s,12).map(String),i=a(1,c).map(String),t=[],n=[];return b>0&&k<=0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):k<59&&k>0&&b<=0?(n.push(e[0]),t.push(i[i.length-1]),i.splice(-1,1)):k>0&&b>0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):0===k&&0===b&&(t.push(i[i.length-1]),n.push(e[0]),i.pop()),{value:{isInterval:!0,endType:h,startType:u,pmHours:i,amHours:e,startMinutes:0===Number(l)?[]:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:a(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),removedAmHour:Number(n[0])<=9?`0${n[0]}`:n[0],removedPmHour:Number(t[0])<=9?`0${t[0]}`:t[0]}}}}return null==n||n.forEach((e=>{if("12h"===t&&Number(e)>12)throw new Error("The disabled hours value has to be less than 13");if("24h"===t&&Number(e)>23)throw new Error("The disabled hours value has to be less than 24")})),null==s||s.forEach((e=>{if(Number(e)>59)throw new Error("The disabled minutes value has to be less than 60")})),{value:{hours:null==n?void 0:n.map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`)),minutes:null==s?void 0:s.map((e=>Number(e)<=9?`0${e}`:`${e}`))}}})(this._options)}_removeCircleClockClasses24h(){var e,i;null===(e=this.circle)||void 0===e||e.classList.remove("timepicker-ui-circle-hand-24h"),null===(i=this.clockHand)||void 0===i||i.classList.remove("timepicker-ui-clock-hand-24h")}_setCircleClockClasses24h(){var e,i;this.circle&&(null===(e=this.circle)||void 0===e||e.classList.add("timepicker-ui-circle-hand-24h")),this.clockHand&&(null===(i=this.clockHand)||void 0===i||i.classList.add("timepicker-ui-clock-hand-24h"))}_setErrorHandler(){var e,i,t,r;const{error:s,currentHour:o,currentMin:a,currentType:l,currentLength:u}=d(this.input,this._options.clockType);if(s){const d=document.createElement("div");throw null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-invalid-format"),d.classList.add("timepicker-ui-invalid-text"),d.innerHTML="Invalid Time Format",(null===(i=this.input)||void 0===i?void 0:i.parentElement)&&null===(null===(t=this.input)||void 0===t?void 0:t.parentElement.querySelector(".timepicker-ui-invalid-text"))&&(null===(r=this.input)||void 0===r||r.after(d)),n(this._element,"geterror",{error:s,currentHour:o,currentMin:a,currentType:l,currentLength:u}),new Error(`Invalid Time Format: ${s}`)}}_removeErrorHandler(){var e,i;null===(e=this.input)||void 0===e||e.classList.remove("timepicker-ui-invalid-format");const t=null===(i=this._element)||void 0===i?void 0:i.querySelector(".timepicker-ui-invalid-text");t&&t.remove()}_setOnStartCSSClassesIfClockType24h(){if("24h"===this._options.clockType){let{hour:e}=d(this.input,this._options.clockType,this._options.currentTime);this.input.value.length>0&&(e=this.input.value.split(":")[0]),(Number(e)>12||0===Number(e))&&this._setCircleClockClasses24h()}}_getDestructuringObj(e){var i;const{endMinutes:t,removedEndHour:n,removedStartedHour:r,startMinutes:s,pmHours:o,amHours:a,removedAmHour:l,removedPmHour:u}=this._disabledTime.value;return e?{minutesToUpdate:{actualHour:this.hour.value,pmHours:o,amHours:a,activeMode:null===(i=this.activeTypeMode)||void 0===i?void 0:i.textContent,startMinutes:s,endMinutes:t,removedAmHour:l,removedPmHour:u}}:{minutesToUpdate:{endMinutes:t,removedEndHour:n,removedStartedHour:r,actualHour:this.hour.value,startMinutes:s}}}}export{f as TimepickerUI}; +function e(e,i,t,n){return new(t||(t=Promise))((function(r,o){function s(e){try{l(n.next(e))}catch(e){o(e)}}function a(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var i;e.done?r(e.value):(i=e.value,i instanceof t?i:new t((function(e){e(i)}))).then(s,a)}l((n=n.apply(e,i||[])).next())}))}const i=(e,i,t=!1)=>{const{touches:n}=e,{clientX:r,clientY:o}=e;if(!i)return;const{left:s,top:a}=i.getBoundingClientRect();let l={x:0,y:0};if(void 0===n)l={x:r-s,y:o-a};else if(void 0!==n&&n.length>0&&Object.keys(n).length>0){const{clientX:e,clientY:i}=n[0];l={x:e-s,y:i-a}}return 0!==Object.keys(l).length||l.constructor!==Object?l:void 0},t=(e,i)=>!!e&&e.classList.contains(i),n=(e,i,t)=>{if(!e)return;const n=new CustomEvent(i,{detail:t});e.dispatchEvent(n)},r=(e,i,t)=>((e,i)=>Math.round(e/i)*i)(e,i*t),o=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((i,t)=>Number(e)+t)),s=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((e,t)=>Number(i)-t)).reverse(),a=e=>{e&&"function"==typeof e&&e()},l=(e="")=>{const i=e.replace(/(AM|PM|am|pm)/,(e=>` ${e}`)),t=new Date(`September 20, 2000 ${i}`);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}`},u=(e,i,t,n)=>{if(!e)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const{value:r}=e;if(t){if("boolean"==typeof t&&t){const[e,t]=(new Date).toLocaleTimeString().split(":");if(/[a-z]/i.test(t)&&"12h"===i){const[i,n]=t.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:t,type:void 0}}{const{time:e,locales:r,preventClockType:o}=t;let s=e;if(e||(s=new Date),o&&n){const[e,i]=new Date(s).toLocaleTimeString().split(":");if(/[a-z]/i.test(i)){const[t,n]=i.split(" ");return{hour:e,minutes:t,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:void 0}}const[a,l]=new Date(s).toLocaleTimeString(r,{timeStyle:"short"}).split(":");if(/[a-z]/i.test(l)&&"12h"===i){const[e,i]=l.split(" ");return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:e,type:i}}if("12h"===i){const[e,i]=new Date(`1970-01-01T${a}:${l}Z`).toLocaleTimeString("en-US",{timeZone:"UTC",hour12:!0,hour:"numeric",minute:"numeric"}).split(":"),[t,n]=i.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:a,minutes:t,type:n}}return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:l,type:void 0}}}if(""===r||!r)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const[o,s]=r.split(" "),[a,l]=o.split(":");if(/[a-z]/i.test(o))return{error:"The input contains invalid letters or whitespace."};if(r.includes(" ")){if(!s)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 5), currentLength: ${r.length}.`,currentLength:r.length};if(r.length>8||"AM"!==s&&"PM"!==s)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 8), currentLength: ${r.length} or invalid type (PM or AM), currentType: ${s}.`,currentLength:r.length,currentType:s}}let u=Number(l);const d=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?d>12||u>59||u<0||0===d||"AM"!==s&&"PM"!==s?{error:`The input contains invalid letters or numbers. Problem is with hour which should be less than 13 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${s}.`,currentHour:d,currentMin:u,currentType:s}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString(),type:s}:d<0||d>23||u>59?{error:`The input contains invalid numbers. Problem is with hour which should be less than 24 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:d,currentMin:u}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString()}},d=(e,i,t)=>{const n=Number(e);return"hour"===i?"24h"!==t?n>0&&n<=12:n>=0&&n<=23:"minutes"===i?n>=0&&n<=59:void 0},c=(e,i,t,n)=>{if(e){if(Array.isArray(e)&&e.length>0){return!e.map((e=>d(e,i,t))).some((e=>!1===e))}if("string"==typeof e||"number"==typeof e){const r=d(e,i,t),o=null==n?void 0:n.map(Number).includes(Number(e));return!(!r||o)}}};function p(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}p(':export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}\n\n.timepicker-ui * {\n box-sizing: border-box !important;\n}\n.timepicker-ui-modal {\n font-family: "Roboto", sans-serif;\n position: fixed;\n opacity: 0;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(156, 155, 155, 0.6);\n z-index: 5000;\n pointer-events: none;\n}\n.timepicker-ui-modal.show {\n pointer-events: auto;\n}\n.timepicker-ui-modal.removed {\n top: auto;\n bottom: auto;\n left: auto;\n right: auto;\n background-color: transparent;\n}\n.timepicker-ui-measure {\n position: absolute;\n top: -9999px;\n width: 3.125rem;\n height: 3.125rem;\n overflow: scroll;\n}\n.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {\n position: fixed;\n z-index: 5001;\n width: 328px;\n height: 500px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n display: flex;\n flex-direction: column;\n outline: none;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper:not(.timepicker-ui-wrapper + .mobile) {\n flex-direction: row;\n height: 360px;\n width: 584px;\n }\n}\n@media screen and (max-width: 330px) and (orientation: portrait) {\n .timepicker-ui-wrapper:not(.timepicker-ui-wrapper + .mobile) {\n width: 315px;\n }\n}\n.timepicker-ui-wrapper.mobile {\n height: 218px;\n}\n@media screen and (max-width: 330px) {\n .timepicker-ui-wrapper.mobile {\n width: 315px;\n }\n}\n.timepicker-ui-header, .timepicker-ui-header.mobile {\n padding-top: 52px;\n padding-bottom: 36px;\n padding-right: 24px;\n padding-left: 24px;\n height: 104px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 100%;\n}\n.timepicker-ui-header.mobile {\n padding-bottom: 0;\n padding-top: 35px;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-header:not(.timepicker-ui-header + .mobile) {\n height: auto;\n flex-direction: column;\n }\n}\n.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {\n text-transform: uppercase;\n position: absolute;\n top: 16px;\n left: 24px;\n font-size: 12px;\n color: #a9a9a9;\n}\n.timepicker-ui-body {\n height: 256px;\n width: 256px;\n margin: 0 auto;\n position: relative;\n border-radius: 100%;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-body {\n padding-right: 0;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 23px;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-landspace {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n.timepicker-ui-footer, .timepicker-ui-footer-mobile {\n height: 76px;\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-footer:not(.timepicker-ui-footer + .mobile) {\n justify-content: flex-end;\n }\n}\n.timepicker-ui-footer.mobile {\n align-items: flex-start;\n}\n.timepicker-ui-clock-face {\n background-color: #e0e0e0;\n height: 100%;\n width: 100%;\n border-radius: 100%;\n position: relative;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-clock-face {\n height: 256px;\n width: 256px;\n top: 15px;\n }\n}\n.timepicker-ui-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n user-select: none;\n touch-action: none;\n transform: translate(-50%, -50%);\n background-color: #6200ee;\n height: 8px;\n width: 8px;\n border-radius: 100%;\n}\n.timepicker-ui-tips-wrapper {\n height: 100%;\n width: 100%;\n}\n.timepicker-ui-tips-wrapper-24h {\n position: absolute;\n height: 160px;\n width: 160px;\n z-index: 0;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n border-radius: 50%;\n}\n.timepicker-ui-tips-wrapper-24h-disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24 {\n position: absolute;\n width: 32px;\n height: 32px;\n text-align: center;\n cursor: pointer;\n font-size: 17.6px;\n display: flex;\n justify-content: center;\n align-items: center;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span, .timepicker-ui-hour-time-24 span {\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12 {\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {\n display: flex;\n margin-right: 10px;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-time:not(.timepicker-ui-wrapper-time + .mobile) {\n margin-right: 0;\n height: auto;\n }\n}\n.timepicker-ui-wrapper-time-24h {\n margin-right: 0px;\n}\n.timepicker-ui-wrapper-time.mobile {\n position: relative;\n}\n.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 51.2px;\n background-color: #e4e4e4;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s ease;\n outline: none;\n border: 2px solid transparent;\n padding: 10px;\n width: 96px;\n text-align: center;\n}\n.timepicker-ui-hour:focus-visible, .timepicker-ui-minutes:focus-visible, .timepicker-ui-hour.mobile:focus-visible, .timepicker-ui-minutes.mobile:focus-visible {\n outline: auto;\n}\n.timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {\n color: #6200ee;\n background-color: #ece0fd;\n}\n.timepicker-ui-hour::-webkit-outer-spin-button, .timepicker-ui-hour::-webkit-inner-spin-button, .timepicker-ui-minutes::-webkit-outer-spin-button, .timepicker-ui-minutes::-webkit-inner-spin-button, .timepicker-ui-hour.mobile::-webkit-outer-spin-button, .timepicker-ui-hour.mobile::-webkit-inner-spin-button, .timepicker-ui-minutes.mobile::-webkit-outer-spin-button, .timepicker-ui-minutes.mobile::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important;\n}\n.timepicker-ui-hour[type=number], .timepicker-ui-minutes[type=number], .timepicker-ui-hour.mobile[type=number], .timepicker-ui-minutes.mobile[type=number] {\n -moz-appearance: textfield !important;\n}\n.timepicker-ui-hour, .timepicker-ui-minutes {\n outline: none;\n border: 2px solid transparent;\n}\n.timepicker-ui-hour[contenteditable=true]:focus, .timepicker-ui-hour[contenteditable=true]:active, .timepicker-ui-minutes[contenteditable=true]:focus, .timepicker-ui-minutes[contenteditable=true]:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all;\n}\n.timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n height: 70px;\n outline: none;\n border: 2px solid transparent;\n}\n.timepicker-ui-hour.mobile[contenteditable=true]:focus, .timepicker-ui-hour.mobile[contenteditable=true]:active, .timepicker-ui-minutes.mobile[contenteditable=true]:focus, .timepicker-ui-minutes.mobile[contenteditable=true]:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all;\n}\n.timepicker-ui-dots, .timepicker-ui-dots.mobile {\n padding-left: 5px;\n padding-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 57.6px;\n user-select: none;\n touch-action: none;\n}\n.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {\n display: flex;\n flex-direction: column;\n height: 80px;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 500;\n color: #787878;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-type-time {\n flex-direction: row;\n width: 100%;\n }\n}\n.timepicker-ui-wrapper-type-time.mobile {\n height: 70px;\n}\n.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid #d6d6d6;\n transition: all 0.3s ease;\n cursor: pointer;\n width: 100%;\n height: 100%;\n}\n.timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {\n color: #6200ee;\n background-color: #ece0fd;\n}\n.timepicker-ui-am.active, .timepicker-ui-pm.active, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile.active {\n pointer-events: none;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile), .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile) {\n width: 50%;\n height: 44px;\n }\n}\n.timepicker-ui-am, .timepicker-ui-am.mobile {\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-width: 0.3752px;\n}\n.timepicker-ui-am.mobile {\n border-bottom-left-radius: 0;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile) {\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n border-top-right-radius: 0;\n border-top-width: 1.5008px;\n border-right-width: 0.3752px;\n }\n}\n.timepicker-ui-pm, .timepicker-ui-pm.mobile {\n border-bottom-left-radius: 7px;\n border-bottom-right-radius: 7px;\n border-top-width: 0.3752px;\n width: 54px;\n}\n.timepicker-ui-pm.mobile {\n border-top-right-radius: 0;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile) {\n border-bottom-right-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-width: 1.5008px;\n border-left-width: 0.3752px;\n width: 50%;\n height: 44px;\n }\n}\n.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {\n color: #6200ee;\n text-transform: uppercase;\n border-radius: 7px;\n background-color: transparent;\n text-align: center;\n font-size: 15.2px;\n padding-top: 9px;\n padding-bottom: 9px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer;\n}\n.timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {\n background-color: #d6d6d6;\n}\n.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {\n width: 72px;\n margin-right: 4px;\n}\n.timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {\n width: 64px;\n margin-left: 4px;\n}\n.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n width: 44px;\n height: 44px;\n position: relative;\n bottom: -26px;\n left: 12px;\n transition: all 0.3s ease;\n}\n.timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #d6d6d6;\n border-radius: 7px;\n}\n.timepicker-ui-keyboard-icon-wrapper.mobile {\n bottom: -5px;\n}\n.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {\n padding: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #4e545a;\n height: 44px;\n width: 44px;\n}\n.timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {\n color: #6200ee;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n position: absolute;\n bottom: 8px;\n }\n}\n.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {\n margin-right: 8px;\n position: relative;\n bottom: -14px;\n}\n.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {\n position: absolute;\n bottom: 6px;\n font-size: 12.8px;\n color: #a9a9a9;\n left: 0;\n}\n.timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {\n left: 120px;\n}\n.timepicker-ui-clock-hand {\n position: absolute;\n background-color: #6200ee;\n bottom: 50%;\n height: 40%;\n left: calc(50% - 1px);\n transform-origin: center bottom 0;\n width: 2px;\n}\n.timepicker-ui-clock-hand-24h {\n height: 23%;\n}\n.timepicker-ui-circle-hand {\n position: absolute;\n transform: translate(-48%, -50%);\n width: 4px;\n height: 4px;\n border-radius: 100%;\n transition: all 0.2s ease;\n height: 46px;\n width: 46px;\n box-sizing: border-box !important;\n background-color: #6200ee;\n}\n.timepicker-ui-circle-hand.small-circle {\n height: 36px;\n width: 36px;\n box-sizing: border-box !important;\n}\n.timepicker-ui-circle-hand-24h {\n transform: translate(-50%, -50%);\n height: 32px;\n width: 32px;\n top: 4px;\n left: 1px;\n}\n.timepicker-ui-value-tips, .timepicker-ui-value-tips-24h {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s ease color;\n border-radius: 50%;\n outline: none;\n}\n.timepicker-ui-value-tips:focus, .timepicker-ui-value-tips-24h:focus {\n background: rgba(143, 143, 143, 0.315);\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n}\n.timepicker-ui-value-tips.active, .timepicker-ui-value-tips-24h.active {\n color: #fff;\n transition: none;\n}\n.timepicker-ui-clock-animation {\n animation: clockanimation 350ms linear;\n}\n.timepicker-ui-open-element.disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-tips-animation {\n transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.timepicker-ui-tips-disabled {\n color: rgba(156, 155, 155, 0.6);\n pointer-events: none;\n}\n\n.opacity {\n transition: opacity 0.15s linear;\n}\n.opacity.show {\n opacity: 1;\n}\n\n.invalid-value {\n border-color: #d50000 !important;\n color: #d50000 !important;\n}\n.invalid-value:hover, .invalid-value:focus, .invalid-value:active {\n border-color: #d50000 !important;\n color: #d50000 !important;\n}\n\n@keyframes clockanimation {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.timepicker-ui-invalid-format {\n border: 2px solid red;\n color: red;\n}\n\n.timepicker-ui-invalid-text {\n color: red;\n}');p(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}\n\n.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {\n border-radius: 0;\n background-color: #4e0d3a;\n color: #fff;\n}\n.timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {\n color: #e5e5e5;\n}\n.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {\n background-color: #71135c;\n}\n.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {\n background-color: #71135c;\n border-radius: 0;\n color: #fff;\n}\n.timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {\n background-color: #f7363e;\n}\n.timepicker-ui-hour.mobile.crane-straight[contenteditable=true]:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable=true]:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable=true]:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable=true]:active {\n border-color: #fff;\n outline-color: #fff;\n}\n.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {\n border: 0.125rem solid transparent;\n border-radius: 0;\n background-color: #71135c;\n}\n.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {\n color: #fff;\n background-color: #f7363e;\n}\n.timepicker-ui-am.crane-straight.radius {\n border-top-left-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n}\n.timepicker-ui-pm.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-bottom-right-radius: 1.25rem;\n}\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile).crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile).crane-straight.radius {\n border-bottom-right-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-am.mobile.crane-straight.radius {\n border-bottom-left-radius: 0rem;\n border-bottom-right-radius: 0rem;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-pm.mobile.crane-straight.radius {\n border-top-left-radius: 0rem;\n border-top-right-radius: 0rem;\n }\n}\n.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {\n color: #fff;\n border-radius: 0rem;\n}\n.timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {\n border-radius: 0.8125rem;\n}\n.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #f7363e;\n color: #fff;\n border-radius: 0;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {\n border-radius: 0.875rem;\n}\n.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {\n color: #fff;\n}\n.timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-clock-hand.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-circle-hand.crane-straight {\n border-color: #f7363e;\n background-color: #f7363e;\n}\n.timepicker-ui-value-tips.crane-straight {\n color: #fff;\n}");var h=":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}";p(h);const m={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'keyboard',iconTemplateMobile:'schedule',incrementHours:1,incrementMinutes:1,minuteMobileLabel:"Minute",mobile:!1,okLabel:"OK",pmLabel:"PM",timeLabel:"Select Time",switchToMinutesAfterSelectHour:!1,theme:"basic",clockType:"12h",disabledTime:void 0,currentTime:void 0,focusTrap:!0},v="mousedown mouseup mousemove mouseleave mouseover touchstart touchmove touchend",b=["00","13","14","15","16","17","18","19","20","21","22","23"],k=["12","1","2","3","4","5","6","7","8","9","10","11"],g=["00","05","10","15","20","25","30","35","40","45","50","55"];class y{constructor(e){this.clean=()=>{var e,i;const t=null===(e=this.tipsWrapper)||void 0===e?void 0:e.querySelectorAll("span.timepicker-ui-hour-time-12"),n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-minutes-time");this._removeClasses(t),this._removeClasses(n)},this.create=()=>{var e;if(!(this.clockFace&&this.array&&this.classToAdd&&this.tipsWrapper))return;const i=(this.clockFace.offsetWidth-32)/2,n=(this.clockFace.offsetHeight-32)/2,r=i-9;this.tipsWrapper.innerHTML="",null===(e=this.array)||void 0===e||e.forEach(((e,o)=>{var s,a,l,u,d,c;const p=o*(360/this.array.length)*(Math.PI/180);const h=document.createElement("span"),m=document.createElement("span");m.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(s=this.disabledTime)||void 0===s?void 0:s.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled")),this.hour===this.disabledTime.removedStartedHour&&(null===(l=null===(a=this.disabledTime)||void 0===a?void 0:a.startMinutes)||void 0===l?void 0:l.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(d=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===d?void 0:d.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1)),"24h"===this.clockType?(m.classList.add("timepicker-ui-value-tips-24h"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)):(m.classList.add("timepicker-ui-value-tips"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)),h.classList.add(this.classToAdd),"crane-straight"===this.theme&&(h.classList.add("crane-straight"),m.classList.add("crane-straight")),h.style.left=i+Math.sin(p)*r-h.offsetWidth+"px",h.style.bottom=n+Math.cos(p)*r-h.offsetHeight+"px",h.appendChild(m),null===(c=this.tipsWrapper)||void 0===c||c.appendChild(h)}))},this.updateDisable=e=>{var i,t;const n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-hour-time-12"),r=null===(t=this.tipsWrapper)||void 0===t?void 0:t.querySelectorAll("span.timepicker-ui-minutes-time");if(this._removeClasses(n),this._removeClasses(r),(null==e?void 0:e.hoursToUpdate)&&n&&this._addClassesWithIncludes(n,e.hoursToUpdate),(null==e?void 0:e.minutesToUpdate)&&r){const{actualHour:i,removedEndHour:t,removedStartedHour:n,startMinutes:o,endMinutes:s}=e.minutesToUpdate;t===i&&s.length>0?this._addClassesWithIncludes(r,s):Number(i)>Number(n)&&Number(i)0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)=Number(i[0])&&this._addClasses(r),0===s.length&&a.length>1&&Number(d)>=Number(l)&&this._addClasses(r),s.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,s):Number(d)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&s.length>0&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,s):Number(d)>Number(l)&&this._addClasses(r))),"PM"===o&&(d0&&Number(d)===u-1&&this._addClassesWithIncludes(r,a)))}},this._removeClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.remove("timepicker-ui-tips-disabled"),i[0].classList.remove("timepicker-ui-tips-disabled"),i[0].tabIndex=0}))},this._addClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.add("timepicker-ui-tips-disabled"),i[0].classList.add("timepicker-ui-tips-disabled"),i[0].tabIndex=-1}))},this._addClassesWithIncludes=(e,i)=>{null==e||e.forEach((({classList:e,children:t,textContent:n})=>{(null==i?void 0:i.includes(n))&&(e.add("timepicker-ui-tips-disabled"),t[0].classList.add("timepicker-ui-tips-disabled"),t[0].tabIndex=-1)}))},this.array=null==e?void 0:e.array,this.classToAdd=null==e?void 0:e.classToAdd,this.clockFace=null==e?void 0:e.clockFace,this.tipsWrapper=null==e?void 0:e.tipsWrapper,this.theme=null==e?void 0:e.theme,this.clockType=null==e?void 0:e.clockType,this.disabledTime=null==e?void 0:e.disabledTime,this.hour=null==e?void 0:e.hour}}const _=(e,i)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout((()=>{e(...n)}),i)}};class T{constructor(o,s){var p,T,f;this.create=()=>{this._updateInputValueWithCurrentTimeOnStart(),this._checkDisabledValuesOnStart(),this._setTimepickerClassToElement(),this._setInputClassToInputElement(),this._setDataOpenToInputIfDosentExistInWrapper(),this._setClassTopOpenElement(),this._handleOpenOnEnterFocus(),this._handleOpenOnClick(),this._getDisableTime()},this.open=e=>{this.create(),this._eventsBundle(),a(e)},this.close=_(((...e)=>{var i;if(e.length>2||!this.modalElement)return;const[t]=e.filter((e=>"boolean"==typeof e)),[n]=e.filter((e=>"function"==typeof e));t&&(this._handleOkButton(),null===(i=this.okButton)||void 0===i||i.click()),this._isTouchMouseMove=!1,v.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),document.removeEventListener("keypress",this._handleEscClick),this.wrapper.removeEventListener("keydown",this._focusTrapHandler),this._options.enableSwitchIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._removeAnimationToClose(),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{var e;this._options.focusInputAfterCloseModal&&(null===(e=this.input)||void 0===e||e.focus()),null!==this.modalElement&&(this.modalElement.remove(),this._isModalRemove=!0)}),300),a(n)}),300),this.destroy=e=>{v.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),this._options.enableSwitchIcon&&this.keyboardClockIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._cloned=this._element.cloneNode(!0),this._element.after(this._cloned),this._element.remove(),this._element=null,null===this._element&&a(e),this._element=this._cloned},this.update=(e,i)=>{this._options=Object.assign(Object.assign({},this._options),e.options),this._checkMobileOption(),e.create&&this.create(),a(i)},this._preventClockTypeByCurrentTime=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.preventClockType)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{currentTime:e,clockType:i}=this._options,{type:t}=u(this.input,i,e,!0);this._options.clockType=t?"12h":"24h"}},this._updateInputValueWithCurrentTimeOnStart=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.updateInput)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{hour:e,minutes:i,type:t}=u(this.input,this._options.clockType,this._options.currentTime);this.input.value=t?`${e}:${i} ${t}`:`${e}:${i}`}},this._setTheme=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div"),n=[...null===(i=this.modalElement)||void 0===i?void 0:i.querySelectorAll("input"),...t],{theme:r}=this._options;"crane-straight"===r?n.forEach((e=>e.classList.add("crane-straight"))):"crane-radius"===r&&n.forEach((e=>e.classList.add("crane-straight","radius")))},this._setInputClassToInputElement=()=>{var e;t(this.input,"timepicker-ui-input")||null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-input")},this._setDataOpenToInputIfDosentExistInWrapper=()=>{var e;null===this.openElementData&&(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"))},this._setClassTopOpenElement=()=>{this.openElement.forEach((e=>null==e?void 0:e.classList.add("timepicker-ui-open-element")))},this._removeBackdrop=()=>{var e;this._options.backdrop||(null===(e=this.modalElement)||void 0===e||e.classList.add("removed"),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))))},this._setNormalizeClass=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div");null===(i=this.modalElement)||void 0===i||i.classList.add("timepicker-ui-normalize"),null==t||t.forEach((e=>e.classList.add("timepicker-ui-normalize")))},this._setFlexEndToFooterIfNoKeyboardIcon=()=>{!this._options.enableSwitchIcon&&this.footer&&(this.footer.style.justifyContent="flex-end")},this._eventsBundle=()=>{var e,i,t,n,r,o,s,a,l,u,d,c,p;if(this._isModalRemove){if(this._handleEscClick(),this._setErrorHandler(),this._removeErrorHandler(),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))),null===(e=this.input)||void 0===e||e.blur(),this._setScrollbarOrNot(),this._setModalTemplate(),this._setNormalizeClass(),this._removeBackdrop(),this._setBgColorToCirleWithHourTips(),this._setOnStartCSSClassesIfClockType24h(),this._setClassActiveToHourOnOpen(),null!==this.clockFace){const e=new y({array:k,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(o=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===o?void 0:o.hours,clockType:"12h",hour:this.hour.value});if(e.create(),"24h"===this._options.clockType){new y({array:b,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:(null===(a=null===(s=this._disabledTime)||void 0===s?void 0:s.value)||void 0===a?void 0:a.isInterval)?null===(l=this._disabledTime)||void 0===l?void 0:l.value.rangeArrHour:null===(d=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===d?void 0:d.hours,hour:this.hour.value}).create()}else(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.endType)?setTimeout((()=>{var i,t,n,r,o,s,a,l;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)&&e.updateDisable({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour,minutesToUpdate:{endMinutes:null===(o=this._disabledTime)||void 0===o?void 0:o.value.endMinutes,removedEndHour:null===(s=this._disabledTime)||void 0===s?void 0:s.value.removedEndHour,removedStartedHour:null===(a=this._disabledTime)||void 0===a?void 0:a.value.removedStartedHour,actualHour:this.hour.value,startMinutes:null===(l=this._disabledTime)||void 0===l?void 0:l.value.startMinutes}})}),300):setTimeout((()=>{var i,t,n;e.updateDisable({minutesToUpdate:{actualHour:this.hour.value,pmHours:null===(i=this._disabledTime)||void 0===i?void 0:i.value.pmHours,amHours:null===(t=this._disabledTime)||void 0===t?void 0:t.value.amHours,activeMode:null===(n=this.activeTypeMode)||void 0===n?void 0:n.textContent}})}),300),e.updateDisable()}this._setFlexEndToFooterIfNoKeyboardIcon(),setTimeout((()=>{this._setTheme()}),0),this._setAnimationToOpen(),this._getInputValueOnOpenAndSet(),this._toggleClassActiveToValueTips(this.hour.value),this._isMobileView||(this._setTransformToCircleWithSwitchesHour(this.hour.value),this._handleAnimationClock()),this._handleMinutesEvents(),this._handleHourEvents(),"24h"!==this._options.clockType&&(this._handleAmClick(),this._handlePmClick()),this.clockFace&&this._handleMoveHand(),this._handleCancelButton(),this._handleOkButton(),this.modalElement&&(this._setShowClassToBackdrop(),this._handleBackdropClick()),this._handleIconChangeView(),this._handleClickOnHourMobile(),this._options.focusTrap&&this._focusTrapHandler()}},this._handleOpenOnClick=()=>{this.openElement.forEach((e=>this._clickTouchEvents.forEach((i=>null==e?void 0:e.addEventListener(i,(()=>this._eventsBundle()))))))},this._getInputValueOnOpenAndSet=()=>{var e,i;const t=u(this.input,this._options.clockType,this._options.currentTime);if(void 0===t)return this.hour.value="12",this.minutes.value="00",n(this._element,"show",{hour:this.hour.value,minutes:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),void("24h"!==this._options.clockType&&this.AM.classList.add("active"));let[r,o,s]=this.input.value.split(":").join(" ").split(" ");0===this.input.value.length&&(r=t.hour,o=t.minutes,s=t.type),this.hour.value=r,this.minutes.value=o;const a=document.querySelector(`[data-type='${s}']`);"24h"!==this._options.clockType&&a&&a.classList.add("active"),n(this._element,"show",Object.assign(Object.assign({},t),{type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}))},this._handleCancelButton=()=>{this._clickTouchEvents.forEach((e=>{this.cancelButton.addEventListener(e,(()=>{var e;const i=u(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},i),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))}))},this._handleOkButton=()=>{this._clickTouchEvents.forEach((e=>{var i;null===(i=this.okButton)||void 0===i||i.addEventListener(e,(()=>{var e,i,t;const{clockType:r,disabledTime:o}=this._options,s=d(this.hour.value,"hour",r),a=d(this.minutes.value,"minutes",r);let u;const p=c(this.hour.value,"hour",r,null==o?void 0:o.hours),h=c(this.minutes.value,"minutes",r,null==o?void 0:o.minutes);if((null==o?void 0:o.interval)&&(u=((e,i,t,n)=>{const r=t?l(`${e}:${i} ${t}`.trim()):`${e}:${i}`.trim();let o,s;if(t){const[e,i]=n.trim().split("-").map((e=>e.trim()));o=l(e),s=l(i)}else{const[e,i]=n.trim().split("-"),t=e=>e.trim().split(":").map((e=>Number(e)<=9?`0${Number(e)}`:e)).join(":");o=t(e),s=t(i)}return rs})(this.hour.value,this.minutes.value,null===(e=this.activeTypeMode)||void 0===e?void 0:e.textContent,o.interval)),!1===u||!1===s||!1===a||!1===p||!1===h)return!1!==u&&a&&h||this.minutes.classList.add("invalid-value"),void(!1!==u&&s&&p||this.hour.classList.add("invalid-value"));this.input.value=`${this.hour.value}:${this.minutes.value} ${"24h"===this._options.clockType?"":null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type}`.trimEnd(),n(this._element,"accept",{hour:this.hour.value,minutes:this.minutes.value,type:null===(t=this.activeTypeMode)||void 0===t?void 0:t.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),this.close()}))}))},this._setShowClassToBackdrop=()=>{this._options.backdrop&&setTimeout((()=>{this.modalElement.classList.add("show")}),300)},this._handleBackdropClick=()=>{var e;null===(e=this.modalElement)||void 0===e||e.addEventListener("click",(e=>{var i;const r=e.target;if(!t(r,"timepicker-ui-modal"))return;const o=u(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},o),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))},this._setBgColorToCirleWithHourTips=()=>{if(!this._options)return;const{mobile:e,theme:i}=this._options;e||null===this.circle||(this.circle.style.backgroundColor="crane-straight"===i||"crane-radius"===i?h.cranered400:h.purple)},this._setBgColorToCircleWithMinutesTips=()=>{const{theme:e}=this._options;this.minutes.value&&g.includes(this.minutes.value)&&(this.circle.style.backgroundColor="crane-straight"===e||"crane-radius"===e?h.cranered400:h.purple,this.circle.classList.remove("small-circle"))},this._removeBgColorToCirleWithMinutesTips=()=>{this.minutes.value&&g.includes(this.minutes.value)||(this.circle.style.backgroundColor="",this.circle.classList.add("small-circle"))},this._setTimepickerClassToElement=()=>{var e;null===(e=this._element)||void 0===e||e.classList.add("timepicker-ui")},this._setClassActiveToHourOnOpen=()=>{var e;this._options.mobile||this._isMobileView||null===(e=this.hour)||void 0===e||e.classList.add("active")},this._setMinutesToClock=e=>{var i,t,n,r,o;null!==this.clockFace&&this._setTransformToCircleWithSwitchesMinutes(e),this._removeBgColorToCirleWithMinutesTips();const s=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.minutes)?null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.minutes:null===(o=this._disabledTime)||void 0===o?void 0:o.value,a=new y({array:g,classToAdd:"timepicker-ui-minutes-time",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:s,hour:this.hour.value,clockType:this._options.clockType});a.create(),"12h"===this._options.clockType&&a.updateDisable(),this._toggleClassActiveToValueTips(e),"24h"===this._options.clockType&&(this.tipsWrapperFor24h.innerHTML="")},this._setHoursToClock=e=>{var i,t,n,r,o;if(null!==this.clockFace){this._setTransformToCircleWithSwitchesHour(e),this._setBgColorToCirleWithHourTips();const s=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(o=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===o?void 0:o.hours,a=new y({array:k,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:s,clockType:"12h",hour:this.hour.value});a.create(),"24h"===this._options.clockType?new y({array:b,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:s,hour:this.hour.value}).create():a.updateDisable(),this._toggleClassActiveToValueTips(e)}},this._setTransformToCircleWithSwitchesHour=e=>{const i=Number(e);let t=i>12?30*i-360:30*i;360===t&&(t=0),t>360||(this.clockHand.style.transform=`rotateZ(${t}deg)`)},this._setTransformToCircleWithSwitchesMinutes=e=>{const i=6*Number(e);i>360||(this.clockHand.style.transform=`rotateZ(${i}deg)`)},this._handleAmClick=()=>{this._clickTouchEvents.forEach((e=>{this.AM.addEventListener(e,(e=>{var i,r,o,s;if(e.target.classList.add("active"),this.PM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new y({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300),e.updateDisable()}n(this._element,"selectamtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(s=this.activeTypeMode)||void 0===s?void 0:s.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handlePmClick=()=>{this._clickTouchEvents.forEach((e=>{this.PM.addEventListener(e,(e=>{var i,r,o,s;if(e.target.classList.add("active"),this.AM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new y({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectpmtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(s=this.activeTypeMode)||void 0===s?void 0:s.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handleAnimationClock=()=>{this._options.animation&&setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.add("timepicker-ui-clock-animation"),setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.remove("timepicker-ui-clock-animation")}),600)}),150)},this._handleAnimationSwitchTipsMode=()=>{this.clockHand.classList.add("timepicker-ui-tips-animation"),setTimeout((()=>{var e;null===(e=this.clockHand)||void 0===e||e.classList.remove("timepicker-ui-tips-animation")}),401)},this._handleClasses24h=(e,i)=>{var t;const n=e.target;this.hourTips&&"24h"===this._options.clockType&&(Number(n.textContent)>12||0===Number(n.textContent)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(t=this.tipsWrapperFor24h)||void 0===t||t.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),n&&i&&(i.value=n.value.replace(/\D+/g,""),i.click())},this._handleHourEvents=()=>{var e,i;this._inputEvents.forEach((e=>{var i;null===(i=this.hour)||void 0===i||i.addEventListener(e,(e=>{var i,r,o,s,a;const l=e.target;if(null!==this.clockFace&&this._handleAnimationSwitchTipsMode(),"24h"===this._options.clockType&&(Number(l.value)>12||0===Number(l.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),this._setHoursToClock(l.value),l.classList.add("active"),this.minutes.classList.remove("active"),"12h"===this._options.clockType&&(null===(r=this._options.disabledTime)||void 0===r?void 0:r.interval)){const e=new y({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(o=this._disabledTime)||void 0===o?void 0:o.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selecthourmode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(a=this.activeTypeMode)||void 0===a?void 0:a.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),null!==this.clockFace&&this.circle.classList.remove("small-circle")}))})),null===(e=this.hour)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.hour))),null===(i=this.hour)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.hour)))},this._handleMinutesEvents=()=>{var e,i;this._inputEvents.forEach((e=>{this.minutes.addEventListener(e,(e=>{var i,r,o,s,a,l;const u=e.target;if(null!==this.clockFace&&(this._handleAnimationSwitchTipsMode(),this._setMinutesToClock(u.value)),"24h"===this._options.clockType&&(this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.add("timepicker-ui-tips-wrapper-24h-disabled")),u.classList.add("active"),null===(r=this.hour)||void 0===r||r.classList.remove("active"),"12h"===this._options.clockType&&(null===(o=this._options.disabledTime)||void 0===o?void 0:o.interval)){const e=new y({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(s=this._disabledTime)||void 0===s?void 0:s.value.startType)===(null===(a=this._disabledTime)||void 0===a?void 0:a.value.endType)?setTimeout((()=>{var i,t,n;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectminutemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(l=this.activeTypeMode)||void 0===l?void 0:l.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))})),null===(e=this.minutes)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.minutes))),null===(i=this.minutes)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.minutes)))},this._handleEventToMoveHand=e=>{var o,s,a,l,d,c,p,h,m,v,b,k,g,y,_,T,f,x,w,M,C,E,H,L,S,N,$,A,O,I,W,j,F,P,D,q,B,V,z,U,R,Y,Z,K,X,J,G,Q,ee,ie,te,ne,re,oe,se,ae,le,ue,de,ce,pe,he;const{target:me,type:ve,touches:be}=e,ke=me,{incrementMinutes:ge,incrementHours:ye,switchToMinutesAfterSelectHour:_e}=this._options;if(!i(e,this.clockFace))return;const Te=i(e,this.clockFace),fe=this.clockFace.offsetWidth/2,xe=Te&&Math.atan2(Te.y-fe,Te.x-fe);if("mouseup"===ve||"touchend"===ve)return this._isTouchMouseMove=!1,void(_e&&(t(ke,"timepicker-ui-value-tips")||t(ke,"timepicker-ui-value-tips-24h")||t(ke,"timepicker-ui-tips-wrapper"))&&this.minutes.click());if("mousedown"!==ve&&"mousemove"!==ve&&"touchmove"!==ve&&"touchstart"!==ve||"mousedown"!==ve&&"touchstart"!==ve&&"touchmove"!==ve||((t(ke,"timepicker-ui-clock-face")||t(ke,"timepicker-ui-circle-hand")||t(ke,"timepicker-ui-hour-time-12")||t(ke,"timepicker-ui-minutes-time")||t(ke,"timepicker-ui-clock-hand")||t(ke,"timepicker-ui-value-tips")||t(ke,"timepicker-ui-value-tips-24h")||t(ke,"timepicker-ui-tips-wrapper")||t(ke,"timepicker-ui-tips-wrapper-24h"))&&!t(ke,"timepicker-ui-tips-disabled")?(e.preventDefault(),this._isTouchMouseMove=!0):this._isTouchMouseMove=!1),!this._isTouchMouseMove)return;if(null!==this.minutesTips){this.minutes.classList.add("active");let e,i=xe&&r(Math.trunc(180*xe/Math.PI)+90,ge,6);if(void 0===i)return;if(i<0?(e=Math.round(360+i/6)%60,i=360+6*Math.round(i/6)):(e=Math.round(i/6)%60,i=6*Math.round(i/6)),null===(o=this._disabledTime)||void 0===o?void 0:o.value.isInterval)if((null===(d=this._disabledTime)||void 0===d?void 0:d.value.endType)===(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)){if((null===(m=null===(h=null===(p=this._disabledTime)||void 0===p?void 0:p.value)||void 0===h?void 0:h.endMinutes)||void 0===m?void 0:m.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(b=null===(v=this._disabledTime)||void 0===v?void 0:v.value)||void 0===b?void 0:b.removedEndHour)&&(null===(k=this._disabledTime)||void 0===k?void 0:k.value.endType)===(null===(g=this.activeTypeMode)||void 0===g?void 0:g.textContent))return;if((null===(T=null===(_=null===(y=this._disabledTime)||void 0===y?void 0:y.value)||void 0===_?void 0:_.startMinutes)||void 0===T?void 0:T.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(x=null===(f=this._disabledTime)||void 0===f?void 0:f.value)||void 0===x?void 0:x.removedStartedHour)&&(null===(w=this._disabledTime)||void 0===w?void 0:w.value.startType)===(null===(M=this.activeTypeMode)||void 0===M?void 0:M.textContent))return}else{if((null===(C=this.activeTypeMode)||void 0===C?void 0:C.textContent)===(null===(E=this._disabledTime)||void 0===E?void 0:E.value.endType)&&((null===(S=null===(L=null===(H=this._disabledTime)||void 0===H?void 0:H.value)||void 0===L?void 0:L.endMinutes)||void 0===S?void 0:S.includes(e<=9?`0${e}`:`${e}`))&&(null===(N=this._disabledTime)||void 0===N?void 0:N.value.removedPmHour)===this.hour.value||(null===($=this._disabledTime)||void 0===$?void 0:$.value.pmHours.map(Number).includes(Number(this.hour.value)))))return;if((null===(A=this.activeTypeMode)||void 0===A?void 0:A.textContent)===(null===(O=this._disabledTime)||void 0===O?void 0:O.value.startType)&&((null===(j=null===(W=null===(I=this._disabledTime)||void 0===I?void 0:I.value)||void 0===W?void 0:W.startMinutes)||void 0===j?void 0:j.includes(e<=9?`0${e}`:`${e}`))&&(null===(F=this._disabledTime)||void 0===F?void 0:F.value.removedAmHour)===this.hour.value||(null===(P=this._disabledTime)||void 0===P?void 0:P.value.amHours.map(Number).includes(Number(this.hour.value)))))return}else if(null===(l=null===(a=null===(s=this._disabledTime)||void 0===s?void 0:s.value)||void 0===a?void 0:a.minutes)||void 0===l?void 0:l.includes(e<=9?`0${e}`:`${e}`))return;this.minutes.value=e>=10?`${e}`:`0${e}`,this.clockHand.style.transform=`rotateZ(${i}deg)`,this._degreesMinutes=i,this._toggleClassActiveToValueTips(this.minutes.value),this._removeBgColorToCirleWithMinutesTips(),this._setBgColorToCircleWithMinutesTips(),n(this._element,"update",Object.assign(Object.assign({},u(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:ve,type:null===(D=this.activeTypeMode)||void 0===D?void 0:D.dataset.type}))}const we=be?be[0]:void 0,Me=be&&we?document.elementFromPoint(we.clientX,we.clientY):null;if(null!==this.hourTips){if(null===(q=this.hour)||void 0===q||q.classList.add("active"),!t(Me||ke,"timepicker-ui-value-tips-24h")&&!t(Me||ke,"timepicker-ui-tips-disabled")&&(t(Me||ke,"timepicker-ui-value-tips")||t(Me||ke,"timepicker-ui-tips-wrapper"))){let e,i=xe&&r(Math.trunc(180*xe/Math.PI)+90,ye,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%12,i=360+i):(e=Math.round(i/30)%12,(0===e||e>12)&&(e=12));const t=(null===(B=this._disabledTime)||void 0===B?void 0:B.value.isInterval)?"rangeArrHour":"hours";if((null===(V=this._disabledTime)||void 0===V?void 0:V.value.endType)===(null===(U=null===(z=this._disabledTime)||void 0===z?void 0:z.value)||void 0===U?void 0:U.startType)){if("string"==typeof(null===(Y=null===(R=this._disabledTime)||void 0===R?void 0:R.value)||void 0===Y?void 0:Y.endType)){if((null===(K=null===(Z=this._disabledTime)||void 0===Z?void 0:Z.value)||void 0===K?void 0:K.endType)===(null===(X=this.activeTypeMode)||void 0===X?void 0:X.textContent)&&(null===(G=null===(J=this._disabledTime)||void 0===J?void 0:J.value)||void 0===G?void 0:G.startType)===(null===(Q=this.activeTypeMode)||void 0===Q?void 0:Q.textContent)&&(null===(ie=null===(ee=this._disabledTime)||void 0===ee?void 0:ee.value[t])||void 0===ie?void 0:ie.includes(e.toString())))return}else if(null===(ne=null===(te=this._disabledTime)||void 0===te?void 0:te.value[t])||void 0===ne?void 0:ne.includes(e.toString()))return}else{if((null===(re=this._disabledTime)||void 0===re?void 0:re.value.startType)===(null===(oe=this.activeTypeMode)||void 0===oe?void 0:oe.textContent)&&(null===(se=this._disabledTime)||void 0===se?void 0:se.value.amHours.includes(e.toString())))return;if((null===(ae=this._disabledTime)||void 0===ae?void 0:ae.value.endType)===(null===(le=this.activeTypeMode)||void 0===le?void 0:le.textContent)&&(null===(ue=this._disabledTime)||void 0===ue?void 0:ue.value.pmHours.includes(e.toString())))return}this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=e>9?`${e}`:`0${e}`,this._removeCircleClockClasses24h(),this._toggleClassActiveToValueTips(e)}if((t(Me||ke,"timepicker-ui-value-tips-24h")||t(Me||ke,"timepicker-ui-tips-wrapper-24h"))&&!t(Me||ke,"timepicker-ui-tips-disabled")){let e,i=xe&&r(Math.trunc(180*xe/Math.PI)+90,ye,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%24,i=360+i):(e=Math.round(i/30)+12,12===e&&(e="00"));const t=(null===(de=this._disabledTime)||void 0===de?void 0:de.value.isInterval)?"rangeArrHour":"hours";if(null===(pe=null===(ce=this._disabledTime)||void 0===ce?void 0:ce.value[t])||void 0===pe?void 0:pe.includes(e.toString()))return;this._setCircleClockClasses24h(),this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=`${e}`,this._toggleClassActiveToValueTips(e)}n(this._element,"update",Object.assign(Object.assign({},u(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:ve,type:null===(he=this.activeTypeMode)||void 0===he?void 0:he.dataset.type}))}},this._toggleClassActiveToValueTips=e=>{const i=this.allValueTips.find((i=>Number(i.innerText)===Number(e)));this.allValueTips.map((e=>e.classList.remove("active"))),void 0!==i&&i.classList.add("active")},this._handleMoveHand=()=>{this._options.mobile||this._isMobileView||v.split(" ").forEach((e=>{"touchstart"===e||"touchmove"===e||"touchend"===e?document.addEventListener(e,this._mutliEventsMoveHandler,{passive:!1}):document.addEventListener(e,this._mutliEventsMoveHandler,!1)}))},this._setModalTemplate=()=>{if(!this._options)return;const{appendModalSelector:e}=this._options;if(""!==e&&e){const i=null===document||void 0===document?void 0:document.querySelector(e);null==i||i.insertAdjacentHTML("beforeend",this.modalTemplate)}else document.body.insertAdjacentHTML("afterend",this.modalTemplate)},this._setScrollbarOrNot=()=>{this._options.enableScrollbar?setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400):(document.body.style.paddingRight=`${(()=>{const e=document.createElement("div");e.className="timepicker-ui-measure",document.body.appendChild(e);const i=e.getBoundingClientRect().width-e.clientWidth;return document.body.removeChild(e),i})()}px`,document.body.style.overflowY="hidden")},this._setAnimationToOpen=()=>{var e,i;null===(e=this.modalElement)||void 0===e||e.classList.add("opacity"),this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.add("show")}),150):null===(i=this.modalElement)||void 0===i||i.classList.add("show")},this._removeAnimationToClose=()=>{var e;this.modalElement&&(this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.remove("show")}),150):null===(e=this.modalElement)||void 0===e||e.classList.remove("show"))},this._handlerViewChange=_((()=>{var e,i,n,r;const{clockType:o}=this._options;if(t(this.modalElement,"mobile")){const e=d(this.hour.value,"hour",o),t=d(this.minutes.value,"minutes",o);if(!1===e||!1===t)return t||this.minutes.classList.add("invalid-value"),void(e||null===(i=this.hour)||void 0===i||i.classList.add("invalid-value"));!0===e&&!0===t&&(t&&this.minutes.classList.remove("invalid-value"),e&&(null===(n=this.hour)||void 0===n||n.classList.remove("invalid-value"))),this.close(),this._isMobileView=!1,this._options.mobile=!1;const s=this.hour.value,a=this.minutes.value,l=null===(r=this.activeTypeMode)||void 0===r?void 0:r.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!1}}),setTimeout((()=>{if(this.open(),this.hour.value=s,this.minutes.value=a,"12h"===this._options.clockType){const e="PM"===l?"AM":"PM";this["PM"===l?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}this._setTransformToCircleWithSwitchesHour(this.hour.value),this._toggleClassActiveToValueTips(this.hour.value),Number(this.hour.value)>12||0===Number(this.hour.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h()}),300)}),300)}else{this.close(),this._isMobileView=!0,this._options.mobile=!0;const i=this.hour.value,t=this.minutes.value,n=null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!0}}),setTimeout((()=>{if(this.open(),this.hour.value=i,this.minutes.value=t,"12h"===this._options.clockType){const e="PM"===n?"AM":"PM";this["PM"===n?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}}),300)}),300)}}),400),this._handleIconChangeView=()=>e(this,void 0,void 0,(function*(){this._options.enableSwitchIcon&&(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?this.keyboardClockIcon.addEventListener("touchstart",this._handlerViewChange):this.keyboardClockIcon.addEventListener("click",this._handlerViewChange))})),this._handlerClickHourMinutes=i=>e(this,void 0,void 0,(function*(){var e,n;if(!this.modalElement)return;const{clockType:r,editable:o}=this._options,s=i.target,a=d(this.hour.value,"hour",r),l=d(this.minutes.value,"minutes",r);o&&(t(s,"timepicker-ui-hour")||t(s,"timepicker-ui-minutes")?!1!==a&&!1!==l||(l||this.minutes.classList.add("invalid-value"),a||null===(n=this.hour)||void 0===n||n.classList.add("invalid-value")):!0===a&&!0===l&&(l&&this.minutes.classList.remove("invalid-value"),a&&(null===(e=this.hour)||void 0===e||e.classList.remove("invalid-value"))))})),this._handleClickOnHourMobile=()=>{document.addEventListener("mousedown",this._eventsClickMobileHandler),document.addEventListener("touchstart",this._eventsClickMobileHandler)},this._handleKeyPress=e=>{"Escape"===e.key&&this.modalElement&&this.close()},this._handleEscClick=()=>{document.addEventListener("keydown",this._handleKeyPress)},this._focusTrapHandler=()=>{setTimeout((()=>{var e,i;const n=null===(e=this.wrapper)||void 0===e?void 0:e.querySelectorAll('div[tabindex="0"]:not([disabled])'),r=null===(i=this.wrapper)||void 0===i?void 0:i.querySelectorAll('input[tabindex="0"]:not([disabled])');if(!n||n.length<=0||r.length<=0)return;const o=[...r,...n],s=o[0],a=o[o.length-1];this.wrapper.focus(),this.wrapper.addEventListener("keydown",(({key:e,shiftKey:i,target:n})=>{const r=n;if("Tab"===e&&(i?document.activeElement===s&&a.focus():document.activeElement===a&&s.focus()),"Enter"===e&&(t(r,"timepicker-ui-minutes")&&this.minutes.click(),t(r,"timepicker-ui-hour")&&this.hour.click(),t(r,"timepicker-ui-cancel-btn")&&this.cancelButton.click(),t(r,"timepicker-ui-ok-btn")&&this.okButton.click(),t(r,"timepicker-ui-keyboard-icon-wrapper")&&this.keyboardClockIcon.click(),t(r,"timepicker-ui-am")&&this.AM.click(),t(r,"timepicker-ui-pm")&&this.PM.click(),t(r,"timepicker-ui-value-tips")||t(r,"timepicker-ui-value-tips-24h"))){const{left:e,top:i,x:n,y:o,width:s,height:a}=r.getBoundingClientRect(),l=document.elementFromPoint(n,o),u=()=>{var n;const r=new MouseEvent("mousedown",{clientX:e+s/2,clientY:i+a/2,cancelable:!0,bubbles:!0});t(l,"timepicker-ui-value-tips-24h")?null==l||l.dispatchEvent(r):null===(n=null==l?void 0:l.childNodes[0])||void 0===n||n.dispatchEvent(r),this._isTouchMouseMove=!1};u()}setTimeout((()=>{this.wrapper.addEventListener("mousedown",(()=>document.activeElement.blur()))}),100)}))}),301)},this._handleOpenOnEnterFocus=()=>{this.input.addEventListener("keydown",(({target:e,key:i})=>{e.disabled||"Enter"===i&&this.open()}))},this._element=o,this._cloned=null,this._options=((e,i)=>Object.assign(Object.assign({},i),e))(Object.assign(Object.assign({},s),(e=>{if(!e)return;const i=JSON.parse(JSON.stringify(e)),t=Object.keys(i);return Object.values(i).reduce(((e,i,n)=>(Number(i)?e[t[n]]=Number(i):e[t[n]]="true"===i||"false"===i?JSON.parse(i):i,e)),{})})(null===(p=this._element)||void 0===p?void 0:p.dataset)),m),this._isTouchMouseMove=!1,this._degreesHours=30*Number(u(null===(T=this._element)||void 0===T?void 0:T.querySelector("input"),this._options.clockType).hour),this._degreesMinutes=6*Number(u(null===(f=this._element)||void 0===f?void 0:f.querySelector("input"),this._options.clockType).minutes),this._isMobileView=!1,this._mutliEventsMove=e=>this._handleEventToMoveHand(e),this._mutliEventsMoveHandler=this._mutliEventsMove.bind(this),this._eventsClickMobile=e=>this._handlerClickHourMinutes(e),this._eventsClickMobileHandler=this._eventsClickMobile.bind(this),this._checkMobileOption(),this._clickTouchEvents=["click","mousedown","touchstart"],this._inputEvents=["change",...this._clickTouchEvents],this._disabledTime=null,this._preventClockTypeByCurrentTime(),this._isModalRemove=!0}get modalTemplate(){return this._options.mobile&&this._isMobileView?(e=>{const{mobileTimeLabel:i,amLabel:t,pmLabel:n,cancelLabel:r,okLabel:o,iconTemplateMobile:s,minuteMobileLabel:a,hourMobileLabel:l,enableSwitchIcon:u,animation:d,clockType:c}=e;return`\n `})(this._options):(e=>{const{iconTemplate:i,timeLabel:t,amLabel:n,pmLabel:r,cancelLabel:o,okLabel:s,enableSwitchIcon:a,animation:l,clockType:u,editable:d}=e;return`\n `})(this._options)}get modalElement(){return document.querySelector(".timepicker-ui-modal")}get clockFace(){return document.querySelector(".timepicker-ui-clock-face")}get input(){var e;return null===(e=this._element)||void 0===e?void 0:e.querySelector("input")}get clockHand(){return document.querySelector(".timepicker-ui-clock-hand")}get circle(){return document.querySelector(".timepicker-ui-circle-hand")}get tipsWrapper(){return document.querySelector(".timepicker-ui-tips-wrapper")}get tipsWrapperFor24h(){return document.querySelector(".timepicker-ui-tips-wrapper-24h")}get minutes(){return document.querySelector(".timepicker-ui-minutes")}get hour(){return document.querySelector(".timepicker-ui-hour")}get AM(){return document.querySelector(".timepicker-ui-am")}get PM(){return document.querySelector(".timepicker-ui-pm")}get minutesTips(){return document.querySelector(".timepicker-ui-minutes-time")}get hourTips(){return document.querySelector(".timepicker-ui-hour-time-12")}get allValueTips(){return[...document.querySelectorAll(".timepicker-ui-value-tips"),...document.querySelectorAll(".timepicker-ui-value-tips-24h")]}get openElementData(){var e;const i=null===(e=this._element)||void 0===e?void 0:e.querySelectorAll("[data-open]");if((null==i?void 0:i.length)>0){const e=[];return i.forEach((({dataset:i})=>{var t;return e.push(null!==(t=i.open)&&void 0!==t?t:"")})),[...new Set(e)]}return null}get openElement(){var e,i;return null===this.openElementData?(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"),[this.input]):null!==(i=this.openElementData.map((e=>{var i;return null===(i=this._element)||void 0===i?void 0:i.querySelectorAll(`[data-open='${e}']`)}))[0])&&void 0!==i?i:""}get cancelButton(){return document.querySelector(".timepicker-ui-cancel-btn")}get okButton(){return document.querySelector(".timepicker-ui-ok-btn")}get activeTypeMode(){return document.querySelector(".timepicker-ui-type-mode.active")}get keyboardClockIcon(){return document.querySelector(".timepicker-ui-keyboard-icon-wrapper")}get footer(){return document.querySelector(".timepicker-ui-footer")}get wrapper(){return document.querySelector(".timepicker-ui-wrapper")}_checkDisabledValuesOnStart(){if(!this._options.disabledTime||this._options.disabledTime.interval)return;const{disabledTime:{hours:e,minutes:i},clockType:t}=this._options,n=!e||c(e,"hour",t),r=!i||c(i,"minutes",t);if(!n||!r)throw new Error("You set wrong hours or minutes in disabled option")}_checkMobileOption(){this._isMobileView=!!this._options.mobile,this._options.mobile&&(this._options.editable=!0)}_getDisableTime(){this._disabledTime=(e=>{if(!e)return;const{disabledTime:i,clockType:t}=e;if(!i||Object.keys(i).length<=0||"Object"!==i.constructor.name)return;const{hours:n,interval:r,minutes:a}=i;if(r){delete i.hours,delete i.minutes;const[e,n]=r.toString().split("-"),{hour:a,minutes:l,type:d}=u({value:e.trimEnd()},t),{hour:c,minutes:p,type:h}=u({value:n.trimEnd().trimStart()},t);let m=o(a,c).map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`));const v=[],b=Number(l),k=Number(p);if(h===d)return b>0&&k<=0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):k<59&&k>0&&b<=0?(v.push(void 0,m[m.length-1]),m=m.slice(0,-1)):k>0&&b>0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):0===k&&0===b&&(v.push(void 0,m[m.length-1]),m.pop()),{value:{removedStartedHour:Number(v[0])<=9?`0${v[0]}`:v[0],removedEndHour:Number(v[1])<=9?`0${v[1]}`:v[1],rangeArrHour:m,isInterval:!0,startMinutes:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:s(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endType:h,startType:d}};{const e=o(a,12).map(String),i=s(1,c).map(String),t=[],n=[];return b>0&&k<=0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):k<59&&k>0&&b<=0?(n.push(e[0]),t.push(i[i.length-1]),i.splice(-1,1)):k>0&&b>0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):0===k&&0===b&&(t.push(i[i.length-1]),n.push(e[0]),i.pop()),{value:{isInterval:!0,endType:h,startType:d,pmHours:i,amHours:e,startMinutes:0===Number(l)?[]:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:s(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),removedAmHour:Number(n[0])<=9?`0${n[0]}`:n[0],removedPmHour:Number(t[0])<=9?`0${t[0]}`:t[0]}}}}return null==n||n.forEach((e=>{if("12h"===t&&Number(e)>12)throw new Error("The disabled hours value has to be less than 13");if("24h"===t&&Number(e)>23)throw new Error("The disabled hours value has to be less than 24")})),null==a||a.forEach((e=>{if(Number(e)>59)throw new Error("The disabled minutes value has to be less than 60")})),{value:{hours:null==n?void 0:n.map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`)),minutes:null==a?void 0:a.map((e=>Number(e)<=9?`0${e}`:`${e}`))}}})(this._options)}_removeCircleClockClasses24h(){var e,i;null===(e=this.circle)||void 0===e||e.classList.remove("timepicker-ui-circle-hand-24h"),null===(i=this.clockHand)||void 0===i||i.classList.remove("timepicker-ui-clock-hand-24h")}_setCircleClockClasses24h(){var e,i;this.circle&&(null===(e=this.circle)||void 0===e||e.classList.add("timepicker-ui-circle-hand-24h")),this.clockHand&&(null===(i=this.clockHand)||void 0===i||i.classList.add("timepicker-ui-clock-hand-24h"))}_setErrorHandler(){var e,i,t,r;const{error:o,currentHour:s,currentMin:a,currentType:l,currentLength:d}=u(this.input,this._options.clockType);if(o){const u=document.createElement("div");throw null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-invalid-format"),u.classList.add("timepicker-ui-invalid-text"),u.innerHTML="Invalid Time Format",(null===(i=this.input)||void 0===i?void 0:i.parentElement)&&null===(null===(t=this.input)||void 0===t?void 0:t.parentElement.querySelector(".timepicker-ui-invalid-text"))&&(null===(r=this.input)||void 0===r||r.after(u)),n(this._element,"geterror",{error:o,currentHour:s,currentMin:a,currentType:l,currentLength:d}),new Error(`Invalid Time Format: ${o}`)}}_removeErrorHandler(){var e,i;null===(e=this.input)||void 0===e||e.classList.remove("timepicker-ui-invalid-format");const t=null===(i=this._element)||void 0===i?void 0:i.querySelector(".timepicker-ui-invalid-text");t&&t.remove()}_setOnStartCSSClassesIfClockType24h(){if("24h"===this._options.clockType){let{hour:e}=u(this.input,this._options.clockType,this._options.currentTime);this.input.value.length>0&&(e=this.input.value.split(":")[0]),(Number(e)>12||0===Number(e))&&this._setCircleClockClasses24h()}}_getDestructuringObj(e){var i;const{endMinutes:t,removedEndHour:n,removedStartedHour:r,startMinutes:o,pmHours:s,amHours:a,removedAmHour:l,removedPmHour:u}=this._disabledTime.value;return e?{minutesToUpdate:{actualHour:this.hour.value,pmHours:s,amHours:a,activeMode:null===(i=this.activeTypeMode)||void 0===i?void 0:i.textContent,startMinutes:o,endMinutes:t,removedAmHour:l,removedPmHour:u}}:{minutesToUpdate:{endMinutes:t,removedEndHour:n,removedStartedHour:r,actualHour:this.hour.value,startMinutes:o}}}}export{T as TimepickerUI}; diff --git a/dist/timepicker-ui.js b/dist/timepicker-ui.js index f116682..78fdf0d 100644 --- a/dist/timepicker-ui.js +++ b/dist/timepicker-ui.js @@ -1 +1 @@ -"use strict";function e(e,i,t,n){return new(t||(t=Promise))((function(r,s){function o(e){try{l(n.next(e))}catch(e){s(e)}}function a(e){try{l(n.throw(e))}catch(e){s(e)}}function l(e){var i;e.done?r(e.value):(i=e.value,i instanceof t?i:new t((function(e){e(i)}))).then(o,a)}l((n=n.apply(e,i||[])).next())}))}Object.defineProperty(exports,"__esModule",{value:!0});const i=(e,i,t=!1)=>{const{touches:n}=e,{clientX:r,clientY:s}=e;if(!i)return;const{left:o,top:a}=i.getBoundingClientRect();let l={x:0,y:0};if(t){if(t&&void 0!==n&&Object.keys(n).length>0){const{clientX:e,clientY:i}=n[0];l={x:e-o,y:i-a}}}else l={x:r-o,y:s-a};return 0!==Object.keys(l).length||l.constructor!==Object?l:void 0},t=(e,i)=>!!e&&e.classList.contains(i),n=(e,i,t)=>{if(!e)return;const n=new CustomEvent(i,{detail:t});e.dispatchEvent(n)},r=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),s=(e,i,t)=>((e,i)=>Math.round(e/i)*i)(e,i*t),o=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((i,t)=>Number(e)+t)),a=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((e,t)=>Number(i)-t)).reverse(),l=e=>{e&&"function"==typeof e&&e()},u=(e="")=>{const i=e.replace(/(AM|PM|am|pm)/,(e=>` ${e}`)),t=new Date(`September 20, 2000 ${i}`);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}`},d=(e,i,t,n)=>{if(!e)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const{value:r}=e;if(t){if("boolean"==typeof t&&t){const[e,t]=(new Date).toLocaleTimeString().split(":");if(/[a-z]/i.test(t)&&"12h"===i){const[i,n]=t.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:t,type:void 0}}{const{time:e,locales:r,preventClockType:s}=t;let o=e;if(e||(o=new Date),s&&n){const[e,i]=new Date(o).toLocaleTimeString().split(":");if(/[a-z]/i.test(i)){const[t,n]=i.split(" ");return{hour:e,minutes:t,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:void 0}}const[a,l]=new Date(o).toLocaleTimeString(r,{timeStyle:"short"}).split(":");if(/[a-z]/i.test(l)&&"12h"===i){const[e,i]=l.split(" ");return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:e,type:i}}if("12h"===i){const[e,i]=new Date(`1970-01-01T${a}:${l}Z`).toLocaleTimeString("en-US",{timeZone:"UTC",hour12:!0,hour:"numeric",minute:"numeric"}).split(":"),[t,n]=i.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:a,minutes:t,type:n}}return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:l,type:void 0}}}if(""===r||!r)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const[s,o]=r.split(" "),[a,l]=s.split(":");if(/[a-z]/i.test(s))return{error:"The input contains invalid letters or whitespace."};if(r.includes(" ")){if(!o)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 5), currentLength: ${r.length}.`,currentLength:r.length};if(r.length>8||"AM"!==o&&"PM"!==o)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 8), currentLength: ${r.length} or invalid type (PM or AM), currentType: ${o}.`,currentLength:r.length,currentType:o}}let u=Number(l);const d=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?d>12||u>59||u<0||0===d||"AM"!==o&&"PM"!==o?{error:`The input contains invalid letters or numbers. Problem is with hour which should be less than 13 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${o}.`,currentHour:d,currentMin:u,currentType:o}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString(),type:o}:d<0||d>23||u>59?{error:`The input contains invalid numbers. Problem is with hour which should be less than 24 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:d,currentMin:u}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString()}},c=(e,i,t)=>{const n=Number(e);return"hour"===i?"24h"!==t?n>0&&n<=12:n>=0&&n<=23:"minutes"===i?n>=0&&n<=59:void 0},p=(e,i,t,n)=>{if(e){if(Array.isArray(e)&&e.length>0){return!e.map((e=>c(e,i,t))).some((e=>!1===e))}if("string"==typeof e||"number"==typeof e){const r=c(e,i,t),s=null==n?void 0:n.map(Number).includes(Number(e));return!(!r||s)}}};function h(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}h(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n\n.timepicker-ui * {\n box-sizing: border-box !important; }\n\n.timepicker-ui-modal {\n font-family: 'Roboto', sans-serif;\n position: fixed;\n opacity: 0;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(156, 155, 155, 0.6);\n z-index: 5000;\n pointer-events: none; }\n .timepicker-ui-modal.show {\n pointer-events: auto; }\n .timepicker-ui-modal.removed {\n top: auto;\n bottom: auto;\n left: auto;\n right: auto;\n background-color: transparent; }\n\n.timepicker-ui-measure {\n position: absolute;\n top: -9999px;\n width: 3.125rem;\n height: 3.125rem;\n overflow: scroll; }\n\n.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {\n position: fixed;\n z-index: 5001;\n width: 328px;\n height: 500px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n display: flex;\n flex-direction: column;\n outline: none; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper {\n flex-direction: row;\n height: 360px;\n width: 584px; } }\n\n@media screen and (max-width: 330px) and (orientation: portrait) {\n .timepicker-ui-wrapper {\n width: 315px; } }\n\n.timepicker-ui-wrapper.mobile {\n height: 218px; }\n @media screen and (max-width: 330px) {\n .timepicker-ui-wrapper.mobile {\n width: 315px; } }\n\n.timepicker-ui-header, .timepicker-ui-header.mobile {\n padding-top: 52px;\n padding-bottom: 36px;\n padding-right: 24px;\n padding-left: 24px;\n height: 104px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 100%; }\n\n.timepicker-ui-header.mobile {\n padding-bottom: 0;\n padding-top: 35px; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-header {\n height: auto;\n flex-direction: column; } }\n\n.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {\n text-transform: uppercase;\n position: absolute;\n top: calc(28px - 12px);\n left: 24px;\n font-size: 12px;\n color: #a9a9a9; }\n\n.timepicker-ui-body {\n height: 256px;\n width: 256px;\n margin: 0 auto;\n position: relative;\n border-radius: 100%; }\n @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-body {\n padding-right: 0;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 23px; } }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-landspace {\n display: flex;\n flex-direction: column;\n width: 100%; } }\n\n.timepicker-ui-footer, .timepicker-ui-footer-mobile {\n height: 76px;\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-footer {\n justify-content: flex-end; } }\n\n.timepicker-ui-footer.mobile {\n align-items: flex-start; }\n\n.timepicker-ui-clock-face {\n background-color: #e0e0e0;\n height: 100%;\n width: 100%;\n border-radius: 100%;\n position: relative; }\n @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-clock-face {\n height: 256px;\n width: 256px;\n top: 15px; } }\n\n.timepicker-ui-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n user-select: none;\n touch-action: none;\n transform: translate(-50%, -50%);\n background-color: #6200ee;\n height: 8px;\n width: 8px;\n border-radius: 100%; }\n\n.timepicker-ui-tips-wrapper {\n height: 100%;\n width: 100%; }\n\n.timepicker-ui-tips-wrapper-24h {\n position: absolute;\n height: 160px;\n width: 160px;\n z-index: 0;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n border-radius: 50%; }\n .timepicker-ui-tips-wrapper-24h-disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24 {\n position: absolute;\n width: 32px;\n height: 32px;\n text-align: center;\n cursor: pointer;\n font-size: 17.6px;\n display: flex;\n justify-content: center;\n align-items: center;\n touch-action: none;\n user-select: none; }\n .timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span, .timepicker-ui-hour-time-24 span {\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-hour-time-12 {\n display: block;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {\n display: flex;\n margin-right: 10px;\n height: 100%;\n justify-content: center;\n align-items: center; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-time {\n margin-right: 0;\n height: auto; } }\n\n.timepicker-ui-wrapper-time-24h {\n margin-right: 0px; }\n\n.timepicker-ui-wrapper-time.mobile {\n position: relative; }\n\n.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 51.2px;\n background-color: #e4e4e4;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s ease;\n outline: none;\n border: 2px solid transparent;\n padding: 10px;\n width: 96px;\n text-align: center; }\n .timepicker-ui-hour:focus-visible, .timepicker-ui-minutes:focus-visible, .timepicker-ui-hour.mobile:focus-visible, .timepicker-ui-minutes.mobile:focus-visible {\n outline: auto; }\n .timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {\n color: #6200ee;\n background-color: #ece0fd; }\n .timepicker-ui-hour::-webkit-outer-spin-button, .timepicker-ui-hour::-webkit-inner-spin-button, .timepicker-ui-minutes::-webkit-outer-spin-button, .timepicker-ui-minutes::-webkit-inner-spin-button, .timepicker-ui-hour.mobile::-webkit-outer-spin-button, .timepicker-ui-hour.mobile::-webkit-inner-spin-button, .timepicker-ui-minutes.mobile::-webkit-outer-spin-button, .timepicker-ui-minutes.mobile::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important; }\n .timepicker-ui-hour[type='number'], .timepicker-ui-minutes[type='number'], .timepicker-ui-hour.mobile[type='number'], .timepicker-ui-minutes.mobile[type='number'] {\n -moz-appearance: textfield !important; }\n\n.timepicker-ui-hour, .timepicker-ui-minutes {\n outline: none;\n border: 2px solid transparent; }\n .timepicker-ui-hour[contenteditable='true']:focus, .timepicker-ui-hour[contenteditable='true']:active, .timepicker-ui-minutes[contenteditable='true']:focus, .timepicker-ui-minutes[contenteditable='true']:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all; }\n\n.timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n height: 70px;\n outline: none;\n border: 2px solid transparent; }\n .timepicker-ui-hour.mobile[contenteditable='true']:focus, .timepicker-ui-hour.mobile[contenteditable='true']:active, .timepicker-ui-minutes.mobile[contenteditable='true']:focus, .timepicker-ui-minutes.mobile[contenteditable='true']:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all; }\n\n.timepicker-ui-dots, .timepicker-ui-dots.mobile {\n padding-left: 5px;\n padding-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 57.6px;\n user-select: none;\n touch-action: none; }\n\n.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {\n display: flex;\n flex-direction: column;\n height: 80px;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 500;\n color: #787878; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-type-time {\n flex-direction: row;\n width: 100%; } }\n\n.timepicker-ui-wrapper-type-time.mobile {\n height: 70px; }\n\n.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid #d6d6d6;\n transition: all 0.3s ease;\n cursor: pointer;\n width: 100%;\n height: 100%; }\n .timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {\n color: #6200ee;\n background-color: #ece0fd; }\n .timepicker-ui-am.active, .timepicker-ui-pm.active, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile.active {\n pointer-events: none; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am, .timepicker-ui-pm {\n width: 50%;\n height: 44px; } }\n\n.timepicker-ui-am, .timepicker-ui-am.mobile {\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-width: calc(0.7504px / 2); }\n\n.timepicker-ui-am.mobile {\n border-bottom-left-radius: 0; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am {\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n border-top-right-radius: 0;\n border-top-width: 1.5008px;\n border-right-width: calc(0.7504px / 2); } }\n\n.timepicker-ui-pm, .timepicker-ui-pm.mobile {\n border-bottom-left-radius: 7px;\n border-bottom-right-radius: 7px;\n border-top-width: calc(0.7504px / 2);\n width: 54px; }\n\n.timepicker-ui-pm.mobile {\n border-top-right-radius: 0; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-pm {\n border-bottom-right-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-width: 1.5008px;\n border-left-width: calc(0.7504px / 2);\n width: 50%;\n height: 44px; } }\n\n.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {\n color: #6200ee;\n text-transform: uppercase;\n border-radius: 7px;\n background-color: transparent;\n text-align: center;\n font-size: 15.2px;\n padding-top: 9px;\n padding-bottom: 9px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer; }\n .timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {\n background-color: #d6d6d6; }\n\n.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {\n width: 72px;\n margin-right: 4px; }\n\n.timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {\n width: 64px;\n margin-left: 4px; }\n\n.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n width: 44px;\n height: 44px;\n position: relative;\n bottom: -26px;\n left: 12px;\n transition: all 0.3s ease; }\n .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon,\n .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon,\n .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #d6d6d6;\n border-radius: 7px; }\n\n.timepicker-ui-keyboard-icon-wrapper.mobile {\n bottom: -5px; }\n\n.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {\n padding: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #4e545a;\n height: 44px;\n width: 44px; }\n .timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {\n color: #6200ee; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n position: absolute;\n bottom: 8px; } }\n\n.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {\n margin-right: 8px;\n position: relative;\n bottom: -14px; }\n\n.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {\n position: absolute;\n bottom: 6px;\n font-size: 12.8px;\n color: #a9a9a9;\n left: 0; }\n\n.timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {\n left: 120px; }\n\n.timepicker-ui-clock-hand {\n position: absolute;\n background-color: #6200ee;\n bottom: 50%;\n height: 40%;\n left: calc(50% - 1px);\n transform-origin: center bottom 0;\n width: 2px; }\n\n.timepicker-ui-clock-hand-24h {\n height: 23%; }\n\n.timepicker-ui-circle-hand {\n position: absolute;\n transform: translate(-48%, -50%);\n width: 4px;\n height: 4px;\n border-radius: 100%;\n transition: all 0.2s ease;\n height: 46px;\n width: 46px;\n box-sizing: border-box !important;\n background-color: #6200ee; }\n .timepicker-ui-circle-hand.small-circle {\n height: 36px;\n width: 36px;\n box-sizing: border-box !important; }\n\n.timepicker-ui-circle-hand-24h {\n transform: translate(-50%, -50%);\n height: 32px;\n width: 32px;\n top: 4px;\n left: 1px; }\n\n.timepicker-ui-value-tips, .timepicker-ui-value-tips-24h {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s ease color;\n border-radius: 50%;\n outline: none; }\n .timepicker-ui-value-tips:focus, .timepicker-ui-value-tips-24h:focus {\n background: rgba(143, 143, 143, 0.315);\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }\n .timepicker-ui-value-tips.active, .timepicker-ui-value-tips-24h.active {\n color: #fff;\n transition: none; }\n\n.timepicker-ui-clock-animation {\n animation: clockanimation 350ms linear; }\n\n.timepicker-ui-open-element.disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-tips-animation {\n transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n\n.timepicker-ui-tips-disabled {\n color: rgba(156, 155, 155, 0.6);\n pointer-events: none; }\n\n.opacity {\n transition: opacity 0.15s linear; }\n .opacity.show {\n opacity: 1; }\n\n.invalid-value {\n border-color: #d50000 !important;\n color: #d50000 !important; }\n .invalid-value:hover, .invalid-value:focus, .invalid-value:active {\n border-color: #d50000 !important;\n color: #d50000 !important; }\n\n@keyframes clockanimation {\n 0% {\n opacity: 0;\n transform: scale(0.8); }\n to {\n opacity: 1;\n transform: scale(1); } }\n\n.timepicker-ui-invalid-format {\n border: 2px solid red;\n color: red; }\n\n.timepicker-ui-invalid-text {\n color: red; }\n");h(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n\n.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {\n border-radius: 0;\n background-color: #4e0d3a;\n color: #fff; }\n .timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {\n color: #e5e5e5; }\n\n.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {\n background-color: #71135c; }\n\n.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {\n background-color: #71135c;\n border-radius: 0;\n color: #fff; }\n .timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n .timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {\n background-color: #f7363e; }\n\n.timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:active {\n border-color: #fff;\n outline-color: #fff; }\n\n.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {\n color: #fff; }\n\n.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {\n color: #fff; }\n\n.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {\n border: 0.125rem solid transparent;\n border-radius: 0;\n background-color: #71135c; }\n\n.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {\n color: #fff;\n background-color: #f7363e; }\n\n.timepicker-ui-am.crane-straight.radius {\n border-top-left-radius: 1.25rem;\n border-top-right-radius: 1.25rem; }\n\n.timepicker-ui-pm.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-bottom-right-radius: 1.25rem; }\n\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-am.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; } }\n\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-pm.crane-straight.radius {\n border-bottom-right-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0; } }\n\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-am.mobile.crane-straight.radius {\n border-bottom-left-radius: 0rem;\n border-bottom-right-radius: 0rem; } }\n\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-pm.mobile.crane-straight.radius {\n border-top-left-radius: 0rem;\n border-top-right-radius: 0rem; } }\n\n.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {\n color: #fff;\n border-radius: 0rem; }\n .timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {\n border-radius: 0.8125rem; }\n\n.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {\n color: #fff; }\n .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #f7363e;\n color: #fff;\n border-radius: 0; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {\n border-radius: 0.875rem; }\n\n.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {\n color: #fff; }\n .timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-clock-hand.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-circle-hand.crane-straight {\n border-color: #f7363e;\n background-color: #f7363e; }\n\n.timepicker-ui-value-tips.crane-straight {\n color: #fff; }\n");var m=":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n";h(m);const v={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'keyboard',iconTemplateMobile:'schedule',incrementHours:1,incrementMinutes:1,minuteMobileLabel:"Minute",mobile:!1,okLabel:"OK",pmLabel:"PM",timeLabel:"Select Time",switchToMinutesAfterSelectHour:!1,theme:"basic",clockType:"12h",disabledTime:void 0,currentTime:void 0,focusTrap:!0},b="mousedown mouseup mousemove mouseleave mouseover touchstart touchmove touchend",k=["00","13","14","15","16","17","18","19","20","21","22","23"],g=["12","1","2","3","4","5","6","7","8","9","10","11"],y=["00","05","10","15","20","25","30","35","40","45","50","55"];class _{constructor(e){this.clean=()=>{var e,i;const t=null===(e=this.tipsWrapper)||void 0===e?void 0:e.querySelectorAll("span.timepicker-ui-hour-time-12"),n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-minutes-time");this._removeClasses(t),this._removeClasses(n)},this.create=()=>{var e;if(!(this.clockFace&&this.array&&this.classToAdd&&this.tipsWrapper))return;const i=(this.clockFace.offsetWidth-32)/2,n=(this.clockFace.offsetHeight-32)/2,r=i-9;this.tipsWrapper.innerHTML="",null===(e=this.array)||void 0===e||e.forEach(((e,s)=>{var o,a,l,u,d,c;const p=s*(360/this.array.length)*(Math.PI/180);const h=document.createElement("span"),m=document.createElement("span");m.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(o=this.disabledTime)||void 0===o?void 0:o.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled")),this.hour===this.disabledTime.removedStartedHour&&(null===(l=null===(a=this.disabledTime)||void 0===a?void 0:a.startMinutes)||void 0===l?void 0:l.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(d=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===d?void 0:d.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1)),"24h"===this.clockType?(m.classList.add("timepicker-ui-value-tips-24h"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)):(m.classList.add("timepicker-ui-value-tips"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)),h.classList.add(this.classToAdd),"crane-straight"===this.theme&&(h.classList.add("crane-straight"),m.classList.add("crane-straight")),h.style.left=i+Math.sin(p)*r-h.offsetWidth+"px",h.style.bottom=n+Math.cos(p)*r-h.offsetHeight+"px",h.appendChild(m),null===(c=this.tipsWrapper)||void 0===c||c.appendChild(h)}))},this.updateDisable=e=>{var i,t;const n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-hour-time-12"),r=null===(t=this.tipsWrapper)||void 0===t?void 0:t.querySelectorAll("span.timepicker-ui-minutes-time");if(this._removeClasses(n),this._removeClasses(r),(null==e?void 0:e.hoursToUpdate)&&n&&this._addClassesWithIncludes(n,e.hoursToUpdate),(null==e?void 0:e.minutesToUpdate)&&r){const{actualHour:i,removedEndHour:t,removedStartedHour:n,startMinutes:s,endMinutes:o}=e.minutesToUpdate;t===i&&o.length>0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)0?this._addClassesWithIncludes(r,s):Number(i)>Number(n)&&Number(i)=Number(i[0])&&this._addClasses(r),0===o.length&&a.length>1&&Number(d)>=Number(l)&&this._addClasses(r),o.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,o):Number(d)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&o.length>0&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,o):Number(d)>Number(l)&&this._addClasses(r))),"PM"===s&&(d0&&Number(d)===u-1&&this._addClassesWithIncludes(r,a)))}},this._removeClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.remove("timepicker-ui-tips-disabled"),i[0].classList.remove("timepicker-ui-tips-disabled"),i[0].tabIndex=0}))},this._addClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.add("timepicker-ui-tips-disabled"),i[0].classList.add("timepicker-ui-tips-disabled"),i[0].tabIndex=-1}))},this._addClassesWithIncludes=(e,i)=>{null==e||e.forEach((({classList:e,children:t,textContent:n})=>{(null==i?void 0:i.includes(n))&&(e.add("timepicker-ui-tips-disabled"),t[0].classList.add("timepicker-ui-tips-disabled"),t[0].tabIndex=-1)}))},this.array=null==e?void 0:e.array,this.classToAdd=null==e?void 0:e.classToAdd,this.clockFace=null==e?void 0:e.clockFace,this.tipsWrapper=null==e?void 0:e.tipsWrapper,this.theme=null==e?void 0:e.theme,this.clockType=null==e?void 0:e.clockType,this.disabledTime=null==e?void 0:e.disabledTime,this.hour=null==e?void 0:e.hour}}const T=(e,i)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout((()=>{e(...n)}),i)}};exports.TimepickerUI=class{constructor(o,a){var h,f,x;this.create=()=>{this._updateInputValueWithCurrentTimeOnStart(),this._checkDisabledValuesOnStart(),this._setTimepickerClassToElement(),this._setInputClassToInputElement(),this._setDataOpenToInputIfDosentExistInWrapper(),this._setClassTopOpenElement(),this._handleOpenOnEnterFocus(),this._handleOpenOnClick(),this._getDisableTime()},this.open=e=>{this.create(),this._eventsBundle(),l(e)},this.close=T(((...e)=>{var i;if(e.length>2||!this.modalElement)return;const[t]=e.filter((e=>"boolean"==typeof e)),[n]=e.filter((e=>"function"==typeof e));t&&(this._handleOkButton(),null===(i=this.okButton)||void 0===i||i.click()),this._isTouchMouseMove=!1,b.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),document.removeEventListener("keypress",this._handleEscClick),this.wrapper.removeEventListener("keydown",this._focusTrapHandler),this._options.enableSwitchIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._removeAnimationToClose(),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{var e;this._options.focusInputAfterCloseModal&&(null===(e=this.input)||void 0===e||e.focus()),null!==this.modalElement&&(this.modalElement.remove(),this._isModalRemove=!0)}),300),l(n)}),300),this.destroy=e=>{b.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),this._options.enableSwitchIcon&&this.keyboardClockIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._cloned=this._element.cloneNode(!0),this._element.after(this._cloned),this._element.remove(),this._element=null,null===this._element&&l(e),this._element=this._cloned},this.update=(e,i)=>{this._options=Object.assign(Object.assign({},this._options),e.options),this._checkMobileOption(),e.create&&this.create(),l(i)},this._preventClockTypeByCurrentTime=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.preventClockType)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{currentTime:e,clockType:i}=this._options,{type:t}=d(this.input,i,e,!0);this._options.clockType=t?"12h":"24h"}},this._updateInputValueWithCurrentTimeOnStart=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.updateInput)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{hour:e,minutes:i,type:t}=d(this.input,this._options.clockType,this._options.currentTime);this.input.value=t?`${e}:${i} ${t}`:`${e}:${i}`}},this._setTheme=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div"),n=[...null===(i=this.modalElement)||void 0===i?void 0:i.querySelectorAll("input"),...t],{theme:r}=this._options;"crane-straight"===r?n.forEach((e=>e.classList.add("crane-straight"))):"crane-radius"===r&&n.forEach((e=>e.classList.add("crane-straight","radius")))},this._setInputClassToInputElement=()=>{var e;t(this.input,"timepicker-ui-input")||null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-input")},this._setDataOpenToInputIfDosentExistInWrapper=()=>{var e;null===this.openElementData&&(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"))},this._setClassTopOpenElement=()=>{this.openElement.forEach((e=>null==e?void 0:e.classList.add("timepicker-ui-open-element")))},this._removeBackdrop=()=>{var e;this._options.backdrop||(null===(e=this.modalElement)||void 0===e||e.classList.add("removed"),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))))},this._setNormalizeClass=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div");null===(i=this.modalElement)||void 0===i||i.classList.add("timepicker-ui-normalize"),null==t||t.forEach((e=>e.classList.add("timepicker-ui-normalize")))},this._setFlexEndToFooterIfNoKeyboardIcon=()=>{!this._options.enableSwitchIcon&&this.footer&&(this.footer.style.justifyContent="flex-end")},this._eventsBundle=()=>{var e,i,t,n,r,s,o,a,l,u,d,c,p;if(this._isModalRemove){if(this._handleEscClick(),this._setErrorHandler(),this._removeErrorHandler(),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))),null===(e=this.input)||void 0===e||e.blur(),this._setScrollbarOrNot(),this._setModalTemplate(),this._setNormalizeClass(),this._removeBackdrop(),this._setBgColorToCirleWithHourTips(),this._setOnStartCSSClassesIfClockType24h(),this._setClassActiveToHourOnOpen(),null!==this.clockFace){const e=new _({array:g,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(s=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===s?void 0:s.hours,clockType:"12h",hour:this.hour.value});if(e.create(),"24h"===this._options.clockType){new _({array:k,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:(null===(a=null===(o=this._disabledTime)||void 0===o?void 0:o.value)||void 0===a?void 0:a.isInterval)?null===(l=this._disabledTime)||void 0===l?void 0:l.value.rangeArrHour:null===(d=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===d?void 0:d.hours,hour:this.hour.value}).create()}else(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.endType)?setTimeout((()=>{var i,t,n,r,s,o,a,l;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)&&e.updateDisable({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour,minutesToUpdate:{endMinutes:null===(s=this._disabledTime)||void 0===s?void 0:s.value.endMinutes,removedEndHour:null===(o=this._disabledTime)||void 0===o?void 0:o.value.removedEndHour,removedStartedHour:null===(a=this._disabledTime)||void 0===a?void 0:a.value.removedStartedHour,actualHour:this.hour.value,startMinutes:null===(l=this._disabledTime)||void 0===l?void 0:l.value.startMinutes}})}),300):setTimeout((()=>{var i,t,n;e.updateDisable({minutesToUpdate:{actualHour:this.hour.value,pmHours:null===(i=this._disabledTime)||void 0===i?void 0:i.value.pmHours,amHours:null===(t=this._disabledTime)||void 0===t?void 0:t.value.amHours,activeMode:null===(n=this.activeTypeMode)||void 0===n?void 0:n.textContent}})}),300),e.updateDisable()}this._setFlexEndToFooterIfNoKeyboardIcon(),setTimeout((()=>{this._setTheme()}),0),this._setAnimationToOpen(),this._getInputValueOnOpenAndSet(),this._toggleClassActiveToValueTips(this.hour.value),this._isMobileView||(this._setTransformToCircleWithSwitchesHour(this.hour.value),this._handleAnimationClock()),this._handleMinutesEvents(),this._handleHourEvents(),"24h"!==this._options.clockType&&(this._handleAmClick(),this._handlePmClick()),this.clockFace&&this._handleMoveHand(),this._handleCancelButton(),this._handleOkButton(),this.modalElement&&(this._setShowClassToBackdrop(),this._handleBackdropClick()),this._handleIconChangeView(),this._handleClickOnHourMobile(),this._options.focusTrap&&this._focusTrapHandler()}},this._handleOpenOnClick=()=>{this.openElement.forEach((e=>this._clickTouchEvents.forEach((i=>null==e?void 0:e.addEventListener(i,(()=>this._eventsBundle()))))))},this._getInputValueOnOpenAndSet=()=>{var e,i;const t=d(this.input,this._options.clockType,this._options.currentTime);if(void 0===t)return this.hour.value="12",this.minutes.value="00",n(this._element,"show",{hour:this.hour.value,minutes:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),void("24h"!==this._options.clockType&&this.AM.classList.add("active"));let[r,s,o]=this.input.value.split(":").join(" ").split(" ");0===this.input.value.length&&(r=t.hour,s=t.minutes,o=t.type),this.hour.value=r,this.minutes.value=s;const a=document.querySelector(`[data-type='${o}']`);"24h"!==this._options.clockType&&a&&a.classList.add("active"),n(this._element,"show",Object.assign(Object.assign({},t),{type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}))},this._handleCancelButton=()=>{this._clickTouchEvents.forEach((e=>{this.cancelButton.addEventListener(e,(()=>{var e;const i=d(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},i),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))}))},this._handleOkButton=()=>{this._clickTouchEvents.forEach((e=>{var i;null===(i=this.okButton)||void 0===i||i.addEventListener(e,(()=>{var e,i,t;const{clockType:r,disabledTime:s}=this._options,o=c(this.hour.value,"hour",r),a=c(this.minutes.value,"minutes",r);let l;const d=p(this.hour.value,"hour",r,null==s?void 0:s.hours),h=p(this.minutes.value,"minutes",r,null==s?void 0:s.minutes);if((null==s?void 0:s.interval)&&(l=((e,i,t,n)=>{const r=t?u(`${e}:${i} ${t}`.trim()):`${e}:${i}`.trim();let s,o;if(t){const[e,i]=n.trim().split("-").map((e=>e.trim()));s=u(e),o=u(i)}else{const[e,i]=n.trim().split("-"),t=e=>e.trim().split(":").map((e=>Number(e)<=9?`0${Number(e)}`:e)).join(":");s=t(e),o=t(i)}return ro})(this.hour.value,this.minutes.value,null===(e=this.activeTypeMode)||void 0===e?void 0:e.textContent,s.interval)),!1===l||!1===o||!1===a||!1===d||!1===h)return!1!==l&&a&&h||this.minutes.classList.add("invalid-value"),void(!1!==l&&o&&d||this.hour.classList.add("invalid-value"));this.input.value=`${this.hour.value}:${this.minutes.value} ${"24h"===this._options.clockType?"":null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type}`.trimEnd(),n(this._element,"accept",{hour:this.hour.value,minutes:this.minutes.value,type:null===(t=this.activeTypeMode)||void 0===t?void 0:t.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),this.close()}))}))},this._setShowClassToBackdrop=()=>{this._options.backdrop&&setTimeout((()=>{this.modalElement.classList.add("show")}),300)},this._handleBackdropClick=()=>{var e;null===(e=this.modalElement)||void 0===e||e.addEventListener("click",(e=>{var i;const r=e.target;if(!t(r,"timepicker-ui-modal"))return;const s=d(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},s),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))},this._setBgColorToCirleWithHourTips=()=>{if(!this._options)return;const{mobile:e,theme:i}=this._options;e||null===this.circle||(this.circle.style.backgroundColor="crane-straight"===i||"crane-radius"===i?m.cranered400:m.purple)},this._setBgColorToCircleWithMinutesTips=()=>{const{theme:e}=this._options;this.minutes.value&&y.includes(this.minutes.value)&&(this.circle.style.backgroundColor="crane-straight"===e||"crane-radius"===e?m.cranered400:m.purple,this.circle.classList.remove("small-circle"))},this._removeBgColorToCirleWithMinutesTips=()=>{this.minutes.value&&y.includes(this.minutes.value)||(this.circle.style.backgroundColor="",this.circle.classList.add("small-circle"))},this._setTimepickerClassToElement=()=>{var e;null===(e=this._element)||void 0===e||e.classList.add("timepicker-ui")},this._setClassActiveToHourOnOpen=()=>{var e;this._options.mobile||this._isMobileView||null===(e=this.hour)||void 0===e||e.classList.add("active")},this._setMinutesToClock=e=>{var i,t,n,r,s;null!==this.clockFace&&this._setTransformToCircleWithSwitchesMinutes(e),this._removeBgColorToCirleWithMinutesTips();const o=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.minutes)?null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.minutes:null===(s=this._disabledTime)||void 0===s?void 0:s.value,a=new _({array:y,classToAdd:"timepicker-ui-minutes-time",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:o,hour:this.hour.value,clockType:this._options.clockType});a.create(),"12h"===this._options.clockType&&a.updateDisable(),this._toggleClassActiveToValueTips(e),"24h"===this._options.clockType&&(this.tipsWrapperFor24h.innerHTML="")},this._setHoursToClock=e=>{var i,t,n,r,s;if(null!==this.clockFace){this._setTransformToCircleWithSwitchesHour(e),this._setBgColorToCirleWithHourTips();const o=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(s=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===s?void 0:s.hours,a=new _({array:g,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:o,clockType:"12h",hour:this.hour.value});a.create(),"24h"===this._options.clockType?new _({array:k,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:o,hour:this.hour.value}).create():a.updateDisable(),this._toggleClassActiveToValueTips(e)}},this._setTransformToCircleWithSwitchesHour=e=>{const i=Number(e);let t=i>12?30*i-360:30*i;360===t&&(t=0),t>360||(this.clockHand.style.transform=`rotateZ(${t}deg)`)},this._setTransformToCircleWithSwitchesMinutes=e=>{const i=6*Number(e);i>360||(this.clockHand.style.transform=`rotateZ(${i}deg)`)},this._handleAmClick=()=>{this._clickTouchEvents.forEach((e=>{this.AM.addEventListener(e,(e=>{var i,r,s,o;if(e.target.classList.add("active"),this.PM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300),e.updateDisable()}n(this._element,"selectamtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(o=this.activeTypeMode)||void 0===o?void 0:o.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handlePmClick=()=>{this._clickTouchEvents.forEach((e=>{this.PM.addEventListener(e,(e=>{var i,r,s,o;if(e.target.classList.add("active"),this.AM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectpmtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(o=this.activeTypeMode)||void 0===o?void 0:o.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handleAnimationClock=()=>{this._options.animation&&setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.add("timepicker-ui-clock-animation"),setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.remove("timepicker-ui-clock-animation")}),600)}),150)},this._handleAnimationSwitchTipsMode=()=>{this.clockHand.classList.add("timepicker-ui-tips-animation"),setTimeout((()=>{var e;null===(e=this.clockHand)||void 0===e||e.classList.remove("timepicker-ui-tips-animation")}),401)},this._handleClasses24h=(e,i)=>{var t;const n=e.target;this.hourTips&&"24h"===this._options.clockType&&(Number(n.textContent)>12||0===Number(n.textContent)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(t=this.tipsWrapperFor24h)||void 0===t||t.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),n&&i&&(i.value=n.value.replace(/\D+/g,""),i.click())},this._handleHourEvents=()=>{var e,i;this._inputEvents.forEach((e=>{var i;null===(i=this.hour)||void 0===i||i.addEventListener(e,(e=>{var i,r,s,o,a;const l=e.target;if(null!==this.clockFace&&this._handleAnimationSwitchTipsMode(),"24h"===this._options.clockType&&(Number(l.value)>12||0===Number(l.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),this._setHoursToClock(l.value),l.classList.add("active"),this.minutes.classList.remove("active"),"12h"===this._options.clockType&&(null===(r=this._options.disabledTime)||void 0===r?void 0:r.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(s=this._disabledTime)||void 0===s?void 0:s.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selecthourmode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(a=this.activeTypeMode)||void 0===a?void 0:a.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),null!==this.clockFace&&this.circle.classList.remove("small-circle")}))})),null===(e=this.hour)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.hour))),null===(i=this.hour)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.hour)))},this._handleMinutesEvents=()=>{var e,i;this._inputEvents.forEach((e=>{this.minutes.addEventListener(e,(e=>{var i,r,s,o,a,l;const u=e.target;if(null!==this.clockFace&&(this._handleAnimationSwitchTipsMode(),this._setMinutesToClock(u.value)),"24h"===this._options.clockType&&(this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.add("timepicker-ui-tips-wrapper-24h-disabled")),u.classList.add("active"),null===(r=this.hour)||void 0===r||r.classList.remove("active"),"12h"===this._options.clockType&&(null===(s=this._options.disabledTime)||void 0===s?void 0:s.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?g:y});(null===(o=this._disabledTime)||void 0===o?void 0:o.value.startType)===(null===(a=this._disabledTime)||void 0===a?void 0:a.value.endType)?setTimeout((()=>{var i,t,n;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectminutemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(l=this.activeTypeMode)||void 0===l?void 0:l.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))})),null===(e=this.minutes)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.minutes))),null===(i=this.minutes)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.minutes)))},this._handleEventToMoveHand=e=>{var o,a,l,u,c,p,h,m,v,b,k,g,y,_,T,f,x,w,M,C,E,H,L,S,N,$,A,O,I,W,j,F,P,D,q,B,V,z,U,R,Y,Z,K,X,J,G,Q,ee,ie,te,ne,re,se,oe,ae,le,ue,de,ce,pe,he,me;const{target:ve,type:be,touches:ke}=e,ge=ve,{incrementMinutes:ye,incrementHours:_e,switchToMinutesAfterSelectHour:Te}=this._options;if(!i(e,this.clockFace))return;const fe=i(e,this.clockFace),xe=this.clockFace.offsetWidth/2;let we=fe&&Math.atan2(fe.y-xe,fe.x-xe);if(r()){const t=i(e,this.clockFace,!0);if(!t)return;we=Math.atan2(t.y-xe,t.x-xe)}if("mouseup"===be||"touchend"===be)return this._isTouchMouseMove=!1,void(Te&&(t(ge,"timepicker-ui-value-tips")||t(ge,"timepicker-ui-value-tips-24h")||t(ge,"timepicker-ui-tips-wrapper"))&&this.minutes.click());if("mousedown"!==be&&"mousemove"!==be&&"touchmove"!==be&&"touchstart"!==be||"mousedown"!==be&&"touchstart"!==be&&"touchmove"!==be||((t(ge,"timepicker-ui-clock-face")||t(ge,"timepicker-ui-circle-hand")||t(ge,"timepicker-ui-hour-time-12")||t(ge,"timepicker-ui-minutes-time")||t(ge,"timepicker-ui-clock-hand")||t(ge,"timepicker-ui-value-tips")||t(ge,"timepicker-ui-value-tips-24h")||t(ge,"timepicker-ui-tips-wrapper")||t(ge,"timepicker-ui-tips-wrapper-24h"))&&!t(ge,"timepicker-ui-tips-disabled")?(e.preventDefault(),this._isTouchMouseMove=!0):this._isTouchMouseMove=!1),!this._isTouchMouseMove)return;if(null!==this.minutesTips){this.minutes.classList.add("active");let e,i=we&&s(Math.trunc(180*we/Math.PI)+90,ye,6);if(void 0===i)return;if(i<0?(e=Math.round(360+i/6)%60,i=360+6*Math.round(i/6)):(e=Math.round(i/6)%60,i=6*Math.round(i/6)),null===(o=this._disabledTime)||void 0===o?void 0:o.value.isInterval)if((null===(c=this._disabledTime)||void 0===c?void 0:c.value.endType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.startType)){if((null===(v=null===(m=null===(h=this._disabledTime)||void 0===h?void 0:h.value)||void 0===m?void 0:m.endMinutes)||void 0===v?void 0:v.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(k=null===(b=this._disabledTime)||void 0===b?void 0:b.value)||void 0===k?void 0:k.removedEndHour)&&(null===(g=this._disabledTime)||void 0===g?void 0:g.value.endType)===(null===(y=this.activeTypeMode)||void 0===y?void 0:y.textContent))return;if((null===(f=null===(T=null===(_=this._disabledTime)||void 0===_?void 0:_.value)||void 0===T?void 0:T.startMinutes)||void 0===f?void 0:f.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(w=null===(x=this._disabledTime)||void 0===x?void 0:x.value)||void 0===w?void 0:w.removedStartedHour)&&(null===(M=this._disabledTime)||void 0===M?void 0:M.value.startType)===(null===(C=this.activeTypeMode)||void 0===C?void 0:C.textContent))return}else{if((null===(E=this.activeTypeMode)||void 0===E?void 0:E.textContent)===(null===(H=this._disabledTime)||void 0===H?void 0:H.value.endType)&&((null===(N=null===(S=null===(L=this._disabledTime)||void 0===L?void 0:L.value)||void 0===S?void 0:S.endMinutes)||void 0===N?void 0:N.includes(e<=9?`0${e}`:`${e}`))&&(null===($=this._disabledTime)||void 0===$?void 0:$.value.removedPmHour)===this.hour.value||(null===(A=this._disabledTime)||void 0===A?void 0:A.value.pmHours.map(Number).includes(Number(this.hour.value)))))return;if((null===(O=this.activeTypeMode)||void 0===O?void 0:O.textContent)===(null===(I=this._disabledTime)||void 0===I?void 0:I.value.startType)&&((null===(F=null===(j=null===(W=this._disabledTime)||void 0===W?void 0:W.value)||void 0===j?void 0:j.startMinutes)||void 0===F?void 0:F.includes(e<=9?`0${e}`:`${e}`))&&(null===(P=this._disabledTime)||void 0===P?void 0:P.value.removedAmHour)===this.hour.value||(null===(D=this._disabledTime)||void 0===D?void 0:D.value.amHours.map(Number).includes(Number(this.hour.value)))))return}else if(null===(u=null===(l=null===(a=this._disabledTime)||void 0===a?void 0:a.value)||void 0===l?void 0:l.minutes)||void 0===u?void 0:u.includes(e<=9?`0${e}`:`${e}`))return;this.minutes.value=e>=10?`${e}`:`0${e}`,this.clockHand.style.transform=`rotateZ(${i}deg)`,this._degreesMinutes=i,this._toggleClassActiveToValueTips(this.minutes.value),this._removeBgColorToCirleWithMinutesTips(),this._setBgColorToCircleWithMinutesTips(),n(this._element,"update",Object.assign(Object.assign({},d(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:be,type:null===(q=this.activeTypeMode)||void 0===q?void 0:q.dataset.type}))}const Me=ke?ke[0]:void 0,Ce=ke&&Me?document.elementFromPoint(Me.clientX,Me.clientY):null;if(null!==this.hourTips){if(null===(B=this.hour)||void 0===B||B.classList.add("active"),!t(Ce||ge,"timepicker-ui-value-tips-24h")&&!t(Ce||ge,"timepicker-ui-tips-disabled")&&(t(Ce||ge,"timepicker-ui-value-tips")||t(Ce||ge,"timepicker-ui-tips-wrapper"))){let e,i=we&&s(Math.trunc(180*we/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%12,i=360+i):(e=Math.round(i/30)%12,(0===e||e>12)&&(e=12));const t=(null===(V=this._disabledTime)||void 0===V?void 0:V.value.isInterval)?"rangeArrHour":"hours";if((null===(z=this._disabledTime)||void 0===z?void 0:z.value.endType)===(null===(R=null===(U=this._disabledTime)||void 0===U?void 0:U.value)||void 0===R?void 0:R.startType)){if("string"==typeof(null===(Z=null===(Y=this._disabledTime)||void 0===Y?void 0:Y.value)||void 0===Z?void 0:Z.endType)){if((null===(X=null===(K=this._disabledTime)||void 0===K?void 0:K.value)||void 0===X?void 0:X.endType)===(null===(J=this.activeTypeMode)||void 0===J?void 0:J.textContent)&&(null===(Q=null===(G=this._disabledTime)||void 0===G?void 0:G.value)||void 0===Q?void 0:Q.startType)===(null===(ee=this.activeTypeMode)||void 0===ee?void 0:ee.textContent)&&(null===(te=null===(ie=this._disabledTime)||void 0===ie?void 0:ie.value[t])||void 0===te?void 0:te.includes(e.toString())))return}else if(null===(re=null===(ne=this._disabledTime)||void 0===ne?void 0:ne.value[t])||void 0===re?void 0:re.includes(e.toString()))return}else{if((null===(se=this._disabledTime)||void 0===se?void 0:se.value.startType)===(null===(oe=this.activeTypeMode)||void 0===oe?void 0:oe.textContent)&&(null===(ae=this._disabledTime)||void 0===ae?void 0:ae.value.amHours.includes(e.toString())))return;if((null===(le=this._disabledTime)||void 0===le?void 0:le.value.endType)===(null===(ue=this.activeTypeMode)||void 0===ue?void 0:ue.textContent)&&(null===(de=this._disabledTime)||void 0===de?void 0:de.value.pmHours.includes(e.toString())))return}this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=e>9?`${e}`:`0${e}`,this._removeCircleClockClasses24h(),this._toggleClassActiveToValueTips(e)}if((t(Ce||ge,"timepicker-ui-value-tips-24h")||t(Ce||ge,"timepicker-ui-tips-wrapper-24h"))&&!t(Ce||ge,"timepicker-ui-tips-disabled")){let e,i=we&&s(Math.trunc(180*we/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%24,i=360+i):(e=Math.round(i/30)+12,12===e&&(e="00"));const t=(null===(ce=this._disabledTime)||void 0===ce?void 0:ce.value.isInterval)?"rangeArrHour":"hours";if(null===(he=null===(pe=this._disabledTime)||void 0===pe?void 0:pe.value[t])||void 0===he?void 0:he.includes(e.toString()))return;this._setCircleClockClasses24h(),this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=`${e}`,this._toggleClassActiveToValueTips(e)}n(this._element,"update",Object.assign(Object.assign({},d(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:be,type:null===(me=this.activeTypeMode)||void 0===me?void 0:me.dataset.type}))}},this._toggleClassActiveToValueTips=e=>{const i=this.allValueTips.find((i=>Number(i.innerText)===Number(e)));this.allValueTips.map((e=>e.classList.remove("active"))),void 0!==i&&i.classList.add("active")},this._handleMoveHand=()=>{this._options.mobile||this._isMobileView||b.split(" ").forEach((e=>{"touchstart"===e||"touchmove"===e||"touchend"===e?document.addEventListener(e,this._mutliEventsMoveHandler,{passive:!1}):document.addEventListener(e,this._mutliEventsMoveHandler,!1)}))},this._setModalTemplate=()=>{if(!this._options)return;const{appendModalSelector:e}=this._options;if(""!==e&&e){const i=null===document||void 0===document?void 0:document.querySelector(e);null==i||i.insertAdjacentHTML("beforeend",this.modalTemplate)}else document.body.insertAdjacentHTML("afterend",this.modalTemplate)},this._setScrollbarOrNot=()=>{this._options.enableScrollbar?setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400):(document.body.style.paddingRight=`${(()=>{const e=document.createElement("div");e.className="timepicker-ui-measure",document.body.appendChild(e);const i=e.getBoundingClientRect().width-e.clientWidth;return document.body.removeChild(e),i})()}px`,document.body.style.overflowY="hidden")},this._setAnimationToOpen=()=>{var e,i;null===(e=this.modalElement)||void 0===e||e.classList.add("opacity"),this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.add("show")}),150):null===(i=this.modalElement)||void 0===i||i.classList.add("show")},this._removeAnimationToClose=()=>{var e;this.modalElement&&(this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.remove("show")}),150):null===(e=this.modalElement)||void 0===e||e.classList.remove("show"))},this._handlerViewChange=T((()=>{var e,i,n,r;const{clockType:s}=this._options;if(t(this.modalElement,"mobile")){const e=c(this.hour.value,"hour",s),t=c(this.minutes.value,"minutes",s);if(!1===e||!1===t)return t||this.minutes.classList.add("invalid-value"),void(e||null===(i=this.hour)||void 0===i||i.classList.add("invalid-value"));!0===e&&!0===t&&(t&&this.minutes.classList.remove("invalid-value"),e&&(null===(n=this.hour)||void 0===n||n.classList.remove("invalid-value"))),this.close(),this._isMobileView=!1,this._options.mobile=!1;const o=this.hour.value,a=this.minutes.value,l=null===(r=this.activeTypeMode)||void 0===r?void 0:r.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!1}}),setTimeout((()=>{if(this.open(),this.hour.value=o,this.minutes.value=a,"12h"===this._options.clockType){const e="PM"===l?"AM":"PM";this["PM"===l?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}this._setTransformToCircleWithSwitchesHour(this.hour.value),this._toggleClassActiveToValueTips(this.hour.value),Number(this.hour.value)>12||0===Number(this.hour.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h()}),300)}),300)}else{this.close(),this._isMobileView=!0,this._options.mobile=!0;const i=this.hour.value,t=this.minutes.value,n=null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!0}}),setTimeout((()=>{if(this.open(),this.hour.value=i,this.minutes.value=t,"12h"===this._options.clockType){const e="PM"===n?"AM":"PM";this["PM"===n?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}}),300)}),300)}}),400),this._handleIconChangeView=()=>e(this,void 0,void 0,(function*(){this._options.enableSwitchIcon&&(r()?this.keyboardClockIcon.addEventListener("touchstart",this._handlerViewChange):this.keyboardClockIcon.addEventListener("click",this._handlerViewChange))})),this._handlerClickHourMinutes=i=>e(this,void 0,void 0,(function*(){var e,n;if(!this.modalElement)return;const{clockType:r,editable:s}=this._options,o=i.target,a=c(this.hour.value,"hour",r),l=c(this.minutes.value,"minutes",r);s&&(t(o,"timepicker-ui-hour")||t(o,"timepicker-ui-minutes")?!1!==a&&!1!==l||(l||this.minutes.classList.add("invalid-value"),a||null===(n=this.hour)||void 0===n||n.classList.add("invalid-value")):!0===a&&!0===l&&(l&&this.minutes.classList.remove("invalid-value"),a&&(null===(e=this.hour)||void 0===e||e.classList.remove("invalid-value"))))})),this._handleClickOnHourMobile=()=>{document.addEventListener("mousedown",this._eventsClickMobileHandler),document.addEventListener("touchstart",this._eventsClickMobileHandler)},this._handleKeyPress=e=>{"Escape"===e.key&&this.modalElement&&this.close()},this._handleEscClick=()=>{document.addEventListener("keydown",this._handleKeyPress)},this._focusTrapHandler=()=>{setTimeout((()=>{var e,i;const n=null===(e=this.wrapper)||void 0===e?void 0:e.querySelectorAll('div[tabindex="0"]:not([disabled])'),r=null===(i=this.wrapper)||void 0===i?void 0:i.querySelectorAll('input[tabindex="0"]:not([disabled])');if(!n||n.length<=0||r.length<=0)return;const s=[...r,...n],o=s[0],a=s[s.length-1];this.wrapper.focus(),this.wrapper.addEventListener("keydown",(({key:e,shiftKey:i,target:n})=>{const r=n;if("Tab"===e&&(i?document.activeElement===o&&a.focus():document.activeElement===a&&o.focus()),"Enter"===e&&(t(r,"timepicker-ui-minutes")&&this.minutes.click(),t(r,"timepicker-ui-hour")&&this.hour.click(),t(r,"timepicker-ui-cancel-btn")&&this.cancelButton.click(),t(r,"timepicker-ui-ok-btn")&&this.okButton.click(),t(r,"timepicker-ui-keyboard-icon-wrapper")&&this.keyboardClockIcon.click(),t(r,"timepicker-ui-am")&&this.AM.click(),t(r,"timepicker-ui-pm")&&this.PM.click(),t(r,"timepicker-ui-value-tips")||t(r,"timepicker-ui-value-tips-24h"))){const{left:e,top:i,x:n,y:s,width:o,height:a}=r.getBoundingClientRect(),l=document.elementFromPoint(n,s),u=()=>{var n;const r=new MouseEvent("mousedown",{clientX:e+o/2,clientY:i+a/2,cancelable:!0,bubbles:!0});t(l,"timepicker-ui-value-tips-24h")?null==l||l.dispatchEvent(r):null===(n=null==l?void 0:l.childNodes[0])||void 0===n||n.dispatchEvent(r),this._isTouchMouseMove=!1};u()}setTimeout((()=>{this.wrapper.addEventListener("mousedown",(()=>document.activeElement.blur()))}),100)}))}),301)},this._handleOpenOnEnterFocus=()=>{this.input.addEventListener("keydown",(({target:e,key:i})=>{e.disabled||"Enter"===i&&this.open()}))},this._element=o,this._cloned=null,this._options=((e,i)=>Object.assign(Object.assign({},i),e))(Object.assign(Object.assign({},a),(e=>{if(!e)return;const i=JSON.parse(JSON.stringify(e)),t=Object.keys(i);return Object.values(i).reduce(((e,i,n)=>(Number(i)?e[t[n]]=Number(i):e[t[n]]="true"===i||"false"===i?JSON.parse(i):i,e)),{})})(null===(h=this._element)||void 0===h?void 0:h.dataset)),v),this._isTouchMouseMove=!1,this._degreesHours=30*Number(d(null===(f=this._element)||void 0===f?void 0:f.querySelector("input"),this._options.clockType).hour),this._degreesMinutes=6*Number(d(null===(x=this._element)||void 0===x?void 0:x.querySelector("input"),this._options.clockType).minutes),this._isMobileView=!1,this._mutliEventsMove=e=>this._handleEventToMoveHand(e),this._mutliEventsMoveHandler=this._mutliEventsMove.bind(this),this._eventsClickMobile=e=>this._handlerClickHourMinutes(e),this._eventsClickMobileHandler=this._eventsClickMobile.bind(this),this._checkMobileOption(),this._clickTouchEvents=["click","mousedown","touchstart"],this._inputEvents=["change",...this._clickTouchEvents],this._disabledTime=null,this._preventClockTypeByCurrentTime(),this._isModalRemove=!0}get modalTemplate(){return this._options.mobile&&this._isMobileView?(e=>{const{mobileTimeLabel:i,amLabel:t,pmLabel:n,cancelLabel:r,okLabel:s,iconTemplateMobile:o,minuteMobileLabel:a,hourMobileLabel:l,enableSwitchIcon:u,animation:d,clockType:c}=e;return`\n `})(this._options):(e=>{const{iconTemplate:i,timeLabel:t,amLabel:n,pmLabel:r,cancelLabel:s,okLabel:o,enableSwitchIcon:a,animation:l,clockType:u,editable:d}=e;return`\n `})(this._options)}get modalElement(){return document.querySelector(".timepicker-ui-modal")}get clockFace(){return document.querySelector(".timepicker-ui-clock-face")}get input(){var e;return null===(e=this._element)||void 0===e?void 0:e.querySelector("input")}get clockHand(){return document.querySelector(".timepicker-ui-clock-hand")}get circle(){return document.querySelector(".timepicker-ui-circle-hand")}get tipsWrapper(){return document.querySelector(".timepicker-ui-tips-wrapper")}get tipsWrapperFor24h(){return document.querySelector(".timepicker-ui-tips-wrapper-24h")}get minutes(){return document.querySelector(".timepicker-ui-minutes")}get hour(){return document.querySelector(".timepicker-ui-hour")}get AM(){return document.querySelector(".timepicker-ui-am")}get PM(){return document.querySelector(".timepicker-ui-pm")}get minutesTips(){return document.querySelector(".timepicker-ui-minutes-time")}get hourTips(){return document.querySelector(".timepicker-ui-hour-time-12")}get allValueTips(){return[...document.querySelectorAll(".timepicker-ui-value-tips"),...document.querySelectorAll(".timepicker-ui-value-tips-24h")]}get openElementData(){var e;const i=null===(e=this._element)||void 0===e?void 0:e.querySelectorAll("[data-open]");if((null==i?void 0:i.length)>0){const e=[];return i.forEach((({dataset:i})=>{var t;return e.push(null!==(t=i.open)&&void 0!==t?t:"")})),[...new Set(e)]}return null}get openElement(){var e,i;return null===this.openElementData?(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"),[this.input]):null!==(i=this.openElementData.map((e=>{var i;return null===(i=this._element)||void 0===i?void 0:i.querySelectorAll(`[data-open='${e}']`)}))[0])&&void 0!==i?i:""}get cancelButton(){return document.querySelector(".timepicker-ui-cancel-btn")}get okButton(){return document.querySelector(".timepicker-ui-ok-btn")}get activeTypeMode(){return document.querySelector(".timepicker-ui-type-mode.active")}get keyboardClockIcon(){return document.querySelector(".timepicker-ui-keyboard-icon-wrapper")}get footer(){return document.querySelector(".timepicker-ui-footer")}get wrapper(){return document.querySelector(".timepicker-ui-wrapper")}_checkDisabledValuesOnStart(){if(!this._options.disabledTime||this._options.disabledTime.interval)return;const{disabledTime:{hours:e,minutes:i},clockType:t}=this._options,n=!e||p(e,"hour",t),r=!i||p(i,"minutes",t);if(!n||!r)throw new Error("You set wrong hours or minutes in disabled option")}_checkMobileOption(){this._isMobileView=!!this._options.mobile,this._options.mobile&&(this._options.editable=!0)}_getDisableTime(){this._disabledTime=(e=>{if(!e)return;const{disabledTime:i,clockType:t}=e;if(!i||Object.keys(i).length<=0||"Object"!==i.constructor.name)return;const{hours:n,interval:r,minutes:s}=i;if(r){delete i.hours,delete i.minutes;const[e,n]=r.toString().split("-"),{hour:s,minutes:l,type:u}=d({value:e.trimEnd()},t),{hour:c,minutes:p,type:h}=d({value:n.trimEnd().trimStart()},t);let m=o(s,c).map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`));const v=[],b=Number(l),k=Number(p);if(h===u)return b>0&&k<=0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):k<59&&k>0&&b<=0?(v.push(void 0,m[m.length-1]),m=m.slice(0,-1)):k>0&&b>0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):0===k&&0===b&&(v.push(void 0,m[m.length-1]),m.pop()),{value:{removedStartedHour:Number(v[0])<=9?`0${v[0]}`:v[0],removedEndHour:Number(v[1])<=9?`0${v[1]}`:v[1],rangeArrHour:m,isInterval:!0,startMinutes:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:a(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endType:h,startType:u}};{const e=o(s,12).map(String),i=a(1,c).map(String),t=[],n=[];return b>0&&k<=0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):k<59&&k>0&&b<=0?(n.push(e[0]),t.push(i[i.length-1]),i.splice(-1,1)):k>0&&b>0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):0===k&&0===b&&(t.push(i[i.length-1]),n.push(e[0]),i.pop()),{value:{isInterval:!0,endType:h,startType:u,pmHours:i,amHours:e,startMinutes:0===Number(l)?[]:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:a(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),removedAmHour:Number(n[0])<=9?`0${n[0]}`:n[0],removedPmHour:Number(t[0])<=9?`0${t[0]}`:t[0]}}}}return null==n||n.forEach((e=>{if("12h"===t&&Number(e)>12)throw new Error("The disabled hours value has to be less than 13");if("24h"===t&&Number(e)>23)throw new Error("The disabled hours value has to be less than 24")})),null==s||s.forEach((e=>{if(Number(e)>59)throw new Error("The disabled minutes value has to be less than 60")})),{value:{hours:null==n?void 0:n.map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`)),minutes:null==s?void 0:s.map((e=>Number(e)<=9?`0${e}`:`${e}`))}}})(this._options)}_removeCircleClockClasses24h(){var e,i;null===(e=this.circle)||void 0===e||e.classList.remove("timepicker-ui-circle-hand-24h"),null===(i=this.clockHand)||void 0===i||i.classList.remove("timepicker-ui-clock-hand-24h")}_setCircleClockClasses24h(){var e,i;this.circle&&(null===(e=this.circle)||void 0===e||e.classList.add("timepicker-ui-circle-hand-24h")),this.clockHand&&(null===(i=this.clockHand)||void 0===i||i.classList.add("timepicker-ui-clock-hand-24h"))}_setErrorHandler(){var e,i,t,r;const{error:s,currentHour:o,currentMin:a,currentType:l,currentLength:u}=d(this.input,this._options.clockType);if(s){const d=document.createElement("div");throw null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-invalid-format"),d.classList.add("timepicker-ui-invalid-text"),d.innerHTML="Invalid Time Format",(null===(i=this.input)||void 0===i?void 0:i.parentElement)&&null===(null===(t=this.input)||void 0===t?void 0:t.parentElement.querySelector(".timepicker-ui-invalid-text"))&&(null===(r=this.input)||void 0===r||r.after(d)),n(this._element,"geterror",{error:s,currentHour:o,currentMin:a,currentType:l,currentLength:u}),new Error(`Invalid Time Format: ${s}`)}}_removeErrorHandler(){var e,i;null===(e=this.input)||void 0===e||e.classList.remove("timepicker-ui-invalid-format");const t=null===(i=this._element)||void 0===i?void 0:i.querySelector(".timepicker-ui-invalid-text");t&&t.remove()}_setOnStartCSSClassesIfClockType24h(){if("24h"===this._options.clockType){let{hour:e}=d(this.input,this._options.clockType,this._options.currentTime);this.input.value.length>0&&(e=this.input.value.split(":")[0]),(Number(e)>12||0===Number(e))&&this._setCircleClockClasses24h()}}_getDestructuringObj(e){var i;const{endMinutes:t,removedEndHour:n,removedStartedHour:r,startMinutes:s,pmHours:o,amHours:a,removedAmHour:l,removedPmHour:u}=this._disabledTime.value;return e?{minutesToUpdate:{actualHour:this.hour.value,pmHours:o,amHours:a,activeMode:null===(i=this.activeTypeMode)||void 0===i?void 0:i.textContent,startMinutes:s,endMinutes:t,removedAmHour:l,removedPmHour:u}}:{minutesToUpdate:{endMinutes:t,removedEndHour:n,removedStartedHour:r,actualHour:this.hour.value,startMinutes:s}}}}; +"use strict";function e(e,i,t,n){return new(t||(t=Promise))((function(r,o){function s(e){try{l(n.next(e))}catch(e){o(e)}}function a(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var i;e.done?r(e.value):(i=e.value,i instanceof t?i:new t((function(e){e(i)}))).then(s,a)}l((n=n.apply(e,i||[])).next())}))}Object.defineProperty(exports,"__esModule",{value:!0});const i=(e,i,t=!1)=>{const{touches:n}=e,{clientX:r,clientY:o}=e;if(!i)return;const{left:s,top:a}=i.getBoundingClientRect();let l={x:0,y:0};if(void 0===n)l={x:r-s,y:o-a};else if(void 0!==n&&n.length>0&&Object.keys(n).length>0){const{clientX:e,clientY:i}=n[0];l={x:e-s,y:i-a}}return 0!==Object.keys(l).length||l.constructor!==Object?l:void 0},t=(e,i)=>!!e&&e.classList.contains(i),n=(e,i,t)=>{if(!e)return;const n=new CustomEvent(i,{detail:t});e.dispatchEvent(n)},r=(e,i,t)=>((e,i)=>Math.round(e/i)*i)(e,i*t),o=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((i,t)=>Number(e)+t)),s=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((e,t)=>Number(i)-t)).reverse(),a=e=>{e&&"function"==typeof e&&e()},l=(e="")=>{const i=e.replace(/(AM|PM|am|pm)/,(e=>` ${e}`)),t=new Date(`September 20, 2000 ${i}`);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}`},u=(e,i,t,n)=>{if(!e)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const{value:r}=e;if(t){if("boolean"==typeof t&&t){const[e,t]=(new Date).toLocaleTimeString().split(":");if(/[a-z]/i.test(t)&&"12h"===i){const[i,n]=t.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:t,type:void 0}}{const{time:e,locales:r,preventClockType:o}=t;let s=e;if(e||(s=new Date),o&&n){const[e,i]=new Date(s).toLocaleTimeString().split(":");if(/[a-z]/i.test(i)){const[t,n]=i.split(" ");return{hour:e,minutes:t,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:void 0}}const[a,l]=new Date(s).toLocaleTimeString(r,{timeStyle:"short"}).split(":");if(/[a-z]/i.test(l)&&"12h"===i){const[e,i]=l.split(" ");return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:e,type:i}}if("12h"===i){const[e,i]=new Date(`1970-01-01T${a}:${l}Z`).toLocaleTimeString("en-US",{timeZone:"UTC",hour12:!0,hour:"numeric",minute:"numeric"}).split(":"),[t,n]=i.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:a,minutes:t,type:n}}return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:l,type:void 0}}}if(""===r||!r)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const[o,s]=r.split(" "),[a,l]=o.split(":");if(/[a-z]/i.test(o))return{error:"The input contains invalid letters or whitespace."};if(r.includes(" ")){if(!s)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 5), currentLength: ${r.length}.`,currentLength:r.length};if(r.length>8||"AM"!==s&&"PM"!==s)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 8), currentLength: ${r.length} or invalid type (PM or AM), currentType: ${s}.`,currentLength:r.length,currentType:s}}let u=Number(l);const d=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?d>12||u>59||u<0||0===d||"AM"!==s&&"PM"!==s?{error:`The input contains invalid letters or numbers. Problem is with hour which should be less than 13 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${s}.`,currentHour:d,currentMin:u,currentType:s}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString(),type:s}:d<0||d>23||u>59?{error:`The input contains invalid numbers. Problem is with hour which should be less than 24 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:d,currentMin:u}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString()}},d=(e,i,t)=>{const n=Number(e);return"hour"===i?"24h"!==t?n>0&&n<=12:n>=0&&n<=23:"minutes"===i?n>=0&&n<=59:void 0},c=(e,i,t,n)=>{if(e){if(Array.isArray(e)&&e.length>0){return!e.map((e=>d(e,i,t))).some((e=>!1===e))}if("string"==typeof e||"number"==typeof e){const r=d(e,i,t),o=null==n?void 0:n.map(Number).includes(Number(e));return!(!r||o)}}};function p(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}p(':export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}\n\n.timepicker-ui * {\n box-sizing: border-box !important;\n}\n.timepicker-ui-modal {\n font-family: "Roboto", sans-serif;\n position: fixed;\n opacity: 0;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(156, 155, 155, 0.6);\n z-index: 5000;\n pointer-events: none;\n}\n.timepicker-ui-modal.show {\n pointer-events: auto;\n}\n.timepicker-ui-modal.removed {\n top: auto;\n bottom: auto;\n left: auto;\n right: auto;\n background-color: transparent;\n}\n.timepicker-ui-measure {\n position: absolute;\n top: -9999px;\n width: 3.125rem;\n height: 3.125rem;\n overflow: scroll;\n}\n.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {\n position: fixed;\n z-index: 5001;\n width: 328px;\n height: 500px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n display: flex;\n flex-direction: column;\n outline: none;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper:not(.timepicker-ui-wrapper + .mobile) {\n flex-direction: row;\n height: 360px;\n width: 584px;\n }\n}\n@media screen and (max-width: 330px) and (orientation: portrait) {\n .timepicker-ui-wrapper:not(.timepicker-ui-wrapper + .mobile) {\n width: 315px;\n }\n}\n.timepicker-ui-wrapper.mobile {\n height: 218px;\n}\n@media screen and (max-width: 330px) {\n .timepicker-ui-wrapper.mobile {\n width: 315px;\n }\n}\n.timepicker-ui-header, .timepicker-ui-header.mobile {\n padding-top: 52px;\n padding-bottom: 36px;\n padding-right: 24px;\n padding-left: 24px;\n height: 104px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 100%;\n}\n.timepicker-ui-header.mobile {\n padding-bottom: 0;\n padding-top: 35px;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-header:not(.timepicker-ui-header + .mobile) {\n height: auto;\n flex-direction: column;\n }\n}\n.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {\n text-transform: uppercase;\n position: absolute;\n top: 16px;\n left: 24px;\n font-size: 12px;\n color: #a9a9a9;\n}\n.timepicker-ui-body {\n height: 256px;\n width: 256px;\n margin: 0 auto;\n position: relative;\n border-radius: 100%;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-body {\n padding-right: 0;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 23px;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-landspace {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n.timepicker-ui-footer, .timepicker-ui-footer-mobile {\n height: 76px;\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-footer:not(.timepicker-ui-footer + .mobile) {\n justify-content: flex-end;\n }\n}\n.timepicker-ui-footer.mobile {\n align-items: flex-start;\n}\n.timepicker-ui-clock-face {\n background-color: #e0e0e0;\n height: 100%;\n width: 100%;\n border-radius: 100%;\n position: relative;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-clock-face {\n height: 256px;\n width: 256px;\n top: 15px;\n }\n}\n.timepicker-ui-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n user-select: none;\n touch-action: none;\n transform: translate(-50%, -50%);\n background-color: #6200ee;\n height: 8px;\n width: 8px;\n border-radius: 100%;\n}\n.timepicker-ui-tips-wrapper {\n height: 100%;\n width: 100%;\n}\n.timepicker-ui-tips-wrapper-24h {\n position: absolute;\n height: 160px;\n width: 160px;\n z-index: 0;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n border-radius: 50%;\n}\n.timepicker-ui-tips-wrapper-24h-disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24 {\n position: absolute;\n width: 32px;\n height: 32px;\n text-align: center;\n cursor: pointer;\n font-size: 17.6px;\n display: flex;\n justify-content: center;\n align-items: center;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span, .timepicker-ui-hour-time-24 span {\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12 {\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {\n display: flex;\n margin-right: 10px;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-time:not(.timepicker-ui-wrapper-time + .mobile) {\n margin-right: 0;\n height: auto;\n }\n}\n.timepicker-ui-wrapper-time-24h {\n margin-right: 0px;\n}\n.timepicker-ui-wrapper-time.mobile {\n position: relative;\n}\n.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 51.2px;\n background-color: #e4e4e4;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s ease;\n outline: none;\n border: 2px solid transparent;\n padding: 10px;\n width: 96px;\n text-align: center;\n}\n.timepicker-ui-hour:focus-visible, .timepicker-ui-minutes:focus-visible, .timepicker-ui-hour.mobile:focus-visible, .timepicker-ui-minutes.mobile:focus-visible {\n outline: auto;\n}\n.timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {\n color: #6200ee;\n background-color: #ece0fd;\n}\n.timepicker-ui-hour::-webkit-outer-spin-button, .timepicker-ui-hour::-webkit-inner-spin-button, .timepicker-ui-minutes::-webkit-outer-spin-button, .timepicker-ui-minutes::-webkit-inner-spin-button, .timepicker-ui-hour.mobile::-webkit-outer-spin-button, .timepicker-ui-hour.mobile::-webkit-inner-spin-button, .timepicker-ui-minutes.mobile::-webkit-outer-spin-button, .timepicker-ui-minutes.mobile::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important;\n}\n.timepicker-ui-hour[type=number], .timepicker-ui-minutes[type=number], .timepicker-ui-hour.mobile[type=number], .timepicker-ui-minutes.mobile[type=number] {\n -moz-appearance: textfield !important;\n}\n.timepicker-ui-hour, .timepicker-ui-minutes {\n outline: none;\n border: 2px solid transparent;\n}\n.timepicker-ui-hour[contenteditable=true]:focus, .timepicker-ui-hour[contenteditable=true]:active, .timepicker-ui-minutes[contenteditable=true]:focus, .timepicker-ui-minutes[contenteditable=true]:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all;\n}\n.timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n height: 70px;\n outline: none;\n border: 2px solid transparent;\n}\n.timepicker-ui-hour.mobile[contenteditable=true]:focus, .timepicker-ui-hour.mobile[contenteditable=true]:active, .timepicker-ui-minutes.mobile[contenteditable=true]:focus, .timepicker-ui-minutes.mobile[contenteditable=true]:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all;\n}\n.timepicker-ui-dots, .timepicker-ui-dots.mobile {\n padding-left: 5px;\n padding-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 57.6px;\n user-select: none;\n touch-action: none;\n}\n.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {\n display: flex;\n flex-direction: column;\n height: 80px;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 500;\n color: #787878;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-type-time {\n flex-direction: row;\n width: 100%;\n }\n}\n.timepicker-ui-wrapper-type-time.mobile {\n height: 70px;\n}\n.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid #d6d6d6;\n transition: all 0.3s ease;\n cursor: pointer;\n width: 100%;\n height: 100%;\n}\n.timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {\n color: #6200ee;\n background-color: #ece0fd;\n}\n.timepicker-ui-am.active, .timepicker-ui-pm.active, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile.active {\n pointer-events: none;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile), .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile) {\n width: 50%;\n height: 44px;\n }\n}\n.timepicker-ui-am, .timepicker-ui-am.mobile {\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-width: 0.3752px;\n}\n.timepicker-ui-am.mobile {\n border-bottom-left-radius: 0;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile) {\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n border-top-right-radius: 0;\n border-top-width: 1.5008px;\n border-right-width: 0.3752px;\n }\n}\n.timepicker-ui-pm, .timepicker-ui-pm.mobile {\n border-bottom-left-radius: 7px;\n border-bottom-right-radius: 7px;\n border-top-width: 0.3752px;\n width: 54px;\n}\n.timepicker-ui-pm.mobile {\n border-top-right-radius: 0;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile) {\n border-bottom-right-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-width: 1.5008px;\n border-left-width: 0.3752px;\n width: 50%;\n height: 44px;\n }\n}\n.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {\n color: #6200ee;\n text-transform: uppercase;\n border-radius: 7px;\n background-color: transparent;\n text-align: center;\n font-size: 15.2px;\n padding-top: 9px;\n padding-bottom: 9px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer;\n}\n.timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {\n background-color: #d6d6d6;\n}\n.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {\n width: 72px;\n margin-right: 4px;\n}\n.timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {\n width: 64px;\n margin-left: 4px;\n}\n.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n width: 44px;\n height: 44px;\n position: relative;\n bottom: -26px;\n left: 12px;\n transition: all 0.3s ease;\n}\n.timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #d6d6d6;\n border-radius: 7px;\n}\n.timepicker-ui-keyboard-icon-wrapper.mobile {\n bottom: -5px;\n}\n.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {\n padding: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #4e545a;\n height: 44px;\n width: 44px;\n}\n.timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {\n color: #6200ee;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n position: absolute;\n bottom: 8px;\n }\n}\n.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {\n margin-right: 8px;\n position: relative;\n bottom: -14px;\n}\n.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {\n position: absolute;\n bottom: 6px;\n font-size: 12.8px;\n color: #a9a9a9;\n left: 0;\n}\n.timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {\n left: 120px;\n}\n.timepicker-ui-clock-hand {\n position: absolute;\n background-color: #6200ee;\n bottom: 50%;\n height: 40%;\n left: calc(50% - 1px);\n transform-origin: center bottom 0;\n width: 2px;\n}\n.timepicker-ui-clock-hand-24h {\n height: 23%;\n}\n.timepicker-ui-circle-hand {\n position: absolute;\n transform: translate(-48%, -50%);\n width: 4px;\n height: 4px;\n border-radius: 100%;\n transition: all 0.2s ease;\n height: 46px;\n width: 46px;\n box-sizing: border-box !important;\n background-color: #6200ee;\n}\n.timepicker-ui-circle-hand.small-circle {\n height: 36px;\n width: 36px;\n box-sizing: border-box !important;\n}\n.timepicker-ui-circle-hand-24h {\n transform: translate(-50%, -50%);\n height: 32px;\n width: 32px;\n top: 4px;\n left: 1px;\n}\n.timepicker-ui-value-tips, .timepicker-ui-value-tips-24h {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s ease color;\n border-radius: 50%;\n outline: none;\n}\n.timepicker-ui-value-tips:focus, .timepicker-ui-value-tips-24h:focus {\n background: rgba(143, 143, 143, 0.315);\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n}\n.timepicker-ui-value-tips.active, .timepicker-ui-value-tips-24h.active {\n color: #fff;\n transition: none;\n}\n.timepicker-ui-clock-animation {\n animation: clockanimation 350ms linear;\n}\n.timepicker-ui-open-element.disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-tips-animation {\n transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.timepicker-ui-tips-disabled {\n color: rgba(156, 155, 155, 0.6);\n pointer-events: none;\n}\n\n.opacity {\n transition: opacity 0.15s linear;\n}\n.opacity.show {\n opacity: 1;\n}\n\n.invalid-value {\n border-color: #d50000 !important;\n color: #d50000 !important;\n}\n.invalid-value:hover, .invalid-value:focus, .invalid-value:active {\n border-color: #d50000 !important;\n color: #d50000 !important;\n}\n\n@keyframes clockanimation {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.timepicker-ui-invalid-format {\n border: 2px solid red;\n color: red;\n}\n\n.timepicker-ui-invalid-text {\n color: red;\n}');p(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}\n\n.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {\n border-radius: 0;\n background-color: #4e0d3a;\n color: #fff;\n}\n.timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {\n color: #e5e5e5;\n}\n.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {\n background-color: #71135c;\n}\n.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {\n background-color: #71135c;\n border-radius: 0;\n color: #fff;\n}\n.timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {\n background-color: #f7363e;\n}\n.timepicker-ui-hour.mobile.crane-straight[contenteditable=true]:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable=true]:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable=true]:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable=true]:active {\n border-color: #fff;\n outline-color: #fff;\n}\n.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {\n border: 0.125rem solid transparent;\n border-radius: 0;\n background-color: #71135c;\n}\n.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {\n color: #fff;\n background-color: #f7363e;\n}\n.timepicker-ui-am.crane-straight.radius {\n border-top-left-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n}\n.timepicker-ui-pm.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-bottom-right-radius: 1.25rem;\n}\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile).crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile).crane-straight.radius {\n border-bottom-right-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-am.mobile.crane-straight.radius {\n border-bottom-left-radius: 0rem;\n border-bottom-right-radius: 0rem;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-pm.mobile.crane-straight.radius {\n border-top-left-radius: 0rem;\n border-top-right-radius: 0rem;\n }\n}\n.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {\n color: #fff;\n border-radius: 0rem;\n}\n.timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {\n border-radius: 0.8125rem;\n}\n.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #f7363e;\n color: #fff;\n border-radius: 0;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {\n border-radius: 0.875rem;\n}\n.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {\n color: #fff;\n}\n.timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-clock-hand.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-circle-hand.crane-straight {\n border-color: #f7363e;\n background-color: #f7363e;\n}\n.timepicker-ui-value-tips.crane-straight {\n color: #fff;\n}");var h=":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}";p(h);const m={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'keyboard',iconTemplateMobile:'schedule',incrementHours:1,incrementMinutes:1,minuteMobileLabel:"Minute",mobile:!1,okLabel:"OK",pmLabel:"PM",timeLabel:"Select Time",switchToMinutesAfterSelectHour:!1,theme:"basic",clockType:"12h",disabledTime:void 0,currentTime:void 0,focusTrap:!0},v="mousedown mouseup mousemove mouseleave mouseover touchstart touchmove touchend",b=["00","13","14","15","16","17","18","19","20","21","22","23"],k=["12","1","2","3","4","5","6","7","8","9","10","11"],g=["00","05","10","15","20","25","30","35","40","45","50","55"];class _{constructor(e){this.clean=()=>{var e,i;const t=null===(e=this.tipsWrapper)||void 0===e?void 0:e.querySelectorAll("span.timepicker-ui-hour-time-12"),n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-minutes-time");this._removeClasses(t),this._removeClasses(n)},this.create=()=>{var e;if(!(this.clockFace&&this.array&&this.classToAdd&&this.tipsWrapper))return;const i=(this.clockFace.offsetWidth-32)/2,n=(this.clockFace.offsetHeight-32)/2,r=i-9;this.tipsWrapper.innerHTML="",null===(e=this.array)||void 0===e||e.forEach(((e,o)=>{var s,a,l,u,d,c;const p=o*(360/this.array.length)*(Math.PI/180);const h=document.createElement("span"),m=document.createElement("span");m.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(s=this.disabledTime)||void 0===s?void 0:s.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled")),this.hour===this.disabledTime.removedStartedHour&&(null===(l=null===(a=this.disabledTime)||void 0===a?void 0:a.startMinutes)||void 0===l?void 0:l.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(d=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===d?void 0:d.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1)),"24h"===this.clockType?(m.classList.add("timepicker-ui-value-tips-24h"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)):(m.classList.add("timepicker-ui-value-tips"),t(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)),h.classList.add(this.classToAdd),"crane-straight"===this.theme&&(h.classList.add("crane-straight"),m.classList.add("crane-straight")),h.style.left=i+Math.sin(p)*r-h.offsetWidth+"px",h.style.bottom=n+Math.cos(p)*r-h.offsetHeight+"px",h.appendChild(m),null===(c=this.tipsWrapper)||void 0===c||c.appendChild(h)}))},this.updateDisable=e=>{var i,t;const n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-hour-time-12"),r=null===(t=this.tipsWrapper)||void 0===t?void 0:t.querySelectorAll("span.timepicker-ui-minutes-time");if(this._removeClasses(n),this._removeClasses(r),(null==e?void 0:e.hoursToUpdate)&&n&&this._addClassesWithIncludes(n,e.hoursToUpdate),(null==e?void 0:e.minutesToUpdate)&&r){const{actualHour:i,removedEndHour:t,removedStartedHour:n,startMinutes:o,endMinutes:s}=e.minutesToUpdate;t===i&&s.length>0?this._addClassesWithIncludes(r,s):Number(i)>Number(n)&&Number(i)0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)=Number(i[0])&&this._addClasses(r),0===s.length&&a.length>1&&Number(d)>=Number(l)&&this._addClasses(r),s.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,s):Number(d)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&s.length>0&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,s):Number(d)>Number(l)&&this._addClasses(r))),"PM"===o&&(d0&&Number(d)===u-1&&this._addClassesWithIncludes(r,a)))}},this._removeClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.remove("timepicker-ui-tips-disabled"),i[0].classList.remove("timepicker-ui-tips-disabled"),i[0].tabIndex=0}))},this._addClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.add("timepicker-ui-tips-disabled"),i[0].classList.add("timepicker-ui-tips-disabled"),i[0].tabIndex=-1}))},this._addClassesWithIncludes=(e,i)=>{null==e||e.forEach((({classList:e,children:t,textContent:n})=>{(null==i?void 0:i.includes(n))&&(e.add("timepicker-ui-tips-disabled"),t[0].classList.add("timepicker-ui-tips-disabled"),t[0].tabIndex=-1)}))},this.array=null==e?void 0:e.array,this.classToAdd=null==e?void 0:e.classToAdd,this.clockFace=null==e?void 0:e.clockFace,this.tipsWrapper=null==e?void 0:e.tipsWrapper,this.theme=null==e?void 0:e.theme,this.clockType=null==e?void 0:e.clockType,this.disabledTime=null==e?void 0:e.disabledTime,this.hour=null==e?void 0:e.hour}}const y=(e,i)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout((()=>{e(...n)}),i)}};exports.TimepickerUI=class{constructor(o,s){var p,T,f;this.create=()=>{this._updateInputValueWithCurrentTimeOnStart(),this._checkDisabledValuesOnStart(),this._setTimepickerClassToElement(),this._setInputClassToInputElement(),this._setDataOpenToInputIfDosentExistInWrapper(),this._setClassTopOpenElement(),this._handleOpenOnEnterFocus(),this._handleOpenOnClick(),this._getDisableTime()},this.open=e=>{this.create(),this._eventsBundle(),a(e)},this.close=y(((...e)=>{var i;if(e.length>2||!this.modalElement)return;const[t]=e.filter((e=>"boolean"==typeof e)),[n]=e.filter((e=>"function"==typeof e));t&&(this._handleOkButton(),null===(i=this.okButton)||void 0===i||i.click()),this._isTouchMouseMove=!1,v.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),document.removeEventListener("keypress",this._handleEscClick),this.wrapper.removeEventListener("keydown",this._focusTrapHandler),this._options.enableSwitchIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._removeAnimationToClose(),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{var e;this._options.focusInputAfterCloseModal&&(null===(e=this.input)||void 0===e||e.focus()),null!==this.modalElement&&(this.modalElement.remove(),this._isModalRemove=!0)}),300),a(n)}),300),this.destroy=e=>{v.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),this._options.enableSwitchIcon&&this.keyboardClockIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._cloned=this._element.cloneNode(!0),this._element.after(this._cloned),this._element.remove(),this._element=null,null===this._element&&a(e),this._element=this._cloned},this.update=(e,i)=>{this._options=Object.assign(Object.assign({},this._options),e.options),this._checkMobileOption(),e.create&&this.create(),a(i)},this._preventClockTypeByCurrentTime=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.preventClockType)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{currentTime:e,clockType:i}=this._options,{type:t}=u(this.input,i,e,!0);this._options.clockType=t?"12h":"24h"}},this._updateInputValueWithCurrentTimeOnStart=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.updateInput)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{hour:e,minutes:i,type:t}=u(this.input,this._options.clockType,this._options.currentTime);this.input.value=t?`${e}:${i} ${t}`:`${e}:${i}`}},this._setTheme=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div"),n=[...null===(i=this.modalElement)||void 0===i?void 0:i.querySelectorAll("input"),...t],{theme:r}=this._options;"crane-straight"===r?n.forEach((e=>e.classList.add("crane-straight"))):"crane-radius"===r&&n.forEach((e=>e.classList.add("crane-straight","radius")))},this._setInputClassToInputElement=()=>{var e;t(this.input,"timepicker-ui-input")||null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-input")},this._setDataOpenToInputIfDosentExistInWrapper=()=>{var e;null===this.openElementData&&(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"))},this._setClassTopOpenElement=()=>{this.openElement.forEach((e=>null==e?void 0:e.classList.add("timepicker-ui-open-element")))},this._removeBackdrop=()=>{var e;this._options.backdrop||(null===(e=this.modalElement)||void 0===e||e.classList.add("removed"),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))))},this._setNormalizeClass=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div");null===(i=this.modalElement)||void 0===i||i.classList.add("timepicker-ui-normalize"),null==t||t.forEach((e=>e.classList.add("timepicker-ui-normalize")))},this._setFlexEndToFooterIfNoKeyboardIcon=()=>{!this._options.enableSwitchIcon&&this.footer&&(this.footer.style.justifyContent="flex-end")},this._eventsBundle=()=>{var e,i,t,n,r,o,s,a,l,u,d,c,p;if(this._isModalRemove){if(this._handleEscClick(),this._setErrorHandler(),this._removeErrorHandler(),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))),null===(e=this.input)||void 0===e||e.blur(),this._setScrollbarOrNot(),this._setModalTemplate(),this._setNormalizeClass(),this._removeBackdrop(),this._setBgColorToCirleWithHourTips(),this._setOnStartCSSClassesIfClockType24h(),this._setClassActiveToHourOnOpen(),null!==this.clockFace){const e=new _({array:k,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(o=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===o?void 0:o.hours,clockType:"12h",hour:this.hour.value});if(e.create(),"24h"===this._options.clockType){new _({array:b,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:(null===(a=null===(s=this._disabledTime)||void 0===s?void 0:s.value)||void 0===a?void 0:a.isInterval)?null===(l=this._disabledTime)||void 0===l?void 0:l.value.rangeArrHour:null===(d=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===d?void 0:d.hours,hour:this.hour.value}).create()}else(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.endType)?setTimeout((()=>{var i,t,n,r,o,s,a,l;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)&&e.updateDisable({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour,minutesToUpdate:{endMinutes:null===(o=this._disabledTime)||void 0===o?void 0:o.value.endMinutes,removedEndHour:null===(s=this._disabledTime)||void 0===s?void 0:s.value.removedEndHour,removedStartedHour:null===(a=this._disabledTime)||void 0===a?void 0:a.value.removedStartedHour,actualHour:this.hour.value,startMinutes:null===(l=this._disabledTime)||void 0===l?void 0:l.value.startMinutes}})}),300):setTimeout((()=>{var i,t,n;e.updateDisable({minutesToUpdate:{actualHour:this.hour.value,pmHours:null===(i=this._disabledTime)||void 0===i?void 0:i.value.pmHours,amHours:null===(t=this._disabledTime)||void 0===t?void 0:t.value.amHours,activeMode:null===(n=this.activeTypeMode)||void 0===n?void 0:n.textContent}})}),300),e.updateDisable()}this._setFlexEndToFooterIfNoKeyboardIcon(),setTimeout((()=>{this._setTheme()}),0),this._setAnimationToOpen(),this._getInputValueOnOpenAndSet(),this._toggleClassActiveToValueTips(this.hour.value),this._isMobileView||(this._setTransformToCircleWithSwitchesHour(this.hour.value),this._handleAnimationClock()),this._handleMinutesEvents(),this._handleHourEvents(),"24h"!==this._options.clockType&&(this._handleAmClick(),this._handlePmClick()),this.clockFace&&this._handleMoveHand(),this._handleCancelButton(),this._handleOkButton(),this.modalElement&&(this._setShowClassToBackdrop(),this._handleBackdropClick()),this._handleIconChangeView(),this._handleClickOnHourMobile(),this._options.focusTrap&&this._focusTrapHandler()}},this._handleOpenOnClick=()=>{this.openElement.forEach((e=>this._clickTouchEvents.forEach((i=>null==e?void 0:e.addEventListener(i,(()=>this._eventsBundle()))))))},this._getInputValueOnOpenAndSet=()=>{var e,i;const t=u(this.input,this._options.clockType,this._options.currentTime);if(void 0===t)return this.hour.value="12",this.minutes.value="00",n(this._element,"show",{hour:this.hour.value,minutes:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),void("24h"!==this._options.clockType&&this.AM.classList.add("active"));let[r,o,s]=this.input.value.split(":").join(" ").split(" ");0===this.input.value.length&&(r=t.hour,o=t.minutes,s=t.type),this.hour.value=r,this.minutes.value=o;const a=document.querySelector(`[data-type='${s}']`);"24h"!==this._options.clockType&&a&&a.classList.add("active"),n(this._element,"show",Object.assign(Object.assign({},t),{type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}))},this._handleCancelButton=()=>{this._clickTouchEvents.forEach((e=>{this.cancelButton.addEventListener(e,(()=>{var e;const i=u(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},i),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))}))},this._handleOkButton=()=>{this._clickTouchEvents.forEach((e=>{var i;null===(i=this.okButton)||void 0===i||i.addEventListener(e,(()=>{var e,i,t;const{clockType:r,disabledTime:o}=this._options,s=d(this.hour.value,"hour",r),a=d(this.minutes.value,"minutes",r);let u;const p=c(this.hour.value,"hour",r,null==o?void 0:o.hours),h=c(this.minutes.value,"minutes",r,null==o?void 0:o.minutes);if((null==o?void 0:o.interval)&&(u=((e,i,t,n)=>{const r=t?l(`${e}:${i} ${t}`.trim()):`${e}:${i}`.trim();let o,s;if(t){const[e,i]=n.trim().split("-").map((e=>e.trim()));o=l(e),s=l(i)}else{const[e,i]=n.trim().split("-"),t=e=>e.trim().split(":").map((e=>Number(e)<=9?`0${Number(e)}`:e)).join(":");o=t(e),s=t(i)}return rs})(this.hour.value,this.minutes.value,null===(e=this.activeTypeMode)||void 0===e?void 0:e.textContent,o.interval)),!1===u||!1===s||!1===a||!1===p||!1===h)return!1!==u&&a&&h||this.minutes.classList.add("invalid-value"),void(!1!==u&&s&&p||this.hour.classList.add("invalid-value"));this.input.value=`${this.hour.value}:${this.minutes.value} ${"24h"===this._options.clockType?"":null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type}`.trimEnd(),n(this._element,"accept",{hour:this.hour.value,minutes:this.minutes.value,type:null===(t=this.activeTypeMode)||void 0===t?void 0:t.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),this.close()}))}))},this._setShowClassToBackdrop=()=>{this._options.backdrop&&setTimeout((()=>{this.modalElement.classList.add("show")}),300)},this._handleBackdropClick=()=>{var e;null===(e=this.modalElement)||void 0===e||e.addEventListener("click",(e=>{var i;const r=e.target;if(!t(r,"timepicker-ui-modal"))return;const o=u(this.input,this._options.clockType);n(this._element,"cancel",Object.assign(Object.assign({},o),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))},this._setBgColorToCirleWithHourTips=()=>{if(!this._options)return;const{mobile:e,theme:i}=this._options;e||null===this.circle||(this.circle.style.backgroundColor="crane-straight"===i||"crane-radius"===i?h.cranered400:h.purple)},this._setBgColorToCircleWithMinutesTips=()=>{const{theme:e}=this._options;this.minutes.value&&g.includes(this.minutes.value)&&(this.circle.style.backgroundColor="crane-straight"===e||"crane-radius"===e?h.cranered400:h.purple,this.circle.classList.remove("small-circle"))},this._removeBgColorToCirleWithMinutesTips=()=>{this.minutes.value&&g.includes(this.minutes.value)||(this.circle.style.backgroundColor="",this.circle.classList.add("small-circle"))},this._setTimepickerClassToElement=()=>{var e;null===(e=this._element)||void 0===e||e.classList.add("timepicker-ui")},this._setClassActiveToHourOnOpen=()=>{var e;this._options.mobile||this._isMobileView||null===(e=this.hour)||void 0===e||e.classList.add("active")},this._setMinutesToClock=e=>{var i,t,n,r,o;null!==this.clockFace&&this._setTransformToCircleWithSwitchesMinutes(e),this._removeBgColorToCirleWithMinutesTips();const s=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.minutes)?null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.minutes:null===(o=this._disabledTime)||void 0===o?void 0:o.value,a=new _({array:g,classToAdd:"timepicker-ui-minutes-time",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:s,hour:this.hour.value,clockType:this._options.clockType});a.create(),"12h"===this._options.clockType&&a.updateDisable(),this._toggleClassActiveToValueTips(e),"24h"===this._options.clockType&&(this.tipsWrapperFor24h.innerHTML="")},this._setHoursToClock=e=>{var i,t,n,r,o;if(null!==this.clockFace){this._setTransformToCircleWithSwitchesHour(e),this._setBgColorToCirleWithHourTips();const s=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(o=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===o?void 0:o.hours,a=new _({array:k,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:s,clockType:"12h",hour:this.hour.value});a.create(),"24h"===this._options.clockType?new _({array:b,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:s,hour:this.hour.value}).create():a.updateDisable(),this._toggleClassActiveToValueTips(e)}},this._setTransformToCircleWithSwitchesHour=e=>{const i=Number(e);let t=i>12?30*i-360:30*i;360===t&&(t=0),t>360||(this.clockHand.style.transform=`rotateZ(${t}deg)`)},this._setTransformToCircleWithSwitchesMinutes=e=>{const i=6*Number(e);i>360||(this.clockHand.style.transform=`rotateZ(${i}deg)`)},this._handleAmClick=()=>{this._clickTouchEvents.forEach((e=>{this.AM.addEventListener(e,(e=>{var i,r,o,s;if(e.target.classList.add("active"),this.PM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300),e.updateDisable()}n(this._element,"selectamtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(s=this.activeTypeMode)||void 0===s?void 0:s.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handlePmClick=()=>{this._clickTouchEvents.forEach((e=>{this.PM.addEventListener(e,(e=>{var i,r,o,s;if(e.target.classList.add("active"),this.AM.classList.remove("active"),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(r=this._disabledTime)||void 0===r?void 0:r.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectpmtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(s=this.activeTypeMode)||void 0===s?void 0:s.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handleAnimationClock=()=>{this._options.animation&&setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.add("timepicker-ui-clock-animation"),setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.remove("timepicker-ui-clock-animation")}),600)}),150)},this._handleAnimationSwitchTipsMode=()=>{this.clockHand.classList.add("timepicker-ui-tips-animation"),setTimeout((()=>{var e;null===(e=this.clockHand)||void 0===e||e.classList.remove("timepicker-ui-tips-animation")}),401)},this._handleClasses24h=(e,i)=>{var t;const n=e.target;this.hourTips&&"24h"===this._options.clockType&&(Number(n.textContent)>12||0===Number(n.textContent)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(t=this.tipsWrapperFor24h)||void 0===t||t.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),n&&i&&(i.value=n.value.replace(/\D+/g,""),i.click())},this._handleHourEvents=()=>{var e,i;this._inputEvents.forEach((e=>{var i;null===(i=this.hour)||void 0===i||i.addEventListener(e,(e=>{var i,r,o,s,a;const l=e.target;if(null!==this.clockFace&&this._handleAnimationSwitchTipsMode(),"24h"===this._options.clockType&&(Number(l.value)>12||0===Number(l.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),this._setHoursToClock(l.value),l.classList.add("active"),this.minutes.classList.remove("active"),"12h"===this._options.clockType&&(null===(r=this._options.disabledTime)||void 0===r?void 0:r.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(o=this._disabledTime)||void 0===o?void 0:o.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selecthourmode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(a=this.activeTypeMode)||void 0===a?void 0:a.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),null!==this.clockFace&&this.circle.classList.remove("small-circle")}))})),null===(e=this.hour)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.hour))),null===(i=this.hour)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.hour)))},this._handleMinutesEvents=()=>{var e,i;this._inputEvents.forEach((e=>{this.minutes.addEventListener(e,(e=>{var i,r,o,s,a,l;const u=e.target;if(null!==this.clockFace&&(this._handleAnimationSwitchTipsMode(),this._setMinutesToClock(u.value)),"24h"===this._options.clockType&&(this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.add("timepicker-ui-tips-wrapper-24h-disabled")),u.classList.add("active"),null===(r=this.hour)||void 0===r||r.classList.remove("active"),"12h"===this._options.clockType&&(null===(o=this._options.disabledTime)||void 0===o?void 0:o.interval)){const e=new _({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:t(this.hour,"active")?k:g});(null===(s=this._disabledTime)||void 0===s?void 0:s.value.startType)===(null===(a=this._disabledTime)||void 0===a?void 0:a.value.endType)?setTimeout((()=>{var i,t,n;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}n(this._element,"selectminutemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(l=this.activeTypeMode)||void 0===l?void 0:l.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))})),null===(e=this.minutes)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.minutes))),null===(i=this.minutes)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.minutes)))},this._handleEventToMoveHand=e=>{var o,s,a,l,d,c,p,h,m,v,b,k,g,_,y,T,f,x,w,M,C,E,H,L,S,N,$,A,O,I,W,j,F,P,D,q,B,V,z,U,R,Y,Z,K,X,J,G,Q,ee,ie,te,ne,re,oe,se,ae,le,ue,de,ce,pe,he;const{target:me,type:ve,touches:be}=e,ke=me,{incrementMinutes:ge,incrementHours:_e,switchToMinutesAfterSelectHour:ye}=this._options;if(!i(e,this.clockFace))return;const Te=i(e,this.clockFace),fe=this.clockFace.offsetWidth/2,xe=Te&&Math.atan2(Te.y-fe,Te.x-fe);if("mouseup"===ve||"touchend"===ve)return this._isTouchMouseMove=!1,void(ye&&(t(ke,"timepicker-ui-value-tips")||t(ke,"timepicker-ui-value-tips-24h")||t(ke,"timepicker-ui-tips-wrapper"))&&this.minutes.click());if("mousedown"!==ve&&"mousemove"!==ve&&"touchmove"!==ve&&"touchstart"!==ve||"mousedown"!==ve&&"touchstart"!==ve&&"touchmove"!==ve||((t(ke,"timepicker-ui-clock-face")||t(ke,"timepicker-ui-circle-hand")||t(ke,"timepicker-ui-hour-time-12")||t(ke,"timepicker-ui-minutes-time")||t(ke,"timepicker-ui-clock-hand")||t(ke,"timepicker-ui-value-tips")||t(ke,"timepicker-ui-value-tips-24h")||t(ke,"timepicker-ui-tips-wrapper")||t(ke,"timepicker-ui-tips-wrapper-24h"))&&!t(ke,"timepicker-ui-tips-disabled")?(e.preventDefault(),this._isTouchMouseMove=!0):this._isTouchMouseMove=!1),!this._isTouchMouseMove)return;if(null!==this.minutesTips){this.minutes.classList.add("active");let e,i=xe&&r(Math.trunc(180*xe/Math.PI)+90,ge,6);if(void 0===i)return;if(i<0?(e=Math.round(360+i/6)%60,i=360+6*Math.round(i/6)):(e=Math.round(i/6)%60,i=6*Math.round(i/6)),null===(o=this._disabledTime)||void 0===o?void 0:o.value.isInterval)if((null===(d=this._disabledTime)||void 0===d?void 0:d.value.endType)===(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)){if((null===(m=null===(h=null===(p=this._disabledTime)||void 0===p?void 0:p.value)||void 0===h?void 0:h.endMinutes)||void 0===m?void 0:m.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(b=null===(v=this._disabledTime)||void 0===v?void 0:v.value)||void 0===b?void 0:b.removedEndHour)&&(null===(k=this._disabledTime)||void 0===k?void 0:k.value.endType)===(null===(g=this.activeTypeMode)||void 0===g?void 0:g.textContent))return;if((null===(T=null===(y=null===(_=this._disabledTime)||void 0===_?void 0:_.value)||void 0===y?void 0:y.startMinutes)||void 0===T?void 0:T.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(x=null===(f=this._disabledTime)||void 0===f?void 0:f.value)||void 0===x?void 0:x.removedStartedHour)&&(null===(w=this._disabledTime)||void 0===w?void 0:w.value.startType)===(null===(M=this.activeTypeMode)||void 0===M?void 0:M.textContent))return}else{if((null===(C=this.activeTypeMode)||void 0===C?void 0:C.textContent)===(null===(E=this._disabledTime)||void 0===E?void 0:E.value.endType)&&((null===(S=null===(L=null===(H=this._disabledTime)||void 0===H?void 0:H.value)||void 0===L?void 0:L.endMinutes)||void 0===S?void 0:S.includes(e<=9?`0${e}`:`${e}`))&&(null===(N=this._disabledTime)||void 0===N?void 0:N.value.removedPmHour)===this.hour.value||(null===($=this._disabledTime)||void 0===$?void 0:$.value.pmHours.map(Number).includes(Number(this.hour.value)))))return;if((null===(A=this.activeTypeMode)||void 0===A?void 0:A.textContent)===(null===(O=this._disabledTime)||void 0===O?void 0:O.value.startType)&&((null===(j=null===(W=null===(I=this._disabledTime)||void 0===I?void 0:I.value)||void 0===W?void 0:W.startMinutes)||void 0===j?void 0:j.includes(e<=9?`0${e}`:`${e}`))&&(null===(F=this._disabledTime)||void 0===F?void 0:F.value.removedAmHour)===this.hour.value||(null===(P=this._disabledTime)||void 0===P?void 0:P.value.amHours.map(Number).includes(Number(this.hour.value)))))return}else if(null===(l=null===(a=null===(s=this._disabledTime)||void 0===s?void 0:s.value)||void 0===a?void 0:a.minutes)||void 0===l?void 0:l.includes(e<=9?`0${e}`:`${e}`))return;this.minutes.value=e>=10?`${e}`:`0${e}`,this.clockHand.style.transform=`rotateZ(${i}deg)`,this._degreesMinutes=i,this._toggleClassActiveToValueTips(this.minutes.value),this._removeBgColorToCirleWithMinutesTips(),this._setBgColorToCircleWithMinutesTips(),n(this._element,"update",Object.assign(Object.assign({},u(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:ve,type:null===(D=this.activeTypeMode)||void 0===D?void 0:D.dataset.type}))}const we=be?be[0]:void 0,Me=be&&we?document.elementFromPoint(we.clientX,we.clientY):null;if(null!==this.hourTips){if(null===(q=this.hour)||void 0===q||q.classList.add("active"),!t(Me||ke,"timepicker-ui-value-tips-24h")&&!t(Me||ke,"timepicker-ui-tips-disabled")&&(t(Me||ke,"timepicker-ui-value-tips")||t(Me||ke,"timepicker-ui-tips-wrapper"))){let e,i=xe&&r(Math.trunc(180*xe/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%12,i=360+i):(e=Math.round(i/30)%12,(0===e||e>12)&&(e=12));const t=(null===(B=this._disabledTime)||void 0===B?void 0:B.value.isInterval)?"rangeArrHour":"hours";if((null===(V=this._disabledTime)||void 0===V?void 0:V.value.endType)===(null===(U=null===(z=this._disabledTime)||void 0===z?void 0:z.value)||void 0===U?void 0:U.startType)){if("string"==typeof(null===(Y=null===(R=this._disabledTime)||void 0===R?void 0:R.value)||void 0===Y?void 0:Y.endType)){if((null===(K=null===(Z=this._disabledTime)||void 0===Z?void 0:Z.value)||void 0===K?void 0:K.endType)===(null===(X=this.activeTypeMode)||void 0===X?void 0:X.textContent)&&(null===(G=null===(J=this._disabledTime)||void 0===J?void 0:J.value)||void 0===G?void 0:G.startType)===(null===(Q=this.activeTypeMode)||void 0===Q?void 0:Q.textContent)&&(null===(ie=null===(ee=this._disabledTime)||void 0===ee?void 0:ee.value[t])||void 0===ie?void 0:ie.includes(e.toString())))return}else if(null===(ne=null===(te=this._disabledTime)||void 0===te?void 0:te.value[t])||void 0===ne?void 0:ne.includes(e.toString()))return}else{if((null===(re=this._disabledTime)||void 0===re?void 0:re.value.startType)===(null===(oe=this.activeTypeMode)||void 0===oe?void 0:oe.textContent)&&(null===(se=this._disabledTime)||void 0===se?void 0:se.value.amHours.includes(e.toString())))return;if((null===(ae=this._disabledTime)||void 0===ae?void 0:ae.value.endType)===(null===(le=this.activeTypeMode)||void 0===le?void 0:le.textContent)&&(null===(ue=this._disabledTime)||void 0===ue?void 0:ue.value.pmHours.includes(e.toString())))return}this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=e>9?`${e}`:`0${e}`,this._removeCircleClockClasses24h(),this._toggleClassActiveToValueTips(e)}if((t(Me||ke,"timepicker-ui-value-tips-24h")||t(Me||ke,"timepicker-ui-tips-wrapper-24h"))&&!t(Me||ke,"timepicker-ui-tips-disabled")){let e,i=xe&&r(Math.trunc(180*xe/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%24,i=360+i):(e=Math.round(i/30)+12,12===e&&(e="00"));const t=(null===(de=this._disabledTime)||void 0===de?void 0:de.value.isInterval)?"rangeArrHour":"hours";if(null===(pe=null===(ce=this._disabledTime)||void 0===ce?void 0:ce.value[t])||void 0===pe?void 0:pe.includes(e.toString()))return;this._setCircleClockClasses24h(),this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=`${e}`,this._toggleClassActiveToValueTips(e)}n(this._element,"update",Object.assign(Object.assign({},u(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:ve,type:null===(he=this.activeTypeMode)||void 0===he?void 0:he.dataset.type}))}},this._toggleClassActiveToValueTips=e=>{const i=this.allValueTips.find((i=>Number(i.innerText)===Number(e)));this.allValueTips.map((e=>e.classList.remove("active"))),void 0!==i&&i.classList.add("active")},this._handleMoveHand=()=>{this._options.mobile||this._isMobileView||v.split(" ").forEach((e=>{"touchstart"===e||"touchmove"===e||"touchend"===e?document.addEventListener(e,this._mutliEventsMoveHandler,{passive:!1}):document.addEventListener(e,this._mutliEventsMoveHandler,!1)}))},this._setModalTemplate=()=>{if(!this._options)return;const{appendModalSelector:e}=this._options;if(""!==e&&e){const i=null===document||void 0===document?void 0:document.querySelector(e);null==i||i.insertAdjacentHTML("beforeend",this.modalTemplate)}else document.body.insertAdjacentHTML("afterend",this.modalTemplate)},this._setScrollbarOrNot=()=>{this._options.enableScrollbar?setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400):(document.body.style.paddingRight=`${(()=>{const e=document.createElement("div");e.className="timepicker-ui-measure",document.body.appendChild(e);const i=e.getBoundingClientRect().width-e.clientWidth;return document.body.removeChild(e),i})()}px`,document.body.style.overflowY="hidden")},this._setAnimationToOpen=()=>{var e,i;null===(e=this.modalElement)||void 0===e||e.classList.add("opacity"),this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.add("show")}),150):null===(i=this.modalElement)||void 0===i||i.classList.add("show")},this._removeAnimationToClose=()=>{var e;this.modalElement&&(this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.remove("show")}),150):null===(e=this.modalElement)||void 0===e||e.classList.remove("show"))},this._handlerViewChange=y((()=>{var e,i,n,r;const{clockType:o}=this._options;if(t(this.modalElement,"mobile")){const e=d(this.hour.value,"hour",o),t=d(this.minutes.value,"minutes",o);if(!1===e||!1===t)return t||this.minutes.classList.add("invalid-value"),void(e||null===(i=this.hour)||void 0===i||i.classList.add("invalid-value"));!0===e&&!0===t&&(t&&this.minutes.classList.remove("invalid-value"),e&&(null===(n=this.hour)||void 0===n||n.classList.remove("invalid-value"))),this.close(),this._isMobileView=!1,this._options.mobile=!1;const s=this.hour.value,a=this.minutes.value,l=null===(r=this.activeTypeMode)||void 0===r?void 0:r.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!1}}),setTimeout((()=>{if(this.open(),this.hour.value=s,this.minutes.value=a,"12h"===this._options.clockType){const e="PM"===l?"AM":"PM";this["PM"===l?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}this._setTransformToCircleWithSwitchesHour(this.hour.value),this._toggleClassActiveToValueTips(this.hour.value),Number(this.hour.value)>12||0===Number(this.hour.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h()}),300)}),300)}else{this.close(),this._isMobileView=!0,this._options.mobile=!0;const i=this.hour.value,t=this.minutes.value,n=null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!0}}),setTimeout((()=>{if(this.open(),this.hour.value=i,this.minutes.value=t,"12h"===this._options.clockType){const e="PM"===n?"AM":"PM";this["PM"===n?"PM":"AM"].classList.add("active"),this[e].classList.remove("active")}}),300)}),300)}}),400),this._handleIconChangeView=()=>e(this,void 0,void 0,(function*(){this._options.enableSwitchIcon&&(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?this.keyboardClockIcon.addEventListener("touchstart",this._handlerViewChange):this.keyboardClockIcon.addEventListener("click",this._handlerViewChange))})),this._handlerClickHourMinutes=i=>e(this,void 0,void 0,(function*(){var e,n;if(!this.modalElement)return;const{clockType:r,editable:o}=this._options,s=i.target,a=d(this.hour.value,"hour",r),l=d(this.minutes.value,"minutes",r);o&&(t(s,"timepicker-ui-hour")||t(s,"timepicker-ui-minutes")?!1!==a&&!1!==l||(l||this.minutes.classList.add("invalid-value"),a||null===(n=this.hour)||void 0===n||n.classList.add("invalid-value")):!0===a&&!0===l&&(l&&this.minutes.classList.remove("invalid-value"),a&&(null===(e=this.hour)||void 0===e||e.classList.remove("invalid-value"))))})),this._handleClickOnHourMobile=()=>{document.addEventListener("mousedown",this._eventsClickMobileHandler),document.addEventListener("touchstart",this._eventsClickMobileHandler)},this._handleKeyPress=e=>{"Escape"===e.key&&this.modalElement&&this.close()},this._handleEscClick=()=>{document.addEventListener("keydown",this._handleKeyPress)},this._focusTrapHandler=()=>{setTimeout((()=>{var e,i;const n=null===(e=this.wrapper)||void 0===e?void 0:e.querySelectorAll('div[tabindex="0"]:not([disabled])'),r=null===(i=this.wrapper)||void 0===i?void 0:i.querySelectorAll('input[tabindex="0"]:not([disabled])');if(!n||n.length<=0||r.length<=0)return;const o=[...r,...n],s=o[0],a=o[o.length-1];this.wrapper.focus(),this.wrapper.addEventListener("keydown",(({key:e,shiftKey:i,target:n})=>{const r=n;if("Tab"===e&&(i?document.activeElement===s&&a.focus():document.activeElement===a&&s.focus()),"Enter"===e&&(t(r,"timepicker-ui-minutes")&&this.minutes.click(),t(r,"timepicker-ui-hour")&&this.hour.click(),t(r,"timepicker-ui-cancel-btn")&&this.cancelButton.click(),t(r,"timepicker-ui-ok-btn")&&this.okButton.click(),t(r,"timepicker-ui-keyboard-icon-wrapper")&&this.keyboardClockIcon.click(),t(r,"timepicker-ui-am")&&this.AM.click(),t(r,"timepicker-ui-pm")&&this.PM.click(),t(r,"timepicker-ui-value-tips")||t(r,"timepicker-ui-value-tips-24h"))){const{left:e,top:i,x:n,y:o,width:s,height:a}=r.getBoundingClientRect(),l=document.elementFromPoint(n,o),u=()=>{var n;const r=new MouseEvent("mousedown",{clientX:e+s/2,clientY:i+a/2,cancelable:!0,bubbles:!0});t(l,"timepicker-ui-value-tips-24h")?null==l||l.dispatchEvent(r):null===(n=null==l?void 0:l.childNodes[0])||void 0===n||n.dispatchEvent(r),this._isTouchMouseMove=!1};u()}setTimeout((()=>{this.wrapper.addEventListener("mousedown",(()=>document.activeElement.blur()))}),100)}))}),301)},this._handleOpenOnEnterFocus=()=>{this.input.addEventListener("keydown",(({target:e,key:i})=>{e.disabled||"Enter"===i&&this.open()}))},this._element=o,this._cloned=null,this._options=((e,i)=>Object.assign(Object.assign({},i),e))(Object.assign(Object.assign({},s),(e=>{if(!e)return;const i=JSON.parse(JSON.stringify(e)),t=Object.keys(i);return Object.values(i).reduce(((e,i,n)=>(Number(i)?e[t[n]]=Number(i):e[t[n]]="true"===i||"false"===i?JSON.parse(i):i,e)),{})})(null===(p=this._element)||void 0===p?void 0:p.dataset)),m),this._isTouchMouseMove=!1,this._degreesHours=30*Number(u(null===(T=this._element)||void 0===T?void 0:T.querySelector("input"),this._options.clockType).hour),this._degreesMinutes=6*Number(u(null===(f=this._element)||void 0===f?void 0:f.querySelector("input"),this._options.clockType).minutes),this._isMobileView=!1,this._mutliEventsMove=e=>this._handleEventToMoveHand(e),this._mutliEventsMoveHandler=this._mutliEventsMove.bind(this),this._eventsClickMobile=e=>this._handlerClickHourMinutes(e),this._eventsClickMobileHandler=this._eventsClickMobile.bind(this),this._checkMobileOption(),this._clickTouchEvents=["click","mousedown","touchstart"],this._inputEvents=["change",...this._clickTouchEvents],this._disabledTime=null,this._preventClockTypeByCurrentTime(),this._isModalRemove=!0}get modalTemplate(){return this._options.mobile&&this._isMobileView?(e=>{const{mobileTimeLabel:i,amLabel:t,pmLabel:n,cancelLabel:r,okLabel:o,iconTemplateMobile:s,minuteMobileLabel:a,hourMobileLabel:l,enableSwitchIcon:u,animation:d,clockType:c}=e;return`\n `})(this._options):(e=>{const{iconTemplate:i,timeLabel:t,amLabel:n,pmLabel:r,cancelLabel:o,okLabel:s,enableSwitchIcon:a,animation:l,clockType:u,editable:d}=e;return`\n `})(this._options)}get modalElement(){return document.querySelector(".timepicker-ui-modal")}get clockFace(){return document.querySelector(".timepicker-ui-clock-face")}get input(){var e;return null===(e=this._element)||void 0===e?void 0:e.querySelector("input")}get clockHand(){return document.querySelector(".timepicker-ui-clock-hand")}get circle(){return document.querySelector(".timepicker-ui-circle-hand")}get tipsWrapper(){return document.querySelector(".timepicker-ui-tips-wrapper")}get tipsWrapperFor24h(){return document.querySelector(".timepicker-ui-tips-wrapper-24h")}get minutes(){return document.querySelector(".timepicker-ui-minutes")}get hour(){return document.querySelector(".timepicker-ui-hour")}get AM(){return document.querySelector(".timepicker-ui-am")}get PM(){return document.querySelector(".timepicker-ui-pm")}get minutesTips(){return document.querySelector(".timepicker-ui-minutes-time")}get hourTips(){return document.querySelector(".timepicker-ui-hour-time-12")}get allValueTips(){return[...document.querySelectorAll(".timepicker-ui-value-tips"),...document.querySelectorAll(".timepicker-ui-value-tips-24h")]}get openElementData(){var e;const i=null===(e=this._element)||void 0===e?void 0:e.querySelectorAll("[data-open]");if((null==i?void 0:i.length)>0){const e=[];return i.forEach((({dataset:i})=>{var t;return e.push(null!==(t=i.open)&&void 0!==t?t:"")})),[...new Set(e)]}return null}get openElement(){var e,i;return null===this.openElementData?(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"),[this.input]):null!==(i=this.openElementData.map((e=>{var i;return null===(i=this._element)||void 0===i?void 0:i.querySelectorAll(`[data-open='${e}']`)}))[0])&&void 0!==i?i:""}get cancelButton(){return document.querySelector(".timepicker-ui-cancel-btn")}get okButton(){return document.querySelector(".timepicker-ui-ok-btn")}get activeTypeMode(){return document.querySelector(".timepicker-ui-type-mode.active")}get keyboardClockIcon(){return document.querySelector(".timepicker-ui-keyboard-icon-wrapper")}get footer(){return document.querySelector(".timepicker-ui-footer")}get wrapper(){return document.querySelector(".timepicker-ui-wrapper")}_checkDisabledValuesOnStart(){if(!this._options.disabledTime||this._options.disabledTime.interval)return;const{disabledTime:{hours:e,minutes:i},clockType:t}=this._options,n=!e||c(e,"hour",t),r=!i||c(i,"minutes",t);if(!n||!r)throw new Error("You set wrong hours or minutes in disabled option")}_checkMobileOption(){this._isMobileView=!!this._options.mobile,this._options.mobile&&(this._options.editable=!0)}_getDisableTime(){this._disabledTime=(e=>{if(!e)return;const{disabledTime:i,clockType:t}=e;if(!i||Object.keys(i).length<=0||"Object"!==i.constructor.name)return;const{hours:n,interval:r,minutes:a}=i;if(r){delete i.hours,delete i.minutes;const[e,n]=r.toString().split("-"),{hour:a,minutes:l,type:d}=u({value:e.trimEnd()},t),{hour:c,minutes:p,type:h}=u({value:n.trimEnd().trimStart()},t);let m=o(a,c).map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`));const v=[],b=Number(l),k=Number(p);if(h===d)return b>0&&k<=0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):k<59&&k>0&&b<=0?(v.push(void 0,m[m.length-1]),m=m.slice(0,-1)):k>0&&b>0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):0===k&&0===b&&(v.push(void 0,m[m.length-1]),m.pop()),{value:{removedStartedHour:Number(v[0])<=9?`0${v[0]}`:v[0],removedEndHour:Number(v[1])<=9?`0${v[1]}`:v[1],rangeArrHour:m,isInterval:!0,startMinutes:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:s(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endType:h,startType:d}};{const e=o(a,12).map(String),i=s(1,c).map(String),t=[],n=[];return b>0&&k<=0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):k<59&&k>0&&b<=0?(n.push(e[0]),t.push(i[i.length-1]),i.splice(-1,1)):k>0&&b>0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):0===k&&0===b&&(t.push(i[i.length-1]),n.push(e[0]),i.pop()),{value:{isInterval:!0,endType:h,startType:d,pmHours:i,amHours:e,startMinutes:0===Number(l)?[]:o(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:s(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),removedAmHour:Number(n[0])<=9?`0${n[0]}`:n[0],removedPmHour:Number(t[0])<=9?`0${t[0]}`:t[0]}}}}return null==n||n.forEach((e=>{if("12h"===t&&Number(e)>12)throw new Error("The disabled hours value has to be less than 13");if("24h"===t&&Number(e)>23)throw new Error("The disabled hours value has to be less than 24")})),null==a||a.forEach((e=>{if(Number(e)>59)throw new Error("The disabled minutes value has to be less than 60")})),{value:{hours:null==n?void 0:n.map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`)),minutes:null==a?void 0:a.map((e=>Number(e)<=9?`0${e}`:`${e}`))}}})(this._options)}_removeCircleClockClasses24h(){var e,i;null===(e=this.circle)||void 0===e||e.classList.remove("timepicker-ui-circle-hand-24h"),null===(i=this.clockHand)||void 0===i||i.classList.remove("timepicker-ui-clock-hand-24h")}_setCircleClockClasses24h(){var e,i;this.circle&&(null===(e=this.circle)||void 0===e||e.classList.add("timepicker-ui-circle-hand-24h")),this.clockHand&&(null===(i=this.clockHand)||void 0===i||i.classList.add("timepicker-ui-clock-hand-24h"))}_setErrorHandler(){var e,i,t,r;const{error:o,currentHour:s,currentMin:a,currentType:l,currentLength:d}=u(this.input,this._options.clockType);if(o){const u=document.createElement("div");throw null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-invalid-format"),u.classList.add("timepicker-ui-invalid-text"),u.innerHTML="Invalid Time Format",(null===(i=this.input)||void 0===i?void 0:i.parentElement)&&null===(null===(t=this.input)||void 0===t?void 0:t.parentElement.querySelector(".timepicker-ui-invalid-text"))&&(null===(r=this.input)||void 0===r||r.after(u)),n(this._element,"geterror",{error:o,currentHour:s,currentMin:a,currentType:l,currentLength:d}),new Error(`Invalid Time Format: ${o}`)}}_removeErrorHandler(){var e,i;null===(e=this.input)||void 0===e||e.classList.remove("timepicker-ui-invalid-format");const t=null===(i=this._element)||void 0===i?void 0:i.querySelector(".timepicker-ui-invalid-text");t&&t.remove()}_setOnStartCSSClassesIfClockType24h(){if("24h"===this._options.clockType){let{hour:e}=u(this.input,this._options.clockType,this._options.currentTime);this.input.value.length>0&&(e=this.input.value.split(":")[0]),(Number(e)>12||0===Number(e))&&this._setCircleClockClasses24h()}}_getDestructuringObj(e){var i;const{endMinutes:t,removedEndHour:n,removedStartedHour:r,startMinutes:o,pmHours:s,amHours:a,removedAmHour:l,removedPmHour:u}=this._disabledTime.value;return e?{minutesToUpdate:{actualHour:this.hour.value,pmHours:s,amHours:a,activeMode:null===(i=this.activeTypeMode)||void 0===i?void 0:i.textContent,startMinutes:o,endMinutes:t,removedAmHour:l,removedPmHour:u}}:{minutesToUpdate:{endMinutes:t,removedEndHour:n,removedStartedHour:r,actualHour:this.hour.value,startMinutes:o}}}}; diff --git a/dist/timepicker-ui.umd.js b/dist/timepicker-ui.umd.js index 77cad88..f74d9fa 100644 --- a/dist/timepicker-ui.umd.js +++ b/dist/timepicker-ui.umd.js @@ -1 +1 @@ -!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).tui={})}(this,(function(e){"use strict";function i(e,i,t,n){return new(t||(t=Promise))((function(r,s){function o(e){try{l(n.next(e))}catch(e){s(e)}}function a(e){try{l(n.throw(e))}catch(e){s(e)}}function l(e){var i;e.done?r(e.value):(i=e.value,i instanceof t?i:new t((function(e){e(i)}))).then(o,a)}l((n=n.apply(e,i||[])).next())}))}const t=(e,i,t=!1)=>{const{touches:n}=e,{clientX:r,clientY:s}=e;if(!i)return;const{left:o,top:a}=i.getBoundingClientRect();let l={x:0,y:0};if(t){if(t&&void 0!==n&&Object.keys(n).length>0){const{clientX:e,clientY:i}=n[0];l={x:e-o,y:i-a}}}else l={x:r-o,y:s-a};return 0!==Object.keys(l).length||l.constructor!==Object?l:void 0},n=(e,i)=>!!e&&e.classList.contains(i),r=(e,i,t)=>{if(!e)return;const n=new CustomEvent(i,{detail:t});e.dispatchEvent(n)},s=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),o=(e,i,t)=>((e,i)=>Math.round(e/i)*i)(e,i*t),a=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((i,t)=>Number(e)+t)),l=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((e,t)=>Number(i)-t)).reverse(),u=e=>{e&&"function"==typeof e&&e()},d=(e="")=>{const i=e.replace(/(AM|PM|am|pm)/,(e=>` ${e}`)),t=new Date(`September 20, 2000 ${i}`);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}`},c=(e,i,t,n)=>{if(!e)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const{value:r}=e;if(t){if("boolean"==typeof t&&t){const[e,t]=(new Date).toLocaleTimeString().split(":");if(/[a-z]/i.test(t)&&"12h"===i){const[i,n]=t.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:t,type:void 0}}{const{time:e,locales:r,preventClockType:s}=t;let o=e;if(e||(o=new Date),s&&n){const[e,i]=new Date(o).toLocaleTimeString().split(":");if(/[a-z]/i.test(i)){const[t,n]=i.split(" ");return{hour:e,minutes:t,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:void 0}}const[a,l]=new Date(o).toLocaleTimeString(r,{timeStyle:"short"}).split(":");if(/[a-z]/i.test(l)&&"12h"===i){const[e,i]=l.split(" ");return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:e,type:i}}if("12h"===i){const[e,i]=new Date(`1970-01-01T${a}:${l}Z`).toLocaleTimeString("en-US",{timeZone:"UTC",hour12:!0,hour:"numeric",minute:"numeric"}).split(":"),[t,n]=i.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:a,minutes:t,type:n}}return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:l,type:void 0}}}if(""===r||!r)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const[s,o]=r.split(" "),[a,l]=s.split(":");if(/[a-z]/i.test(s))return{error:"The input contains invalid letters or whitespace."};if(r.includes(" ")){if(!o)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 5), currentLength: ${r.length}.`,currentLength:r.length};if(r.length>8||"AM"!==o&&"PM"!==o)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 8), currentLength: ${r.length} or invalid type (PM or AM), currentType: ${o}.`,currentLength:r.length,currentType:o}}let u=Number(l);const d=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?d>12||u>59||u<0||0===d||"AM"!==o&&"PM"!==o?{error:`The input contains invalid letters or numbers. Problem is with hour which should be less than 13 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${o}.`,currentHour:d,currentMin:u,currentType:o}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString(),type:o}:d<0||d>23||u>59?{error:`The input contains invalid numbers. Problem is with hour which should be less than 24 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:d,currentMin:u}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString()}},p=(e,i,t)=>{const n=Number(e);return"hour"===i?"24h"!==t?n>0&&n<=12:n>=0&&n<=23:"minutes"===i?n>=0&&n<=59:void 0},h=(e,i,t,n)=>{if(e){if(Array.isArray(e)&&e.length>0){return!e.map((e=>p(e,i,t))).some((e=>!1===e))}if("string"==typeof e||"number"==typeof e){const r=p(e,i,t),s=null==n?void 0:n.map(Number).includes(Number(e));return!(!r||s)}}};function m(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}m(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n\n.timepicker-ui * {\n box-sizing: border-box !important; }\n\n.timepicker-ui-modal {\n font-family: 'Roboto', sans-serif;\n position: fixed;\n opacity: 0;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(156, 155, 155, 0.6);\n z-index: 5000;\n pointer-events: none; }\n .timepicker-ui-modal.show {\n pointer-events: auto; }\n .timepicker-ui-modal.removed {\n top: auto;\n bottom: auto;\n left: auto;\n right: auto;\n background-color: transparent; }\n\n.timepicker-ui-measure {\n position: absolute;\n top: -9999px;\n width: 3.125rem;\n height: 3.125rem;\n overflow: scroll; }\n\n.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {\n position: fixed;\n z-index: 5001;\n width: 328px;\n height: 500px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n display: flex;\n flex-direction: column;\n outline: none; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper {\n flex-direction: row;\n height: 360px;\n width: 584px; } }\n\n@media screen and (max-width: 330px) and (orientation: portrait) {\n .timepicker-ui-wrapper {\n width: 315px; } }\n\n.timepicker-ui-wrapper.mobile {\n height: 218px; }\n @media screen and (max-width: 330px) {\n .timepicker-ui-wrapper.mobile {\n width: 315px; } }\n\n.timepicker-ui-header, .timepicker-ui-header.mobile {\n padding-top: 52px;\n padding-bottom: 36px;\n padding-right: 24px;\n padding-left: 24px;\n height: 104px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 100%; }\n\n.timepicker-ui-header.mobile {\n padding-bottom: 0;\n padding-top: 35px; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-header {\n height: auto;\n flex-direction: column; } }\n\n.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {\n text-transform: uppercase;\n position: absolute;\n top: calc(28px - 12px);\n left: 24px;\n font-size: 12px;\n color: #a9a9a9; }\n\n.timepicker-ui-body {\n height: 256px;\n width: 256px;\n margin: 0 auto;\n position: relative;\n border-radius: 100%; }\n @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-body {\n padding-right: 0;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 23px; } }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-landspace {\n display: flex;\n flex-direction: column;\n width: 100%; } }\n\n.timepicker-ui-footer, .timepicker-ui-footer-mobile {\n height: 76px;\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-footer {\n justify-content: flex-end; } }\n\n.timepicker-ui-footer.mobile {\n align-items: flex-start; }\n\n.timepicker-ui-clock-face {\n background-color: #e0e0e0;\n height: 100%;\n width: 100%;\n border-radius: 100%;\n position: relative; }\n @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-clock-face {\n height: 256px;\n width: 256px;\n top: 15px; } }\n\n.timepicker-ui-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n user-select: none;\n touch-action: none;\n transform: translate(-50%, -50%);\n background-color: #6200ee;\n height: 8px;\n width: 8px;\n border-radius: 100%; }\n\n.timepicker-ui-tips-wrapper {\n height: 100%;\n width: 100%; }\n\n.timepicker-ui-tips-wrapper-24h {\n position: absolute;\n height: 160px;\n width: 160px;\n z-index: 0;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n border-radius: 50%; }\n .timepicker-ui-tips-wrapper-24h-disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24 {\n position: absolute;\n width: 32px;\n height: 32px;\n text-align: center;\n cursor: pointer;\n font-size: 17.6px;\n display: flex;\n justify-content: center;\n align-items: center;\n touch-action: none;\n user-select: none; }\n .timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span, .timepicker-ui-hour-time-24 span {\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-hour-time-12 {\n display: block;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {\n display: flex;\n margin-right: 10px;\n height: 100%;\n justify-content: center;\n align-items: center; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-time {\n margin-right: 0;\n height: auto; } }\n\n.timepicker-ui-wrapper-time-24h {\n margin-right: 0px; }\n\n.timepicker-ui-wrapper-time.mobile {\n position: relative; }\n\n.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 51.2px;\n background-color: #e4e4e4;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s ease;\n outline: none;\n border: 2px solid transparent;\n padding: 10px;\n width: 96px;\n text-align: center; }\n .timepicker-ui-hour:focus-visible, .timepicker-ui-minutes:focus-visible, .timepicker-ui-hour.mobile:focus-visible, .timepicker-ui-minutes.mobile:focus-visible {\n outline: auto; }\n .timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {\n color: #6200ee;\n background-color: #ece0fd; }\n .timepicker-ui-hour::-webkit-outer-spin-button, .timepicker-ui-hour::-webkit-inner-spin-button, .timepicker-ui-minutes::-webkit-outer-spin-button, .timepicker-ui-minutes::-webkit-inner-spin-button, .timepicker-ui-hour.mobile::-webkit-outer-spin-button, .timepicker-ui-hour.mobile::-webkit-inner-spin-button, .timepicker-ui-minutes.mobile::-webkit-outer-spin-button, .timepicker-ui-minutes.mobile::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important; }\n .timepicker-ui-hour[type='number'], .timepicker-ui-minutes[type='number'], .timepicker-ui-hour.mobile[type='number'], .timepicker-ui-minutes.mobile[type='number'] {\n -moz-appearance: textfield !important; }\n\n.timepicker-ui-hour, .timepicker-ui-minutes {\n outline: none;\n border: 2px solid transparent; }\n .timepicker-ui-hour[contenteditable='true']:focus, .timepicker-ui-hour[contenteditable='true']:active, .timepicker-ui-minutes[contenteditable='true']:focus, .timepicker-ui-minutes[contenteditable='true']:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all; }\n\n.timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n height: 70px;\n outline: none;\n border: 2px solid transparent; }\n .timepicker-ui-hour.mobile[contenteditable='true']:focus, .timepicker-ui-hour.mobile[contenteditable='true']:active, .timepicker-ui-minutes.mobile[contenteditable='true']:focus, .timepicker-ui-minutes.mobile[contenteditable='true']:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all; }\n\n.timepicker-ui-dots, .timepicker-ui-dots.mobile {\n padding-left: 5px;\n padding-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 57.6px;\n user-select: none;\n touch-action: none; }\n\n.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {\n display: flex;\n flex-direction: column;\n height: 80px;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 500;\n color: #787878; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-type-time {\n flex-direction: row;\n width: 100%; } }\n\n.timepicker-ui-wrapper-type-time.mobile {\n height: 70px; }\n\n.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid #d6d6d6;\n transition: all 0.3s ease;\n cursor: pointer;\n width: 100%;\n height: 100%; }\n .timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {\n color: #6200ee;\n background-color: #ece0fd; }\n .timepicker-ui-am.active, .timepicker-ui-pm.active, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile.active {\n pointer-events: none; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am, .timepicker-ui-pm {\n width: 50%;\n height: 44px; } }\n\n.timepicker-ui-am, .timepicker-ui-am.mobile {\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-width: calc(0.7504px / 2); }\n\n.timepicker-ui-am.mobile {\n border-bottom-left-radius: 0; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am {\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n border-top-right-radius: 0;\n border-top-width: 1.5008px;\n border-right-width: calc(0.7504px / 2); } }\n\n.timepicker-ui-pm, .timepicker-ui-pm.mobile {\n border-bottom-left-radius: 7px;\n border-bottom-right-radius: 7px;\n border-top-width: calc(0.7504px / 2);\n width: 54px; }\n\n.timepicker-ui-pm.mobile {\n border-top-right-radius: 0; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-pm {\n border-bottom-right-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-width: 1.5008px;\n border-left-width: calc(0.7504px / 2);\n width: 50%;\n height: 44px; } }\n\n.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {\n color: #6200ee;\n text-transform: uppercase;\n border-radius: 7px;\n background-color: transparent;\n text-align: center;\n font-size: 15.2px;\n padding-top: 9px;\n padding-bottom: 9px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer; }\n .timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {\n background-color: #d6d6d6; }\n\n.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {\n width: 72px;\n margin-right: 4px; }\n\n.timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {\n width: 64px;\n margin-left: 4px; }\n\n.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n width: 44px;\n height: 44px;\n position: relative;\n bottom: -26px;\n left: 12px;\n transition: all 0.3s ease; }\n .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon,\n .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon,\n .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #d6d6d6;\n border-radius: 7px; }\n\n.timepicker-ui-keyboard-icon-wrapper.mobile {\n bottom: -5px; }\n\n.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {\n padding: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #4e545a;\n height: 44px;\n width: 44px; }\n .timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {\n color: #6200ee; }\n\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n position: absolute;\n bottom: 8px; } }\n\n.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {\n margin-right: 8px;\n position: relative;\n bottom: -14px; }\n\n.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {\n position: absolute;\n bottom: 6px;\n font-size: 12.8px;\n color: #a9a9a9;\n left: 0; }\n\n.timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {\n left: 120px; }\n\n.timepicker-ui-clock-hand {\n position: absolute;\n background-color: #6200ee;\n bottom: 50%;\n height: 40%;\n left: calc(50% - 1px);\n transform-origin: center bottom 0;\n width: 2px; }\n\n.timepicker-ui-clock-hand-24h {\n height: 23%; }\n\n.timepicker-ui-circle-hand {\n position: absolute;\n transform: translate(-48%, -50%);\n width: 4px;\n height: 4px;\n border-radius: 100%;\n transition: all 0.2s ease;\n height: 46px;\n width: 46px;\n box-sizing: border-box !important;\n background-color: #6200ee; }\n .timepicker-ui-circle-hand.small-circle {\n height: 36px;\n width: 36px;\n box-sizing: border-box !important; }\n\n.timepicker-ui-circle-hand-24h {\n transform: translate(-50%, -50%);\n height: 32px;\n width: 32px;\n top: 4px;\n left: 1px; }\n\n.timepicker-ui-value-tips, .timepicker-ui-value-tips-24h {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s ease color;\n border-radius: 50%;\n outline: none; }\n .timepicker-ui-value-tips:focus, .timepicker-ui-value-tips-24h:focus {\n background: rgba(143, 143, 143, 0.315);\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }\n .timepicker-ui-value-tips.active, .timepicker-ui-value-tips-24h.active {\n color: #fff;\n transition: none; }\n\n.timepicker-ui-clock-animation {\n animation: clockanimation 350ms linear; }\n\n.timepicker-ui-open-element.disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none; }\n\n.timepicker-ui-tips-animation {\n transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n\n.timepicker-ui-tips-disabled {\n color: rgba(156, 155, 155, 0.6);\n pointer-events: none; }\n\n.opacity {\n transition: opacity 0.15s linear; }\n .opacity.show {\n opacity: 1; }\n\n.invalid-value {\n border-color: #d50000 !important;\n color: #d50000 !important; }\n .invalid-value:hover, .invalid-value:focus, .invalid-value:active {\n border-color: #d50000 !important;\n color: #d50000 !important; }\n\n@keyframes clockanimation {\n 0% {\n opacity: 0;\n transform: scale(0.8); }\n to {\n opacity: 1;\n transform: scale(1); } }\n\n.timepicker-ui-invalid-format {\n border: 2px solid red;\n color: red; }\n\n.timepicker-ui-invalid-text {\n color: red; }\n");m(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n\n.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {\n border-radius: 0;\n background-color: #4e0d3a;\n color: #fff; }\n .timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {\n color: #e5e5e5; }\n\n.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {\n background-color: #71135c; }\n\n.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {\n background-color: #71135c;\n border-radius: 0;\n color: #fff; }\n .timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n .timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {\n background-color: #f7363e; }\n\n.timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:active {\n border-color: #fff;\n outline-color: #fff; }\n\n.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {\n color: #fff; }\n\n.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {\n color: #fff; }\n\n.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {\n border: 0.125rem solid transparent;\n border-radius: 0;\n background-color: #71135c; }\n\n.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {\n color: #fff;\n background-color: #f7363e; }\n\n.timepicker-ui-am.crane-straight.radius {\n border-top-left-radius: 1.25rem;\n border-top-right-radius: 1.25rem; }\n\n.timepicker-ui-pm.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-bottom-right-radius: 1.25rem; }\n\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-am.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; } }\n\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-pm.crane-straight.radius {\n border-bottom-right-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0; } }\n\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-am.mobile.crane-straight.radius {\n border-bottom-left-radius: 0rem;\n border-bottom-right-radius: 0rem; } }\n\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-pm.mobile.crane-straight.radius {\n border-top-left-radius: 0rem;\n border-top-right-radius: 0rem; } }\n\n.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {\n color: #fff;\n border-radius: 0rem; }\n .timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {\n border-radius: 0.8125rem; }\n\n.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {\n color: #fff; }\n .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #f7363e;\n color: #fff;\n border-radius: 0; }\n\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon,\n.timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {\n border-radius: 0.875rem; }\n\n.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {\n color: #fff; }\n .timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {\n border-radius: 1.25rem; }\n\n.timepicker-ui-clock-hand.crane-straight {\n background-color: #f7363e; }\n\n.timepicker-ui-circle-hand.crane-straight {\n border-color: #f7363e;\n background-color: #f7363e; }\n\n.timepicker-ui-value-tips.crane-straight {\n color: #fff; }\n");var v=":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear; }\n";m(v);const b={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'keyboard',iconTemplateMobile:'schedule',incrementHours:1,incrementMinutes:1,minuteMobileLabel:"Minute",mobile:!1,okLabel:"OK",pmLabel:"PM",timeLabel:"Select Time",switchToMinutesAfterSelectHour:!1,theme:"basic",clockType:"12h",disabledTime:void 0,currentTime:void 0,focusTrap:!0},k="mousedown mouseup mousemove mouseleave mouseover touchstart touchmove touchend",g="active",y=["00","13","14","15","16","17","18","19","20","21","22","23"],_=["12","1","2","3","4","5","6","7","8","9","10","11"],T=["00","05","10","15","20","25","30","35","40","45","50","55"];class f{constructor(e){this.clean=()=>{var e,i;const t=null===(e=this.tipsWrapper)||void 0===e?void 0:e.querySelectorAll("span.timepicker-ui-hour-time-12"),n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-minutes-time");this._removeClasses(t),this._removeClasses(n)},this.create=()=>{var e;if(!(this.clockFace&&this.array&&this.classToAdd&&this.tipsWrapper))return;const i=(this.clockFace.offsetWidth-32)/2,t=(this.clockFace.offsetHeight-32)/2,r=i-9;this.tipsWrapper.innerHTML="",null===(e=this.array)||void 0===e||e.forEach(((e,s)=>{var o,a,l,u,d,c;const p=s*(360/this.array.length)*(Math.PI/180);const h=document.createElement("span"),m=document.createElement("span");m.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(o=this.disabledTime)||void 0===o?void 0:o.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled")),this.hour===this.disabledTime.removedStartedHour&&(null===(l=null===(a=this.disabledTime)||void 0===a?void 0:a.startMinutes)||void 0===l?void 0:l.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(d=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===d?void 0:d.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1)),"24h"===this.clockType?(m.classList.add("timepicker-ui-value-tips-24h"),n(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)):(m.classList.add("timepicker-ui-value-tips"),n(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)),h.classList.add(this.classToAdd),"crane-straight"===this.theme&&(h.classList.add("crane-straight"),m.classList.add("crane-straight")),h.style.left=i+Math.sin(p)*r-h.offsetWidth+"px",h.style.bottom=t+Math.cos(p)*r-h.offsetHeight+"px",h.appendChild(m),null===(c=this.tipsWrapper)||void 0===c||c.appendChild(h)}))},this.updateDisable=e=>{var i,t;const n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-hour-time-12"),r=null===(t=this.tipsWrapper)||void 0===t?void 0:t.querySelectorAll("span.timepicker-ui-minutes-time");if(this._removeClasses(n),this._removeClasses(r),(null==e?void 0:e.hoursToUpdate)&&n&&this._addClassesWithIncludes(n,e.hoursToUpdate),(null==e?void 0:e.minutesToUpdate)&&r){const{actualHour:i,removedEndHour:t,removedStartedHour:n,startMinutes:s,endMinutes:o}=e.minutesToUpdate;t===i&&o.length>0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)0?this._addClassesWithIncludes(r,s):Number(i)>Number(n)&&Number(i)=Number(i[0])&&this._addClasses(r),0===o.length&&a.length>1&&Number(d)>=Number(l)&&this._addClasses(r),o.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,o):Number(d)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&o.length>0&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,o):Number(d)>Number(l)&&this._addClasses(r))),"PM"===s&&(d0&&Number(d)===u-1&&this._addClassesWithIncludes(r,a)))}},this._removeClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.remove("timepicker-ui-tips-disabled"),i[0].classList.remove("timepicker-ui-tips-disabled"),i[0].tabIndex=0}))},this._addClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.add("timepicker-ui-tips-disabled"),i[0].classList.add("timepicker-ui-tips-disabled"),i[0].tabIndex=-1}))},this._addClassesWithIncludes=(e,i)=>{null==e||e.forEach((({classList:e,children:t,textContent:n})=>{(null==i?void 0:i.includes(n))&&(e.add("timepicker-ui-tips-disabled"),t[0].classList.add("timepicker-ui-tips-disabled"),t[0].tabIndex=-1)}))},this.array=null==e?void 0:e.array,this.classToAdd=null==e?void 0:e.classToAdd,this.clockFace=null==e?void 0:e.clockFace,this.tipsWrapper=null==e?void 0:e.tipsWrapper,this.theme=null==e?void 0:e.theme,this.clockType=null==e?void 0:e.clockType,this.disabledTime=null==e?void 0:e.disabledTime,this.hour=null==e?void 0:e.hour}}const x=(e,i)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout((()=>{e(...n)}),i)}};e.TimepickerUI=class{constructor(e,a){var l,m,w;this.create=()=>{this._updateInputValueWithCurrentTimeOnStart(),this._checkDisabledValuesOnStart(),this._setTimepickerClassToElement(),this._setInputClassToInputElement(),this._setDataOpenToInputIfDosentExistInWrapper(),this._setClassTopOpenElement(),this._handleOpenOnEnterFocus(),this._handleOpenOnClick(),this._getDisableTime()},this.open=e=>{this.create(),this._eventsBundle(),u(e)},this.close=x(((...e)=>{var i;if(e.length>2||!this.modalElement)return;const[t]=e.filter((e=>"boolean"==typeof e)),[n]=e.filter((e=>"function"==typeof e));t&&(this._handleOkButton(),null===(i=this.okButton)||void 0===i||i.click()),this._isTouchMouseMove=!1,k.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),document.removeEventListener("keypress",this._handleEscClick),this.wrapper.removeEventListener("keydown",this._focusTrapHandler),this._options.enableSwitchIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._removeAnimationToClose(),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{var e;this._options.focusInputAfterCloseModal&&(null===(e=this.input)||void 0===e||e.focus()),null!==this.modalElement&&(this.modalElement.remove(),this._isModalRemove=!0)}),300),u(n)}),300),this.destroy=e=>{k.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),this._options.enableSwitchIcon&&this.keyboardClockIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._cloned=this._element.cloneNode(!0),this._element.after(this._cloned),this._element.remove(),this._element=null,null===this._element&&u(e),this._element=this._cloned},this.update=(e,i)=>{this._options=Object.assign(Object.assign({},this._options),e.options),this._checkMobileOption(),e.create&&this.create(),u(i)},this._preventClockTypeByCurrentTime=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.preventClockType)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{currentTime:e,clockType:i}=this._options,{type:t}=c(this.input,i,e,!0);this._options.clockType=t?"12h":"24h"}},this._updateInputValueWithCurrentTimeOnStart=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.updateInput)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{hour:e,minutes:i,type:t}=c(this.input,this._options.clockType,this._options.currentTime);this.input.value=t?`${e}:${i} ${t}`:`${e}:${i}`}},this._setTheme=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div"),n=[...null===(i=this.modalElement)||void 0===i?void 0:i.querySelectorAll("input"),...t],{theme:r}=this._options;"crane-straight"===r?n.forEach((e=>e.classList.add("crane-straight"))):"crane-radius"===r&&n.forEach((e=>e.classList.add("crane-straight","radius")))},this._setInputClassToInputElement=()=>{var e;n(this.input,"timepicker-ui-input")||null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-input")},this._setDataOpenToInputIfDosentExistInWrapper=()=>{var e;null===this.openElementData&&(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"))},this._setClassTopOpenElement=()=>{this.openElement.forEach((e=>null==e?void 0:e.classList.add("timepicker-ui-open-element")))},this._removeBackdrop=()=>{var e;this._options.backdrop||(null===(e=this.modalElement)||void 0===e||e.classList.add("removed"),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))))},this._setNormalizeClass=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div");null===(i=this.modalElement)||void 0===i||i.classList.add("timepicker-ui-normalize"),null==t||t.forEach((e=>e.classList.add("timepicker-ui-normalize")))},this._setFlexEndToFooterIfNoKeyboardIcon=()=>{!this._options.enableSwitchIcon&&this.footer&&(this.footer.style.justifyContent="flex-end")},this._eventsBundle=()=>{var e,i,t,n,r,s,o,a,l,u,d,c,p;if(this._isModalRemove){if(this._handleEscClick(),this._setErrorHandler(),this._removeErrorHandler(),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))),null===(e=this.input)||void 0===e||e.blur(),this._setScrollbarOrNot(),this._setModalTemplate(),this._setNormalizeClass(),this._removeBackdrop(),this._setBgColorToCirleWithHourTips(),this._setOnStartCSSClassesIfClockType24h(),this._setClassActiveToHourOnOpen(),null!==this.clockFace){const e=new f({array:_,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(s=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===s?void 0:s.hours,clockType:"12h",hour:this.hour.value});if(e.create(),"24h"===this._options.clockType){new f({array:y,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:(null===(a=null===(o=this._disabledTime)||void 0===o?void 0:o.value)||void 0===a?void 0:a.isInterval)?null===(l=this._disabledTime)||void 0===l?void 0:l.value.rangeArrHour:null===(d=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===d?void 0:d.hours,hour:this.hour.value}).create()}else(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.endType)?setTimeout((()=>{var i,t,n,r,s,o,a,l;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)&&e.updateDisable({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour,minutesToUpdate:{endMinutes:null===(s=this._disabledTime)||void 0===s?void 0:s.value.endMinutes,removedEndHour:null===(o=this._disabledTime)||void 0===o?void 0:o.value.removedEndHour,removedStartedHour:null===(a=this._disabledTime)||void 0===a?void 0:a.value.removedStartedHour,actualHour:this.hour.value,startMinutes:null===(l=this._disabledTime)||void 0===l?void 0:l.value.startMinutes}})}),300):setTimeout((()=>{var i,t,n;e.updateDisable({minutesToUpdate:{actualHour:this.hour.value,pmHours:null===(i=this._disabledTime)||void 0===i?void 0:i.value.pmHours,amHours:null===(t=this._disabledTime)||void 0===t?void 0:t.value.amHours,activeMode:null===(n=this.activeTypeMode)||void 0===n?void 0:n.textContent}})}),300),e.updateDisable()}this._setFlexEndToFooterIfNoKeyboardIcon(),setTimeout((()=>{this._setTheme()}),0),this._setAnimationToOpen(),this._getInputValueOnOpenAndSet(),this._toggleClassActiveToValueTips(this.hour.value),this._isMobileView||(this._setTransformToCircleWithSwitchesHour(this.hour.value),this._handleAnimationClock()),this._handleMinutesEvents(),this._handleHourEvents(),"24h"!==this._options.clockType&&(this._handleAmClick(),this._handlePmClick()),this.clockFace&&this._handleMoveHand(),this._handleCancelButton(),this._handleOkButton(),this.modalElement&&(this._setShowClassToBackdrop(),this._handleBackdropClick()),this._handleIconChangeView(),this._handleClickOnHourMobile(),this._options.focusTrap&&this._focusTrapHandler()}},this._handleOpenOnClick=()=>{this.openElement.forEach((e=>this._clickTouchEvents.forEach((i=>null==e?void 0:e.addEventListener(i,(()=>this._eventsBundle()))))))},this._getInputValueOnOpenAndSet=()=>{var e,i;const t=c(this.input,this._options.clockType,this._options.currentTime);if(void 0===t)return this.hour.value="12",this.minutes.value="00",r(this._element,"show",{hour:this.hour.value,minutes:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),void("24h"!==this._options.clockType&&this.AM.classList.add(g));let[n,s,o]=this.input.value.split(":").join(" ").split(" ");0===this.input.value.length&&(n=t.hour,s=t.minutes,o=t.type),this.hour.value=n,this.minutes.value=s;const a=document.querySelector(`[data-type='${o}']`);"24h"!==this._options.clockType&&a&&a.classList.add(g),r(this._element,"show",Object.assign(Object.assign({},t),{type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}))},this._handleCancelButton=()=>{this._clickTouchEvents.forEach((e=>{this.cancelButton.addEventListener(e,(()=>{var e;const i=c(this.input,this._options.clockType);r(this._element,"cancel",Object.assign(Object.assign({},i),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))}))},this._handleOkButton=()=>{this._clickTouchEvents.forEach((e=>{var i;null===(i=this.okButton)||void 0===i||i.addEventListener(e,(()=>{var e,i,t;const{clockType:n,disabledTime:s}=this._options,o=p(this.hour.value,"hour",n),a=p(this.minutes.value,"minutes",n);let l;const u=h(this.hour.value,"hour",n,null==s?void 0:s.hours),c=h(this.minutes.value,"minutes",n,null==s?void 0:s.minutes);if((null==s?void 0:s.interval)&&(l=((e,i,t,n)=>{const r=t?d(`${e}:${i} ${t}`.trim()):`${e}:${i}`.trim();let s,o;if(t){const[e,i]=n.trim().split("-").map((e=>e.trim()));s=d(e),o=d(i)}else{const[e,i]=n.trim().split("-"),t=e=>e.trim().split(":").map((e=>Number(e)<=9?`0${Number(e)}`:e)).join(":");s=t(e),o=t(i)}return ro})(this.hour.value,this.minutes.value,null===(e=this.activeTypeMode)||void 0===e?void 0:e.textContent,s.interval)),!1===l||!1===o||!1===a||!1===u||!1===c)return!1!==l&&a&&c||this.minutes.classList.add("invalid-value"),void(!1!==l&&o&&u||this.hour.classList.add("invalid-value"));this.input.value=`${this.hour.value}:${this.minutes.value} ${"24h"===this._options.clockType?"":null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type}`.trimEnd(),r(this._element,"accept",{hour:this.hour.value,minutes:this.minutes.value,type:null===(t=this.activeTypeMode)||void 0===t?void 0:t.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),this.close()}))}))},this._setShowClassToBackdrop=()=>{this._options.backdrop&&setTimeout((()=>{this.modalElement.classList.add("show")}),300)},this._handleBackdropClick=()=>{var e;null===(e=this.modalElement)||void 0===e||e.addEventListener("click",(e=>{var i;const t=e.target;if(!n(t,"timepicker-ui-modal"))return;const s=c(this.input,this._options.clockType);r(this._element,"cancel",Object.assign(Object.assign({},s),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))},this._setBgColorToCirleWithHourTips=()=>{if(!this._options)return;const{mobile:e,theme:i}=this._options;e||null===this.circle||(this.circle.style.backgroundColor="crane-straight"===i||"crane-radius"===i?v.cranered400:v.purple)},this._setBgColorToCircleWithMinutesTips=()=>{const{theme:e}=this._options;this.minutes.value&&T.includes(this.minutes.value)&&(this.circle.style.backgroundColor="crane-straight"===e||"crane-radius"===e?v.cranered400:v.purple,this.circle.classList.remove("small-circle"))},this._removeBgColorToCirleWithMinutesTips=()=>{this.minutes.value&&T.includes(this.minutes.value)||(this.circle.style.backgroundColor="",this.circle.classList.add("small-circle"))},this._setTimepickerClassToElement=()=>{var e;null===(e=this._element)||void 0===e||e.classList.add("timepicker-ui")},this._setClassActiveToHourOnOpen=()=>{var e;this._options.mobile||this._isMobileView||null===(e=this.hour)||void 0===e||e.classList.add(g)},this._setMinutesToClock=e=>{var i,t,n,r,s;null!==this.clockFace&&this._setTransformToCircleWithSwitchesMinutes(e),this._removeBgColorToCirleWithMinutesTips();const o=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.minutes)?null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.minutes:null===(s=this._disabledTime)||void 0===s?void 0:s.value,a=new f({array:T,classToAdd:"timepicker-ui-minutes-time",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:o,hour:this.hour.value,clockType:this._options.clockType});a.create(),"12h"===this._options.clockType&&a.updateDisable(),this._toggleClassActiveToValueTips(e),"24h"===this._options.clockType&&(this.tipsWrapperFor24h.innerHTML="")},this._setHoursToClock=e=>{var i,t,n,r,s;if(null!==this.clockFace){this._setTransformToCircleWithSwitchesHour(e),this._setBgColorToCirleWithHourTips();const o=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(s=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===s?void 0:s.hours,a=new f({array:_,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:o,clockType:"12h",hour:this.hour.value});a.create(),"24h"===this._options.clockType?new f({array:y,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:o,hour:this.hour.value}).create():a.updateDisable(),this._toggleClassActiveToValueTips(e)}},this._setTransformToCircleWithSwitchesHour=e=>{const i=Number(e);let t=i>12?30*i-360:30*i;360===t&&(t=0),t>360||(this.clockHand.style.transform=`rotateZ(${t}deg)`)},this._setTransformToCircleWithSwitchesMinutes=e=>{const i=6*Number(e);i>360||(this.clockHand.style.transform=`rotateZ(${i}deg)`)},this._handleAmClick=()=>{this._clickTouchEvents.forEach((e=>{this.AM.addEventListener(e,(e=>{var i,t,s,o;if(e.target.classList.add(g),this.PM.classList.remove(g),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new f({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,g)?_:T});(null===(t=this._disabledTime)||void 0===t?void 0:t.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300),e.updateDisable()}r(this._element,"selectamtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(o=this.activeTypeMode)||void 0===o?void 0:o.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handlePmClick=()=>{this._clickTouchEvents.forEach((e=>{this.PM.addEventListener(e,(e=>{var i,t,s,o;if(e.target.classList.add(g),this.AM.classList.remove(g),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new f({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,g)?_:T});(null===(t=this._disabledTime)||void 0===t?void 0:t.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}r(this._element,"selectpmtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(o=this.activeTypeMode)||void 0===o?void 0:o.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handleAnimationClock=()=>{this._options.animation&&setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.add("timepicker-ui-clock-animation"),setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.remove("timepicker-ui-clock-animation")}),600)}),150)},this._handleAnimationSwitchTipsMode=()=>{this.clockHand.classList.add("timepicker-ui-tips-animation"),setTimeout((()=>{var e;null===(e=this.clockHand)||void 0===e||e.classList.remove("timepicker-ui-tips-animation")}),401)},this._handleClasses24h=(e,i)=>{var t;const n=e.target;this.hourTips&&"24h"===this._options.clockType&&(Number(n.textContent)>12||0===Number(n.textContent)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(t=this.tipsWrapperFor24h)||void 0===t||t.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),n&&i&&(i.value=n.value.replace(/\D+/g,""),i.click())},this._handleHourEvents=()=>{var e,i;this._inputEvents.forEach((e=>{var i;null===(i=this.hour)||void 0===i||i.addEventListener(e,(e=>{var i,t,s,o,a;const l=e.target;if(null!==this.clockFace&&this._handleAnimationSwitchTipsMode(),"24h"===this._options.clockType&&(Number(l.value)>12||0===Number(l.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),this._setHoursToClock(l.value),l.classList.add(g),this.minutes.classList.remove(g),"12h"===this._options.clockType&&(null===(t=this._options.disabledTime)||void 0===t?void 0:t.interval)){const e=new f({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,g)?_:T});(null===(s=this._disabledTime)||void 0===s?void 0:s.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}r(this._element,"selecthourmode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(a=this.activeTypeMode)||void 0===a?void 0:a.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),null!==this.clockFace&&this.circle.classList.remove("small-circle")}))})),null===(e=this.hour)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.hour))),null===(i=this.hour)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.hour)))},this._handleMinutesEvents=()=>{var e,i;this._inputEvents.forEach((e=>{this.minutes.addEventListener(e,(e=>{var i,t,s,o,a,l;const u=e.target;if(null!==this.clockFace&&(this._handleAnimationSwitchTipsMode(),this._setMinutesToClock(u.value)),"24h"===this._options.clockType&&(this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.add("timepicker-ui-tips-wrapper-24h-disabled")),u.classList.add(g),null===(t=this.hour)||void 0===t||t.classList.remove(g),"12h"===this._options.clockType&&(null===(s=this._options.disabledTime)||void 0===s?void 0:s.interval)){const e=new f({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,g)?_:T});(null===(o=this._disabledTime)||void 0===o?void 0:o.value.startType)===(null===(a=this._disabledTime)||void 0===a?void 0:a.value.endType)?setTimeout((()=>{var i,t,n;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}r(this._element,"selectminutemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(l=this.activeTypeMode)||void 0===l?void 0:l.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))})),null===(e=this.minutes)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.minutes))),null===(i=this.minutes)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.minutes)))},this._handleEventToMoveHand=e=>{var i,a,l,u,d,p,h,m,v,b,k,y,_,T,f,x,w,M,C,E,H,L,S,N,$,A,O,I,W,j,F,P,D,q,B,V,z,U,R,Y,Z,K,X,J,G,Q,ee,ie,te,ne,re,se,oe,ae,le,ue,de,ce,pe,he,me,ve;const{target:be,type:ke,touches:ge}=e,ye=be,{incrementMinutes:_e,incrementHours:Te,switchToMinutesAfterSelectHour:fe}=this._options;if(!t(e,this.clockFace))return;const xe=t(e,this.clockFace),we=this.clockFace.offsetWidth/2;let Me=xe&&Math.atan2(xe.y-we,xe.x-we);if(s()){const i=t(e,this.clockFace,!0);if(!i)return;Me=Math.atan2(i.y-we,i.x-we)}if("mouseup"===ke||"touchend"===ke)return this._isTouchMouseMove=!1,void(fe&&(n(ye,"timepicker-ui-value-tips")||n(ye,"timepicker-ui-value-tips-24h")||n(ye,"timepicker-ui-tips-wrapper"))&&this.minutes.click());if("mousedown"!==ke&&"mousemove"!==ke&&"touchmove"!==ke&&"touchstart"!==ke||"mousedown"!==ke&&"touchstart"!==ke&&"touchmove"!==ke||((n(ye,"timepicker-ui-clock-face")||n(ye,"timepicker-ui-circle-hand")||n(ye,"timepicker-ui-hour-time-12")||n(ye,"timepicker-ui-minutes-time")||n(ye,"timepicker-ui-clock-hand")||n(ye,"timepicker-ui-value-tips")||n(ye,"timepicker-ui-value-tips-24h")||n(ye,"timepicker-ui-tips-wrapper")||n(ye,"timepicker-ui-tips-wrapper-24h"))&&!n(ye,"timepicker-ui-tips-disabled")?(e.preventDefault(),this._isTouchMouseMove=!0):this._isTouchMouseMove=!1),!this._isTouchMouseMove)return;if(null!==this.minutesTips){this.minutes.classList.add(g);let e,t=Me&&o(Math.trunc(180*Me/Math.PI)+90,_e,6);if(void 0===t)return;if(t<0?(e=Math.round(360+t/6)%60,t=360+6*Math.round(t/6)):(e=Math.round(t/6)%60,t=6*Math.round(t/6)),null===(i=this._disabledTime)||void 0===i?void 0:i.value.isInterval)if((null===(d=this._disabledTime)||void 0===d?void 0:d.value.endType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.startType)){if((null===(v=null===(m=null===(h=this._disabledTime)||void 0===h?void 0:h.value)||void 0===m?void 0:m.endMinutes)||void 0===v?void 0:v.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(k=null===(b=this._disabledTime)||void 0===b?void 0:b.value)||void 0===k?void 0:k.removedEndHour)&&(null===(y=this._disabledTime)||void 0===y?void 0:y.value.endType)===(null===(_=this.activeTypeMode)||void 0===_?void 0:_.textContent))return;if((null===(x=null===(f=null===(T=this._disabledTime)||void 0===T?void 0:T.value)||void 0===f?void 0:f.startMinutes)||void 0===x?void 0:x.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(M=null===(w=this._disabledTime)||void 0===w?void 0:w.value)||void 0===M?void 0:M.removedStartedHour)&&(null===(C=this._disabledTime)||void 0===C?void 0:C.value.startType)===(null===(E=this.activeTypeMode)||void 0===E?void 0:E.textContent))return}else{if((null===(H=this.activeTypeMode)||void 0===H?void 0:H.textContent)===(null===(L=this._disabledTime)||void 0===L?void 0:L.value.endType)&&((null===($=null===(N=null===(S=this._disabledTime)||void 0===S?void 0:S.value)||void 0===N?void 0:N.endMinutes)||void 0===$?void 0:$.includes(e<=9?`0${e}`:`${e}`))&&(null===(A=this._disabledTime)||void 0===A?void 0:A.value.removedPmHour)===this.hour.value||(null===(O=this._disabledTime)||void 0===O?void 0:O.value.pmHours.map(Number).includes(Number(this.hour.value)))))return;if((null===(I=this.activeTypeMode)||void 0===I?void 0:I.textContent)===(null===(W=this._disabledTime)||void 0===W?void 0:W.value.startType)&&((null===(P=null===(F=null===(j=this._disabledTime)||void 0===j?void 0:j.value)||void 0===F?void 0:F.startMinutes)||void 0===P?void 0:P.includes(e<=9?`0${e}`:`${e}`))&&(null===(D=this._disabledTime)||void 0===D?void 0:D.value.removedAmHour)===this.hour.value||(null===(q=this._disabledTime)||void 0===q?void 0:q.value.amHours.map(Number).includes(Number(this.hour.value)))))return}else if(null===(u=null===(l=null===(a=this._disabledTime)||void 0===a?void 0:a.value)||void 0===l?void 0:l.minutes)||void 0===u?void 0:u.includes(e<=9?`0${e}`:`${e}`))return;this.minutes.value=e>=10?`${e}`:`0${e}`,this.clockHand.style.transform=`rotateZ(${t}deg)`,this._degreesMinutes=t,this._toggleClassActiveToValueTips(this.minutes.value),this._removeBgColorToCirleWithMinutesTips(),this._setBgColorToCircleWithMinutesTips(),r(this._element,"update",Object.assign(Object.assign({},c(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:ke,type:null===(B=this.activeTypeMode)||void 0===B?void 0:B.dataset.type}))}const Ce=ge?ge[0]:void 0,Ee=ge&&Ce?document.elementFromPoint(Ce.clientX,Ce.clientY):null;if(null!==this.hourTips){if(null===(V=this.hour)||void 0===V||V.classList.add(g),!n(Ee||ye,"timepicker-ui-value-tips-24h")&&!n(Ee||ye,"timepicker-ui-tips-disabled")&&(n(Ee||ye,"timepicker-ui-value-tips")||n(Ee||ye,"timepicker-ui-tips-wrapper"))){let e,i=Me&&o(Math.trunc(180*Me/Math.PI)+90,Te,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%12,i=360+i):(e=Math.round(i/30)%12,(0===e||e>12)&&(e=12));const t=(null===(z=this._disabledTime)||void 0===z?void 0:z.value.isInterval)?"rangeArrHour":"hours";if((null===(U=this._disabledTime)||void 0===U?void 0:U.value.endType)===(null===(Y=null===(R=this._disabledTime)||void 0===R?void 0:R.value)||void 0===Y?void 0:Y.startType)){if("string"==typeof(null===(K=null===(Z=this._disabledTime)||void 0===Z?void 0:Z.value)||void 0===K?void 0:K.endType)){if((null===(J=null===(X=this._disabledTime)||void 0===X?void 0:X.value)||void 0===J?void 0:J.endType)===(null===(G=this.activeTypeMode)||void 0===G?void 0:G.textContent)&&(null===(ee=null===(Q=this._disabledTime)||void 0===Q?void 0:Q.value)||void 0===ee?void 0:ee.startType)===(null===(ie=this.activeTypeMode)||void 0===ie?void 0:ie.textContent)&&(null===(ne=null===(te=this._disabledTime)||void 0===te?void 0:te.value[t])||void 0===ne?void 0:ne.includes(e.toString())))return}else if(null===(se=null===(re=this._disabledTime)||void 0===re?void 0:re.value[t])||void 0===se?void 0:se.includes(e.toString()))return}else{if((null===(oe=this._disabledTime)||void 0===oe?void 0:oe.value.startType)===(null===(ae=this.activeTypeMode)||void 0===ae?void 0:ae.textContent)&&(null===(le=this._disabledTime)||void 0===le?void 0:le.value.amHours.includes(e.toString())))return;if((null===(ue=this._disabledTime)||void 0===ue?void 0:ue.value.endType)===(null===(de=this.activeTypeMode)||void 0===de?void 0:de.textContent)&&(null===(ce=this._disabledTime)||void 0===ce?void 0:ce.value.pmHours.includes(e.toString())))return}this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=e>9?`${e}`:`0${e}`,this._removeCircleClockClasses24h(),this._toggleClassActiveToValueTips(e)}if((n(Ee||ye,"timepicker-ui-value-tips-24h")||n(Ee||ye,"timepicker-ui-tips-wrapper-24h"))&&!n(Ee||ye,"timepicker-ui-tips-disabled")){let e,i=Me&&o(Math.trunc(180*Me/Math.PI)+90,Te,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%24,i=360+i):(e=Math.round(i/30)+12,12===e&&(e="00"));const t=(null===(pe=this._disabledTime)||void 0===pe?void 0:pe.value.isInterval)?"rangeArrHour":"hours";if(null===(me=null===(he=this._disabledTime)||void 0===he?void 0:he.value[t])||void 0===me?void 0:me.includes(e.toString()))return;this._setCircleClockClasses24h(),this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=`${e}`,this._toggleClassActiveToValueTips(e)}r(this._element,"update",Object.assign(Object.assign({},c(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:ke,type:null===(ve=this.activeTypeMode)||void 0===ve?void 0:ve.dataset.type}))}},this._toggleClassActiveToValueTips=e=>{const i=this.allValueTips.find((i=>Number(i.innerText)===Number(e)));this.allValueTips.map((e=>e.classList.remove(g))),void 0!==i&&i.classList.add(g)},this._handleMoveHand=()=>{this._options.mobile||this._isMobileView||k.split(" ").forEach((e=>{"touchstart"===e||"touchmove"===e||"touchend"===e?document.addEventListener(e,this._mutliEventsMoveHandler,{passive:!1}):document.addEventListener(e,this._mutliEventsMoveHandler,!1)}))},this._setModalTemplate=()=>{if(!this._options)return;const{appendModalSelector:e}=this._options;if(""!==e&&e){const i=null===document||void 0===document?void 0:document.querySelector(e);null==i||i.insertAdjacentHTML("beforeend",this.modalTemplate)}else document.body.insertAdjacentHTML("afterend",this.modalTemplate)},this._setScrollbarOrNot=()=>{this._options.enableScrollbar?setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400):(document.body.style.paddingRight=`${(()=>{const e=document.createElement("div");e.className="timepicker-ui-measure",document.body.appendChild(e);const i=e.getBoundingClientRect().width-e.clientWidth;return document.body.removeChild(e),i})()}px`,document.body.style.overflowY="hidden")},this._setAnimationToOpen=()=>{var e,i;null===(e=this.modalElement)||void 0===e||e.classList.add("opacity"),this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.add("show")}),150):null===(i=this.modalElement)||void 0===i||i.classList.add("show")},this._removeAnimationToClose=()=>{var e;this.modalElement&&(this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.remove("show")}),150):null===(e=this.modalElement)||void 0===e||e.classList.remove("show"))},this._handlerViewChange=x((()=>{var e,i,t,r;const{clockType:s}=this._options;if(n(this.modalElement,"mobile")){const e=p(this.hour.value,"hour",s),n=p(this.minutes.value,"minutes",s);if(!1===e||!1===n)return n||this.minutes.classList.add("invalid-value"),void(e||null===(i=this.hour)||void 0===i||i.classList.add("invalid-value"));!0===e&&!0===n&&(n&&this.minutes.classList.remove("invalid-value"),e&&(null===(t=this.hour)||void 0===t||t.classList.remove("invalid-value"))),this.close(),this._isMobileView=!1,this._options.mobile=!1;const o=this.hour.value,a=this.minutes.value,l=null===(r=this.activeTypeMode)||void 0===r?void 0:r.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!1}}),setTimeout((()=>{if(this.open(),this.hour.value=o,this.minutes.value=a,"12h"===this._options.clockType){const e="PM"===l?"AM":"PM";this["PM"===l?"PM":"AM"].classList.add(g),this[e].classList.remove(g)}this._setTransformToCircleWithSwitchesHour(this.hour.value),this._toggleClassActiveToValueTips(this.hour.value),Number(this.hour.value)>12||0===Number(this.hour.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h()}),300)}),300)}else{this.close(),this._isMobileView=!0,this._options.mobile=!0;const i=this.hour.value,t=this.minutes.value,n=null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!0}}),setTimeout((()=>{if(this.open(),this.hour.value=i,this.minutes.value=t,"12h"===this._options.clockType){const e="PM"===n?"AM":"PM";this["PM"===n?"PM":"AM"].classList.add(g),this[e].classList.remove(g)}}),300)}),300)}}),400),this._handleIconChangeView=()=>i(this,void 0,void 0,(function*(){this._options.enableSwitchIcon&&(s()?this.keyboardClockIcon.addEventListener("touchstart",this._handlerViewChange):this.keyboardClockIcon.addEventListener("click",this._handlerViewChange))})),this._handlerClickHourMinutes=e=>i(this,void 0,void 0,(function*(){var i,t;if(!this.modalElement)return;const{clockType:r,editable:s}=this._options,o=e.target,a=p(this.hour.value,"hour",r),l=p(this.minutes.value,"minutes",r);s&&(n(o,"timepicker-ui-hour")||n(o,"timepicker-ui-minutes")?!1!==a&&!1!==l||(l||this.minutes.classList.add("invalid-value"),a||null===(t=this.hour)||void 0===t||t.classList.add("invalid-value")):!0===a&&!0===l&&(l&&this.minutes.classList.remove("invalid-value"),a&&(null===(i=this.hour)||void 0===i||i.classList.remove("invalid-value"))))})),this._handleClickOnHourMobile=()=>{document.addEventListener("mousedown",this._eventsClickMobileHandler),document.addEventListener("touchstart",this._eventsClickMobileHandler)},this._handleKeyPress=e=>{"Escape"===e.key&&this.modalElement&&this.close()},this._handleEscClick=()=>{document.addEventListener("keydown",this._handleKeyPress)},this._focusTrapHandler=()=>{setTimeout((()=>{var e,i;const t=null===(e=this.wrapper)||void 0===e?void 0:e.querySelectorAll('div[tabindex="0"]:not([disabled])'),r=null===(i=this.wrapper)||void 0===i?void 0:i.querySelectorAll('input[tabindex="0"]:not([disabled])');if(!t||t.length<=0||r.length<=0)return;const s=[...r,...t],o=s[0],a=s[s.length-1];this.wrapper.focus(),this.wrapper.addEventListener("keydown",(({key:e,shiftKey:i,target:t})=>{const r=t;if("Tab"===e&&(i?document.activeElement===o&&a.focus():document.activeElement===a&&o.focus()),"Enter"===e&&(n(r,"timepicker-ui-minutes")&&this.minutes.click(),n(r,"timepicker-ui-hour")&&this.hour.click(),n(r,"timepicker-ui-cancel-btn")&&this.cancelButton.click(),n(r,"timepicker-ui-ok-btn")&&this.okButton.click(),n(r,"timepicker-ui-keyboard-icon-wrapper")&&this.keyboardClockIcon.click(),n(r,"timepicker-ui-am")&&this.AM.click(),n(r,"timepicker-ui-pm")&&this.PM.click(),n(r,"timepicker-ui-value-tips")||n(r,"timepicker-ui-value-tips-24h"))){const{left:e,top:i,x:t,y:s,width:o,height:a}=r.getBoundingClientRect(),l=document.elementFromPoint(t,s),u=()=>{var t;const r=new MouseEvent("mousedown",{clientX:e+o/2,clientY:i+a/2,cancelable:!0,bubbles:!0});n(l,"timepicker-ui-value-tips-24h")?null==l||l.dispatchEvent(r):null===(t=null==l?void 0:l.childNodes[0])||void 0===t||t.dispatchEvent(r),this._isTouchMouseMove=!1};u()}setTimeout((()=>{this.wrapper.addEventListener("mousedown",(()=>document.activeElement.blur()))}),100)}))}),301)},this._handleOpenOnEnterFocus=()=>{this.input.addEventListener("keydown",(({target:e,key:i})=>{e.disabled||"Enter"===i&&this.open()}))},this._element=e,this._cloned=null,this._options=((e,i)=>Object.assign(Object.assign({},i),e))(Object.assign(Object.assign({},a),(e=>{if(!e)return;const i=JSON.parse(JSON.stringify(e)),t=Object.keys(i);return Object.values(i).reduce(((e,i,n)=>(Number(i)?e[t[n]]=Number(i):e[t[n]]="true"===i||"false"===i?JSON.parse(i):i,e)),{})})(null===(l=this._element)||void 0===l?void 0:l.dataset)),b),this._isTouchMouseMove=!1,this._degreesHours=30*Number(c(null===(m=this._element)||void 0===m?void 0:m.querySelector("input"),this._options.clockType).hour),this._degreesMinutes=6*Number(c(null===(w=this._element)||void 0===w?void 0:w.querySelector("input"),this._options.clockType).minutes),this._isMobileView=!1,this._mutliEventsMove=e=>this._handleEventToMoveHand(e),this._mutliEventsMoveHandler=this._mutliEventsMove.bind(this),this._eventsClickMobile=e=>this._handlerClickHourMinutes(e),this._eventsClickMobileHandler=this._eventsClickMobile.bind(this),this._checkMobileOption(),this._clickTouchEvents=["click","mousedown","touchstart"],this._inputEvents=["change",...this._clickTouchEvents],this._disabledTime=null,this._preventClockTypeByCurrentTime(),this._isModalRemove=!0}get modalTemplate(){return this._options.mobile&&this._isMobileView?(e=>{const{mobileTimeLabel:i,amLabel:t,pmLabel:n,cancelLabel:r,okLabel:s,iconTemplateMobile:o,minuteMobileLabel:a,hourMobileLabel:l,enableSwitchIcon:u,animation:d,clockType:c}=e;return`\n `})(this._options):(e=>{const{iconTemplate:i,timeLabel:t,amLabel:n,pmLabel:r,cancelLabel:s,okLabel:o,enableSwitchIcon:a,animation:l,clockType:u,editable:d}=e;return`\n `})(this._options)}get modalElement(){return document.querySelector(".timepicker-ui-modal")}get clockFace(){return document.querySelector(".timepicker-ui-clock-face")}get input(){var e;return null===(e=this._element)||void 0===e?void 0:e.querySelector("input")}get clockHand(){return document.querySelector(".timepicker-ui-clock-hand")}get circle(){return document.querySelector(".timepicker-ui-circle-hand")}get tipsWrapper(){return document.querySelector(".timepicker-ui-tips-wrapper")}get tipsWrapperFor24h(){return document.querySelector(".timepicker-ui-tips-wrapper-24h")}get minutes(){return document.querySelector(".timepicker-ui-minutes")}get hour(){return document.querySelector(".timepicker-ui-hour")}get AM(){return document.querySelector(".timepicker-ui-am")}get PM(){return document.querySelector(".timepicker-ui-pm")}get minutesTips(){return document.querySelector(".timepicker-ui-minutes-time")}get hourTips(){return document.querySelector(".timepicker-ui-hour-time-12")}get allValueTips(){return[...document.querySelectorAll(".timepicker-ui-value-tips"),...document.querySelectorAll(".timepicker-ui-value-tips-24h")]}get openElementData(){var e;const i=null===(e=this._element)||void 0===e?void 0:e.querySelectorAll("[data-open]");if((null==i?void 0:i.length)>0){const e=[];return i.forEach((({dataset:i})=>{var t;return e.push(null!==(t=i.open)&&void 0!==t?t:"")})),[...new Set(e)]}return null}get openElement(){var e,i;return null===this.openElementData?(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"),[this.input]):null!==(i=this.openElementData.map((e=>{var i;return null===(i=this._element)||void 0===i?void 0:i.querySelectorAll(`[data-open='${e}']`)}))[0])&&void 0!==i?i:""}get cancelButton(){return document.querySelector(".timepicker-ui-cancel-btn")}get okButton(){return document.querySelector(".timepicker-ui-ok-btn")}get activeTypeMode(){return document.querySelector(".timepicker-ui-type-mode.active")}get keyboardClockIcon(){return document.querySelector(".timepicker-ui-keyboard-icon-wrapper")}get footer(){return document.querySelector(".timepicker-ui-footer")}get wrapper(){return document.querySelector(".timepicker-ui-wrapper")}_checkDisabledValuesOnStart(){if(!this._options.disabledTime||this._options.disabledTime.interval)return;const{disabledTime:{hours:e,minutes:i},clockType:t}=this._options,n=!e||h(e,"hour",t),r=!i||h(i,"minutes",t);if(!n||!r)throw new Error("You set wrong hours or minutes in disabled option")}_checkMobileOption(){this._isMobileView=!!this._options.mobile,this._options.mobile&&(this._options.editable=!0)}_getDisableTime(){this._disabledTime=(e=>{if(!e)return;const{disabledTime:i,clockType:t}=e;if(!i||Object.keys(i).length<=0||"Object"!==i.constructor.name)return;const{hours:n,interval:r,minutes:s}=i;if(r){delete i.hours,delete i.minutes;const[e,n]=r.toString().split("-"),{hour:s,minutes:o,type:u}=c({value:e.trimEnd()},t),{hour:d,minutes:p,type:h}=c({value:n.trimEnd().trimStart()},t);let m=a(s,d).map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`));const v=[],b=Number(o),k=Number(p);if(h===u)return b>0&&k<=0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):k<59&&k>0&&b<=0?(v.push(void 0,m[m.length-1]),m=m.slice(0,-1)):k>0&&b>0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):0===k&&0===b&&(v.push(void 0,m[m.length-1]),m.pop()),{value:{removedStartedHour:Number(v[0])<=9?`0${v[0]}`:v[0],removedEndHour:Number(v[1])<=9?`0${v[1]}`:v[1],rangeArrHour:m,isInterval:!0,startMinutes:a(o,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:l(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endType:h,startType:u}};{const e=a(s,12).map(String),i=l(1,d).map(String),t=[],n=[];return b>0&&k<=0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):k<59&&k>0&&b<=0?(n.push(e[0]),t.push(i[i.length-1]),i.splice(-1,1)):k>0&&b>0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):0===k&&0===b&&(t.push(i[i.length-1]),n.push(e[0]),i.pop()),{value:{isInterval:!0,endType:h,startType:u,pmHours:i,amHours:e,startMinutes:0===Number(o)?[]:a(o,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:l(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),removedAmHour:Number(n[0])<=9?`0${n[0]}`:n[0],removedPmHour:Number(t[0])<=9?`0${t[0]}`:t[0]}}}}return null==n||n.forEach((e=>{if("12h"===t&&Number(e)>12)throw new Error("The disabled hours value has to be less than 13");if("24h"===t&&Number(e)>23)throw new Error("The disabled hours value has to be less than 24")})),null==s||s.forEach((e=>{if(Number(e)>59)throw new Error("The disabled minutes value has to be less than 60")})),{value:{hours:null==n?void 0:n.map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`)),minutes:null==s?void 0:s.map((e=>Number(e)<=9?`0${e}`:`${e}`))}}})(this._options)}_removeCircleClockClasses24h(){var e,i;null===(e=this.circle)||void 0===e||e.classList.remove("timepicker-ui-circle-hand-24h"),null===(i=this.clockHand)||void 0===i||i.classList.remove("timepicker-ui-clock-hand-24h")}_setCircleClockClasses24h(){var e,i;this.circle&&(null===(e=this.circle)||void 0===e||e.classList.add("timepicker-ui-circle-hand-24h")),this.clockHand&&(null===(i=this.clockHand)||void 0===i||i.classList.add("timepicker-ui-clock-hand-24h"))}_setErrorHandler(){var e,i,t,n;const{error:s,currentHour:o,currentMin:a,currentType:l,currentLength:u}=c(this.input,this._options.clockType);if(s){const d=document.createElement("div");throw null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-invalid-format"),d.classList.add("timepicker-ui-invalid-text"),d.innerHTML="Invalid Time Format",(null===(i=this.input)||void 0===i?void 0:i.parentElement)&&null===(null===(t=this.input)||void 0===t?void 0:t.parentElement.querySelector(".timepicker-ui-invalid-text"))&&(null===(n=this.input)||void 0===n||n.after(d)),r(this._element,"geterror",{error:s,currentHour:o,currentMin:a,currentType:l,currentLength:u}),new Error(`Invalid Time Format: ${s}`)}}_removeErrorHandler(){var e,i;null===(e=this.input)||void 0===e||e.classList.remove("timepicker-ui-invalid-format");const t=null===(i=this._element)||void 0===i?void 0:i.querySelector(".timepicker-ui-invalid-text");t&&t.remove()}_setOnStartCSSClassesIfClockType24h(){if("24h"===this._options.clockType){let{hour:e}=c(this.input,this._options.clockType,this._options.currentTime);this.input.value.length>0&&(e=this.input.value.split(":")[0]),(Number(e)>12||0===Number(e))&&this._setCircleClockClasses24h()}}_getDestructuringObj(e){var i;const{endMinutes:t,removedEndHour:n,removedStartedHour:r,startMinutes:s,pmHours:o,amHours:a,removedAmHour:l,removedPmHour:u}=this._disabledTime.value;return e?{minutesToUpdate:{actualHour:this.hour.value,pmHours:o,amHours:a,activeMode:null===(i=this.activeTypeMode)||void 0===i?void 0:i.textContent,startMinutes:s,endMinutes:t,removedAmHour:l,removedPmHour:u}}:{minutesToUpdate:{endMinutes:t,removedEndHour:n,removedStartedHour:r,actualHour:this.hour.value,startMinutes:s}}}},Object.defineProperty(e,"__esModule",{value:!0})})); +!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).tui={})}(this,(function(e){"use strict";function i(e,i,t,n){return new(t||(t=Promise))((function(r,o){function s(e){try{l(n.next(e))}catch(e){o(e)}}function a(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var i;e.done?r(e.value):(i=e.value,i instanceof t?i:new t((function(e){e(i)}))).then(s,a)}l((n=n.apply(e,i||[])).next())}))}const t=(e,i,t=!1)=>{const{touches:n}=e,{clientX:r,clientY:o}=e;if(!i)return;const{left:s,top:a}=i.getBoundingClientRect();let l={x:0,y:0};if(void 0===n)l={x:r-s,y:o-a};else if(void 0!==n&&n.length>0&&Object.keys(n).length>0){const{clientX:e,clientY:i}=n[0];l={x:e-s,y:i-a}}return 0!==Object.keys(l).length||l.constructor!==Object?l:void 0},n=(e,i)=>!!e&&e.classList.contains(i),r=(e,i,t)=>{if(!e)return;const n=new CustomEvent(i,{detail:t});e.dispatchEvent(n)},o=(e,i,t)=>((e,i)=>Math.round(e/i)*i)(e,i*t),s=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((i,t)=>Number(e)+t)),a=(e,i)=>Array.from({length:Number(i)-Number(e)+1},((e,t)=>Number(i)-t)).reverse(),l=e=>{e&&"function"==typeof e&&e()},u=(e="")=>{const i=e.replace(/(AM|PM|am|pm)/,(e=>` ${e}`)),t=new Date(`September 20, 2000 ${i}`);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}`},d=(e,i,t,n)=>{if(!e)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const{value:r}=e;if(t){if("boolean"==typeof t&&t){const[e,t]=(new Date).toLocaleTimeString().split(":");if(/[a-z]/i.test(t)&&"12h"===i){const[i,n]=t.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:t,type:void 0}}{const{time:e,locales:r,preventClockType:o}=t;let s=e;if(e||(s=new Date),o&&n){const[e,i]=new Date(s).toLocaleTimeString().split(":");if(/[a-z]/i.test(i)){const[t,n]=i.split(" ");return{hour:e,minutes:t,type:n}}return{hour:Number(e)<=9?`0${Number(e)}`:e,minutes:i,type:void 0}}const[a,l]=new Date(s).toLocaleTimeString(r,{timeStyle:"short"}).split(":");if(/[a-z]/i.test(l)&&"12h"===i){const[e,i]=l.split(" ");return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:e,type:i}}if("12h"===i){const[e,i]=new Date(`1970-01-01T${a}:${l}Z`).toLocaleTimeString("en-US",{timeZone:"UTC",hour12:!0,hour:"numeric",minute:"numeric"}).split(":"),[t,n]=i.split(" ");return{hour:Number(e)<=9?`0${Number(e)}`:a,minutes:t,type:n}}return{hour:Number(a)<=9?`0${Number(a)}`:a,minutes:l,type:void 0}}}if(""===r||!r)return{hour:"12",minutes:"00",type:"24h"===i?void 0:"PM"};const[o,s]=r.split(" "),[a,l]=o.split(":");if(/[a-z]/i.test(o))return{error:"The input contains invalid letters or whitespace."};if(r.includes(" ")){if(!s)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 5), currentLength: ${r.length}.`,currentLength:r.length};if(r.length>8||"AM"!==s&&"PM"!==s)return{error:`The input contains invalid letters or whitespace.\n Problem is with input length (max 8), currentLength: ${r.length} or invalid type (PM or AM), currentType: ${s}.`,currentLength:r.length,currentType:s}}let u=Number(l);const d=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?d>12||u>59||u<0||0===d||"AM"!==s&&"PM"!==s?{error:`The input contains invalid letters or numbers. Problem is with hour which should be less than 13 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${s}.`,currentHour:d,currentMin:u,currentType:s}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString(),type:s}:d<0||d>23||u>59?{error:`The input contains invalid numbers. Problem is with hour which should be less than 24 and higher or equal 0, currentHour: ${d}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:d,currentMin:u}:{hour:d<10?`0${d}`:d.toString(),minutes:u.toString()}},c=(e,i,t)=>{const n=Number(e);return"hour"===i?"24h"!==t?n>0&&n<=12:n>=0&&n<=23:"minutes"===i?n>=0&&n<=59:void 0},p=(e,i,t,n)=>{if(e){if(Array.isArray(e)&&e.length>0){return!e.map((e=>c(e,i,t))).some((e=>!1===e))}if("string"==typeof e||"number"==typeof e){const r=c(e,i,t),o=null==n?void 0:n.map(Number).includes(Number(e));return!(!r||o)}}};function h(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}h(':export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}\n\n.timepicker-ui * {\n box-sizing: border-box !important;\n}\n.timepicker-ui-modal {\n font-family: "Roboto", sans-serif;\n position: fixed;\n opacity: 0;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(156, 155, 155, 0.6);\n z-index: 5000;\n pointer-events: none;\n}\n.timepicker-ui-modal.show {\n pointer-events: auto;\n}\n.timepicker-ui-modal.removed {\n top: auto;\n bottom: auto;\n left: auto;\n right: auto;\n background-color: transparent;\n}\n.timepicker-ui-measure {\n position: absolute;\n top: -9999px;\n width: 3.125rem;\n height: 3.125rem;\n overflow: scroll;\n}\n.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {\n position: fixed;\n z-index: 5001;\n width: 328px;\n height: 500px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n display: flex;\n flex-direction: column;\n outline: none;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper:not(.timepicker-ui-wrapper + .mobile) {\n flex-direction: row;\n height: 360px;\n width: 584px;\n }\n}\n@media screen and (max-width: 330px) and (orientation: portrait) {\n .timepicker-ui-wrapper:not(.timepicker-ui-wrapper + .mobile) {\n width: 315px;\n }\n}\n.timepicker-ui-wrapper.mobile {\n height: 218px;\n}\n@media screen and (max-width: 330px) {\n .timepicker-ui-wrapper.mobile {\n width: 315px;\n }\n}\n.timepicker-ui-header, .timepicker-ui-header.mobile {\n padding-top: 52px;\n padding-bottom: 36px;\n padding-right: 24px;\n padding-left: 24px;\n height: 104px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 100%;\n}\n.timepicker-ui-header.mobile {\n padding-bottom: 0;\n padding-top: 35px;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-header:not(.timepicker-ui-header + .mobile) {\n height: auto;\n flex-direction: column;\n }\n}\n.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {\n text-transform: uppercase;\n position: absolute;\n top: 16px;\n left: 24px;\n font-size: 12px;\n color: #a9a9a9;\n}\n.timepicker-ui-body {\n height: 256px;\n width: 256px;\n margin: 0 auto;\n position: relative;\n border-radius: 100%;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-body {\n padding-right: 0;\n padding-left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 23px;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-landspace {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n.timepicker-ui-footer, .timepicker-ui-footer-mobile {\n height: 76px;\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-footer:not(.timepicker-ui-footer + .mobile) {\n justify-content: flex-end;\n }\n}\n.timepicker-ui-footer.mobile {\n align-items: flex-start;\n}\n.timepicker-ui-clock-face {\n background-color: #e0e0e0;\n height: 100%;\n width: 100%;\n border-radius: 100%;\n position: relative;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-clock-face {\n height: 256px;\n width: 256px;\n top: 15px;\n }\n}\n.timepicker-ui-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n user-select: none;\n touch-action: none;\n transform: translate(-50%, -50%);\n background-color: #6200ee;\n height: 8px;\n width: 8px;\n border-radius: 100%;\n}\n.timepicker-ui-tips-wrapper {\n height: 100%;\n width: 100%;\n}\n.timepicker-ui-tips-wrapper-24h {\n position: absolute;\n height: 160px;\n width: 160px;\n z-index: 0;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n border-radius: 50%;\n}\n.timepicker-ui-tips-wrapper-24h-disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24 {\n position: absolute;\n width: 32px;\n height: 32px;\n text-align: center;\n cursor: pointer;\n font-size: 17.6px;\n display: flex;\n justify-content: center;\n align-items: center;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span, .timepicker-ui-hour-time-24 span {\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-hour-time-12 {\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {\n display: flex;\n margin-right: 10px;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-time:not(.timepicker-ui-wrapper-time + .mobile) {\n margin-right: 0;\n height: auto;\n }\n}\n.timepicker-ui-wrapper-time-24h {\n margin-right: 0px;\n}\n.timepicker-ui-wrapper-time.mobile {\n position: relative;\n}\n.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 51.2px;\n background-color: #e4e4e4;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s ease;\n outline: none;\n border: 2px solid transparent;\n padding: 10px;\n width: 96px;\n text-align: center;\n}\n.timepicker-ui-hour:focus-visible, .timepicker-ui-minutes:focus-visible, .timepicker-ui-hour.mobile:focus-visible, .timepicker-ui-minutes.mobile:focus-visible {\n outline: auto;\n}\n.timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {\n color: #6200ee;\n background-color: #ece0fd;\n}\n.timepicker-ui-hour::-webkit-outer-spin-button, .timepicker-ui-hour::-webkit-inner-spin-button, .timepicker-ui-minutes::-webkit-outer-spin-button, .timepicker-ui-minutes::-webkit-inner-spin-button, .timepicker-ui-hour.mobile::-webkit-outer-spin-button, .timepicker-ui-hour.mobile::-webkit-inner-spin-button, .timepicker-ui-minutes.mobile::-webkit-outer-spin-button, .timepicker-ui-minutes.mobile::-webkit-inner-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important;\n}\n.timepicker-ui-hour[type=number], .timepicker-ui-minutes[type=number], .timepicker-ui-hour.mobile[type=number], .timepicker-ui-minutes.mobile[type=number] {\n -moz-appearance: textfield !important;\n}\n.timepicker-ui-hour, .timepicker-ui-minutes {\n outline: none;\n border: 2px solid transparent;\n}\n.timepicker-ui-hour[contenteditable=true]:focus, .timepicker-ui-hour[contenteditable=true]:active, .timepicker-ui-minutes[contenteditable=true]:focus, .timepicker-ui-minutes[contenteditable=true]:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all;\n}\n.timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {\n height: 70px;\n outline: none;\n border: 2px solid transparent;\n}\n.timepicker-ui-hour.mobile[contenteditable=true]:focus, .timepicker-ui-hour.mobile[contenteditable=true]:active, .timepicker-ui-minutes.mobile[contenteditable=true]:focus, .timepicker-ui-minutes.mobile[contenteditable=true]:active {\n border: 2px solid #6200ee;\n outline-color: #6200ee;\n user-select: all;\n}\n.timepicker-ui-dots, .timepicker-ui-dots.mobile {\n padding-left: 5px;\n padding-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 57.6px;\n user-select: none;\n touch-action: none;\n}\n.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {\n display: flex;\n flex-direction: column;\n height: 80px;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 500;\n color: #787878;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-wrapper-type-time {\n flex-direction: row;\n width: 100%;\n }\n}\n.timepicker-ui-wrapper-type-time.mobile {\n height: 70px;\n}\n.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid #d6d6d6;\n transition: all 0.3s ease;\n cursor: pointer;\n width: 100%;\n height: 100%;\n}\n.timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {\n color: #6200ee;\n background-color: #ece0fd;\n}\n.timepicker-ui-am.active, .timepicker-ui-pm.active, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile.active {\n pointer-events: none;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile), .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile) {\n width: 50%;\n height: 44px;\n }\n}\n.timepicker-ui-am, .timepicker-ui-am.mobile {\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-width: 0.3752px;\n}\n.timepicker-ui-am.mobile {\n border-bottom-left-radius: 0;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile) {\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n border-top-right-radius: 0;\n border-top-width: 1.5008px;\n border-right-width: 0.3752px;\n }\n}\n.timepicker-ui-pm, .timepicker-ui-pm.mobile {\n border-bottom-left-radius: 7px;\n border-bottom-right-radius: 7px;\n border-top-width: 0.3752px;\n width: 54px;\n}\n.timepicker-ui-pm.mobile {\n border-top-right-radius: 0;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile) {\n border-bottom-right-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-width: 1.5008px;\n border-left-width: 0.3752px;\n width: 50%;\n height: 44px;\n }\n}\n.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {\n color: #6200ee;\n text-transform: uppercase;\n border-radius: 7px;\n background-color: transparent;\n text-align: center;\n font-size: 15.2px;\n padding-top: 9px;\n padding-bottom: 9px;\n font-weight: 500;\n transition: all 0.3s ease;\n cursor: pointer;\n}\n.timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {\n background-color: #d6d6d6;\n}\n.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {\n width: 72px;\n margin-right: 4px;\n}\n.timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {\n width: 64px;\n margin-left: 4px;\n}\n.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n width: 44px;\n height: 44px;\n position: relative;\n bottom: -26px;\n left: 12px;\n transition: all 0.3s ease;\n}\n.timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #d6d6d6;\n border-radius: 7px;\n}\n.timepicker-ui-keyboard-icon-wrapper.mobile {\n bottom: -5px;\n}\n.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {\n padding: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #4e545a;\n height: 44px;\n width: 44px;\n}\n.timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {\n color: #6200ee;\n}\n@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) {\n .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {\n position: absolute;\n bottom: 8px;\n }\n}\n.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {\n margin-right: 8px;\n position: relative;\n bottom: -14px;\n}\n.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {\n position: absolute;\n bottom: 6px;\n font-size: 12.8px;\n color: #a9a9a9;\n left: 0;\n}\n.timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {\n left: 120px;\n}\n.timepicker-ui-clock-hand {\n position: absolute;\n background-color: #6200ee;\n bottom: 50%;\n height: 40%;\n left: calc(50% - 1px);\n transform-origin: center bottom 0;\n width: 2px;\n}\n.timepicker-ui-clock-hand-24h {\n height: 23%;\n}\n.timepicker-ui-circle-hand {\n position: absolute;\n transform: translate(-48%, -50%);\n width: 4px;\n height: 4px;\n border-radius: 100%;\n transition: all 0.2s ease;\n height: 46px;\n width: 46px;\n box-sizing: border-box !important;\n background-color: #6200ee;\n}\n.timepicker-ui-circle-hand.small-circle {\n height: 36px;\n width: 36px;\n box-sizing: border-box !important;\n}\n.timepicker-ui-circle-hand-24h {\n transform: translate(-50%, -50%);\n height: 32px;\n width: 32px;\n top: 4px;\n left: 1px;\n}\n.timepicker-ui-value-tips, .timepicker-ui-value-tips-24h {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s ease color;\n border-radius: 50%;\n outline: none;\n}\n.timepicker-ui-value-tips:focus, .timepicker-ui-value-tips-24h:focus {\n background: rgba(143, 143, 143, 0.315);\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n}\n.timepicker-ui-value-tips.active, .timepicker-ui-value-tips-24h.active {\n color: #fff;\n transition: none;\n}\n.timepicker-ui-clock-animation {\n animation: clockanimation 350ms linear;\n}\n.timepicker-ui-open-element.disabled {\n pointer-events: none;\n touch-action: none;\n user-select: none;\n}\n.timepicker-ui-tips-animation {\n transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.timepicker-ui-tips-disabled {\n color: rgba(156, 155, 155, 0.6);\n pointer-events: none;\n}\n\n.opacity {\n transition: opacity 0.15s linear;\n}\n.opacity.show {\n opacity: 1;\n}\n\n.invalid-value {\n border-color: #d50000 !important;\n color: #d50000 !important;\n}\n.invalid-value:hover, .invalid-value:focus, .invalid-value:active {\n border-color: #d50000 !important;\n color: #d50000 !important;\n}\n\n@keyframes clockanimation {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.timepicker-ui-invalid-format {\n border: 2px solid red;\n color: red;\n}\n\n.timepicker-ui-invalid-text {\n color: red;\n}');h(":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}\n\n.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {\n border-radius: 0;\n background-color: #4e0d3a;\n color: #fff;\n}\n.timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {\n color: #e5e5e5;\n}\n.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {\n background-color: #71135c;\n}\n.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {\n background-color: #71135c;\n border-radius: 0;\n color: #fff;\n}\n.timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {\n background-color: #f7363e;\n}\n.timepicker-ui-hour.mobile.crane-straight[contenteditable=true]:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable=true]:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable=true]:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable=true]:active {\n border-color: #fff;\n outline-color: #fff;\n}\n.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {\n border: 0.125rem solid transparent;\n border-radius: 0;\n background-color: #71135c;\n}\n.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {\n color: #fff;\n background-color: #f7363e;\n}\n.timepicker-ui-am.crane-straight.radius {\n border-top-left-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n}\n.timepicker-ui-pm.crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-bottom-right-radius: 1.25rem;\n}\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-am:not(.timepicker-ui-am + .mobile).crane-straight.radius {\n border-bottom-left-radius: 1.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 826px) and (orientation: landscape) {\n .timepicker-ui-pm:not(.timepicker-ui-pm + .mobile).crane-straight.radius {\n border-bottom-right-radius: 1.25rem;\n border-top-right-radius: 1.25rem;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-am.mobile.crane-straight.radius {\n border-bottom-left-radius: 0rem;\n border-bottom-right-radius: 0rem;\n }\n}\n@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {\n .timepicker-ui-pm.mobile.crane-straight.radius {\n border-top-left-radius: 0rem;\n border-top-right-radius: 0rem;\n }\n}\n.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {\n color: #fff;\n border-radius: 0rem;\n}\n.timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {\n border-radius: 0.8125rem;\n}\n.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {\n color: #fff;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {\n background-color: #f7363e;\n color: #fff;\n border-radius: 0;\n}\n.timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {\n border-radius: 0.875rem;\n}\n.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {\n color: #fff;\n}\n.timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {\n border-radius: 1.25rem;\n}\n.timepicker-ui-clock-hand.crane-straight {\n background-color: #f7363e;\n}\n.timepicker-ui-circle-hand.crane-straight {\n border-color: #f7363e;\n background-color: #f7363e;\n}\n.timepicker-ui-value-tips.crane-straight {\n color: #fff;\n}");var m=":export {\n cranepurple800: #5c1349;\n cranepurple900: #4e0d3a;\n cranepurple700: #71135c;\n cranered400: #f7363e;\n white: #fff;\n purple: #6200ee;\n opacity: opacity 0.15s linear;\n}";h(m);const v={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'keyboard',iconTemplateMobile:'schedule',incrementHours:1,incrementMinutes:1,minuteMobileLabel:"Minute",mobile:!1,okLabel:"OK",pmLabel:"PM",timeLabel:"Select Time",switchToMinutesAfterSelectHour:!1,theme:"basic",clockType:"12h",disabledTime:void 0,currentTime:void 0,focusTrap:!0},b="mousedown mouseup mousemove mouseleave mouseover touchstart touchmove touchend",k="active",g=["00","13","14","15","16","17","18","19","20","21","22","23"],y=["12","1","2","3","4","5","6","7","8","9","10","11"],_=["00","05","10","15","20","25","30","35","40","45","50","55"];class T{constructor(e){this.clean=()=>{var e,i;const t=null===(e=this.tipsWrapper)||void 0===e?void 0:e.querySelectorAll("span.timepicker-ui-hour-time-12"),n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-minutes-time");this._removeClasses(t),this._removeClasses(n)},this.create=()=>{var e;if(!(this.clockFace&&this.array&&this.classToAdd&&this.tipsWrapper))return;const i=(this.clockFace.offsetWidth-32)/2,t=(this.clockFace.offsetHeight-32)/2,r=i-9;this.tipsWrapper.innerHTML="",null===(e=this.array)||void 0===e||e.forEach(((e,o)=>{var s,a,l,u,d,c;const p=o*(360/this.array.length)*(Math.PI/180);const h=document.createElement("span"),m=document.createElement("span");m.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(s=this.disabledTime)||void 0===s?void 0:s.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled")),this.hour===this.disabledTime.removedStartedHour&&(null===(l=null===(a=this.disabledTime)||void 0===a?void 0:a.startMinutes)||void 0===l?void 0:l.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(d=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===d?void 0:d.includes(e))&&(m.classList.add("timepicker-ui-tips-disabled"),h.classList.add("timepicker-ui-tips-disabled"),m.tabIndex=-1)),"24h"===this.clockType?(m.classList.add("timepicker-ui-value-tips-24h"),n(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)):(m.classList.add("timepicker-ui-value-tips"),n(m,"timepicker-ui-tips-disabled")||(m.tabIndex=0)),h.classList.add(this.classToAdd),"crane-straight"===this.theme&&(h.classList.add("crane-straight"),m.classList.add("crane-straight")),h.style.left=i+Math.sin(p)*r-h.offsetWidth+"px",h.style.bottom=t+Math.cos(p)*r-h.offsetHeight+"px",h.appendChild(m),null===(c=this.tipsWrapper)||void 0===c||c.appendChild(h)}))},this.updateDisable=e=>{var i,t;const n=null===(i=this.tipsWrapper)||void 0===i?void 0:i.querySelectorAll("span.timepicker-ui-hour-time-12"),r=null===(t=this.tipsWrapper)||void 0===t?void 0:t.querySelectorAll("span.timepicker-ui-minutes-time");if(this._removeClasses(n),this._removeClasses(r),(null==e?void 0:e.hoursToUpdate)&&n&&this._addClassesWithIncludes(n,e.hoursToUpdate),(null==e?void 0:e.minutesToUpdate)&&r){const{actualHour:i,removedEndHour:t,removedStartedHour:n,startMinutes:o,endMinutes:s}=e.minutesToUpdate;t===i&&s.length>0?this._addClassesWithIncludes(r,s):Number(i)>Number(n)&&Number(i)0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)=Number(i[0])&&this._addClasses(r),0===s.length&&a.length>1&&Number(d)>=Number(l)&&this._addClasses(r),s.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,s):Number(d)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&s.length>0&&(Number(l)===Number(d)?this._addClassesWithIncludes(r,s):Number(d)>Number(l)&&this._addClasses(r))),"PM"===o&&(d0&&Number(d)===u-1&&this._addClassesWithIncludes(r,a)))}},this._removeClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.remove("timepicker-ui-tips-disabled"),i[0].classList.remove("timepicker-ui-tips-disabled"),i[0].tabIndex=0}))},this._addClasses=e=>{null==e||e.forEach((({classList:e,children:i})=>{e.add("timepicker-ui-tips-disabled"),i[0].classList.add("timepicker-ui-tips-disabled"),i[0].tabIndex=-1}))},this._addClassesWithIncludes=(e,i)=>{null==e||e.forEach((({classList:e,children:t,textContent:n})=>{(null==i?void 0:i.includes(n))&&(e.add("timepicker-ui-tips-disabled"),t[0].classList.add("timepicker-ui-tips-disabled"),t[0].tabIndex=-1)}))},this.array=null==e?void 0:e.array,this.classToAdd=null==e?void 0:e.classToAdd,this.clockFace=null==e?void 0:e.clockFace,this.tipsWrapper=null==e?void 0:e.tipsWrapper,this.theme=null==e?void 0:e.theme,this.clockType=null==e?void 0:e.clockType,this.disabledTime=null==e?void 0:e.disabledTime,this.hour=null==e?void 0:e.hour}}const f=(e,i)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout((()=>{e(...n)}),i)}};e.TimepickerUI=class{constructor(e,s){var a,h,x;this.create=()=>{this._updateInputValueWithCurrentTimeOnStart(),this._checkDisabledValuesOnStart(),this._setTimepickerClassToElement(),this._setInputClassToInputElement(),this._setDataOpenToInputIfDosentExistInWrapper(),this._setClassTopOpenElement(),this._handleOpenOnEnterFocus(),this._handleOpenOnClick(),this._getDisableTime()},this.open=e=>{this.create(),this._eventsBundle(),l(e)},this.close=f(((...e)=>{var i;if(e.length>2||!this.modalElement)return;const[t]=e.filter((e=>"boolean"==typeof e)),[n]=e.filter((e=>"function"==typeof e));t&&(this._handleOkButton(),null===(i=this.okButton)||void 0===i||i.click()),this._isTouchMouseMove=!1,b.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),document.removeEventListener("keypress",this._handleEscClick),this.wrapper.removeEventListener("keydown",this._focusTrapHandler),this._options.enableSwitchIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._removeAnimationToClose(),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400),this.openElement.forEach((e=>null==e?void 0:e.classList.remove("disabled"))),setTimeout((()=>{var e;this._options.focusInputAfterCloseModal&&(null===(e=this.input)||void 0===e||e.focus()),null!==this.modalElement&&(this.modalElement.remove(),this._isModalRemove=!0)}),300),l(n)}),300),this.destroy=e=>{b.split(" ").map((e=>document.removeEventListener(e,this._mutliEventsMoveHandler,!1))),document.removeEventListener("mousedown",this._eventsClickMobileHandler),document.removeEventListener("touchstart",this._eventsClickMobileHandler),this._options.enableSwitchIcon&&this.keyboardClockIcon&&(this.keyboardClockIcon.removeEventListener("touchstart",this._handlerViewChange),this.keyboardClockIcon.removeEventListener("mousedown",this._handlerViewChange)),this._cloned=this._element.cloneNode(!0),this._element.after(this._cloned),this._element.remove(),this._element=null,null===this._element&&l(e),this._element=this._cloned},this.update=(e,i)=>{this._options=Object.assign(Object.assign({},this._options),e.options),this._checkMobileOption(),e.create&&this.create(),l(i)},this._preventClockTypeByCurrentTime=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.preventClockType)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{currentTime:e,clockType:i}=this._options,{type:t}=d(this.input,i,e,!0);this._options.clockType=t?"12h":"24h"}},this._updateInputValueWithCurrentTimeOnStart=()=>{var e,i,t,n,r;if("boolean"!=typeof(null===(e=this._options)||void 0===e?void 0:e.currentTime)&&(null===(t=null===(i=this._options)||void 0===i?void 0:i.currentTime)||void 0===t?void 0:t.updateInput)||"boolean"==typeof(null===(n=this._options)||void 0===n?void 0:n.currentTime)&&(null===(r=this._options)||void 0===r?void 0:r.currentTime)){const{hour:e,minutes:i,type:t}=d(this.input,this._options.clockType,this._options.currentTime);this.input.value=t?`${e}:${i} ${t}`:`${e}:${i}`}},this._setTheme=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div"),n=[...null===(i=this.modalElement)||void 0===i?void 0:i.querySelectorAll("input"),...t],{theme:r}=this._options;"crane-straight"===r?n.forEach((e=>e.classList.add("crane-straight"))):"crane-radius"===r&&n.forEach((e=>e.classList.add("crane-straight","radius")))},this._setInputClassToInputElement=()=>{var e;n(this.input,"timepicker-ui-input")||null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-input")},this._setDataOpenToInputIfDosentExistInWrapper=()=>{var e;null===this.openElementData&&(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"))},this._setClassTopOpenElement=()=>{this.openElement.forEach((e=>null==e?void 0:e.classList.add("timepicker-ui-open-element")))},this._removeBackdrop=()=>{var e;this._options.backdrop||(null===(e=this.modalElement)||void 0===e||e.classList.add("removed"),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))))},this._setNormalizeClass=()=>{var e,i;const t=null===(e=this.modalElement)||void 0===e?void 0:e.querySelectorAll("div");null===(i=this.modalElement)||void 0===i||i.classList.add("timepicker-ui-normalize"),null==t||t.forEach((e=>e.classList.add("timepicker-ui-normalize")))},this._setFlexEndToFooterIfNoKeyboardIcon=()=>{!this._options.enableSwitchIcon&&this.footer&&(this.footer.style.justifyContent="flex-end")},this._eventsBundle=()=>{var e,i,t,n,r,o,s,a,l,u,d,c,p;if(this._isModalRemove){if(this._handleEscClick(),this._setErrorHandler(),this._removeErrorHandler(),this.openElement.forEach((e=>null==e?void 0:e.classList.add("disabled"))),null===(e=this.input)||void 0===e||e.blur(),this._setScrollbarOrNot(),this._setModalTemplate(),this._setNormalizeClass(),this._removeBackdrop(),this._setBgColorToCirleWithHourTips(),this._setOnStartCSSClassesIfClockType24h(),this._setClassActiveToHourOnOpen(),null!==this.clockFace){const e=new T({array:y,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(o=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===o?void 0:o.hours,clockType:"12h",hour:this.hour.value});if(e.create(),"24h"===this._options.clockType){new T({array:g,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:(null===(a=null===(s=this._disabledTime)||void 0===s?void 0:s.value)||void 0===a?void 0:a.isInterval)?null===(l=this._disabledTime)||void 0===l?void 0:l.value.rangeArrHour:null===(d=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===d?void 0:d.hours,hour:this.hour.value}).create()}else(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)===(null===(p=this._disabledTime)||void 0===p?void 0:p.value.endType)?setTimeout((()=>{var i,t,n,r,o,s,a,l;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)&&e.updateDisable({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour,minutesToUpdate:{endMinutes:null===(o=this._disabledTime)||void 0===o?void 0:o.value.endMinutes,removedEndHour:null===(s=this._disabledTime)||void 0===s?void 0:s.value.removedEndHour,removedStartedHour:null===(a=this._disabledTime)||void 0===a?void 0:a.value.removedStartedHour,actualHour:this.hour.value,startMinutes:null===(l=this._disabledTime)||void 0===l?void 0:l.value.startMinutes}})}),300):setTimeout((()=>{var i,t,n;e.updateDisable({minutesToUpdate:{actualHour:this.hour.value,pmHours:null===(i=this._disabledTime)||void 0===i?void 0:i.value.pmHours,amHours:null===(t=this._disabledTime)||void 0===t?void 0:t.value.amHours,activeMode:null===(n=this.activeTypeMode)||void 0===n?void 0:n.textContent}})}),300),e.updateDisable()}this._setFlexEndToFooterIfNoKeyboardIcon(),setTimeout((()=>{this._setTheme()}),0),this._setAnimationToOpen(),this._getInputValueOnOpenAndSet(),this._toggleClassActiveToValueTips(this.hour.value),this._isMobileView||(this._setTransformToCircleWithSwitchesHour(this.hour.value),this._handleAnimationClock()),this._handleMinutesEvents(),this._handleHourEvents(),"24h"!==this._options.clockType&&(this._handleAmClick(),this._handlePmClick()),this.clockFace&&this._handleMoveHand(),this._handleCancelButton(),this._handleOkButton(),this.modalElement&&(this._setShowClassToBackdrop(),this._handleBackdropClick()),this._handleIconChangeView(),this._handleClickOnHourMobile(),this._options.focusTrap&&this._focusTrapHandler()}},this._handleOpenOnClick=()=>{this.openElement.forEach((e=>this._clickTouchEvents.forEach((i=>null==e?void 0:e.addEventListener(i,(()=>this._eventsBundle()))))))},this._getInputValueOnOpenAndSet=()=>{var e,i;const t=d(this.input,this._options.clockType,this._options.currentTime);if(void 0===t)return this.hour.value="12",this.minutes.value="00",r(this._element,"show",{hour:this.hour.value,minutes:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),void("24h"!==this._options.clockType&&this.AM.classList.add(k));let[n,o,s]=this.input.value.split(":").join(" ").split(" ");0===this.input.value.length&&(n=t.hour,o=t.minutes,s=t.type),this.hour.value=n,this.minutes.value=o;const a=document.querySelector(`[data-type='${s}']`);"24h"!==this._options.clockType&&a&&a.classList.add(k),r(this._element,"show",Object.assign(Object.assign({},t),{type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}))},this._handleCancelButton=()=>{this._clickTouchEvents.forEach((e=>{this.cancelButton.addEventListener(e,(()=>{var e;const i=d(this.input,this._options.clockType);r(this._element,"cancel",Object.assign(Object.assign({},i),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))}))},this._handleOkButton=()=>{this._clickTouchEvents.forEach((e=>{var i;null===(i=this.okButton)||void 0===i||i.addEventListener(e,(()=>{var e,i,t;const{clockType:n,disabledTime:o}=this._options,s=c(this.hour.value,"hour",n),a=c(this.minutes.value,"minutes",n);let l;const d=p(this.hour.value,"hour",n,null==o?void 0:o.hours),h=p(this.minutes.value,"minutes",n,null==o?void 0:o.minutes);if((null==o?void 0:o.interval)&&(l=((e,i,t,n)=>{const r=t?u(`${e}:${i} ${t}`.trim()):`${e}:${i}`.trim();let o,s;if(t){const[e,i]=n.trim().split("-").map((e=>e.trim()));o=u(e),s=u(i)}else{const[e,i]=n.trim().split("-"),t=e=>e.trim().split(":").map((e=>Number(e)<=9?`0${Number(e)}`:e)).join(":");o=t(e),s=t(i)}return rs})(this.hour.value,this.minutes.value,null===(e=this.activeTypeMode)||void 0===e?void 0:e.textContent,o.interval)),!1===l||!1===s||!1===a||!1===d||!1===h)return!1!==l&&a&&h||this.minutes.classList.add("invalid-value"),void(!1!==l&&s&&d||this.hour.classList.add("invalid-value"));this.input.value=`${this.hour.value}:${this.minutes.value} ${"24h"===this._options.clockType?"":null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type}`.trimEnd(),r(this._element,"accept",{hour:this.hour.value,minutes:this.minutes.value,type:null===(t=this.activeTypeMode)||void 0===t?void 0:t.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),this.close()}))}))},this._setShowClassToBackdrop=()=>{this._options.backdrop&&setTimeout((()=>{this.modalElement.classList.add("show")}),300)},this._handleBackdropClick=()=>{var e;null===(e=this.modalElement)||void 0===e||e.addEventListener("click",(e=>{var i;const t=e.target;if(!n(t,"timepicker-ui-modal"))return;const o=d(this.input,this._options.clockType);r(this._element,"cancel",Object.assign(Object.assign({},o),{hourNotAccepted:this.hour.value,minutesNotAccepted:this.minutes.value,type:null===(i=this.activeTypeMode)||void 0===i?void 0:i.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})),this.close()}))},this._setBgColorToCirleWithHourTips=()=>{if(!this._options)return;const{mobile:e,theme:i}=this._options;e||null===this.circle||(this.circle.style.backgroundColor="crane-straight"===i||"crane-radius"===i?m.cranered400:m.purple)},this._setBgColorToCircleWithMinutesTips=()=>{const{theme:e}=this._options;this.minutes.value&&_.includes(this.minutes.value)&&(this.circle.style.backgroundColor="crane-straight"===e||"crane-radius"===e?m.cranered400:m.purple,this.circle.classList.remove("small-circle"))},this._removeBgColorToCirleWithMinutesTips=()=>{this.minutes.value&&_.includes(this.minutes.value)||(this.circle.style.backgroundColor="",this.circle.classList.add("small-circle"))},this._setTimepickerClassToElement=()=>{var e;null===(e=this._element)||void 0===e||e.classList.add("timepicker-ui")},this._setClassActiveToHourOnOpen=()=>{var e;this._options.mobile||this._isMobileView||null===(e=this.hour)||void 0===e||e.classList.add(k)},this._setMinutesToClock=e=>{var i,t,n,r,o;null!==this.clockFace&&this._setTransformToCircleWithSwitchesMinutes(e),this._removeBgColorToCirleWithMinutesTips();const s=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.minutes)?null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.minutes:null===(o=this._disabledTime)||void 0===o?void 0:o.value,a=new T({array:_,classToAdd:"timepicker-ui-minutes-time",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:s,hour:this.hour.value,clockType:this._options.clockType});a.create(),"12h"===this._options.clockType&&a.updateDisable(),this._toggleClassActiveToValueTips(e),"24h"===this._options.clockType&&(this.tipsWrapperFor24h.innerHTML="")},this._setHoursToClock=e=>{var i,t,n,r,o;if(null!==this.clockFace){this._setTransformToCircleWithSwitchesHour(e),this._setBgColorToCirleWithHourTips();const s=(null===(t=null===(i=this._disabledTime)||void 0===i?void 0:i.value)||void 0===t?void 0:t.isInterval)?null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour:null===(o=null===(r=this._disabledTime)||void 0===r?void 0:r.value)||void 0===o?void 0:o.hours,a=new T({array:y,classToAdd:"timepicker-ui-hour-time-12",clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,theme:this._options.theme,disabledTime:s,clockType:"12h",hour:this.hour.value});a.create(),"24h"===this._options.clockType?new T({array:g,classToAdd:"timepicker-ui-hour-time-24",clockFace:this.tipsWrapperFor24h,tipsWrapper:this.tipsWrapperFor24h,theme:this._options.theme,clockType:"24h",disabledTime:s,hour:this.hour.value}).create():a.updateDisable(),this._toggleClassActiveToValueTips(e)}},this._setTransformToCircleWithSwitchesHour=e=>{const i=Number(e);let t=i>12?30*i-360:30*i;360===t&&(t=0),t>360||(this.clockHand.style.transform=`rotateZ(${t}deg)`)},this._setTransformToCircleWithSwitchesMinutes=e=>{const i=6*Number(e);i>360||(this.clockHand.style.transform=`rotateZ(${i}deg)`)},this._handleAmClick=()=>{this._clickTouchEvents.forEach((e=>{this.AM.addEventListener(e,(e=>{var i,t,o,s;if(e.target.classList.add(k),this.PM.classList.remove(k),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new T({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,k)?y:_});(null===(t=this._disabledTime)||void 0===t?void 0:t.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300),e.updateDisable()}r(this._element,"selectamtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(s=this.activeTypeMode)||void 0===s?void 0:s.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handlePmClick=()=>{this._clickTouchEvents.forEach((e=>{this.PM.addEventListener(e,(e=>{var i,t,o,s;if(e.target.classList.add(k),this.AM.classList.remove(k),"12h"===this._options.clockType&&(null===(i=this._options.disabledTime)||void 0===i?void 0:i.interval)){const e=new T({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,k)?y:_});(null===(t=this._disabledTime)||void 0===t?void 0:t.value.startType)===(null===(o=this._disabledTime)||void 0===o?void 0:o.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}r(this._element,"selectpmtypemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(s=this.activeTypeMode)||void 0===s?void 0:s.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))}))},this._handleAnimationClock=()=>{this._options.animation&&setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.add("timepicker-ui-clock-animation"),setTimeout((()=>{var e;null===(e=this.clockFace)||void 0===e||e.classList.remove("timepicker-ui-clock-animation")}),600)}),150)},this._handleAnimationSwitchTipsMode=()=>{this.clockHand.classList.add("timepicker-ui-tips-animation"),setTimeout((()=>{var e;null===(e=this.clockHand)||void 0===e||e.classList.remove("timepicker-ui-tips-animation")}),401)},this._handleClasses24h=(e,i)=>{var t;const n=e.target;this.hourTips&&"24h"===this._options.clockType&&(Number(n.textContent)>12||0===Number(n.textContent)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(t=this.tipsWrapperFor24h)||void 0===t||t.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),n&&i&&(i.value=n.value.replace(/\D+/g,""),i.click())},this._handleHourEvents=()=>{var e,i;this._inputEvents.forEach((e=>{var i;null===(i=this.hour)||void 0===i||i.addEventListener(e,(e=>{var i,t,o,s,a;const l=e.target;if(null!==this.clockFace&&this._handleAnimationSwitchTipsMode(),"24h"===this._options.clockType&&(Number(l.value)>12||0===Number(l.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.remove("timepicker-ui-tips-wrapper-24h-disabled")),this._setHoursToClock(l.value),l.classList.add(k),this.minutes.classList.remove(k),"12h"===this._options.clockType&&(null===(t=this._options.disabledTime)||void 0===t?void 0:t.interval)){const e=new T({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,k)?y:_});(null===(o=this._disabledTime)||void 0===o?void 0:o.value.startType)===(null===(s=this._disabledTime)||void 0===s?void 0:s.value.endType)?setTimeout((()=>{var i,t,n,r;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(r=null===(n=this._disabledTime)||void 0===n?void 0:n.value)||void 0===r?void 0:r.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}r(this._element,"selecthourmode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(a=this.activeTypeMode)||void 0===a?void 0:a.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes}),null!==this.clockFace&&this.circle.classList.remove("small-circle")}))})),null===(e=this.hour)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.hour))),null===(i=this.hour)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.hour)))},this._handleMinutesEvents=()=>{var e,i;this._inputEvents.forEach((e=>{this.minutes.addEventListener(e,(e=>{var i,t,o,s,a,l;const u=e.target;if(null!==this.clockFace&&(this._handleAnimationSwitchTipsMode(),this._setMinutesToClock(u.value)),"24h"===this._options.clockType&&(this._removeCircleClockClasses24h(),this._options.mobile||null===(i=this.tipsWrapperFor24h)||void 0===i||i.classList.add("timepicker-ui-tips-wrapper-24h-disabled")),u.classList.add(k),null===(t=this.hour)||void 0===t||t.classList.remove(k),"12h"===this._options.clockType&&(null===(o=this._options.disabledTime)||void 0===o?void 0:o.interval)){const e=new T({clockFace:this.clockFace,tipsWrapper:this.tipsWrapper,array:n(this.hour,k)?y:_});(null===(s=this._disabledTime)||void 0===s?void 0:s.value.startType)===(null===(a=this._disabledTime)||void 0===a?void 0:a.value.endType)?setTimeout((()=>{var i,t,n;(null===(i=this._disabledTime)||void 0===i?void 0:i.value.startType)===(null===(t=this.activeTypeMode)||void 0===t?void 0:t.textContent)?e.updateDisable(Object.assign({hoursToUpdate:null===(n=this._disabledTime)||void 0===n?void 0:n.value.rangeArrHour},this._getDestructuringObj())):e.clean()}),300):setTimeout((()=>{e.updateDisable(Object.assign({},this._getDestructuringObj(!0)))}),300)}r(this._element,"selectminutemode",{hour:this.hour.value,minutes:this.minutes.value,type:null===(l=this.activeTypeMode)||void 0===l?void 0:l.dataset.type,degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes})}))})),null===(e=this.minutes)||void 0===e||e.addEventListener("blur",(e=>this._handleClasses24h(e,this.minutes))),null===(i=this.minutes)||void 0===i||i.addEventListener("focus",(e=>this._handleClasses24h(e,this.minutes)))},this._handleEventToMoveHand=e=>{var i,s,a,l,u,c,p,h,m,v,b,g,y,_,T,f,x,w,M,C,E,H,L,S,N,$,A,O,I,W,j,F,P,D,q,B,V,z,U,R,Y,Z,K,X,J,G,Q,ee,ie,te,ne,re,oe,se,ae,le,ue,de,ce,pe,he,me;const{target:ve,type:be,touches:ke}=e,ge=ve,{incrementMinutes:ye,incrementHours:_e,switchToMinutesAfterSelectHour:Te}=this._options;if(!t(e,this.clockFace))return;const fe=t(e,this.clockFace),xe=this.clockFace.offsetWidth/2,we=fe&&Math.atan2(fe.y-xe,fe.x-xe);if("mouseup"===be||"touchend"===be)return this._isTouchMouseMove=!1,void(Te&&(n(ge,"timepicker-ui-value-tips")||n(ge,"timepicker-ui-value-tips-24h")||n(ge,"timepicker-ui-tips-wrapper"))&&this.minutes.click());if("mousedown"!==be&&"mousemove"!==be&&"touchmove"!==be&&"touchstart"!==be||"mousedown"!==be&&"touchstart"!==be&&"touchmove"!==be||((n(ge,"timepicker-ui-clock-face")||n(ge,"timepicker-ui-circle-hand")||n(ge,"timepicker-ui-hour-time-12")||n(ge,"timepicker-ui-minutes-time")||n(ge,"timepicker-ui-clock-hand")||n(ge,"timepicker-ui-value-tips")||n(ge,"timepicker-ui-value-tips-24h")||n(ge,"timepicker-ui-tips-wrapper")||n(ge,"timepicker-ui-tips-wrapper-24h"))&&!n(ge,"timepicker-ui-tips-disabled")?(e.preventDefault(),this._isTouchMouseMove=!0):this._isTouchMouseMove=!1),!this._isTouchMouseMove)return;if(null!==this.minutesTips){this.minutes.classList.add(k);let e,t=we&&o(Math.trunc(180*we/Math.PI)+90,ye,6);if(void 0===t)return;if(t<0?(e=Math.round(360+t/6)%60,t=360+6*Math.round(t/6)):(e=Math.round(t/6)%60,t=6*Math.round(t/6)),null===(i=this._disabledTime)||void 0===i?void 0:i.value.isInterval)if((null===(u=this._disabledTime)||void 0===u?void 0:u.value.endType)===(null===(c=this._disabledTime)||void 0===c?void 0:c.value.startType)){if((null===(m=null===(h=null===(p=this._disabledTime)||void 0===p?void 0:p.value)||void 0===h?void 0:h.endMinutes)||void 0===m?void 0:m.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(b=null===(v=this._disabledTime)||void 0===v?void 0:v.value)||void 0===b?void 0:b.removedEndHour)&&(null===(g=this._disabledTime)||void 0===g?void 0:g.value.endType)===(null===(y=this.activeTypeMode)||void 0===y?void 0:y.textContent))return;if((null===(f=null===(T=null===(_=this._disabledTime)||void 0===_?void 0:_.value)||void 0===T?void 0:T.startMinutes)||void 0===f?void 0:f.includes(e<=9?`0${e}`:`${e}`))&&this.hour.value===(null===(w=null===(x=this._disabledTime)||void 0===x?void 0:x.value)||void 0===w?void 0:w.removedStartedHour)&&(null===(M=this._disabledTime)||void 0===M?void 0:M.value.startType)===(null===(C=this.activeTypeMode)||void 0===C?void 0:C.textContent))return}else{if((null===(E=this.activeTypeMode)||void 0===E?void 0:E.textContent)===(null===(H=this._disabledTime)||void 0===H?void 0:H.value.endType)&&((null===(N=null===(S=null===(L=this._disabledTime)||void 0===L?void 0:L.value)||void 0===S?void 0:S.endMinutes)||void 0===N?void 0:N.includes(e<=9?`0${e}`:`${e}`))&&(null===($=this._disabledTime)||void 0===$?void 0:$.value.removedPmHour)===this.hour.value||(null===(A=this._disabledTime)||void 0===A?void 0:A.value.pmHours.map(Number).includes(Number(this.hour.value)))))return;if((null===(O=this.activeTypeMode)||void 0===O?void 0:O.textContent)===(null===(I=this._disabledTime)||void 0===I?void 0:I.value.startType)&&((null===(F=null===(j=null===(W=this._disabledTime)||void 0===W?void 0:W.value)||void 0===j?void 0:j.startMinutes)||void 0===F?void 0:F.includes(e<=9?`0${e}`:`${e}`))&&(null===(P=this._disabledTime)||void 0===P?void 0:P.value.removedAmHour)===this.hour.value||(null===(D=this._disabledTime)||void 0===D?void 0:D.value.amHours.map(Number).includes(Number(this.hour.value)))))return}else if(null===(l=null===(a=null===(s=this._disabledTime)||void 0===s?void 0:s.value)||void 0===a?void 0:a.minutes)||void 0===l?void 0:l.includes(e<=9?`0${e}`:`${e}`))return;this.minutes.value=e>=10?`${e}`:`0${e}`,this.clockHand.style.transform=`rotateZ(${t}deg)`,this._degreesMinutes=t,this._toggleClassActiveToValueTips(this.minutes.value),this._removeBgColorToCirleWithMinutesTips(),this._setBgColorToCircleWithMinutesTips(),r(this._element,"update",Object.assign(Object.assign({},d(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:be,type:null===(q=this.activeTypeMode)||void 0===q?void 0:q.dataset.type}))}const Me=ke?ke[0]:void 0,Ce=ke&&Me?document.elementFromPoint(Me.clientX,Me.clientY):null;if(null!==this.hourTips){if(null===(B=this.hour)||void 0===B||B.classList.add(k),!n(Ce||ge,"timepicker-ui-value-tips-24h")&&!n(Ce||ge,"timepicker-ui-tips-disabled")&&(n(Ce||ge,"timepicker-ui-value-tips")||n(Ce||ge,"timepicker-ui-tips-wrapper"))){let e,i=we&&o(Math.trunc(180*we/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%12,i=360+i):(e=Math.round(i/30)%12,(0===e||e>12)&&(e=12));const t=(null===(V=this._disabledTime)||void 0===V?void 0:V.value.isInterval)?"rangeArrHour":"hours";if((null===(z=this._disabledTime)||void 0===z?void 0:z.value.endType)===(null===(R=null===(U=this._disabledTime)||void 0===U?void 0:U.value)||void 0===R?void 0:R.startType)){if("string"==typeof(null===(Z=null===(Y=this._disabledTime)||void 0===Y?void 0:Y.value)||void 0===Z?void 0:Z.endType)){if((null===(X=null===(K=this._disabledTime)||void 0===K?void 0:K.value)||void 0===X?void 0:X.endType)===(null===(J=this.activeTypeMode)||void 0===J?void 0:J.textContent)&&(null===(Q=null===(G=this._disabledTime)||void 0===G?void 0:G.value)||void 0===Q?void 0:Q.startType)===(null===(ee=this.activeTypeMode)||void 0===ee?void 0:ee.textContent)&&(null===(te=null===(ie=this._disabledTime)||void 0===ie?void 0:ie.value[t])||void 0===te?void 0:te.includes(e.toString())))return}else if(null===(re=null===(ne=this._disabledTime)||void 0===ne?void 0:ne.value[t])||void 0===re?void 0:re.includes(e.toString()))return}else{if((null===(oe=this._disabledTime)||void 0===oe?void 0:oe.value.startType)===(null===(se=this.activeTypeMode)||void 0===se?void 0:se.textContent)&&(null===(ae=this._disabledTime)||void 0===ae?void 0:ae.value.amHours.includes(e.toString())))return;if((null===(le=this._disabledTime)||void 0===le?void 0:le.value.endType)===(null===(ue=this.activeTypeMode)||void 0===ue?void 0:ue.textContent)&&(null===(de=this._disabledTime)||void 0===de?void 0:de.value.pmHours.includes(e.toString())))return}this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=e>9?`${e}`:`0${e}`,this._removeCircleClockClasses24h(),this._toggleClassActiveToValueTips(e)}if((n(Ce||ge,"timepicker-ui-value-tips-24h")||n(Ce||ge,"timepicker-ui-tips-wrapper-24h"))&&!n(Ce||ge,"timepicker-ui-tips-disabled")){let e,i=we&&o(Math.trunc(180*we/Math.PI)+90,_e,30);if(this._degreesHours=i,void 0===i)return;i<0?(e=Math.round(360+i/30)%24,i=360+i):(e=Math.round(i/30)+12,12===e&&(e="00"));const t=(null===(ce=this._disabledTime)||void 0===ce?void 0:ce.value.isInterval)?"rangeArrHour":"hours";if(null===(he=null===(pe=this._disabledTime)||void 0===pe?void 0:pe.value[t])||void 0===he?void 0:he.includes(e.toString()))return;this._setCircleClockClasses24h(),this.clockHand.style.transform=`rotateZ(${i}deg)`,this.hour.value=`${e}`,this._toggleClassActiveToValueTips(e)}r(this._element,"update",Object.assign(Object.assign({},d(this.input,this._options.clockType)),{degreesHours:this._degreesHours,degreesMinutes:this._degreesMinutes,eventType:be,type:null===(me=this.activeTypeMode)||void 0===me?void 0:me.dataset.type}))}},this._toggleClassActiveToValueTips=e=>{const i=this.allValueTips.find((i=>Number(i.innerText)===Number(e)));this.allValueTips.map((e=>e.classList.remove(k))),void 0!==i&&i.classList.add(k)},this._handleMoveHand=()=>{this._options.mobile||this._isMobileView||b.split(" ").forEach((e=>{"touchstart"===e||"touchmove"===e||"touchend"===e?document.addEventListener(e,this._mutliEventsMoveHandler,{passive:!1}):document.addEventListener(e,this._mutliEventsMoveHandler,!1)}))},this._setModalTemplate=()=>{if(!this._options)return;const{appendModalSelector:e}=this._options;if(""!==e&&e){const i=null===document||void 0===document?void 0:document.querySelector(e);null==i||i.insertAdjacentHTML("beforeend",this.modalTemplate)}else document.body.insertAdjacentHTML("afterend",this.modalTemplate)},this._setScrollbarOrNot=()=>{this._options.enableScrollbar?setTimeout((()=>{document.body.style.overflowY="",document.body.style.paddingRight=""}),400):(document.body.style.paddingRight=`${(()=>{const e=document.createElement("div");e.className="timepicker-ui-measure",document.body.appendChild(e);const i=e.getBoundingClientRect().width-e.clientWidth;return document.body.removeChild(e),i})()}px`,document.body.style.overflowY="hidden")},this._setAnimationToOpen=()=>{var e,i;null===(e=this.modalElement)||void 0===e||e.classList.add("opacity"),this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.add("show")}),150):null===(i=this.modalElement)||void 0===i||i.classList.add("show")},this._removeAnimationToClose=()=>{var e;this.modalElement&&(this._options.animation?setTimeout((()=>{var e;null===(e=this.modalElement)||void 0===e||e.classList.remove("show")}),150):null===(e=this.modalElement)||void 0===e||e.classList.remove("show"))},this._handlerViewChange=f((()=>{var e,i,t,r;const{clockType:o}=this._options;if(n(this.modalElement,"mobile")){const e=c(this.hour.value,"hour",o),n=c(this.minutes.value,"minutes",o);if(!1===e||!1===n)return n||this.minutes.classList.add("invalid-value"),void(e||null===(i=this.hour)||void 0===i||i.classList.add("invalid-value"));!0===e&&!0===n&&(n&&this.minutes.classList.remove("invalid-value"),e&&(null===(t=this.hour)||void 0===t||t.classList.remove("invalid-value"))),this.close(),this._isMobileView=!1,this._options.mobile=!1;const s=this.hour.value,a=this.minutes.value,l=null===(r=this.activeTypeMode)||void 0===r?void 0:r.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!1}}),setTimeout((()=>{if(this.open(),this.hour.value=s,this.minutes.value=a,"12h"===this._options.clockType){const e="PM"===l?"AM":"PM";this["PM"===l?"PM":"AM"].classList.add(k),this[e].classList.remove(k)}this._setTransformToCircleWithSwitchesHour(this.hour.value),this._toggleClassActiveToValueTips(this.hour.value),Number(this.hour.value)>12||0===Number(this.hour.value)?this._setCircleClockClasses24h():this._removeCircleClockClasses24h()}),300)}),300)}else{this.close(),this._isMobileView=!0,this._options.mobile=!0;const i=this.hour.value,t=this.minutes.value,n=null===(e=this.activeTypeMode)||void 0===e?void 0:e.dataset.type;setTimeout((()=>{this.destroy(),this.update({options:{mobile:!0}}),setTimeout((()=>{if(this.open(),this.hour.value=i,this.minutes.value=t,"12h"===this._options.clockType){const e="PM"===n?"AM":"PM";this["PM"===n?"PM":"AM"].classList.add(k),this[e].classList.remove(k)}}),300)}),300)}}),400),this._handleIconChangeView=()=>i(this,void 0,void 0,(function*(){this._options.enableSwitchIcon&&(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?this.keyboardClockIcon.addEventListener("touchstart",this._handlerViewChange):this.keyboardClockIcon.addEventListener("click",this._handlerViewChange))})),this._handlerClickHourMinutes=e=>i(this,void 0,void 0,(function*(){var i,t;if(!this.modalElement)return;const{clockType:r,editable:o}=this._options,s=e.target,a=c(this.hour.value,"hour",r),l=c(this.minutes.value,"minutes",r);o&&(n(s,"timepicker-ui-hour")||n(s,"timepicker-ui-minutes")?!1!==a&&!1!==l||(l||this.minutes.classList.add("invalid-value"),a||null===(t=this.hour)||void 0===t||t.classList.add("invalid-value")):!0===a&&!0===l&&(l&&this.minutes.classList.remove("invalid-value"),a&&(null===(i=this.hour)||void 0===i||i.classList.remove("invalid-value"))))})),this._handleClickOnHourMobile=()=>{document.addEventListener("mousedown",this._eventsClickMobileHandler),document.addEventListener("touchstart",this._eventsClickMobileHandler)},this._handleKeyPress=e=>{"Escape"===e.key&&this.modalElement&&this.close()},this._handleEscClick=()=>{document.addEventListener("keydown",this._handleKeyPress)},this._focusTrapHandler=()=>{setTimeout((()=>{var e,i;const t=null===(e=this.wrapper)||void 0===e?void 0:e.querySelectorAll('div[tabindex="0"]:not([disabled])'),r=null===(i=this.wrapper)||void 0===i?void 0:i.querySelectorAll('input[tabindex="0"]:not([disabled])');if(!t||t.length<=0||r.length<=0)return;const o=[...r,...t],s=o[0],a=o[o.length-1];this.wrapper.focus(),this.wrapper.addEventListener("keydown",(({key:e,shiftKey:i,target:t})=>{const r=t;if("Tab"===e&&(i?document.activeElement===s&&a.focus():document.activeElement===a&&s.focus()),"Enter"===e&&(n(r,"timepicker-ui-minutes")&&this.minutes.click(),n(r,"timepicker-ui-hour")&&this.hour.click(),n(r,"timepicker-ui-cancel-btn")&&this.cancelButton.click(),n(r,"timepicker-ui-ok-btn")&&this.okButton.click(),n(r,"timepicker-ui-keyboard-icon-wrapper")&&this.keyboardClockIcon.click(),n(r,"timepicker-ui-am")&&this.AM.click(),n(r,"timepicker-ui-pm")&&this.PM.click(),n(r,"timepicker-ui-value-tips")||n(r,"timepicker-ui-value-tips-24h"))){const{left:e,top:i,x:t,y:o,width:s,height:a}=r.getBoundingClientRect(),l=document.elementFromPoint(t,o),u=()=>{var t;const r=new MouseEvent("mousedown",{clientX:e+s/2,clientY:i+a/2,cancelable:!0,bubbles:!0});n(l,"timepicker-ui-value-tips-24h")?null==l||l.dispatchEvent(r):null===(t=null==l?void 0:l.childNodes[0])||void 0===t||t.dispatchEvent(r),this._isTouchMouseMove=!1};u()}setTimeout((()=>{this.wrapper.addEventListener("mousedown",(()=>document.activeElement.blur()))}),100)}))}),301)},this._handleOpenOnEnterFocus=()=>{this.input.addEventListener("keydown",(({target:e,key:i})=>{e.disabled||"Enter"===i&&this.open()}))},this._element=e,this._cloned=null,this._options=((e,i)=>Object.assign(Object.assign({},i),e))(Object.assign(Object.assign({},s),(e=>{if(!e)return;const i=JSON.parse(JSON.stringify(e)),t=Object.keys(i);return Object.values(i).reduce(((e,i,n)=>(Number(i)?e[t[n]]=Number(i):e[t[n]]="true"===i||"false"===i?JSON.parse(i):i,e)),{})})(null===(a=this._element)||void 0===a?void 0:a.dataset)),v),this._isTouchMouseMove=!1,this._degreesHours=30*Number(d(null===(h=this._element)||void 0===h?void 0:h.querySelector("input"),this._options.clockType).hour),this._degreesMinutes=6*Number(d(null===(x=this._element)||void 0===x?void 0:x.querySelector("input"),this._options.clockType).minutes),this._isMobileView=!1,this._mutliEventsMove=e=>this._handleEventToMoveHand(e),this._mutliEventsMoveHandler=this._mutliEventsMove.bind(this),this._eventsClickMobile=e=>this._handlerClickHourMinutes(e),this._eventsClickMobileHandler=this._eventsClickMobile.bind(this),this._checkMobileOption(),this._clickTouchEvents=["click","mousedown","touchstart"],this._inputEvents=["change",...this._clickTouchEvents],this._disabledTime=null,this._preventClockTypeByCurrentTime(),this._isModalRemove=!0}get modalTemplate(){return this._options.mobile&&this._isMobileView?(e=>{const{mobileTimeLabel:i,amLabel:t,pmLabel:n,cancelLabel:r,okLabel:o,iconTemplateMobile:s,minuteMobileLabel:a,hourMobileLabel:l,enableSwitchIcon:u,animation:d,clockType:c}=e;return`\n `})(this._options):(e=>{const{iconTemplate:i,timeLabel:t,amLabel:n,pmLabel:r,cancelLabel:o,okLabel:s,enableSwitchIcon:a,animation:l,clockType:u,editable:d}=e;return`\n `})(this._options)}get modalElement(){return document.querySelector(".timepicker-ui-modal")}get clockFace(){return document.querySelector(".timepicker-ui-clock-face")}get input(){var e;return null===(e=this._element)||void 0===e?void 0:e.querySelector("input")}get clockHand(){return document.querySelector(".timepicker-ui-clock-hand")}get circle(){return document.querySelector(".timepicker-ui-circle-hand")}get tipsWrapper(){return document.querySelector(".timepicker-ui-tips-wrapper")}get tipsWrapperFor24h(){return document.querySelector(".timepicker-ui-tips-wrapper-24h")}get minutes(){return document.querySelector(".timepicker-ui-minutes")}get hour(){return document.querySelector(".timepicker-ui-hour")}get AM(){return document.querySelector(".timepicker-ui-am")}get PM(){return document.querySelector(".timepicker-ui-pm")}get minutesTips(){return document.querySelector(".timepicker-ui-minutes-time")}get hourTips(){return document.querySelector(".timepicker-ui-hour-time-12")}get allValueTips(){return[...document.querySelectorAll(".timepicker-ui-value-tips"),...document.querySelectorAll(".timepicker-ui-value-tips-24h")]}get openElementData(){var e;const i=null===(e=this._element)||void 0===e?void 0:e.querySelectorAll("[data-open]");if((null==i?void 0:i.length)>0){const e=[];return i.forEach((({dataset:i})=>{var t;return e.push(null!==(t=i.open)&&void 0!==t?t:"")})),[...new Set(e)]}return null}get openElement(){var e,i;return null===this.openElementData?(null===(e=this.input)||void 0===e||e.setAttribute("data-open","timepicker-ui-input"),[this.input]):null!==(i=this.openElementData.map((e=>{var i;return null===(i=this._element)||void 0===i?void 0:i.querySelectorAll(`[data-open='${e}']`)}))[0])&&void 0!==i?i:""}get cancelButton(){return document.querySelector(".timepicker-ui-cancel-btn")}get okButton(){return document.querySelector(".timepicker-ui-ok-btn")}get activeTypeMode(){return document.querySelector(".timepicker-ui-type-mode.active")}get keyboardClockIcon(){return document.querySelector(".timepicker-ui-keyboard-icon-wrapper")}get footer(){return document.querySelector(".timepicker-ui-footer")}get wrapper(){return document.querySelector(".timepicker-ui-wrapper")}_checkDisabledValuesOnStart(){if(!this._options.disabledTime||this._options.disabledTime.interval)return;const{disabledTime:{hours:e,minutes:i},clockType:t}=this._options,n=!e||p(e,"hour",t),r=!i||p(i,"minutes",t);if(!n||!r)throw new Error("You set wrong hours or minutes in disabled option")}_checkMobileOption(){this._isMobileView=!!this._options.mobile,this._options.mobile&&(this._options.editable=!0)}_getDisableTime(){this._disabledTime=(e=>{if(!e)return;const{disabledTime:i,clockType:t}=e;if(!i||Object.keys(i).length<=0||"Object"!==i.constructor.name)return;const{hours:n,interval:r,minutes:o}=i;if(r){delete i.hours,delete i.minutes;const[e,n]=r.toString().split("-"),{hour:o,minutes:l,type:u}=d({value:e.trimEnd()},t),{hour:c,minutes:p,type:h}=d({value:n.trimEnd().trimStart()},t);let m=s(o,c).map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`));const v=[],b=Number(l),k=Number(p);if(h===u)return b>0&&k<=0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):k<59&&k>0&&b<=0?(v.push(void 0,m[m.length-1]),m=m.slice(0,-1)):k>0&&b>0?(v.push(m[0],m[m.length-1]),m=m.slice(1,-1)):0===k&&0===b&&(v.push(void 0,m[m.length-1]),m.pop()),{value:{removedStartedHour:Number(v[0])<=9?`0${v[0]}`:v[0],removedEndHour:Number(v[1])<=9?`0${v[1]}`:v[1],rangeArrHour:m,isInterval:!0,startMinutes:s(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:a(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endType:h,startType:u}};{const e=s(o,12).map(String),i=a(1,c).map(String),t=[],n=[];return b>0&&k<=0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):k<59&&k>0&&b<=0?(n.push(e[0]),t.push(i[i.length-1]),i.splice(-1,1)):k>0&&b>0?(t.push(i[i.length-1]),n.push(e[0]),i.splice(-1,1),e.splice(0,1)):0===k&&0===b&&(t.push(i[i.length-1]),n.push(e[0]),i.pop()),{value:{isInterval:!0,endType:h,startType:u,pmHours:i,amHours:e,startMinutes:0===Number(l)?[]:s(l,59).map((e=>Number(e)<=9?`0${e}`:`${e}`)),endMinutes:a(0,p).map((e=>Number(e)<=9?`0${e}`:`${e}`)),removedAmHour:Number(n[0])<=9?`0${n[0]}`:n[0],removedPmHour:Number(t[0])<=9?`0${t[0]}`:t[0]}}}}return null==n||n.forEach((e=>{if("12h"===t&&Number(e)>12)throw new Error("The disabled hours value has to be less than 13");if("24h"===t&&Number(e)>23)throw new Error("The disabled hours value has to be less than 24")})),null==o||o.forEach((e=>{if(Number(e)>59)throw new Error("The disabled minutes value has to be less than 60")})),{value:{hours:null==n?void 0:n.map((e=>"00"===e||0===Number(e)?`0${Number(e)}`:`${Number(e)}`)),minutes:null==o?void 0:o.map((e=>Number(e)<=9?`0${e}`:`${e}`))}}})(this._options)}_removeCircleClockClasses24h(){var e,i;null===(e=this.circle)||void 0===e||e.classList.remove("timepicker-ui-circle-hand-24h"),null===(i=this.clockHand)||void 0===i||i.classList.remove("timepicker-ui-clock-hand-24h")}_setCircleClockClasses24h(){var e,i;this.circle&&(null===(e=this.circle)||void 0===e||e.classList.add("timepicker-ui-circle-hand-24h")),this.clockHand&&(null===(i=this.clockHand)||void 0===i||i.classList.add("timepicker-ui-clock-hand-24h"))}_setErrorHandler(){var e,i,t,n;const{error:o,currentHour:s,currentMin:a,currentType:l,currentLength:u}=d(this.input,this._options.clockType);if(o){const d=document.createElement("div");throw null===(e=this.input)||void 0===e||e.classList.add("timepicker-ui-invalid-format"),d.classList.add("timepicker-ui-invalid-text"),d.innerHTML="Invalid Time Format",(null===(i=this.input)||void 0===i?void 0:i.parentElement)&&null===(null===(t=this.input)||void 0===t?void 0:t.parentElement.querySelector(".timepicker-ui-invalid-text"))&&(null===(n=this.input)||void 0===n||n.after(d)),r(this._element,"geterror",{error:o,currentHour:s,currentMin:a,currentType:l,currentLength:u}),new Error(`Invalid Time Format: ${o}`)}}_removeErrorHandler(){var e,i;null===(e=this.input)||void 0===e||e.classList.remove("timepicker-ui-invalid-format");const t=null===(i=this._element)||void 0===i?void 0:i.querySelector(".timepicker-ui-invalid-text");t&&t.remove()}_setOnStartCSSClassesIfClockType24h(){if("24h"===this._options.clockType){let{hour:e}=d(this.input,this._options.clockType,this._options.currentTime);this.input.value.length>0&&(e=this.input.value.split(":")[0]),(Number(e)>12||0===Number(e))&&this._setCircleClockClasses24h()}}_getDestructuringObj(e){var i;const{endMinutes:t,removedEndHour:n,removedStartedHour:r,startMinutes:o,pmHours:s,amHours:a,removedAmHour:l,removedPmHour:u}=this._disabledTime.value;return e?{minutesToUpdate:{actualHour:this.hour.value,pmHours:s,amHours:a,activeMode:null===(i=this.activeTypeMode)||void 0===i?void 0:i.textContent,startMinutes:o,endMinutes:t,removedAmHour:l,removedPmHour:u}}:{minutesToUpdate:{endMinutes:t,removedEndHour:n,removedStartedHour:r,actualHour:this.hour.value,startMinutes:o}}}},Object.defineProperty(e,"__esModule",{value:!0})})); diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts index 182ddab..6895560 100644 --- a/dist/types/index.d.ts +++ b/dist/types/index.d.ts @@ -224,7 +224,7 @@ declare class TimepickerUI { * @description The open method opens immediately timepicker after init * @param callback - The callback function triggered when timepicker is open by this method */ - open: (callback?: (() => void) | undefined) => void; + open: (callback?: () => void) => void; /** * @description Closure method closes the timepicker * @param args - These parameters in this method are optional and order is any. You can set callback function first or boolean, @@ -236,7 +236,7 @@ declare class TimepickerUI { * @description The destroy method destroy actual instance of picker by cloning element. * @param callback - The callback function is started after destroyed method. This parameter is optional. */ - destroy: (callback?: TypeFunction | undefined) => void; + destroy: (callback?: TypeFunction) => void; /** * @description The update method which update timepicker with new options and can create a new instance. * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current @@ -247,7 +247,7 @@ declare class TimepickerUI { update: (value: { options: OptionTypes; create?: boolean; - }, callback?: TypeFunction | undefined) => void; + }, callback?: TypeFunction) => void; private _preventClockTypeByCurrentTime; private _updateInputValueWithCurrentTimeOnStart; private _checkDisabledValuesOnStart;