@libs-ui/components-inputs-keyboard 0.2.306 → 0.2.307-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/defines/keyboard.define.d.ts +1 -1
- package/esm2022/defines/keyboard.define.mjs +14 -14
- package/esm2022/interfaces/keyboard.interface.mjs +1 -1
- package/esm2022/keyboard.component.mjs +8 -6
- package/fesm2022/libs-ui-components-inputs-keyboard.mjs +20 -18
- package/fesm2022/libs-ui-components-inputs-keyboard.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IKeyCode } from
|
|
1
|
+
import { IKeyCode } from '../interfaces/keyboard.interface';
|
|
2
2
|
export declare const keypadConfig: () => Array<IKeyCode>;
|
|
@@ -2,52 +2,52 @@ export const keypadConfig = () => {
|
|
|
2
2
|
return [
|
|
3
3
|
{
|
|
4
4
|
code: '1',
|
|
5
|
-
label: '1'
|
|
5
|
+
label: '1',
|
|
6
6
|
},
|
|
7
7
|
{
|
|
8
8
|
code: '2',
|
|
9
|
-
label: '2'
|
|
9
|
+
label: '2',
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
12
|
code: '3',
|
|
13
|
-
label: '3'
|
|
13
|
+
label: '3',
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
16
|
code: '4',
|
|
17
|
-
label: '4'
|
|
17
|
+
label: '4',
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
code: '5',
|
|
21
|
-
label: '5'
|
|
21
|
+
label: '5',
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
code: '6',
|
|
25
|
-
label: '6'
|
|
25
|
+
label: '6',
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
code: '7',
|
|
29
|
-
label: '7'
|
|
29
|
+
label: '7',
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
code: '8',
|
|
33
|
-
label: '8'
|
|
33
|
+
label: '8',
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
code: '9',
|
|
37
|
-
label: '9'
|
|
37
|
+
label: '9',
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
code: '*',
|
|
41
|
-
label: '*'
|
|
41
|
+
label: '*',
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
code: '0',
|
|
45
|
-
label: '0'
|
|
45
|
+
label: '0',
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
code: '#',
|
|
49
|
-
label: '#'
|
|
50
|
-
}
|
|
49
|
+
label: '#',
|
|
50
|
+
},
|
|
51
51
|
];
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5Ym9hcmQuZGVmaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMvZGVmaW5lcy9rZXlib2FyZC5kZWZpbmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLEdBQW9CLEVBQUU7SUFDaEQsT0FBTztRQUNMO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtRQUNEO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtRQUNEO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtRQUNEO1lBQ0UsSUFBSSxFQUFFLEdBQUc7WUFDVCxLQUFLLEVBQUUsR0FBRztTQUNYO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsR0FBRztZQUNULEtBQUssRUFBRSxHQUFHO1NBQ1g7UUFDRDtZQUNFLElBQUksRUFBRSxHQUFHO1lBQ1QsS0FBSyxFQUFFLEdBQUc7U0FDWDtLQUNGLENBQUM7QUFDSixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJS2V5Q29kZSB9IGZyb20gJy4uL2ludGVyZmFjZXMva2V5Ym9hcmQuaW50ZXJmYWNlJztcblxuZXhwb3J0IGNvbnN0IGtleXBhZENvbmZpZyA9ICgpOiBBcnJheTxJS2V5Q29kZT4gPT4ge1xuICByZXR1cm4gW1xuICAgIHtcbiAgICAgIGNvZGU6ICcxJyxcbiAgICAgIGxhYmVsOiAnMScsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnMicsXG4gICAgICBsYWJlbDogJzInLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJzMnLFxuICAgICAgbGFiZWw6ICczJyxcbiAgICB9LFxuICAgIHtcbiAgICAgIGNvZGU6ICc0JyxcbiAgICAgIGxhYmVsOiAnNCcsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnNScsXG4gICAgICBsYWJlbDogJzUnLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJzYnLFxuICAgICAgbGFiZWw6ICc2JyxcbiAgICB9LFxuICAgIHtcbiAgICAgIGNvZGU6ICc3JyxcbiAgICAgIGxhYmVsOiAnNycsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnOCcsXG4gICAgICBsYWJlbDogJzgnLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJzknLFxuICAgICAgbGFiZWw6ICc5JyxcbiAgICB9LFxuICAgIHtcbiAgICAgIGNvZGU6ICcqJyxcbiAgICAgIGxhYmVsOiAnKicsXG4gICAgfSxcbiAgICB7XG4gICAgICBjb2RlOiAnMCcsXG4gICAgICBsYWJlbDogJzAnLFxuICAgIH0sXG4gICAge1xuICAgICAgY29kZTogJyMnLFxuICAgICAgbGFiZWw6ICcjJyxcbiAgICB9LFxuICBdO1xufTtcbiJdfQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5Ym9hcmQuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMvaW50ZXJmYWNlcy9rZXlib2FyZC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSUtleUNvZGUge1xuICBjb2RlOiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG59XG4iXX0=
|
|
@@ -9,7 +9,9 @@ export class LibsUiComponentsInputsKeyboardComponent {
|
|
|
9
9
|
zone = inject(NgZone);
|
|
10
10
|
outKeyCodeSelected = output();
|
|
11
11
|
ngAfterViewInit() {
|
|
12
|
-
fromEvent(document, 'keyup')
|
|
12
|
+
fromEvent(document, 'keyup')
|
|
13
|
+
.pipe(takeUntil(this.onDestroy))
|
|
14
|
+
.subscribe((event) => {
|
|
13
15
|
this.zone.run(() => {
|
|
14
16
|
this.listenerKeyUp(event);
|
|
15
17
|
});
|
|
@@ -22,8 +24,8 @@ export class LibsUiComponentsInputsKeyboardComponent {
|
|
|
22
24
|
}
|
|
23
25
|
listenerKeyUp(event) {
|
|
24
26
|
const keyCode = event.keyCode;
|
|
25
|
-
if (48 <= keyCode && keyCode <= 57 || 96 <= keyCode && keyCode <= 105) {
|
|
26
|
-
const config = this.configKeyCodes().find(item => item.code === `${event.key}`);
|
|
27
|
+
if ((48 <= keyCode && keyCode <= 57) || (96 <= keyCode && keyCode <= 105)) {
|
|
28
|
+
const config = this.configKeyCodes().find((item) => item.code === `${event.key}`);
|
|
27
29
|
if (config) {
|
|
28
30
|
this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);
|
|
29
31
|
this.outKeyCodeSelected.emit(config.code);
|
|
@@ -35,10 +37,10 @@ export class LibsUiComponentsInputsKeyboardComponent {
|
|
|
35
37
|
this.onDestroy.complete();
|
|
36
38
|
}
|
|
37
39
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsKeyboardComponent, isStandalone: true, selector: "libs_ui-components-inputs-keyboard", outputs: { outKeyCodeSelected: "outKeyCodeSelected" }, ngImport: i0, template: "<div class=\"libs-ui-inputs-keyboard\">\n
|
|
40
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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"] });
|
|
39
41
|
}
|
|
40
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, decorators: [{
|
|
41
43
|
type: Component,
|
|
42
|
-
args: [{ selector: 'libs_ui-components-inputs-keyboard', standalone: true, template: "<div class=\"libs-ui-inputs-keyboard\">\n
|
|
44
|
+
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"] }]
|
|
43
45
|
}] });
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5Ym9hcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMva2V5Ym9hcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9rZXlib2FyZC9zcmMva2V5Ym9hcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBYSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUV6RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBVXJELE1BQU0sT0FBTyx1Q0FBdUM7SUFDeEMsZUFBZSxHQUFHLE1BQU0sQ0FBUyxFQUFFLENBQUMsQ0FBQztJQUNyQyxjQUFjLEdBQUcsTUFBTSxDQUFrQixZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBRTNELFNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBQ2hDLElBQUksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFckIsa0JBQWtCLEdBQUcsTUFBTSxFQUFVLENBQUM7SUFFL0MsZUFBZTtRQUNiLFNBQVMsQ0FBUyxRQUFRLEVBQUUsT0FBTyxDQUFDO2FBQ2pDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO2FBQy9CLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1lBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRTtnQkFDakIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM1QixDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVTLGdCQUFnQixDQUFDLEtBQVksRUFBRSxNQUFnQjtRQUN2RCxLQUFLLEVBQUUsZUFBZSxFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLEdBQUcsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDckUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVPLGFBQWEsQ0FBQyxLQUFhO1FBQ2pDLE1BQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUM7UUFFOUIsSUFBSSxDQUFDLEVBQUUsSUFBSSxPQUFPLElBQUksT0FBTyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLE9BQU8sSUFBSSxPQUFPLElBQUksR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUMxRSxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLEdBQUcsS0FBSyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFFbEYsSUFBSSxNQUFNLEVBQUUsQ0FBQztnQkFDWCxJQUFJLENBQUMsZUFBZSxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsR0FBRyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztnQkFDckUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDNUMsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM1QixDQUFDO3dHQXpDVSx1Q0FBdUM7NEZBQXZDLHVDQUF1QyxxSkNicEQsNHFCQWlCQTs7NEZESmEsdUNBQXVDO2tCQVBuRCxTQUFTOytCQUVFLG9DQUFvQyxjQUNsQyxJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBpbmplY3QsIE5nWm9uZSwgT25EZXN0cm95LCBvdXRwdXQsIHNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsga2V5cGFkQ29uZmlnIH0gZnJvbSAnLi9kZWZpbmVzL2tleWJvYXJkLmRlZmluZSc7XG5pbXBvcnQgeyBJS2V5Q29kZSB9IGZyb20gJy4vaW50ZXJmYWNlcy9rZXlib2FyZC5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgZnJvbUV2ZW50LCBTdWJqZWN0LCB0YWtlVW50aWwgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IElFdmVudCB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtaW5wdXRzLWtleWJvYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL2tleWJvYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2tleWJvYXJkLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0lucHV0c0tleWJvYXJkQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgcHJvdGVjdGVkIHJlc3VsdFNlbGVjdEtleSA9IHNpZ25hbDxzdHJpbmc+KCcnKTtcbiAgcHJvdGVjdGVkIGNvbmZpZ0tleUNvZGVzID0gc2lnbmFsPEFycmF5PElLZXlDb2RlPj4oa2V5cGFkQ29uZmlnKCkpO1xuXG4gIHByaXZhdGUgb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgcHJpdmF0ZSB6b25lID0gaW5qZWN0KE5nWm9uZSk7XG5cbiAgcmVhZG9ubHkgb3V0S2V5Q29kZVNlbGVjdGVkID0gb3V0cHV0PHN0cmluZz4oKTtcblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgZnJvbUV2ZW50PElFdmVudD4oZG9jdW1lbnQsICdrZXl1cCcpXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kpKVxuICAgICAgLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgICAgdGhpcy56b25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgdGhpcy5saXN0ZW5lcktleVVwKGV2ZW50KTtcbiAgICAgICAgfSk7XG4gICAgICB9KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ2xpY2tJdGVtKGV2ZW50OiBFdmVudCwgY29uZmlnOiBJS2V5Q29kZSkge1xuICAgIGV2ZW50Py5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLnJlc3VsdFNlbGVjdEtleS5zZXQoYCR7dGhpcy5yZXN1bHRTZWxlY3RLZXkoKX0ke2NvbmZpZy5sYWJlbH1gKTtcbiAgICB0aGlzLm91dEtleUNvZGVTZWxlY3RlZC5lbWl0KGNvbmZpZy5jb2RlKTtcbiAgfVxuXG4gIHByaXZhdGUgbGlzdGVuZXJLZXlVcChldmVudDogSUV2ZW50KSB7XG4gICAgY29uc3Qga2V5Q29kZSA9IGV2ZW50LmtleUNvZGU7XG5cbiAgICBpZiAoKDQ4IDw9IGtleUNvZGUgJiYga2V5Q29kZSA8PSA1NykgfHwgKDk2IDw9IGtleUNvZGUgJiYga2V5Q29kZSA8PSAxMDUpKSB7XG4gICAgICBjb25zdCBjb25maWcgPSB0aGlzLmNvbmZpZ0tleUNvZGVzKCkuZmluZCgoaXRlbSkgPT4gaXRlbS5jb2RlID09PSBgJHtldmVudC5rZXl9YCk7XG5cbiAgICAgIGlmIChjb25maWcpIHtcbiAgICAgICAgdGhpcy5yZXN1bHRTZWxlY3RLZXkuc2V0KGAke3RoaXMucmVzdWx0U2VsZWN0S2V5KCl9JHtjb25maWcubGFiZWx9YCk7XG4gICAgICAgIHRoaXMub3V0S2V5Q29kZVNlbGVjdGVkLmVtaXQoY29uZmlnLmNvZGUpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub25EZXN0cm95Lm5leHQoKTtcbiAgICB0aGlzLm9uRGVzdHJveS5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibGlicy11aS1pbnB1dHMta2V5Ym9hcmRcIj5cbiAgPHNwYW4gY2xhc3M9XCJsaWJzLXVpLWZvbnQtaDFzIGZsZXgganVzdGlmeS1jZW50ZXIgbXQtWzEycHhdIGgtWzI0cHhdXCI+e3sgcmVzdWx0U2VsZWN0S2V5KCkgfX08L3NwYW4+XG4gIDxociBjbGFzcz1cIm10LVsxMnB4XSBtYi1bMjBweF1cIiAvPlxuICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZ1bGwganVzdGlmeS1jZW50ZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXdyYXAgLW14LTIgcC0wIG0tMFwiPlxuICAgICAgQGZvciAoY29uZmlnIG9mIGNvbmZpZ0tleUNvZGVzKCk7IHRyYWNrIGNvbmZpZykge1xuICAgICAgICA8ZGl2IGNsYXNzPVwidy0xLzMgcC0wIG0tMCBmbGV4IGp1c3RpZnktY2VudGVyICFtYi1bMjhweF1cIj5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cImxpYnMtdWktYm9yZGVyLWdlbmVyYWwgbGlicy11aS1pbnB1dHMta2V5Ym9hcmQtaXRlbSBsaWJzLXVpLWZvbnQtaDFzXCJcbiAgICAgICAgICAgIChjbGljayk9XCJoYW5kbGVyQ2xpY2tJdGVtKCRldmVudCwgY29uZmlnKVwiPlxuICAgICAgICAgICAge3sgY29uZmlnLmxhYmVsIH19XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgfVxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -6,52 +6,52 @@ const keypadConfig = () => {
|
|
|
6
6
|
return [
|
|
7
7
|
{
|
|
8
8
|
code: '1',
|
|
9
|
-
label: '1'
|
|
9
|
+
label: '1',
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
12
|
code: '2',
|
|
13
|
-
label: '2'
|
|
13
|
+
label: '2',
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
16
|
code: '3',
|
|
17
|
-
label: '3'
|
|
17
|
+
label: '3',
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
code: '4',
|
|
21
|
-
label: '4'
|
|
21
|
+
label: '4',
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
code: '5',
|
|
25
|
-
label: '5'
|
|
25
|
+
label: '5',
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
code: '6',
|
|
29
|
-
label: '6'
|
|
29
|
+
label: '6',
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
code: '7',
|
|
33
|
-
label: '7'
|
|
33
|
+
label: '7',
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
code: '8',
|
|
37
|
-
label: '8'
|
|
37
|
+
label: '8',
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
code: '9',
|
|
41
|
-
label: '9'
|
|
41
|
+
label: '9',
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
code: '*',
|
|
45
|
-
label: '*'
|
|
45
|
+
label: '*',
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
code: '0',
|
|
49
|
-
label: '0'
|
|
49
|
+
label: '0',
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
52
|
code: '#',
|
|
53
|
-
label: '#'
|
|
54
|
-
}
|
|
53
|
+
label: '#',
|
|
54
|
+
},
|
|
55
55
|
];
|
|
56
56
|
};
|
|
57
57
|
|
|
@@ -62,7 +62,9 @@ class LibsUiComponentsInputsKeyboardComponent {
|
|
|
62
62
|
zone = inject(NgZone);
|
|
63
63
|
outKeyCodeSelected = output();
|
|
64
64
|
ngAfterViewInit() {
|
|
65
|
-
fromEvent(document, 'keyup')
|
|
65
|
+
fromEvent(document, 'keyup')
|
|
66
|
+
.pipe(takeUntil(this.onDestroy))
|
|
67
|
+
.subscribe((event) => {
|
|
66
68
|
this.zone.run(() => {
|
|
67
69
|
this.listenerKeyUp(event);
|
|
68
70
|
});
|
|
@@ -75,8 +77,8 @@ class LibsUiComponentsInputsKeyboardComponent {
|
|
|
75
77
|
}
|
|
76
78
|
listenerKeyUp(event) {
|
|
77
79
|
const keyCode = event.keyCode;
|
|
78
|
-
if (48 <= keyCode && keyCode <= 57 || 96 <= keyCode && keyCode <= 105) {
|
|
79
|
-
const config = this.configKeyCodes().find(item => item.code === `${event.key}`);
|
|
80
|
+
if ((48 <= keyCode && keyCode <= 57) || (96 <= keyCode && keyCode <= 105)) {
|
|
81
|
+
const config = this.configKeyCodes().find((item) => item.code === `${event.key}`);
|
|
80
82
|
if (config) {
|
|
81
83
|
this.resultSelectKey.set(`${this.resultSelectKey()}${config.label}`);
|
|
82
84
|
this.outKeyCodeSelected.emit(config.code);
|
|
@@ -88,11 +90,11 @@ class LibsUiComponentsInputsKeyboardComponent {
|
|
|
88
90
|
this.onDestroy.complete();
|
|
89
91
|
}
|
|
90
92
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
91
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsKeyboardComponent, isStandalone: true, selector: "libs_ui-components-inputs-keyboard", outputs: { outKeyCodeSelected: "outKeyCodeSelected" }, ngImport: i0, template: "<div class=\"libs-ui-inputs-keyboard\">\n
|
|
93
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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"] });
|
|
92
94
|
}
|
|
93
95
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsKeyboardComponent, decorators: [{
|
|
94
96
|
type: Component,
|
|
95
|
-
args: [{ selector: 'libs_ui-components-inputs-keyboard', standalone: true, template: "<div class=\"libs-ui-inputs-keyboard\">\n
|
|
97
|
+
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"] }]
|
|
96
98
|
}] });
|
|
97
99
|
|
|
98
100
|
/**
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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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"}
|