@eagami/ui 5.41.0 → 5.41.1

package/fesm2022/eagami-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, untracked, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, RendererStyleFlags2, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID, afterRenderEffect } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, DestroyRef, Injector, afterNextRender, viewChild, ElementRef, untracked, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, RendererStyleFlags2, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID, afterRenderEffect } from '@angular/core';
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TouchedChangeEvent, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /** DI token carrying the consumer-supplied i18n configuration. */
 const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
@@ -4210,32 +4210,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--error\"\n    [id]=\"id() + '-error'\"\n    role=\"alert\">\n    <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n    {{ error() }}\n  </p>\n} @else if (hint()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--hint\"\n    [id]=\"id() + '-hint'\">\n    {{ hint() }}\n  </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em;transform:translateY(-.0625em)}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
+/**
+ * Tracks where the press behind the current `click` started and ended.
+ *
+ * A `click` is dispatched on the nearest common ancestor of the press and the
+ * release, so a drag that begins on a panel and ends on the backdrop arrives as
+ * a click on the backdrop. Dismissal handlers that only read `event.target`
+ * therefore treat "select text in a dialog, release outside it" as an outside
+ * click, and shut the dialog under the user. Consulting both ends of the press
+ * keeps a dismissal to presses that stayed outside from start to finish.
+ *
+ * Both ends read `null` for a click with no pointer behind it (keyboard
+ * activation, `element.click()`), which every check below treats as a plain
+ * click on its target.
+ *
+ * It also knows whether a press is still in progress, so work that would move
+ * content under the pointer can wait until the press has landed its click.
+ */
+class PointerPressTracker {
+    downTarget = null;
+    upTarget = null;
+    pressing = false;
+    pressEndCallbacks = new Set();
+    onDown = (event) => {
+        this.downTarget = event.target;
+        this.upTarget = null;
+        this.pressing = true;
+    };
+    onUp = (event) => {
+        this.upTarget = event.target;
+    };
+    // A click is already bound to its target by the time capture listeners run,
+    // so work released from here can no longer redirect it
+    onPressEnd = () => {
+        this.pressing = false;
+        const callbacks = [...this.pressEndCallbacks];
+        this.pressEndCallbacks.clear();
+        callbacks.forEach(callback => callback());
+    };
+    // A keyboard-driven click carries no pointer events of its own, and would
+    // otherwise be read against whichever press came before it
+    onKeydown = () => {
+        this.downTarget = null;
+        this.upTarget = null;
+        this.onPressEnd();
+    };
+    constructor() {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        // Capture phase, so a handler that stops propagation cannot hide the press
+        document.addEventListener('pointerdown', this.onDown, true);
+        document.addEventListener('pointerup', this.onUp, true);
+        document.addEventListener('click', this.onPressEnd, true);
+        document.addEventListener('pointercancel', this.onPressEnd, true);
+        document.addEventListener('keydown', this.onKeydown, true);
+        inject(DestroyRef).onDestroy(() => {
+            document.removeEventListener('pointerdown', this.onDown, true);
+            document.removeEventListener('pointerup', this.onUp, true);
+            document.removeEventListener('click', this.onPressEnd, true);
+            document.removeEventListener('pointercancel', this.onPressEnd, true);
+            document.removeEventListener('keydown', this.onKeydown, true);
+        });
+    }
+    /** True when either end of the press landed on `el` or inside it. */
+    touchedInside(el) {
+        if (!el) {
+            return false;
+        }
+        return ((this.downTarget !== null && el.contains(this.downTarget)) ||
+            (this.upTarget !== null && el.contains(this.upTarget)));
+    }
+    /** True when neither end of the press landed anywhere but `el` itself. */
+    stayedOn(el) {
+        if (!el) {
+            return false;
+        }
+        return ((this.downTarget === null || this.downTarget === el) &&
+            (this.upTarget === null || this.upTarget === el));
+    }
+    /**
+     * Runs `callback` once the press in progress has landed its click or been
+     * cancelled, or straight away when no press is in progress. Returns a
+     * function that drops the pending call.
+     */
+    whenPressEnds(callback) {
+        if (!this.pressing) {
+            callback();
+            return () => undefined;
+        }
+        this.pressEndCallbacks.add(callback);
+        return () => this.pressEndCallbacks.delete(callback);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Derives a form control's display error from, in priority order: an explicit
  * `errorMsg`, a consumer `errorMessages` override, then the library's localized
  * default for the active `ValidationErrors` key. Auto-derived messages surface
  * only once the bound control is `invalid && touched`, matching the moment a
- * user expects validation feedback. The control arrives as a signal so callers
- * decide how it is resolved: from the host's own `NgControl` (CVA components)
- * or from projected content (`<ea-form-field>`).
+ * user expects validation feedback. A message revealed by a pointer press
+ * moving focus away waits until that press has landed its click. The control
+ * arrives as a signal so callers decide how it is resolved: from the host's own
+ * `NgControl` (CVA components) or from projected content (`<ea-form-field>`).
  */
 function controlErrorStateFrom(control, config) {
     const i18n = inject(EagamiI18nService);
+    const press = inject(PointerPressTracker);
     // Bumped on every status/touched change so the computed re-reads the control
     const revision = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    // The message a blur reveals grows the field and shifts the layout under the
+    // pointer, so while the press behind that blur is down the click would land
+    // on whatever moved into its place
+    const revealPending = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealPending" }] : /* istanbul ignore next */ []));
     effect(onCleanup => {
         const ctrl = control();
         if (!ctrl) {
             return;
         }
-        const sub = ctrl.events.subscribe(() => revision.update(r => r + 1));
-        onCleanup(() => sub.unsubscribe());
+        let dropPendingReveal = null;
+        const sub = ctrl.events.subscribe(event => {
+            if (event instanceof TouchedChangeEvent && event.touched) {
+                dropPendingReveal?.();
+                revealPending.set(true);
+                dropPendingReveal = press.whenPressEnds(() => revealPending.set(false));
+            }
+            revision.update(r => r + 1);
+        });
+        onCleanup(() => {
+            sub.unsubscribe();
+            dropPendingReveal?.();
+            revealPending.set(false);
+        });
     });
     const autoError = computed(() => {
         revision();
         const ctrl = control();
-        if (!ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) {
+        if (revealPending() || !ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) {
             return null;
         }
         return resolveValidationMessage(ctrl.errors, config.errorMessages(), i18n.messages());
@@ -4315,74 +4434,6 @@ function isRtl(element) {
     return getComputedStyle(element).direction === 'rtl';
 }
 
-/**
- * Tracks where the press behind the current `click` started and ended.
- *
- * A `click` is dispatched on the nearest common ancestor of the press and the
- * release, so a drag that begins on a panel and ends on the backdrop arrives as
- * a click on the backdrop. Dismissal handlers that only read `event.target`
- * therefore treat "select text in a dialog, release outside it" as an outside
- * click, and shut the dialog under the user. Consulting both ends of the press
- * keeps a dismissal to presses that stayed outside from start to finish.
- *
- * Both ends read `null` for a click with no pointer behind it (keyboard
- * activation, `element.click()`), which every check below treats as a plain
- * click on its target.
- */
-class PointerPressTracker {
-    downTarget = null;
-    upTarget = null;
-    onDown = (event) => {
-        this.downTarget = event.target;
-        this.upTarget = null;
-    };
-    onUp = (event) => {
-        this.upTarget = event.target;
-    };
-    // A keyboard-driven click carries no pointer events of its own, and would
-    // otherwise be read against whichever press came before it
-    onKeydown = () => {
-        this.downTarget = null;
-        this.upTarget = null;
-    };
-    constructor() {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        // Capture phase, so a handler that stops propagation cannot hide the press
-        document.addEventListener('pointerdown', this.onDown, true);
-        document.addEventListener('pointerup', this.onUp, true);
-        document.addEventListener('keydown', this.onKeydown, true);
-        inject(DestroyRef).onDestroy(() => {
-            document.removeEventListener('pointerdown', this.onDown, true);
-            document.removeEventListener('pointerup', this.onUp, true);
-            document.removeEventListener('keydown', this.onKeydown, true);
-        });
-    }
-    /** True when either end of the press landed on `el` or inside it. */
-    touchedInside(el) {
-        if (!el) {
-            return false;
-        }
-        return ((this.downTarget !== null && el.contains(this.downTarget)) ||
-            (this.upTarget !== null && el.contains(this.upTarget)));
-    }
-    /** True when neither end of the press landed anywhere but `el` itself. */
-    stayedOn(el) {
-        if (!el) {
-            return false;
-        }
-        return ((this.downTarget === null || this.downTarget === el) &&
-            (this.upTarget === null || this.upTarget === el));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PointerPressTracker, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
 /*
  * A modal `<dialog>` (`showModal()`) renders in the browser's top layer, which
  * paints above every z-index in the normal layer. An overlay portaled to