valtech-components 2.0.569 → 2.0.571

package/fesm2022/valtech-components.mjs

@@ -8745,15 +8745,28 @@ class SelectSearchComponent {
         event.stopPropagation();
         this.openModal();
     }
-    cancelModal() {
-        // Reset filter and show all options when closing modal
+    /**
+     * Reset state only - called by didDismiss event
+     * Separated from closeModal to avoid double dismissal and scroll issues
+     */
+    resetState() {
         this.searchTerm = '';
         this.filteredItems = this.props?.options ? [...this.props.options] : [];
-        this.changeDetector.detectChanges();
+    }
+    /**
+     * Close modal only - does not reset state (didDismiss will handle that)
+     */
+    closeModal() {
         if (this.modal) {
             this.modal.dismiss();
         }
     }
+    /**
+     * @deprecated Use closeModal() instead. Kept for backwards compatibility.
+     */
+    cancelModal() {
+        this.closeModal();
+    }
     selectItem(item) {
         if (this.multiple) {
             const index = this.selectedItems.findIndex(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
@@ -8766,7 +8779,7 @@ class SelectSearchComponent {
         }
         else {
             this.selectedItems = [item];
-            this.cancelModal();
+            this.closeModal();
         }
         this.updateDisplayValue();
         this.applyChanges();
@@ -8836,7 +8849,7 @@ class SelectSearchComponent {
       trigger="open-modal"
       [initialBreakpoint]="1"
       [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="cancelModal()"
+      (didDismiss)="resetState()"
     >
       <ng-template>
         <ion-header>
@@ -8883,7 +8896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       trigger="open-modal"
       [initialBreakpoint]="1"
       [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="cancelModal()"
+      (didDismiss)="resetState()"
     >
       <ng-template>
         <ion-header>
@@ -11865,15 +11878,28 @@ class MultiSelectSearchComponent {
         event.stopPropagation();
         this.openModal();
     }
-    cancelModal() {
-        // Reset filter and show all options when closing modal
+    /**
+     * Reset state only - called by didDismiss event
+     * Separated from closeModal to avoid double dismissal and scroll issues
+     */
+    resetState() {
         this.searchTerm = '';
         this.filteredItems = this.props?.options ? [...this.props.options] : [];
-        this.changeDetector.detectChanges();
+    }
+    /**
+     * Close modal only - does not reset state (didDismiss will handle that)
+     */
+    closeModal() {
         if (this.modal) {
             this.modal.dismiss();
         }
     }
+    /**
+     * @deprecated Use closeModal() instead. Kept for backwards compatibility.
+     */
+    cancelModal() {
+        this.closeModal();
+    }
     selectItem(item) {
         // Multi-select logic: toggle selection
         const index = this.selectedItems.findIndex(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
@@ -11938,7 +11964,7 @@ class MultiSelectSearchComponent {
     }
     applyAndClose() {
         this.applyChanges();
-        this.cancelModal();
+        this.closeModal();
     }
     // Método público para reiniciar el componente
     reset() {
@@ -11966,7 +11992,7 @@ class MultiSelectSearchComponent {
       trigger="open-modal"
       [initialBreakpoint]="1"
       [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="cancelModal()"
+      (didDismiss)="resetState()"
     >
       <ng-template>
         <ion-header>
@@ -12044,7 +12070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       trigger="open-modal"
       [initialBreakpoint]="1"
       [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="cancelModal()"
+      (didDismiss)="resetState()"
     >
       <ng-template>
         <ion-header>
@@ -31705,7 +31731,7 @@ class SimpleModalContentComponent {
         </ion-toolbar>
       </ion-footer>
     }
-  `, isInline: true, styles: [".button-container{display:flex;justify-content:flex-end;gap:8px;padding:8px 0}ion-content{--padding-top: 16px;--padding-bottom: 16px}ion-footer ion-toolbar{--padding-start: 16px;--padding-end: 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.button-container{display:flex;justify-content:flex-end;gap:8px;padding:8px 0}ion-header{flex-shrink:0}ion-content{flex:1 1 auto;--padding-top: 16px;--padding-bottom: 16px;--padding-start: 16px;--padding-end: 16px}ion-content::part(scroll){overflow-y:auto}ion-footer{flex-shrink:0}ion-footer ion-toolbar{--padding-start: 16px;--padding-end: 16px}:host ::ng-deep ul,:host ::ng-deep ol{padding-left:20px;margin:8px 0}:host ::ng-deep li{margin:4px 0}:host ::ng-deep p{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleModalContentComponent, decorators: [{
             type: Component,
@@ -31751,7 +31777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-toolbar>
       </ion-footer>
     }
-  `, styles: [".button-container{display:flex;justify-content:flex-end;gap:8px;padding:8px 0}ion-content{--padding-top: 16px;--padding-bottom: 16px}ion-footer ion-toolbar{--padding-start: 16px;--padding-end: 16px}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column;height:100%}.button-container{display:flex;justify-content:flex-end;gap:8px;padding:8px 0}ion-header{flex-shrink:0}ion-content{flex:1 1 auto;--padding-top: 16px;--padding-bottom: 16px;--padding-start: 16px;--padding-end: 16px}ion-content::part(scroll){overflow-y:auto}ion-footer{flex-shrink:0}ion-footer ion-toolbar{--padding-start: 16px;--padding-end: 16px}:host ::ng-deep ul,:host ::ng-deep ol{padding-left:20px;margin:8px 0}:host ::ng-deep li{margin:4px 0}:host ::ng-deep p{margin:8px 0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], content: [{
@@ -31845,7 +31871,16 @@ class ModalService {
         if (options.width || options.height || size) {
             const modalEl = modal;
             modalEl.style.setProperty('--width', options.width || size.width || 'auto');
-            modalEl.style.setProperty('--height', options.height || size.height || 'auto');
+            // Use min-height for auto to allow content to determine size
+            const heightValue = options.height || size.height || 'auto';
+            if (heightValue === 'auto') {
+                modalEl.style.setProperty('--height', 'auto');
+                modalEl.style.setProperty('--min-height', '200px');
+                modalEl.style.setProperty('--max-height', '90vh');
+            }
+            else {
+                modalEl.style.setProperty('--height', heightValue);
+            }
         }
         await modal.present();
         const { data, role } = await modal.onDidDismiss();