ajv-material-pickers-time - npm Package Compare versions

Comparing version 0.2.8 to 0.3.0

dist/TimePicker.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.TimePicker=e():t.TimePicker=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var l=i[n]={i:n,l:!1,exports:{}};return t[n].call(l.exports,l,l.exports,e),l.l=!0,l.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TimePicker=void 0;var n=i(1),l=function(t){return t&&t.__esModule?t:{default:t}}(n);e.TimePicker=l.default},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){var i=[],n=!0,l=!1,s=void 0;try{for(var c,a=t[Symbol.iterator]();!(n=(c=a.next()).done)&&(i.push(c.value),!e||i.length!==e);n=!0);}catch(t){l=!0,s=t}finally{try{!n&&a.return&&a.return()}finally{if(l)throw s}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),c=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=i(2),o=n(a),r=i(3),d=n(r),u=i(4),h=n(u);i(5);var m=function(){function t(){l(this,t),this.template=o.default,this.defaultOptions={timeFormat:"standard",autoNext:!1},this.cachedEls={},this.events=new h.default,this.setupTemplate(),this.cachedEls.body=document.body;var e=this.cachedEls.body.getElementsByClassName("mtp-overlay"),i=s(e,1);this.cachedEls.overlay=i[0];var n=this.cachedEls.overlay.getElementsByClassName("mtp-wrapper"),c=s(n,1);this.cachedEls.wrapper=c[0];var a=this.cachedEls.wrapper.getElementsByClassName("mtp-picker"),r=s(a,1);this.cachedEls.picker=r[0];var d=this.cachedEls.wrapper.getElementsByClassName("mtp-meridiem"),u=s(d,1);this.cachedEls.meridiem=u[0],this.cachedEls.meridiemSpans=this.cachedEls.meridiem.getElementsByTagName("span");var m=this.cachedEls.wrapper.getElementsByClassName("mtp-display__hours"),p=s(m,1);this.cachedEls.displayHours=p[0];var v=this.cachedEls.wrapper.getElementsByClassName("mtp-display__minutes"),y=s(v,1);this.cachedEls.displayMinutes=y[0];var E=this.cachedEls.wrapper.getElementsByClassName("mtp-display__meridiem"),f=s(E,1);this.cachedEls.displayMeridiem=f[0];var k=this.cachedEls.picker.getElementsByClassName("mtp-actions__cancel"),g=s(k,1);this.cachedEls.buttonCancel=g[0];var b=this.cachedEls.picker.getElementsByClassName("mtp-actions__back"),_=s(b,1);this.cachedEls.buttonBack=_[0];var M=this.cachedEls.picker.getElementsByClassName("mtp-actions__next"),H=s(M,1);this.cachedEls.buttonNext=H[0];var L=this.cachedEls.picker.getElementsByClassName("mtp-actions__finish"),w=s(L,1);this.cachedEls.buttonFinish=w[0];var x=this.cachedEls.picker.getElementsByClassName("mtp-clock__hours"),N=s(x,1);this.cachedEls.clockHours=N[0];var T=this.cachedEls.picker.getElementsByClassName("mtp-clock__minutes"),S=s(T,1);this.cachedEls.clockMinutes=S[0];var B=this.cachedEls.picker.getElementsByClassName("mtp-clock__hours-military"),O=s(B,1);this.cachedEls.clockMilitaryHours=O[0];var C=this.cachedEls.picker.getElementsByClassName("mtp-clock__hand"),j=s(C,1);this.cachedEls.clockHand=j[0],this.cachedEls.clockHoursLi=this.cachedEls.clockHours.getElementsByTagName("li"),this.cachedEls.clockMinutesLi=this.cachedEls.clockMinutes.getElementsByTagName("li"),this.cachedEls.clockMilitaryHoursLi=this.cachedEls.clockMilitaryHours.getElementsByTagName("li"),this.setEvents()}return c(t,[{key:"bindInput",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t instanceof HTMLElement?t:document.querySelector(t);n.mtpOptions=(0,d.default)({},this.defaultOptions,i),n.addEventListener("focus",function(t){return e.showEvent(t)})}},{key:"openOnInput",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.inputEl=t instanceof HTMLElement?t:document.querySelector(t),this.inputEl.mtpOptions=(0,d.default)({},this.defaultOptions,e),this.show()}},{key:"setupTemplate",value:function(){this.isTemplateInDOM()||document.body.insertAdjacentHTML("beforeend",o.default)}},{key:"setEvents",value:function(){var t=this;this.hasSetEvents()||(this.cachedEls.overlay.addEventListener("click",function(e){return t.hideEvent(e)}),this.cachedEls.buttonCancel.addEventListener("click",function(e){return t.hideEvent(e)}),this.cachedEls.buttonNext.addEventListener("click",function(){return t.showMinutes()}),this.cachedEls.buttonBack.addEventListener("click",function(){return t.showHours()}),this.cachedEls.buttonFinish.addEventListener("click",function(){return t.finish()}),[].forEach.call(this.cachedEls.meridiemSpans,function(e){e.addEventListener("click",function(e){return t.meridiemSelectEvent(e)})}),[].forEach.call(this.cachedEls.clockHoursLi,function(e){e.addEventListener("click",function(e){t.hourSelectEvent(e,t.cachedEls.clockHours,t.cachedEls.clockHoursLi)})}),[].forEach.call(this.cachedEls.clockMilitaryHoursLi,function(e){e.addEventListener("click",function(e){t.hourSelectEvent(e,t.cachedEls.clockMilitaryHours,t.cachedEls.clockMilitaryHoursLi)})}),[].forEach.call(this.cachedEls.clockMinutesLi,function(e){e.addEventListener("click",function(e){t.minuteSelectEvent(e,t.cachedEls.clockMinutes,t.cachedEls.clockMinutesLi)})}),this.cachedEls.wrapper.classList.add("mtp-events-set"))}},{key:"show",value:function(){var t=this.isMilitaryFormat();this.inputEl.blur(),this.toggleHoursVisible(!0,t),this.toggleMinutesVisible(),this.setDisplayTime({hours:t?"00":"12",minutes:"0"}),this.cachedEls.body.style.overflow="hidden",this.cachedEls.displayMeridiem.style.display=t?"none":"inline",this.cachedEls.meridiem.style.display=t?"none":"block",this.cachedEls.overlay.style.display="block",this.cachedEls.clockHand.style.height=t?"90px":"105px",this.events.trigger("show")}},{key:"showEvent",value:function(t){this.inputEl=t.target,this.show()}},{key:"hide",value:function(){this.cachedEls.overlay.style.display="none",this.cachedEls.body.style.overflow="",this.inputEl.dispatchEvent(new Event("blur")),this.resetState(),this.events.trigger("hide")}},{key:"hideEvent",value:function(t){t.stopPropagation();var e=["mtp-overlay","mtp-actions__cancel"],i=t.target.classList;e.some(function(t){return i.contains(t)})&&this.hide()}},{key:"resetState",value:function(){this.currentStep=0,this.toggleHoursVisible(!0,this.isMilitaryFormat()),this.toggleMinutesVisible(),this.cachedEls.clockHoursLi[0].dispatchEvent(new Event("click")),this.cachedEls.clockMinutesLi[0].dispatchEvent(new Event("click")),this.cachedEls.clockMilitaryHoursLi[0].dispatchEvent(new Event("click")),this.cachedEls.meridiemSpans[0].dispatchEvent(new Event("click"))}},{key:"setDisplayTime",value:function(t){var e=t.hours,i=t.minutes;if(e&&("string"==typeof e||e instanceof String?this.cachedEls.displayHours.innerHTML=e.trim():this.cachedEls.displayHours.innerHTML=e),i){var n=i<10?"0"+i:i;"string"==typeof n||n instanceof String?this.cachedEls.displayMinutes.innerHTML=n.trim():this.cachedEls.displayMinutes.innerHTML=n}parseInt(e),parseInt(i)}},{key:"rotateHand",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:9,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,i=t*e-180,n="rotate("+i+"deg)";this.cachedEls.clockHand.style.transform=n,this.cachedEls.clockHand.style["-webkit-transform"]=n,this.cachedEls.clockHand.style["-ms-transform"]=n}},{key:"showHours",value:function(){var t=this.isMilitaryFormat(),e=t?this.cachedEls.clockMilitaryHoursLi:this.cachedEls.clockHoursLi;this.toggleHoursVisible(!0,t),this.toggleMinutesVisible(),this.rotateHand(this.getActiveIndex(e)),this.events.trigger("hoursShown")}},{key:"showMinutes",value:function(){var t=this.cachedEls.clockMinutesLi;this.toggleHoursVisible(),this.toggleMinutesVisible(!0),this.rotateHand(this.getActiveIndex(t),6),this.cachedEls.clockHand.style.height="115px",this.events.trigger("minutesShown")}},{key:"finish",value:function(){this.timeSelected(),this.hide()}},{key:"toggleHoursVisible",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.cachedEls.clockHours.style.display=t&&!e?"block":"none",this.cachedEls.clockMilitaryHours.style.display=t&&e?"block":"none",this.cachedEls.buttonNext.style.display=t?"none":"inline-block"}},{key:"toggleMinutesVisible",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.cachedEls.clockMinutes.style.display=t?"block":"none",this.cachedEls.buttonBack.style.display=t?"inline-block":"none",this.cachedEls.buttonNext.style.display=t?"none":"inline-block",this.cachedEls.buttonFinish.style.display=t?"inline-block":"none"}},{key:"getActiveIndex",value:function(t){var e=0;return[].some.call(t,function(t,i){return!!t.classList.contains("mtp-clock--active")&&(e=i,!0)}),e}},{key:"timeSelected",value:function(){var t=this.cachedEls.displayHours.innerHTML,e=this.cachedEls.displayMinutes.innerHTML,i=this.isMilitaryFormat()?"":this.cachedEls.displayMeridiem.innerHTML,n=t+":"+e+" "+i;this.inputEl.value=n.trim(),this.inputEl.dispatchEvent(new Event("input")),this.events.trigger("timeSelected",{hours:t,minutes:e,meridiem:i,value:n})}},{key:"setActiveEl",value:function(t,e){t.getElementsByClassName("mtp-clock--active")[0].classList.remove("mtp-clock--active"),e.classList.add("mtp-clock--active")}},{key:"meridiemSelectEvent",value:function(t){var e=t.target,i=this.cachedEls.meridiem.getElementsByClassName("mtp-clock--active")[0],n=e.innerHTML;i.isEqualNode(e)||(i.classList.remove("mtp-clock--active"),e.classList.add("mtp-clock--active"),this.cachedEls.displayMeridiem.innerHTML=n)}},{key:"hourSelectEvent",value:function(t,e,i){t.stopPropagation();var n=t.target,l=n.parentElement,s=l.classList.contains("mtp-clock__hours--inner");this.cachedEls.clockHand.style.height=s?"90px":"105px",this.setActiveEl(e,n);var c=this.getActiveIndex(i);this.setDisplayTime({hours:n.innerHTML}),this.rotateHand(c),this.events.trigger("hourSelected")}},{key:"minuteSelectEvent",value:function(t,e,i){t.stopPropagation();var n=t.target;this.setActiveEl(e,n);var l=this.getActiveIndex(i);this.setDisplayTime({minutes:l}),this.rotateHand(l,6),this.events.trigger("minuteSelected")}},{key:"isMilitaryFormat",value:function(){return"military"===this.inputEl.mtpOptions.timeFormat}},{key:"hasSetEvents",value:function(){return this.cachedEls.wrapper.classList.contains("mtp-events-set")}},{key:"isTemplateInDOM",value:function(){return Boolean(document.getElementsByClassName("mtp-overlay")[0])}}]),t}();e.default=m},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.default='\n<div class="mtp-overlay" style="display:none">\n    <div class="mtp-wrapper">\n        <div class="mtp-display">\n            <span class="mtp-display__hours">12</span>:<span class="mtp-display__minutes">00</span>\n            <span class="mtp-display__meridiem">a.m.</span>\n        </div>\x3c!-- END .mtp-display --\x3e\n        <div class="mtp-picker">\n            <div class="mtp-meridiem">\n                <span class="mtp-clock--active">a.m.</span>\n                <span>p.m.</span>\n            </div>\x3c!-- END .mtp-meridiem --\x3e\n            <div class="mtp-clock">\n                <div class="mtp-clock__center"></div>\n                <div class="mtp-clock__hand"></div>\n                <ul class="mtp-clock__time mtp-clock__outer mtp-clock__hours" style="display:none">\n                    <li class="mtp-clock--active">12</li>\n                    <li>1</li>\n                    <li>2</li>\n                    <li>3</li>\n                    <li>4</li>\n                    <li>5</li>\n                    <li>6</li>\n                    <li>7</li>\n                    <li>8</li>\n                    <li>9</li>\n                    <li>10</li>\n                    <li>11</li>\n                </ul>\n                <ul class="mtp-clock__time mtp-clock__outer mtp-clock__minutes" style="display:none">\n                    <li class="mtp-clock--active">0</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>5</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>10</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>15</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>20</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>25</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>30</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>35</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>40</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>45</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>50</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>55</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                </ul>\n                <ul class="mtp-clock__time mtp-clock__hours-military" style="display:none">\n                    <div class="mtp-clock__hours--inner">\n                        <li class="mtp-clock--active">00</li>\n                        <li>13</li>\n                        <li>14</li>\n                        <li>15</li>\n                        <li>16</li>\n                        <li>17</li>\n                        <li>18</li>\n                        <li>19</li>\n                        <li>20</li>\n                        <li>21</li>\n                        <li>22</li>\n                        <li>23</li>\n                    </div>\n                    <div class="mtp-clock__hours">\n                        <li>12</li>\n                        <li>1</li>\n                        <li>2</li>\n                        <li>3</li>\n                        <li>4</li>\n                        <li>5</li>\n                        <li>6</li>\n                        <li>7</li>\n                        <li>8</li>\n                        <li>9</li>\n                        <li>10</li>\n                        <li>11</li>\n                    </div>\n                </ul>\n            </div>\x3c!-- END .mtp-clock --\x3e\n            <div class="mtp-actions">\n                <button type="button" class="mtp-actions__button mtp-actions__cancel">Cancel</button>\n                <button type="button" class="mtp-actions__button mtp-actions__back" style="display:none">Back</button>\n                <button type="button" class="mtp-actions__button mtp-actions__next">Next</button>\n                <button type="button" class="mtp-actions__button mtp-actions__finish" style="display:none">Done</button>\n            </div>\x3c!-- END .mtp-actions --\x3e\n        </div>\x3c!-- END .mtp-picker --\x3e\n    </div>\x3c!-- END .mtp-wrapper --\x3e\n</div>\x3c!-- END .mtp-overlay --\x3e\n'},function(t,e,i){"use strict";function n(t){if("undefined"===t||null===t)throw new TypeError("Cannot convert first argument to object");for(var e=Object(t),i=0;i<(arguments.length<=1?0:arguments.length-1);i+=1){var n=arguments.length<=i+1?void 0:arguments[i+1];if("undefined"!==n&&null!==n){n=Object(n);for(var l=Object.keys(n),s=0,c=l.length;s<c;s+=1){var a=l[s],o=Object.getOwnPropertyDescriptor(n,a);"undefined"!==o&&o.enumerable&&(e[a]=n[a])}}}return e}Object.defineProperty(e,"__esModule",{value:!0}),e.default=n},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var l=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=function(){function t(){n(this,t),this.events={}}return l(t,[{key:"on",value:function(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)}},{key:"off",value:function(t){this.events[t]&&(this.events[t]=[])}},{key:"trigger",value:function(t,e){this.events[t]&&this.events[t].length&&this.events[t].forEach(function(t){return t(e)})}}]),t}();e.default=s},function(t,e){}])});
+!function(t){function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}var e={};i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:s})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="",i(i.s=5)}([function(t,i,e){"use strict";function s(t){return t&&t.__esModule?t:{default:t}}function n(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(i,"__esModule",{value:!0});var l=function(){function t(t,i){var e=[],s=!0,n=!1,l=void 0;try{for(var c,a=t[Symbol.iterator]();!(s=(c=a.next()).done)&&(e.push(c.value),!i||e.length!==i);s=!0);}catch(t){n=!0,l=t}finally{try{!s&&a.return&&a.return()}finally{if(n)throw l}}return e}return function(i,e){if(Array.isArray(i))return i;if(Symbol.iterator in Object(i))return t(i,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),c=function(){function t(t,i){for(var e=0;e<i.length;e++){var s=i[e];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(i,e,s){return e&&t(i.prototype,e),s&&t(i,s),i}}(),a=e(1),o=s(a),r=e(2),d=s(r),u=e(3),h=s(u);e(4);var m=function(){function t(){n(this,t),this.template=o.default,this.defaultOptions={timeFormat:"standard",autoNext:!1},this.cachedEls={},this.events=new h.default,this.setupTemplate(),this.cachedEls.body=document.body;var i=this.cachedEls.body.getElementsByClassName("mtp-overlay"),e=l(i,1);this.cachedEls.overlay=e[0];var s=this.cachedEls.overlay.getElementsByClassName("mtp-wrapper"),c=l(s,1);this.cachedEls.wrapper=c[0];var a=this.cachedEls.wrapper.getElementsByClassName("mtp-picker"),r=l(a,1);this.cachedEls.picker=r[0];var d=this.cachedEls.wrapper.getElementsByClassName("mtp-meridiem"),u=l(d,1);this.cachedEls.meridiem=u[0],this.cachedEls.meridiemSpans=this.cachedEls.meridiem.getElementsByTagName("span");var m=this.cachedEls.wrapper.getElementsByClassName("mtp-display__hours"),p=l(m,1);this.cachedEls.displayHours=p[0];var v=this.cachedEls.wrapper.getElementsByClassName("mtp-display__minutes"),y=l(v,1);this.cachedEls.displayMinutes=y[0];var E=this.cachedEls.picker.getElementsByClassName("mtp-actions__cancel"),f=l(E,1);this.cachedEls.buttonCancel=f[0];var k=this.cachedEls.picker.getElementsByClassName("mtp-actions__back"),g=l(k,1);this.cachedEls.buttonBack=g[0];var b=this.cachedEls.picker.getElementsByClassName("mtp-actions__next"),_=l(b,1);this.cachedEls.buttonNext=_[0];var L=this.cachedEls.picker.getElementsByClassName("mtp-actions__finish"),M=l(L,1);this.cachedEls.buttonFinish=M[0],this.cachedEls.displayGroups={};var H=this.cachedEls.wrapper.getElementsByClassName("hour-group"),w=l(H,1);this.cachedEls.displayGroups.hours=w[0];var x=this.cachedEls.wrapper.getElementsByClassName("minute-group"),N=l(x,1);this.cachedEls.displayGroups.minutes=N[0];var S=this.cachedEls.picker.getElementsByClassName("mtp-clock__hours"),T=l(S,1);this.cachedEls.clockHours=T[0];var B=this.cachedEls.picker.getElementsByClassName("mtp-clock__minutes"),C=l(B,1);this.cachedEls.clockMinutes=C[0];var O=this.cachedEls.picker.getElementsByClassName("mtp-clock__hours-military"),D=l(O,1);this.cachedEls.clockMilitaryHours=D[0];var A=this.cachedEls.picker.getElementsByClassName("mtp-clock__hand"),j=l(A,1);this.cachedEls.clockHand=j[0],this.cachedEls.clockHoursLi=this.cachedEls.clockHours.getElementsByTagName("li"),this.cachedEls.clockMinutesLi=this.cachedEls.clockMinutes.getElementsByTagName("li"),this.cachedEls.clockMilitaryHoursLi=this.cachedEls.clockMilitaryHours.getElementsByTagName("li"),this.setEvents()}return c(t,[{key:"bindInput",value:function(t){var i=this,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=t instanceof HTMLElement?t:document.querySelector(t);s.mtpOptions=(0,d.default)({},this.defaultOptions,e),s.addEventListener("focus",function(t){return i.showEvent(t)})}},{key:"openOnInput",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.inputEl=t instanceof HTMLElement?t:document.querySelector(t),this.inputEl.mtpOptions=(0,d.default)({},this.defaultOptions,i),this.show()}},{key:"setupTemplate",value:function(){this.isTemplateInDOM()||document.body.insertAdjacentHTML("beforeend",o.default)}},{key:"highlightHourDisplayGroup",value:function(){this.cachedEls.displayGroups.hours.classList.add("active-group"),this.cachedEls.displayGroups.minutes.classList.remove("active-group")}},{key:"highlightMinuteDisplayGroup",value:function(){this.cachedEls.displayGroups.hours.classList.remove("active-group"),this.cachedEls.displayGroups.minutes.classList.add("active-group")}},{key:"setEvents",value:function(){var t=this;this.hasSetEvents()||(this.cachedEls.overlay.addEventListener("click",function(i){return t.hideEvent(i)}),this.cachedEls.buttonCancel.addEventListener("click",function(i){return t.hideEvent(i)}),this.cachedEls.buttonNext.addEventListener("click",function(){return t.showMinutes()}),this.cachedEls.buttonBack.addEventListener("click",function(){return t.showHours()}),this.cachedEls.buttonFinish.addEventListener("click",function(){return t.finish()}),[].forEach.call(this.cachedEls.meridiemSpans,function(i){i.addEventListener("click",function(i){return t.meridiemSelectEvent(i)})}),[].forEach.call(this.cachedEls.clockHoursLi,function(i){i.addEventListener("click",function(i){t.hourSelectEvent(i,t.cachedEls.clockHours,t.cachedEls.clockHoursLi)})}),[].forEach.call(this.cachedEls.clockMilitaryHoursLi,function(i){i.addEventListener("click",function(i){t.hourSelectEvent(i,t.cachedEls.clockMilitaryHours,t.cachedEls.clockMilitaryHoursLi)})}),[].forEach.call(this.cachedEls.clockMinutesLi,function(i){i.addEventListener("click",function(i){t.minuteSelectEvent(i,t.cachedEls.clockMinutes,t.cachedEls.clockMinutesLi)})}),this.cachedEls.wrapper.classList.add("mtp-events-set"),this.events.on("hoursShown",function(){t.highlightHourDisplayGroup()}),this.events.on("minutesShown",function(){t.highlightMinuteDisplayGroup()}))}},{key:"show",value:function(){var t=this.isMilitaryFormat();this.inputEl.blur(),this.toggleHoursVisible(!0,t),this.toggleMinutesVisible(),this.inputEl.value.length>0?this.setTime(this.inputEl.value):this.setDisplayTime({hours:t?"00":"12",minutes:"0"}),this.cachedEls.body.style.overflow="hidden",this.cachedEls.meridiem.style.visibility=t?"none":"visible",this.cachedEls.overlay.style.display="block",this.cachedEls.clockHand.style.height=t?"90px":"105px",this.events.trigger("show")}},{key:"showEvent",value:function(t){this.inputEl=t.target,this.show()}},{key:"hide",value:function(){this.cachedEls.overlay.style.display="none",this.cachedEls.body.style.overflow="",this.inputEl.dispatchEvent(new Event("blur")),this.resetState(),this.events.trigger("hide")}},{key:"hideEvent",value:function(t){t.stopPropagation();var i=["mtp-overlay","mtp-actions__cancel"],e=t.target.classList;i.some(function(t){return e.contains(t)})&&this.hide()}},{key:"resetState",value:function(){this.currentStep="hours",this.toggleHoursVisible(!0,this.isMilitaryFormat()),this.toggleMinutesVisible(),this.cachedEls.clockHoursLi[0].dispatchEvent(new Event("click")),this.cachedEls.clockMinutesLi[0].dispatchEvent(new Event("click")),this.cachedEls.clockMilitaryHoursLi[0].dispatchEvent(new Event("click")),this.cachedEls.meridiemSpans[0].dispatchEvent(new Event("click")),this.highlightHourDisplayGroup()}},{key:"setDisplayTime",value:function(t){var i=t.hours,e=t.minutes;if(i&&("string"==typeof i||i instanceof String?this.cachedEls.displayHours.innerHTML=i.trim():this.cachedEls.displayHours.innerHTML=i),e){var s=e<10?"0"+e:e;"string"==typeof s||s instanceof String?this.cachedEls.displayMinutes.innerHTML=s.trim():this.cachedEls.displayMinutes.innerHTML=s}}},{key:"rotateHand",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:9,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,e=t*i-180,s="rotate("+e+"deg)";this.cachedEls.clockHand.style.transform=s,this.cachedEls.clockHand.style["-webkit-transform"]=s,this.cachedEls.clockHand.style["-ms-transform"]=s}},{key:"showHours",value:function(){var t=this.isMilitaryFormat(),i=t?this.cachedEls.clockMilitaryHoursLi:this.cachedEls.clockHoursLi;this.toggleHoursVisible(!0,t),this.toggleMinutesVisible(),this.rotateHand(this.getActiveIndex(i)),this.events.trigger("hoursShown")}},{key:"showMinutes",value:function(){var t=this.cachedEls.clockMinutesLi;this.toggleHoursVisible(),this.toggleMinutesVisible(!0),this.rotateHand(this.getActiveIndex(t),6),this.cachedEls.clockHand.style.height="115px",this.events.trigger("minutesShown")}},{key:"finish",value:function(){this.timeSelected(),this.hide()}},{key:"toggleHoursVisible",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t&&(this.currentStep="hours"),this.cachedEls.clockHours.style.display=t&&!i?"block":"none",this.cachedEls.clockMilitaryHours.style.display=t&&i?"block":"none",this.cachedEls.buttonNext.style.display=t?"none":"inline-block"}},{key:"toggleMinutesVisible",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];t&&(this.currentStep="minutes"),this.cachedEls.clockMinutes.style.display=t?"block":"none",this.cachedEls.buttonBack.style.display=t?"inline-block":"none",this.cachedEls.buttonNext.style.display=t?"none":"inline-block",this.cachedEls.buttonFinish.style.display=t?"inline-block":"none"}},{key:"getActiveIndex",value:function(t){var i=0;return[].some.call(t,function(t,e){return!!t.classList.contains("mtp-clock--active")&&(i=e,!0)}),i}},{key:"timeSelected",value:function(){var t=this.cachedEls.displayHours.innerHTML,i=this.cachedEls.displayMinutes.innerHTML,e=this.isMilitaryFormat()?"":Array.from(this.cachedEls.meridiemSpans).find(function(t){return t.classList.contains("mtp-meridiem--active")}).innerText,s=t+":"+i+" "+e;this.inputEl.value=s.trim(),this.inputEl.dispatchEvent(new Event("input")),this.events.trigger("timeSelected",{hours:t,minutes:i,meridiem:e,value:s})}},{key:"setActiveEl",value:function(t,i){t.getElementsByClassName("mtp-clock--active")[0].classList.remove("mtp-clock--active"),i.classList.add("mtp-clock--active")}},{key:"meridiemSelectEvent",value:function(t){var i=t.target,e=this.cachedEls.meridiem.getElementsByClassName("mtp-meridiem--active")[0];i.innerHTML;e.isEqualNode(i)||(e.classList.remove("mtp-meridiem--active"),i.classList.add("mtp-meridiem--active"))}},{key:"hourSelectEvent",value:function(t,i,e){t.stopPropagation();var s=t.target,n=s.parentElement,l=n.classList.contains("mtp-clock__hours--inner");this.cachedEls.clockHand.style.height=l?"90px":"105px",this.setActiveEl(i,s);var c=this.getActiveIndex(e);this.setDisplayTime({hours:s.innerHTML}),this.rotateHand(c),this.events.trigger("hourSelected")}},{key:"minuteSelectEvent",value:function(t,i,e){t.stopPropagation();var s=t.target;this.setActiveEl(i,s);var n=this.getActiveIndex(e);this.setDisplayTime({minutes:n}),this.rotateHand(n,6),this.events.trigger("minuteSelected")}},{key:"isMilitaryFormat",value:function(){return"military"===this.inputEl.mtpOptions.timeFormat}},{key:"setTime",value:function(t){var i=t.split(" "),e=i[0].split(":").map(function(t){return parseInt(t,10)});this.setDisplayTime({hours:e[0],minutes:e[1]});var s=e[0];if(this.isMilitaryFormat())s=e[0]>12?e[0]-12:e[0]+12,12===s&&(s=0),24===s&&(s=12);else{var n=i[1],l=this.cachedEls.meridiem.getElementsByClassName("mtp-meridiem--active")[0],c=Array.from(this.cachedEls.meridiemSpans).find(function(t){return t.innerText===n});l.classList.remove("mtp-meridiem--active"),c.classList.add("mtp-meridiem--active")}var a=this.isMilitaryFormat()?this.cachedEls.clockMilitaryHoursLi:this.cachedEls.clockHoursLi,o=this.cachedEls.clockMinutesLi;Array.from(a).filter(function(t){return t.classList.contains("mtp-clock--active")}).forEach(function(t){return t.classList.remove("mtp-clock--active")}),a[s].classList.add("mtp-clock--active"),Array.from(o).filter(function(t){return t.classList.contains("mtp-clock--active")}).forEach(function(t){return t.classList.remove("mtp-clock--active")}),o[e[1]].classList.add("mtp-clock--active"),"hours"===this.currentStep?this.rotateHand(this.getActiveIndex(a)):this.rotateHand(this.getActiveIndex(o))}},{key:"hasSetEvents",value:function(){return this.cachedEls.wrapper.classList.contains("mtp-events-set")}},{key:"isTemplateInDOM",value:function(){return Boolean(document.getElementsByClassName("mtp-overlay")[0])}}]),t}();i.default=m},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});i.default='\n<div class="mtp-overlay" style="display:none">\n    <div class="mtp-wrapper">\n        <div class="mtp-display">\n            <span class="mtp-time-group">\n                <span class="hour-group active-group">\n                    <span class="mtp-display__hours">12</span>\n                    <span class="mtp-display__spacer">&hairsp;</span>\n                </span>\n                <span class="minute-group">\n                    <span class="mtp-display__separator">:</span>\n                    <span class="mtp-display__spacer">&hairsp;</span>\n                    <span class="mtp-display__minutes">00</span>\n                </span>\n            </span>\n            <div class="mtp-meridiem">\n                <span class="mtp-meridiem--active">a.m.</span>\n                <span>p.m.</span>\n            </div>\x3c!-- END .mtp-meridiem --\x3e\n        </div>\x3c!-- END .mtp-display --\x3e\n        <div class="mtp-picker">\n            <div class="mtp-clock">\n                <div class="mtp-clock__center"></div>\n                <div class="mtp-clock__hand"></div>\n                <ul class="mtp-clock__time mtp-clock__outer mtp-clock__hours" style="display:none">\n                    <li class="mtp-clock--active">12</li>\n                    <li>1</li>\n                    <li>2</li>\n                    <li>3</li>\n                    <li>4</li>\n                    <li>5</li>\n                    <li>6</li>\n                    <li>7</li>\n                    <li>8</li>\n                    <li>9</li>\n                    <li>10</li>\n                    <li>11</li>\n                </ul>\n                <ul class="mtp-clock__time mtp-clock__outer mtp-clock__minutes" style="display:none">\n                    <li class="mtp-clock--active">0</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>5</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>10</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>15</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>20</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>25</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>30</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>35</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>40</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>45</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>50</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>55</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                    <li>&middot;</li>\n                </ul>\n                <ul class="mtp-clock__time mtp-clock__hours-military" style="display:none">\n                    <div class="mtp-clock__hours--inner">\n                        <li class="mtp-clock--active">00</li>\n                        <li>13</li>\n                        <li>14</li>\n                        <li>15</li>\n                        <li>16</li>\n                        <li>17</li>\n                        <li>18</li>\n                        <li>19</li>\n                        <li>20</li>\n                        <li>21</li>\n                        <li>22</li>\n                        <li>23</li>\n                    </div>\n                    <div class="mtp-clock__hours">\n                        <li>12</li>\n                        <li>1</li>\n                        <li>2</li>\n                        <li>3</li>\n                        <li>4</li>\n                        <li>5</li>\n                        <li>6</li>\n                        <li>7</li>\n                        <li>8</li>\n                        <li>9</li>\n                        <li>10</li>\n                        <li>11</li>\n                    </div>\n                </ul>\n            </div>\x3c!-- END .mtp-clock --\x3e\n            <div class="mtp-actions">\n                <button type="button" class="mtp-actions__button mtp-actions__cancel">Cancel</button>\n                <button type="button" class="mtp-actions__button mtp-actions__back" style="display:none">Back</button>\n                <button type="button" class="mtp-actions__button mtp-actions__next">Next</button>\n                <button type="button" class="mtp-actions__button mtp-actions__finish" style="display:none">Done</button>\n            </div>\x3c!-- END .mtp-actions --\x3e\n        </div>\x3c!-- END .mtp-picker --\x3e\n    </div>\x3c!-- END .mtp-wrapper --\x3e\n</div>\x3c!-- END .mtp-overlay --\x3e\n'},function(t,i,e){"use strict";function s(t){if("undefined"===t||null===t)throw new TypeError("Cannot convert first argument to object");for(var i=Object(t),e=0;e<(arguments.length<=1?0:arguments.length-1);e+=1){var s=arguments.length<=e+1?void 0:arguments[e+1];if("undefined"!==s&&null!==s){s=Object(s);for(var n=Object.keys(s),l=0,c=n.length;l<c;l+=1){var a=n[l],o=Object.getOwnPropertyDescriptor(s,a);"undefined"!==o&&o.enumerable&&(i[a]=s[a])}}}return i}Object.defineProperty(i,"__esModule",{value:!0}),i.default=s},function(t,i,e){"use strict";function s(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(i,"__esModule",{value:!0});var n=function(){function t(t,i){for(var e=0;e<i.length;e++){var s=i[e];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(i,e,s){return e&&t(i.prototype,e),s&&t(i,s),i}}(),l=function(){function t(){s(this,t),this.events={}}return n(t,[{key:"on",value:function(t,i){this.events[t]||(this.events[t]=[]),this.events[t].push(i)}},{key:"off",value:function(t){this.events[t]&&(this.events[t]=[])}},{key:"trigger",value:function(t,i){this.events[t]&&this.events[t].length&&this.events[t].forEach(function(t){return t(i)})}}]),t}();i.default=l},function(t,i){},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.TimePicker=void 0;var s=e(0),n=function(t){return t&&t.__esModule?t:{default:t}}(s);i.TimePicker=n.default}]);

