<main>
      <div class="keyboard-container">
        <div class="keyboard">
          <!-- 1st row -->
          <div class="row">
            <div class="group">
              <kbd data-key="27" class="key">Esc</kbd>
              <div class="mini-group">
                <kbd data-key="112" class="key"
                  >F1<i class="fas fa-home"></i
                ></kbd>
                <kbd data-key="113" class="key"
                  >F2<i class="fas fa-envelope"></i
                ></kbd>
                <kbd data-key="114" class="key"
                  >F3<i class="fas fa-search"></i
                ></kbd>
                <kbd data-key="115" class="key"
                  >F4<i class="fas fa-copy"></i
                ></kbd>
              </div>
              <div class="mini-group">
                <kbd data-key="116" class="key"
                  >F5<i class="fas fa-play"><i class="fas fa-pause"></i></i
                ></kbd>
                <kbd data-key="117" class="key"
                  >F6<i class="fas fa-stop"></i
                ></kbd>
                <kbd data-key="118" class="key"
                  >F7<i class="fas fa-fast-backward"></i
                ></kbd>
                <kbd data-key="119" class="key"
                  >F8<i class="fas fa-fast-forward"></i
                ></kbd>
              </div>
              <div class="mini-group">
                <kbd data-key="120" class="key"
                  >F9<i class="fas fa-volume-down"></i
                ></kbd>
                <kbd data-key="121" class="key"
                  >F10<i class="fas fa-volume-up"></i
                ></kbd>
                <kbd data-key="122" class="key"
                  >F11<i class="fas fa-volume-off"></i
                ></kbd>
                <kbd data-key="123" class="key"
                  >F12<i class="fas fa-sun"></i
                ></kbd>
              </div>
            </div>
            <div class="group locks">
              <p class="lock"><span class="light-key off" id="nlk">N</span></p>
              <p class="lock"><span class="light-key off" id="clk">C</span></p>
              <p class="lock"><span class="light-key off" id="slk">S</span></p>
            </div>
            <div class="right">
              <div class="group">
                <kbd data-key="-1" class="key">Print Screen</kbd>
                <kbd data-key="145" class="key">Scroll Lock</kbd>
                <kbd data-key="19" class="key">Pause Break</kbd>
              </div>
            </div>
          </div>

          <!-- 2nd row -->
          <div class="row">
            <div class="group">
              <kbd data-key="192" class="key large">~<i>`</i></kbd>
              <kbd data-key="49" class="key">!<span>1</span></kbd>
              <kbd data-key="50" class="key">@<span>2</span></kbd>
              <kbd data-key="51" class="key">#<span>3</span></kbd>
              <kbd data-key="52" class="key">$<span>4</span></kbd>
              <kbd data-key="53" class="key">%<span>5</span></kbd>
              <kbd data-key="54" class="key">^<span>6</span></kbd>
              <kbd data-key="55" class="key">&<span>7</span></kbd>
              <kbd data-key="56" class="key">*<span>8</span></kbd>
              <kbd data-key="57" class="key">(<span>9</span></kbd>
              <kbd data-key="48" class="key">)<span>0</span></kbd>
              <kbd data-key="189" class="key">-<i class="underscore">_</i></kbd>
              <kbd data-key="187" class="key">+<span>=</span></kbd>
              <kbd data-key="8" class="key backspace">Backspace</kbd>
            </div>
            <div class="group">
              <kbd data-key="45" class="key">Insert</kbd>
              <kbd data-key="36" class="key">Home</kbd>
              <kbd data-key="33" class="key">Page Up</kbd>
            </div>
            <div class="group">
              <kbd data-key="144" class="key">Num Lock</kbd>
              <kbd data-key="111" class="key">/</kbd>
              <kbd data-key="106" class="key">*</kbd>
              <kbd data-key="109" class="key">-</kbd>
            </div>
          </div>

          <!-- 3rd row -->
          <div class="row">
            <div class="group">
              <kbd data-key="9" class="key tab">Tab⭾</kbd>
              <kbd data-key="81" class="key">Q</kbd>
              <kbd data-key="87" class="key">W</kbd>
              <kbd data-key="69" class="key">E</kbd>
              <kbd data-key="82" class="key">R</kbd>
              <kbd data-key="84" class="key">T</kbd>
              <kbd data-key="89" class="key">Y</kbd>
              <kbd data-key="85" class="key">U</kbd>
              <kbd data-key="73" class="key">I</kbd>
              <kbd data-key="79" class="key">O</kbd>
              <kbd data-key="80" class="key">P</kbd>
              <kbd data-key="219" class="key">{<span>[</span></kbd>
              <kbd data-key="221" class="key">}<span>]</span></kbd>
              <kbd data-key="220" class="key">|<span>\</span></kbd>
            </div>
            <div class="group">
              <kbd data-key="46" class="key">Delete</kbd>
              <kbd data-key="35" class="key">End</kbd>
              <kbd data-key="34" class="key">Page Down</kbd>
            </div>
            <div class="group">
              <kbd data-key="103" class="key">7<span>Home</span></kbd>
              <kbd data-key="104" class="key num-special"
                >8<i class="fas fa-long-arrow-alt-up"></i
              ></kbd>
              <kbd data-key="105" class="key">9<span>PgUp</span></kbd>
              <kbd data-key="107" class="key num-large">+</kbd>
            </div>
          </div>

          <!-- 4th row -->
          <div class="row">
            <div class="group">
              <kbd data-key="20" class="key tab">CapsLock</kbd>
              <kbd data-key="65" class="key">A</kbd>
              <kbd data-key="83" class="key">S</kbd>
              <kbd data-key="68" class="key">D</kbd>
              <kbd data-key="70" class="key">F</kbd>
              <kbd data-key="71" class="key">G</kbd>
              <kbd data-key="72" class="key">H</kbd>
              <kbd data-key="74" class="key">J</kbd>
              <kbd data-key="75" class="key">K</kbd>
              <kbd data-key="76" class="key">L</kbd>
              <kbd data-key="186" class="key">:<span>;</span></kbd>
              <kbd data-key="222" class="key">"<span>'</span></kbd>
              <kbd data-key="13" class="key enter">Enter ↩</kbd>
            </div>
            <div class="empty-group"></div>
            <div class="group">
              <kbd data-key="100" class="key"
                >4<i class="fas fa-long-arrow-alt-left"></i
              ></kbd>
              <kbd data-key="101" class="key num-special">5<i>_</i></kbd>
              <kbd data-key="102" class="key"
                >6<i class="fas fa-long-arrow-alt-right"></i
              ></kbd>
              <p class="key key-empty"></p>
            </div>
          </div>

          <!-- 5th row -->
          <div class="row">
            <div class="group">
              <kbd data-key="16" class="key shift l-s"
                ><span>⇧</span>&nbsp;Shift</kbd
              >
              <kbd data-key="90" class="key">Z</kbd>
              <kbd data-key="88" class="key">X</kbd>
              <kbd data-key="67" class="key">C</kbd>
              <kbd data-key="86" class="key">V</kbd>
              <kbd data-key="66" class="key">B</kbd>
              <kbd data-key="78" class="key">N</kbd>
              <kbd data-key="77" class="key">M</kbd>
              <kbd data-key="188" class="key">&lt;<span>,</span></kbd>
              <kbd data-key="190" class="key">&gt;<span>.</span></kbd>
              <kbd data-key="191" class="key">?<span>/</span></kbd>
              <kbd data-key="16" class="key shift r-s"
                ><span>⇧</span>&nbsp;Shift</kbd
              >
            </div>
            <div class="group">
              <p class="key key-empty"></p>
              <kbd data-key="38" class="key"
                ><i class="fas fa-arrow-up"></i
              ></kbd>
              <p class="key key-empty"></p>
            </div>
            <div class="group">
              <kbd data-key="97" class="key">1<span>End</span></kbd>
              <kbd data-key="98" class="key"
                >2<i class="fas fa-long-arrow-alt-down"></i
              ></kbd>
              <kbd data-key="99" class="key">3<span>PdDn</span></kbd>
              <kbd data-key="13" class="key num-large">Enter</kbd>
            </div>
          </div>

          <!-- 6th row -->
          <div class="row">
            <div class="group">
              <kbd data-key="17" class="key">Ctrl</kbd>
              <kbd data-key="91" class="key"
                ><i class="fab fa-windows"></i
              ></kbd>
              <kbd data-key="18" class="key">Alt</kbd>
              <kbd data-key="32" class="key spacebar">TechGeek</kbd>
              <kbd data-key="18" class="key">Alt</kbd>
              <kbd data-key="-2" class="key">Fn</kbd>
              <kbd data-key="93" class="key c-menu"
                ><i class="fas fa-bars"></i
              ></kbd>
              <kbd data-key="17" class="key">Ctrl</kbd>
            </div>
            <div class="group">
              <kbd data-key="37" class="key"
                ><i class="fas fa-arrow-left"></i
              ></kbd>
              <kbd data-key="40" class="key"
                ><i class="fas fa-arrow-down"></i
              ></kbd>
              <kbd data-key="39" class="key"
                ><i class="fas fa-arrow-right"></i
              ></kbd>
            </div>
            <div class="group">
              <kbd data-key="96" class="key num-ins">0<span>Ins</span></kbd>
              <kbd data-key="110" class="key">.<span>Del</span></kbd>
              <p class="key key-empty"></p>
            </div>
          </div>
        </div>
      </div>

      <!-- audio -->
      <audio id="keyAudio">
        <source src="https://raw.githubusercontent.com/iamsainikhil/keyboard/master/assets/button-click.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
      </audio>

      <div class="color-themes">
        <h2 class="title">Keyboard Theme</h2>
        <p class="sub-title">
          Select any default theme below or generate a custom theme to switch
          colors
        </p>
        <div class="button-wrapper">
          <button class="button" id="t-0">Default</button>
          <button class="button" id="t-1">Light</button>
          <button class="button" id="t-2">Dark</button>
          <button class="button" id="t-3">Rose Gold</button>
          <button class="button" id="t-4">Custom</button>
        </div>
        <div class="custom-theme" id="c-t">
          <h3 class="title">
            Set below 4 properties to develop your custom theme
          </h3>
          <div class="cp-wrapper">
            <button class="button" id="kbc">Keyboard Background Color</button>
            <button class="button" id="keybc">Key Background Color</button>
            <button class="button" id="kc">Key Color</button>
            <button class="button" id="lkc">NCS Key Color</button>
          </div>
        </div>
      </div>

      <div class="notes-wrapper">
        <h2 class="title">Information</h2>
        <button class="button" id="info">Learn More</button>
      </div>

      <div class="notes">
        <p>
          <b>Fun Fact:</b> Press any key on this virtual keyboard or on your
          keyboard to hear keypress sound. Try playing with few keys like Caps
          Lock, Num Lock, Scroll Lock, and F12 and moreover there won't be any
          keypress sound for these keys due to let users know about their unique
          functionality.
        </p>
        <p>
          <b>Note:</b> You will experience that whenever a key is pressed, there
          is animation that makes key is pressed and when you press any other
          key or the same key, then that key is back to normal state. This is
          normal behavior in this virtual keyboard context. However, in reality
          key will popped in-out very quickly.
        </p>
      </div>
    </main>

    <footer class="footer">
      <p class="tech-love">Made with 🖤 using JavaScript</p>
      <p>
          &copy;2018 <span id="year"></span>
          <a
            href="https://iamsainikhil.github.io"
            target="_blank"
            id="footer-name"
            >Sai&nbsp;Nikhil</a
          >
        </p>
    </footer>

<script>
! function(t, e){"object"==typeof exports && "object"==typeof module ? module.exports=e() : "function"==typeof define && define.amd ? define([], e) : "object"==typeof exports ? exports.Pickr=e() : t.Pickr=e()}(window, function(){return function(t){var e={}; function n(r){if (e[r]) return e[r].exports; var o=e[r]={i: r, l: !1, exports:{}}; return t[r].call(o.exports, o, o.exports, n), o.l=!0, o.exports}return n.m=t, n.c=e, n.d=function(t, e, r){n.o(t, e) || Object.defineProperty(t, e,{enumerable: !0, get: r})}, n.r=function(t){"undefined" !=typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag,{value: "Module"}), Object.defineProperty(t, "__esModule",{value: !0})}, n.t=function(t, e){if (1 & e && (t=n(t)), 8 & e) return t; if (4 & e && "object"==typeof t && t && t.__esModule) return t; var r=Object.create(null); if (n.r(r), Object.defineProperty(r, "default",{enumerable: !0, value: t}), 2 & e && "string" !=typeof t) for (var o in t) n.d(r, o, function(e){return t[e]}.bind(null, o)); return r}, n.n=function(t){var e=t && t.__esModule ? function(){return t.default}: function(){return t}; return n.d(e, "a", e), e}, n.o=function(t, e){return Object.prototype.hasOwnProperty.call(t, e)}, n.p="dist/", n(n.s=7)}([function(t, e, n){"use strict"; Object.defineProperty(e, "__esModule",{value: !0}); var r=Object.assign || function(t){for (var e=1; e < arguments.length; e++){var n=arguments[e]; for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (t[r]=n[r])}return t}; e.createElementFromString=s, e.removeAttribute=c, e.createFromTemplate=function(t){return function t(e){var n=arguments.length > 1 && void 0 !==arguments[1] ? arguments[1] :{}; var r=c(e, "data-con"); var o=c(e, "data-key"); o && (n[o]=e); var i=Array.from(e.children); var a=r ? n[r]={}: n; var s=!0; var u=!1; var l=void 0; try{for (var p, d=i[Symbol.iterator](); !(s=(p=d.next()).done); s=!0){var h=p.value, v=c(h, "data-arr"); v ? (a[v] || (a[v]=[])).push(h) : t(h, a)}}catch (t){u=!0, l=t}finally{try{!s && d.return && d.return()}finally{if (u) throw l}}return n}(s(t))}, e.eventPath=function(t){var e=t.path || t.composedPath && t.composedPath(); if (e) return e; var n=t.target.parentElement; e=[t.target, n]; for (; n=n.parentElement;) e.push(n); return e.push(document, window), e}, e.bindClassUnderscoreFunctions=function(t){var e=Object.getOwnPropertyNames(Object.getPrototypeOf(t)), n=!0, r=!1, o=void 0; try{for (var i, a=e[Symbol.iterator](); !(n=(i=a.next()).done); n=!0){var s=i.value; "_"===s.charAt(0) && "function"==typeof t[s] && (t[s]=t[s].bind(t))}}catch (t){r=!0, o=t}finally{try{!n && a.return && a.return()}finally{if (r) throw o}}}, e.adjustableInputNumbers=function(t){var e=!(arguments.length > 1 && void 0 !==arguments[1]) || arguments[1], n=function(t){return t >="0" && t <="9" || "-"===t || "."===t}; function r(r){for (var o=t.value, i=t.selectionStart, a=i, s="", c=i - 1; c > 0 && n(o[c]); c--) s=o[c] + s, a--; for (var u=i; u < o.length && n(o[u]); u++) s +=o[u]; if (s.length > 0 && !isNaN(s) && isFinite(s)){var l=r.deltaY < 0 ? 1 : -1, p=r.ctrlKey ? 5 * l : l, d=Number(s) + p; !e && d < 0 && (d=0); var h=o.substr(0, a) + d + o.substring(a + s.length, o.length), v=a + String(d).length; t.value=h, t.focus(), t.setSelectionRange(v, v)}r.preventDefault(), t.dispatchEvent(new Event("input"))}o(t, "focus", function(){return o(window, "wheel", r)}), o(t, "blur", function(){return i(window, "wheel", r)})}; e.once=function(t, e, n, r){return o(t, e, function t(){n.apply(this, arguments), this.removeEventListener(e, t)}, r)}; var o=e.on=a.bind(null, "addEventListener"), i=e.off=a.bind(null, "removeEventListener"); function a(t, e, n, o){var i=arguments.length > 4 && void 0 !==arguments[4] ? arguments[4] :{}; e instanceof HTMLCollection || e instanceof NodeList ? e=Array.from(e) : Array.isArray(e) || (e=[e]), Array.isArray(n) || (n=[n]); var a=!0, s=!1, c=void 0; try{for (var u, l=e[Symbol.iterator](); !(a=(u=l.next()).done); a=!0){var p=u.value, d=!0, h=!1, v=void 0; try{for (var f, y=n[Symbol.iterator](); !(d=(f=y.next()).done); d=!0){var g=f.value; p[t](g, o, r({capture: !1}, i))}}catch (t){h=!0, v=t}finally{try{!d && y.return && y.return()}finally{if (h) throw v}}}}catch (t){s=!0, c=t}finally{try{!a && l.return && l.return()}finally{if (s) throw c}}return Array.prototype.slice.call(arguments, 1)}function s(t){var e=document.createElement("template"); return e.innerHTML=t.trim(), e.content.firstChild}function c(t, e){var n=t.getAttribute(e); return t.removeAttribute(e), n}}, function(t, e, n){"use strict"; Object.defineProperty(e, "__esModule",{value: !0}); var r=function(){return function(t, e){if (Array.isArray(t)) return t; if (Symbol.iterator in Object(t)) return function(t, e){var n=[], r=!0, o=!1, i=void 0; try{for (var a, s=t[Symbol.iterator](); !(r=(a=s.next()).done) && (n.push(a.value), !e || n.length !==e); r=!0);}catch (t){o=!0, i=t}finally{try{!r && s.return && s.return()}finally{if (o) throw i}}return n}(t, e); throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(); function o(t){if (Array.isArray(t)){for (var e=0, n=Array(t.length); e < t.length; e++) n[e]=t[e]; return n}return Array.from(t)}e.hsvToRgb=c, e.hsvToHex=function(t, e, n){return c(t, e, n).map(function(t){return t.toString(16).padStart(2, "0")})}, e.hsvToCmyk=function(t, e, n){var r=c(t, e, n), o=r[0] / 255, s=r[1] / 255, u=r[2] / 255, l=void 0, p=void 0, d=void 0; return l=a(1 - o, 1 - s, 1 - u), p=1===l ? 0 : (1 - s - l) / (1 - l), d=1===l ? 0 : (1 - u - l) / (1 - l), [i(100 * (1===l ? 0 : (1 - o - l) / (1 - l))), i(100 * p), i(100 * d), i(100 * l)]}, e.hsvToHsl=function(t, e, n){var r=(2 - (e /=100)) * (n /=100) / 2; 0 !==r && (e=1===r ? 0 : r < .5 ? e * n / (2 * r) : e * n / (2 - 2 * r)); return [i(t), i(100 * e), i(100 * r)]}, e.parseToHSV=function(t){var e={cmyk: /^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i, rgba: /^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i, hsla: /^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i, hsva: /^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i, hex: /^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i}, n=function(t){return t.map(function(t){return /^(|\d+)\.\d+|\d+$/.test(t) ? Number(t) : void 0})}, i=void 0; for (var a in e) if (i=e[a].exec(t)) switch (a){case "cmyk": var s=n(i), c=r(s, 5), h=c[1], v=c[2], f=c[3], y=c[4]; return h > 100 || v > 100 || f > 100 || y > 100 ? null : [].concat(o(l(h, v, f, y)), [1]); case "rgba": var g=n(i), m=r(g, 6), b=m[2], w=m[3], k=m[4], S=m[5], A=void 0===S ? 1 : S; return b > 255 || w > 255 || k > 255 || A < 0 || A > 1 ? null : [].concat(o(u(b, w, k)), [A]); case "hex": var _=function(t, e){return [t.substring(0, e), t.substring(e, t.length)]}, C=i, O=r(C, 2), j=O[1]; 3===j.length ? j +="F" : 6===j.length && (j +="FF"); var H=void 0; if (4===j.length){var P=_(j, 3).map(function(t){return t + t}), x=r(P, 2); j=x[0], H=x[1]}else if (8===j.length){var M=_(j, 6), E=r(M, 2); j=E[0], H=E[1]}return H=parseInt(H, 16) / 255, [].concat(o(d(j)), [H]); case "hsla": var T=n(i), B=r(T, 6), L=B[2], R=B[3], D=B[4], F=B[5], N=void 0===F ? 1 : F; return L > 360 || R > 100 || D > 100 || N < 0 || N > 1 ? null : [].concat(o(p(L, R, D)), [N]); case "hsva": var V=n(i), X=r(V, 6), Y=X[2], I=X[3], K=X[4], W=X[5], z=void 0===W ? 1 : W; return Y > 360 || I > 100 || K > 100 || z < 0 || z > 1 ? null : [Y, I, K, z]}return null}; var i=Math.round, a=Math.min, s=Math.max; function c(t, e, n){t=t / 360 * 6, e /=100, n /=100; var r=Math.floor(t), o=t - r, a=n * (1 - e), s=n * (1 - o * e), c=n * (1 - (1 - o) * e), u=r % 6, l=[c, n, n, s, a, a][u], p=[a, a, c, n, n, s][u]; return [i(255 * [n, s, a, a, c, n][u]), i(255 * l), i(255 * p)]}function u(t, e, n){var r, o=void 0, c=void 0, u=a(t /=255, e /=255, n /=255), l=s(t, e, n), p=l - u; if (r=l, 0===p) o=c=0; else{c=p / l; var d=((l - t) / 6 + p / 2) / p, h=((l - e) / 6 + p / 2) / p, v=((l - n) / 6 + p / 2) / p; t===l ? o=v - h : e===l ? o=1 / 3 + d - v : n===l && (o=2 / 3 + h - d), o < 0 ? o +=1 : o > 1 && (o -=1)}return [i(360 * o), i(100 * c), i(100 * r)]}function l(t, e, n, r){e /=100, n /=100; var s=1 - a(1, (t /=100) * (1 - (r /=100)) + r), c=1 - a(1, e * (1 - r) + r), l=1 - a(1, n * (1 - r) + r); return s=i(255 * s), c=i(255 * c), l=i(255 * l), [].concat(o(u(s, c, l)))}function p(t, e, n){return e /=100, [t, i(2 * (e *=(n /=100) < .5 ? n : 1 - n) / (n + e) * 100), i(100 * (n + e))]}function d(t){var e=t.match(/.{2}/g).map(function(t){return parseInt(t, 16)}), n=r(e, 3); return u(n[0], n[1], n[2])}}, function(t, e, n){"use strict"; Object.defineProperty(e, "__esModule",{value: !0}), e.default=function(){var t=arguments.length > 0 && void 0 !==arguments[0] ? arguments[0] :{}, e={options: Object.assign({onchange: function(){return 0}, className: ""}, t), _ontap: function(t){var n=e.options; n.elements.forEach(function(e){return e.classList[t.target===e ? "add" : "remove"](n.className)}), n.onchange()}, destroy: function(){r.off(e.options.elements, "click", this._ontap)}}; return r.on(e.options.elements, "click", e._ontap), e}; var r=function(t){if (t && t.__esModule) return t; var e={}; if (null !=t) for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n]=t[n]); return e.default=t, e}(n(0))}, function(t, e, n){"use strict"; Object.defineProperty(e, "__esModule",{value: !0}), e.default=function(t){var e={options: Object.assign({lockX: !1, lockY: !1, onchange: function(){return 0}}, t), _tapstart: function(t){r.on(document, ["mouseup", "touchend", "touchcancel"], e._tapstop), r.on(document, ["mousemove", "touchmove"], e._tapmove), e.trigger(t), t.preventDefault()}, _tapmove: function(t){var n=e.options, r=e.cache, o=n.element, i=e.wrapperRect, a=0, s=0; if (t){var c=t && t.touches && t.touches[0]; a=t ? (c || t).clientX : 0, s=t ? (c || t).clientY : 0, a < i.left ? a=i.left : a > i.left + i.width && (a=i.left + i.width), s < i.top ? s=i.top : s > i.top + i.height && (s=i.top + i.height), a -=i.left, s -=i.top}else r && (a=r.x, s=r.y); n.lockX || (o.style.left=a - o.offsetWidth / 2 + "px"), n.lockY || (o.style.top=s - o.offsetHeight / 2 + "px"), e.cache={x: a, y: s}, n.onchange(a, s)}, _tapstop: function(){r.off(document, ["mouseup", "touchend", "touchcancel"], e._tapstop), r.off(document, ["mousemove", "touchmove"], e._tapmove)}, trigger: function(t){e.wrapperRect=e.options.wrapper.getBoundingClientRect(), e._tapmove(t)}, update: function(){var t=arguments.length > 0 && void 0 !==arguments[0] ? arguments[0] : 0, n=arguments.length > 1 && void 0 !==arguments[1] ? arguments[1] : 0; e._tapmove(new MouseEvent("mousemove",{clientX: e.wrapperRect.left + t, clientY: e.wrapperRect.top + n}))}, destroy: function(){var t=e.options, n=e._tapstart; r.off([t.wrapper, t.element], "mousedown", n), r.off([t.wrapper, t.element], "touchstart", n,{passive: !1})}}; e.wrapperRect=e.options.wrapper.getBoundingClientRect(); var n=e.options, o=e._tapstart; return r.on([n.wrapper, n.element], "mousedown", o), r.on([n.wrapper, n.element], "touchstart", o,{passive: !1}), e}; var r=function(t){if (t && t.__esModule) return t; var e={}; if (null !=t) for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n]=t[n]); return e.default=t, e}(n(0))}, function(t, e, n){"use strict"; Object.defineProperty(e, "__esModule",{value: !0}), e.HSVaColor=void 0; var r=function(){function t(t, e){for (var n=0; n < e.length; n++){var r=e[n]; r.enumerable=r.enumerable || !1, r.configurable=!0, "value" in r && (r.writable=!0), Object.defineProperty(t, r.key, r)}}return function(e, n, r){return n && t(e.prototype, n), r && t(e, r), e}}(), o=function(t){if (t && t.__esModule) return t; var e={}; if (null !=t) for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n]=t[n]); return e.default=t, e}(n(1)); e.HSVaColor=function(){function t(){var e=arguments.length > 0 && void 0 !==arguments[0] ? arguments[0] : 0, n=arguments.length > 1 && void 0 !==arguments[1] ? arguments[1] : 0, r=arguments.length > 2 && void 0 !==arguments[2] ? arguments[2] : 0, o=arguments.length > 3 && void 0 !==arguments[3] ? arguments[3] : 1; ! function(t, e){if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")}(this, t), this.h=e, this.s=n, this.v=r, this.a=o}return r(t, [{key: "toHSVA", value: function(){var t=[this.h, this.s, this.v, this.a]; return t.toString=function(){return "hsva(" + this[0] + ", " + this[1] + "%, " + this[2] + "%, " + this[3] + ")"}, t}},{key: "toHSLA", value: function(){var t=o.hsvToHsl(this.h, this.s, this.v).concat([this.a]); return t.toString=function(){return "hsla(" + this[0] + ", " + this[1] + "%, " + this[2] + "%, " + this[3] + ")"}, t}},{key: "toRGBA", value: function(){var t=o.hsvToRgb(this.h, this.s, this.v).concat([this.a]); return t.toString=function(){return "rgba(" + this[0] + ", " + this[1] + ", " + this[2] + ", " + this[3] + ")"}, t}},{key: "toHEX", value: function(){var t=o.hsvToHex(this.h, this.s, this.v).concat([this.a]); return t.toString=function(){var t=1===this[3] ? "" : Number((255 * this[3]).toFixed(0)).toString(16).toUpperCase().padStart(2, "0"); return "#" + (this.slice(0, 3).join("").toUpperCase() + t)}, t}},{key: "toCMYK", value: function(){var t=o.hsvToCmyk(this.h, this.s, this.v); return t.toString=function(){return "cmyk(" + this[0] + "%, " + this[1] + "%, " + this[2] + "%, " + this[3] + "%)"}, t}},{key: "clone", value: function(){return new t(this.h, this.s, this.v, this.a)}}]), t}()}, , function(t, e, n){}, function(t, e, n){"use strict"; var r=function(){function t(t, e){for (var n=0; n < e.length; n++){var r=e[n]; r.enumerable=r.enumerable || !1, r.configurable=!0, "value" in r && (r.writable=!0), Object.defineProperty(t, r.key, r)}}return function(e, n, r){return n && t(e.prototype, n), r && t(e, r), e}}(); n(6); var o=l(n(0)), i=l(n(1)), a=n(4), s=u(n(3)), c=u(n(2)); function u(t){return t && t.__esModule ? t :{default: t}}function l(t){if (t && t.__esModule) return t; var e={}; if (null !=t) for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n]=t[n]); return e.default=t, e}function p(t){if (Array.isArray(t)){for (var e=0, n=Array(t.length); e < t.length; e++) n[e]=t[e]; return n}return Array.from(t)}var d=function(){function t(e){! function(t, e){if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")}(this, t), this.options=Object.assign({useAsButton: !1, disabled: !1, comparison: !0, components:{interaction:{}}, strings:{}, default: "fff", position: "middle", adjustableNumbers: !0, showAlways: !1, appendToBody: !1, closeWithKey: "Escape", onChange: function(){return 0}, onSave: function(){return 0}}, e), this.options.components.interaction || (this.options.components.interaction={}), o.bindClassUnderscoreFunctions(this), this.initializingActive=!0, this.inputActive=!1, this.color=new a.HSVaColor, this.lastColor=new a.HSVaColor, this._buildRoot(), this._rePositioningPicker(), this._buildComponents(), this._bindEvents(), this.options.comparison || (this.root.button.style.transition="none", this.options.useAsButton || (this.root.preview.lastColor.style.transition="none")), this.setColor(this.options.default), this.initializingActive=!1}return r(t, [{key: "_buildRoot", value: function(){var t=this.options; "string"==typeof t.el && (t.el=document.querySelector(t.el)); var e=function(t){var e=t.components, n=t.strings, r=t.useAsButton, i=function(t){return t ? "" : 'style="display:none" hidden'}, a=o.createFromTemplate('\n <div data-key="root" class="pickr">\n \n ' + (r ? "" : '<div data-key="button" class="pcr-button"></div>') + '\n\n <div data-key="app" class="pcr-app">\n <div class="pcr-selection">\n <div data-con="preview" class="pcr-color-preview" ' + i(e.preview) + '>\n <div data-key="lastColor" class="pcr-last-color"></div>\n <div data-key="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div data-con="palette" class="pcr-color-palette">\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="palette" class="pcr-palette"></div>\n </div>\n\n <div data-con="hueSlider" class="pcr-color-chooser" ' + i(e.hue) + '>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-hue pcr-slider"></div>\n </div>\n\n <div data-con="opacitySlider" class="pcr-color-opacity" ' + i(e.opacity) + '>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n\n <div data-con="interaction" class="pcr-interaction" ' + i(e.interaction) + '>\n <input data-key="result" class="pcr-result" type="text" spellcheck="false" ' + i(e.interaction.input) + '>\n\n <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ' + i(e.interaction.hex) + '>\n <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ' + i(e.interaction.rgba) + '>\n <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ' + i(e.interaction.hsla) + '>\n <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ' + i(e.interaction.hsva) + '>\n <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ' + i(e.interaction.cmyk) + '>\n\n <input data-key="save" class="pcr-save" value="' + (n.save || "Save") + '" type="button" ' + i(e.interaction.save) + '>\n <input data-key="clear" class="pcr-clear" value="' + (n.clear || "Clear") + '" type="button" ' + i(e.interaction.clear) + ">\n </div>\n </div>\n </div>\n "); return a.interaction.options.find(function(t){return !t.hidden && !t.classList.add("active")}), a.interaction.type=function(){return a.interaction.options.find(function(t){return t.classList.contains("active")})}, a}(t); this.root=e, t.useAsButton ? (t.appendToBody=!0, this.root.button=t.el) : t.el.parentElement.replaceChild(e.root, t.el), t.appendToBody && document.body.appendChild(e.app), t.disabled && this.disable(), t.showAlways ? e.app.classList.add("visible") : this.hide()}},{key: "_buildComponents", value: function(){var t=this, e=this.options.components, n={palette: new s.default({element: t.root.palette.picker, wrapper: t.root.palette.palette, onchange: function(e, n){var r=t.color, o=t.root, i=t.options; r.s=Math.round(e / this.wrapper.offsetWidth * 100), r.v=Math.round(100 - n / this.wrapper.offsetHeight * 100); var a=r.toRGBA().toString(); this.element.style.background=a, this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, " + r.a + "), transparent), \n linear-gradient(to left, hsla(" + r.h + ", 100%, 50%, " + r.a + "), rgba(255, 255, 255, " + r.a + "))\n ", i.comparison || (o.button.style.background=a, i.useAsButton || (o.preview.lastColor.style.background=a)), o.preview.currentColor.style.background=a, t.inputActive || t._updateOutput(), o.button.classList.remove("clear")}}), hueSlider: new s.default({lockX: !0, element: t.root.hueSlider.picker, wrapper: t.root.hueSlider.slider, onchange: function(r, o){e.hue && (t.color.h=Math.round(o / this.wrapper.offsetHeight * 360), this.element.style.backgroundColor="hsl(" + t.color.h + ", 100%, 50%)", n.palette.trigger())}}), opacitySlider: new s.default({lockX: !0, element: t.root.opacitySlider.picker, wrapper: t.root.opacitySlider.slider, onchange: function(n, r){e.opacity && (t.color.a=Math.ceil(r / this.wrapper.offsetHeight * 100) / 100, this.element.style.background="rgba(0, 0, 0, " + t.color.a + ")", t.components.palette.trigger())}}), selectable: new c.default({elements: t.root.interaction.options, className: "active", onchange: function(){t.inputActive=!1, t.components.palette.trigger()}})}; this.components=n}},{key: "_bindEvents", value: function(){var t=this, e=this.root, n=this.options, r=[o.on(e.interaction.clear, "click", function(){n.useAsButton || (e.button.style.background="rgba(255, 255, 255, 0.4)"), e.button.classList.add("clear"), n.showAlways || t.hide(), n.onSave(null, t)}), o.on(e.preview.lastColor, "click", function(){return t.setHSVA.apply(t, p(t.lastColor.toHSVA()))}), o.on(e.interaction.save, "click", function(){!t._saveColor() && !n.showAlways && t.hide()}), o.on(e.interaction.result, ["input", "focus"], function(e){t.setColor(e.target.value, !0), t.inputActive=!0}), o.on([e.palette.palette, e.palette.picker, e.hueSlider.slider, e.hueSlider.picker, e.opacitySlider.slider, e.opacitySlider.picker], "mousedown", function(){return t.inputActive=!1}), o.on(window, "resize", this._rePositioningPicker)]; if (!n.showAlways){r.push(o.on(e.button, "click", function(){return t.isOpen() ? t.hide() : t.show()})); var i=n.closeWithKey; r.push(o.on(document, "keyup", function(e){return t.isOpen() && (e.key===i || e.code===i) && t.hide()})), r.push(o.on(document, "mousedown", function(n){o.eventPath(n).includes(e.app) || o.once(document, "mouseup", function(){return t.hide()})}))}n.adjustableNumbers && o.adjustableInputNumbers(e.interaction.result, !1), this.eventBindings=r}},{key: "_rePositioningPicker", value: function(){var t=this.root, e=this.root.app; if (this.options.appendToBody){var n=t.button.getBoundingClientRect(); e.style.position="fixed", e.style.marginLeft=n.left + "px", e.style.marginTop=n.top + "px"}var r=t.button.getBoundingClientRect(), o=e.getBoundingClientRect(), i=e.style; function a(t){switch (t){case "left": return -o.width + r.width; case "middle": return -o.width / 2 + r.width / 2; case "right": return 0}}o.bottom > window.innerHeight ? i.top=-o.height - 5 + "px" : r.bottom + o.height < window.innerHeight && (i.top=r.height + 5 + "px"); var s=parseInt(getComputedStyle(e).left, 10), c=a(this.options.position); o.left - s + c < 0 ? c=a("right") : o.left - s - c > window.innerWidth && (c=a("left")), i.left=c + "px"}},{key: "_updateOutput", value: function(){var t=this;!this.inputActive && this.root.interaction.type() && (this.root.interaction.result.value=function(){var e="to" + t.root.interaction.type().getAttribute("data-type"); return "function"==typeof t.color[e] ? t.color[e]().toString() : ""}()), this.initializingActive || this.options.onChange(this.color, this)}},{key: "_saveColor", value: function(){var t=this.root, e=t.preview, n=t.button, r=this.color.toRGBA().toString(); e.lastColor.style.background=r, this.options.useAsButton || (n.style.background=r), n.classList.remove("clear"), this.lastColor=this.color.clone(), this.initializingActive || this.options.onSave(this.color, this)}},{key: "destroy", value: function(){var t=this; this.eventBindings.forEach(function(t){return o.off.apply(o, p(t))}), Object.keys(this.components).forEach(function(e){return t.components[e].destroy()})}},{key: "destroyAndRemove", value: function(){this.destroy(); var t=this.root.root; t.parentElement.removeChild(t)}},{key: "hide", value: function(){return this.root.app.classList.remove("visible"), this}},{key: "show", value: function(){if (!this.options.disabled) return this.root.app.classList.add("visible"), this._rePositioningPicker(), this}},{key: "isOpen", value: function(){return this.root.app.classList.contains("visible")}},{key: "setHSVA", value: function(){var t=arguments.length > 0 && void 0 !==arguments[0] ? arguments[0] : 360, e=arguments.length > 1 && void 0 !==arguments[1] ? arguments[1] : 0, n=arguments.length > 2 && void 0 !==arguments[2] ? arguments[2] : 0, r=arguments.length > 3 && void 0 !==arguments[3] ? arguments[3] : 1, o=arguments.length > 4 && void 0 !==arguments[4] && arguments[4]; if (t < 0 || t > 360 || e < 0 || e > 100 || n < 0 || n > 100 || r < 0 || r > 1) return !1; var i=this.components, s=i.hueSlider, c=i.opacitySlider, u=i.palette, l=s.options.wrapper.offsetHeight * (t / 360); s.update(0, l); var p=c.options.wrapper.offsetHeight * r; c.update(0, p); var d=u.options.wrapper, h=d.offsetWidth * (e / 100), v=d.offsetHeight * (1 - n / 100); return u.update(h, v), this.color=new a.HSVaColor(t, e, n, r), o || this._saveColor(), !0}},{key: "setColor", value: function(t){var e=arguments.length > 1 && void 0 !==arguments[1] && arguments[1], n=i.parseToHSV(t); if (n) return this.setHSVA.apply(this, p(n).concat([e]))}},{key: "getColor", value: function(){return this.color}},{key: "getRoot", value: function(){return this.root}},{key: "disable", value: function(){return this.options.disabled=!0, this.root.button.classList.add("disabled"), this}},{key: "enable", value: function(){return this.options.disabled=!1, this.root.button.classList.remove("disabled"), this}}]), t}(); d.utils={once: o.once, on: o.on, off: o.off, eventPath: o.eventPath, createElementFromString: o.createElementFromString, removeAttribute: o.removeAttribute, createFromTemplate: o.createFromTemplate}, d.create=function(t){return new d(t)}, d.version="0.2.0", t.exports=d}])});
</script>