systelab-virtual-keyboard 0.0.1

package/fesm2022/systelab-virtual-keyboard.mjs

@@ -0,0 +1,739 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Component, HostListener, Output, Injectable, Directive, Inject, Optional, Input, NgModule } from '@angular/core';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { ComponentPortal } from '@angular/cdk/portal';
+import SimpleKeyboard from 'simple-keyboard';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+/*
+ * Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.
+ * NOTICE:  All information contained herein is and remains the property of Instrumentation Laboratory Company and its
+ * affiliates, if any.  The intellectual and technical concepts contained herein are proprietary to Instrumentation
+ * Laboratory Company and its affiliates and may be covered by U.S. and foreign patents and patent applications, and/or
+ * 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 SystelabVirtualKeyboardInputTypes;
+(function (SystelabVirtualKeyboardInputTypes) {
+    SystelabVirtualKeyboardInputTypes["text"] = "text";
+    SystelabVirtualKeyboardInputTypes["number"] = "number";
+    SystelabVirtualKeyboardInputTypes["password"] = "password";
+})(SystelabVirtualKeyboardInputTypes || (SystelabVirtualKeyboardInputTypes = {}));
+
+const VIRTUAL_KEYBOARD_CONFIG = new InjectionToken('VIRTUAL_KEYBOARD_CONFIG');
+
+class SystelabVirtualKeyboardComponent {
+    handleKeyUp(event) {
+        if (event.isTrusted) {
+            this.caretEventHandler(event);
+        }
+    }
+    handleMouseUp(event) {
+        this.caretEventHandler(event);
+    }
+    handleSelect(event) {
+        this.caretEventHandler(event);
+    }
+    handleSelectionChange(event) {
+        this.caretEventHandler(event);
+    }
+    get maxLength() {
+        return this.activeInputElement?.maxLength ?? -1;
+    }
+    get isTextarea() {
+        return this.activeInputElement?.type === 'textarea';
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.debug = false;
+        this.selectedLayout = SystelabVirtualKeyboardLayouts.default;
+        this.caretPosition = null;
+        this.caretPositionEnd = null;
+        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]: [
+                '~ ! @ # $ % ^ & * ( ) _ + {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.numeric]: ['7 8 9', '4 5 6', '1 2 3', '0 {bksp}'],
+        };
+        this.keyboard = new SimpleKeyboard('.simple-keyboard', {
+            onKeyPress: (button) => this.handleKeyPress(button),
+            mergeDisplay: true,
+            display: {
+                [SystelabVirtualKeyboardButton.Backspace]: 'delete',
+            },
+            buttonTheme: [
+                {
+                    class: 'virtual-keyboard-delete-button',
+                    buttons: `${SystelabVirtualKeyboardButton.Backspace}`,
+                },
+            ],
+            layout,
+        });
+        this.setLayout(this.selectedLayout);
+        if (this.debug) {
+            console.log('Layout: ', layout);
+        }
+    }
+    setActiveInput(input) {
+        this.activeInputElement = input;
+        if (this.debug) {
+            const inputType = this.activeInputElement?.type;
+            console.log('Layout:', `${inputType}_${this.selectedLayout}`);
+        }
+        let selectionStart;
+        let selectionEnd;
+        if (this.isInputNumeric(input)) {
+            selectionStart = this.activeInputElement.value.toString().length;
+            selectionEnd = this.activeInputElement.value.toString().length;
+        }
+        else {
+            selectionStart = this.activeInputElement.selectionStart;
+            selectionEnd = this.activeInputElement.selectionEnd;
+        }
+        this.setCaretPosition(selectionStart, selectionEnd);
+        if (this.debug) {
+            console.log('Caret start at:', this.caretPosition, this.caretPositionEnd);
+        }
+        this.focusActiveInput();
+    }
+    setLayout(layout) {
+        this.selectedLayout = layout;
+        if (this.keyboard) {
+            this.keyboard.setOptions({
+                layoutName: layout,
+            });
+        }
+    }
+    isInputAlphabetic(activeInputElement) {
+        const inputType = activeInputElement?.type;
+        return inputType && [SystelabVirtualKeyboardInputTypes.text, SystelabVirtualKeyboardInputTypes.password].some((i) => i === inputType);
+    }
+    isInputNumeric(activeInputElement) {
+        const inputType = activeInputElement?.type;
+        return inputType && [SystelabVirtualKeyboardInputTypes.number].some((i) => i === inputType);
+    }
+    handleKeyPress(button, e) {
+        if (this.debug) {
+            console.log('Key press:', button);
+        }
+        if (button === SystelabVirtualKeyboardButton.Shift || button === SystelabVirtualKeyboardButton.Lock) {
+            this.toggleShift();
+        }
+        else if (button === SystelabVirtualKeyboardButton.Done) {
+            this.closePanel.emit();
+            return;
+        }
+        if (!this.isAcceptedNonStandardButton(button) && !this.isStandardButton(button)) {
+            return;
+        }
+        const output = this.handleButtonOutput(button);
+        if (this.activeInputElement) {
+            this.activeInputElement.value = output;
+            if (this.debug) {
+                console.log('Caret at:', this.caretPosition, this.caretPositionEnd, 'Button', e);
+            }
+        }
+        this.dispatchEvents(button);
+    }
+    handleButtonOutput(button) {
+        const commonParams = this.getCommonParams();
+        let output = this.activeInputElement?.value || '';
+        if (!this.isStandardButton(button)) {
+            if (button === SystelabVirtualKeyboardButton.Backspace) {
+                output = this.removeAt(output, ...commonParams);
+            }
+            else if (button === SystelabVirtualKeyboardButton.Space) {
+                output = this.addStringAt(output, ' ', ...commonParams);
+            }
+            else if (button === SystelabVirtualKeyboardButton.Tab) {
+                output = this.addStringAt(output, '\t', ...commonParams);
+            }
+            else if (button === SystelabVirtualKeyboardButton.Enter) {
+                if (this.isTextarea) {
+                    output = this.addStringAt(output, '\n', ...commonParams);
+                }
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            output = this.addStringAt(output, button, ...commonParams);
+        }
+        return output;
+    }
+    getCommonParams() {
+        return [this.caretPosition || 0, this.caretPositionEnd || 0, true];
+    }
+    isAcceptedNonStandardButton(button) {
+        return [
+            SystelabVirtualKeyboardButton.Backspace.toString(),
+            SystelabVirtualKeyboardButton.Space.toString(),
+            SystelabVirtualKeyboardButton.Tab.toString(),
+            SystelabVirtualKeyboardButton.Enter.toString(),
+        ].includes(button);
+    }
+    dispatchEvents(button) {
+        const { key, code } = this.convertFromButtonToCode(button);
+        const eventInit = {
+            bubbles: true,
+            cancelable: true,
+            shiftKey: this.selectedLayout === SystelabVirtualKeyboardLayouts.shift,
+            key: key,
+            code: code,
+            location: 0,
+        };
+        // Simulate all needed events on base element
+        this.activeInputElement?.dispatchEvent(new KeyboardEvent('keydown', eventInit));
+        this.activeInputElement?.dispatchEvent(new KeyboardEvent('keypress', eventInit));
+        this.activeInputElement?.dispatchEvent(new Event('input', { bubbles: true }));
+        this.activeInputElement?.dispatchEvent(new KeyboardEvent('keyup', eventInit));
+        // And set focus to input
+        this.focusActiveInput();
+    }
+    /*
+     * AUXILIARY METHODS
+     * */
+    convertFromButtonToCode(button) {
+        let key;
+        let code;
+        if (button.includes('{') && button.includes('}')) {
+            // Capitalize name
+            key = button.slice(1, button.length - 1).toLowerCase();
+            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()) {
+                code = 'Backspace';
+            }
+        }
+        else {
+            key = button;
+            code = Number.isInteger(Number(button)) ? `Digit${button}` : `Key${button.toUpperCase()}`;
+        }
+        return { key, code };
+    }
+    focusActiveInput() {
+        this.activeInputElement?.focus();
+        if (!this.isInputNumeric(this.activeInputElement)) {
+            this.activeInputElement?.setSelectionRange(this.caretPosition, this.caretPositionEnd);
+        }
+    }
+    toggleShift() {
+        let currentLayout = this.keyboard.options.layoutName;
+        let selectedLayout = currentLayout === SystelabVirtualKeyboardLayouts.default ? SystelabVirtualKeyboardLayouts.shift : SystelabVirtualKeyboardLayouts.default;
+        this.setLayout(selectedLayout);
+    }
+    isStandardButton(button) {
+        return button && !(button[0] === '{' && button[button.length - 1] === '}');
+    }
+    /*
+     * OUTPUT STRING METHODS
+     * */
+    removeAt(source, position = source.length, positionEnd = source.length, moveCaret = false) {
+        if (position === 0 && positionEnd === 0) {
+            return source;
+        }
+        let output;
+        if (position === positionEnd) {
+            if (position && position >= 0) {
+                output = source.slice(0, position - 1) + source.slice(position);
+                if (moveCaret) {
+                    this.updateCaretPosition(1, true);
+                }
+            }
+            else {
+                output = source.slice(0, -1);
+                if (moveCaret) {
+                    this.updateCaretPosition(1, true);
+                }
+            }
+        }
+        else {
+            output = source.slice(0, position) + source.slice(positionEnd);
+            if (moveCaret) {
+                this.setCaretPosition(position);
+            }
+        }
+        return output;
+    }
+    addStringAt(source, str, position = source.length, positionEnd = source.length, moveCaret = false) {
+        if (this.maxLength !== -1 && source.length >= this.maxLength) {
+            return source;
+        }
+        let output;
+        if (!position && position !== 0) {
+            output = source + str;
+        }
+        else {
+            output = [source.slice(0, position), str, source.slice(positionEnd)].join('');
+            if (moveCaret) {
+                this.updateCaretPosition(str.length, false);
+            }
+        }
+        return output;
+    }
+    /*
+     * CARET METHODS
+     * */
+    caretEventHandler(event) {
+        let targetTagName = '';
+        if (event.target.tagName) {
+            targetTagName = event.target.tagName.toLowerCase();
+        }
+        const isTextInput = targetTagName === 'textarea' ||
+            (targetTagName === 'input' && ['text', 'search', 'email', 'password', 'url', 'tel'].includes(event.target.type));
+        const isKeyboard = event.target === this.elementRef.nativeElement || (event.target && this.elementRef.nativeElement.contains(event.target));
+        if (isTextInput && this.activeInputElement == event.target) {
+            /**
+             * Tracks current cursor position
+             * As keys are pressed, text will be added/removed at that position within the input.
+             */
+            this.setCaretPosition(event.target.selectionStart, event.target.selectionEnd);
+            if (this.debug) {
+                console.log('Caret at:', this.caretPosition, this.caretPositionEnd, event && event.target.tagName.toLowerCase(), event);
+            }
+        }
+        else if (event.type === 'pointerup' && this.activeInputElement === document.activeElement) {
+            return;
+        }
+        else if (!isKeyboard && event?.type !== 'selectionchange') {
+            /**
+             * we must ensure caretPosition doesn't persist once reactivated.
+             */
+            this.setCaretPosition(null);
+            if (this.debug) {
+                console.log(`Caret position reset due to "${event?.type}" event`, event);
+            }
+        }
+    }
+    updateCaretPosition(length, minus = false) {
+        const newCaretPos = this.computeNewCaretPosition(length, minus);
+        this.setCaretPosition(newCaretPos);
+        // Scroll to bottom
+        setTimeout(() => {
+            this.activeInputElement?.scrollTo({
+                top: this.activeInputElement.scrollHeight,
+            });
+        });
+    }
+    computeNewCaretPosition(length, minus = false) {
+        let caretPosition = this.caretPosition;
+        if (caretPosition != null) {
+            if (minus) {
+                if (caretPosition > 0)
+                    caretPosition = caretPosition - length;
+            }
+            else {
+                caretPosition = caretPosition + length;
+            }
+        }
+        return caretPosition;
+    }
+    setCaretPosition(position, endPosition = position) {
+        this.caretPosition = position;
+        this.caretPositionEnd = endPosition;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SystelabVirtualKeyboardComponent, isStandalone: true, selector: "systelab-virtual-keyboard.component", outputs: { closePanel: "closePanel" }, host: { listeners: { "window:keyup": "handleKeyUp($event)", "window:pointerup": "handleMouseUp($event)", "window:select": "handleSelect($event)", "window:selectionchange": "handleSelectionChange($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%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", 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%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }], handleMouseUp: [{
+                type: HostListener,
+                args: ['window:pointerup', ['$event']]
+            }], handleSelect: [{
+                type: HostListener,
+                args: ['window:select', ['$event']]
+            }], handleSelectionChange: [{
+                type: HostListener,
+                args: ['window:selectionchange', ['$event']]
+            }], closePanel: [{
+                type: Output
+            }] } });
+
+class SystelabVirtualKeyboardOverlayService {
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    isCreated() {
+        return !!this.overlayRef;
+    }
+    isOpen() {
+        return this.open;
+    }
+    create(inputOrigin, fixedBottom, layout = SystelabVirtualKeyboardLayouts.default) {
+        this.layout = layout;
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            disposeOnNavigation: true,
+        });
+        this.overlayRef.addPanelClass('virtual-keyboard-overlay-pane');
+        if (fixedBottom) {
+            this.overlayRef.addPanelClass('virtual-keyboard-fixed-bottom');
+        }
+        this.updatePositionStrategy(inputOrigin, fixedBottom);
+        this.updateSize();
+        this.open = true;
+        return this.overlayRef.attach(new ComponentPortal(SystelabVirtualKeyboardComponent));
+    }
+    destroy() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+        this.overlayRef = null;
+        this.open = false;
+    }
+    hasAttached() {
+        return this.overlayRef?.hasAttached();
+    }
+    updatePositionStrategy(inputOrigin, fixedBottom) {
+        this.overlayRef.updatePositionStrategy(this.getPositionStrategy(inputOrigin, fixedBottom));
+    }
+    updateSize() {
+        this.overlayRef.updateSize(this.getOverlaySize());
+    }
+    getPositionStrategy(inputOrigin, fixedBottom) {
+        if (fixedBottom) {
+            return this.overlay.position().global().centerHorizontally().bottom('0');
+        }
+        const pointWithDimensions = this.computePositionStrategyOrigin(inputOrigin);
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(pointWithDimensions)
+            .withFlexibleDimensions(false)
+            .withLockedPosition(true)
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+        ]);
+    }
+    getOverlaySize() {
+        const overlayWidth = this.layout === SystelabVirtualKeyboardLayouts.numeric ? '400px' : '1200px';
+        return {
+            width: overlayWidth,
+            maxWidth: overlayWidth,
+            minWidth: overlayWidth,
+        };
+    }
+    computePositionStrategyOrigin(inputOrigin) {
+        const overlayOffsetX = this.computeOverlayOffsetX(inputOrigin);
+        const { width: overlayWidthString } = this.getOverlaySize();
+        const overlayWidth = Number(overlayWidthString.replace('px', ''));
+        const { x, y, width, height } = inputOrigin.getBoundingClientRect();
+        return {
+            width,
+            height,
+            x: width < overlayWidth ? x - overlayOffsetX : x + overlayOffsetX,
+            y,
+        };
+    }
+    computeOverlayOffsetX(inputOrigin) {
+        const { width: overlayWidthString } = this.getOverlaySize();
+        const overlayWidth = Number(overlayWidthString.replace('px', ''));
+        const inputWidth = inputOrigin.getBoundingClientRect().width;
+        const extraWidth = overlayWidth - inputWidth;
+        return Math.abs(extraWidth) / 2;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.Overlay }] });
+
+/*
+ * Copyright (c) 2020 - 2024 - Instrumentation Laboratory Company and Systelab Technologies, SA. All rights reserved.
+ * NOTICE:  All information contained herein is and remains the property of Instrumentation Laboratory Company and its
+ * affiliates, if any.  The intellectual and technical concepts contained herein are proprietary to Instrumentation
+ * Laboratory Company and its affiliates and may be covered by U.S. and foreign patents and patent applications, and/or
+ * 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.
+ */
+class SystelabVirtualKeyboardDirective {
+    onDocumentClick(event) {
+        const simpleKeyboardElement = document.querySelector('.simple-keyboard');
+        const showKeyboardButtonClicked = event.target?.classList.contains('virtual-keyboard-show-button');
+        if (!simpleKeyboardElement?.contains(event.target) &&
+            !this.elementRef?.nativeElement?.contains(event.target) &&
+            !this.showKeyboardButtonElement?.contains(event.target) &&
+            !showKeyboardButtonClicked) {
+            if (this.overlayService.isCreated()) {
+                this.overlayService.destroy();
+            }
+        }
+    }
+    onDocumentScroll() {
+        if (this.overlayService.isCreated()) {
+            // update position and size on scroll
+        }
+    }
+    set vkEnabled(enabled) {
+        if (typeof enabled === 'string') {
+            this.enabled = true;
+        }
+        else {
+            this.enabled = enabled;
+        }
+    }
+    ;
+    get vkEnabled() {
+        return this.enabled;
+    }
+    get vkFixedBottom() {
+        return this.fixedBottom;
+    }
+    set vkFixedBottom(fixedBottom) {
+        if (typeof fixedBottom === 'string') {
+            this.fixedBottom = true;
+        }
+        else {
+            this.fixedBottom = fixedBottom;
+        }
+    }
+    get vkDebug() {
+        return this.debug;
+    }
+    set vkDebug(debug) {
+        this.debug = debug;
+    }
+    get vkConfig() {
+        return this.config;
+    }
+    set vkConfig(config) {
+        this.config = config;
+    }
+    constructor(elementRef, overlayService, renderer, document, virtualKeyboardConfig) {
+        this.elementRef = elementRef;
+        this.overlayService = overlayService;
+        this.renderer = renderer;
+        this.document = document;
+        this.virtualKeyboardConfig = virtualKeyboardConfig;
+        this.enabled = false;
+        this.fixedBottom = false;
+        this.debug = false;
+        this.config = this.virtualKeyboardConfig;
+    }
+    ngOnInit() {
+        this.attachKeyboardIcon();
+    }
+    ngAfterViewInit() {
+        if (this.vkEnabled) {
+            const keyboardIcon = this.elementRef.nativeElement.parentElement.querySelector('i');
+            keyboardIcon.addEventListener('click', this.togglePanel.bind(this));
+        }
+    }
+    ngOnDestroy() {
+        if (this.overlayService.isCreated()) {
+            this.overlayService.destroy();
+        }
+    }
+    togglePanel() {
+        if (this.overlayService.isOpen()) {
+            this.closePanel();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    openPanel() {
+        if (this.overlayService.isCreated()) {
+            this.overlayService.destroy();
+        }
+        if (this.overlayService.hasAttached()) {
+            return;
+        }
+        const currentLayout = this.getLayout(this.elementRef.nativeElement);
+        this.panelRef = this.overlayService.create(this.inputOrigin(), this.vkFixedBottom, currentLayout);
+        this.panelRef.instance.debug = this.vkDebug;
+        this.panelRef.instance.setActiveInput(this.elementRef.nativeElement);
+        this.panelRef.instance.setLayout(currentLayout);
+        this.panelRef.instance.closePanel.subscribe(() => this.closePanel());
+    }
+    getLayout(activeInputElement) {
+        if (this.config?.hasOwnProperty('layout')) {
+            return this.config.layout;
+        }
+        if (this.isInputAlphabetic(activeInputElement)) {
+            return SystelabVirtualKeyboardLayouts.default;
+        }
+        else if (this.isInputNumeric(activeInputElement)) {
+            return SystelabVirtualKeyboardLayouts.numeric;
+        }
+        else {
+            return SystelabVirtualKeyboardLayouts.default;
+        }
+    }
+    isInputAlphabetic(activeInputElement) {
+        const inputType = activeInputElement?.type;
+        return inputType && [SystelabVirtualKeyboardInputTypes.text, SystelabVirtualKeyboardInputTypes.password].some((i) => i === inputType);
+    }
+    isInputNumeric(activeInputElement) {
+        const inputType = activeInputElement?.type;
+        return inputType && [SystelabVirtualKeyboardInputTypes.number].some((i) => i === inputType);
+    }
+    closePanel() {
+        this.overlayService.destroy();
+    }
+    inputOrigin() {
+        return this.elementRef.nativeElement;
+    }
+    attachKeyboardIcon() {
+        if (this.vkEnabled) {
+            const child = this.document.createElement('i');
+            child.classList.add('fa');
+            child.classList.add('fa-keyboard');
+            child.classList.add('virtual-keyboard-show-button');
+            this.renderer.appendChild(this.elementRef.nativeElement.parentElement, child);
+            this.showKeyboardButtonElement = child;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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: "17.0.9", type: SystelabVirtualKeyboardDirective, selector: "input[vkEnabled], textarea[vkEnabled]", inputs: { vkEnabled: "vkEnabled", vkFixedBottom: "vkFixedBottom", vkDebug: "vkDebug", vkConfig: "vkConfig" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:touchmove": "onDocumentScroll($event)", "window:touchend": "onDocumentScroll($event)", "window:wheel": "onDocumentScroll($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[vkEnabled], textarea[vkEnabled]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SystelabVirtualKeyboardOverlayService }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [VIRTUAL_KEYBOARD_CONFIG]
+                }] }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onDocumentScroll: [{
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchend', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:wheel', ['$event']]
+            }], vkEnabled: [{
+                type: Input
+            }], vkFixedBottom: [{
+                type: Input
+            }], vkDebug: [{
+                type: Input
+            }], vkConfig: [{
+                type: Input
+            }] } });
+
+const factory = () => {
+    const systelabVirtualKeyboardModuleCreated = factory._systelabVirtualKeyboardModuleCreated || false;
+    if (systelabVirtualKeyboardModuleCreated) {
+        throw new Error('SystelabVirtualKeyboardModuleCreated.forRoot imported to many times');
+    }
+    factory._systelabVirtualKeyboardModuleCreated = true;
+};
+class SystelabVirtualKeyboardModule {
+    static forRoot(conf) {
+        return {
+            ngModule: SystelabVirtualKeyboardModule,
+            providers: [
+                SystelabVirtualKeyboardOverlayService,
+                {
+                    provide: VIRTUAL_KEYBOARD_CONFIG, useValue: conf
+                }
+            ]
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: SystelabVirtualKeyboardModule,
+            providers: [],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardModule, declarations: [SystelabVirtualKeyboardDirective], imports: [CommonModule, OverlayModule], exports: [SystelabVirtualKeyboardDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardModule, imports: [CommonModule, OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SystelabVirtualKeyboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, OverlayModule],
+                    declarations: [SystelabVirtualKeyboardDirective],
+                    exports: [SystelabVirtualKeyboardDirective],
+                }]
+        }] });
+
+/*
+ * Public API Surface of systelab-virtual-keyboard
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SystelabVirtualKeyboardButton, SystelabVirtualKeyboardDirective, SystelabVirtualKeyboardInputTypes, SystelabVirtualKeyboardLayouts, SystelabVirtualKeyboardModule, factory };
+//# sourceMappingURL=systelab-virtual-keyboard.mjs.map