@propbinder/mobile-design 0.2.21 → 0.2.23

package/index.d.ts

@@ -2387,7 +2387,7 @@ declare class DsMobileListItemComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
     /**
      * Whether the list item is interactive (clickable and long-pressable)
      * When true, adds interactive background, cursor pointer, and touch handlers
@@ -4144,21 +4144,14 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * - Any custom CSS padding value
      *
      * @default '0'
-     *
-     * @example
-     * ```html
-     * <!-- Default: sections handle padding -->
-     * <ds-mobile-modal-base headerTitle="Details">
-     *   <ds-mobile-section headline="Info">...</ds-mobile-section>
-     * </ds-mobile-modal-base>
-     *
-     * <!-- Legacy: content without sections -->
-     * <ds-mobile-modal-base headerTitle="Details" contentPadding="20px">
-     *   <div>Padded content</div>
-     * </ds-mobile-modal-base>
-     * ```
      */
     contentPadding: _angular_core.InputSignal<string>;
+    /**
+     * Enable auto-height behavior for bottom sheets
+     * When true, sets [fullscreen]="false" on ion-content and enforces flex: 0 0 auto
+     * @default false
+     */
+    isAutoHeight: _angular_core.InputSignal<boolean>;
     /**
      * Emitted when modal is closed
      */
