@yomotech/view-toolkit 0.0.93 → 0.0.94

package/fesm2022/yomotech-view-toolkit.mjs

@@ -2930,13 +2930,29 @@ class CustomKeyboardService {
         }
         this.activeSession.set(session);
         document.body.classList.add('vl-custom-keyboard-open');
+        document.addEventListener('pointerdown', this.documentPointerDownHandler, true);
+        target.addEventListener('blur', this.activeTargetBlurHandler);
         try {
             await Keyboard.hide();
         }
         catch {
             // The native keyboard may already be closed.
         }
+        /*
+         * The keyboard may have closed while Keyboard.hide()
+         * was running.
+         */
+        if (this.activeSession() !== session) {
+            return;
+        }
         window.setTimeout(() => {
+            /*
+             * The user may have touched outside during this delay.
+             * Do not focus the old input again.
+             */
+            if (this.activeSession() !== session) {
+                return;
+            }
             target.focus({
                 preventScroll: true
             });
@@ -3001,8 +3017,14 @@ class CustomKeyboardService {
         }
         const { target } = session;
         /*
-         * change supports controls configured with updateOn blur/change.
+         * Remove listeners before blurring the input.
+         */
+        document.removeEventListener('pointerdown', this.documentPointerDownHandler, true);
+        target.removeEventListener('blur', this.activeTargetBlurHandler);
+        /*
+         * Clear the session before blur events can run.
          */
+        this.activeSession.set(null);
         target.dispatchEvent(new Event('change', {
             bubbles: true
         }));
@@ -3023,7 +3045,6 @@ class CustomKeyboardService {
                 target.setAttribute('type', session.originalInputType);
             }
         }
-        this.activeSession.set(null);
         document.body.classList.remove('vl-custom-keyboard-open');
     }
     closeIfTargetInside(container) {
@@ -3082,6 +3103,70 @@ class CustomKeyboardService {
             // Ignore inputs without selection support.
         }
     }
+    documentPointerDownHandler = (event) => {
+        this.handleDocumentPointerDown(event);
+    };
+    activeTargetBlurHandler = () => {
+        this.handleActiveTargetBlur();
+    };
+    handleDocumentPointerDown(event) {
+        const session = this.activeSession();
+        if (!session) {
+            return;
+        }
+        const eventTarget = event.target;
+        if (!(eventTarget instanceof Node)) {
+            return;
+        }
+        /*
+         * User clicked the currently active input.
+         */
+        if (eventTarget === session.target ||
+            session.target.contains(eventTarget)) {
+            return;
+        }
+        /*
+         * User clicked a button inside the custom keyboard.
+         * Keep the keyboard open so that the button click can run.
+         */
+        if (eventTarget instanceof Element &&
+            eventTarget.closest('[data-vl-custom-keyboard]')) {
+            return;
+        }
+        /*
+         * User clicked anywhere else.
+         */
+        this.close();
+    }
+    handleActiveTargetBlur() {
+        /*
+         * Wait for the browser to finish changing focus.
+         */
+        window.setTimeout(() => {
+            const session = this.activeSession();
+            if (!session) {
+                return;
+            }
+            const activeElement = document.activeElement;
+            /*
+             * Input still has focus.
+             */
+            if (activeElement === session.target) {
+                return;
+            }
+            const keyboardElement = document.querySelector('[data-vl-custom-keyboard]');
+            /*
+             * Do not close if focus somehow moved to an element
+             * inside the custom keyboard.
+             */
+            if (keyboardElement &&
+                activeElement &&
+                keyboardElement.contains(activeElement)) {
+                return;
+            }
+            this.close();
+        }, 0);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomKeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomKeyboardService, providedIn: 'root' });
 }
