'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b55be5aa.js');
const helpers = require('./helpers-a6a0ad60.js');
const lang = require('./lang-5443862a.js');

class Time {
    /**
     * @param time - Time string in format 'hh:mm:ss:ms am/pm'
     */
    constructor(time = '') {
        /**
         * Hour in 24-hour format
         */
        this.hour = 12;
        /**
         * Minute
         */
        this.minute = 0;
        /**
         * Second
         */
        this.second = 0;
        /**
         * Millisecond
         */
        this.millisecond = 0;
        /**
         * Time string in format 'hh:mm:ss:ms am/pm'
         */
        this._time = '';
        /**
         * Period of the day - am or pm
         */
        this._period = 'am';
        /**
         * State of the day - day or night
         */
        this._state = 'day';
        /**
         * Format of the time string
         *
         * t - 12-hour format
         * T - 24-hour format
         * tt - 12-hour format with seconds
         * TT - 24-hour format with seconds
         * ttt - 12-hour format with seconds and milliseconds
         * TTT - 24-hour format with seconds and milliseconds
         */
        this._format = 'TT';
        this._parseTime(time);
        this._parseState();
    }
    /**
     * Parse the time from string
     */
    _parseTime(time) {
        if (time == '') {
            return;
        }
        if (time == 'now') {
            const date = new Date();
            this.hour = date.getHours();
            this.minute = date.getMinutes();
            this.second = date.getSeconds();
            this.millisecond = date.getMilliseconds();
            time = `${this.hour}:${this.minute}:${this.second}:${this.millisecond}`;
        }
        this._time = time.toLowerCase();
        const phases = this._time.split(/[ :]/);
        const periodIndex = phases.findIndex(i => ['am', 'pm'].includes(i));
        if ((periodIndex == -1 && phases.length > 5)
            || (periodIndex != -1 && phases.length > 4)) {
            throw new Error('Invalid time format');
        }
        if (periodIndex != -1) {
            this._period = phases[periodIndex];
            phases.splice(periodIndex, 1);
        }
        else {
            this._period = 'am';
        }
        switch (phases.length) {
            case 4:
                this.millisecond = parseInt(phases[3]);
            case 3:
                this.second = parseInt(phases[2]);
            case 2:
                this.minute = parseInt(phases[1]);
            case 1:
                this.hour = parseInt(phases[0]);
                if (Number.isNaN(this.hour)) {
                    this.hour = 0;
                }
                if (this._period == 'pm' && this.hour < 12) {
                    this.hour += 12;
                }
            default:
                if (this.hour > 12) {
                    this._period = 'pm';
                }
        }
    }
    /**
     * Parse the state of the day
     */
    _parseState() {
        if (this.hour >= 6 && this.hour < 18) {
            this._state = 'day';
        }
        else {
            this._state = 'night';
        }
    }
    /**
     * Set the time output format
     */
    setFormat(format) {
        this._format = format;
        return this;
    }
    /**
     * Set the time period and hour of the day
     */
    setPeriodHour(hour, period = null) {
        if (Number.isNaN(hour)) {
            this.hour = NaN;
        }
        if (hour > 24 || hour < 0) {
            return this;
        }
        if (period == null && hour > 12) {
            period = 'pm';
        }
        this._period = period || this._period;
        this.hour = hour;
        if (this._period == 'pm' && this.hour < 12) {
            this.hour += 12;
        }
        this._parseState();
        return this;
    }
    /**
     * Set the time hour
     */
    setHour(hour) {
        this.hour = hour;
        this._parseState();
        return this;
    }
    /**
     * Set the time minute
     */
    setMinute(minute) {
        this.minute = minute;
        return this;
    }
    /**
     * Set the time seconds
     */
    setSecond(second) {
        this.second = second;
        return this;
    }
    /**
     * Set the time milliseconds
     */
    setMillisecond(millisecond) {
        this.millisecond = millisecond;
        return this;
    }
    /**
     * Get the time period hour
     */
    getPeriodHour() {
        const hour = this.hour % 12;
        return hour == 0 ? 12 : hour;
    }
    /**
     * Get the time period of the day
     */
    getPeriod() {
        return this._period;
    }
    /**
     * Get the time state of the day
     */
    getState() {
        return this._state;
    }
    /**
     * Return the fime formated in string
     */
    toString() {
        if ([this.hour, this.minute, this.second, this.millisecond].some(v => isNaN(v))) {
            return '';
        }
        switch (this._format) {
            case 't':
                return `${this.getPeriodHour().toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')} ${this._period}`;
            case 'T':
                return `${this.hour.toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}`;
            case 'tt':
                return `${this.getPeriodHour().toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}:${this.second.toString().padStart(2, '0')} ${this._period}`;
            case 'TT':
                return `${this.hour.toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}:${this.second.toString().padStart(2, '0')}`;
            case 'ttt':
                return `${this.getPeriodHour().toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}:${this.second.toString().padStart(2, '0')}:${this.millisecond.toString().padStart(3, '0')} ${this._period}`;
            case 'TTT':
                return `${this.hour.toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}:${this.second.toString().padStart(2, '0')}:${this.millisecond.toString().padStart(3, '0')}`;
            default:
                return `${this.hour.toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}`;
        }
    }
    /**
     * Parse the time string
     */
    parse(time = '') {
        this._parseTime(time);
        this._parseState();
        return this;
    }
    /**
     * Get the current time
     */
    static now() {
        return new Time('now');
    }
    /**
     * Parse the time string
     */
    static parse(time) {
        return new Time(time);
    }
}

