systelab-virtual-keyboard 19.0.0 → 20.1.0

package/README.md

@@ -43,3 +43,14 @@ The configuration params are describe into the interface [SystelabVirtualKeyboar
 | inputMethod | SystelabVirtualKeyboardInputMethods | | The method detected for the keyboard to click or touch the keys
 | showButton | boolean | false | Show or hide the button for showing the keyboard
 | showOnMouseClick | boolean | false | Shows virtual keyboard upon mouse click on input field
+
+### Styling variables
+
+| Name  | Default | Description                               |
+|-----------|:----:|-------------------------------------------|
+| --systelab-virtual-keyboard-font-family | 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace | Font family fonts to use                  
+| --systelab-virtual-keyboard-background-color | #B2B2B2 | Background of the keyboard                
+| --systelab-virtual-keyboard-button-color | #E5E5E5 | Normal button background color            
+| --systelab-virtual-keyboard-button-font-color | #000000 | Normal button font color                  
+| --systelab-virtual-keyboard-active-special-button-color | #4D4D4D | Special buttons activation background color
+| --systelab-virtual-keyboard-active-special-button-font-color | #FFFFFF | Special buttons activation font color     

package/fesm2022/systelab-virtual-keyboard.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Output, HostListener, Optional, Inject, Component, Injectable, Input, Directive, NgModule } from '@angular/core';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { InjectionToken, EventEmitter, Output, HostListener, Optional, Inject, Component, Injectable, DOCUMENT, Input, Directive, NgModule } from '@angular/core';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { SimpleKeyboard } from 'simple-keyboard';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
 
 /*
  * Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.
@@ -14,34 +14,80 @@ import { OverlayModule } from '@angular/cdk/overlay';
  * are protected by trade secret or copyright law. Dissemination of this information or reproduction of this material is
  * strictly forbidden unless prior written permission is Instrumentation Laboratory Company.
  */