@@ -4200,7 +4193,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      */
     protected cleanupKeyboardListeners(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileModalBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "isAutoHeight": { "alias": "isAutoHeight"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
 }
 
 /**
@@ -4748,7 +4741,7 @@ declare class DsMobileCardInlineComponent {
      * - 'default' - Column layout with standard padding (gap: 12px, padding: 10px 12px)
      * - 'compact' - Row layout with reduced padding (gap: 8px, padding: 10px)
      */
-    variant: _angular_core.InputSignal<"default" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Whether the card is disabled
      * Disables all interactions and reduces opacity
@@ -4811,7 +4804,7 @@ declare class DsMobileCardInlineBannerComponent {
      * - 'default' - Standard padding and column layout
      * - 'compact' - Reduced padding and row layout
      */
-    layout: _angular_core.InputSignal<"default" | "compact">;
+    layout: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Emits when the banner is clicked
      */
@@ -4862,7 +4855,7 @@ declare class DsMobileCardInlineContactComponent {
      * - 'default' - Standard padding and column layout
      * - 'compact' - Reduced padding and row layout
      */
-    layout: _angular_core.InputSignal<"default" | "compact">;
+    layout: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Whether the contact item is clickable
      */
@@ -4919,7 +4912,7 @@ declare class DsMobileCardInlineFileComponent {
      * - 'default' - Standard padding and column layout
      * - 'compact' - Reduced padding and row layout
      */
-    layout: _angular_core.InputSignal<"default" | "compact">;
+    layout: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Optional URL to open when clicked
      * If provided, clicking the card will open this URL in a new tab
@@ -5360,6 +5353,7 @@ interface NewInquiryData {
  * ```
  */
 declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit {
+    private modalController;
     titleInputRef?: ElementRef<HTMLElement>;
     titleInput?: DsTextareaComponent;
     fileInput?: ElementRef<HTMLInputElement>;
@@ -5468,16 +5462,18 @@ interface NewInquiryModalOptions {
  *
  * @example
  * ```typescript
- * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
+ * constructor(private newInquiryModal: DsMobileNewInquiryModalService) {}
+ *
+ * async createNewInquiry(): Promise<void> {
+ *   console.log('[InquiriesPage] FAB clicked, opening modal...');
  *
- * async createNewInquiry() {
- *   await this.inquiryModal.open({
+ *   await this.newInquiryModal.open({
  *     onSubmit: async (data) => {
  *       console.log('Creating inquiry:', data);
  *       // Call your API to create the inquiry
  *       await this.apiService.createInquiry(data);
  *       // Close the modal
- *       await this.inquiryModal.close();
+ *       await this.newInquiryModal.close();
  *     }
  *   });
  * }
@@ -5996,7 +5992,7 @@ declare class DsMobileFabComponent implements AfterViewInit, OnDestroy {
     /**
      * Emitted when the FAB is clicked
      */
-    fabClick: _angular_core.OutputEmitterRef<void>;
+    clicked: _angular_core.OutputEmitterRef<void>;
     ngAfterViewInit(): void;
     /**
      * Calculate the FAB position dynamically based on actual tab bar height
@@ -6013,7 +6009,7 @@ declare class DsMobileFabComponent implements AfterViewInit, OnDestroy {
     handleClick(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFabComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFabComponent, "ds-mobile-fab", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "fabClick": "fabClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFabComponent, "ds-mobile-fab", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 type AppIconSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -6506,7 +6502,7 @@ declare class MobileInquiriesPageComponent {
     private newInquiryModal;
     pageComponent: DsMobilePageMainComponent;
     constructor(userService: UserService, navCtrl: NavController, newInquiryModal: DsMobileNewInquiryModalService);
-    filterStatus: _angular_core.WritableSignal<"open" | "closed" | "all">;
+    filterStatus: _angular_core.WritableSignal<"all" | "open" | "closed">;
     tabItems: InlineTabItem[];
     inquiries: _angular_core.WritableSignal<Inquiry[]>;
     filteredInquiries: _angular_core.Signal<Inquiry[]>;

package/package.json

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

package/styles/ionic.css

@@ -276,7 +276,7 @@ ion-spinner {
   color: var(--color-accent) !important;
 }
 
-ion-modal {
+ion-modal:not(.ds-bottom-sheet) {
   --background: var(--color-background-neutral-primary);
   --border-radius: 16px;
   --box-shadow: var(--box-shadow-lg);
@@ -286,7 +286,7 @@ ion-modal {
 }
 
 /* Prevent modal container from resizing when keyboard appears */
-ion-modal::part(content) {
+ion-modal:not(.ds-bottom-sheet)::part(content) {
   position: fixed !important;
   height: 100% !important;
   max-height: 100vh !important;
@@ -329,9 +329,15 @@ ion-toast {
   --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
   --backdrop-opacity: 0.4;
   transition: --backdrop-opacity 0.3s ease;
-  /* Modal at top:0 so backdrop covers full screen including status bar */
-  top: 0;
-  height: 100%;
+  
+  /* 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;
 }
 
 /* Backdrop styling */
@@ -349,18 +355,21 @@ ion-toast {
   margin-bottom: 8px;
 }
 
-/* Content area styling */
+/* Content area styling - Support auto-height by default for sheets */
 .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);
-  position: absolute !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  height: 100% !important;
-  max-height: 100% !important;
+
+  /* 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;
 }
 
 /* Remove border radius when fully expanded */
@@ -397,48 +406,27 @@ ion-toast {
    Make action sheets auto-size to their content
    ============================================ */
 
-/* Auto-height modal - override base bottom sheet styles */
-.ds-bottom-sheet.auto-height {
-  top: 0 !important;
-  height: 100% !important;
-  --height: fit-content;
-  --max-height: 80vh;
-  display: flex;
-  align-items: flex-end;
-}
-
-.ds-bottom-sheet.auto-height .modal-wrapper {
-  position: relative !important;
-  bottom: auto !important;
-  left: auto !important;
-  right: auto !important;
-  height: auto !important;
-  max-height: 80vh !important;
-  top: auto !important;
-  width: 100%;
-}
-
-.ds-bottom-sheet.auto-height::part(content) {
-  position: relative !important;
-  height: auto !important;
-  max-height: 80vh !important;
-  top: auto !important;
-  bottom: auto !important;
-}
+/* Auto-height behavior is now part of .ds-bottom-sheet base */
 
 /* Ensure action sheet component sizes naturally */
-.ds-bottom-sheet.auto-height ds-mobile-actions-bottom-sheet {
+.ds-bottom-sheet ds-mobile-actions-bottom-sheet {
   display: block;
   height: auto;
 }
 
 /* Ensure action list scrolls if needed */
-.ds-bottom-sheet.auto-height .actions-list {
-  max-height: calc(80vh - 80px); /* Account for handle, padding, and safe area */
+.ds-bottom-sheet .actions-list {
+  max-height: calc(85dvh - 80px); /* Account for handle, padding, and safe area */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
+/* Ensure ion-content doesn't force 100% height in sheets */
+.ds-bottom-sheet ion-content {
+  height: auto !important;
+  --height: auto;
+}
+
 /* ============================================
    Mobile Modal Styles (Generic Modal Service)
    ============================================ */
@@ -630,6 +618,24 @@ ion-tab-button::part(native) {
   max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
 }
 
+/* Auto-height support for base modals */
+.ds-modal-base.auto-height {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.ds-modal-base.auto-height::part(content) {
+  height: auto !important;
+  margin-top: auto !important;
+  position: relative !important;
+  top: auto !important;
+}
+
+.ds-modal-base.auto-height ion-content {
+  height: auto !important;
+  --height: auto;
+}
 .ds-modal-base::part(backdrop) {
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(4px);