@softpak/components 20.6.11 → 20.7.0

package/fesm2022/softpak-components-spx-inputs.mjs

@@ -279,8 +279,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 //   }
 
 class SpxInputCycleComponent {
-    constructor(cdr) {
+    setT(fn, ms = 0) {
+        const id = window.setTimeout(() => {
+            this.pendingTimers.delete(id);
+            if (!this.suppressRefocus)
+                fn();
+        }, ms);
+        this.pendingTimers.add(id);
+        return id;
+    }
+    clearPendingTimers() {
+        this.pendingTimers.forEach((id) => clearTimeout(id));
+        this.pendingTimers.clear();
+    }
+    constructor(cdr, hostRef) {
         this.cdr = cdr;
+        this.hostRef = hostRef;
+        // ===== Inputs/signals (unchanged) =====
         this.mappedReadonly = computed(() => (this.spxReadonly() ? true : false), ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
         this.spxSpeedDial = input([], ...(ngDevMode ? [{ debugName: "spxSpeedDial" }] : []));
         this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
@@ -314,6 +329,9 @@ class SpxInputCycleComponent {
         this.internalIncompleteVer = signal(0, ...(ngDevMode ? [{ debugName: "internalIncompleteVer" }] : []));
         this.lastSkippedVer = -1;
         this.completeInput = new EventEmitter();
+        // ===== NEW: Focus suppression + safe timers =====
+        this.suppressRefocus = false;
+        this.pendingTimers = new Set();
         /** Externe wijzigingen via model() → sync naar interne state + DOM */
         this._reactToValueChanges = effect(() => {
             const incoming = this.value(); // dependency blijft
@@ -340,6 +358,23 @@ class SpxInputCycleComponent {
             this.spxSetFocus();
         this.applyValuesToDom();
     }
+    ngOnDestroy() {
+        this.clearPendingTimers();
+    }
+    // ===== Document-level pointer guards (NEW) =====
+    onDocPointerDown(ev) {
+        const inside = this.hostRef.nativeElement.contains(ev.target);
+        if (!inside) {
+            this.suppressRefocus = true; // block queued focus/selection during outside click
+            this.clearPendingTimers(); // cancel already queued focus/selection
+        }
+    }
+    onDocPointerUp() {
+        // re-enable refocus on the next frame after click completes
+        requestAnimationFrame(() => {
+            this.suppressRefocus = false;
+        });
+    }
     // =========================
     // Extern -> Intern & DOM
     // =========================
@@ -379,14 +414,12 @@ class SpxInputCycleComponent {
     // =========================
     // Intern -> Extern (emit)
     // =========================
-    // -- emit helper
     handleChange(event, opts) {
-        // laat je null->null guard staan als je die wilt
         if (event === null && this.lastEmitted === null && !opts?.internalIncomplete)
             return;
         untracked(() => {
             if (opts?.internalIncomplete) {
-                this.internalIncompleteVer.update(v => v + 1); // markeer alleen interne-incomplete
+                this.internalIncompleteVer.update((v) => v + 1); // markeer alleen interne-incomplete
             }
             this.value.set(event);
         });
@@ -408,7 +441,6 @@ class SpxInputCycleComponent {
             this.handleChange(null, { internalIncomplete: true }); // markeer als intern-incompleet
         }
     }
-    // Voor auto-advance stopconditie: ALLE posities gevuld?
     isAllFilled() {
         return this.values.every((v) => v !== '' && v !== null);
     }
@@ -417,13 +449,13 @@ class SpxInputCycleComponent {
     // =========================
     spxSetFocus() {
         const pos = this.spxCycleConfig().defaultFocusPosition;
-        setTimeout(() => this.focusPos(pos));
+        this.setT(() => this.focusPos(pos));
     }
     onFocus(pos, _ev) {
         const input = this.inputBoxes.toArray()[pos]?.nativeElement;
         if (!input)
             return;
-        setTimeout(() => input.select(), 0); // selecteer altijd alles bij focus
+        this.setT(() => input.select(), 0); // selecteer altijd alles bij focus (guarded)
         this.cancelNextMouseUp = true;
     }
     onMouseUp(ev) {
@@ -449,7 +481,6 @@ class SpxInputCycleComponent {
             return;
         const inputEl = event.target;
         let v = inputEl.value ?? '';
-        // Eén teken per box
         if (v.length > 1) {
             v = v.charAt(0);
             if (inputEl.value !== v)
@@ -457,7 +488,6 @@ class SpxInputCycleComponent {
         }
         this.values[pos] = v;
         this.checkEmitCondition();
-        // Auto-advance guards
         if (this.composing)
             return; // niet tijdens IME
         if (document.activeElement !== inputEl)
@@ -466,17 +496,14 @@ class SpxInputCycleComponent {
             return; // alleen als er precies 1 teken staat
         const order = this.spxCycleConfig().focusOrder;
         const isLastPos = pos === order.length - 1;
-        // Op laatste positie én ALLES gevuld? -> niet wrappen; laat Tab verder gaan.
         if (isLastPos && this.isAllFilled()) {
             return;
         }
-        // throttle & re-entrancy
         const now = Date.now();
         if (this.advancing || now - this.lastAdvanceAt < 40)
             return;
         this.advancing = true;
-        setTimeout(() => {
-            // dubbel-check voor zekerheid
+        this.setT(() => {
             if (inputEl.value.length === 1 && document.activeElement === inputEl) {
                 const next = this.nextPos(pos); // mag wrappen zolang niet alles gevuld
                 this.focusPos(next);
@@ -485,7 +512,6 @@ class SpxInputCycleComponent {
             this.advancing = false;
         }, 0);
     }
-    // Alles leegmaken helper (incl. focus terugzetten naar startpositie)
     clearAllAndEmit() {
         const len = this.spxCycleConfig().length;
         if (!this.values || this.values.length !== len) {
@@ -495,12 +521,11 @@ class SpxInputCycleComponent {
             for (let i = 0; i < len; i++)
                 this.values[i] = '';
         }
-        this.applyValuesToDom(); // maak zichtbare inputs leeg
-        this.handleChange(null); // emit meteen null
+        this.applyValuesToDom();
+        this.handleChange(null);
         const start = this.spxCycleConfig().defaultFocusPosition ?? 0;
-        this.focusPos(start); // focus terug naar geconfigureerde startpositie
+        this.focusPos(start);
     }
-    // Vind het volgende tabbable element in het document en geef het terug
     getNextTabStop(fromEl, backwards = false) {
         const selector = [
             'a[href]',
@@ -512,11 +537,7 @@ class SpxInputCycleComponent {
             '[tabindex]:not([tabindex="-1"])',
             '[contenteditable="true"]',
         ].join(',');
-        const all = Array.from(document.querySelectorAll(selector))
-            .filter((el) => !el.hasAttribute('disabled') &&
-            el.tabIndex !== -1 &&
-            el.offsetParent !== null && // zichtbaar/focusbaar
-            !el.hasAttribute('inert'));
+        const all = Array.from(document.querySelectorAll(selector)).filter((el) => !el.hasAttribute('disabled') && el.tabIndex !== -1 && el.offsetParent !== null && !el.hasAttribute('inert'));
         const i = all.indexOf(fromEl);
         if (i === -1)
             return null;
@@ -527,27 +548,22 @@ class SpxInputCycleComponent {
         const el = this.inputBoxes.toArray()[pos]?.nativeElement;
         if (!el)
             return;
-        // Replace-gedrag bij printable key (caret zonder selectie)
         const isPrintable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
         if (isPrintable && el.value.length >= 1 && el.selectionStart === el.selectionEnd) {
-            el.select(); // laat browser de insert uitvoeren (vervangt)
+            el.select();
         }
-        // Tab op laatste positie wanneer alles gevuld is:
-        // zoek eerst volgende tabbable; alleen dan preventDefault + focus
         if (event.key === 'Tab') {
             const order = this.spxCycleConfig().focusOrder;
             const isLastPos = pos === order.length - 1;
             if (isLastPos && this.isAllFilled()) {
                 const next = this.getNextTabStop(el, event.shiftKey);
                 if (next) {
-                    event.preventDefault(); // alleen blokkeren als we zelf verplaatsen
+                    event.preventDefault();
                     next.focus();
                 }
-                return; // anders default laten doorgaan
+                return;
             }
-            // anders: laat de browser normale Tab-afhandeling doen
         }
-        // Backspace/Delete = ALLES leegmaken en focus naar start
         if (event.key === 'Backspace' || event.key === 'Delete') {
             event.preventDefault();
             this.clearAllAndEmit();
@@ -566,17 +582,19 @@ class SpxInputCycleComponent {
         return (pos - 1 + order.length) % order.length;
     }
     focusPos(pos) {
+        if (this.suppressRefocus)
+            return; // NEW: don't steal focus during outside clicks
         const el = this.inputBoxes.toArray()[pos]?.nativeElement;
         if (!el)
             return;
         if (document.activeElement === el)
             return; // al gefocust
-        el.focus();
+        el.focus({ preventScroll: true });
         if (el.value)
-            setTimeout(() => el.select(), 0);
+            this.setT(() => el.select()); // selection guarded
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputCycleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputCycleComponent, isStandalone: true, selector: "spx-input-cycle", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: true, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completeInput: "completeInput" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "inputBoxes", predicate: ["inputBox"], descendants: true }], ngImport: i0, template: "<div class=\"relative text-black flex gap-2 w-full\">\n  @for (val of values; track $index) {\n  <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n    (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n    (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n    [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n    [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n    [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n    [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n    [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n    [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n    class=\"rounded text-center p-3 font-bold text-lg w-full\" />\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputCycleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputCycleComponent, isStandalone: true, selector: "spx-input-cycle", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: true, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completeInput: "completeInput" }, host: { listeners: { "document:pointerdown": "onDocPointerDown($event)", "document:pointerup": "onDocPointerUp()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "inputBoxes", predicate: ["inputBox"], descendants: true }], ngImport: i0, template: "<div class=\"relative text-black flex gap-2 w-full\">\n  @for (val of values; track $index) {\n  <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n    (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n    (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n    [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n    [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n    [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n    [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n    [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n    [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n    class=\"rounded text-center p-3 font-bold text-lg w-full\" />\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputCycleComponent, decorators: [{
             type: Component,
@@ -584,11 +602,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         ReactiveFormsModule,
                         FormsModule,
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black flex gap-2 w-full\">\n  @for (val of values; track $index) {\n  <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n    (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n    (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n    [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n    [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n    [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n    [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n    [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n    [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n    class=\"rounded text-center p-3 font-bold text-lg w-full\" />\n  }\n</div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { completeInput: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { completeInput: [{
                 type: Output
             }], inputBoxes: [{
                 type: ViewChildren,
                 args: ['inputBox']
+            }], onDocPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onDocPointerUp: [{
+                type: HostListener,
+                args: ['document:pointerup']
             }] } });
 
 var stepType;