';
}
// keyboard type is "numpad": end
@@ -464,10 +469,10 @@
// only keyboard type is "all": begin
if (keyboardType === kioskBoardTypes.All) {
var numberKeysContent = '';
- for (var key4 in kioskBoardAllKeysObject) {
- if (Object.prototype.hasOwnProperty.call(kioskBoardAllKeysObject, key4)) {
+ for (var key4 in kioskBoardAllKeysNumbersObject) {
+ if (Object.prototype.hasOwnProperty.call(kioskBoardAllKeysNumbersObject, key4)) {
var index4 = key4;
- var value4 = kioskBoardAllKeysObject[key4];
+ var value4 = kioskBoardAllKeysNumbersObject[key4];
var eachKey4 = '' + value4.toString() + '';
numberKeysContent += eachKey4;
}
@@ -493,7 +498,7 @@
// dynamic keys group: end
// bottom keys group: begin
- keysRowElements += '
';
// bottom keys group: end
// add if special character keys allowed: begin
@@ -533,8 +538,9 @@
// create the keyboard: begin
var theTheme = typeof opt.theme === 'string' && opt.theme.length > 0 ? opt.theme.trim() : 'light';
+ var kioskBoardVirtualKeyboardId = 'KioskBoard-VirtualKeyboard';
var kioskBoardVirtualKeyboard = window.document.createElement('div');
- kioskBoardVirtualKeyboard.id = 'KioskBoard-VirtualKeyboard';
+ kioskBoardVirtualKeyboard.id = kioskBoardVirtualKeyboardId;
kioskBoardVirtualKeyboard.classList.add('kioskboard-theme-' + theTheme);
kioskBoardVirtualKeyboard.classList.add('kioskboard-placement-' + keyboardPlacement);
kioskBoardVirtualKeyboard.classList.add(cssAnimationsClass);
@@ -546,6 +552,25 @@
kioskBoardVirtualKeyboard.appendChild(allKeysElement);
// create the keyboard: end
+ // remove the keyboard: begin
+ var removeKeyboard = function () {
+ // add remove class
+ var keyboardElm = window.document.getElementById(kioskBoardVirtualKeyboardId);
+ if (keyboardElm) {
+ keyboardElm.classList.add(cssAnimationsStyle + '-remove');
+
+ // remove after the animation has been ended
+ var removeTimeout = setTimeout(function () {
+ if (keyboardElm.parentNode !== null) {
+ keyboardElm.parentNode.removeChild(keyboardElm); // remove keyboard
+ window.document.body.classList.remove('kioskboard-body-padding'); // remove body padding class
+ }
+ clearTimeout(removeTimeout);
+ }, cssAnimationsDuration);
+ }
+ };
+ // remove the keyboard: end
+
// event for input element trigger change: begin
var changeEvent = new Event('change', {
'bubbles': true,
@@ -592,7 +617,7 @@
// keys click listeners: begin
var keysClickListeners = function (input) {
// each key click listener: begin
- var eachKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key');
+ var eachKeyElm = window.document.querySelectorAll('.kioskboard-key');
if (eachKeyElm && eachKeyElm.length > 0) {
for (var ekIndex = 0; ekIndex < eachKeyElm.length; ekIndex++) {
var keyElm = eachKeyElm[ekIndex];
@@ -644,7 +669,7 @@
// each key click listener: end
// capslock key click listener: begin
- var capsLockKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0];
+ var capsLockKeyElm = window.document.querySelector('.kioskboard-key-capslock');
if (capsLockKeyElm) {
keysEventListeners(capsLockKeyElm, function (e) {
e.preventDefault();
@@ -667,7 +692,7 @@
// capslock key click listener: end
// backspace key click listener: begin
- var backspaceKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0];
+ var backspaceKeyElm = window.document.querySelector('.kioskboard-key-backspace');
if (backspaceKeyElm) {
keysEventListeners(backspaceKeyElm, function (e) {
e.preventDefault();
@@ -691,14 +716,13 @@
// input trigger change event for update the value
input.dispatchEvent(changeEvent);
-
});
}
// backspace key click listener: end
// specialcharacter key click listener: begin
- var specialCharacterKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-specialcharacter')[0];
- var specialCharactersRowElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0];
+ var specialCharacterKeyElm = window.document.querySelector('.kioskboard-key-specialcharacter');
+ var specialCharactersRowElm = window.document.querySelector('.kioskboard-row-specialcharacters');
// open
if (specialCharacterKeyElm && specialCharactersRowElm) {
keysEventListeners(specialCharacterKeyElm, function (e) {
@@ -714,7 +738,7 @@
});
}
// close
- var specialCharCloseElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-specialcharacter-close')[0];
+ var specialCharCloseElm = window.document.querySelector('.kioskboard-specialcharacter-close');
if (specialCharCloseElm && specialCharacterKeyElm && specialCharactersRowElm) {
keysEventListeners(specialCharCloseElm, function (e) {
e.preventDefault();
@@ -725,22 +749,34 @@
}
// specialcharacter key click listener: end
+ // enter key click listener: begin
+ var enterKeyElm = window.document.querySelector('.kioskboard-key-enter');
+ if (enterKeyElm) {
+ keysEventListeners(enterKeyElm, function () {
+ if (opt.keysEnterCanClose === true) {
+ removeKeyboard();
+ }
+ if (typeof opt.keysEnterCallback === 'function') {
+ opt.keysEnterCallback();
+ }
+ });
+ }
+ // enter key click listener: end
};
// keys click listeners: end
// append keyboard: begin
- var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id);
+ var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboardId);
if (!keyboardElement) {
// append the keyboard to body and cache
window.document.body.appendChild(kioskBoardVirtualKeyboard);
- keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id);
// check window and keyboard height: begin
var windowHeight = Math.round(window.innerHeight);
var documentHeight = Math.round(window.document.body.clientHeight);
- var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight);
+ var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboardId).offsetHeight);
if (keyboardHeight > Math.round((windowHeight / 3) * 2)) {
- var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0];
+ var keyboardWrapper = window.document.querySelector('.kioskboard-wrapper');
keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 4) + 'px';
keyboardWrapper.style.overflowX = 'hidden';
keyboardWrapper.style.overflowY = 'auto';
@@ -750,12 +786,11 @@
// body padding bottom || top: begin
var isPlacementTop = keyboardPlacement === kioskBoardPlacements.Top;
- var inputTop = (isPlacementTop ? theInput.getBoundingClientRect().bottom : theInput.getBoundingClientRect().top) || 0;
+ var inputVisibleEdge = (isPlacementTop ? theInput.getBoundingClientRect().top : theInput.getBoundingClientRect().bottom) || 0;
var docTop = window.document.documentElement.scrollTop || 0;
- var inputThreshold = isPlacementTop ? (theInput.clientHeight + 20) : 50;
- var theInputOffsetTop = Math.round(inputTop + docTop) - inputThreshold;
+ var theInputOffsetTop = Math.round(inputVisibleEdge + docTop);
var isPaddingTop = (theInputOffsetTop < keyboardHeight) && isPlacementTop;
- var isPaddingBottom = documentHeight <= (theInputOffsetTop + keyboardHeight);
+ var isPaddingBottom = documentHeight <= (theInputOffsetTop + keyboardHeight) && !isPlacementTop;
if (isPaddingTop || isPaddingBottom) {
var styleElm = window.document.getElementById('KioskboardBodyPadding');
@@ -775,9 +810,12 @@
// auto scroll: begin
var autoScroll = opt.autoScroll === true;
if (autoScroll) {
+ var inputThreshold = isPlacementTop ? 20 : 50;
+ var inputTop = theInput.getBoundingClientRect().top || 0;
+ var inputScrollOffsetTop = Math.round(inputTop + docTop);
var scrollBehavior = opt.cssAnimations === true ? 'smooth' : 'auto';
var scrollDelay = opt.cssAnimations === true && typeof opt.cssAnimationsDuration === 'number' ? opt.cssAnimationsDuration : 0;
- var scrollTop = theInputOffsetTop - (isPlacementTop ? keyboardHeight : 0);
+ var scrollTop = inputScrollOffsetTop - inputThreshold - (isPlacementTop ? keyboardHeight : 0);
var userAgent = window.navigator.userAgent.toLocaleLowerCase('en');
var isBrowserInternetExplorer = userAgent.indexOf('.net4') > -1;
@@ -787,7 +825,7 @@
if ((!isBrowserEdgeLegacy || isBrowserEdgeWebView) && !isBrowserInternetExplorer) {
var scrollTimeout = setTimeout(function () {
if (isBrowserEdgeWebView) {
- window.scrollBy(0, theInputOffsetTop);
+ window.scrollBy(0, inputScrollOffsetTop);
} else {
window.scrollTo({ top: scrollTop, left: 0, behavior: scrollBehavior });
}
@@ -806,23 +844,15 @@
var docClickListener = function (e) {
var docClickTimeout = setTimeout(function () {
// check event target to remove keyboard: begin
+ var keyboardElm = window.document.getElementById(kioskBoardVirtualKeyboardId);
if (
- e.target !== theInput &&
- !kioskBoardEventTargetIsElementOrChilds(e, keyboardElement) &&
- !e.target.classList.contains('kioskboard-body-padding')
+ keyboardElm
+ && e.target !== theInput
+ && !kioskBoardEventTargetIsElementOrChilds(e, keyboardElm)
+ && !e.target.classList.contains('kioskboard-body-padding')
) {
- // add remove class
- kioskBoardVirtualKeyboard.classList.add(cssAnimationsStyle + '-remove');
-
- // remove after the animation has been ended
- var removeTimeout = setTimeout(function () {
- if (keyboardElement.parentNode !== null) {
- keyboardElement.parentNode.removeChild(keyboardElement); // remove keyboard
- window.document.body.classList.remove('kioskboard-body-padding'); // remove body padding class
- window.document.removeEventListener('click', docClickListener); // remove document click listener
- }
- clearTimeout(removeTimeout);
- }, cssAnimationsDuration);
+ removeKeyboard();
+ window.document.removeEventListener('click', docClickListener);
}
// check event target to remove keyboard: end
diff --git a/dist/kioskboard-2.2.0.min.css b/dist/kioskboard-2.2.0.min.css
deleted file mode 100644
index 75039b6..0000000
--- a/dist/kioskboard-2.2.0.min.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/* KioskBoard - Virtual Keyboard (https://github.com/furcan/KioskBoard) - Version: 2.2.0 - Author: Furkan (https://github.com/furcan) - Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence (https://opensource.org/licenses/MIT) */
-
-#KioskBoard-VirtualKeyboard{box-sizing:border-box!important;position:fixed;z-index:2000;width:100%;max-width:1440px;background:#e3e3e3;background:linear-gradient(to right bottom,#eee,#ebebeb,#e8e8e8,#e6e6e6,#e3e3e3);-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);padding:25px 20px 20px;left:0;right:0;margin:auto}#KioskBoard-VirtualKeyboard.kioskboard-placement-bottom{top:unset;bottom:0;border-radius:10px 10px 0 0}#KioskBoard-VirtualKeyboard.kioskboard-placement-top{top:0;bottom:unset;border-radius:0 0 10px 10px}#KioskBoard-VirtualKeyboard *{box-sizing:border-box!important}#KioskBoard-VirtualKeyboard .kioskboard-wrapper{position:relative;background:inherit;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow{padding-right:12px!important;overflow:hidden auto}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar{height:6px;width:6px}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar-track{border-radius:3px;background:rgba(255,255,255,.75)}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(0,0,0,.25);cursor:pointer}#KioskBoard-VirtualKeyboard .kioskboard-row{position:relative;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;position:relative;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-transform-origin:bottom center;transform-origin:bottom center;cursor:pointer;font-size:22px;line-height:1;font-weight:normal;font-family:sans-serif;max-width:6.25%;margin:8px 8px 12px;padding:12px 12px 22px;border-radius:8px;background:#fafafa;color:#707070;border:2px solid rgba(255,255,255,.04);-webkit-box-shadow:0 4px 0 .04px rgba(0,0,0,.1);box-shadow:0 4px 0 .04px rgba(0,0,0,.1);border-bottom-color:rgba(255,255,255,.1);border-bottom-width:4px;-webkit-box-flex:1;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}#KioskBoard-VirtualKeyboard.kioskboard-tolowercase .kioskboard-row-dynamic span[class^=kioskboard-key]{text-transform:lowercase}#KioskBoard-VirtualKeyboard.kioskboard-touppercase .kioskboard-row-dynamic span[class^=kioskboard-key]{text-transform:uppercase}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]:not(.spacebar-denied):hover{-webkit-transform:scaleY(.98) translateY(1px);transform:scaleY(.98) translateY(1px)}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]:not(.spacebar-denied):active{-webkit-transform:scaleY(.95) translateY(4px);transform:scaleY(.95) translateY(4px)}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] svg{position:absolute;z-index:10;left:10px;top:10px}#KioskBoard-VirtualKeyboard .kioskboard-row-top{padding:0 0 10px;border-bottom:1px solid rgba(0,0,0,.06);margin:0 0 10px}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom{padding:10px 0 0;border-top:1px solid rgba(0,0,0,.06);margin:10px 0 0}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock{max-width:100%;min-height:60px;width:140px;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock::before{content:"";position:absolute;z-index:2;width:10px;height:10px;border-radius:10px;right:6px;top:6px;background:#c4c4c4}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active::before{background:#5decaa}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace{position:relative;max-width:100%;min-height:60px;width:140px;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space{min-height:60px;max-width:100%;width:calc(100% - 16px - 140px - 16px - 140px - 16px);-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-space{width:calc(100% - 16px - 140px - 16px - 140px - 16px - 140px - 16px)}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space.spacebar-denied{opacity:.4!important;cursor:not-allowed!important}#KioskBoard-VirtualKeyboard .kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter{position:relative;max-width:100%;min-height:60px;width:140px;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad{display:block;max-width:320px;margin:auto}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key]{max-width:100%;min-height:60px;width:calc(33.3333% - 16px);-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace,#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-last{max-width:100%;width:calc(50% - 16px)}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters{-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;visibility:hidden;opacity:0;position:absolute;background:inherit;padding:20px;z-index:20;left:0;top:0;height:100%;width:100%}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters.kioskboard-specialcharacter-show{visibility:visible;opacity:1}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close{-webkit-transition:all .36s ease-in-out;-o-transition:all .36s ease-in-out;transition:all .36s ease-in-out;cursor:pointer;position:absolute;z-index:30;right:0;top:-42.5px;width:40px;height:40px;background:#a9a9a9;border-radius:20px;-webkit-box-shadow:0 0 16px -6px rgba(0,0,0,.25);box-shadow:0 0 16px -6px rgba(0,0,0,.25)}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close svg{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;fill:#fff!important;width:16px!important;height:16px!important}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close:hover{-webkit-transform:rotate(90deg);transform:rotate(90deg)}#KioskBoard-VirtualKeyboard .kioskboard-specialcharacters-content{width:100%;max-height:100%;padding-right:5px;overflow-x:hidden;overflow-y:auto}#KioskBoard-VirtualKeyboard .kioskboard-specialcharacters-content::-webkit-scrollbar{height:6px;width:6px}#KioskBoard-VirtualKeyboard .kioskboard-specialcharacters-content::-webkit-scrollbar-track{border-radius:3px;background:rgba(255,255,255,.75)}#KioskBoard-VirtualKeyboard .kioskboard-specialcharacters-content::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(0,0,0,.25);cursor:pointer}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-key{min-width:60px;min-height:30px}#KioskBoard-VirtualKeyboard.kioskboard-theme-light,#KioskBoard-VirtualKeyboard.kioskboard-theme-material{-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);background:#e3e3e3;background:linear-gradient(to right bottom,#eee,#ebebeb,#e8e8e8,#e6e6e6,#e3e3e3)}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark{-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.25),0 0 20px -8px rgba(0,0,0,.15);box-shadow:inset 1px 1px 0 rgba(0,0,0,.25),0 0 20px -8px rgba(0,0,0,.15);background:#151515;background:linear-gradient(to left top,#151515,#171717,#1a1a1a,#1c1c1c,#1e1e1e)}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat{-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);background:#dfdfdf}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool{-webkit-box-shadow:inset 4px 4px 4px rgba(0,0,0,.02),0 0 20px -8px rgba(0,0,0,.1);box-shadow:inset 4px 4px 4px rgba(0,0,0,.02),0 0 20px -8px rgba(0,0,0,.1);background:#e5e5e5;background:linear-gradient(to right bottom,#e5e5e5,#e6e6e6,#e7e7e7,#e7e7e7,#e8e8e8)}#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^=kioskboard-key],#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row span[class^=kioskboard-key]{color:#707070;background:#fafafa}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row span[class^=kioskboard-key]{border-color:rgba(255,255,255,.02);border-bottom-color:rgba(255,255,255,.04);-webkit-box-shadow:0 5px 0 .05px rgba(255,255,255,.2);box-shadow:0 5px 0 .05px rgba(255,255,255,.2);color:#b7b7b7;background:#323232}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key]{color:#707070;background:#fafafa;border-color:#fafafa;border-bottom-color:#fafafa;-webkit-box-shadow:0 2px 0 .05px #fafafa;box-shadow:0 2px 0 .05px #fafafa}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key]{color:#8f8f8f;text-shadow:0 0 1px rgba(0,0,0,.2);background:#fafafa;-webkit-box-shadow:0 4px 6px .06px rgba(0,0,0,.05);box-shadow:0 4px 6px .06px rgba(0,0,0,.05)}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key]::after{content:"";position:absolute;left:0;top:-5px;right:0;bottom:0;width:100%;height:calc(100% - 5px);background:rgba(255,255,255,.1);-webkit-box-shadow:0 5px 15px -10px rgba(0,0,0,.4);box-shadow:0 5px 15px -10px rgba(0,0,0,.4);margin:auto;border-radius:inherit;border:4px solid rgba(0,0,0,.06);border-top-color:rgba(0,0,0,.02);border-bottom-color:transparent;box-sizing:border-box;border-top-width:2px;border-bottom-width:6px}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool span.kioskboard-key-capslock::before{right:9px;top:9px}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat span.kioskboard-key-capslock::before,#KioskBoard-VirtualKeyboard.kioskboard-theme-light span.kioskboard-key-capslock::before,#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool span.kioskboard-key-capslock::before{background:#c4c4c4}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark span.kioskboard-key-capslock::before{background:#a9a9a9}#KioskBoard-VirtualKeyboard.kioskboard-theme-material span.kioskboard-key-capslock::before{background:#e6e6e6}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark span.kioskboard-key-capslock.capslock-active::before,#KioskBoard-VirtualKeyboard.kioskboard-theme-flat span.kioskboard-key-capslock.capslock-active::before,#KioskBoard-VirtualKeyboard.kioskboard-theme-light span.kioskboard-key-capslock.capslock-active::before,#KioskBoard-VirtualKeyboard.kioskboard-theme-material span.kioskboard-key-capslock.capslock-active::before,#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool span.kioskboard-key-capslock.capslock-active::before{background:#5decaa}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key] svg,#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^=kioskboard-key] svg{fill:#707070!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row span[class^=kioskboard-key] svg{fill:#a9a9a9!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key] svg{left:12px;fill:#a1a1a1!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row span[class^=kioskboard-key] svg{fill:#fafafa!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-backspace,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-specialcharacter,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-numpad span.kioskboard-key-backspace{-webkit-box-shadow:0 4px 0 .04px rgba(0,0,0,.3);box-shadow:0 4px 0 .04px rgba(0,0,0,.3);border-bottom-color:rgba(0,0,0,.03);color:#fafafa;background:#b0b0b0}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat span.kioskboard-specialcharacter-close,#KioskBoard-VirtualKeyboard.kioskboard-theme-light span.kioskboard-specialcharacter-close,#KioskBoard-VirtualKeyboard.kioskboard-theme-material span.kioskboard-specialcharacter-close,#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool span.kioskboard-specialcharacter-close{background:#a9a9a9}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark span.kioskboard-specialcharacter-close{background:#323232}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark span.kioskboard-specialcharacter-close svg{fill:#b7b7b7!important}@media only screen and (max-width:767px){#KioskBoard-VirtualKeyboard{min-height:210px;padding:12px 6px}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]{font-size:13px!important;margin:2px 2px 12px;padding:8px 0;width:auto;min-width:22.5px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:center;border-radius:4px}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key]{margin:4px 4px 12px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:16px!important;width:calc(33.3333% - 16px);min-height:55px}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace,#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-last{width:calc(50% - 20px)}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace,#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock,#KioskBoard-VirtualKeyboard .kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter{max-width:60px;min-height:45px;margin-bottom:4px}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space{padding-top:10px;min-height:45px;margin-bottom:4px}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] svg{-webkit-transform:scale(.7);transform:scale(.7);-webkit-transform-origin:left top;transform-origin:left top;left:8px;top:8px}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key] svg{top:0;left:18px;bottom:0;margin:auto;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters{padding:15px 15px 10px}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close{width:30px;height:30px;top:-27px;right:5px}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-fade{opacity:1;-webkit-animation:kioskboard-animation-fade .36s ease-in-out 0s normal;animation:kioskboard-animation-fade .36s ease-in-out 0s normal}@-webkit-keyframes kioskboard-animation-fade{0%{opacity:0}100%{opacity:1}}@keyframes kioskboard-animation-fade{0%{opacity:0}100%{opacity:1}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-fade.kioskboard-fade-remove{opacity:0;-webkit-animation:kioskboard-animation-fade-remove .36s ease-in-out 0s normal;animation:kioskboard-animation-fade-remove .36s ease-in-out 0s normal}@-webkit-keyframes kioskboard-animation-fade-remove{0%{opacity:1}100%{opacity:0}}@keyframes kioskboard-animation-fade-remove{0%{opacity:1}100%{opacity:0}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-placement-bottom.kioskboard-slide{bottom:0;-webkit-animation:kioskboard-animation-slide-bottom 1.2s ease-in-out 0s normal;animation:kioskboard-animation-slide-bottom 1.2s ease-in-out 0s normal}@-webkit-keyframes kioskboard-animation-slide-bottom{0%{bottom:-100%}100%{bottom:0}}@keyframes kioskboard-animation-slide-bottom{0%{bottom:-100%}100%{bottom:0}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide.kioskboard-placement-bottom.kioskboard-slide-remove{bottom:-100%;-webkit-animation:kioskboard-animation-slide-bottom-remove 1.2s ease-in-out 0s normal;animation:kioskboard-animation-slide-bottom-remove 1.2s ease-in-out 0s normal}@-webkit-keyframes kioskboard-animation-slide-bottom-remove{0%{bottom:0}100%{bottom:-100%}}@keyframes kioskboard-animation-slide-bottom-remove{0%{bottom:0}100%{bottom:-100%}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-placement-top.kioskboard-slide{top:0;-webkit-animation:kioskboard-animation-slide-top 1.2s ease-in-out 0s normal;animation:kioskboard-animation-slide-top 1.2s ease-in-out 0s normal}@-webkit-keyframes kioskboard-animation-slide-top{0%{top:-100%}100%{top:0}}@keyframes kioskboard-animation-slide-top{0%{top:-100%}100%{top:0}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide.kioskboard-placement-top.kioskboard-slide-remove{top:-100%;-webkit-animation:kioskboard-animation-slide-top-remove 1.2s ease-in-out 0s normal;animation:kioskboard-animation-slide-top-remove 1.2s ease-in-out 0s normal}@-webkit-keyframes kioskboard-animation-slide-top-remove{0%{top:0}100%{top:-100%}}@keyframes kioskboard-animation-slide-top-remove{0%{top:0}100%{top:-100%}}
diff --git a/dist/kioskboard-2.2.0.min.js b/dist/kioskboard-2.2.0.min.js
deleted file mode 100644
index e9a2cc2..0000000
--- a/dist/kioskboard-2.2.0.min.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/* KioskBoard - Virtual Keyboard (https://github.com/furcan/KioskBoard) - Version: 2.2.0 - Author: Furkan (https://github.com/furcan) - Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence (https://opensource.org/licenses/MIT) */
-
-(function(a,b){"function"==typeof define&&define.amd?define([],function(){return b(a)}):"object"==typeof module&&"object"==typeof module.exports?module.exports=b(a):a.KioskBoard=b(a)})("undefined"==typeof global?"undefined"==typeof window?this:window:global,function(a){'use strict';if("undefined"!=typeof a||"undefined"!=typeof a.document){var b,c,d=function(){return null},e=function(){if(null!==d()&&!a.document.getElementById("KioskBoardInternalCSS")){var b=a.document.createElement("style");b.id="KioskBoardInternalCSS",b.innerHTML=d(),a.document.head.appendChild(b)}},f={keysArrayOfObjects:null,keysJsonUrl:null,keysSpecialCharsArrayOfStrings:null,keysNumpadArrayOfNumbers:null,language:"en",theme:"light",capsLockActive:!0,allowRealKeyboard:!1,allowMobileKeyboard:!1,cssAnimations:!0,cssAnimationsDuration:360,cssAnimationsStyle:"slide",keysAllowSpacebar:!0,keysSpacebarText:"Space",keysFontFamily:"sans-serif",keysFontSize:"22px",keysFontWeight:"normal",keysIconSize:"25px",autoScroll:!0},g="https://github.com/furcan/KioskBoard",h={0:"!",1:"'",2:"^",3:"#",4:"+",5:"$",6:"%",7:"\xBD",8:"&",9:"/",10:"{",11:"}",12:"(",13:")",14:"[",15:"]",16:"=",17:"*",18:"?",19:"\\",20:"-",21:"_",22:"|",23:"@",24:"\u20AC",25:"\u20BA",26:"~",27:"\xE6",28:"\xDF",29:"<",30:">",31:",",32:";",33:".",34:":",35:"`"},i={0:"7",1:"8",2:"9",3:"4",4:"5",5:"6",6:"1",7:"2",8:"3",9:"0"},j={0:"1",1:"2",2:"3",3:"4",4:"5",5:"6",6:"7",7:"8",8:"9",9:"0"},k={All:"all",Keyboard:"keyboard",Numpad:"numpad"},l={Bottom:"bottom",Top:"top"},m=function(){var a={},b=!1,c=0;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(b=arguments[0],c++);for(var d=function(c){for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=b&&"[object Object]"===Object.prototype.toString.call(c[d])?m(a[d],c[d]):c[d])};c";return c},r=function(a,b){a||(a=25),b||(b="#707070");var c=" ";return c},s=function(a,b,c){a||(a=50),b||(a=25),c||(c="#707070");var d=" ";return d},t=function(a,b){a||(a=18),b||(b="#707070");var c="";return c};(function(){function b(b,c){c=c||{bubbles:!1,cancelable:!1,detail:void 0};var d=a.document.createEvent("CustomEvent");return d.initCustomEvent(b,c.bubbles,c.cancelable,c.detail),d}return"function"!=typeof a.Event&&void(b.prototype=a.Event.prototype,a.Event=b)})();var u=function(a,b){if(a.target===b)return!0;var c=b.querySelectorAll("*");if(c&&0w.length)return o("You called the KioskBoard with the \""+d+"\" selector, but there is no such element on the document."),!1}if("object"==typeof e&&0"+K+"",M=""+r(H,"#707070")+"",N=""+q(H,"#707070")+"",O="",P="";if(y){var Q=parseInt(H)||25;O=""+s(2*Q+"px",Q+"px","#707070")+"";var R=A.keysSpecialCharsArrayOfStrings;for(var S in Array.isArray(R)&&0"+T.toString()+"";P+=U}}if(v===k.Numpad){var V=A.keysNumpadArrayOfNumbers;Array.isArray(V)&&10===V.length&&(i=V.reduce(function(a,b,c){return a[c]=b,a},{}));var W="";for(var X in i)if(Object.prototype.hasOwnProperty.call(i,X)){var Y=X,Z=i[X],$=""+Z.toString()+"";W+=$}C+="
"+W+N+"
"}if(v===k.Keyboard||v===k.All){if(v===k.All){var _="";for(var aa in j)if(Object.prototype.hasOwnProperty.call(j,aa)){var ba=j[aa],ca=""+ba.toString()+"";_+=ca}C+="
"+_+"
"}for(var da=0;da"+ga.toString()+"";ea+=ha}C+="
"+ea+"
"}if(C+="
"+M+O+L+N+"
",y){var ia=""+t("18px","#707070")+"",ja="
"+P+"
";C+="
"+ia+ja+"
"}}var ka=function(b){var c=a.document.createElement("div");return c.className="kioskboard-wrapper",c.innerHTML=b.trim(),c}(C),la=!0===A.cssAnimations,ma="no-animation",na="no-animation",oa=0;la&&(ma="kioskboard-with-animation",na="kioskboard-fade",oa="number"==typeof A.cssAnimationsDuration?A.cssAnimationsDuration:360,"slide"===A.cssAnimationsStyle&&(na="kioskboard-slide"));var pa="string"==typeof A.theme&&0=c)return!1;if(0=d)return!1;b.focus();var f=a.currentTarget.dataset.value||"";f=G?f.toLocaleUpperCase(z):f.toLocaleLowerCase(z);for(var g=f.split(""),h=0;hMath.round(2*(va/3))){var ya=a.document.getElementById(qa.id).getElementsByClassName("kioskboard-wrapper")[0];ya.style.maxHeight=Math.round(4*(va/5))+"px",ya.style.overflowX="hidden",ya.style.overflowY="auto",ya.classList.add("kioskboard-overflow")}var za=x===l.Top,Aa=(za?f.getBoundingClientRect().bottom:f.getBoundingClientRect().top)||0,Ba=a.document.documentElement.scrollTop||0,Ca=za?f.clientHeight+20:50,Da=Math.round(Aa+Ba)-Ca,Ea=Da.kioskboard-body-padding {padding-"+(Ea?"top":"bottom")+":"+xa+"px !important;}",Ha=a.document.createRange();Ha.selectNode(a.document.head);var Ia=Ha.createContextualFragment(Ga);a.document.head.appendChild(Ia),a.document.body.classList.add("kioskboard-body-padding")}var Ja=!0===A.autoScroll;if(Ja){var Ka=!0===A.cssAnimations?"smooth":"auto",La=!0===A.cssAnimations&&"number"==typeof A.cssAnimationsDuration?A.cssAnimationsDuration:0,Ma=Da-(za?xa:0),Na=a.navigator.userAgent.toLocaleLowerCase("en"),Oa=-1",31:",",32:";",33:".",34:":",35:"`"},i={0:"7",1:"8",2:"9",3:"4",4:"5",5:"6",6:"1",7:"2",8:"3",9:"0"},j={0:"1",1:"2",2:"3",3:"4",4:"5",5:"6",6:"7",7:"8",8:"9",9:"0"},k={All:"all",Keyboard:"keyboard",Numpad:"numpad"},l={Bottom:"bottom",Top:"top"},m=function(){var a={},b=!1,c=0;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(b=arguments[0],c++);for(var d=function(c){for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=b&&"[object Object]"===Object.prototype.toString.call(c[d])?m(a[d],c[d]):c[d])};c";return c},r=function(a,b){a||(a=25),b||(b="#707070");var c=" ";return c},s=function(a,b,c){a||(a=50),b||(a=25),c||(c="#707070");var d=" ";return d},t=function(a,b){a||(a=18),b||(b="#707070");var c="";return c};(function(){function b(b,c){c=c||{bubbles:!1,cancelable:!1,detail:void 0};var d=a.document.createEvent("CustomEvent");return d.initCustomEvent(b,c.bubbles,c.cancelable,c.detail),d}return"function"!=typeof a.Event&&void(b.prototype=a.Event.prototype,a.Event=b)})();var u=function(a,b){if(a.target===b)return!0;var c=b.querySelectorAll("*");if(c&&0w.length)return o("You called the KioskBoard with the \""+d+"\" selector, but there is no such element on the document."),!1}if("object"==typeof e&&0"+K+"",N=""+r(H,"#707070")+"",O=""+q(H,"#707070")+"",P=""+L+"",Q="",R="";if(y){var S=parseInt(H)||25;Q=""+s(2*S+"px",S+"px","#707070")+"";var T=A.keysSpecialCharsArrayOfStrings;for(var U in Array.isArray(T)&&0"+V.toString()+"";R+=W}}if(v===k.Numpad){var X=A.keysNumpadArrayOfNumbers;Array.isArray(X)&&10===X.length&&(i=X.reduce(function(a,b,c){return a[c]=b,a},{}));var Y="";for(var Z in i)if(Object.prototype.hasOwnProperty.call(i,Z)){var $=Z,_=i[Z],aa=""+_.toString()+"";Y+=aa}C+="