jb-time-picker
Version:
time picker web component
2 lines • 32.5 kB
JavaScript
import{enToFaDigits as e}from"jb-core";function t(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)}function i(e,t,i,s,n){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?n.call(e,i):n?n.value=i:t.set(e,i),i}var s=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,t){this.variableName=t,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function n(e){return new s({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function r(e){return new s({lightness:e.lightness+.07,chroma:e.chroma+.07,hue:e.hue},`${e.variableName}-hover`)}function l(e){return new s({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function o(e){const t=Math.min(e.lightness+.12*(1-e.lightness),.985),i=e.chroma*(1-.15*(t-e.lightness));return new s({lightness:t,chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function c(e){const t=Math.max(e.lightness-.12*e.lightness,.02),i=e.chroma*(1-.15*(t-e.lightness));return new s({lightness:t,chroma:i,hue:e.hue},`${e.variableName}-d`)}function a(e){const t=Math.min(e.lightness+.65*(1-e.lightness),.93),i=.55*e.chroma*(1-.08*(t-e.lightness)),n=e.hue>=70&&e.hue<=162?5:-3,r=e.hue+n;return new s({lightness:t,chroma:Number(i.toFixed(3)),hue:r},`${e.variableName}-subtle`)}function m(e){const t=Math.max(e.lightness-.35,.22),i=Math.min(1.6*e.chroma,.28);return new s({lightness:Number(t.toFixed(3)),chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}const h=new s({lightness:.6,chroma:.26,hue:256},"--jb-primary"),u=new s({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),p=new s({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),d=new s({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),f=new s({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),v={single:{black:new s({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new s({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new s({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[n(0),n(1),n(2),n(3),n(4),n(5),n(6),n(7),n(8),n(9),n(10)],primary:{main:h,hover:r(h),pressed:l(h),light:o(h),dark:c(h),subtle:a(h),contrast:m(h)},secondary:{main:u,hover:r(u),pressed:l(u),light:o(u),dark:c(u),subtle:a(u),contrast:m(u)},yellow:{main:p,hover:r(p),pressed:l(p),light:o(p),dark:c(p),subtle:a(p),contrast:m(p)},green:{main:d,hover:r(d),pressed:l(d),light:o(d),dark:c(d),subtle:a(d),contrast:m(d)},red:{main:f,hover:r(f),pressed:l(f),light:o(f),dark:c(f),subtle:a(f),contrast:m(f)}};function b(e){try{const{value:t,...i}=e;window.CSS.registerProperty({...i}),function(e,t){try{t&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,t))}catch(e){}}(e.name,t)}catch(e){}}function x(){var e;b({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),b({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),b({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),b({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),b({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"}),function(e){b({name:e.primary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.primary.main.value}),b({name:e.secondary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.secondary.main.value}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value}),b({name:e.single.black.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.black.value}),b({name:e.single.white.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.white.value}),b({name:e.single.highlight.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.highlight.value}),b({name:e.yellow.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.yellow.main.value}),b({name:e.green.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.green.main.value}),b({name:e.red.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.red.main.value}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value});for(let t=1;t<=10;t++)b({name:e.neutral[t].variableName,syntax:"<color>",inherits:!0,initialValue:e.neutral[t].value})}(v),b({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:(e=v).single.black.value}),b({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:e.neutral[7].value}),b({name:"--jb-text-contrast",syntax:"<color>",inherits:!0,initialValue:e.single.white.value})}var T,g,w,y,k,j,P,N,S,M,E,A,L,U,Y,D,V,W,$,q,C,X,R,I,F,H,_,O,G,Z,B,z,J,K,Q,ee,te,ie,se,ne,re,le,oe,ce;const ae="hour",me="minute",he="second",ue="prevTime",pe="currentTime",de="nextTime",fe="MOVE",ve="ADD_1",be="SUB_1";var xe=class extends HTMLElement{get frontalZero(){return t(this,k,"f")}set frontalZero(e){this.frontalZero!==e&&(i(this,k,e,"f"),t(this,T,"m",A).call(this))}set optionalUnits(e){i(this,j,e,"f"),e.forEach((e=>{this.elements.currentTime[e]?.classList.add("--optional"),this.elements.nextTime[e]?.classList.add("--optional"),this.elements.prevTime[e]?.classList.add("--optional")}))}get optionalUnits(){return t(this,j,"f")}get value(){return t(this,g,"f")}set value(e){t(this,W,"f").hour.isTextAnimationPlaying?t(this,W,"f").hour.waitingAction=()=>{t(this,T,"m",ie).call(this,e.hour,ae,!1)}:t(this,T,"m",ie).call(this,e.hour,ae,!1),t(this,W,"f").minute.isTextAnimationPlaying?t(this,W,"f").minute.waitingAction=()=>{t(this,T,"m",ie).call(this,e.minute,me,!1)}:t(this,T,"m",ie).call(this,e.minute,me,!1),e.second&&(t(this,W,"f").second.isTextAnimationPlaying?t(this,W,"f").second.waitingAction=()=>{t(this,T,"m",ie).call(this,e.second,he,!1)}:t(this,T,"m",ie).call(this,e.second,he,!1))}get secondEnabled(){return t(this,D,"f")}set secondEnabled(e){"boolean"==typeof e&&(i(this,D,e,"f"),0==e?t(this,T,"m",le).call(this):t(this,T,"m",oe).call(this))}get showPersianNumber(){return t(this,P,"f")}set showPersianNumber(e){i(this,P,Boolean(e),"f"),t(this,T,"m",A).call(this)}constructor(){super(),T.add(this),g.set(this,{second:0,minute:0,hour:0}),w.set(this,{hour:24,minute:59,second:59}),this.focusedTimeUnit=null,y.set(this,null),k.set(this,!1),j.set(this,[]),P.set(this,!1),this.textWidth=null,D.set(this,!0),V.set(this,void 0),W.set(this,void 0),t(this,T,"m",M).call(this)}connectedCallback(){t(this,T,"m",N).call(this),t(this,T,"m",$).call(this),t(this,T,"m",S).call(this)}get timeTextXPositions(){let e=212,t=512;return this.secondEnabled||(e=362,t=662),{hourX:e,minuteX:t,secondX:812}}static get observedAttributes(){return[]}attributeChangedCallback(e,i,s){t(this,T,"m",q).call(this,e,s)}setTimeUnitFocus(e){if(e!=this.focusedTimeUnit){const t=this.focusedTimeUnit;this.focusedTimeUnit=e,e&&(this.elements.currentTime[e].classList.add("--focused"),this.elements.nextTime[e]&&this.elements.nextTime[e].classList.add("--focused"),this.elements.prevTime[e]&&this.elements.prevTime[e].classList.add("--focused"),this.elements.substitutePrevTime[e]&&this.elements.substitutePrevTime[e].classList.add("--focused"),this.elements.substituteNextTime[e]&&this.elements.substituteNextTime[e].classList.add("--focused"),this.elements.timeIndicators[e].classList.add("--focused")),t&&null!==t&&(this.elements.currentTime[t].classList.remove("--focused"),this.elements.nextTime[t]&&this.elements.nextTime[t].classList.remove("--focused"),this.elements.prevTime[t]&&this.elements.prevTime[t].classList.remove("--focused"),this.elements.substitutePrevTime[t]&&this.elements.substitutePrevTime[t].classList.remove("--focused"),this.elements.substituteNextTime[t]&&this.elements.substituteNextTime[t].classList.remove("--focused"),this.elements.timeIndicators[t].classList.remove("--focused"))}}};g=new WeakMap,w=new WeakMap,y=new WeakMap,k=new WeakMap,j=new WeakMap,P=new WeakMap,D=new WeakMap,V=new WeakMap,W=new WeakMap,T=new WeakSet,N=function(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},S=function(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},M=function(){const e=this.attachShadow({mode:"open"});x();const i=document.createElement("template");i.innerHTML='<style>:host{--hour-color:var(--jb-time-picker-hour-color, var(--jb-primary));--minute-color:var(--jb-time-picker-minute-color, var(--jb-secondary));--second-color:var(--jb-time-picker-minute-color, var(--jb-highlight));--outer-circle-color:var(--jb-time-picker-outer-circle-color, var(--jb-neutral-9));--separator-text-color:var(--jb-time-picker-separator-text-color, var(--jb-neutral-8));--indicator-color:var(--jb-time-picker-separator-text-color, var(--jb-neutral-8));--prev-text-color: var(--jb-time-picker-prev-text-color, var(--jb-text-secondary));--current-text-color: var(--jb-time-picker-current-text-color, var(--jb-text-primary));--next-text-color: var(--jb-time-picker-next-text-color, var(--jb-text-secondary));--inner-circle-color: var(--jb-time-picker-inner-circle-color, var(--jb-white)) }.jb-time-picker-web-component{width:272px;height:272px}.jb-time-picker-web-component .svg-clock-wrapper{padding:16px}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock{width:100%;height:100%;overflow:visible}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .outer-circle{fill:var(--outer-circle-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .inner-circle{fill:var(--inner-circle-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper .time-text{font-size:150px;text-anchor:middle;cursor:pointer;user-select:none}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper .time-text.--hidden{display:none}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper .time-text.--optional{opacity:.6}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.current-time .time-text{fill:var(--current-text-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.current-time .time-text.--focused.hour-text{fill:var(--hour-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.current-time .time-text.--focused.minute-text{fill:var(--minute-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.current-time .time-text.--focused.second-text{fill:var(--second-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.current-time .separator-text{font-size:150px;text-anchor:middle;fill:var(--separator-text-color);user-select:none}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.current-time .separator-text.--hidden{display:none}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.prev-time .time-text{fill:var(--prev-text-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-text-wrapper.next-time .time-text{fill:var(--next-text-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators{fill:var(--indicator-text-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .hour-indicator{display:none}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .hour-indicator.--focused{display:initial;fill:var(--hour-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .minute-indicator{display:none;stroke-width:10px}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .minute-indicator.--focused{display:initial;fill:var(--minute-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .second-indicator{display:none;stroke-width:10px}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .second-indicator.--focused{display:initial;fill:var(--second-color)}.jb-time-picker-web-component .svg-clock-wrapper .svg-clock .time-indicators .second-indicator.--focused.--hidden{display:none}</style>\n<div class="jb-time-picker-web-component">\r\n <div class="svg-clock-wrapper">\r\n <svg class="svg-clock" viewBox="0 0 1024 1024">\r\n <circle cx="512" cy="512" r="512" class="outer-circle"></circle>\r\n <circle cx="512" cy="512" r="480" class="inner-circle"></circle>\r\n <g class="time-text-wrapper substitute-prev-time" mask="url(#PrevTimeWrapperMask)">\r\n </g>\r\n <g class="time-text-wrapper prev-time" mask="url(#PrevTimeWrapperMask)">\r\n </g>\r\n <g class="time-text-wrapper current-time">\r\n <text class="separator-text" dominant-baseline="middle" y="512">:</text>\r\n <text class="separator-text" dominant-baseline="middle" y="512">:</text>\r\n </g>\r\n <g class="time-text-wrapper next-time" mask="url(#NextTimeWrapperMask)">\r\n </g>\r\n <g class="time-text-wrapper substitute-next-time" mask="url(#NextTimeWrapperMask)">\r\n </g>\r\n <g class="time-indicators">\r\n <use class="hour-indicator" xlink:href="#HourSymbol" x="512" y="512"></use>\r\n <use class="minute-indicator" xlink:href="#MinuteSymbol" x="512" y="512"></use>\r\n <use class="second-indicator" xlink:href="#SecondSymbol" x="512" y="512"></use>\r\n </g>\r\n <defs>\r\n <linearGradient id="next-time-opacity-filter" gradientTransform="rotate(90)">\r\n <stop offset="0%" style="stop-color: #97999a; stop-opacity: 1.0"/>\r\n <stop offset="40%" style="stop-color: #97999a; stop-opacity: 1.0"/>\r\n <stop offset="55%" style="stop-color: #97999a; stop-opacity: 0.4"/>\r\n <stop offset="70%" style="stop-color: #97999a; stop-opacity: 0.10"/>\r\n <stop offset="100%" style="stop-color: #97999a; stop-opacity: 0.0"/>\r\n </linearGradient>\r\n <linearGradient id="prev-time-opacity-filter" gradientTransform="rotate(90)">\r\n <stop offset="0%" style="stop-color: #97999a; stop-opacity: 0.0"/>\r\n <stop offset="30%" style="stop-color: #97999a; stop-opacity: 0.10"/>\r\n <stop offset="45%" style="stop-color: #97999a; stop-opacity: 0.4"/>\r\n <stop offset="60%" style="stop-color: #97999a; stop-opacity: 1.0"/>\r\n <stop offset="100%" style="stop-color: #97999a; stop-opacity: 1.0"/>\r\n </linearGradient>\r\n <mask id="PrevTimeWrapperMask">\r\n <rect x="0" y="250" width="1024" height="300" fill="url(#prev-time-opacity-filter)"/>\r\n </mask>\r\n <mask id="NextTimeWrapperMask">\r\n <rect x="0" y="450" width="1024" height="300" fill="url(#next-time-opacity-filter)"/>\r\n </mask>\r\n <g id="HourSymbol">\r\n <circle r="50" cx="0" cy="0" class="hour-symbol"></circle>\r\n </g>\r\n <g id="MinuteSymbol">\r\n <circle r="40" cx="0" cy="0" class="minute-symbol"></circle>\r\n </g>\r\n <g id="SecondSymbol">\r\n <circle r="30" cx="0" cy="0" class="second-symbol"></circle>\r\n </g>\r\n </defs>\r\n </svg>\r\n </div>\r\n</div>',e.appendChild(i.content.cloneNode(!0)),this.elements={svgDOM:e.querySelector(".svg-clock"),timeIndicators:{hour:e.querySelector(".hour-indicator"),minute:e.querySelector(".minute-indicator"),second:e.querySelector(".second-indicator")},substitutePrevTime:{wrapper:e.querySelector(".substitute-prev-time"),hour:null,minute:null,second:null},prevTime:{wrapper:e.querySelector(".prev-time"),hour:null,minute:null,second:null},currentTime:{wrapper:e.querySelector(".current-time"),hour:null,minute:null,second:null},nextTime:{wrapper:e.querySelector(".next-time"),hour:null,minute:null,second:null},substituteNextTime:{wrapper:e.querySelector(".substitute-next-time"),hour:null,minute:null,second:null},separatorTexts:e.querySelectorAll(".separator-text")},t(this,T,"m",L).call(this)},E=function(){t(this,T,"m",Q).call(this,ae,this.value.hour),t(this,T,"m",Q).call(this,me,this.value.minute),this.secondEnabled&&this.value.second&&t(this,T,"m",Q).call(this,he,this.value.second)},A=function(){const e=t(this,T,"m",ne).call(this,this.value.hour,ae),i=t(this,T,"m",ne).call(this,this.value.minute,me),s=t(this,T,"m",ne).call(this,this.value.second||0,he),n=this.shadowRoot.querySelector(".substitute-prev-time");if(this.elements.substitutePrevTime.hour&&(this.elements.substitutePrevTime.hour.remove(),this.elements.substitutePrevTime.hour=null),this.elements.substitutePrevTime.minute&&(this.elements.substitutePrevTime.minute.remove(),this.elements.substitutePrevTime.minute=null),this.elements.substitutePrevTime.second&&(this.elements.substitutePrevTime.second.remove(),this.elements.substitutePrevTime.second=null),e>1){const i=t(this,T,"m",J).call(this,ae,"substitutePrevTime",e-2);n.append(i),this.elements.substitutePrevTime.hour=i}if(i>1){const e=t(this,T,"m",J).call(this,me,"substitutePrevTime",i-2);n.append(e),this.elements.substitutePrevTime.minute=e}if(this.secondEnabled&&s>1){const e=t(this,T,"m",J).call(this,he,"substitutePrevTime",s-2);n.append(e),this.elements.substitutePrevTime.second=e}const r=this.shadowRoot.querySelector(".prev-time");if(this.elements.prevTime.hour&&(this.elements.prevTime.hour.remove(),this.elements.prevTime.hour=null),this.elements.prevTime.minute&&(this.elements.prevTime.minute.remove(),this.elements.prevTime.minute=null),this.elements.prevTime.second&&(this.elements.prevTime.second.remove(),this.elements.prevTime.second=null),e>0){const i=t(this,T,"m",J).call(this,ae,"prevTime",e-1);r.append(i),this.elements.prevTime.hour=i}if(i>0){const e=t(this,T,"m",J).call(this,me,"prevTime",i-1);r.append(e),this.elements.prevTime.minute=e}if(this.secondEnabled&&s>0){const e=t(this,T,"m",J).call(this,he,"prevTime",s-1);r.append(e),this.elements.prevTime.second=e}this.elements.currentTime.hour&&(this.elements.currentTime.hour.remove(),this.elements.currentTime.hour=null);const l=t(this,T,"m",J).call(this,ae,"currentTime",e);this.elements.currentTime.hour=l,this.elements.currentTime.minute&&(this.elements.currentTime.minute.remove(),this.elements.currentTime.minute=null);const o=t(this,T,"m",J).call(this,me,"currentTime",i);this.elements.currentTime.minute=o,this.elements.currentTime.second&&(this.elements.currentTime.second.remove(),this.elements.currentTime.second=null);const c=this.shadowRoot.querySelector(".current-time");if(c.append(l,o),this.secondEnabled){const e=t(this,T,"m",J).call(this,he,"currentTime",s);this.elements.currentTime.second=e,c.append(e)}const a=this.shadowRoot.querySelector(".next-time");if(this.elements.nextTime.hour&&(this.elements.nextTime.hour.remove(),this.elements.nextTime.hour=null),this.elements.nextTime.minute&&(this.elements.nextTime.minute.remove(),this.elements.nextTime.minute=null),this.elements.nextTime.second&&(this.elements.nextTime.second.remove(),this.elements.nextTime.second=null),e<t(this,w,"f").hour){const i=t(this,T,"m",J).call(this,ae,"nextTime",e+1);a.append(i),this.elements.nextTime.hour=i}if(i<t(this,w,"f").minute){const e=t(this,T,"m",J).call(this,me,"nextTime",i+1);a.append(e),this.elements.nextTime.minute=e}if(this.secondEnabled&&s<t(this,w,"f").second){const e=t(this,T,"m",J).call(this,he,"nextTime",s+1);a.append(e),this.elements.nextTime.second=e}const m=this.shadowRoot.querySelector(".substitute-next-time");if(this.elements.substituteNextTime.hour&&(this.elements.substituteNextTime.hour.remove(),this.elements.substituteNextTime.hour=null),this.elements.substituteNextTime.minute&&(this.elements.substituteNextTime.minute.remove(),this.elements.substituteNextTime.minute=null),this.elements.substituteNextTime.second&&(this.elements.substituteNextTime.second.remove(),this.elements.substituteNextTime.second=null),e+1<t(this,w,"f").hour){const i=t(this,T,"m",J).call(this,ae,"substituteNextTime",e+2);m.append(i),this.elements.substituteNextTime.hour=i}if(i+1<t(this,w,"f").minute){const e=t(this,T,"m",J).call(this,me,"substituteNextTime",i+2);m.append(e),this.elements.substituteNextTime.minute=e}if(this.secondEnabled&&s+2<t(this,w,"f").second){const e=t(this,T,"m",J).call(this,he,"substituteNextTime",s+2);m.append(e),this.elements.substituteNextTime.second=e}t(this,T,"m",U).call(this,ae,"prevTime"),t(this,T,"m",U).call(this,me,"prevTime"),t(this,T,"m",U).call(this,ae,"currentTime"),t(this,T,"m",U).call(this,me,"currentTime"),t(this,T,"m",U).call(this,ae,"nextTime"),t(this,T,"m",U).call(this,me,"nextTime"),this.secondEnabled&&(t(this,T,"m",U).call(this,he,"prevTime"),t(this,T,"m",U).call(this,he,"currentTime"),t(this,T,"m",U).call(this,he,"nextTime"))},L=function(){this.shadowRoot.addEventListener("mousemove",(e=>{t(this,T,"m",F).call(this,e)})),this.elements.svgDOM.addEventListener("touchmove",(e=>{t(this,T,"m",H).call(this,e)})),this.shadowRoot.addEventListener("mouseup",t(this,T,"m",B).bind(this)),this.elements.svgDOM.addEventListener("touchend",t(this,T,"m",B).bind(this))},U=function(e,i){const s=this.elements[i][e];if(s){const n=s._boundedMouseDownEvent;"function"==typeof n&&(s.removeEventListener("mousedown",n),s.removeEventListener("touchstart",s._boundedTouchStartEvent));const r=s=>{t(this,T,"m",R).call(this,s,e,i)},l=s=>{t(this,T,"m",X).call(this,s,e,i)};s.addEventListener("mousedown",r),s.addEventListener("touchstart",l),s._boundedMouseDownEvent=r,s._boundedTouchStartEvent=l}},Y=function(){return this.secondEnabled?[362,662]:[512]},$=function(){const e=this;i(this,V,{substitutePrevTimeTextY:212,prevTimeTextY:362,currentTimeTextY:512,nextTimeTextY:662,substituteNextTimeTextY:812,get hourTextX(){return e.timeTextXPositions.hourX},get minuteTextX(){return e.timeTextXPositions.minuteX},get secondTextX(){return e.timeTextXPositions.secondX},timeStepYDiff:150,get svgPosScale(){return 1}},"f"),Object.defineProperty(t(this,V,"f"),"svgPosScale",{get:()=>{if(this.elements.timeIndicators&&this.elements.timeIndicators.hour){const e=this.elements.timeIndicators.hour.getCTM();return e&&"function"==typeof e.inverse?e.inverse().a:1}return 1}}),i(this,W,{hour:{isTextAnimationPlaying:!1,waitingAction:null},minute:{isTextAnimationPlaying:!1,waitingAction:null},second:{isTextAnimationPlaying:!1,waitingAction:null}},"f"),t(this,T,"m",A).call(this),t(this,T,"m",E).call(this),t(this,T,"m",ce).call(this)},q=function(e,t){},C=function(e,i){if(i==ue||i==de){const s=this.elements[i][e].innerHTML,n=t(this,T,"m",ne).call(this,parseInt(s),e);t(this,T,"m",ie).call(this,n,e,!0)}},X=function(e,i,s){const n=e.touches[0].pageY;t(this,T,"m",I).call(this,n,i,s)},R=function(e,i,s){const n=e.pageY;t(this,T,"m",I).call(this,n,i,s)},I=function(e,t,s){const n=this.elements.prevTime[t];i(this,y,{dom:n,timeUnit:t,timeStep:s,startY:e,iterationDone:0,lastAction:null,actionRecords:[],addActionRecord:function(e){e!==fe&&this.actionRecords.push(e),this.lastAction=e},get lastLogicalAction(){return this.actionRecords[this.actionRecords.length-1]},isDragged:!1,acc:{inDirectionMoveStack:[0],prevTouchYPos:null,direction:0,t:performance.now(),captureMove:function(e){const t=e>0?1:-1;t==this.direction||0==this.direction?(this.inDirectionMoveStack.push(e),this.direction=t):(this.inDirectionMoveStack=[e],this.direction=t,this.t=performance.now())}}},"f"),this.setTimeUnitFocus(t)},F=function(e){const i=e.pageY,s=e.movementY;t(this,T,"m",_).call(this,i,s)},H=function(e){if(t(this,y,"f")){const i=e.touches[0].pageY,s=t(this,y,"f").acc.prevTouchYPos?t(this,y,"f").acc.prevTouchYPos:t(this,y,"f").startY;t(this,y,"f").acc.prevTouchYPos=i;const n=i-s;e.preventDefault(),t(this,T,"m",_).call(this,i,n)}},_=function(e,i){if(t(this,y,"f")){t(this,y,"f").isDragged=!0;const s=100,n=e-t(this,y,"f").startY,r=t(this,V,"f").svgPosScale*n;let l=fe;(0==t(this,y,"f").iterationDone||t(this,y,"f").lastLogicalAction==ve)&&r>s&&t(this,g,"f")[t(this,y,"f").timeUnit]>0&&(l=be),(0==t(this,y,"f").iterationDone||t(this,y,"f").lastLogicalAction==be)&&r<-1*s&&t(this,g,"f")[t(this,y,"f").timeUnit]<t(this,w,"f")[t(this,y,"f").timeUnit]&&(l=ve),l==be?(t(this,g,"f")[t(this,y,"f").timeUnit]=t(this,g,"f")[t(this,y,"f").timeUnit]-1,t(this,T,"m",re).call(this),t(this,y,"f").iterationDone+=1,t(this,T,"m",O).call(this,t(this,y,"f").timeUnit,r),t(this,y,"f").startY=e,t(this,y,"f").timeStep=t(this,y,"f").timeStep==pe?"nextTime":"currentTime",t(this,T,"m",K).call(this,t(this,y,"f").timeUnit,t(this,g,"f")[t(this,y,"f").timeUnit])):l==ve?(t(this,g,"f")[t(this,y,"f").timeUnit]=t(this,g,"f")[t(this,y,"f").timeUnit]+1,t(this,T,"m",re).call(this),t(this,y,"f").iterationDone+=1,t(this,T,"m",G).call(this,t(this,y,"f").timeUnit,r),t(this,y,"f").startY=e,t(this,y,"f").timeStep=t(this,y,"f").timeStep==pe?"prevTime":"currentTime",t(this,T,"m",K).call(this,t(this,y,"f").timeUnit,t(this,g,"f")[t(this,y,"f").timeUnit])):(this.elements.substitutePrevTime[t(this,y,"f").timeUnit]&&(this.elements.substitutePrevTime[t(this,y,"f").timeUnit].style.transform=`translateY(${r}px)`),this.elements.prevTime[t(this,y,"f").timeUnit]&&(this.elements.prevTime[t(this,y,"f").timeUnit].style.transform=`translateY(${r}px)`),this.elements.currentTime[t(this,y,"f").timeUnit].style.transform=`translateY(${r}px)`,this.elements.nextTime[t(this,y,"f").timeUnit]&&(this.elements.nextTime[t(this,y,"f").timeUnit].style.transform=`translateY(${r}px)`),this.elements.substituteNextTime[t(this,y,"f").timeUnit]&&(this.elements.substituteNextTime[t(this,y,"f").timeUnit].style.transform=`translateY(${r}px)`)),t(this,y,"f").addActionRecord(l),t(this,y,"f").acc.captureMove(i)}},O=function(e,i){const s=this.elements.substituteNextTime[e];if(this.elements.substituteNextTime[e]=null,s&&s.remove(),t(this,T,"m",Z).call(this,e,"nextTime","substituteNextTime",i),t(this,T,"m",Z).call(this,e,"currentTime","nextTime",i),t(this,T,"m",Z).call(this,e,"prevTime","currentTime",i),t(this,T,"m",Z).call(this,e,"substitutePrevTime","prevTime",i),t(this,g,"f")&&t(this,g,"f")[e]>1){const i=t(this,g,"f")[e]-2,s=t(this,T,"m",J).call(this,e,"substitutePrevTime",i);this.elements.substitutePrevTime.wrapper.appendChild(s),this.elements.substitutePrevTime[e]=s}},G=function(e,i){const s=this.elements.substitutePrevTime[e];if(this.elements.substitutePrevTime[e]=null,s&&s.remove(),t(this,T,"m",Z).call(this,e,"prevTime","substitutePrevTime",i),t(this,T,"m",Z).call(this,e,"currentTime","prevTime",i),t(this,T,"m",Z).call(this,e,"nextTime","currentTime",i),t(this,T,"m",Z).call(this,e,"substituteNextTime","nextTime",i),t(this,g,"f")[e]+1<t(this,w,"f")[e]){const i=t(this,g,"f")[e]+2,s=t(this,T,"m",J).call(this,e,"substituteNextTime",i);this.elements.substituteNextTime.wrapper.appendChild(s),this.elements.substituteNextTime[e]=s}},Z=function(e,i,s,n){const r=this.elements[i][e];if(r){r.setAttribute("y",t(this,V,"f")[s+"TextY"]);let l=0;n>0&&(l=-1*(t(this,V,"f").timeStepYDiff-n)),n<0&&(l=t(this,V,"f").timeStepYDiff+n),r.style.transform=`translateY(${l}px)`,this.elements[s].wrapper.appendChild(r),this.elements[s][e]=r,t(this,T,"m",U).call(this,e,s),this.elements[i][e]=null}},B=function(){if(t(this,y,"f")){t(this,T,"m",te).call(this);const e=t(this,y,"f").timeUnit,s=t(this,y,"f").timeStep;t(this,T,"m",z).call(this,this.elements.substitutePrevTime[e]),t(this,T,"m",z).call(this,this.elements.prevTime[e]),t(this,T,"m",z).call(this,this.elements.currentTime[e]),t(this,T,"m",z).call(this,this.elements.nextTime[e]),t(this,T,"m",z).call(this,this.elements.substituteNextTime[e]),t(this,y,"f").isDragged||t(this,T,"m",C).call(this,e,s),i(this,y,null,"f")}},z=function(e){e&&(e.style.transition="transform 0.3s 0s ease",setTimeout((()=>{e.style.transition=""}),300),e.style.transform="")},J=function(i,s,n){const r=t(this,V,"f")[s+"TextY"],l=t(this,V,"f")[i+"TextX"],o=document.createElementNS("http://www.w3.org/2000/svg","text");o.classList.add(`${i}-text`,"time-text"),o.setAttributeNS(null,"dominant-baseline","middle"),this.textWidth&&o.setAttributeNS(null,"textLength",this.textWidth.toString()),o.setAttributeNS(null,"lengthAdjust","spacing"),o.setAttributeNS(null,"y",r),o.setAttributeNS(null,"x",l);let c=n.toString();return this.frontalZero&&n<10&&(c="0"+c),t(this,P,"f")&&(c=e(c)),o.innerHTML=c,this.focusedTimeUnit==i&&o.classList.add("--focused"),this.optionalUnits.includes(i)&&o.classList.add("--optional"),o},K=function(e,i){t(this,T,"m",Q).call(this,e,i)},Q=function(e,i){const s=t(this,T,"m",ee).call(this,i,e);this.elements.timeIndicators[e].setAttribute("x",s.x.toString()),this.elements.timeIndicators[e].setAttribute("y",s.y.toString())},ee=function(e,t){const i=(e*(t==ae?30:6)-90)*(Math.PI/180);return{x:512+496*Math.cos(i),y:512+496*Math.sin(i)}},te=function(){if(t(this,y,"f")){const e=t(this,y,"f").acc.inDirectionMoveStack.reduce(((e,t)=>e+t)),i=t(this,V,"f").svgPosScale*e,s=e/(performance.now()-t(this,y,"f").acc.t),n=200;if(Math.abs(i)>n){const e=Math.round(Math.abs(10*s)),i=t(this,y,"f").timeUnit,n=-1*t(this,y,"f").acc.direction*e+this.value[i],r=t(this,T,"m",ne).call(this,n,i);t(this,T,"m",ie).call(this,r,i)}}},ie=function(e,i,s=!0){const n=e-this.value[i];if(0==n)return;let r=Math.abs(n);const l=n>0?1:0==n?0:-1,o=()=>{let c=!1;const a=()=>{c||(t(this,W,"f")[i].isTextAnimationPlaying=!1,c=!0,t(this,g,"f")[i]=t(this,g,"f")[i]+l,s&&t(this,T,"m",re).call(this),1==l&&t(this,T,"m",G).call(this,i,0),-1==l&&t(this,T,"m",O).call(this,i,0),"function"==typeof t(this,W,"f")[i].waitingAction?(t(this,W,"f")[i].waitingAction(),t(this,W,"f")[i].waitingAction=null):(r--,r>0&&o()))},m=50+(1==Math.abs(n)?100:150/(Math.abs(n)-1))*(Math.abs(n)-r),h=1==r?"ease":"linear";t(this,W,"f")[i].isTextAnimationPlaying=!0,t(this,T,"m",se).call(this,i,"substitutePrevTime",l,a,m,h),t(this,T,"m",se).call(this,i,"prevTime",l,a,m,h),t(this,T,"m",se).call(this,i,"currentTime",l,a,m,h),t(this,T,"m",se).call(this,i,"nextTime",l,a,m,h),t(this,T,"m",se).call(this,i,"substituteNextTime",l,a,m,h),t(this,T,"m",Q).call(this,i,e)};r>0&&o()},se=function(e,i,s,n,r=100,l="linear"){const o=-1*s*t(this,V,"f").timeStepYDiff,c=`${Math.random()}-animation`,a=this.elements[i][e];if(a){a.animate([{transform:"translateY(0px)"},{transform:`translateY(${o}px)`}],{id:c,duration:r,easing:l}).onfinish=n}},ne=function(e,i){return e<0?0:e>t(this,w,"f")[i]?t(this,w,"f")[i]:Math.round(e)},re=function(){const e=new CustomEvent("change");this.dispatchEvent(e)},le=function(){function e(e){e&&e.classList.add("--hidden")}e(this.elements.currentTime.second),e(this.elements.nextTime.second),e(this.elements.substituteNextTime.second),e(this.elements.prevTime.second),e(this.elements.substitutePrevTime.second),e(this.elements.timeIndicators.second),e(this.elements.separatorTexts[1]),t(this,T,"m",A).call(this),t(this,T,"m",E).call(this),t(this,T,"m",ce).call(this)},oe=function(){function e(e){e&&e.classList.remove("--hidden")}e(this.elements.currentTime.second),e(this.elements.nextTime.second),e(this.elements.substituteNextTime.second),e(this.elements.prevTime.second),e(this.elements.substitutePrevTime.second),e(this.elements.timeIndicators.second),e(this.elements.separatorTexts[1]),t(this,T,"m",A).call(this),t(this,T,"m",E).call(this),t(this,T,"m",ce).call(this)},ce=function(){this.elements.separatorTexts[0].setAttribute("x",t(this,T,"a",Y)[0].toString()),this.secondEnabled?(this.elements.separatorTexts[1].setAttribute("x",t(this,T,"a",Y)[1].toString()),this.elements.separatorTexts[1].classList.remove("--hidden")):this.elements.separatorTexts[1].classList.add("--hidden")};!customElements.get("jb-time-picker")&&window.customElements.define("jb-time-picker",xe);export{xe as JBTimePickerWebComponent};
//# sourceMappingURL=jb-time-picker.js.map