timepicker-ui
Version:
timepicker-ui is an easy library with timepicker. Created with TypeScript based on Material Design from Google.
1 lines • 82.6 kB
JavaScript
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)=>{const{touches:t}=e,{clientX:n,clientY:r}=e;if(!i)return;const{left:o,top:s}=i.getBoundingClientRect();let a={x:0,y:0};if(void 0===t)a={x:n-o,y:r-s};else if(void 0!==t&&t.length>0&&Object.keys(t).length>0){const{clientX:e,clientY:i}=t[0];a={x:e-o,y:i-s}}return 0!==Object.keys(a).length||a.constructor!==Object?a: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 c=Number(a);return u<10?u=`0${u}`:0===u&&(u="00"),"12h"===i?c>12||u>59||u<0||0===c||"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: ${c}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)} or invalid type (PM or AM), currentType: ${s}.`,currentHour:c,currentMin:u,currentType:s}:{hour:c<10?`0${c}`:c.toString(),minutes:u.toString(),type:s}:c<0||c>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: ${c}. Minutes should be less than 60 and higher or equal 0, currentMinutes: ${Number(u)}`,currentHour:c,currentMin:u}:{hour:c<10?`0${c}`:c.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},d=(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 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}");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-hour-time-12.m3, .timepicker-ui-hour-time-24.m3 {\n color: #1a1c18;\n}\n.timepicker-ui-wrapper.m3 {\n border-radius: 35px;\n background-color: #e5eadc;\n box-shadow: unset;\n}\n.timepicker-ui-hour.active.m3, .timepicker-ui-minutes.active.m3 {\n background-color: #b8f397;\n color: #042100;\n}\n.timepicker-ui-minutes.m3, .timepicker-ui-hour.m3 {\n background-color: #dfe4d6;\n}\n.timepicker-ui-minutes:hover.m3, .timepicker-ui-hour:hover.m3 {\n color: #386a20;\n}\n.timepicker-ui-clock-face.m3 {\n background-color: #dfe4d6;\n}\n.timepicker-ui-clock-hand.m3, .timepicker-ui-dot.m3, .timepicker-ui-circle-hand.m3 {\n background-color: #386a20 !important;\n}\n.timepicker-ui-cancel-btn.m3, .timepicker-ui-ok-btn.m3 {\n color: #386a20;\n}\n.timepicker-ui-cancel-btn:hover.m3, .timepicker-ui-ok-btn:hover.m3 {\n background-color: #dfe4d6;\n}\n.timepicker-ui-wrapper-type-time.m3 {\n color: #6b7165;\n}\n.timepicker-ui-am.m3, .timepicker-ui-am.m3, .timepicker-ui-pm.m3, .timepicker-ui-pm.m3 {\n border-color: #74796e;\n border-width: 1px;\n}\n.timepicker-ui-am.m3, .timepicker-ui-am.m3 {\n border-bottom-width: 0px;\n}\n.timepicker-ui-am:hover.m3, .timepicker-ui-am.active.m3, .timepicker-ui-pm:hover.m3, .timepicker-ui-pm.active.m3 {\n background-color: #bbebeb;\n color: #002021;\n}\n.timepicker-ui-hour.mobile:hover.m3, .timepicker-ui-minutes.mobile:hover.m3 {\n background-color: #dfe4d6;\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}";p(m);const h={amLabel:"AM",animation:!0,appendModalSelector:"",backdrop:!0,cancelLabel:"CANCEL",editable:!1,enableScrollbar:!1,enableSwitchIcon:!1,mobileTimeLabel:"Enter Time",focusInputAfterCloseModal:!1,hourMobileLabel:"Hour",iconTemplate:'<i class="material-icons timepicker-ui-keyboard-icon">keyboard</i>',iconTemplateMobile:'<i class="material-icons timepicker-ui-keyboard-icon">schedule</i>',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,delayHandler:300},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,c,d;const p=o*(360/this.array.length)*(Math.PI/180);const m=document.createElement("span"),h=document.createElement("span");h.innerHTML=e,this.disabledTime&&(Array.isArray(this.disabledTime)&&(null===(s=this.disabledTime)||void 0===s?void 0:s.includes(e))&&(h.classList.add("timepicker-ui-tips-disabled"),m.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))&&(h.classList.add("timepicker-ui-tips-disabled"),m.classList.add("timepicker-ui-tips-disabled"),h.tabIndex=-1),this.hour===this.disabledTime.removedEndHour&&(null===(c=null===(u=this.disabledTime)||void 0===u?void 0:u.endMinutes)||void 0===c?void 0:c.includes(e))&&(h.classList.add("timepicker-ui-tips-disabled"),m.classList.add("timepicker-ui-tips-disabled"),h.tabIndex=-1)),"24h"===this.clockType?(h.classList.add("timepicker-ui-value-tips-24h"),t(h,"timepicker-ui-tips-disabled")||(h.tabIndex=0)):(h.classList.add("timepicker-ui-value-tips"),t(h,"timepicker-ui-tips-disabled")||(h.tabIndex=0)),m.classList.add(this.classToAdd),"crane-straight"===this.theme&&(m.classList.add("crane-straight"),h.classList.add("crane-straight")),"m3"===this.theme&&(m.classList.add("m3"),h.classList.add("m3")),m.style.left=i+Math.sin(p)*r-m.offsetWidth+"px",m.style.bottom=n+Math.cos(p)*r-m.offsetHeight+"px",m.appendChild(h),null===(d=this.tipsWrapper)||void 0===d||d.appendChild(m)}))},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)<Number(t)&&this._addClasses(r),n===i&&o.length>0?this._addClassesWithIncludes(r,o):Number(i)>Number(n)&&Number(i)<Number(t)&&this._addClasses(r)}if(e){const{amHours:i,pmHours:t,activeMode:o,startMinutes:s,endMinutes:a,removedAmHour:l,removedPmHour:u,actualHour:c}=e.minutesToUpdate;if(!i||!t)return;n&&(i&&"AM"===o&&this._addClassesWithIncludes(n,i),t&&"PM"===o&&this._addClassesWithIncludes(n,t)),r&&s&&a&&("AM"===o&&("00"===a[0]&&1===a.length&&0===s.length&&Number(c)>=Number(i[0])&&this._addClasses(r),0===s.length&&a.length>1&&Number(c)>=Number(l)&&this._addClasses(r),s.length>0&&a.length>1&&"00"===a[0]&&(Number(l)===Number(c)?this._addClassesWithIncludes(r,s):Number(c)>Number(l)&&this._addClasses(r)),"00"===a[0]&&1===a.length&&s.length>0&&(Number(l)===Number(c)?this._addClassesWithIncludes(r,s):Number(c)>Number(l)&&this._addClasses(r))),"PM"===o&&(c<Number(u)&&this._addClasses(r),c===u&&this._addClassesWithIncludes(r,a),a.length>0&&Number(c)===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)}),this._options.delayHandler||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"))):"m3"===r&&n.forEach((e=>e.classList.add("m3")))},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,c,d,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===(c=null===(u=this._disabledTime)||void 0===u?void 0:u.value)||void 0===c?void 0:c.hours,hour:this.hour.value}).create()}else(null===(d=this._disabledTime)||void 0===d?void 0:d.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=c(this.hour.value,"hour",r),a=c(this.minutes.value,"minutes",r);let u;const p=d(this.hour.value,"hour",r,null==o?void 0:o.hours),m=d(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 r<o||r>s})(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===m)return!1!==u&&a&&m||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?m.cranered400:m.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?m.cranered400:m.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==