package.json

 {
   "name": "ajv-material-pickers-time",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Material design time picker",
@@ -5,0 +5,0 @@ "main": "./dist/TimePicker.js",

src/js/index.js

 import TimePicker from './timepicker'
+
 export { TimePicker };

src/js/template.js

@@ -5,10 +5,19 @@ const template = `
         <div class="mtp-display">
-            <span class="mtp-display__hours">12</span>:<span class="mtp-display__minutes">00</span>
-            <span class="mtp-display__meridiem">a.m.</span>
-        </div><!-- END .mtp-display -->
-        <div class="mtp-picker">
+            <span class="mtp-time-group">
+                <span class="hour-group active-group">
+                    <span class="mtp-display__hours">12</span>
+                    <span class="mtp-display__spacer">&hairsp;</span>
+                </span>
+                <span class="minute-group">
+                    <span class="mtp-display__separator">:</span>
+                    <span class="mtp-display__spacer">&hairsp;</span>
+                    <span class="mtp-display__minutes">00</span>
+                </span>
+            </span>
             <div class="mtp-meridiem">
-                <span class="mtp-clock--active">a.m.</span>
+                <span class="mtp-meridiem--active">a.m.</span>
                 <span>p.m.</span>
             </div><!-- END .mtp-meridiem -->
+        </div><!-- END .mtp-display -->
+        <div class="mtp-picker">
             <div class="mtp-clock">
@@ -15,0 +24,0 @@ <div class="mtp-clock__center"></div>

src/js/timepicker.js

@@ -8,28 +8,2 @@ import template from './template'
  * @class TimePicker
- *
- * @prop {string} template - TimePicker template
- * @prop {object} defaultOptions - Default config options
- * @prop {string} defaultOptions.timeFormat - 12 or 24 hour format ['standard', 'military']
- * @prop {bool} defaultOptions.autoNext - Auto-next on time element select
- * @prop {object} cachedEls - Cached elements in template
- * @prop {HTMLElement} cachedEls.body - document.body
- * @prop {HTMLElement} cachedEls.overlay - Overlay element ('.mtp-overlay')[0]
- * @prop {HTMLElement} cachedEls.wrapper - Wrapper element ('.mtp-wrapper')[0]
- * @prop {HTMLElement} cachedEls.picker - Selection elements wrapper ('.mtp-picker')[0]
- * @prop {HTMLElement} cachedEls.meridiem - Meridiem selection elements wrapper ('.mtp-meridiem')[0]
- * @prop {HTMLCollection} cachedEls.meridiemSpans - Meridiem selection elements meridiem('span')
- * @prop {HTMLElement} cachedEls.displayHours - Selected hour display element ('.mtp-display__hours')[0]
- * @prop {HTMLElement} cachedEls.displayMinutes - Selected minutes display element ('.mtp-display__minutes')[0]
- * @prop {HTMLElement} cachedEls.displayMerdiem - Selected meridiem display element ('.mtp-display__meridiem')[0]
- * @prop {HTMLElement} cachedEls.buttonCancel - Cancel button element ('.mtp-actions__cancel')[0]
- * @prop {HTMLElement} cachedEls.buttonBack - Back button element ('.mtp-actions__back')[0]
- * @prop {HTMLElement} cachedEls.buttonNext - Next button element ('.mtp-actions__next')[0]
- * @prop {HTMLElement} cachedEls.buttonFinish - Finish button element ('.mtp-actions__finish')[0]
- * @prop {HTMLElement} cachedEls.clockHours - Hour elements display wrapper ('.mtp-clock__hours')[0]
- * @prop {HTMLElement} cachedEls.clockMinutes - Minute elements display wrapper ('.mtp-clock__minutes')[0]
- * @prop {HTMLElement} cachedEls.clockMilitaryHours - Military hour elements display wrapper ('.mtp_clock__hours--military')[0]
- * @prop {HTMLElement} cachedEls.clockHand - Clock hand display ('.mtp-clock__hand')[0]
- * @prop {HTMLCollection} cachedEls.clockHoursLi - Hour list elements clockHours('li')
- * @prop {HTMLCollection} cachedEls.clockMinutesLi - Minute list elements clockMinutes('li')
- * @prop {HTMLCollection} cachedEls.clockMilitaryHoursLi - Military Hour li elements clockMilitaryHours('li')
  */
@@ -45,6 +19,6 @@ class TimePicker {
   /**
-     * Initialize new TimePicker instance
-     *
-     * @return {TimePicker} New TimePicker instance
-     */
+   * Initialize new TimePicker instance
+   *
+   * @return {TimePicker} New TimePicker instance
+   */
   constructor() {
@@ -77,6 +51,6 @@ this.events = new Events()
     ] = this.cachedEls.wrapper.getElementsByClassName('mtp-display__minutes')
+    // ;[
+    //   this.cachedEls.displayMeridiem,
+    // ] = this.cachedEls.wrapper.getElementsByClassName('mtp-display__meridiem')
     ;[
-      this.cachedEls.displayMeridiem,
-    ] = this.cachedEls.wrapper.getElementsByClassName('mtp-display__meridiem')
-    ;[
       this.cachedEls.buttonCancel,
@@ -93,2 +67,10 @@ ] = this.cachedEls.picker.getElementsByClassName('mtp-actions__cancel')
     ] = this.cachedEls.picker.getElementsByClassName('mtp-actions__finish')
+
+    this.cachedEls.displayGroups = {}
+    ;[
+      this.cachedEls.displayGroups.hours,
+    ] = this.cachedEls.wrapper.getElementsByClassName('hour-group')
+    ;[
+      this.cachedEls.displayGroups.minutes,
+    ] = this.cachedEls.wrapper.getElementsByClassName('minute-group')
     ;[this.cachedEls.clockHours] = this.cachedEls.picker.getElementsByClassName(
@@ -122,8 +104,8 @@ 'mtp-clock__hours',
   /**
-     * Bind event to the input element to open when `focus` event is events.triggered
-     *
-     * @param {string|HTMLElement} inputEl Selector element to be queried or existing HTMLElement
-     * @param {object} options Options to merged with defaults and set to input element object
-     * @return {void}
-     */
+   * Bind event to the input element to open when `focus` event is events.triggered
+   *
+   * @param {string|HTMLElement} inputEl Selector element to be queried or existing HTMLElement
+   * @param {object} options Options to merged with defaults and set to input element object
+   * @return {void}
+   */
   bindInput(inputEl, options = {}) {
@@ -138,8 +120,8 @@ const element =
   /**
-     * Open picker with the input provided in context without binding events
-     *
-     * @param {string|HTMLElement} inputEl Selector element to be queried or existing HTMLElement
-     * @param {object} options Options to merged with defaults and set to input element object
-     * @return {void}
-     */
+   * Open picker with the input provided in context without binding events
+   *
+   * @param {string|HTMLElement} inputEl Selector element to be queried or existing HTMLElement
+   * @param {object} options Options to merged with defaults and set to input element object
+   * @return {void}
+   */
   openOnInput(inputEl, options = {}) {
@@ -153,6 +135,6 @@ this.inputEl =
   /**
-     * Setup the template in DOM if not already
-     *
-     * @return {void}
-     */
+   * Setup the template in DOM if not already
+   *
+   * @return {void}
+   */
   setupTemplate() {
@@ -164,7 +146,17 @@ if (!this.isTemplateInDOM()) {
 
+  highlightHourDisplayGroup() {
+    this.cachedEls.displayGroups.hours.classList.add('active-group')
+    this.cachedEls.displayGroups.minutes.classList.remove('active-group')
+  }
+
+  highlightMinuteDisplayGroup() {
+    this.cachedEls.displayGroups.hours.classList.remove('active-group')
+    this.cachedEls.displayGroups.minutes.classList.add('active-group')
+  }
+
   /**
-     * Set the events on picker elements
-     *
-     * @return {void}
-     */
+   * Set the events on picker elements
+   *
+   * @return {void}
+   */
   setEvents() {
@@ -223,2 +215,10 @@ if (!this.hasSetEvents()) {
       this.cachedEls.wrapper.classList.add('mtp-events-set')
+
+      this.events.on('hoursShown', () => {
+        this.highlightHourDisplayGroup()
+      })
+
+      this.events.on('minutesShown', () => {
+        this.highlightMinuteDisplayGroup()
+      })
     }
@@ -228,6 +228,6 @@ }
   /**
-     * Show the picker in the DOM
-     *
-     * @return {void}
-     */
+   * Show the picker in the DOM
+   *
+   * @return {void}
+   */
   show() {
@@ -240,12 +240,14 @@ const isMilitaryFormat = this.isMilitaryFormat()
     this.toggleMinutesVisible()
-    this.setDisplayTime({
-      hours: isMilitaryFormat ? '00' : '12',
-      minutes: '0',
-    })
 
+    if (this.inputEl.value.length > 0) {
+      this.setTime(this.inputEl.value)
+    } else {
+      this.setDisplayTime({
+        hours: isMilitaryFormat ? '00' : '12',
+        minutes: '0',
+      })
+    }
+
     this.cachedEls.body.style.overflow = 'hidden'
-    this.cachedEls.displayMeridiem.style.display = isMilitaryFormat
-      ? 'none'
-      : 'inline'
-    this.cachedEls.meridiem.style.display = isMilitaryFormat ? 'none' : 'block'
+    this.cachedEls.meridiem.style.visibility = isMilitaryFormat ? 'none' : 'visible'
     this.cachedEls.overlay.style.display = 'block'
@@ -258,7 +260,7 @@ this.cachedEls.clockHand.style.height = isMilitaryFormat ? '90px' : '105px'
   /**
-     * Event handle for input focus
-     *
-     * @param {Event} event Event object passed from listener
-     * @return {void}
-     */
+   * Event handle for input focus
+   *
+   * @param {Event} event Event object passed from listener
+   * @return {void}
+   */
   showEvent(event) {
@@ -270,6 +272,6 @@ this.inputEl = event.target
   /**
-     * Hide the picker in the DOM
-     *
-     * @return {void}
-     */
+   * Hide the picker in the DOM
+   *
+   * @return {void}
+   */
   hide() {
@@ -285,7 +287,7 @@ this.cachedEls.overlay.style.display = 'none'
   /**
-     * Hide the picker element on the page
-     *
-     * @param {Event} event Event object passed from event listener callback
-     * @return {void}
-     */
+   * Hide the picker element on the page
+   *
+   * @param {Event} event Event object passed from event listener callback
+   * @return {void}
+   */
   hideEvent(event) {
@@ -309,8 +311,8 @@ event.stopPropagation()
   /**
-     * Reset picker state to defaults
-     *
-     * @return {void}
-     */
+   * Reset picker state to defaults
+   *
+   * @return {void}
+   */
   resetState() {
-    this.currentStep = 0
+    this.currentStep = 'hours'
     this.toggleHoursVisible(true, this.isMilitaryFormat())
@@ -322,11 +324,12 @@ this.toggleMinutesVisible()
     this.cachedEls.meridiemSpans[0].dispatchEvent(new Event('click'))
+    this.highlightHourDisplayGroup()
   }
 
   /**
-     * Set the displayed time, which will be used to fill input value on completion
-     *
-     * @param {number|string} hours: Hour display time,
-     * @param {number|string} minutes: Minute display time
-     * @return {void}
-     */
+   * Set the displayed time, which will be used to fill input value on completion
+   *
+   * @param {number|string} hours: Hour display time,
+   * @param {number|string} minutes: Minute display time
+   * @return {void}
+   */
   setDisplayTime({ hours, minutes }) {
@@ -353,15 +356,13 @@ if (hours) {
 
-    const numericHour = parseInt(hours);
-    const numericMinute = parseInt(minutes);
-
-
+    // const numericHour = parseInt(hours)
+    // const numericMinute = parseInt(minutes)
   }
 
   /**
-     * Rotate the hand element to selected time
-     *
-     * @param {number} nodeIndex Index of active element
-     * @param {number} increment Degree increment elements are on
-     * @return {void}
-     */
+   * Rotate the hand element to selected time
+   *
+   * @param {number} nodeIndex Index of active element
+   * @param {number} increment Degree increment elements are on
+   * @return {void}
+   */
   rotateHand(nodeIndex = 9, increment = 30) {
@@ -407,9 +408,11 @@ // 0 index is 180 degress behind 0 deg
   /**
-     * Toggle hour (both military and standard) clock visiblity in DOM
-     *
-     * @param {boolean} isVisible Is clock face toggled visible or hidden
-     * @param {boolean} isMilitaryFormat Is using military hour format
-     * @return {void}
-     */
+   * Toggle hour (both military and standard) clock visiblity in DOM
+   *
+   * @param {boolean} isVisible Is clock face toggled visible or hidden
+   * @param {boolean} isMilitaryFormat Is using military hour format
+   * @return {void}
+   */
   toggleHoursVisible(isVisible = false, isMilitaryFormat = false) {
+    if (isVisible) this.currentStep = 'hours'
+
     this.cachedEls.clockHours.style.display =
@@ -425,8 +428,10 @@ isVisible && !isMilitaryFormat ? 'block' : 'none'
   /**
-     * Toggle minute clock visiblity in DOM
-     *
-     * @param {boolean} isVisible Is clock face toggled visible or hidden
-     * @return {void}
-     */
+   * Toggle minute clock visiblity in DOM
+   *
+   * @param {boolean} isVisible Is clock face toggled visible or hidden
+   * @return {void}
+   */
   toggleMinutesVisible(isVisible = false) {
+    if (isVisible) this.currentStep = 'minutes'
+
     this.cachedEls.clockMinutes.style.display = isVisible ? 'block' : 'none'
@@ -445,7 +450,7 @@ this.cachedEls.buttonBack.style.display = isVisible
   /**
-     * Get the active time element index
-     *
-     * @param {HTMLCollection} timeEls Collection of time elements to find active in
-     * @return {number} Active element index
-     */
+   * Get the active time element index
+   *
+   * @param {HTMLCollection} timeEls Collection of time elements to find active in
+   * @return {number} Active element index
+   */
   getActiveIndex(timeEls) {
@@ -467,6 +472,6 @@ let activeIndex = 0
   /**
-     * Set selected time to input element
-     *
-     * @return {void}
-     */
+   * Set selected time to input element
+   *
+   * @return {void}
+   */
   timeSelected() {
@@ -477,3 +482,6 @@ const hours = this.cachedEls.displayHours.innerHTML
       ? ''
-      : this.cachedEls.displayMeridiem.innerHTML
+      : Array.from(this.cachedEls.meridiemSpans).find(i =>
+          i.classList.contains('mtp-meridiem--active'),
+        ).innerText
+
     const timeValue = `${hours}:${minutes} ${meridiem}`
@@ -484,16 +492,16 @@
     this.events.trigger('timeSelected', {
-        hours: hours,
-        minutes: minutes,
-        meridiem: meridiem,
-        value: timeValue
-    });
+      hours,
+      minutes,
+      meridiem,
+      value: timeValue,
+    })
   }
 
   /**
-     * Set active clock face element
-     *
-     * @param {Element} containerEl New active elements .parentNode
-     * @param {Element} activeEl Element to set active
-     * @return {void}
-     */
+   * Set active clock face element
+   *
+   * @param {Element} containerEl New active elements .parentNode
+   * @param {Element} activeEl Element to set active
+   * @return {void}
+   */
   setActiveEl(containerEl, activeEl) {
@@ -508,9 +516,9 @@ const activeClassName = 'mtp-clock--active'
   /**
-     * Meridiem select event handler
-     *
-     * @param {Event} event Event object passed from listener
-     * @return {void}
-     */
+   * Meridiem select event handler
+   *
+   * @param {Event} event Event object passed from listener
+   * @return {void}
+   */
   meridiemSelectEvent(event) {
-    const activeClassName = 'mtp-clock--active'
+    const activeClassName = 'mtp-meridiem--active'
     const element = event.target
@@ -525,3 +533,4 @@ const currentActive = this.cachedEls.meridiem.getElementsByClassName(
       element.classList.add(activeClassName)
-      this.cachedEls.displayMeridiem.innerHTML = value
+      // this.cachedEls.displayMeridiem.innerHTML = 'a.m.'
+      // this.cachedEls.displayMeridiem.innerHTML = value
     }
@@ -531,9 +540,9 @@ }
   /**
-     * Hour select event handler
-     *
-     * @param {Event} event Event object passed from listener
-     * @param {HTMLElement} containerEl Element containing time list elements
-     * @param {HTMLCollection} listEls Collection of list elements
-     * @return {void}
-     */
+   * Hour select event handler
+   *
+   * @param {Event} event Event object passed from listener
+   * @param {HTMLElement} containerEl Element containing time list elements
+   * @param {HTMLCollection} listEls Collection of list elements
+   * @return {void}
+   */
   hourSelectEvent(event, containerEl, listEls) {
@@ -557,9 +566,9 @@ event.stopPropagation()
   /**
-     * Hour select event handler
-     *
-     * @param {Event} event Event object passed from listener
-     * @param {HTMLElement} containerEl Element containing time list elements
-     * @param {HTMLCollection} listEls Collection of list elements
-     * @return {void}
-     */
+   * Hour select event handler
+   *
+   * @param {Event} event Event object passed from listener
+   * @param {HTMLElement} containerEl Element containing time list elements
+   * @param {HTMLCollection} listEls Collection of list elements
+   * @return {void}
+   */
   minuteSelectEvent(event, containerEl, listEls) {
@@ -580,6 +589,6 @@ event.stopPropagation()
   /**
-     * Check if picker set to military time mode
-     *
-     * @return {boolean} Is in military time mode
-     */
+   * Check if picker set to military time mode
+   *
+   * @return {boolean} Is in military time mode
+   */
   isMilitaryFormat() {
@@ -589,7 +598,63 @@ return this.inputEl.mtpOptions.timeFormat === 'military'
 
+  setTime(timeString) {
+    // this.inputEl.mtpOptions.initialValue
+    const overallComponents = timeString.split(' ')
+    const timeParts = overallComponents[0].split(':').map(i => parseInt(i, 10))
+
+    // First, set the display time (at the top) correctly.
+    this.setDisplayTime({ hours: timeParts[0], minutes: timeParts[1] })
+
+    let hoursIndex = timeParts[0]
+
+    if (this.isMilitaryFormat()) {
+      hoursIndex = timeParts[0] > 12 ? timeParts[0] - 12 : timeParts[0] + 12
+
+      if (hoursIndex === 12) hoursIndex = 0
+      if (hoursIndex === 24) hoursIndex = 12
+    } else {
+      const activeMeridianClass = 'mtp-meridiem--active'
+
+      const meridiem = overallComponents[1]
+
+      const currentMeridiem = this.cachedEls.meridiem.getElementsByClassName(
+        activeMeridianClass,
+      )[0]
+
+      const correctMeridiem = Array.from(this.cachedEls.meridiemSpans).find(
+        i => i.innerText === meridiem,
+      )
+
+      currentMeridiem.classList.remove(activeMeridianClass)
+      correctMeridiem.classList.add(activeMeridianClass)
+    }
+
+    const hoursLI = this.isMilitaryFormat()
+      ? this.cachedEls.clockMilitaryHoursLi
+      : this.cachedEls.clockHoursLi
+    const minutesLI = this.cachedEls.clockMinutesLi
+
+    // Clear existing active hours, then set the correct hours value.
+    Array.from(hoursLI)
+      .filter(i => i.classList.contains('mtp-clock--active'))
+      .forEach(i => i.classList.remove('mtp-clock--active'))
+    hoursLI[hoursIndex].classList.add('mtp-clock--active')
+
+    // Clear existing active minutes, then set the correct minute value.
+    Array.from(minutesLI)
+      .filter(i => i.classList.contains('mtp-clock--active'))
+      .forEach(i => i.classList.remove('mtp-clock--active'))
+    minutesLI[timeParts[1]].classList.add('mtp-clock--active')
+
+    if (this.currentStep === 'hours') {
+      this.rotateHand(this.getActiveIndex(hoursLI))
+    } else {
+      this.rotateHand(this.getActiveIndex(minutesLI))
+    }
+  }
+
   /**
-     * Check if picker object has already set events on picker elements
-     *
-     * @return {boolean} Has events been set on picker elements
-     */
+   * Check if picker object has already set events on picker elements
+   *
+   * @return {boolean} Has events been set on picker elements
+   */
   hasSetEvents() {
@@ -600,6 +665,6 @@ return this.cachedEls.wrapper.classList.contains('mtp-events-set')
   /**
-     * Check if template has already been appended to DOM
-     *
-     * @return {boolean} Is template in DOM
-     */
+   * Check if template has already been appended to DOM
+   *
+   * @return {boolean} Is template in DOM
+   */
   isTemplateInDOM() {
@@ -606,0 +671,0 @@ return Boolean(document.getElementsByClassName('mtp-overlay')[0])

webpack.config.babel.js

 import { resolve } from 'path'
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
-import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'
 
@@ -11,56 +10,49 @@ const { NODE_ENV = 'development' } = process.env
 const extractScss = new ExtractTextPlugin({
-    filename: 'TimePicker.css',
+  filename: 'TimePicker.css',
 })
 
 const Config = {
-    context: __dirname,
-    entry: resolve(src, 'js/index.js'),
-    output: {
-        path: dist,
-        filename: 'TimePicker.js',
-        library: 'TimePicker',
-        libraryTarget: 'umd',
-    },
-    devtool,
-    target: 'web',
+  context: __dirname,
+  entry: {
+    TimePicker: resolve(src, 'js/index.js'),
+    TimePickerGlobal: resolve(src, 'js/global-index.js'),
+  },
+  output: {
+    path: dist,
+    filename: '[name].js',
+    // library: 'TimePicker',
+    // libraryTarget: 'umd',
+  },
+  devtool,
+  target: 'web',
 
-    module: {
-        rules: [{
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: 'babel-loader',
-            options: {
-                presets: [[ 'env', { modules: false }]],
-                plugins: ['transform-class-properties'],
-            }
-        }, {
-            test: /\.scss$/,
-            exclude: /node_modules/,
-            loader: extractScss.extract({
-                use: [
-                    { loader: 'css-loader' },
-                    { loader: 'sass-loader' },
-                ]
-            })
-        }]
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: [['env', { modules: false }]],
+          plugins: ['transform-class-properties'],
+        },
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loader: extractScss.extract({
+          use: [{ loader: 'css-loader' }, { loader: 'sass-loader' }],
+        }),
+      },
+    ],
+  },
 
-    },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.scss'],
+  },
 
-    resolve: {
-        modules: ['node_modules'],
-        extensions: ['.js', '.scss'],
-    },
-
-    plugins: [
-        extractScss,
-        new BundleAnalyzerPlugin({
-            analyzerMode: 'static',
-            reportFilename: 'stats.html',
-            openAnalyzer: NODE_ENV === 'production',
-            generateStatsFile: false,
-            logLevel: 'error',
-        }),
-    ],
+  plugins: [extractScss],
 }
 
-export default Config
+export default Config

No alert changes

Improved metrics

Total package byte prevSize

522387

increased by5.11%

Number of package files

33

increased by6.45%

Lines of code

1899

increased by2.76%

No dependency changes