jb-time-picker/dist/jb-time-picker.cjs.js

time picker web component

"use strict";var e=Object.create,t=Object.defineProperty,i=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,n=Object.getPrototypeOf,r=Object.prototype.hasOwnProperty;const o=(l=require("jb-core"),a=null!=l?e(n(l)):{},((e,n,o,l)=>{if(n&&"object"==typeof n||"function"==typeof n)for(var c,a=s(n),m=0,h=a.length;m<h;m++)c=a[m],r.call(e,c)||c===o||t(e,c,{get:(e=>n[e]).bind(null,c),enumerable:!(l=i(n,c))||l.enumerable});return e})(!c&&l&&l.__esModule?a:t(a,"default",{value:l,enumerable:!0}),l));var l,c,a;function m(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 h(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 u=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 p(e){return new u({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function d(e){return new u({lightness:e.lightness+.07,chroma:e.chroma+.07,hue:e.hue},`${e.variableName}-hover`)}function f(e){return new u({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function v(e){const t=Math.min(e.lightness+.12*(1-e.lightness),.985),i=e.chroma*(1-.15*(t-e.lightness));return new u({lightness:t,chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function b(e){const t=Math.max(e.lightness-.12*e.lightness,.02),i=e.chroma*(1-.15*(t-e.lightness));return new u({lightness:t,chroma:i,hue:e.hue},`${e.variableName}-d`)}function x(e){const t=Math.min(e.lightness+.65*(1-e.lightness),.93),i=.55*e.chroma*(1-.08*(t-e.lightness)),s=e.hue>=70&&e.hue<=162?5:-3,n=e.hue+s;return new u({lightness:t,chroma:Number(i.toFixed(3)),hue:n},`${e.variableName}-subtle`)}function T(e){const t=Math.max(e.lightness-.35,.22),i=Math.min(1.6*e.chroma,.28);return new u({lightness:Number(t.toFixed(3)),chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}const g=new u({lightness:.6,chroma:.26,hue:256},"--jb-primary"),w=new u({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),y=new u({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),k=new u({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),j=new u({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),P={single:{black:new u({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new u({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new u({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[p(0),p(1),p(2),p(3),p(4),p(5),p(6),p(7),p(8),p(9),p(10)],primary:{main:g,hover:d(g),pressed:f(g),light:v(g),dark:b(g),subtle:x(g),contrast:T(g)},secondary:{main:w,hover:d(w),pressed:f(w),light:v(w),dark:b(w),subtle:x(w),contrast:T(w)},yellow:{main:y,hover:d(y),pressed:f(y),light:v(y),dark:b(y),subtle:x(y),contrast:T(y)},green:{main:k,hover:d(k),pressed:f(k),light:v(k),dark:b(k),subtle:x(k),contrast:T(k)},red:{main:j,hover:d(j),pressed:f(j),light:v(j),dark:b(j),subtle:x(j),contrast:T(j)}};function N(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 S(){var e;N({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),N({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),N({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),N({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),N({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"}),function(e){N({name:e.primary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.primary.main.value}),N({name:e.secondary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.secondary.main.value}),N({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value}),N({name:e.single.black.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.black.value}),N({name:e.single.white.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.white.value}),N({name:e.single.highlight.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.highlight.value}),N({name:e.yellow.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.yellow.main.value}),N({name:e.green.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.green.main.value}),N({name:e.red.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.red.main.value}),N({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value});for(let t=1;t<=10;t++)N({name:e.neutral[t].variableName,syntax:"<color>",inherits:!0,initialValue:e.neutral[t].value})}(P),N({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:(e=P).single.black.value}),N({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:e.neutral[7].value}),N({name:"--jb-text-contrast",syntax:"<color>",inherits:!0,initialValue:e.single.white.value})}var M,E,A,L,U,Y,D,V,W,$,q,C,O,X,R,I,_,F,H,B,G,Z,z,J,K,Q,ee,te,ie,se,ne,re,oe,le,ce,ae,me,he,ue,pe,de,fe,ve,be;const xe="hour",Te="minute",ge="second",we="prevTime",ye="currentTime",ke="nextTime",je="MOVE",Pe="ADD_1",Ne="SUB_1";var Se=class extends HTMLElement{get frontalZero(){return m(this,U,"f")}set frontalZero(e){this.frontalZero!==e&&(h(this,U,e,"f"),m(this,M,"m",C).call(this))}set optionalUnits(e){h(this,Y,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 m(this,Y,"f")}get value(){return m(this,E,"f")}set value(e){m(this,F,"f").hour.isTextAnimationPlaying?m(this,F,"f").hour.waitingAction=()=>{m(this,M,"m",he).call(this,e.hour,xe,!1)}:m(this,M,"m",he).call(this,e.hour,xe,!1),m(this,F,"f").minute.isTextAnimationPlaying?m(this,F,"f").minute.waitingAction=()=>{m(this,M,"m",he).call(this,e.minute,Te,!1)}:m(this,M,"m",he).call(this,e.minute,Te,!1),e.second&&(m(this,F,"f").second.isTextAnimationPlaying?m(this,F,"f").second.waitingAction=()=>{m(this,M,"m",he).call(this,e.second,ge,!1)}:m(this,M,"m",he).call(this,e.second,ge,!1))}get secondEnabled(){return m(this,I,"f")}set secondEnabled(e){"boolean"==typeof e&&(h(this,I,e,"f"),0==e?m(this,M,"m",fe).call(this):m(this,M,"m",ve).call(this))}get showPersianNumber(){return m(this,D,"f")}set showPersianNumber(e){h(this,D,Boolean(e),"f"),m(this,M,"m",C).call(this)}constructor(){super(),M.add(this),E.set(this,{second:0,minute:0,hour:0}),A.set(this,{hour:24,minute:59,second:59}),this.focusedTimeUnit=null,L.set(this,null),U.set(this,!1),Y.set(this,[]),D.set(this,!1),this.textWidth=null,I.set(this,!0),_.set(this,void 0),F.set(this,void 0),m(this,M,"m",$).call(this)}connectedCallback(){m(this,M,"m",V).call(this),m(this,M,"m",H).call(this),m(this,M,"m",W).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,t,i){m(this,M,"m",B).call(this,e,i)}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"))}}};E=new WeakMap,A=new WeakMap,L=new WeakMap,U=new WeakMap,Y=new WeakMap,D=new WeakMap,I=new WeakMap,_=new WeakMap,F=new WeakMap,M=new WeakSet,V=function(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},W=function(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},$=function(){const e=this.attachShadow({mode:"open"});S();const t=document.createElement("template");t.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(t.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")},m(this,M,"m",O).call(this)},q=function(){m(this,M,"m",ce).call(this,xe,this.value.hour),m(this,M,"m",ce).call(this,Te,this.value.minute),this.secondEnabled&&this.value.second&&m(this,M,"m",ce).call(this,ge,this.value.second)},C=function(){const e=m(this,M,"m",pe).call(this,this.value.hour,xe),t=m(this,M,"m",pe).call(this,this.value.minute,Te),i=m(this,M,"m",pe).call(this,this.value.second||0,ge),s=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 t=m(this,M,"m",oe).call(this,xe,"substitutePrevTime",e-2);s.append(t),this.elements.substitutePrevTime.hour=t}if(t>1){const e=m(this,M,"m",oe).call(this,Te,"substitutePrevTime",t-2);s.append(e),this.elements.substitutePrevTime.minute=e}if(this.secondEnabled&&i>1){const e=m(this,M,"m",oe).call(this,ge,"substitutePrevTime",i-2);s.append(e),this.elements.substitutePrevTime.second=e}const n=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 t=m(this,M,"m",oe).call(this,xe,"prevTime",e-1);n.append(t),this.elements.prevTime.hour=t}if(t>0){const e=m(this,M,"m",oe).call(this,Te,"prevTime",t-1);n.append(e),this.elements.prevTime.minute=e}if(this.secondEnabled&&i>0){const e=m(this,M,"m",oe).call(this,ge,"prevTime",i-1);n.append(e),this.elements.prevTime.second=e}this.elements.currentTime.hour&&(this.elements.currentTime.hour.remove(),this.elements.currentTime.hour=null);const r=m(this,M,"m",oe).call(this,xe,"currentTime",e);this.elements.currentTime.hour=r,this.elements.currentTime.minute&&(this.elements.currentTime.minute.remove(),this.elements.currentTime.minute=null);const o=m(this,M,"m",oe).call(this,Te,"currentTime",t);this.elements.currentTime.minute=o,this.elements.currentTime.second&&(this.elements.currentTime.second.remove(),this.elements.currentTime.second=null);const l=this.shadowRoot.querySelector(".current-time");if(l.append(r,o),this.secondEnabled){const e=m(this,M,"m",oe).call(this,ge,"currentTime",i);this.elements.currentTime.second=e,l.append(e)}const c=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<m(this,A,"f").hour){const t=m(this,M,"m",oe).call(this,xe,"nextTime",e+1);c.append(t),this.elements.nextTime.hour=t}if(t<m(this,A,"f").minute){const e=m(this,M,"m",oe).call(this,Te,"nextTime",t+1);c.append(e),this.elements.nextTime.minute=e}if(this.secondEnabled&&i<m(this,A,"f").second){const e=m(this,M,"m",oe).call(this,ge,"nextTime",i+1);c.append(e),this.elements.nextTime.second=e}const a=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<m(this,A,"f").hour){const t=m(this,M,"m",oe).call(this,xe,"substituteNextTime",e+2);a.append(t),this.elements.substituteNextTime.hour=t}if(t+1<m(this,A,"f").minute){const e=m(this,M,"m",oe).call(this,Te,"substituteNextTime",t+2);a.append(e),this.elements.substituteNextTime.minute=e}if(this.secondEnabled&&i+2<m(this,A,"f").second){const e=m(this,M,"m",oe).call(this,ge,"substituteNextTime",i+2);a.append(e),this.elements.substituteNextTime.second=e}m(this,M,"m",X).call(this,xe,"prevTime"),m(this,M,"m",X).call(this,Te,"prevTime"),m(this,M,"m",X).call(this,xe,"currentTime"),m(this,M,"m",X).call(this,Te,"currentTime"),m(this,M,"m",X).call(this,xe,"nextTime"),m(this,M,"m",X).call(this,Te,"nextTime"),this.secondEnabled&&(m(this,M,"m",X).call(this,ge,"prevTime"),m(this,M,"m",X).call(this,ge,"currentTime"),m(this,M,"m",X).call(this,ge,"nextTime"))},O=function(){this.shadowRoot.addEventListener("mousemove",(e=>{m(this,M,"m",K).call(this,e)})),this.elements.svgDOM.addEventListener("touchmove",(e=>{m(this,M,"m",Q).call(this,e)})),this.shadowRoot.addEventListener("mouseup",m(this,M,"m",ne).bind(this)),this.elements.svgDOM.addEventListener("touchend",m(this,M,"m",ne).bind(this))},X=function(e,t){const i=this.elements[t][e];if(i){const s=i._boundedMouseDownEvent;"function"==typeof s&&(i.removeEventListener("mousedown",s),i.removeEventListener("touchstart",i._boundedTouchStartEvent));const n=i=>{m(this,M,"m",z).call(this,i,e,t)},r=i=>{m(this,M,"m",Z).call(this,i,e,t)};i.addEventListener("mousedown",n),i.addEventListener("touchstart",r),i._boundedMouseDownEvent=n,i._boundedTouchStartEvent=r}},R=function(){return this.secondEnabled?[362,662]:[512]},H=function(){const e=this;h(this,_,{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(m(this,_,"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}}),h(this,F,{hour:{isTextAnimationPlaying:!1,waitingAction:null},minute:{isTextAnimationPlaying:!1,waitingAction:null},second:{isTextAnimationPlaying:!1,waitingAction:null}},"f"),m(this,M,"m",C).call(this),m(this,M,"m",q).call(this),m(this,M,"m",be).call(this)},B=function(e,t){},G=function(e,t){if(t==we||t==ke){const i=this.elements[t][e].innerHTML,s=m(this,M,"m",pe).call(this,parseInt(i),e);m(this,M,"m",he).call(this,s,e,!0)}},Z=function(e,t,i){const s=e.touches[0].pageY;m(this,M,"m",J).call(this,s,t,i)},z=function(e,t,i){const s=e.pageY;m(this,M,"m",J).call(this,s,t,i)},J=function(e,t,i){const s=this.elements.prevTime[t];h(this,L,{dom:s,timeUnit:t,timeStep:i,startY:e,iterationDone:0,lastAction:null,actionRecords:[],addActionRecord:function(e){e!==je&&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)},K=function(e){const t=e.pageY,i=e.movementY;m(this,M,"m",ee).call(this,t,i)},Q=function(e){if(m(this,L,"f")){const t=e.touches[0].pageY,i=m(this,L,"f").acc.prevTouchYPos?m(this,L,"f").acc.prevTouchYPos:m(this,L,"f").startY;m(this,L,"f").acc.prevTouchYPos=t;const s=t-i;e.preventDefault(),m(this,M,"m",ee).call(this,t,s)}},ee=function(e,t){if(m(this,L,"f")){m(this,L,"f").isDragged=!0;const i=100,s=e-m(this,L,"f").startY,n=m(this,_,"f").svgPosScale*s;let r=je;(0==m(this,L,"f").iterationDone||m(this,L,"f").lastLogicalAction==Pe)&&n>i&&m(this,E,"f")[m(this,L,"f").timeUnit]>0&&(r=Ne),(0==m(this,L,"f").iterationDone||m(this,L,"f").lastLogicalAction==Ne)&&n<-1*i&&m(this,E,"f")[m(this,L,"f").timeUnit]<m(this,A,"f")[m(this,L,"f").timeUnit]&&(r=Pe),r==Ne?(m(this,E,"f")[m(this,L,"f").timeUnit]=m(this,E,"f")[m(this,L,"f").timeUnit]-1,m(this,M,"m",de).call(this),m(this,L,"f").iterationDone+=1,m(this,M,"m",te).call(this,m(this,L,"f").timeUnit,n),m(this,L,"f").startY=e,m(this,L,"f").timeStep=m(this,L,"f").timeStep==ye?"nextTime":"currentTime",m(this,M,"m",le).call(this,m(this,L,"f").timeUnit,m(this,E,"f")[m(this,L,"f").timeUnit])):r==Pe?(m(this,E,"f")[m(this,L,"f").timeUnit]=m(this,E,"f")[m(this,L,"f").timeUnit]+1,m(this,M,"m",de).call(this),m(this,L,"f").iterationDone+=1,m(this,M,"m",ie).call(this,m(this,L,"f").timeUnit,n),m(this,L,"f").startY=e,m(this,L,"f").timeStep=m(this,L,"f").timeStep==ye?"prevTime":"currentTime",m(this,M,"m",le).call(this,m(this,L,"f").timeUnit,m(this,E,"f")[m(this,L,"f").timeUnit])):(this.elements.substitutePrevTime[m(this,L,"f").timeUnit]&&(this.elements.substitutePrevTime[m(this,L,"f").timeUnit].style.transform=`translateY(${n}px)`),this.elements.prevTime[m(this,L,"f").timeUnit]&&(this.elements.prevTime[m(this,L,"f").timeUnit].style.transform=`translateY(${n}px)`),this.elements.currentTime[m(this,L,"f").timeUnit].style.transform=`translateY(${n}px)`,this.elements.nextTime[m(this,L,"f").timeUnit]&&(this.elements.nextTime[m(this,L,"f").timeUnit].style.transform=`translateY(${n}px)`),this.elements.substituteNextTime[m(this,L,"f").timeUnit]&&(this.elements.substituteNextTime[m(this,L,"f").timeUnit].style.transform=`translateY(${n}px)`)),m(this,L,"f").addActionRecord(r),m(this,L,"f").acc.captureMove(t)}},te=function(e,t){const i=this.elements.substituteNextTime[e];if(this.elements.substituteNextTime[e]=null,i&&i.remove(),m(this,M,"m",se).call(this,e,"nextTime","substituteNextTime",t),m(this,M,"m",se).call(this,e,"currentTime","nextTime",t),m(this,M,"m",se).call(this,e,"prevTime","currentTime",t),m(this,M,"m",se).call(this,e,"substitutePrevTime","prevTime",t),m(this,E,"f")&&m(this,E,"f")[e]>1){const t=m(this,E,"f")[e]-2,i=m(this,M,"m",oe).call(this,e,"substitutePrevTime",t);this.elements.substitutePrevTime.wrapper.appendChild(i),this.elements.substitutePrevTime[e]=i}},ie=function(e,t){const i=this.elements.substitutePrevTime[e];if(this.elements.substitutePrevTime[e]=null,i&&i.remove(),m(this,M,"m",se).call(this,e,"prevTime","substitutePrevTime",t),m(this,M,"m",se).call(this,e,"currentTime","prevTime",t),m(this,M,"m",se).call(this,e,"nextTime","currentTime",t),m(this,M,"m",se).call(this,e,"substituteNextTime","nextTime",t),m(this,E,"f")[e]+1<m(this,A,"f")[e]){const t=m(this,E,"f")[e]+2,i=m(this,M,"m",oe).call(this,e,"substituteNextTime",t);this.elements.substituteNextTime.wrapper.appendChild(i),this.elements.substituteNextTime[e]=i}},se=function(e,t,i,s){const n=this.elements[t][e];if(n){n.setAttribute("y",m(this,_,"f")[i+"TextY"]);let r=0;s>0&&(r=-1*(m(this,_,"f").timeStepYDiff-s)),s<0&&(r=m(this,_,"f").timeStepYDiff+s),n.style.transform=`translateY(${r}px)`,this.elements[i].wrapper.appendChild(n),this.elements[i][e]=n,m(this,M,"m",X).call(this,e,i),this.elements[t][e]=null}},ne=function(){if(m(this,L,"f")){m(this,M,"m",me).call(this);const e=m(this,L,"f").timeUnit,t=m(this,L,"f").timeStep;m(this,M,"m",re).call(this,this.elements.substitutePrevTime[e]),m(this,M,"m",re).call(this,this.elements.prevTime[e]),m(this,M,"m",re).call(this,this.elements.currentTime[e]),m(this,M,"m",re).call(this,this.elements.nextTime[e]),m(this,M,"m",re).call(this,this.elements.substituteNextTime[e]),m(this,L,"f").isDragged||m(this,M,"m",G).call(this,e,t),h(this,L,null,"f")}},re=function(e){e&&(e.style.transition="transform 0.3s 0s ease",setTimeout((()=>{e.style.transition=""}),300),e.style.transform="")},oe=function(e,t,i){const s=m(this,_,"f")[t+"TextY"],n=m(this,_,"f")[e+"TextX"],r=document.createElementNS("http://www.w3.org/2000/svg","text");r.classList.add(`${e}-text`,"time-text"),r.setAttributeNS(null,"dominant-baseline","middle"),this.textWidth&&r.setAttributeNS(null,"textLength",this.textWidth.toString()),r.setAttributeNS(null,"lengthAdjust","spacing"),r.setAttributeNS(null,"y",s),r.setAttributeNS(null,"x",n);let l=i.toString();return this.frontalZero&&i<10&&(l="0"+l),m(this,D,"f")&&(l=(0,o.enToFaDigits)(l)),r.innerHTML=l,this.focusedTimeUnit==e&&r.classList.add("--focused"),this.optionalUnits.includes(e)&&r.classList.add("--optional"),r},le=function(e,t){m(this,M,"m",ce).call(this,e,t)},ce=function(e,t){const i=m(this,M,"m",ae).call(this,t,e);this.elements.timeIndicators[e].setAttribute("x",i.x.toString()),this.elements.timeIndicators[e].setAttribute("y",i.y.toString())},ae=function(e,t){const i=(e*(t==xe?30:6)-90)*(Math.PI/180);return{x:512+496*Math.cos(i),y:512+496*Math.sin(i)}},me=function(){if(m(this,L,"f")){const e=m(this,L,"f").acc.inDirectionMoveStack.reduce(((e,t)=>e+t)),t=m(this,_,"f").svgPosScale*e,i=e/(performance.now()-m(this,L,"f").acc.t),s=200;if(Math.abs(t)>s){const e=Math.round(Math.abs(10*i)),t=m(this,L,"f").timeUnit,s=-1*m(this,L,"f").acc.direction*e+this.value[t],n=m(this,M,"m",pe).call(this,s,t);m(this,M,"m",he).call(this,n,t)}}},he=function(e,t,i=!0){const s=e-this.value[t];if(0==s)return;let n=Math.abs(s);const r=s>0?1:0==s?0:-1,o=()=>{let l=!1;const c=()=>{l||(m(this,F,"f")[t].isTextAnimationPlaying=!1,l=!0,m(this,E,"f")[t]=m(this,E,"f")[t]+r,i&&m(this,M,"m",de).call(this),1==r&&m(this,M,"m",ie).call(this,t,0),-1==r&&m(this,M,"m",te).call(this,t,0),"function"==typeof m(this,F,"f")[t].waitingAction?(m(this,F,"f")[t].waitingAction(),m(this,F,"f")[t].waitingAction=null):(n--,n>0&&o()))},a=50+(1==Math.abs(s)?100:150/(Math.abs(s)-1))*(Math.abs(s)-n),h=1==n?"ease":"linear";m(this,F,"f")[t].isTextAnimationPlaying=!0,m(this,M,"m",ue).call(this,t,"substitutePrevTime",r,c,a,h),m(this,M,"m",ue).call(this,t,"prevTime",r,c,a,h),m(this,M,"m",ue).call(this,t,"currentTime",r,c,a,h),m(this,M,"m",ue).call(this,t,"nextTime",r,c,a,h),m(this,M,"m",ue).call(this,t,"substituteNextTime",r,c,a,h),m(this,M,"m",ce).call(this,t,e)};n>0&&o()},ue=function(e,t,i,s,n=100,r="linear"){const o=-1*i*m(this,_,"f").timeStepYDiff,l=`${Math.random()}-animation`,c=this.elements[t][e];if(c){c.animate([{transform:"translateY(0px)"},{transform:`translateY(${o}px)`}],{id:l,duration:n,easing:r}).onfinish=s}},pe=function(e,t){return e<0?0:e>m(this,A,"f")[t]?m(this,A,"f")[t]:Math.round(e)},de=function(){const e=new CustomEvent("change");this.dispatchEvent(e)},fe=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]),m(this,M,"m",C).call(this),m(this,M,"m",q).call(this),m(this,M,"m",be).call(this)},ve=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]),m(this,M,"m",C).call(this),m(this,M,"m",q).call(this),m(this,M,"m",be).call(this)},be=function(){this.elements.separatorTexts[0].setAttribute("x",m(this,M,"a",R)[0].toString()),this.secondEnabled?(this.elements.separatorTexts[1].setAttribute("x",m(this,M,"a",R)[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",Se),exports.JBTimePickerWebComponent=Se;
//# sourceMappingURL=jb-time-picker.cjs.js.map