@ajuarezso/sui-design-system 0.15.0 → 0.15.2

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -9777,6 +9777,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *     selector de país es una feature nueva (selector de país); SUI tiene
  *     [prefix] como string estático.
  */
+/**
+ * ¿El tap va a parar a algo que abre el teclado?
+ *
+ * Se mira hacia arriba desde el target y no solo el target: en un `sui-input`
+ * el toque suele caer en el wrapper, el label o el ícono, y ninguno de esos es
+ * el `<input>`. Sin subir por los ancestros, tocar el borde de otro campo se
+ * leía como tocar el vacío.
+ *
+ * `readonly` no cuenta —no abre teclado— pero un `disabled` tampoco recibe el
+ * evento, así que no hace falta filtrarlo.
+ */
+function recibeTexto(target) {
+    let el = target instanceof HTMLElement
+        ? target
+        : target.parentElement;
+    while (el) {
+        const tag = el.tagName;
+        if (tag === 'TEXTAREA' || tag === 'SELECT')
+            return true;
+        if (tag === 'INPUT' && !el.readOnly)
+            return true;
+        if (el.isContentEditable)
+            return true;
+        /* El host del componente: alcanza con reconocerlo aunque el `<input>` de
+           adentro todavía no exista (los `type` con control propio lo montan
+           condicionalmente). */
+        if (tag === 'SUI-INPUT' || tag === 'SUI-TEXTAREA')
+            return true;
+        el = el.parentElement;
+    }
+    return false;
+}
 class SuiInput {
     // ── Core inputs (existing API — DO NOT BREAK) ────────────────────────────
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -9872,15 +9904,22 @@ class SuiInput {
      * hay teclado abierto, por eso escuchamos también `touchstart` (nativo iOS)
      * y `mousedown` (web fallback). Cualquiera de los tres dispara el blur.
      *
-     * Solo hace blur cuando el elemento enfocado vive DENTRO de este host: si el
-     * foco está en otro lado (otro input, un textarea, nada), acá no hay teclado
-     * que cerrar y tocarlo es un bug. El listener es a nivel `document`, así que
-     * cada instancia de la página recibe todos los taps: con un blur incondicional
-     * de `inputEl`, tocar el texto de un input cerraba el teclado porque los OTROS
-     * sui-input de la pantalla hacían blur de los suyos —y en iOS un blur con el
-     * teclado abierto lo cierra aunque el elemento no tenga el foco. Se veía en
-     * cualquier formulario con más de un campo y no en el buscador del home, que
-     * tiene uno solo.
+     * Dos condiciones lo apagan, y cada una salió de un bug real en iOS:
+     *
+     * 1. El foco tiene que vivir DENTRO de este host. El listener es a nivel
+     *    `document`, así que cada instancia de la página recibe todos los taps:
+     *    con un blur incondicional, tocar el texto de un input cerraba el teclado
+     *    porque los OTROS sui-input hacían blur de los suyos —y en iOS un blur con
+     *    el teclado abierto lo cierra aunque el elemento no tenga el foco.
+     *
+     * 2. El tap NO puede ir a otro campo de texto. Ahí el navegador mueve el foco
+     *    solo, y adelantarle un blur en `pointerdown` cierra el teclado un
+     *    instante antes de que el campo nuevo lo vuelva a abrir. Ese parpadeo se
+     *    come el segundo toque de un doble tap: estando en un campo, no se podía
+     *    seleccionar una palabra de otro.
+     *
+     * Lo que queda es lo único que este listener tenía que hacer: tocar espacio
+     * muerto de la pantalla baja el teclado.
      */
     onDocumentTap(event) {
         if (!this.closeOnOutsideClick())
@@ -9889,6 +9928,8 @@ class SuiInput {
         const target = event.target;
         if (!target || host.contains(target))
             return;
+        if (recibeTexto(target))
+            return;
         const active = document.activeElement;
         if (active && host.contains(active))
             active.blur();
@@ -11352,10 +11393,18 @@ class SuiModal {
         const c = document.documentElement.classList;
         return c.contains('platform-ios') || c.contains('platform-android');
     }
+    /** Se lee al construir CADA modal y no dentro del computed: `enApp()` mira el
+     *  DOM y no es una señal, así que un `computed` la evaluaría una sola vez y se
+     *  quedaría con esa respuesta para siempre. Si el host marca la plataforma
+     *  después de ese primer render —o si el DS se evalúa antes que el arranque de
+     *  la app—, el modal quedaría centrado dentro de la app y nadie se enteraría.
+     *  Leerlo por instancia da la respuesta vigente cuando el modal nace, que es
+     *  cuando importa. */
+    enAppAlNacer = SuiModal.enApp();
     /** `fullscreen` ya resuelto: es lo que miran la plantilla y el host. */
     esFullscreen = computed(() => {
         const v = this.fullscreen();
-        return v === 'auto' ? SuiModal.enApp() : v === true;
+        return v === 'auto' ? this.enAppAlNacer : v === true;
     }, ...(ngDevMode ? [{ debugName: "esFullscreen" }] : /* istanbul ignore next */ []));
     /** Quita el padding del body para contenido full-bleed (mapas, imágenes
         grandes). El consumer es responsable de su propio spacing interno. */