-var SystelabVirtualKeyboardButton;
-(function (SystelabVirtualKeyboardButton) {
-    SystelabVirtualKeyboardButton["Done"] = "{done}";
-    SystelabVirtualKeyboardButton["Enter"] = "{enter}";
-    SystelabVirtualKeyboardButton["Shift"] = "{shift}";
-    SystelabVirtualKeyboardButton["Lock"] = "{lock}";
-    SystelabVirtualKeyboardButton["Backspace"] = "{bksp}";
-    SystelabVirtualKeyboardButton["Language"] = "{language}";
-    SystelabVirtualKeyboardButton["Space"] = "{space}";
-    SystelabVirtualKeyboardButton["Tab"] = "{tab}";
-})(SystelabVirtualKeyboardButton || (SystelabVirtualKeyboardButton = {}));
-var SystelabVirtualKeyboardLayouts;
-(function (SystelabVirtualKeyboardLayouts) {
-    SystelabVirtualKeyboardLayouts["default"] = "default";
-    SystelabVirtualKeyboardLayouts["shift"] = "shift";
-    SystelabVirtualKeyboardLayouts["numeric"] = "numeric";
-})(SystelabVirtualKeyboardLayouts || (SystelabVirtualKeyboardLayouts = {}));
-var SystelabVirtualKeyboardInputMethods;
-(function (SystelabVirtualKeyboardInputMethods) {
-    SystelabVirtualKeyboardInputMethods["onlyMouseEvents"] = "onlyMouseEvents";
-    SystelabVirtualKeyboardInputMethods["onlyTouchEvents"] = "onlyTouchEvents";
-})(SystelabVirtualKeyboardInputMethods || (SystelabVirtualKeyboardInputMethods = {}));
-var SystelabVirtualKeyboardInputModes;
-(function (SystelabVirtualKeyboardInputModes) {
-    SystelabVirtualKeyboardInputModes["text"] = "text";
-    SystelabVirtualKeyboardInputModes["numeric"] = "numeric";
-    SystelabVirtualKeyboardInputModes["password"] = "password";
-})(SystelabVirtualKeyboardInputModes || (SystelabVirtualKeyboardInputModes = {}));
+var SystelabVirtualKeyboardConstants;
+(function (SystelabVirtualKeyboardConstants) {
+    let Layouts;
+    (function (Layouts) {
+        Layouts["Default"] = "default";
+        Layouts["AlphaNumeric"] = "alpha-numeric";
+        Layouts["AlphaNumericShift"] = "alpha-numeric-shift";
+        Layouts["AlphaNumericUppercase"] = "alpha-numeric-uppercase";
+        Layouts["AlphaNumericUppercaseShift"] = "alpha-numeric-uppercase-shift";
+        Layouts["Numeric"] = "numeric";
+        Layouts["NumericShift"] = "numeric-shift";
+    })(Layouts = SystelabVirtualKeyboardConstants.Layouts || (SystelabVirtualKeyboardConstants.Layouts = {}));
+    SystelabVirtualKeyboardConstants.LayoutDefinitions = {
+        [SystelabVirtualKeyboardConstants.Layouts.Default]: [
+            '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+            '{tab} q w e r t y u i o p { } |',
+            '{lock} a s d f g h j k l : " {enter}',
+            '{shift} z x c v b n m < > ? {shift}',
+            '{space}',
+        ],
+        [SystelabVirtualKeyboardConstants.Layouts.AlphaNumeric]: [
+            '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+            '{tab} q w e r t y u i o p { } |',
+            '{lock} a s d f g h j k l : " {enter}',
+            '{shift} z x c v b n m < > ? {shift}',
+            '{space}',
+        ],
+        [SystelabVirtualKeyboardConstants.Layouts.AlphaNumericShift]: [
+            '~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}',
+            '{tab} Q W E R T Y U I O P [ ] \\',
+            "{lock} A S D F G H J K L ; ' {enter}",
+            '{shift} Z X C V B N M , . / {shift}',
+            '{space}',
+        ],
+        [SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercase]: [
+            '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+            '{tab} Q W E R T Y U I O P [ ] \\',
+            "{lock} A S D F G H J K L ; ' {enter}",
+            '{shift} Z X C V B N M , . / {shift}',
+            '{space}',
+        ],
+        [SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercaseShift]: [
+            '~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}',
+            '{tab} Q W E R T Y U I O P [ ] \\',
+            "{lock} A S D F G H J K L ; ' {enter}",
+            '{shift} Z X C V B N M , . / {shift}',
+            '{space}',
+        ],
+        [SystelabVirtualKeyboardConstants.Layouts.Numeric]: ['7 8 9 {bksp}', '4 5 6 +', '1 2 3 -', '{shift} 0 . {enter}'],
+        [SystelabVirtualKeyboardConstants.Layouts.NumericShift]: ['! @ # {bksp}', '$ % _ =', '& * ( -', '{shift} ) . {enter}'],
+    };
+    let Button;
+    (function (Button) {
+        Button["Done"] = "{done}";
+        Button["Enter"] = "{enter}";
+        Button["Shift"] = "{shift}";
+        Button["Lock"] = "{lock}";
+        Button["Backspace"] = "{bksp}";
+        Button["Language"] = "{language}";
+        Button["Space"] = "{space}";
+        Button["Tab"] = "{tab}";
+    })(Button = SystelabVirtualKeyboardConstants.Button || (SystelabVirtualKeyboardConstants.Button = {}));
+    let InputMethods;
+    (function (InputMethods) {
+        InputMethods["onlyMouseEvents"] = "onlyMouseEvents";
+        InputMethods["onlyTouchEvents"] = "onlyTouchEvents";
+    })(InputMethods = SystelabVirtualKeyboardConstants.InputMethods || (SystelabVirtualKeyboardConstants.InputMethods = {}));
+    let InputModes;
+    (function (InputModes) {
+        InputModes["text"] = "text";
+        InputModes["numeric"] = "numeric";
+        InputModes["password"] = "password";
+    })(InputModes = SystelabVirtualKeyboardConstants.InputModes || (SystelabVirtualKeyboardConstants.InputModes = {}));
+})(SystelabVirtualKeyboardConstants || (SystelabVirtualKeyboardConstants = {}));
 
 const VIRTUAL_KEYBOARD_CONFIG = new InjectionToken('VIRTUAL_KEYBOARD_CONFIG');
 
