dt-virtual-keyboard - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

bundles/dt-virtual-keyboard.umd.js

@@ -198,4 +198,11 @@ (function (global, factory) {
         };
-        DtVirtualKeyboardComponent.prototype._onMouseDown = function (event, key) {
+        DtVirtualKeyboardComponent.prototype._onMouseDown = function (event, key, isTouch) {
             var _this = this;
+            if (isTouch === void 0) { isTouch = false; }
+            if (isTouch !== this.isTouchDevice() && event.originalEvent.touches.length > 1) {
+                return;
+            }
+            if (event.cancelable) {
+                event.preventDefault();
+            }
             this.keyPressing = key.default;
@@ -217,8 +224,21 @@ if (key.default === 'TAB' || key.subBlock.length === 0) {
         };
-        DtVirtualKeyboardComponent.prototype._onMouseUp = function (event, key) {
-            if (this.keyPressing && (key === null || key === void 0 ? void 0 : key.subBlockActive) && (key === null || key === void 0 ? void 0 : key.subBlock.length) > 0) {
-                this.clickKey(this.keyPressing);
+        DtVirtualKeyboardComponent.prototype._onMouseUp = function (event, key, isTouch) {
+            if (isTouch === void 0) { isTouch = false; }
+            var _a;
+            if (isTouch !== this.isTouchDevice() && event.originalEvent.touches.length > 1) {
+                return;
             }
-            console.log("keyPressing null");
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            //console.log("_onMouseDown");
+            //console.log(this.keyPressing);
+            var keyPressed = this.keyPressing;
             this.keyPressing = undefined;
+            if (keyPressed && (key === null || key === void 0 ? void 0 : key.subBlock) && ((_a = key === null || key === void 0 ? void 0 : key.subBlock) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                event.stopPropagation();
+                this.clickKey(keyPressed);
+            }
+            //console.log("keyPressing null");
+            //this.keyPressing = undefined;
             clearTimeout(this.canActiveSubBlockTimeout);
@@ -294,3 +314,3 @@ this.canActiveSubBlock = false;
         DtVirtualKeyboardComponent.prototype.clickKey = function (key) {
-            if (key.length > 1) {
+            if (key && key.length > 1) {
                 var lang = 'it';
@@ -442,6 +462,11 @@ switch (key) {
         };
+        DtVirtualKeyboardComponent.prototype.isTouchDevice = function () {
+            return (('ontouchstart' in window) ||
+                (navigator.maxTouchPoints > 0) ||
+                (navigator.msMaxTouchPoints > 0));
+        };
         return DtVirtualKeyboardComponent;
     }());
     DtVirtualKeyboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0__namespace, type: DtVirtualKeyboardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DtVirtualKeyboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: DtVirtualKeyboardComponent, selector: "lib-dt-virtual-keyboard", inputs: { config: "config" }, outputs: { type: "type", languageChanged: "languageChanged", enter: "enter", cancel: "cancel", tab: "tab" }, ngImport: i0__namespace, template: "<div class=\"dt-virtual-keyboard\" oncontextmenu=\"return false;\">\r\n  <div class=\"default-keyboard\" *ngIf=\"defaultKeyBoardActive\">\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n      <div [id]=\"block\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\"\r\n           class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block1\"\r\n           (touchstart)=\"_onMouseDownNumber($event,block)\" (touchend)=\"_onMouseUpNumber($event,block)\">\r\n\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block2.length+'%'}\" *ngFor=\"let block of block2\">\r\n      -->\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block2\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block3.length+'%'}\" *ngFor=\"let block of block3\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block4.length+'%'}\" *ngFor=\"let block of block4\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\"\r\n             [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': block.length > 0 ? 100/(block5.length+1)+'%' : 200/(block5.length+1)+'%'}\" *ngFor=\"let block of block5\">\r\n      -->\r\n      <!--<div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block5\">\r\n        <div  class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block5\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock subBlockLanguages\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"keypad\" *ngIf=\"keypadActive\" [ngStyle]=\"defaultKeyBoardActive && keypadActive ? {'padding-left': '30px'} : {}\">\r\n    <div class=\"keypadNumbers\"\r\n         *ngIf=\"keypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock4\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"specialCharactersKeypad\" *ngIf=\"onlyKeypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 2)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n\r\n</div>\r\n", styles: [".dt-virtual-keyboard{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;display:flex;align-items:center}.default-keyboard,.keypad{flex-grow:1}.keypad{max-width:300px;margin:auto;display:flex}.block{display:flex;margin-bottom:5px}.keyButton{align-self:center;align-items:center;align-content:center;height:100%;text-align:center;background:#fff;border-radius:4px;position:relative;cursor:pointer}.keyButton:active,.keyButton:hover{background-color:#efefef}@media only screen and (hover:hover) and (pointer:coarse){.blockButton:hover{background-color:#efefef}}.blockButtonPressed{background-color:#efefef!important}.blockButton:active{background-color:#fff}.subBlock{position:absolute;padding:2px;display:flex;top:-30px;background:grey;z-index:3;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box}.subBlockLanguages{width:200px}.blockButton:not(:last-child){margin-right:5px}.blockButton{position:relative;width:30px;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:5px;flex-grow:1}.textKeyHidden{opacity:0}.blockButton[id=\"&#127760;\"]{max-width:80px}.blockButton[id=\"#+=\"]{max-width:120px}.blockButton[id=\"&#9166;\"]{max-width:150px}.specialCharactersKeypad{padding-left:20px}.keypadNumbers{width:100%}"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ENTER_SUBBLOCK] });
+    DtVirtualKeyboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: DtVirtualKeyboardComponent, selector: "lib-dt-virtual-keyboard", inputs: { config: "config" }, outputs: { type: "type", languageChanged: "languageChanged", enter: "enter", cancel: "cancel", tab: "tab" }, ngImport: i0__namespace, template: "<div class=\"dt-virtual-keyboard\" oncontextmenu=\"return false;\">\r\n  <div class=\"default-keyboard\" *ngIf=\"defaultKeyBoardActive\">\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n      <div [id]=\"block\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\"\r\n           class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block1\"\r\n           (touchstart)=\"_onMouseDownNumber($event,block)\" (touchend)=\"_onMouseUpNumber($event,block)\">\r\n\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block2.length+'%'}\" *ngFor=\"let block of block2\">\r\n      -->\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block, true)\" (touchend)=\"_onMouseUp($event,block, true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block2\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block3.length+'%'}\" *ngFor=\"let block of block3\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block,true)\" (touchend)=\"_onMouseUp($event,block,true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block4.length+'%'}\" *ngFor=\"let block of block4\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block,true)\" (touchend)=\"_onMouseUp($event,block,true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\"\r\n             [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': block.length > 0 ? 100/(block5.length+1)+'%' : 200/(block5.length+1)+'%'}\" *ngFor=\"let block of block5\">\r\n      -->\r\n      <!--<div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block5\">\r\n        <div  class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block,true)\" (touchend)=\"_onMouseUp($event,block,true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block5\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock subBlockLanguages\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"keypad\" *ngIf=\"keypadActive\" [ngStyle]=\"defaultKeyBoardActive && keypadActive ? {'padding-left': '30px'} : {}\">\r\n    <div class=\"keypadNumbers\"\r\n         *ngIf=\"keypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock4\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"specialCharactersKeypad\" *ngIf=\"onlyKeypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 2)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n\r\n</div>\r\n", styles: [".dt-virtual-keyboard{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;display:flex;align-items:center}.default-keyboard,.keypad{flex-grow:1}.keypad{max-width:300px;margin:auto;display:flex}.block{display:flex;margin-bottom:5px}.keyButton{align-self:center;align-items:center;align-content:center;height:100%;text-align:center;background:#fff;border-radius:4px;position:relative;cursor:pointer}.keyButton:active,.keyButton:hover{background-color:#efefef}@media only screen and (hover:hover) and (pointer:coarse){.blockButton:hover{background-color:#efefef}}.blockButtonPressed{background-color:#efefef!important}.blockButton:active{background-color:#fff}.subBlock{position:absolute;padding:2px;display:flex;top:-30px;background:grey;z-index:3;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box}.subBlockLanguages{width:200px}.blockButton:not(:last-child){margin-right:5px}.blockButton{position:relative;width:30px;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:5px;flex-grow:1}.textKeyHidden{opacity:0}.blockButton[id=\"&#127760;\"]{max-width:80px}.blockButton[id=\"#+=\"]{max-width:120px}.blockButton[id=\"&#9166;\"]{max-width:150px}.specialCharactersKeypad{padding-left:20px}.keypadNumbers{width:100%}"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ENTER_SUBBLOCK] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0__namespace, type: DtVirtualKeyboardComponent, decorators: [{
@@ -448,0 +473,0 @@ type: i0.Component,

fesm2015/dt-virtual-keyboard.js

@@ -174,3 +174,9 @@ import * as i0 from '@angular/core';
     }
-    _onMouseDown(event, key) {
+    _onMouseDown(event, key, isTouch = false) {
+        if (isTouch !== this.isTouchDevice() && event.originalEvent.touches.length > 1) {
+            return;
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         this.keyPressing = key.default;
@@ -192,8 +198,20 @@ if (key.default === 'TAB' || key.subBlock.length === 0) {
     }
-    _onMouseUp(event, key) {
-        if (this.keyPressing && (key === null || key === void 0 ? void 0 : key.subBlockActive) && (key === null || key === void 0 ? void 0 : key.subBlock.length) > 0) {
-            this.clickKey(this.keyPressing);
+    _onMouseUp(event, key, isTouch = false) {
+        var _a;
+        if (isTouch !== this.isTouchDevice() && event.originalEvent.touches.length > 1) {
+            return;
         }
-        console.log("keyPressing null");
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        //console.log("_onMouseDown");
+        //console.log(this.keyPressing);
+        let keyPressed = this.keyPressing;
         this.keyPressing = undefined;
+        if (keyPressed && (key === null || key === void 0 ? void 0 : key.subBlock) && ((_a = key === null || key === void 0 ? void 0 : key.subBlock) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            event.stopPropagation();
+            this.clickKey(keyPressed);
+        }
+        //console.log("keyPressing null");
+        //this.keyPressing = undefined;
         clearTimeout(this.canActiveSubBlockTimeout);
@@ -269,3 +287,3 @@ this.canActiveSubBlock = false;
     clickKey(key) {
-        if (key.length > 1) {
+        if (key && key.length > 1) {
             let lang = 'it';
@@ -404,5 +422,10 @@ switch (key) {
     }
+    isTouchDevice() {
+        return (('ontouchstart' in window) ||
+            (navigator.maxTouchPoints > 0) ||
+            (navigator.msMaxTouchPoints > 0));
+    }
 }
 DtVirtualKeyboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: DtVirtualKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DtVirtualKeyboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: DtVirtualKeyboardComponent, selector: "lib-dt-virtual-keyboard", inputs: { config: "config" }, outputs: { type: "type", languageChanged: "languageChanged", enter: "enter", cancel: "cancel", tab: "tab" }, ngImport: i0, template: "<div class=\"dt-virtual-keyboard\" oncontextmenu=\"return false;\">\r\n  <div class=\"default-keyboard\" *ngIf=\"defaultKeyBoardActive\">\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n      <div [id]=\"block\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\"\r\n           class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block1\"\r\n           (touchstart)=\"_onMouseDownNumber($event,block)\" (touchend)=\"_onMouseUpNumber($event,block)\">\r\n\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block2.length+'%'}\" *ngFor=\"let block of block2\">\r\n      -->\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block2\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block3.length+'%'}\" *ngFor=\"let block of block3\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block4.length+'%'}\" *ngFor=\"let block of block4\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\"\r\n             [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': block.length > 0 ? 100/(block5.length+1)+'%' : 200/(block5.length+1)+'%'}\" *ngFor=\"let block of block5\">\r\n      -->\r\n      <!--<div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block5\">\r\n        <div  class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block)\" (touchend)=\"_onMouseUp($event,block)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block)\" (mousedown)=\"_onMouseDown($event,block)\" (click)=\"clickKey(block.default)\"\r\n           *ngFor=\"let block of block5\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock subBlockLanguages\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"keypad\" *ngIf=\"keypadActive\" [ngStyle]=\"defaultKeyBoardActive && keypadActive ? {'padding-left': '30px'} : {}\">\r\n    <div class=\"keypadNumbers\"\r\n         *ngIf=\"keypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock4\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"specialCharactersKeypad\" *ngIf=\"onlyKeypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 2)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n\r\n</div>\r\n", styles: [".dt-virtual-keyboard{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;display:flex;align-items:center}.default-keyboard,.keypad{flex-grow:1}.keypad{max-width:300px;margin:auto;display:flex}.block{display:flex;margin-bottom:5px}.keyButton{align-self:center;align-items:center;align-content:center;height:100%;text-align:center;background:#fff;border-radius:4px;position:relative;cursor:pointer}.keyButton:active,.keyButton:hover{background-color:#efefef}@media only screen and (hover:hover) and (pointer:coarse){.blockButton:hover{background-color:#efefef}}.blockButtonPressed{background-color:#efefef!important}.blockButton:active{background-color:#fff}.subBlock{position:absolute;padding:2px;display:flex;top:-30px;background:grey;z-index:3;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box}.subBlockLanguages{width:200px}.blockButton:not(:last-child){margin-right:5px}.blockButton{position:relative;width:30px;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:5px;flex-grow:1}.textKeyHidden{opacity:0}.blockButton[id=\"&#127760;\"]{max-width:80px}.blockButton[id=\"#+=\"]{max-width:120px}.blockButton[id=\"&#9166;\"]{max-width:150px}.specialCharactersKeypad{padding-left:20px}.keypadNumbers{width:100%}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ENTER_SUBBLOCK] });
+DtVirtualKeyboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: DtVirtualKeyboardComponent, selector: "lib-dt-virtual-keyboard", inputs: { config: "config" }, outputs: { type: "type", languageChanged: "languageChanged", enter: "enter", cancel: "cancel", tab: "tab" }, ngImport: i0, template: "<div class=\"dt-virtual-keyboard\" oncontextmenu=\"return false;\">\r\n  <div class=\"default-keyboard\" *ngIf=\"defaultKeyBoardActive\">\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n      <div [id]=\"block\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\"\r\n           class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block1\"\r\n           (touchstart)=\"_onMouseDownNumber($event,block)\" (touchend)=\"_onMouseUpNumber($event,block)\">\r\n\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block2.length+'%'}\" *ngFor=\"let block of block2\">\r\n      -->\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block, true)\" (touchend)=\"_onMouseUp($event,block, true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block2\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block3.length+'%'}\" *ngFor=\"let block of block3\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block,true)\" (touchend)=\"_onMouseUp($event,block,true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block3\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block4.length+'%'}\" *ngFor=\"let block of block4\">\r\n      -->\r\n      <!--<div class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [innerHTML]=\"block\">\r\n\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block,true)\" (touchend)=\"_onMouseUp($event,block,true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block4\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\"\r\n             [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 5)'}\">\r\n      <!--\r\n          <div class=\"blockButton\" [ngStyle]=\"{'width': block.length > 0 ? 100/(block5.length+1)+'%' : 200/(block5.length+1)+'%'}\" *ngFor=\"let block of block5\">\r\n      -->\r\n      <!--<div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of block5\">\r\n        <div  class=\"textKey\" [innerHTML]=\"block\">\r\n        </div>\r\n      </div>-->\r\n\r\n      <div [id]=\"block.default\" class=\"blockButton\" [ngClass]=\"{'blockButtonPressed' : keyPressing === block.default}\"\r\n           [ngStyle]=\"block.subBlock.length > 0 && block.subBlockActive ? {'background': 'grey'} : {}\"\r\n           (touchstart)=\"_onMouseDown($event,block,true)\" (touchend)=\"_onMouseUp($event,block,true)\"\r\n           (touchmove)=\"_onTouchMoveSubBlock($event,block)\"\r\n           (mouseup)=\"_onMouseUp($event,block, false)\" (mousedown)=\"_onMouseDown($event,block, false)\"\r\n           *ngFor=\"let block of block5\">\r\n        <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\"\r\n             [ngClass]=\"{textKeyHidden: block.subBlock.length > 0 && block.subBlockActive}\" [innerHTML]=\"block.default\">\r\n        </div>\r\n        <div class=\"subBlock subBlockLanguages\" [@enterSubBlock] *ngIf=\"block.subBlock.length > 0 && block.subBlockActive\">\r\n          <div [id]=\"subEl\" class=\"blockButton\" (mouseup)=\"_onClickSubBlock($event,subEl)\"\r\n               [ngClass]=\"{'blockButtonPressed' : keyPressing === subEl}\"\r\n               (touchend)=\"_onClickSubBlock($event,subEl)\"\r\n               *ngFor=\"let subEl of block.subBlock\">\r\n            <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"subEl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"keypad\" *ngIf=\"keypadActive\" [ngStyle]=\"defaultKeyBoardActive && keypadActive ? {'padding-left': '30px'} : {}\">\r\n    <div class=\"keypadNumbers\"\r\n         *ngIf=\"keypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <!--    <div class=\"blockButton\" [ngStyle]=\"{'width': 100/block1.length+'%'}\" *ngFor=\"let block of block1\">-->\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 35px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadBlock4\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"specialCharactersKeypad\" *ngIf=\"onlyKeypadActive\">\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock1\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 4)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock2\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"block\" [ngStyle]=\"{height: 'calc(('+config.height+'px - 30px) / 2)'}\">\r\n\r\n        <div [id]=\"block\" class=\"blockButton\" (click)=\"clickKey(block)\" *ngFor=\"let block of keypadSpecialCharactersBlock3\"\r\n             [ngClass]=\"{'blockButtonPressed' : keyPressing === block}\">\r\n\r\n          <div class=\"textKey\" [ngStyle]=\"{fontSize: config.fontSize}\" [innerHTML]=\"block\">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n\r\n</div>\r\n", styles: [".dt-virtual-keyboard{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;display:flex;align-items:center}.default-keyboard,.keypad{flex-grow:1}.keypad{max-width:300px;margin:auto;display:flex}.block{display:flex;margin-bottom:5px}.keyButton{align-self:center;align-items:center;align-content:center;height:100%;text-align:center;background:#fff;border-radius:4px;position:relative;cursor:pointer}.keyButton:active,.keyButton:hover{background-color:#efefef}@media only screen and (hover:hover) and (pointer:coarse){.blockButton:hover{background-color:#efefef}}.blockButtonPressed{background-color:#efefef!important}.blockButton:active{background-color:#fff}.subBlock{position:absolute;padding:2px;display:flex;top:-30px;background:grey;z-index:3;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box}.subBlockLanguages{width:200px}.blockButton:not(:last-child){margin-right:5px}.blockButton{position:relative;width:30px;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:5px;flex-grow:1}.textKeyHidden{opacity:0}.blockButton[id=\"&#127760;\"]{max-width:80px}.blockButton[id=\"#+=\"]{max-width:120px}.blockButton[id=\"&#9166;\"]{max-width:150px}.specialCharactersKeypad{padding-left:20px}.keypadNumbers{width:100%}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ENTER_SUBBLOCK] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: DtVirtualKeyboardComponent, decorators: [{
@@ -409,0 +432,0 @@ type: Component,

lib/dt-virtual-keyboard.component.d.ts

@@ -88,3 +88,3 @@ import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
         subBlockActive: boolean;
-    }): void;
+    }, isTouch?: boolean): void;
     _onMouseUp(event?: any, key?: {
@@ -94,6 +94,6 @@ default: string;
         subBlockActive: boolean;
-    }): void;
+    }, isTouch?: boolean): void;
     _onClickSubBlock(event: any, key: string): void;
     captureClick(e?: MouseEvent): void;
-    clickKey(key: string): void;
+    clickKey(key?: string): void;
     selectLanguageLetters(lang?: string | undefined): void;
@@ -128,4 +128,5 @@ listToUpperCase(list: Array<{
     }): void;
+    isTouchDevice(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DtVirtualKeyboardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DtVirtualKeyboardComponent, "lib-dt-virtual-keyboard", never, { "config": "config"; }, { "type": "type"; "languageChanged": "languageChanged"; "enter": "enter"; "cancel": "cancel"; "tab": "tab"; }, never, never>;
 }

package.json

 {
   "name": "dt-virtual-keyboard",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^12.1.1",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

303481

increased by2.43%

Lines of code

1805

increased by4.15%

No dependency changes