@@ -5042,11 +5127,11 @@ class CustomKeyboardComponent {
         this.uppercase.update(value => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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\" [class.custom-keyboard--numeric]=\"session.type === 'numeric'\"\r\n    [attr.aria-label]=\"session.type + ' keyboard'\" (pointerdown)=\"$event.preventDefault()\">\r\n    <div class=\"custom-keyboard__toolbar\">\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.clear()\">\r\n            Clear\r\n        </button>\r\n\r\n        <span class=\"custom-keyboard__type\">\r\n            {{ session.type }}\r\n        </span>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.close()\">\r\n            Done\r\n        </button>\r\n    </div>\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    @if (\r\n    session.type === 'alpha' ||\r\n    session.type === 'string'\r\n    ) {\r\n    <div class=\"custom-keyboard__text-actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__shift\" [class.active]=\"uppercase()\" (click)=\"toggleCase()\">\r\n            \u21E7 Shift\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__space\" (click)=\"enterSpace()\">\r\n            Space\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"custom-keyboard__actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__delete\" aria-label=\"Delete previous character\"\r\n            (click)=\"keyboard.backspace()\">\r\n            <i class=\"pi pi-delete-left\"></i>\r\n            Delete\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__done\" (click)=\"keyboard.close()\">\r\n            Done\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-y:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.custom-keyboard__toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:8px;padding:0 4px}.custom-keyboard__toolbar-button{padding:6px 10px;color:#126fd1;font-size:14px;font-weight:700;background:transparent;border:0}.custom-keyboard__type{color:#475569;font-size:12px;font-weight:700;text-align:center;text-transform:capitalize}.custom-keyboard__row{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.custom-keyboard__key{flex:1 1 0;max-width:52px;min-width:0;height:42px;padding:0;color:#111827;font-size:16px;font-weight:700;background:#fff;border:0;border-radius:5px;box-shadow:0 1px 2px #0f172a47}.custom-keyboard--numeric .custom-keyboard__key{max-width:92px;height:46px;font-size:18px}.custom-keyboard__key:active,.custom-keyboard__text-actions button:active,.custom-keyboard__actions button:active{transform:scale(.96)}.custom-keyboard__text-actions{display:grid;grid-template-columns:minmax(90px,.4fr) 1fr;gap:6px;margin:2px 4px 6px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:42px;font-size:15px;font-weight:700;border:0;border-radius:5px}.custom-keyboard__shift{color:#172033;background:#aeb6c2}.custom-keyboard__shift.active{color:#fff;background:#64748b}.custom-keyboard__space{color:#172033;background:#fff}.custom-keyboard__actions{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;padding:0 4px}.custom-keyboard__delete{color:#172033;background:#aeb6c2}.custom-keyboard__done{color:#fff;background:#1890ff}@media(max-height:650px){.custom-keyboard{max-height:58dvh}.custom-keyboard__key{height:35px}.custom-keyboard__row{margin-bottom:4px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:36px}}\n"] });
