valtech-components 4.0.19 → 4.0.21

package/lib/services/modal/modal.service.d.ts

@@ -83,6 +83,17 @@ export declare class ModalService {
      * @returns Promise resolving to the modal result
      */
     openFullscreen<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>>;
+    /**
+     * Opens an adaptive modal: full-screen on mobile, centered card on desktop.
+     *
+     * Solves two sheet-modal problems at once:
+     *  1. Content unreachable — no artificial height cap from breakpoints.
+     *  2. Scroll triggers dismiss — no swipe gesture, only backdrop/button close.
+     *
+     * @param options - Modal configuration (breakpoints/size/width/height are managed internally)
+     * @param variant - 'wide' for wider desktop card (720px vs default 560px)
+     */
+    openAdaptive<T = any, R = any>(options: Omit<ModalMetadata<T>, 'breakpoints' | 'size' | 'width' | 'height'>, variant?: 'wide'): Promise<ModalResult<R>>;
     /**
      * Dismisses the top-most modal.
      * @param data - Optional data to return

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "4.0.19";
+export declare const VERSION = "4.0.21";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "4.0.19",
+  "version": "4.0.21",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/src/lib/components/styles/overrides.scss

@@ -273,6 +273,32 @@ ion-modal ion-content {
   --overflow: hidden auto;
 }
 
+/* ─── Adaptive modal ──────────────────────────────────────────────────────────
+ * Mobile: full-screen (sin breakpoints → sin conflicto gesture/scroll).
+ * Desktop (≥768px): card centrada con border-radius.
+ *
+ * Usar via ModalService.openAdaptive() o cssClass="val-modal-adaptive".
+ * Variante .val-modal-adaptive--wide disponible para contenido más ancho.
+ * ─────────────────────────────────────────────────────────────────────────── */
+ion-modal.val-modal-adaptive {
+  --border-radius: 0;
+  --width: 100%;
+  --height: 100%;
+
+  @media (min-width: 768px) {
+    --border-radius: 1.5rem;
+    --width: 560px;
+    --height: min(85vh, 800px);
+  }
+}
+
+ion-modal.val-modal-adaptive.val-modal-adaptive--wide {
+  @media (min-width: 768px) {
+    --width: 720px;
+    --height: min(88vh, 900px);
+  }
+}
+
 // Estilos para enlaces procesados automáticamente
 .processed-link {
   color: var(--ion-color-primary, #3880ff);