@@ -64,36 +110,18 @@ class SystelabVirtualKeyboardComponent {
         this.elementRef = elementRef;
         this.virtualKeyboardConfig = virtualKeyboardConfig;
         this.debug = false;
-        this.selectedLayout = SystelabVirtualKeyboardLayouts.default;
+        this.selectedLayout = SystelabVirtualKeyboardConstants.Layouts.Default;
         this.caretPosition = null;
         this.caretPositionEnd = null;
         this.shiftPressed = false;
+        this.capsLockOn = false;
         this.closePanel = new EventEmitter();
     }
     ngAfterViewInit() {
-        const layout = {
-            [SystelabVirtualKeyboardLayouts.default]: [
-                '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
-                '{tab} q w e r t y u i o p [ ] \\',
-                "{lock} a s d f g h j k l ; ' {enter}",
-                '{shift} z x c v b n m , . / {shift}',
-                '{space}',
-            ],
-            [SystelabVirtualKeyboardLayouts.shift]: [
-                '~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}',
-                '{tab} Q W E R T Y U I O P { } |',
-                '{lock} A S D F G H J K L : " {enter}',
-                '{shift} Z X C V B N M &lt; &gt; ? {shift}',
-                '{space}',
-            ],
-            [SystelabVirtualKeyboardLayouts.numeric]: ['7 8 9', '4 5 6', '1 2 3', '0 {bksp}'],
-        };
         const keyboardOptions = this.prepareKeyboardConfig();
         this.keyboard = new SimpleKeyboard('.simple-keyboard', keyboardOptions);
+        this.setButtonClasses();
         this.setLayout(this.selectedLayout);
-        if (this.debug) {
-            console.log('Layout: ', layout);
-        }
     }
     setActiveInput(input) {
         this.activeInputElement = input;
@@ -117,46 +145,26 @@ class SystelabVirtualKeyboardComponent {
         }
     }
     prepareKeyboardConfig() {
-        const layout = {
-            [SystelabVirtualKeyboardLayouts.default]: [
-                '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
-                '{tab} q w e r t y u i o p [ ] \\',
-                "{lock} a s d f g h j k l ; ' {enter}",
-                '{shift} z x c v b n m , . / {shift}',
-                '{space}',
-            ],
-            [SystelabVirtualKeyboardLayouts.shift]: [
-                '~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}',
-                '{tab} Q W E R T Y U I O P { } |',
-                '{lock} A S D F G H J K L : " {enter}',
-                '{shift} Z X C V B N M &lt; &gt; ? {shift}',
-                '{space}',
-            ],
-            [SystelabVirtualKeyboardLayouts.numeric]: ['7 8 9', '4 5 6', '1 2 3', '0 {bksp}'],
-        };
         let keyboardOptions = {
             onKeyPress: (button) => this.handleKeyPress(button),
             mergeDisplay: true,
-            theme: 'hg-theme-default hg-layout-default myTheme',
+            theme: 'hg-theme-default hg-layout-default systelab-virtual-keyboard-theme',
             display: {
-                [SystelabVirtualKeyboardButton.Backspace]: 'delete',
+                [SystelabVirtualKeyboardConstants.Button.Backspace]: 'back',
+                [SystelabVirtualKeyboardConstants.Button.Enter]: 'enter',
+                [SystelabVirtualKeyboardConstants.Button.Lock]: 'lock',
             },
-            buttonTheme: [
-                {
-                    class: 'virtual-keyboard-delete-button',
-                    buttons: `${SystelabVirtualKeyboardButton.Backspace}`,
-                },
-            ],
-            layout,
+            buttonTheme: this.buildButtonThemes(),
+            layout: SystelabVirtualKeyboardConstants.LayoutDefinitions,
         };
         if (this.virtualKeyboardConfig?.hasOwnProperty('inputMethod')) {
-            if (this.virtualKeyboardConfig.inputMethod === SystelabVirtualKeyboardInputMethods.onlyMouseEvents) {
+            if (this.virtualKeyboardConfig.inputMethod === SystelabVirtualKeyboardConstants.InputMethods.onlyMouseEvents) {
                 keyboardOptions = {
                     ...keyboardOptions,
                     useMouseEvents: true,
                 };
             }
-            else if (this.virtualKeyboardConfig.inputMethod === SystelabVirtualKeyboardInputMethods.onlyTouchEvents) {
+            else if (this.virtualKeyboardConfig.inputMethod === SystelabVirtualKeyboardConstants.InputMethods.onlyTouchEvents) {
                 keyboardOptions = {
                     ...keyboardOptions,
                     useTouchEvents: true,
@@ -165,6 +173,25 @@ class SystelabVirtualKeyboardComponent {
         }
         return keyboardOptions;
     }
+    buildButtonThemes() {
+        return [
+            {
+                class: 'virtual-keyboard-delete-button',
+                buttons: `${SystelabVirtualKeyboardConstants.Button.Backspace}`,
+            },
+            {
+                class: 'virtual-keyboard-enter-button',
+                buttons: `${SystelabVirtualKeyboardConstants.Button.Enter}`,
+            },
+            {
+                class: 'virtual-keyboard-function-button',
+                buttons: `${SystelabVirtualKeyboardConstants.Button.Shift} ${SystelabVirtualKeyboardConstants.Button.Lock}`,
+            }
+        ];
+    }
+    setButtonClasses() {
+        this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Shift, 'virtual-keyboard-shift-button');
+    }
     handleKeyPress(button, e) {
         if (this.debug) {
             console.log('Key press:', button);
@@ -172,11 +199,31 @@ class SystelabVirtualKeyboardComponent {
         if (button[0] === '&' && button.length > 1) {
             button = new DOMParser().parseFromString(button, 'text/html').body.textContent;
         }
-        if (button === SystelabVirtualKeyboardButton.Shift || button === SystelabVirtualKeyboardButton.Lock) {
-            this.shiftPressed = button === SystelabVirtualKeyboardButton.Shift;
+        if (button === SystelabVirtualKeyboardConstants.Button.Shift) {
+            this.shiftPressed = !this.shiftPressed;
+            this.toggleShiftLayout();
+            if (this.shiftPressed) {
+                this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Shift, 'virtual-keyboard-shift-active');
+                this.addUppercaseClass();
+            }
+            else {
+                this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Shift, 'virtual-keyboard-shift-active');
+                this.removeUppercaseClass();
+            }
+        }
+        else if (button === SystelabVirtualKeyboardConstants.Button.Lock) {
+            this.capsLockOn = !this.capsLockOn;
             this.toggleShiftLayout();
+            if (this.capsLockOn) {
+                this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Lock, 'virtual-keyboard-lock-active');
+                this.addUppercaseClass();
+            }
+            else {
+                this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Lock, 'virtual-keyboard-lock-active');
+                this.removeUppercaseClass();
+            }
         }
-        else if (button === SystelabVirtualKeyboardButton.Done) {
+        else if (button === SystelabVirtualKeyboardConstants.Button.Done) {
             this.closePanel.emit();
             return;
         }
@@ -193,23 +240,39 @@ class SystelabVirtualKeyboardComponent {
         this.dispatchEvents(button);
         if (this.shiftPressed) {
             this.toggleShiftLayout();
+            this.removeUppercaseClass();
         }
-        this.shiftPressed = button === SystelabVirtualKeyboardButton.Shift;
+        this.shiftPressed = false;
+        this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Shift, 'virtual-keyboard-shift-active');
+    }
+    addUppercaseClass() {
+        this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Shift, 'virtual-keyboard-uppercase');
+        this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Lock, 'virtual-keyboard-uppercase');
+        this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Tab, 'virtual-keyboard-uppercase');
+        this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Backspace, 'virtual-keyboard-uppercase');
+        this.keyboard.addButtonTheme(SystelabVirtualKeyboardConstants.Button.Enter, 'virtual-keyboard-uppercase');
+    }
+    removeUppercaseClass() {
+        this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Shift, 'virtual-keyboard-uppercase');
+        this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Lock, 'virtual-keyboard-uppercase');
+        this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Tab, 'virtual-keyboard-uppercase');
+        this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Backspace, 'virtual-keyboard-uppercase');
+        this.keyboard.removeButtonTheme(SystelabVirtualKeyboardConstants.Button.Enter, 'virtual-keyboard-uppercase');
     }
     handleButtonOutput(button) {
         const commonParams = this.getCommonParams();
         let output = this.activeInputElement?.value || '';
         if (!this.isStandardButton(button)) {
-            if (button === SystelabVirtualKeyboardButton.Backspace) {
+            if (button === SystelabVirtualKeyboardConstants.Button.Backspace) {
                 output = this.removeAt(output, ...commonParams);
             }
-            else if (button === SystelabVirtualKeyboardButton.Space) {
+            else if (button === SystelabVirtualKeyboardConstants.Button.Space) {
                 output = this.addStringAt(output, ' ', ...commonParams);
             }
-            else if (button === SystelabVirtualKeyboardButton.Tab) {
+            else if (button === SystelabVirtualKeyboardConstants.Button.Tab) {
                 // Do nothing for tab
             }
-            else if (button === SystelabVirtualKeyboardButton.Enter) {
+            else if (button === SystelabVirtualKeyboardConstants.Button.Enter) {
                 if (this.isTextarea) {
                     output = this.addStringAt(output, '\n', ...commonParams);
                 }
@@ -228,10 +291,10 @@ class SystelabVirtualKeyboardComponent {
     }
     isAcceptedNonStandardButton(button) {
         return [
-            SystelabVirtualKeyboardButton.Backspace.toString(),
-            SystelabVirtualKeyboardButton.Space.toString(),
-            SystelabVirtualKeyboardButton.Tab.toString(),
-            SystelabVirtualKeyboardButton.Enter.toString(),
+            SystelabVirtualKeyboardConstants.Button.Backspace.toString(),
+            SystelabVirtualKeyboardConstants.Button.Space.toString(),
+            SystelabVirtualKeyboardConstants.Button.Tab.toString(),
+            SystelabVirtualKeyboardConstants.Button.Enter.toString(),
         ].includes(button);
     }
     dispatchEvents(button) {
@@ -239,7 +302,7 @@ class SystelabVirtualKeyboardComponent {
         const eventInit = {
             bubbles: true,
             cancelable: true,
-            shiftKey: this.selectedLayout === SystelabVirtualKeyboardLayouts.shift,
+            shiftKey: this.selectedLayout === SystelabVirtualKeyboardConstants.Layouts.AlphaNumericShift,
             key: key,
             code: code,
             location: 0,
@@ -262,7 +325,7 @@ class SystelabVirtualKeyboardComponent {
             key = key.charAt(0).toUpperCase() + key.slice(1);
             code = key;
             // Fix to standard key code
-            if (code.toLowerCase() === SystelabVirtualKeyboardButton.Backspace.slice(1, SystelabVirtualKeyboardButton.Backspace.length - 1).toLowerCase()) {
+            if (code.toLowerCase() === SystelabVirtualKeyboardConstants.Button.Backspace.slice(1, SystelabVirtualKeyboardConstants.Button.Backspace.length - 1).toLowerCase()) {
                 code = 'Backspace';
             }
         }
@@ -274,8 +337,25 @@ class SystelabVirtualKeyboardComponent {
     }
     toggleShiftLayout() {
         const currentLayout = this.keyboard.options.layoutName;
-        const selectedLayout = currentLayout === SystelabVirtualKeyboardLayouts.default ? SystelabVirtualKeyboardLayouts.shift : SystelabVirtualKeyboardLayouts.default;
-        this.setLayout(selectedLayout);
+        let selectedLayout;
+        switch (currentLayout) {
+            case SystelabVirtualKeyboardConstants.Layouts.AlphaNumeric:
+            case SystelabVirtualKeyboardConstants.Layouts.AlphaNumericShift:
+                selectedLayout = currentLayout === SystelabVirtualKeyboardConstants.Layouts.AlphaNumeric ? SystelabVirtualKeyboardConstants.Layouts.AlphaNumericShift : SystelabVirtualKeyboardConstants.Layouts.AlphaNumeric;
+                break;
+            case SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercase:
+            case SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercaseShift:
+                selectedLayout = currentLayout === SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercase ? SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercaseShift : SystelabVirtualKeyboardConstants.Layouts.AlphaNumericUppercase;
+                break;
+            case SystelabVirtualKeyboardConstants.Layouts.Numeric:
+            case SystelabVirtualKeyboardConstants.Layouts.NumericShift:
+                selectedLayout = currentLayout === SystelabVirtualKeyboardConstants.Layouts.Numeric ? SystelabVirtualKeyboardConstants.Layouts.NumericShift : SystelabVirtualKeyboardConstants.Layouts.Numeric;
+                break;
+            default:
+        }
+        if (selectedLayout) {
+            this.setLayout(selectedLayout);
+        }
     }
     isStandardButton(button) {
         return button && !(button[0] === '{' && button[button.length - 1] === '}');
@@ -391,12 +471,12 @@ class SystelabVirtualKeyboardComponent {
         this.caretPosition = position;
         this.caretPositionEnd = endPosition;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardComponent, deps: [{ token: i0.ElementRef }, { token: VIRTUAL_KEYBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SystelabVirtualKeyboardComponent, isStandalone: true, selector: "systelab-virtual-keyboard.component", outputs: { closePanel: "closePanel" }, host: { listeners: { "window:keyup": "handleKeyUp($event)", "window:pointerup": "handleMouseUp($event)", "window:mouseup": "handleMouseUp($event)" } }, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.\n  ~ NOTICE:  All information contained herein is and remains the property of Instrumentation Laboratory Company and its\n  ~ affiliates, if any.  The intellectual and technical concepts contained herein are proprietary to Instrumentation\n  ~ Laboratory Company and its affiliates and may be covered by U.S. and foreign patents and patent applications, and/or\n  ~ are protected by trade secret or copyright law. Dissemination of this information or reproduction of this material is\n  ~ strictly forbidden unless prior written permission is Instrumentation Laboratory Company.\n  -->\n\n<div class=\"simple-keyboard\"></div>\n", styles: [":host{width:100%}.simple-keyboard.hg-theme-default.myTheme{font-family:var(--systelab-virtual-keyboard-font-family)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardComponent, deps: [{ token: i0.ElementRef }, { token: VIRTUAL_KEYBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SystelabVirtualKeyboardComponent, isStandalone: true, selector: "systelab-virtual-keyboard.component", outputs: { closePanel: "closePanel" }, host: { listeners: { "window:keyup": "handleKeyUp($event)", "window:pointerup": "handleMouseUp($event)", "window:mouseup": "handleMouseUp($event)" } }, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.\n  ~ NOTICE:  All information contained herein is and remains the property of Instrumentation Laboratory Company and its\n  ~ affiliates, if any.  The intellectual and technical concepts contained herein are proprietary to Instrumentation\n  ~ Laboratory Company and its affiliates and may be covered by U.S. and foreign patents and patent applications, and/or\n  ~ are protected by trade secret or copyright law. Dissemination of this information or reproduction of this material is\n  ~ strictly forbidden unless prior written permission is Instrumentation Laboratory Company.\n  -->\n\n<div class=\"simple-keyboard\"></div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'systelab-virtual-keyboard.component', standalone: true, imports: [], template: "<!--\n  ~ Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.\n  ~ NOTICE:  All information contained herein is and remains the property of Instrumentation Laboratory Company and its\n  ~ affiliates, if any.  The intellectual and technical concepts contained herein are proprietary to Instrumentation\n  ~ Laboratory Company and its affiliates and may be covered by U.S. and foreign patents and patent applications, and/or\n  ~ are protected by trade secret or copyright law. Dissemination of this information or reproduction of this material is\n  ~ strictly forbidden unless prior written permission is Instrumentation Laboratory Company.\n  -->\n\n<div class=\"simple-keyboard\"></div>\n", styles: [":host{width:100%}.simple-keyboard.hg-theme-default.myTheme{font-family:var(--systelab-virtual-keyboard-font-family)}\n"] }]
+            args: [{ selector: 'systelab-virtual-keyboard.component', standalone: true, imports: [], template: "<!--\n  ~ Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.\n  ~ NOTICE:  All information contained herein is and remains the property of Instrumentation Laboratory Company and its\n  ~ affiliates, if any.  The intellectual and technical concepts contained herein are proprietary to Instrumentation\n  ~ Laboratory Company and its affiliates and may be covered by U.S. and foreign patents and patent applications, and/or\n  ~ are protected by trade secret or copyright law. Dissemination of this information or reproduction of this material is\n  ~ strictly forbidden unless prior written permission is Instrumentation Laboratory Company.\n  -->\n\n<div class=\"simple-keyboard\"></div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -428,7 +508,7 @@ class SystelabVirtualKeyboardOverlayService {
     isOpen() {
         return this.open;
     }
-    create(inputOrigin, showKeyboardButtonElement, fixedBottom, layout = SystelabVirtualKeyboardLayouts.default) {
+    create(inputOrigin, showKeyboardButtonElement, fixedBottom, layout = SystelabVirtualKeyboardConstants.Layouts.Default) {
         this.inputOrigin = inputOrigin;
         this.fixedBottom = fixedBottom;
         this.showKeyboardButtonElement = showKeyboardButtonElement;
@@ -550,7 +630,7 @@ class SystelabVirtualKeyboardOverlayService {
         ]);
     }
     getOverlaySize() {
-        const overlayWidth = this.layout === SystelabVirtualKeyboardLayouts.numeric ? '400px' : '1200px';
+        const overlayWidth = this.layout === SystelabVirtualKeyboardConstants.Layouts.Numeric ? '331px' : '1200px';
         return {
             width: overlayWidth,
             maxWidth: overlayWidth,
@@ -576,10 +656,10 @@ class SystelabVirtualKeyboardOverlayService {
         const extraWidth = overlayWidth - inputWidth;
         return Math.abs(extraWidth) / 2;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -714,22 +794,22 @@ class SystelabVirtualKeyboardDirective {
             return this.config.layout;
         }
         if (this.isInputAlphabetic(activeInputElement)) {
-            return SystelabVirtualKeyboardLayouts.default;
+            return SystelabVirtualKeyboardConstants.Layouts.AlphaNumeric;
         }
         else if (this.isInputNumeric(activeInputElement)) {
-            return SystelabVirtualKeyboardLayouts.numeric;
+            return SystelabVirtualKeyboardConstants.Layouts.Numeric;
         }
         else {
-            return SystelabVirtualKeyboardLayouts.default;
+            return SystelabVirtualKeyboardConstants.Layouts.AlphaNumeric;
         }
     }
     isInputAlphabetic(activeInputElement) {
         const inputMode = this.getInputMode(activeInputElement);
-        return inputMode && [SystelabVirtualKeyboardInputModes.text, SystelabVirtualKeyboardInputModes.password].some((i) => i === inputMode);
+        return inputMode && [SystelabVirtualKeyboardConstants.InputModes.text, SystelabVirtualKeyboardConstants.InputModes.password].some((i) => i === inputMode);
     }
     isInputNumeric(activeInputElement) {
         const inputMode = this.getInputMode(activeInputElement);
-        return inputMode && [SystelabVirtualKeyboardInputModes.numeric].some((i) => i === inputMode);
+        return inputMode && [SystelabVirtualKeyboardConstants.InputModes.numeric].some((i) => i === inputMode);
     }
     getInputMode(activeInputElement) {
         return activeInputElement?.inputMode ?? activeInputElement?.type;
@@ -750,10 +830,10 @@ class SystelabVirtualKeyboardDirective {
             this.showKeyboardButtonElement = child;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardDirective, deps: [{ token: i0.ElementRef }, { token: SystelabVirtualKeyboardOverlayService }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: VIRTUAL_KEYBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SystelabVirtualKeyboardDirective, isStandalone: false, selector: "input[vkEnabled], textarea[vkEnabled]", inputs: { vkEnabled: "vkEnabled", vkFixedBottom: "vkFixedBottom", vkDebug: "vkDebug", vkConfig: "vkConfig" }, host: { listeners: { "window:touchmove": "onDocumentScroll($event)", "window:touchend": "onDocumentScroll($event)", "window:wheel": "onDocumentScroll($event)", "document:scroll": "onDocumentScroll($event)", "click": "onClick($event)", "touchend": "onTouchEnd($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardDirective, deps: [{ token: i0.ElementRef }, { token: SystelabVirtualKeyboardOverlayService }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: VIRTUAL_KEYBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: SystelabVirtualKeyboardDirective, isStandalone: false, selector: "input[vkEnabled], textarea[vkEnabled]", inputs: { vkEnabled: "vkEnabled", vkFixedBottom: "vkFixedBottom", vkDebug: "vkDebug", vkConfig: "vkConfig" }, host: { listeners: { "window:touchmove": "onDocumentScroll($event)", "window:touchend": "onDocumentScroll($event)", "window:wheel": "onDocumentScroll($event)", "document:scroll": "onDocumentScroll($event)", "click": "onClick($event)", "touchend": "onTouchEnd($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[vkEnabled], textarea[vkEnabled]',
@@ -820,11 +900,11 @@ class SystelabVirtualKeyboardModule {
             providers: [],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardModule, declarations: [SystelabVirtualKeyboardDirective], imports: [CommonModule, OverlayModule], exports: [SystelabVirtualKeyboardDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardModule, imports: [CommonModule, OverlayModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardModule, declarations: [SystelabVirtualKeyboardDirective], imports: [CommonModule, OverlayModule], exports: [SystelabVirtualKeyboardDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardModule, imports: [CommonModule, OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SystelabVirtualKeyboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SystelabVirtualKeyboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
@@ -841,5 +921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SystelabVirtualKeyboardButton, SystelabVirtualKeyboardDirective, SystelabVirtualKeyboardInputMethods, SystelabVirtualKeyboardInputModes, SystelabVirtualKeyboardLayouts, SystelabVirtualKeyboardModule, factory };
+export { SystelabVirtualKeyboardConstants, SystelabVirtualKeyboardDirective, SystelabVirtualKeyboardModule, factory };
 //# sourceMappingURL=systelab-virtual-keyboard.mjs.map