+    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]=\"session.type === 'numeric'\"\r\n    [attr.aria-label]=\"session.type + ' keyboard'\" (pointerdown)=\"$event.preventDefault()\">\r\n    <div class=\"custom-keyboard__toolbar\">\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.clear()\">\r\n            Clear\r\n        </button>\r\n\r\n        <span class=\"custom-keyboard__type\">\r\n            {{ session.type }}\r\n        </span>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.close()\">\r\n            Done\r\n        </button>\r\n    </div>\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    @if (\r\n    session.type === 'alpha' ||\r\n    session.type === 'string'\r\n    ) {\r\n    <div class=\"custom-keyboard__text-actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__shift\" [class.active]=\"uppercase()\" (click)=\"toggleCase()\">\r\n            \u21E7 Shift\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__space\" (click)=\"enterSpace()\">\r\n            Space\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"custom-keyboard__actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__delete\" aria-label=\"Delete previous character\"\r\n            (click)=\"keyboard.backspace()\">\r\n            <i class=\"pi pi-delete-left\"></i>\r\n            Delete\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__done\" (click)=\"keyboard.close()\">\r\n            Done\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-y:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.custom-keyboard__toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:8px;padding:0 4px}.custom-keyboard__toolbar-button{padding:6px 10px;color:#126fd1;font-size:14px;font-weight:700;background:transparent;border:0}.custom-keyboard__type{color:#475569;font-size:12px;font-weight:700;text-align:center;text-transform:capitalize}.custom-keyboard__row{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.custom-keyboard__key{flex:1 1 0;max-width:52px;min-width:0;height:42px;padding:0;color:#111827;font-size:16px;font-weight:700;background:#fff;border:0;border-radius:5px;box-shadow:0 1px 2px #0f172a47}.custom-keyboard--numeric .custom-keyboard__key{max-width:92px;height:46px;font-size:18px}.custom-keyboard__key:active,.custom-keyboard__text-actions button:active,.custom-keyboard__actions button:active{transform:scale(.96)}.custom-keyboard__text-actions{display:grid;grid-template-columns:minmax(90px,.4fr) 1fr;gap:6px;margin:2px 4px 6px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:42px;font-size:15px;font-weight:700;border:0;border-radius:5px}.custom-keyboard__shift{color:#172033;background:#aeb6c2}.custom-keyboard__shift.active{color:#fff;background:#64748b}.custom-keyboard__space{color:#172033;background:#fff}.custom-keyboard__actions{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;padding:0 4px}.custom-keyboard__delete{color:#172033;background:#aeb6c2}.custom-keyboard__done{color:#fff;background:#1890ff}@media(max-height:650px){.custom-keyboard{max-height:58dvh}.custom-keyboard__key{height:35px}.custom-keyboard__row{margin-bottom:4px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:36px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomKeyboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-custom-keyboard', standalone: true, template: "@if (keyboard.activeSession(); as session) {\r\n<section class=\"custom-keyboard\" [class.custom-keyboard--numeric]=\"session.type === 'numeric'\"\r\n    [attr.aria-label]=\"session.type + ' keyboard'\" (pointerdown)=\"$event.preventDefault()\">\r\n    <div class=\"custom-keyboard__toolbar\">\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.clear()\">\r\n            Clear\r\n        </button>\r\n\r\n        <span class=\"custom-keyboard__type\">\r\n            {{ session.type }}\r\n        </span>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.close()\">\r\n            Done\r\n        </button>\r\n    </div>\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    @if (\r\n    session.type === 'alpha' ||\r\n    session.type === 'string'\r\n    ) {\r\n    <div class=\"custom-keyboard__text-actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__shift\" [class.active]=\"uppercase()\" (click)=\"toggleCase()\">\r\n            \u21E7 Shift\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__space\" (click)=\"enterSpace()\">\r\n            Space\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"custom-keyboard__actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__delete\" aria-label=\"Delete previous character\"\r\n            (click)=\"keyboard.backspace()\">\r\n            <i class=\"pi pi-delete-left\"></i>\r\n            Delete\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__done\" (click)=\"keyboard.close()\">\r\n            Done\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-y:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.custom-keyboard__toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:8px;padding:0 4px}.custom-keyboard__toolbar-button{padding:6px 10px;color:#126fd1;font-size:14px;font-weight:700;background:transparent;border:0}.custom-keyboard__type{color:#475569;font-size:12px;font-weight:700;text-align:center;text-transform:capitalize}.custom-keyboard__row{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.custom-keyboard__key{flex:1 1 0;max-width:52px;min-width:0;height:42px;padding:0;color:#111827;font-size:16px;font-weight:700;background:#fff;border:0;border-radius:5px;box-shadow:0 1px 2px #0f172a47}.custom-keyboard--numeric .custom-keyboard__key{max-width:92px;height:46px;font-size:18px}.custom-keyboard__key:active,.custom-keyboard__text-actions button:active,.custom-keyboard__actions button:active{transform:scale(.96)}.custom-keyboard__text-actions{display:grid;grid-template-columns:minmax(90px,.4fr) 1fr;gap:6px;margin:2px 4px 6px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:42px;font-size:15px;font-weight:700;border:0;border-radius:5px}.custom-keyboard__shift{color:#172033;background:#aeb6c2}.custom-keyboard__shift.active{color:#fff;background:#64748b}.custom-keyboard__space{color:#172033;background:#fff}.custom-keyboard__actions{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;padding:0 4px}.custom-keyboard__delete{color:#172033;background:#aeb6c2}.custom-keyboard__done{color:#fff;background:#1890ff}@media(max-height:650px){.custom-keyboard{max-height:58dvh}.custom-keyboard__key{height:35px}.custom-keyboard__row{margin-bottom:4px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:36px}}\n"] }]
+            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]=\"session.type === 'numeric'\"\r\n    [attr.aria-label]=\"session.type + ' keyboard'\" (pointerdown)=\"$event.preventDefault()\">\r\n    <div class=\"custom-keyboard__toolbar\">\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.clear()\">\r\n            Clear\r\n        </button>\r\n\r\n        <span class=\"custom-keyboard__type\">\r\n            {{ session.type }}\r\n        </span>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__toolbar-button\" (click)=\"keyboard.close()\">\r\n            Done\r\n        </button>\r\n    </div>\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    @if (\r\n    session.type === 'alpha' ||\r\n    session.type === 'string'\r\n    ) {\r\n    <div class=\"custom-keyboard__text-actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__shift\" [class.active]=\"uppercase()\" (click)=\"toggleCase()\">\r\n            \u21E7 Shift\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__space\" (click)=\"enterSpace()\">\r\n            Space\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"custom-keyboard__actions\">\r\n        <button type=\"button\" class=\"custom-keyboard__delete\" aria-label=\"Delete previous character\"\r\n            (click)=\"keyboard.backspace()\">\r\n            <i class=\"pi pi-delete-left\"></i>\r\n            Delete\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"custom-keyboard__done\" (click)=\"keyboard.close()\">\r\n            Done\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-y:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.custom-keyboard__toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:8px;padding:0 4px}.custom-keyboard__toolbar-button{padding:6px 10px;color:#126fd1;font-size:14px;font-weight:700;background:transparent;border:0}.custom-keyboard__type{color:#475569;font-size:12px;font-weight:700;text-align:center;text-transform:capitalize}.custom-keyboard__row{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.custom-keyboard__key{flex:1 1 0;max-width:52px;min-width:0;height:42px;padding:0;color:#111827;font-size:16px;font-weight:700;background:#fff;border:0;border-radius:5px;box-shadow:0 1px 2px #0f172a47}.custom-keyboard--numeric .custom-keyboard__key{max-width:92px;height:46px;font-size:18px}.custom-keyboard__key:active,.custom-keyboard__text-actions button:active,.custom-keyboard__actions button:active{transform:scale(.96)}.custom-keyboard__text-actions{display:grid;grid-template-columns:minmax(90px,.4fr) 1fr;gap:6px;margin:2px 4px 6px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:42px;font-size:15px;font-weight:700;border:0;border-radius:5px}.custom-keyboard__shift{color:#172033;background:#aeb6c2}.custom-keyboard__shift.active{color:#fff;background:#64748b}.custom-keyboard__space{color:#172033;background:#fff}.custom-keyboard__actions{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;padding:0 4px}.custom-keyboard__delete{color:#172033;background:#aeb6c2}.custom-keyboard__done{color:#fff;background:#1890ff}@media(max-height:650px){.custom-keyboard{max-height:58dvh}.custom-keyboard__key{height:35px}.custom-keyboard__row{margin-bottom:4px}.custom-keyboard__text-actions button,.custom-keyboard__actions button{height:36px}}\n"] }]
         }] });
 
 /*