const styleCss = "x-timepicker{display:block;position:relative;width:100%}x-timepicker .input-container{color:var(--color-text, #4A4A4A);position:relative;padding:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;text-align:left;border-radius:0.5rem;border:1px solid var(--color-border-tinted, #d9d8db);overflow:hidden;background-color:var(--color-white, #FFFFFF);min-height:50px;font-size:1rem;-webkit-transition-duration:0.4s;transition-duration:0.4s;-webkit-transition-property:border-color, background-color, padding, z-index, -webkit-box-shadow;transition-property:border-color, background-color, padding, z-index, -webkit-box-shadow;transition-property:border-color, box-shadow, background-color, padding, z-index;transition-property:border-color, box-shadow, background-color, padding, z-index, -webkit-box-shadow;min-width:100px;-webkit-box-sizing:content-box;box-sizing:content-box}x-timepicker .input-container.focus,x-timepicker .input-container:focus{border-color:var(--color-primary, #4275F2) !important;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3)}x-card x-timepicker .input-container{background-color:var(--color-border-lucid, #f7f7f7)}.is-dark-mode x-card x-timepicker .input-container{background-color:var(--color-dark, #1F1F1F) !important}.is-dark-mode x-timepicker .input-container{color:var(--color-text-light, #FEFEFE);border:1px solid var(--color-dark-tint, #414141);background-color:var(--color-black, #000000)}x-timepicker .input-container label{display:block;color:#5A616E;line-height:1em;font-weight:normal;padding:8px 12px 0px;font-size:0.75rem;margin:0px;-webkit-transition:-webkit-transform 0.4s;transition:-webkit-transform 0.4s;transition:transform 0.4s;transition:transform 0.4s, -webkit-transform 0.4s;border-radius:0.5rem;-webkit-animation:fadeInDown 0.5s;animation:fadeInDown 0.5s}.is-dark-mode x-timepicker .input-container label{color:var(--color-text-light-shaded, #b2b2b2)}x-timepicker .input-container .wrap{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;-ms-flex:1;flex:1;margin:0px;position:relative;-webkit-transition:all 0.4s;transition:all 0.4s;padding:0px 1px}x-timepicker .input-container.disabled{opacity:0.6;cursor:not-allowed}x-timepicker .input-container.disabled input,x-timepicker .input-container.disabled select,x-timepicker .input-container.disabled span,x-timepicker .input-container.disabled label,x-timepicker .input-container.disabled div,x-timepicker .input-container.disabled textarea{cursor:not-allowed !important}x-timepicker .input-container.required:before{content:\"\";position:absolute;width:1rem;height:1rem;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23d0cfd4\" opacity=\"0.75\"><path d=\"M9.365,13.055l-5.367-1.528c-0.545-0.155-0.852-0.732-0.677-1.271l0.545-1.677C4.044,8.027,4.653,7.743,5.19,7.96 l5.31,2.143l-0.345-6.045C10.122,3.483,10.579,3,11.153,3h1.857c0.574,0,1.031,0.483,0.998,1.056l-0.346,6.189l5.142-2.096 c0.539-0.22,1.151,0.066,1.33,0.62l0.548,1.707c0.173,0.54-0.137,1.116-0.683,1.269l-5.486,1.532l3.61,4.596 c0.352,0.448,0.259,1.1-0.205,1.431l-1.503,1.074c-0.47,0.336-1.127,0.205-1.431-0.287l-3.127-5.042l-3.094,4.873 c-0.303,0.477-0.941,0.609-1.408,0.29l-1.484-1.013c-0.479-0.327-0.58-0.991-0.221-1.446L9.365,13.055z\" fill=\"%23d0cfd4\"/></svg>');background-repeat:no-repeat;background-size:75% 75%;background-position:bottom left;top:0;right:0;-webkit-animation:fadeInLeft 0.5s;animation:fadeInLeft 0.5s}x-timepicker .input-container.invalid.required:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23D63864\" opacity=\"0.75\"><path d=\"M9.365,13.055l-5.367-1.528c-0.545-0.155-0.852-0.732-0.677-1.271l0.545-1.677C4.044,8.027,4.653,7.743,5.19,7.96 l5.31,2.143l-0.345-6.045C10.122,3.483,10.579,3,11.153,3h1.857c0.574,0,1.031,0.483,0.998,1.056l-0.346,6.189l5.142-2.096 c0.539-0.22,1.151,0.066,1.33,0.62l0.548,1.707c0.173,0.54-0.137,1.116-0.683,1.269l-5.486,1.532l3.61,4.596 c0.352,0.448,0.259,1.1-0.205,1.431l-1.503,1.074c-0.47,0.336-1.127,0.205-1.431-0.287l-3.127-5.042l-3.094,4.873 c-0.303,0.477-0.941,0.609-1.408,0.29l-1.484-1.013c-0.479-0.327-0.58-0.991-0.221-1.446L9.365,13.055z\" fill=\"%23D63864\"/></svg>') !important;-webkit-animation:fadeInLeft 0.5s;animation:fadeInLeft 0.5s}x-timepicker .input-container.invalid{border-color:var(--color-danger, #DC3545) !important}x-timepicker .input-container.invalid.focus{outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-danger-rgb, 220, 53, 69), 0.3);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-danger-rgb, 220, 53, 69), 0.3)}x-timepicker .input-container.invalid label{color:var(--color-danger, #DC3545)}x-timepicker .input-container.loading .loading-indicator{opacity:1;z-index:auto;visibility:visible}x-timepicker .input-container .loading-indicator{width:1em;height:1em;position:relative;color:inherit;display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-animation:cycle 0.8s infinite linear;animation:cycle 0.8s infinite linear;padding:0px 1rem;opacity:0;margin:-0.5em;z-index:-1;-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}x-timepicker .input-container .loading-indicator:after{content:\" \";display:block;width:2em;height:2em;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:0em 0em;transform-origin:0em 0em;-webkit-transform:translateZ(0) scale(0.5);transform:translateZ(0) scale(0.5);-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:50%;border:0.3em solid currentColor;border-left-color:transparent}x-timepicker .input-container .info{margin:0;margin-right:0.5rem;width:2rem;height:2rem;font-size:18px;line-height:1em;border-radius:50%;border:none;outline:none !important;cursor:pointer;background-color:transparent;-webkit-transition:0.3s background-color;transition:0.3s background-color;color:rgba(var(--color-link-rgb, 66, 117, 242), 0.5);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.is-dark-mode x-timepicker .input-container .info x-icon{color:rgba(255, 255, 255, 0.5)}x-timepicker .input-container .info:hover{background-color:var(--color-link-lucid, #e3eafd);-webkit-transform:none;transform:none}.is-dark-mode x-timepicker .input-container .info:hover{color:rgba(255, 255, 255, 0.5);background-color:var(--color-link-tint, #5e8af4)}x-timepicker .input-container .separator{display:none;margin:0 2px;padding:0px;height:30px;border-left:1px dashed var(--color-border, #C8C7CC)}x-timepicker .input-container .separator.active{display:block}.is-dark-mode x-timepicker .input-container .separator{margin:0 2px;padding:0px;height:30px;border-left:1px dashed var(--color-dark-tinted, #626262)}x-timepicker .input-container .indicator{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0;padding:0px 1rem;margin-right:0px;height:50px;font-size:0.8rem;line-height:1em;text-align:center;opacity:0.6}x-timepicker .input-container .indicator x-icon{font-size:1.5rem !important;margin-left:-0.25rem;margin-right:-0.25rem}x-timepicker .input-container .indicator select{font-weight:bold;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");background-repeat:no-repeat;background-position-x:right;background-position-y:40%;border:none;padding:0.75em 1.25em 0.75em 0.25em;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;z-index:1;outline:none;-webkit-transition:0.3s;transition:0.3s;border-radius:0.5rem;color:var(--color-text, #4A4A4A)}.is-dark-mode x-timepicker .input-container .indicator select{background-image:url(\"data:image/svg+xml;utf8,<svg fill='white' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");color:var(--color-text-light, #FEFEFE)}x-timepicker .input-container .indicator select::-ms-expand{display:none}x-timepicker .input-container .indicator select:hover{background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.3);cursor:pointer}.is-dark-mode x-timepicker .input-container .indicator select:hover{background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.5)}x-timepicker .input-container .indicator:empty{display:none}x-timepicker .input-container .indicator:not(:empty)+.separator{display:block}x-timepicker .input-container .buttons{margin-left:2px}x-timepicker .input-container .buttons:empty{display:none}x-timepicker .input-container .buttons x-tooltip{-webkit-box-sizing:content-box;box-sizing:content-box;display:inline-block;margin:0px;border-radius:0.5rem;-webkit-transition:0.3s;transition:0.3s;-webkit-box-shadow:none;box-shadow:none;outline:none !important}x-timepicker .input-container .buttons x-button{margin-right:2px !important;padding:0px;-webkit-animation:0.3s fadeInLeft;animation:0.3s fadeInLeft}x-timepicker .input-container .buttons x-button button,x-timepicker .input-container .buttons x-button a{padding:0px 0.5rem !important;margin:0;height:46px !important;font-size:18px;line-height:1em;border-radius:6px !important;border:none;outline:none !important;cursor:pointer;opacity:0.5;background-color:transparent;-webkit-transition:0.2s background-color opacity;transition:0.2s background-color opacity;position:relative;min-width:2rem;color:inherit;color:var(--color-text, #4A4A4A)}.is-dark-mode x-timepicker .input-container .buttons x-button button,.is-dark-mode x-timepicker .input-container .buttons x-button a{background-color:transparent}x-timepicker .input-container .buttons x-button button:disabled,x-timepicker .input-container .buttons x-button button[disabled],x-timepicker .input-container .buttons x-button a:disabled,x-timepicker .input-container .buttons x-button a[disabled]{opacity:0.3;cursor:not-allowed}x-timepicker .input-container .buttons x-button button:hover,x-timepicker .input-container .buttons x-button a:hover{background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.3);-webkit-transform:none;transform:none;opacity:0.75;-webkit-box-shadow:none !important;box-shadow:none !important}.is-dark-mode x-timepicker .input-container .buttons x-button button:hover,.is-dark-mode x-timepicker .input-container .buttons x-button a:hover{background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.5);-webkit-box-shadow:none !important;box-shadow:none !important}x-timepicker .input-container .buttons x-button button x-icon,x-timepicker .input-container .buttons x-button a x-icon{font-size:18px !important;color:var(--color-text, #4A4A4A)}.is-dark-mode x-timepicker .input-container .buttons x-button button x-icon,.is-dark-mode x-timepicker .input-container .buttons x-button a x-icon{color:var(--color-text-light, #FEFEFE)}x-timepicker .input-container .buttons x-button.button-active button,x-timepicker .input-container .buttons x-button.button-active a{opacity:1 !important;color:var(--color-primary-shaded) !important;background-color:var(--color-primary-lucid) !important}x-timepicker .input-container .buttons x-button.button-active button x-icon,x-timepicker .input-container .buttons x-button.button-active a x-icon{color:var(--color-primary-shaded) !important}x-timepicker .input-container .buttons x-button.button-active sub,x-timepicker .input-container .buttons x-button.button-active span{position:absolute;font-size:0.75rem;line-height:1em;bottom:0.5rem;right:0.5rem;text-align:right}x-timepicker .input-container .buttons x-button.button-selected button,x-timepicker .input-container .buttons x-button.button-selected a{opacity:0.8;background-color:var(--color-default-lucid, #f0f0f0)}.is-dark-mode x-timepicker .input-container .buttons x-button.button-selected button,.is-dark-mode x-timepicker .input-container .buttons x-button.button-selected a{background-color:var(--color-dark, #1F1F1F)}x-timepicker .input-container .buttons x-button.button-focus,x-timepicker .input-container .buttons x-button:focus,x-timepicker .input-container .buttons x-button button.button-focus,x-timepicker .input-container .buttons x-button button:focus,x-timepicker .input-container .buttons x-button a.button-focus,x-timepicker .input-container .buttons x-button a:focus{-webkit-box-shadow:none !important;box-shadow:none !important;outline:none !important}x-timepicker .input-container:hover{cursor:pointer}x-timepicker .input-container label+div{padding-top:2px !important;padding-bottom:4px !important}x-timepicker .input-container .wrap>div{width:100%;padding:12px;margin:0;font-size:1em;line-height:1em;min-height:22px;display:block}x-timepicker .input-container .wrap>div span{color:inherit;font:inherit;margin:0;margin-right:0.5rem;border:none;background:0 0;display:inline-block;font-size:1em;line-height:1em;font-weight:100;-webkit-transition:-webkit-transform 0.4s;transition:-webkit-transform 0.4s;transition:transform 0.4s;transition:transform 0.4s, -webkit-transform 0.4s;padding:0;padding-top:6px;border-radius:6px;min-height:22px;width:-webkit-max-content;width:-moz-max-content;width:max-content;background-color:transparent;-webkit-box-sizing:border-box;box-sizing:border-box}x-timepicker .input-container .wrap>div span:empty{display:none}x-timepicker .input-container .wrap>div input{color:inherit;font:inherit;margin:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-font-smoothing:inherit;border:none;background:0 0;display:inline-block;font-size:1em;line-height:1em;font-weight:100;outline:none !important;-webkit-transition:-webkit-transform 0.4s;transition:-webkit-transform 0.4s;transition:transform 0.4s;transition:transform 0.4s, -webkit-transform 0.4s;padding:0;border-radius:6px;min-height:22px;width:2rem;background-color:transparent;-webkit-box-sizing:border-box;box-sizing:border-box}x-timepicker .input-container .wrap>div select{color:inherit;font:inherit;margin:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-font-smoothing:inherit;border:none;display:inline-block;font-family:\"Poppins\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1em;line-height:1em;font-weight:100;outline:none !important;border-radius:6px;min-height:22px;width:-webkit-max-content;width:-moz-max-content;width:max-content;cursor:pointer;margin-top:2px;-webkit-transition:0.4s;transition:0.4s;z-index:7999;background-color:transparent;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");background-repeat:no-repeat;background-position-x:right;background-position-y:40%;padding:0em 1.25em 0em 0.25em}x-timepicker .input-container .wrap>div select:hover{background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.3);cursor:pointer}.is-dark-mode x-timepicker .input-container .wrap>div select:hover{background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.5)}x-timepicker .timepicker{z-index:9999;position:absolute;margin:2px 0 0;top:54px;list-style:none;padding:1.5rem;background-color:var(--color-border-lucid, #f7f7f7);border:1px solid var(--color-border-tinted, #d9d8db);min-width:18rem;max-width:100%;font-family:\"Poppins\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";display:none;border-radius:0.5rem;-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1)}x-timepicker .timepicker.active{display:block;-webkit-animation:fadeIn 0.3s;animation:fadeIn 0.3s}x-timepicker .timepicker .arrow{position:absolute;top:calc(-0.6rem - 1px);left:1rem;width:1.2rem;height:1.2rem;display:block;background-color:var(--color-border-lucid, #f7f7f7);border:1px solid var(--color-border-tinted, #d9d8db);border-right:none;border-bottom:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-top-left-radius:0.25rem}.is-dark-mode x-timepicker .timepicker .arrow{background-color:var(--color-dark-shade, #1a1a1a);border:1px solid var(--color-dark-tint, #414141);border-right:none;border-bottom:none}.is-dark-mode x-timepicker .timepicker{background-color:var(--color-dark-shade, #1a1a1a);border:1px solid var(--color-dark-tint, #414141)}x-timepicker .timepicker:empty{display:none !important}x-timepicker .timepicker h4{display:block;width:100%;text-align:center !important;padding-bottom:1.5rem}x-timepicker .timepicker .clock{display:block;width:15rem;height:15rem;max-width:15rem;max-height:15rem;position:relative;border-radius:50%;background-color:#eee}.is-dark-mode x-timepicker .timepicker .clock{background-color:var(--color-dark-shaded, #161616)}x-timepicker .timepicker .clock.dragging{cursor:-webkit-grabbing !important;cursor:grabbing !important}x-timepicker .timepicker .clock:after{content:\"\";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:1rem;height:1rem;background-color:var(--color-border-shade, #aaa9ad);border-radius:50%;z-index:5}x-timepicker .timepicker .clock:before{content:\"\";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:0.5rem;height:0.5rem;background-color:var(--color-border, #C8C7CC);border-radius:50%;z-index:6}x-timepicker .timepicker .clock .hour{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1rem;line-height:1em;margin:0px;outline:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:none;text-align:center;cursor:pointer;top:50%;left:50%;width:2rem;height:2rem;background-color:transparent;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%;-webkit-transition:0.4s;transition:0.4s;color:var(--color-text, #4A4A4A)}.is-dark-mode x-timepicker .timepicker .clock .hour{color:var(--color-text-light, #FEFEFE)}x-timepicker .timepicker .clock .hour:hover,x-timepicker .timepicker .clock .hour.active{color:var(--color-primary-shade, #3863ce);background-color:var(--color-primary-lucid, #e3eafd);border-color:var(--color-primary, #4275F2);-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-primary-rgb, 66, 117, 242), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-primary-rgb, 66, 117, 242), 0.25)}.is-dark-mode x-timepicker .timepicker .clock .hour:hover,.is-dark-mode x-timepicker .timepicker .clock .hour.active{color:var(--color-primary-shadest, #1e356d);background-color:var(--color-primary-tinted, #7b9ef6);border-color:var(--color-primary-tint, #5e8af4);-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-black-rgb, 0, 0, 0), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-black-rgb, 0, 0, 0), 0.25)}x-timepicker .timepicker .clock .min-tick,x-timepicker .timepicker .clock .hour-tick{display:block;position:absolute;width:4px;height:10px;background-color:var(--color-border, #C8C7CC);top:50%;left:50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0px;padding:0;outline:none;border:none;text-align:center;cursor:pointer;-webkit-transition:0.4s;transition:0.4s}.is-dark-mode x-timepicker .timepicker .clock .min-tick,.is-dark-mode x-timepicker .timepicker .clock .hour-tick{background-color:var(--color-dark-tint, #414141)}x-timepicker .timepicker .clock .min-tick:hover,x-timepicker .timepicker .clock .min-tick.active,x-timepicker .timepicker .clock .hour-tick:hover,x-timepicker .timepicker .clock .hour-tick.active{width:6px;color:var(--color-primary-shade, #3863ce);background-color:var(--color-primary, #4275F2);border-color:var(--color-primary, #4275F2);-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-primary-rgb, 66, 117, 242), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-primary-rgb, 66, 117, 242), 0.25)}.is-dark-mode x-timepicker .timepicker .clock .min-tick:hover,.is-dark-mode x-timepicker .timepicker .clock .min-tick.active,.is-dark-mode x-timepicker .timepicker .clock .hour-tick:hover,.is-dark-mode x-timepicker .timepicker .clock .hour-tick.active{color:var(--color-primary-shadest, #1e356d);background-color:var(--color-primary, #4275F2);border-color:var(--color-primary-tint, #5e8af4);-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-black-rgb, 0, 0, 0), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-black-rgb, 0, 0, 0), 0.25)}x-timepicker .timepicker .clock .hour-tick{height:16px !important}x-timepicker .timepicker .clock .hour-hand,x-timepicker .timepicker .clock .minute-hand{position:absolute;top:50%;left:50%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);background-color:var(--color-border-shade, #aaa9ad);width:4px;-webkit-transition:0.3s, -webkit-transform 0s;transition:0.3s, -webkit-transform 0s;transition:0.3s, transform 0s;transition:0.3s, transform 0s, -webkit-transform 0s;opacity:0.9}x-timepicker .timepicker .clock .hour-hand span,x-timepicker .timepicker .clock .minute-hand span{display:block;width:10px;height:70%;border-radius:5px;background-color:var(--color-border-shade, #aaa9ad);margin-left:-3px;-webkit-transition:0.3s;transition:0.3s;-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-border-rgb, 200, 199, 204), 0.3), 0 8px 15px 0 rgba(var(--color-border-rgb, 200, 199, 204), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-border-rgb, 200, 199, 204), 0.3), 0 8px 15px 0 rgba(var(--color-border-rgb, 200, 199, 204), 0.25)}x-timepicker .timepicker .clock .hour-hand:hover,x-timepicker .timepicker .clock .hour-hand.active,x-timepicker .timepicker .clock .hour-hand.focus,x-timepicker .timepicker .clock .minute-hand:hover,x-timepicker .timepicker .clock .minute-hand.active,x-timepicker .timepicker .clock .minute-hand.focus{cursor:pointer;background-color:var(--color-primary, #4275F2);z-index:3}x-timepicker .timepicker .clock .hour-hand:hover span,x-timepicker .timepicker .clock .hour-hand.active span,x-timepicker .timepicker .clock .hour-hand.focus span,x-timepicker .timepicker .clock .minute-hand:hover span,x-timepicker .timepicker .clock .minute-hand.active span,x-timepicker .timepicker .clock .minute-hand.focus span{color:var(--color-primary-shade, #3863ce);background-color:var(--color-primary, #4275F2);border-color:var(--color-primary, #4275F2);-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-primary-rgb, 66, 117, 242), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-primary-rgb, 66, 117, 242), 0.25)}.is-dark-mode x-timepicker .timepicker .clock .hour-hand:hover span,.is-dark-mode x-timepicker .timepicker .clock .hour-hand.active span,.is-dark-mode x-timepicker .timepicker .clock .hour-hand.focus span,.is-dark-mode x-timepicker .timepicker .clock .minute-hand:hover span,.is-dark-mode x-timepicker .timepicker .clock .minute-hand.active span,.is-dark-mode x-timepicker .timepicker .clock .minute-hand.focus span{color:var(--color-primary-shadest, #1e356d);background-color:var(--color-primary, #4275F2);border-color:var(--color-primary-tint, #5e8af4);-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-black-rgb, 0, 0, 0), 0.25);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3), 0 8px 15px 0 rgba(var(--color-black-rgb, 0, 0, 0), 0.25)}x-timepicker .timepicker .clock .hour-hand{height:30%;border-radius:2px}x-timepicker .timepicker .clock .minute-hand{height:42%;background-color:var(--color-border, #C8C7CC);border-radius:2px}x-timepicker .timepicker .clock .minute-hand span{background-color:var(--color-border, #C8C7CC)}x-timepicker .timepicker .clock x-icon{position:absolute;top:0.5rem;left:0.5rem;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:pointer;-webkit-transition:0.4s;transition:0.4s;opacity:0.8}";
const XTimepickerStyle0 = styleCss;

const XTimepicker = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.onValidateInputEvent = index.createEvent(this, "validated", 3);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
        /**
         * Element ID for internal reference
         */
        this.inputId = helpers.getId('textarea');
        this.label = undefined;
        this.name = undefined;
        this.info = undefined;
        this.loading = undefined;
        this.cleanable = undefined;
        this.required = undefined;
        this.now = undefined;
        this.value = '';
        this.isValid = true;
        this.isFocused = undefined;
        this.isLoading = undefined;
        this.isDisabled = undefined;
        this.isVisible = undefined;
        this.hourHandAngle = 0;
        this.minuteHandAngle = 0;
        this.draggingHand = undefined;
        this.timeSelected = new Time();
    }
    /**
     * Watch changes in value property
     */
    watchValue(value) {
        var _a;
        this.timeSelected.parse(value);
        this.calculateAngleFromTime();
        this.internals.setFormValue(this.timeSelected.toString());
        this.el.dispatchEvent(new InputEvent('input', { bubbles: false }));
        this.formValidateCallback(true);
        (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new InputEvent('input', { bubbles: false }));
    }
    /**
     * This is called when the 'disabled' attribute of the element or or an ancestor <fieldset> is updated
     *
     * @param disabled
     */
    formDisabledCallback(disabled) {
        this.isDisabled = disabled;
    }
    /**
     * This is called when the parent/owner form is reset
     */
    formResetCallback() {
        this.internals.setFormValue('');
    }
    /**
     * This is called when the input is validated
     */
    formValidateCallback(dispatchValidation) {
        if (this.required && helpers.isEmpty(this.value)) {
            this.internals.setValidity({ valueMissing: true }, lang.Lang.get('fields.validation.value-missing'));
        }
        else {
            this.internals.setValidity({});
        }
        if (dispatchValidation) {
            this.isValid = this.internals.validity.valid;
            this.onValidateInputEvent.emit(this.internals);
        }
    }
    /**
     * This is called on component will load
     */
    componentWillLoad() {
        if (helpers.isEmpty(this.value)) {
            if (this.now) {
                this.timeSelected = Time.now();
            }
            this.value = this.timeSelected.toString();
        }
    }
    /**
     * This is called on component did load
     */
    componentDidLoad() {
        this.clock.addEventListener('mousedown', this.onDragStart.bind(this));
        this.clock.addEventListener('mousemove', this.onDragMove.bind(this));
        this.clock.addEventListener('mouseup', this.onDragEnd.bind(this));
        this.clock.addEventListener('touchstart', this.onDragStart.bind(this));
        this.clock.addEventListener('touchmove', this.onDragMove.bind(this));
        this.clock.addEventListener('touchend', this.onDragEnd.bind(this));
        this.timeSelected.parse(this.value);
        setTimeout(() => {
            this.calculateAngleFromTime();
            this.formValidateCallback();
        }, 0);
    }
    /**
     * Set element value by event
     *
     * @param event
     */
    onInput(event) {
        const input = event.target;
        console.log(input.value, parseInt(input.value));
        if (input.classList.contains('hour-input')) {
            this.timeSelected.setPeriodHour(parseInt(input.value));
        }
        if (input.classList.contains('min-input')) {
            this.timeSelected.setMinute(parseInt(input.value));
        }
        if (input.classList.contains('period-input')) {
            this.timeSelected.setPeriodHour(this.timeSelected.hour, input.value);
        }
        this.value = this.timeSelected.toString();
    }
    /**
     * Set element value by keyboard event
     */
    onKeydownInput(event) {
        const value = parseInt(event.target.value);
        const max = parseInt(event.target.max);
        const input = event.target;
        if (!['ArrowUp', 'ArrowDown'].includes(event.key)) {
            return;
        }
        if (event.key === 'ArrowUp') {
            if (value < max) {
                input.value = (value + 1).toString().padStart(2, '0');
            }
            else {
                input.value = input.classList.contains('hour-input') ? '01' : '00';
            }
        }
        if (event.key === 'ArrowDown') {
            if (input.classList.contains('hour-input') ? value > 1 : value > 0) {
                input.value = (value - 1).toString().padStart(2, '0');
            }
            else {
                input.value = max.toString().padStart(2, '0');
            }
        }
        input.dispatchEvent(new InputEvent('input'));
    }
    /**
     * This called on input field is unfocused
     */
    onBlurInput(e) {
        const input = e.target;
        if (input.classList.contains('hour-input')) {
            this.hourHand.classList.remove('focus');
        }
        if (input.classList.contains('min-input')) {
            this.minuteHand.classList.remove('focus');
        }
        this.blurTimeout = setTimeout(() => {
            this.isFocused = false;
            this.isVisible = false;
            this.formValidateCallback(true);
        }, 50);
    }
    /**
     * This called on input field is focused
     */
    onFocusInput(e) {
        clearTimeout(this.blurTimeout);
        this.isFocused = true;
        this.isVisible = true;
        const input = e.target;
        if (input.classList.contains('hour-input')) {
            this.hourHand.classList.add('focus');
        }
        if (input.classList.contains('min-input')) {
            this.minuteHand.classList.add('focus');
        }
    }
    /**
     * On drag start event
     */
    onDragStart(event) {
        let target = event.target;
        if (event instanceof TouchEvent) {
            event.preventDefault();
            target = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
        }
        if (target.tagName === 'SPAN') {
            target = target.parentElement;
        }
        if (target === this.hourHand || target === this.minuteHand) {
            this.draggingHand = target;
        }
        else {
            this.draggingHand = null;
        }
    }
    /**
     * On drag move event
     */
    onDragMove(event) {
        if (this.draggingHand && [this.hourHand, this.minuteHand].includes(this.draggingHand)) {
            if (event instanceof TouchEvent) {
                event.preventDefault();
            }
            const rect = this.clock.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            const deltaX = (event instanceof TouchEvent ? event.touches[0] : event).clientX - centerX;
            const deltaY = (event instanceof TouchEvent ? event.touches[0] : event).clientY - centerY;
            let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 90;
            angle = (angle + 360) % 360;
            if (this.draggingHand === this.minuteHand) {
                this.timeSelected.setMinute(Math.round(angle / 6) % 60);
            }
            else if (this.draggingHand === this.hourHand) {
                this.timeSelected.setPeriodHour(Math.round(angle / 30) % 12 || 12);
            }
            this.value = this.timeSelected.toString();
        }
    }
    /**
     * On drag end event
     */
    onDragEnd() {
        this.draggingHand = null;
    }
    /**
     * Clears the input value
     */
    clearInput() {
        this.timeSelected.setPeriodHour(0, 'am');
        this.timeSelected.setMinute(0);
        this.value = this.timeSelected.toString();
    }
    /**
     * Handle hour button click
     */
    handleHourClick(hour) {
        this.timeSelected.setPeriodHour(hour);
        this.value = this.timeSelected.toString();
    }
    /**
     * Handle minute button click
     */
    handleMinuteClick(min) {
        this.timeSelected.setMinute(min);
        this.value = this.timeSelected.toString();
    }
    /**
     * Get hour position styles
     */
    getHourPosition(hour) {
        const angle = (hour - 3) * (Math.PI / 6);
        const x = 50 + 38 * Math.cos(angle);
        const y = 50 + 38 * Math.sin(angle);
        return {
            left: `${x}%`,
            top: `${y}%`,
        };
    }
    /**
     * Calculate the hand angle from the time
     */
    calculateAngleFromTime() {
        this.hourHandAngle = this.timeSelected.hour * 30;
        this.minuteHandAngle = this.timeSelected.minute * 6;
    }
    /**
     * Get tick position styles
     */
    getTickPosition(i) {
        const angle = (i - 15) * 6 * (Math.PI / 180);
        const x = 50 + 50 * Math.cos(angle);
        const y = 50 + 50 * Math.sin(angle);
        return {
            left: `${x}%`,
            top: `${y}%`,
            transform: `translate(-50%, -50%) rotate(${i * 6}deg)`,
        };
    }
    /**
     * Render component
     */
    render() {
        return index.h(index.Host, { key: '7cf7c3e2b3c5c048e1d1f4daf5e8d313289e30ef', "data-for": this.name, tabindex: "0", onFocus: (e) => this.onFocusInput(e), onBlur: (e) => this.onBlurInput(e) }, index.h("div", { key: 'd832de92bfdb2ba16451f188c34144aedca6936c', class: helpers.cls({
                "input-container": true,
                "focus": this.isFocused,
                "loading": this.loading || this.isLoading,
                "disabled": this.isDisabled,
                "required": this.required,
                "invalid": !this.isValid
            }) }, index.h("div", { key: 'b3bb6d64d64f69b8def66854900a573d5a50346a', class: "indicator" }, index.h("slot", { key: '0b7bf354fd685277bf0bf2bca9707950d2d3fc0d', name: "indicator" })), index.h("div", { key: 'ab78832a05d19f38ff8cd338eae11132b5b1433e', class: "separator" }), index.h("div", { key: '8764d9d8f44cd64a362948c49a0cb6f837b1d8e9', class: "wrap" }, this.label && index.h("label", { key: 'cc34b01f0d86c5515117ad20d933f2a07b7dcda1', htmlFor: `min-${this.inputId}` }, this.label), index.h("div", { key: 'a4c59907bae41ff0816494686ae37945731dad09' }, index.h("input", { key: '617c7698d5f0527dc42f942260a70ed1c22989a1', class: "hour-input", id: `hour-${this.inputId}`, type: "tel", placeholder: "00", max: 12, maxlength: 2, disabled: this.isDisabled || this.isLoading, value: Number.isNaN(this.timeSelected.hour) ? null : this.timeSelected.getPeriodHour().toString().padStart(2, '0'), onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeydownInput(e), onFocus: (e) => this.onFocusInput(e), onBlur: (e) => this.onBlurInput(e) }), index.h("span", { key: '164d8d955b6b7f91b4b0f2f97dba492412a10919' }, ":"), index.h("input", { key: 'fbf0c0ca84b377ae2b47105b4b090e804b87bc3f', class: "min-input", id: `min-${this.inputId}`, type: "tel", placeholder: "00", max: 59, maxlength: 2, disabled: this.isDisabled || this.isLoading, value: Number.isNaN(this.timeSelected.minute) ? null : this.timeSelected.minute.toString().padStart(2, '0'), onInput: (e) => this.onInput(e), onKeyDown: (e) => this.onKeydownInput(e), onFocus: (e) => this.onFocusInput(e), onBlur: (e) => this.onBlurInput(e) }), index.h("select", { key: '979b24457c93ced1026856b4e6626eb0388d2c8f', class: "period-input", id: `period-${this.inputId}`, disabled: this.isDisabled || this.isLoading, onInput: (e) => this.onInput(e), onFocus: (e) => this.onFocusInput(e), onBlur: (e) => this.onBlurInput(e) }, index.h("option", { key: '0c2d5920ba54414bef46ea7229bfa8331f0b1977', value: "am", selected: this.timeSelected.getPeriod() === 'am' }, "AM"), index.h("option", { key: 'eb7dc417256dfe447bd8b28ca29426348a7dafee', value: "pm", selected: this.timeSelected.getPeriod() === 'pm' }, "PM")))), this.loading && index.h("div", { key: 'f43ec469f09280fce99d0968ade875c9529152e7', class: "loading-indicator" }), index.h("div", { key: 'ec9183b23c65d1349bb90cdcbc82512cd0f45106', class: "buttons" }, this.cleanable && index.h("x-button", { key: 'c4655c266798ffa84de066a8a87925b86c772322', icon: "backclear", onClick: () => this.clearInput() }), index.h("slot", { key: '7eda281d17e030588b7aa34892a46d743e374b5c', name: "buttons" })), this.info && index.h("div", { key: '9209072d44249a7133c7c83a57752651562c0611', class: "info" }, index.h("x-tooltip", { key: '5550f5f895e223e0af8647e73ed71031ba179abc', content: this.info }, index.h("x-icon", { key: '2083fc756690958281870a6d580f16851958f16f', name: "info" }))), index.h("slot", { key: '0694ff0b78071874a4146f4cf73ff40b0d545874' })), index.h("div", { key: 'b4232850cf08e1d6250fe678f2ade05b960625bc', class: helpers.cls('timepicker', {
                'active': this.isVisible,
            }) }, index.h("div", { key: '5d0b20c07a0edd9117e6b1fea80f40602b8ee29c', class: "arrow" }), index.h("div", { key: '7bede7df39ace67514b95192103037bc967218f6', class: helpers.cls('clock', {
                'dragging': this.draggingHand,
            }), ref: el => this.clock = el }, [...Array(12).keys()].map(i => {
            const hour = i + 1;
            return index.h("button", { type: "button", class: "hour", style: this.getHourPosition(hour), onClick: () => this.handleHourClick(hour) }, hour);
        }), [...Array(60).keys()].map(i => {
            return index.h("button", { type: "button", class: helpers.cls(i % 5 === 0 ? 'hour-tick' : 'min-tick'), style: this.getTickPosition(i), onClick: () => this.handleMinuteClick(i) });
        }), index.h("div", { key: '53f3391281c99078cc4edcc7f4636c5ed2cf4e0b', ref: el => this.minuteHand = el, class: helpers.cls('minute-hand', {
                'active': this.draggingHand === this.minuteHand,
            }), style: { transform: `translate(-50%, -100%) rotate(${this.minuteHandAngle}deg)` } }, index.h("span", { key: 'd2f99fb5ff04084d3fe026f85340ae1c9d858ac3' })), index.h("div", { key: 'd64fc90e6d8932d9f14a041d9122f7de48ec2302', ref: el => this.hourHand = el, class: helpers.cls('hour-hand', {
                'active': this.draggingHand === this.hourHand,
            }), style: { transform: `translate(-50%, -100%) rotate(${this.hourHandAngle}deg)` } }, index.h("span", { key: '91c3809d8d589c4e99d5f34adee3b2c7bb92a434' })))));
    }
    static get formAssociated() { return true; }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "value": ["watchValue"]
    }; }
};
XTimepicker.style = XTimepickerStyle0;

exports.x_timepicker = XTimepicker;
