@libs-ui/components-inputs-keyboard 0.1.1-1

package/README.md

@@ -0,0 +1,3 @@
+# inputs-keyboard
+
+This library was generated with [Nx](https://nx.dev).

package/defines/keyboard.define.d.ts

@@ -0,0 +1,2 @@
+import { IKeyCode } from '../interfaces/keyboard.interface';
+export declare const keypadConfig: () => Array<IKeyCode>;

package/esm2022/defines/keyboard.define.mjs

@@ -0,0 +1,53 @@
+export const keypadConfig = () => {
+    return [
+        {
+            code: '1',
+            label: '1',
+        },
+        {
+            code: '2',
+            label: '2',
+        },
+        {
+            code: '3',
+            label: '3',
+        },
+        {
+            code: '4',
+            label: '4',
+        },
+        {
+            code: '5',
+            label: '5',
+        },
+        {
+            code: '6',
+            label: '6',
+        },
+        {
+            code: '7',
+            label: '7',
+        },
+        {
+            code: '8',
+            label: '8',
+        },
+        {
+            code: '9',
+            label: '9',
+        },
+        {
+            code: '*',
+            label: '*',
+        },
+        {
+            code: '0',
+            label: '0',
+        },
+        {
+            code: '#',
+            label: '#',
+        },
+    ];
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5Ym9hcmQuZGVmaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMvZGVmaW5lcy9rZXlib2FyZC5kZWZpbmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLEdBQW9CLEVBQUU7SUFDaEQsT0FBTztRQUNMO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtRQUNEO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtRQUNEO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtRQUNEO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtLQUNGLENBQUM7QUFDSixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJS2V5Q29kZSB9IGZyb20gJy4uL2ludGVyZmFjZXMva2V5Ym9hcmQuaW50ZXJmYWNlJztcblxuZXhwb3J0IGNvbnN0IGtleXBhZENvbmZpZyA9ICgpOiBBcnJheTxJS2V5Q29kZT4gPT4ge1xuICByZXR1cm4gW1xuICAgIHtcbiAgICAgIGNvZGU6ICcxJyxcbiAgICAgIGxhYmVsOiAnMScsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnMicsXG4gICAgICBsYWJlbDogJzInLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJzMnLFxuICAgICAgbGFiZWw6ICczJyxcbiAgICB9LFxuICAgIHtcbiAgICAgIGNvZGU6ICc0JyxcbiAgICAgIGxhYmVsOiAnNCcsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnNScsXG4gICAgICBsYWJlbDogJzUnLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJzYnLFxuICAgICAgbGFiZWw6ICc2JyxcbiAgICB9LFxuICAgIHtcbiAgICAgIGNvZGU6ICc3JyxcbiAgICAgIGxhYmVsOiAnNycsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnOCcsXG4gICAgICBsYWJlbDogJzgnLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJzknLFxuICAgICAgbGFiZWw6ICc5JyxcbiAgICB9LFxuICAgIHtcbiAgICAgIGNvZGU6ICcqJyxcbiAgICAgIGxhYmVsOiAnKicsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnMCcsXG4gICAgICBsYWJlbDogJzAnLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJyMnLFxuICAgICAgbGFiZWw6ICcjJyxcbiAgICB9LFxuICBdO1xufTtcbiJdfQ==

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './keyboard.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL2tleWJvYXJkL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9rZXlib2FyZC5jb21wb25lbnQnO1xuIl19

package/esm2022/interfaces/keyboard.interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5Ym9hcmQuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMvaW50ZXJmYWNlcy9rZXlib2FyZC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSUtleUNvZGUge1xuICBjb2RlOiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG59XG4iXX0=

package/esm2022/keyboard.component.mjs

@@ -0,0 +1,46 @@
+import { Component, inject, NgZone, output, signal } from '@angular/core';
+import { keypadConfig } from './defines/keyboard.define';
+import { fromEvent, Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsInputsKeyboardComponent {
+    resultSelectKey = signal('');
+    configKeyCodes = signal(keypadConfig());
+    onDestroy = new Subject();
+    zone = inject(NgZone);
+    outKeyCodeSelected = output();
+    ngAfterViewInit() {
+        fromEvent(document, 'keyup')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((event) => {
+            this.zone.run(() => {
+                this.listenerKeyUp(event);
+            });
+        });
+    }
+    handlerClickItem(event, config) {
+        event?.stopPropagation();
+        this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);
+        this.outKeyCodeSelected.emit(config.code);
+    }
+    listenerKeyUp(event) {
+        const keyCode = event.keyCode;
+        if ((48 <= keyCode && keyCode <= 57) || (96 <= keyCode && keyCode <= 105)) {
+            const config = this.configKeyCodes().find((item) => item.code === `${event.key}`);
+            if (config) {
+                this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);
+                this.outKeyCodeSelected.emit(config.code);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsKeyboardComponent, isStandalone: true, selector: "libs_ui-components-inputs-keyboard", outputs: { outKeyCodeSelected: "outKeyCodeSelected" }, ngImport: i0, template: "<div class=\"libs-ui-inputs-keyboard\">\n  <span class=\"libs-ui-font-h1s flex justify-center mt-[12px] h-[24px]\">{{ resultSelectKey() }}</span>\n  <hr class=\"mt-[12px] mb-[20px]\" />\n  <div class=\"flex w-full justify-center\">\n    <div class=\"flex flex-wrap -mx-2 p-0 m-0\">\n      @for (config of configKeyCodes(); track config) {\n        <div class=\"w-1/3 p-0 m-0 flex justify-center !mb-[28px]\">\n          <div\n            class=\"libs-ui-border-general libs-ui-inputs-keyboard-item libs-ui-font-h1s\"\n            (click)=\"handlerClickItem($event, config)\">\n            {{ config.label }}\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-inputs-keyboard{background-color:#fff;padding:8px 20px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item{display:flex;align-items:center;justify-content:center;border-radius:50%;height:52px;width:52px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item:hover{background-color:#4e4e4e20;cursor:pointer}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-inputs-keyboard', standalone: true, template: "<div class=\"libs-ui-inputs-keyboard\">\n  <span class=\"libs-ui-font-h1s flex justify-center mt-[12px] h-[24px]\">{{ resultSelectKey() }}</span>\n  <hr class=\"mt-[12px] mb-[20px]\" />\n  <div class=\"flex w-full justify-center\">\n    <div class=\"flex flex-wrap -mx-2 p-0 m-0\">\n      @for (config of configKeyCodes(); track config) {\n        <div class=\"w-1/3 p-0 m-0 flex justify-center !mb-[28px]\">\n          <div\n            class=\"libs-ui-border-general libs-ui-inputs-keyboard-item libs-ui-font-h1s\"\n            (click)=\"handlerClickItem($event, config)\">\n            {{ config.label }}\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-inputs-keyboard{background-color:#fff;padding:8px 20px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item{display:flex;align-items:center;justify-content:center;border-radius:50%;height:52px;width:52px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item:hover{background-color:#4e4e4e20;cursor:pointer}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5Ym9hcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMva2V5Ym9hcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMva2V5Ym9hcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBYSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUV6RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBVXJELE1BQU0sT0FBTyx1Q0FBdUM7SUFDeEMsZUFBZSxHQUFHLE1BQU0sQ0FBUyxFQUFFLENBQUMsQ0FBQztJQUNyQyxjQUFjLEdBQUcsTUFBTSxDQUFrQixZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBRTNELFNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBQ2hDLElBQUksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFckIsa0JBQWtCLEdBQUcsTUFBTSxFQUFVLENBQUM7SUFFL0MsZUFBZTtRQUNiLFNBQVMsQ0FBUyxRQUFRLEVBQUUsT0FBTyxDQUFDO2FBQ2pDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO2FBQy9CLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1lBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRTtnQkFDakIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM1QixDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVTLGdCQUFnQixDQUFDLEtBQVksRUFBRSxNQUFnQjtRQUN2RCxLQUFLLEVBQUUsZUFBZSxFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLEdBQUcsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDckUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVPLGFBQWEsQ0FBQyxLQUFhO1FBQ2pDLE1BQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUM7UUFFOUIsSUFBSSxDQUFDLEVBQUUsSUFBSSxPQUFPLElBQUksT0FBTyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLE9BQU8sSUFBSSxPQUFPLElBQUksR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUMxRSxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLEdBQUcsS0FBSyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFFbEYsSUFBSSxNQUFNLEVBQUUsQ0FBQztnQkFDWCxJQUFJLENBQUMsZUFBZSxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsR0FBRyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztnQkFDckUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDNUMsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM1QixDQUFDO3dHQXpDVSx1Q0FBdUM7NEZBQXZDLHVDQUF1QyxxSkNicEQsNHFCQWlCQTs7NEZESmEsdUNBQXVDO2tCQVBuRCxTQUFTOytCQUVFLG9DQUFvQyxjQUNsQyxJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBpbmplY3QsIE5nWm9uZSwgT25EZXN0cm95LCBvdXRwdXQsIHNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsga2V5cGFkQ29uZmlnIH0gZnJvbSAnLi9kZWZpbmVzL2tleWJvYXJkLmRlZmluZSc7XG5pbXBvcnQgeyBJS2V5Q29kZSB9IGZyb20gJy4vaW50ZXJmYWNlcy9rZXlib2FyZC5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgZnJvbUV2ZW50LCBTdWJqZWN0LCB0YWtlVW50aWwgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IElFdmVudCB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtaW5wdXRzLWtleWJvYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL2tleWJvYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2tleWJvYXJkLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0lucHV0c0tleWJvYXJkQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgcHJvdGVjdGVkIHJlc3VsdFNlbGVjdEtleSA9IHNpZ25hbDxzdHJpbmc+KCcnKTtcbiAgcHJvdGVjdGVkIGNvbmZpZ0tleUNvZGVzID0gc2lnbmFsPEFycmF5PElLZXlDb2RlPj4oa2V5cGFkQ29uZmlnKCkpO1xuXG4gIHByaXZhdGUgb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgcHJpdmF0ZSB6b25lID0gaW5qZWN0KE5nWm9uZSk7XG5cbiAgcmVhZG9ubHkgb3V0S2V5Q29kZVNlbGVjdGVkID0gb3V0cHV0PHN0cmluZz4oKTtcblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgZnJvbUV2ZW50PElFdmVudD4oZG9jdW1lbnQsICdrZXl1cCcpXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kpKVxuICAgICAgLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgICAgdGhpcy56b25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgdGhpcy5saXN0ZW5lcktleVVwKGV2ZW50KTtcbiAgICAgICAgfSk7XG4gICAgICB9KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ2xpY2tJdGVtKGV2ZW50OiBFdmVudCwgY29uZmlnOiBJS2V5Q29kZSkge1xuICAgIGV2ZW50Py5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLnJlc3VsdFNlbGVjdEtleS5zZXQoYCR7dGhpcy5yZXN1bHRTZWxlY3RLZXkoKX0ke2NvbmZpZy5sYWJlbH1gKTtcbiAgICB0aGlzLm91dEtleUNvZGVTZWxlY3RlZC5lbWl0KGNvbmZpZy5jb2RlKTtcbiAgfVxuXG4gIHByaXZhdGUgbGlzdGVuZXJLZXlVcChldmVudDogSUV2ZW50KSB7XG4gICAgY29uc3Qga2V5Q29kZSA9IGV2ZW50LmtleUNvZGU7XG5cbiAgICBpZiAoKDQ4IDw9IGtleUNvZGUgJiYga2V5Q29kZSA8PSA1NykgfHwgKDk2IDw9IGtleUNvZGUgJiYga2V5Q29kZSA8PSAxMDUpKSB7XG4gICAgICBjb25zdCBjb25maWcgPSB0aGlzLmNvbmZpZ0tleUNvZGVzKCkuZmluZCgoaXRlbSkgPT4gaXRlbS5jb2RlID09PSBgJHtldmVudC5rZXl9YCk7XG5cbiAgICAgIGlmIChjb25maWcpIHtcbiAgICAgICAgdGhpcy5yZXN1bHRTZWxlY3RLZXkuc2V0KGAke3RoaXMucmVzdWx0U2VsZWN0S2V5KCl9JHtjb25maWcubGFiZWx9YCk7XG4gICAgICAgIHRoaXMub3V0S2V5Q29kZVNlbGVjdGVkLmVtaXQoY29uZmlnLmNvZGUpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub25EZXN0cm95Lm5leHQoKTtcbiAgICB0aGlzLm9uRGVzdHJveS5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibGlicy11aS1pbnB1dHMta2V5Ym9hcmRcIj5cbiAgPHNwYW4gY2xhc3M9XCJsaWJzLXVpLWZvbnQtaDFzIGZsZXgganVzdGlmeS1jZW50ZXIgbXQtWzEycHhdIGgtWzI0cHhdXCI+e3sgcmVzdWx0U2VsZWN0S2V5KCkgfX08L3NwYW4+XG4gIDxociBjbGFzcz1cIm10LVsxMnB4XSBtYi1bMjBweF1cIiAvPlxuICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZ1bGwganVzdGlmeS1jZW50ZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXdyYXAgLW14LTIgcC0wIG0tMFwiPlxuICAgICAgQGZvciAoY29uZmlnIG9mIGNvbmZpZ0tleUNvZGVzKCk7IHRyYWNrIGNvbmZpZykge1xuICAgICAgICA8ZGl2IGNsYXNzPVwidy0xLzMgcC0wIG0tMCBmbGV4IGp1c3RpZnktY2VudGVyICFtYi1bMjhweF1cIj5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cImxpYnMtdWktYm9yZGVyLWdlbmVyYWwgbGlicy11aS1pbnB1dHMta2V5Ym9hcmQtaXRlbSBsaWJzLXVpLWZvbnQtaDFzXCJcbiAgICAgICAgICAgIChjbGljayk9XCJoYW5kbGVyQ2xpY2tJdGVtKCRldmVudCwgY29uZmlnKVwiPlxuICAgICAgICAgICAge3sgY29uZmlnLmxhYmVsIH19XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgfVxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2022/libs-ui-components-inputs-keyboard.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWlucHV0cy1rZXlib2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbnB1dHMva2V5Ym9hcmQvc3JjL2xpYnMtdWktY29tcG9uZW50cy1pbnB1dHMta2V5Ym9hcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/fesm2022/libs-ui-components-inputs-keyboard.mjs

@@ -0,0 +1,105 @@
+import * as i0 from '@angular/core';
+import { signal, inject, NgZone, output, Component } from '@angular/core';
+import { Subject, fromEvent, takeUntil } from 'rxjs';
+
+const keypadConfig = () => {
+    return [
+        {
+            code: '1',
+            label: '1',
+        },
+        {
+            code: '2',
+            label: '2',
+        },
+        {
+            code: '3',
+            label: '3',
+        },
+        {
+            code: '4',
+            label: '4',
+        },
+        {
+            code: '5',
+            label: '5',
+        },
+        {
+            code: '6',
+            label: '6',
+        },
+        {
+            code: '7',
+            label: '7',
+        },
+        {
+            code: '8',
+            label: '8',
+        },
+        {
+            code: '9',
+            label: '9',
+        },
+        {
+            code: '*',
+            label: '*',
+        },
+        {
+            code: '0',
+            label: '0',
+        },
+        {
+            code: '#',
+            label: '#',
+        },
+    ];
+};
+
+class LibsUiComponentsInputsKeyboardComponent {
+    resultSelectKey = signal('');
+    configKeyCodes = signal(keypadConfig());
+    onDestroy = new Subject();
+    zone = inject(NgZone);
+    outKeyCodeSelected = output();
+    ngAfterViewInit() {
+        fromEvent(document, 'keyup')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((event) => {
+            this.zone.run(() => {
+                this.listenerKeyUp(event);
+            });
+        });
+    }
+    handlerClickItem(event, config) {
+        event?.stopPropagation();
+        this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);
+        this.outKeyCodeSelected.emit(config.code);
+    }
+    listenerKeyUp(event) {
+        const keyCode = event.keyCode;
+        if ((48 <= keyCode && keyCode <= 57) || (96 <= keyCode && keyCode <= 105)) {
+            const config = this.configKeyCodes().find((item) => item.code === `${event.key}`);
+            if (config) {
+                this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);
+                this.outKeyCodeSelected.emit(config.code);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsKeyboardComponent, isStandalone: true, selector: "libs_ui-components-inputs-keyboard", outputs: { outKeyCodeSelected: "outKeyCodeSelected" }, ngImport: i0, template: "<div class=\"libs-ui-inputs-keyboard\">\n  <span class=\"libs-ui-font-h1s flex justify-center mt-[12px] h-[24px]\">{{ resultSelectKey() }}</span>\n  <hr class=\"mt-[12px] mb-[20px]\" />\n  <div class=\"flex w-full justify-center\">\n    <div class=\"flex flex-wrap -mx-2 p-0 m-0\">\n      @for (config of configKeyCodes(); track config) {\n        <div class=\"w-1/3 p-0 m-0 flex justify-center !mb-[28px]\">\n          <div\n            class=\"libs-ui-border-general libs-ui-inputs-keyboard-item libs-ui-font-h1s\"\n            (click)=\"handlerClickItem($event, config)\">\n            {{ config.label }}\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-inputs-keyboard{background-color:#fff;padding:8px 20px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item{display:flex;align-items:center;justify-content:center;border-radius:50%;height:52px;width:52px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item:hover{background-color:#4e4e4e20;cursor:pointer}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-inputs-keyboard', standalone: true, template: "<div class=\"libs-ui-inputs-keyboard\">\n  <span class=\"libs-ui-font-h1s flex justify-center mt-[12px] h-[24px]\">{{ resultSelectKey() }}</span>\n  <hr class=\"mt-[12px] mb-[20px]\" />\n  <div class=\"flex w-full justify-center\">\n    <div class=\"flex flex-wrap -mx-2 p-0 m-0\">\n      @for (config of configKeyCodes(); track config) {\n        <div class=\"w-1/3 p-0 m-0 flex justify-center !mb-[28px]\">\n          <div\n            class=\"libs-ui-border-general libs-ui-inputs-keyboard-item libs-ui-font-h1s\"\n            (click)=\"handlerClickItem($event, config)\">\n            {{ config.label }}\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-inputs-keyboard{background-color:#fff;padding:8px 20px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item{display:flex;align-items:center;justify-content:center;border-radius:50%;height:52px;width:52px}.libs-ui-inputs-keyboard .libs-ui-inputs-keyboard-item:hover{background-color:#4e4e4e20;cursor:pointer}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsInputsKeyboardComponent };
+//# sourceMappingURL=libs-ui-components-inputs-keyboard.mjs.map

package/fesm2022/libs-ui-components-inputs-keyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"libs-ui-components-inputs-keyboard.mjs","sources":["../../../../../../libs-ui/components/inputs/keyboard/src/defines/keyboard.define.ts","../../../../../../libs-ui/components/inputs/keyboard/src/keyboard.component.ts","../../../../../../libs-ui/components/inputs/keyboard/src/keyboard.component.html","../../../../../../libs-ui/components/inputs/keyboard/src/libs-ui-components-inputs-keyboard.ts"],"sourcesContent":["import { IKeyCode } from '../interfaces/keyboard.interface';\n\nexport const keypadConfig = (): Array<IKeyCode> => {\n  return [\n    {\n      code: '1',\n      label: '1',\n    },\n    {\n      code: '2',\n      label: '2',\n    },\n    {\n      code: '3',\n      label: '3',\n    },\n    {\n      code: '4',\n      label: '4',\n    },\n    {\n      code: '5',\n      label: '5',\n    },\n    {\n      code: '6',\n      label: '6',\n    },\n    {\n      code: '7',\n      label: '7',\n    },\n    {\n      code: '8',\n      label: '8',\n    },\n    {\n      code: '9',\n      label: '9',\n    },\n    {\n      code: '*',\n      label: '*',\n    },\n    {\n      code: '0',\n      label: '0',\n    },\n    {\n      code: '#',\n      label: '#',\n    },\n  ];\n};\n","import { AfterViewInit, Component, inject, NgZone, OnDestroy, output, signal } from '@angular/core';\nimport { keypadConfig } from './defines/keyboard.define';\nimport { IKeyCode } from './interfaces/keyboard.interface';\nimport { fromEvent, Subject, takeUntil } from 'rxjs';\nimport { IEvent } from '@libs-ui/interfaces-types';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-inputs-keyboard',\n  standalone: true,\n  templateUrl: './keyboard.component.html',\n  styleUrl: './keyboard.component.scss',\n})\nexport class LibsUiComponentsInputsKeyboardComponent implements AfterViewInit, OnDestroy {\n  protected resultSelectKey = signal<string>('');\n  protected configKeyCodes = signal<Array<IKeyCode>>(keypadConfig());\n\n  private onDestroy = new Subject<void>();\n  private zone = inject(NgZone);\n\n  readonly outKeyCodeSelected = output<string>();\n\n  ngAfterViewInit() {\n    fromEvent<IEvent>(document, 'keyup')\n      .pipe(takeUntil(this.onDestroy))\n      .subscribe((event) => {\n        this.zone.run(() => {\n          this.listenerKeyUp(event);\n        });\n      });\n  }\n\n  protected handlerClickItem(event: Event, config: IKeyCode) {\n    event?.stopPropagation();\n    this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);\n    this.outKeyCodeSelected.emit(config.code);\n  }\n\n  private listenerKeyUp(event: IEvent) {\n    const keyCode = event.keyCode;\n\n    if ((48 <= keyCode && keyCode <= 57) || (96 <= keyCode && keyCode <= 105)) {\n      const config = this.configKeyCodes().find((item) => item.code === `${event.key}`);\n\n      if (config) {\n        this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);\n        this.outKeyCodeSelected.emit(config.code);\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.onDestroy.next();\n    this.onDestroy.complete();\n  }\n}\n","<div class=\"libs-ui-inputs-keyboard\">\n  <span class=\"libs-ui-font-h1s flex justify-center mt-[12px] h-[24px]\">{{ resultSelectKey() }}</span>\n  <hr class=\"mt-[12px] mb-[20px]\" />\n  <div class=\"flex w-full justify-center\">\n    <div class=\"flex flex-wrap -mx-2 p-0 m-0\">\n      @for (config of configKeyCodes(); track config) {\n        <div class=\"w-1/3 p-0 m-0 flex justify-center !mb-[28px]\">\n          <div\n            class=\"libs-ui-border-general libs-ui-inputs-keyboard-item libs-ui-font-h1s\"\n            (click)=\"handlerClickItem($event, config)\">\n            {{ config.label }}\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './keyboard.component';

package/interfaces/keyboard.interface.d.ts

@@ -0,0 +1,4 @@
+export interface IKeyCode {
+    code: string;
+    label: string;
+}

package/keyboard.component.d.ts

@@ -0,0 +1,16 @@
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import { IKeyCode } from './interfaces/keyboard.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsInputsKeyboardComponent implements AfterViewInit, OnDestroy {
+    protected resultSelectKey: import("@angular/core").WritableSignal<string>;
+    protected configKeyCodes: import("@angular/core").WritableSignal<IKeyCode[]>;
+    private onDestroy;
+    private zone;
+    readonly outKeyCodeSelected: import("@angular/core").OutputEmitterRef<string>;
+    ngAfterViewInit(): void;
+    protected handlerClickItem(event: Event, config: IKeyCode): void;
+    private listenerKeyUp;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsKeyboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsKeyboardComponent, "libs_ui-components-inputs-keyboard", never, {}, { "outKeyCodeSelected": "outKeyCodeSelected"; }, never, never, true, never>;
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@libs-ui/components-inputs-keyboard",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-inputs-keyboard.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-inputs-keyboard.mjs",
+      "esm": "./esm2022/libs-ui-components-inputs-keyboard.mjs",
+      "default": "./fesm2022/libs-ui-components-inputs-keyboard.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}