@yomotech/view-toolkit 1.0.0 → 1.0.1
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.
|
@@ -2890,6 +2890,8 @@ class CustomKeyboardService {
|
|
|
2890
2890
|
openingSuspendedUntil = 0;
|
|
2891
2891
|
pickerOverlayOpen = false;
|
|
2892
2892
|
pickerTriggerPressedUntil = 0;
|
|
2893
|
+
interactionBlocked = signal(false, ...(ngDevMode ? [{ debugName: "interactionBlocked" }] : /* istanbul ignore next */ []));
|
|
2894
|
+
interactionUnlockTimer = null;
|
|
2893
2895
|
activeSession = signal(null, ...(ngDevMode ? [{ debugName: "activeSession" }] : /* istanbul ignore next */ []));
|
|
2894
2896
|
isNativeMobile() {
|
|
2895
2897
|
return (Capacitor.isNativePlatform() &&
|
|
@@ -2939,6 +2941,7 @@ class CustomKeyboardService {
|
|
|
2939
2941
|
target.type = 'text';
|
|
2940
2942
|
}
|
|
2941
2943
|
this.activeSession.set(session);
|
|
2944
|
+
this.blockInitialInteraction(session);
|
|
2942
2945
|
document.body.classList.add('vl-custom-keyboard-open');
|
|
2943
2946
|
this.updateKeyboardHeight();
|
|
2944
2947
|
document.addEventListener('pointerdown', this.documentPointerDownHandler, true);
|
|
@@ -2977,6 +2980,19 @@ class CustomKeyboardService {
|
|
|
2977
2980
|
}, 350);
|
|
2978
2981
|
}, 50);
|
|
2979
2982
|
}
|
|
2983
|
+
blockInitialInteraction(session) {
|
|
2984
|
+
if (this.interactionUnlockTimer !== null) {
|
|
2985
|
+
window.clearTimeout(this.interactionUnlockTimer);
|
|
2986
|
+
}
|
|
2987
|
+
this.interactionBlocked.set(true);
|
|
2988
|
+
this.interactionUnlockTimer =
|
|
2989
|
+
window.setTimeout(() => {
|
|
2990
|
+
this.interactionUnlockTimer = null;
|
|
2991
|
+
if (this.activeSession() === session) {
|
|
2992
|
+
this.interactionBlocked.set(false);
|
|
2993
|
+
}
|
|
2994
|
+
}, 350);
|
|
2995
|
+
}
|
|
2980
2996
|
scrollTargetIntoDialogView(target) {
|
|
2981
2997
|
window.requestAnimationFrame(() => {
|
|
2982
2998
|
const dialogContent = target.closest('.p-dialog-content');
|
|
@@ -3023,7 +3039,14 @@ class CustomKeyboardService {
|
|
|
3023
3039
|
});
|
|
3024
3040
|
});
|
|
3025
3041
|
}
|
|
3042
|
+
canProcessKeyboardAction() {
|
|
3043
|
+
return (!this.interactionBlocked() &&
|
|
3044
|
+
this.activeSession() !== null);
|
|
3045
|
+
}
|
|
3026
3046
|
insert(character) {
|
|
3047
|
+
if (!this.canProcessKeyboardAction()) {
|
|
3048
|
+
return;
|
|
3049
|
+
}
|
|
3027
3050
|
const session = this.activeSession();
|
|
3028
3051
|
if (!session) {
|
|
3029
3052
|
return;
|
|
@@ -3046,6 +3069,9 @@ class CustomKeyboardService {
|
|
|
3046
3069
|
this.updateTarget(target, nextValue, start + character.length);
|
|
3047
3070
|
}
|
|
3048
3071
|
backspace() {
|
|
3072
|
+
if (!this.canProcessKeyboardAction()) {
|
|
3073
|
+
return;
|
|
3074
|
+
}
|
|
3049
3075
|
const session = this.activeSession();
|
|
3050
3076
|
if (!session) {
|
|
3051
3077
|
return;
|
|
@@ -3073,6 +3099,9 @@ class CustomKeyboardService {
|
|
|
3073
3099
|
this.updateTarget(target, nextValue, start - 1);
|
|
3074
3100
|
}
|
|
3075
3101
|
clear() {
|
|
3102
|
+
if (!this.canProcessKeyboardAction()) {
|
|
3103
|
+
return;
|
|
3104
|
+
}
|
|
3076
3105
|
const target = this.activeSession()?.target;
|
|
3077
3106
|
if (!target) {
|
|
3078
3107
|
return;
|
|
@@ -3089,6 +3118,11 @@ class CustomKeyboardService {
|
|
|
3089
3118
|
document.removeEventListener('pointerdown', this.documentPointerDownHandler, true);
|
|
3090
3119
|
target.removeEventListener('blur', this.activeTargetBlurHandler);
|
|
3091
3120
|
this.activeSession.set(null);
|
|
3121
|
+
if (this.interactionUnlockTimer !== null) {
|
|
3122
|
+
window.clearTimeout(this.interactionUnlockTimer);
|
|
3123
|
+
this.interactionUnlockTimer = null;
|
|
3124
|
+
}
|
|
3125
|
+
this.interactionBlocked.set(false);
|
|
3092
3126
|
/*
|
|
3093
3127
|
* Restore input attributes before dispatching the final
|
|
3094
3128
|
* change event.
|
|
@@ -5351,11 +5385,11 @@ class CustomKeyboardComponent {
|
|
|
5351
5385
|
this.uppercase.update(value => !value);
|
|
5352
5386
|
}
|
|
5353
5387
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5354
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: CustomKeyboardComponent, isStandalone: true, selector: "vl-custom-keyboard", ngImport: i0, template: "@if (keyboard.activeSession(); as session) {\r\n<section class=\"custom-keyboard\" data-vl-custom-keyboard [class.custom-keyboard--numeric]=\"\r\n session.type === 'numeric' ||\r\n session.type === 'date' ||\r\n session.type === 'time'\r\n
|
|
5388
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: CustomKeyboardComponent, isStandalone: true, selector: "vl-custom-keyboard", ngImport: i0, template: "@if (keyboard.activeSession(); as session) {\r\n<section class=\"custom-keyboard\" data-vl-custom-keyboard [class.custom-keyboard--numeric]=\"\r\n session.type === 'numeric' ||\r\n session.type === 'date' ||\r\n session.type === 'time'\" [class.custom-keyboard--opening]=\"keyboard.interactionBlocked()\"\r\n [attr.aria-label]=\"session.type + ' keyboard'\" (pointerdown)=\"$event.preventDefault()\">\r\n\r\n @for (row of rows; track $index) {\r\n <div class=\"custom-keyboard__row\">\r\n @for (key of row; track key) {\r\n <button type=\"button\" class=\"custom-keyboard__key\" (click)=\"enterKey(key)\">\r\n {{ key }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- One mobile-style action row for every keyboard type -->\r\n <div class=\"custom-keyboard__actions\" [class.custom-keyboard__actions--compact]=\"\r\n session.type !== 'alpha' &&\r\n session.type !== 'string'\r\n \">\r\n\r\n @if (\r\n session.type === 'alpha' ||\r\n session.type === 'string'\r\n ) {\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__shift\" [class.active]=\"uppercase()\"\r\n aria-label=\"Change letter case\" title=\"Shift\" (click)=\"toggleCase()\">\r\n <i class=\"pi pi-arrow-up\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__space\" (click)=\"enterSpace()\">\r\n Space\r\n </button>\r\n }\r\n\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__delete\"\r\n aria-label=\"Delete previous character\" title=\"Delete\" (click)=\"keyboard.backspace()\">\r\n <i class=\"pi pi-delete-left\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__done\" aria-label=\"Done\"\r\n title=\"Done\" (click)=\"keyboard.close()\">\r\n <i class=\"pi pi-check\"></i>\r\n </button>\r\n </div>\r\n</section>\r\n}", styles: [":host{display:contents}.custom-keyboard{position:fixed;right:0;bottom:0;left:0;z-index:200000;display:block;width:100%;max-height:min(52dvh,390px);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:#d1d5db;box-shadow:0 -6px 20px #0f172a38;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-overflow-scrolling:touch}.custom-keyboard__row{display:flex;justify-content:center;gap:4px;width:100%;margin-bottom:6px}.custom-keyboard__key{display:flex;flex:1 1 0;width:auto;max-width:52px;min-width:0;height:42px;align-items:center;justify-content:center;padding:0;color:#111827;font-size:16px;font-weight:700;line-height:1;background:#fff;border:0;border-radius:5px;box-shadow:0 1px 2px #0f172a47;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation;transition:transform 80ms ease,background-color 80ms ease}.custom-keyboard__key:active{background:#e6f4ff;transform:scale(.96)}.custom-keyboard--numeric .custom-keyboard__key{max-width:92px;height:46px;font-size:18px}.custom-keyboard__actions{display:grid;grid-template-columns:46px minmax(90px,1fr) 46px 54px;gap:6px;width:100%;margin-top:4px;padding:0 4px}.custom-keyboard__actions--compact{grid-template-columns:minmax(52px,1fr) minmax(52px,1fr)}.custom-keyboard__action-button{display:flex;width:100%;min-width:0;height:42px;align-items:center;justify-content:center;padding:0 8px;color:#172033;font-size:15px;font-weight:700;line-height:1;border:0;border-radius:6px;box-shadow:0 1px 2px #0f172a40;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation;transition:transform 80ms ease,background-color 80ms ease}.custom-keyboard__action-button i{font-size:17px;line-height:1;pointer-events:none}.custom-keyboard__action-button:active{transform:scale(.96)}.custom-keyboard__shift{color:#172033;background:#aeb6c2}.custom-keyboard__shift.active{color:#fff;background:#64748b}.custom-keyboard__space{color:#172033;background:#fff}.custom-keyboard__delete{color:#172033;background:#aeb6c2}.custom-keyboard__done{color:#fff;background:#1890ff}.custom-keyboard__key:focus-visible,.custom-keyboard__action-button:focus-visible{outline:3px solid rgba(24,144,255,.35);outline-offset:1px}@media(max-height:650px){.custom-keyboard{max-height:58dvh;padding-top:6px}.custom-keyboard__row{gap:3px;margin-bottom:4px}.custom-keyboard__key{height:35px;font-size:14px}.custom-keyboard--numeric .custom-keyboard__key{height:38px;font-size:16px}.custom-keyboard__action-button{height:36px}}@media(max-width:360px){.custom-keyboard{padding-right:4px;padding-left:4px}.custom-keyboard__row{gap:3px}.custom-keyboard__key{font-size:14px}.custom-keyboard__actions{grid-template-columns:42px minmax(70px,1fr) 42px 48px;gap:4px;padding-right:2px;padding-left:2px}.custom-keyboard__actions--compact{grid-template-columns:minmax(48px,1fr) minmax(48px,1fr)}}.custom-keyboard--opening .custom-keyboard__key,.custom-keyboard--opening .custom-keyboard__action-button{pointer-events:none}.custom-keyboard--opening{cursor:default}\n"] });
|
|
5355
5389
|
}
|
|
5356
5390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomKeyboardComponent, decorators: [{
|
|
5357
5391
|
type: Component,
|
|
5358
|
-
args: [{ selector: 'vl-custom-keyboard', standalone: true, template: "@if (keyboard.activeSession(); as session) {\r\n<section class=\"custom-keyboard\" data-vl-custom-keyboard [class.custom-keyboard--numeric]=\"\r\n session.type === 'numeric' ||\r\n session.type === 'date' ||\r\n session.type === 'time'\r\n
|
|
5392
|
+
args: [{ selector: 'vl-custom-keyboard', standalone: true, template: "@if (keyboard.activeSession(); as session) {\r\n<section class=\"custom-keyboard\" data-vl-custom-keyboard [class.custom-keyboard--numeric]=\"\r\n session.type === 'numeric' ||\r\n session.type === 'date' ||\r\n session.type === 'time'\" [class.custom-keyboard--opening]=\"keyboard.interactionBlocked()\"\r\n [attr.aria-label]=\"session.type + ' keyboard'\" (pointerdown)=\"$event.preventDefault()\">\r\n\r\n @for (row of rows; track $index) {\r\n <div class=\"custom-keyboard__row\">\r\n @for (key of row; track key) {\r\n <button type=\"button\" class=\"custom-keyboard__key\" (click)=\"enterKey(key)\">\r\n {{ key }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- One mobile-style action row for every keyboard type -->\r\n <div class=\"custom-keyboard__actions\" [class.custom-keyboard__actions--compact]=\"\r\n session.type !== 'alpha' &&\r\n session.type !== 'string'\r\n \">\r\n\r\n @if (\r\n session.type === 'alpha' ||\r\n session.type === 'string'\r\n ) {\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__shift\" [class.active]=\"uppercase()\"\r\n aria-label=\"Change letter case\" title=\"Shift\" (click)=\"toggleCase()\">\r\n <i class=\"pi pi-arrow-up\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__space\" (click)=\"enterSpace()\">\r\n Space\r\n </button>\r\n }\r\n\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__delete\"\r\n aria-label=\"Delete previous character\" title=\"Delete\" (click)=\"keyboard.backspace()\">\r\n <i class=\"pi pi-delete-left\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"custom-keyboard__action-button custom-keyboard__done\" aria-label=\"Done\"\r\n title=\"Done\" (click)=\"keyboard.close()\">\r\n <i class=\"pi pi-check\"></i>\r\n </button>\r\n </div>\r\n</section>\r\n}", styles: [":host{display:contents}.custom-keyboard{position:fixed;right:0;bottom:0;left:0;z-index:200000;display:block;width:100%;max-height:min(52dvh,390px);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:#d1d5db;box-shadow:0 -6px 20px #0f172a38;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-overflow-scrolling:touch}.custom-keyboard__row{display:flex;justify-content:center;gap:4px;width:100%;margin-bottom:6px}.custom-keyboard__key{display:flex;flex:1 1 0;width:auto;max-width:52px;min-width:0;height:42px;align-items:center;justify-content:center;padding:0;color:#111827;font-size:16px;font-weight:700;line-height:1;background:#fff;border:0;border-radius:5px;box-shadow:0 1px 2px #0f172a47;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation;transition:transform 80ms ease,background-color 80ms ease}.custom-keyboard__key:active{background:#e6f4ff;transform:scale(.96)}.custom-keyboard--numeric .custom-keyboard__key{max-width:92px;height:46px;font-size:18px}.custom-keyboard__actions{display:grid;grid-template-columns:46px minmax(90px,1fr) 46px 54px;gap:6px;width:100%;margin-top:4px;padding:0 4px}.custom-keyboard__actions--compact{grid-template-columns:minmax(52px,1fr) minmax(52px,1fr)}.custom-keyboard__action-button{display:flex;width:100%;min-width:0;height:42px;align-items:center;justify-content:center;padding:0 8px;color:#172033;font-size:15px;font-weight:700;line-height:1;border:0;border-radius:6px;box-shadow:0 1px 2px #0f172a40;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation;transition:transform 80ms ease,background-color 80ms ease}.custom-keyboard__action-button i{font-size:17px;line-height:1;pointer-events:none}.custom-keyboard__action-button:active{transform:scale(.96)}.custom-keyboard__shift{color:#172033;background:#aeb6c2}.custom-keyboard__shift.active{color:#fff;background:#64748b}.custom-keyboard__space{color:#172033;background:#fff}.custom-keyboard__delete{color:#172033;background:#aeb6c2}.custom-keyboard__done{color:#fff;background:#1890ff}.custom-keyboard__key:focus-visible,.custom-keyboard__action-button:focus-visible{outline:3px solid rgba(24,144,255,.35);outline-offset:1px}@media(max-height:650px){.custom-keyboard{max-height:58dvh;padding-top:6px}.custom-keyboard__row{gap:3px;margin-bottom:4px}.custom-keyboard__key{height:35px;font-size:14px}.custom-keyboard--numeric .custom-keyboard__key{height:38px;font-size:16px}.custom-keyboard__action-button{height:36px}}@media(max-width:360px){.custom-keyboard{padding-right:4px;padding-left:4px}.custom-keyboard__row{gap:3px}.custom-keyboard__key{font-size:14px}.custom-keyboard__actions{grid-template-columns:42px minmax(70px,1fr) 42px 48px;gap:4px;padding-right:2px;padding-left:2px}.custom-keyboard__actions--compact{grid-template-columns:minmax(48px,1fr) minmax(48px,1fr)}}.custom-keyboard--opening .custom-keyboard__key,.custom-keyboard--opening .custom-keyboard__action-button{pointer-events:none}.custom-keyboard--opening{cursor:default}\n"] }]
|
|
5359
5393
|
}] });
|
|
5360
5394
|
|
|
5361
5395
|
/*
|