@propbinder/mobile-design 0.2.34 → 0.2.36

package/index.d.ts

@@ -5426,6 +5426,16 @@ interface ChatModalData {
     currentUserAvatarSrc?: string;
     /** Auto-focus input when modal opens */
     autoFocus?: boolean;
+    /**
+     * Callback executed when a message is sent from the chat.
+     * Use this to handle API calls to your backend.
+     */
+    onSend?: (message: string, attachments: AttachmentData[]) => void | Promise<void>;
+    /**
+     * Optional callback for when a file attachment is clicked.
+     * If not provided, the default behavior will try to open/download the file.
+     */
+    onFileClick?: (file: AttachmentData) => void;
 }
 /**
  * DsMobileChatModalComponent
@@ -5653,7 +5663,16 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
  *     ],
  *     currentUserId: '456',
  *     currentUserInitials: 'JD',
- *     autoFocus: true
+ *     currentUserInitials: 'JD',
+ *     autoFocus: true,
+ *     onSend: async (message, attachments) => {
+ *       console.log('Sending message:', message);
+ *       // await this.chatService.sendMessage(participant.id, message, attachments);
+ *     },
+ *     onFileClick: (file) => {
+ *       console.log('File clicked:', file);
+ *       // window.open(file.url, '_blank');
+ *     }
  *   });
  * }
  * ```
@@ -6985,7 +7004,7 @@ declare class DsMobileHandbookFolderMiniComponent {
  * ```
  */
 declare class DsTextInputComponent implements ControlValueAccessor {
-    type: _angular_core.InputSignal<"search" | "text" | "url" | "email" | "tel" | "password">;
+    type: _angular_core.InputSignal<"search" | "text" | "email" | "password" | "tel" | "url">;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     readonly: _angular_core.InputSignal<boolean>;
@@ -6993,7 +7012,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     hasError: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"search" | "text" | "url" | "numeric" | "email" | "tel" | undefined>;
+    inputmode: _angular_core.InputSignal<"search" | "text" | "numeric" | "email" | "tel" | "url" | undefined>;
     autoClearError: _angular_core.InputSignal<boolean>;
     validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
     valueChange: _angular_core.OutputEmitterRef<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.34",
+  "version": "0.2.36",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"

package/styles/ionic.css

@@ -279,17 +279,16 @@ ion-modal:not(.ds-bottom-sheet) {
   --background: var(--color-background-neutral-primary);
   --border-radius: 16px;
   --box-shadow: var(--box-shadow-lg);
-  --height: auto;
-  max-height: 100dvh;
-  height: 100dvh !important;
+  /* Prevent modal from resizing when keyboard appears */
+  height: 100% !important;
+  max-height: 100vh !important;
 }
 
 /* Prevent modal container from resizing when keyboard appears */
 ion-modal:not(.ds-bottom-sheet)::part(content) {
   position: fixed !important;
-  max-height: 100dvh !important;
-  /* Ensure content doesn't get cut off by keyboard or safe area */
-  padding-bottom: env(safe-area-inset-bottom);
+  height: 100% !important;
+  max-height: 100vh !important;
 }
 
 /* Prevent ion-content inside modals from resizing */
@@ -329,15 +328,9 @@ ion-toast {
   --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
   --backdrop-opacity: 0.4;
   transition: --backdrop-opacity 0.3s ease;
-
-  /* Position the modal container to fill screen */
-  top: 0 !important;
-  height: 100% !important;
-
-  /* Align the actual sheet at the bottom */
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+  /* Modal at top:0 so backdrop covers full screen including status bar */
+    top: 0;
+    height: 100%;
 }
 
 /* Backdrop styling */
@@ -355,21 +348,18 @@ ion-toast {
   margin-bottom: 8px;
 }
 
-/* Content area styling - Support auto-height by default for sheets */
+/* Content area styling */
 .ds-bottom-sheet::part(content) {
   /* Offset content below status bar (backdrop still covers full screen) */
   margin-top: var(--app-sheet-top-offset);
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--color-background-neutral-primary, #ffffff);
   box-shadow: var(--box-shadow);
-
-  /* Auto-height logic: Only as tall as content */
-  height: auto !important;
-  max-height: calc(100dvh - var(--app-sheet-top-offset)) !important;
-
-  /* Sit at the bottom of the flex container */
-  position: relative !important;
-  margin-top: auto !important;
+  position: absolute !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    height: 100% !important;
+    max-height: 100% !important;
 }
 
 /* Remove border radius when fully expanded */
@@ -406,8 +396,23 @@ ion-toast {
    Make action sheets auto-size to their content
    ============================================ */
 
-/* Auto-height behavior is now part of .ds-bottom-sheet base */
+/* Auto-height modal - override base bottom sheet styles */
+.ds-bottom-sheet.auto-height {
+  top: 0 !important;
+  height: 100% !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
 
+.ds-bottom-sheet.auto-height::part(content) {
+  position: relative !important;
+  height: auto !important;
+  max-height: 80vh !important;
+  top: auto !important;
+  bottom: auto !important;
+  margin-top: auto !important;
+}
 /* Ensure action sheet component sizes naturally */
 .ds-bottom-sheet ds-mobile-actions-bottom-sheet {
   display: block;
@@ -621,12 +626,9 @@ ion-modal.ds-modal-base {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  /* Subtract top offset from total height to avoid bottom clipping */
-  --height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
-  --max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
+  --height: 100dvh;
+    /* Full viewport height - content top offset creates gap */
   --border-radius: 16px 16px 0 0;
-  display: flex !important;
-  align-items: flex-end !important;
 }
 
 ion-modal.ds-modal-base::part(content) {
@@ -635,11 +637,10 @@ ion-modal.ds-modal-base::part(content) {
   background: var(--color-background-neutral-primary, #ffffff);
   max-width: 640px;
   margin: 0 auto;
-  /* Reset Ionic's default top offset and stick to bottom */
-  top: auto !important;
-  bottom: 0 !important;
-  height: 100% !important;
-  position: relative !important;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+    top: var(--app-sheet-top-offset) !important;
+    height: calc(100% - var(--app-sheet-top-offset)) !important;
+    max-height: calc(100dvh - var(--app-sheet-top-offset)) !important;
 }
 
 /* Auto-height support for base modals */