@propbinder/mobile-design 0.2.46 → 0.2.47

package/index.d.ts

@@ -43,6 +43,13 @@ type NetworkStatus = 'online' | 'offline' | 'unknown';
  * @internal This is a base class and should not be used directly.
  */
 declare abstract class MobilePageBase implements OnDestroy {
+    /**
+     * Shows a loading overlay above page content area.
+     *
+     * Non-breaking: defaults to false, so existing pages are unchanged
+     * until they explicitly opt in.
+     */
+    contentLoading: _angular_core.InputSignal<boolean>;
     /**
      * Maximum content width (desktop only)
      *
@@ -136,7 +143,7 @@ declare abstract class MobilePageBase implements OnDestroy {
      */
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobilePageBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobilePageBase, never, never, { "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobilePageBase, never, never, { "contentLoading": { "alias": "contentLoading"; "required": false; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface ActionResult {
@@ -911,7 +918,7 @@ declare class WhitelabelService {
     readonly logoUrl: _angular_core.Signal<string>;
     readonly logoMarkUrl: _angular_core.Signal<string>;
     readonly logoAlt: _angular_core.Signal<string>;
-    readonly logoSize: _angular_core.Signal<"sm" | "md" | "lg" | "xl">;
+    readonly logoSize: _angular_core.Signal<"md" | "sm" | "lg" | "xl">;
     readonly logoHeight: _angular_core.Signal<number>;
     readonly appIconSurface: _angular_core.Signal<string>;
     readonly appIconContent: _angular_core.Signal<string>;
@@ -1582,6 +1589,14 @@ declare class DsMobileCommentComponent {
      * Whether the comment is clickable
      */
     clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * - `true`  — more button visible on **all** breakpoints, long press enabled
+     * - `false` — more button hidden, long press suppressed
+     * - `undefined` (default) — falls back to desktop-only button
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
+    shouldShowMoreButton: _angular_core.Signal<boolean>;
     /**
      * Whether this comment belongs to the current user
      */
@@ -1668,7 +1683,7 @@ declare class DsMobileCommentComponent {
      */
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCommentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "likeToggled": "likeToggled"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "likeToggled": "likeToggled"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -2580,7 +2595,7 @@ declare class DsMobileListItemComponent implements AfterViewInit {
      * - '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
@@ -2603,11 +2618,22 @@ declare class DsMobileListItemComponent implements AfterViewInit {
     enableLongPress: _angular_core.InputSignal<boolean>;
     /**
      * Show "more actions" button on desktop for items with long-press enabled
-     * Only visible on desktop (hover: hover) and when enableLongPress is true
-     * Clicking this button triggers the same handler as long-press on mobile
+     * @deprecated Use `moreActions` instead. Kept for backwards compatibility.
      * @default true
      */
     showDesktopMoreButton: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * - `true`  — more button visible on **all** breakpoints, long press enabled
+     * - `false` — more button hidden, long press suppressed
+     * - `undefined` (default) — falls back to legacy `enableLongPress` + `showDesktopMoreButton` + desktop check
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Resolved visibility of the more-actions button.
+     * When `moreActions` is set it takes precedence; otherwise legacy inputs + breakpoint apply.
+     */
+    shouldShowMoreButton: _angular_core.Signal<boolean>;
     /**
      * Offset distance for the interactive background pseudo-element
      * Extends the background beyond the content bounds
@@ -2679,7 +2705,7 @@ declare class DsMobileListItemComponent implements AfterViewInit {
      */
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
 }
 
 /**
@@ -2850,7 +2876,7 @@ declare class DsMobileInteractiveListItemPostComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
     /**
      * Whether the post card is clickable
      */
@@ -2862,6 +2888,11 @@ declare class DsMobileInteractiveListItemPostComponent {
      * @default true
      */
     enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * When set, takes precedence over `enableLongPress`.
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Emits when the post card is clicked (if clickable)
      */
@@ -2879,7 +2910,7 @@ declare class DsMobileInteractiveListItemPostComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemPostComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
 }
 /**
  * PostContentComponent
@@ -3073,7 +3104,7 @@ declare class DsMobileInteractiveListItemInquiryComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
     /**
      * Whether the inquiry item is clickable
      */
@@ -3089,6 +3120,11 @@ declare class DsMobileInteractiveListItemInquiryComponent {
      * @default true
      */
     enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * When set, takes precedence over `enableLongPress`.
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Emits when the inquiry item is clicked (if clickable)
      */
@@ -3105,7 +3141,7 @@ declare class DsMobileInteractiveListItemInquiryComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemInquiryComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -3172,7 +3208,7 @@ declare class DsMobileInteractiveListItemMessageComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
     /**
      * Emits when the message item is clicked
      */
@@ -3312,7 +3348,7 @@ declare class DsMobileInteractiveListItemBookingComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
     /**
      * Whether the booking item is clickable
      */
@@ -3328,6 +3364,11 @@ declare class DsMobileInteractiveListItemBookingComponent {
      * @default true
      */
     enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * When set, takes precedence over `enableLongPress`.
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Emits when the booking item is clicked (if clickable)
      */
@@ -3344,7 +3385,7 @@ declare class DsMobileInteractiveListItemBookingComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemBookingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemBookingComponent, "ds-mobile-interactive-list-item-booking", never, { "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "facilityTitle": { "alias": "facilityTitle"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "bookingDate": { "alias": "bookingDate"; "required": false; "isSignal": true; }; "bookingTime": { "alias": "bookingTime"; "required": false; "isSignal": true; }; "availabilityStatus": { "alias": "availabilityStatus"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "bookingClick": "bookingClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemBookingComponent, "ds-mobile-interactive-list-item-booking", never, { "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "facilityTitle": { "alias": "facilityTitle"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "bookingDate": { "alias": "bookingDate"; "required": false; "isSignal": true; }; "bookingTime": { "alias": "bookingTime"; "required": false; "isSignal": true; }; "availabilityStatus": { "alias": "availabilityStatus"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; }, { "bookingClick": "bookingClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 interface TabConfig {
@@ -4535,6 +4576,13 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * @default false
      */
     isAutoHeight: _angular_core.InputSignal<boolean>;
+    /**
+     * Controls how modal content behaves when the keyboard opens.
+     * - 'follow': content is pushed to follow keyboard movement
+     * - 'overlay': keyboard/footer overlays lower content (no auto scroll push)
+     * @default 'follow'
+     */
+    keyboardContentBehavior: _angular_core.InputSignal<"follow" | "overlay">;
     /**
      * Emitted when modal is closed
      */
@@ -4581,8 +4629,16 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * @protected
      */
     protected isThisModal(modalElement: HTMLIonModalElement): boolean;
+    /**
+     * Returns true when keyboard should overlay content without push-scrolling.
+     */
+    private isOverlayBehavior;
+    /**
+     * Computes scroll bottom inset for current keyboard behavior.
+     */
+    private getScrollPadding;
     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; }; "isAutoHeight": { "alias": "isAutoHeight"; "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; }; "keyboardContentBehavior": { "alias": "keyboardContentBehavior"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
 }
 
 /**
@@ -4597,6 +4653,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
  * - Default loading and error state templates (with override capability)
  * - Fixed bottom component support (e.g., message composer)
  * - Automatic keyboard handling
+ * - Configurable keyboard content behavior (`follow` or `overlay`)
  * - Safe area support
  *
  * **Slot Structure:**
@@ -4639,7 +4696,8 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
  * <ds-mobile-modal-base
  *   headerTitle="Create Inquiry"
  *   [hasFixedBottom]="true"
- *   [enableKeyboardHandling]="true">
+ *   [enableKeyboardHandling]="true"
+ *   [keyboardContentBehavior]="'overlay'">
  *
  *   <div class="content">
  *     <input type="text" placeholder="Type something..." />
@@ -4694,6 +4752,10 @@ declare class DsMobileModalBaseComponent extends MobileModalBase implements OnIn
      * Determine if header should be shown based on showHeader input and content detection
      */
     shouldShowHeader(): boolean;
+    /**
+     * Check whether header-leading slot has actual projected content.
+     */
+    hasHeaderLeadingContent(): boolean;
     /**
      * Check if a content child slot has actual content
      */
@@ -5130,7 +5192,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
@@ -5193,7 +5255,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
      */
@@ -5244,7 +5306,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
      */
@@ -5301,7 +5363,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
@@ -5763,6 +5825,7 @@ interface NewInquiryData {
 declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit {
     private modalController;
     titleInputRef?: ElementRef<HTMLElement>;
+    descriptionInputRef?: ElementRef<HTMLElement>;
     titleInput?: DsTextareaComponent;
     fileInput?: ElementRef<HTMLInputElement>;
     /**
@@ -5815,10 +5878,18 @@ declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit
      * Auto-resize the title textarea based on content
      */
     private autoResizeTitleTextarea;
+    /**
+     * Auto-resize the description textarea based on content
+     */
+    private autoResizeDescriptionTextarea;
     /**
      * Handle title change with auto-resize
      */
     handleTitleChange(value: string): void;
+    /**
+     * Handle description change with auto-resize
+     */
+    handleDescriptionChange(value: string): void;
     /**
      * Validate form fields
      */
@@ -6167,6 +6238,7 @@ declare class DsMobileFacilityCreationModalComponent implements OnInit, AfterVie
     private modalController;
     private bottomSheetService;
     titleInputRef?: ElementRef<HTMLElement>;
+    descriptionInputRef?: ElementRef<HTMLElement>;
     titleInput?: DsTextareaComponent;
     fileInput?: ElementRef<HTMLInputElement>;
     /**
@@ -6235,10 +6307,18 @@ declare class DsMobileFacilityCreationModalComponent implements OnInit, AfterVie
      * Auto-resize the title textarea based on content
      */
     private autoResizeTitleTextarea;
+    /**
+     * Auto-resize the description textarea based on content
+     */
+    private autoResizeDescriptionTextarea;
     /**
      * Handle title change with auto-resize
      */
     handleTitleChange(value: string): void;
+    /**
+     * Handle description change with auto-resize
+     */
+    handleDescriptionChange(value: string): void;
     /**
      * Validate form fields
      */
@@ -7175,7 +7255,7 @@ declare class DsMobileFabComponent implements AfterViewInit, OnDestroy {
      * Note: FAB is always 56px circular, but this affects the icon size
      * @default 'md'
      */
-    size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    size: _angular_core.InputSignal<"md" | "sm" | "lg">;
     /**
      * ARIA label for accessibility
      * @required - Always provide a descriptive label
@@ -7687,6 +7767,7 @@ declare class MobileHomePageComponent implements OnInit {
     private postsService;
     private postModal;
     private trackingPermissionService;
+    private bottomSheet;
     pageComponent: DsMobilePageMainComponent;
     recentPosts: _angular_core.Signal<_propbinder_mobile_design.Post[]>;
     private allInquiries;
@@ -7697,13 +7778,14 @@ declare class MobileHomePageComponent implements OnInit {
         status: "open";
         timestamp: string;
     }[]>;
-    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService, trackingPermissionService: TrackingPermissionService);
+    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService, trackingPermissionService: TrackingPermissionService, bottomSheet: DsMobileBottomSheetService);
     ngOnInit(): void;
     handleRefresh(event: any): void;
     openPost(postId: string, focusComment?: boolean): Promise<void>;
     openInquiryDetail(inquiryId: string): void;
     navigateToCommunity(): void;
     navigateToInquiries(): void;
+    handlePostLongPress(postId: string): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHomePageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHomePageComponent, "app-home-page", never, {}, {}, never, never, true, never>;
 }
@@ -7834,9 +7916,10 @@ interface FacilityDetail {
 declare class MobileBookingPageComponent {
     private facilityModal;
     private facilityCreationModal;
+    userService: UserService;
     pageComponent: DsMobilePageMainComponent;
     bookingsSwiper?: DsMobileSwiperComponent;
-    constructor(facilityModal: DsMobileFacilityDetailModalService, facilityCreationModal: DsMobileFacilityCreationModalService);
+    constructor(facilityModal: DsMobileFacilityDetailModalService, facilityCreationModal: DsMobileFacilityCreationModalService, userService: UserService);
     activeBookings: _angular_core.WritableSignal<FacilityDetail[]>;
     availableFacilities: _angular_core.WritableSignal<FacilityDetail[]>;
     handleRefresh(event: any): void;

package/package.json

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

package/styles/ionic.css

@@ -76,14 +76,28 @@
      2. These CSS variables below
      ============================================ */
 
+  /* Normalized safe-area variables consumed by app layout styles.
+     Defaults to env() and can be overridden at runtime from SafeArea plugin. */
+  --app-safe-top: env(safe-area-inset-top, 0px);
+  --app-safe-right: env(safe-area-inset-right, 0px);
+  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --app-safe-left: env(safe-area-inset-left, 0px);
+
   /* Sheet/modal top offset - positions content below status bar area */
   /* Uses max() to ensure at least 32px offset even on devices without notch */
   /* +12px adds breathing room below the status bar */
-  --app-sheet-top-offset: calc(max(32px, env(safe-area-inset-top, 32px)) + 12px);
+  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 12px);
 
   /* Header top offset - used to fine-tune header position on iOS with overlay: true */
   /* On web (no safe area), this should be 0px. On iOS, it compensates for status bar overlap */
-  --app-header-top-offset: max(0px, calc(env(safe-area-inset-top, 0px) - 16px));
+  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 16px));
+}
+
+/* Android-only top safe-area tuning:
+   add 8px extra breathing room above header/sheet content. */
+.plt-android {
+  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 20px);
+  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 8px));
 }
 
 /* Global Styles for Mobile App */
@@ -197,14 +211,14 @@ ion-content::part(scroll)::-webkit-scrollbar {
 
 /* iOS-specific: Enable native scroll overshoot/bounce effect */
 .plt-ios ion-content::part(scroll) {
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: auto;
   /* iOS: Set scroll container background to match brand secondary */
   /* This prevents white background from showing when header fades on scroll */
   background: var(--color-header-surface) !important;
 }
 
 .plt-ios .ion-page {
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: auto;
   /* Set page background to brand secondary to match header on iOS */
   background: var(--color-header-surface) !important;
 }
@@ -278,7 +292,7 @@ ion-spinner {
 ion-modal:not(.ds-bottom-sheet) {
   --background: var(--color-background-neutral-primary);
   --border-radius: 16px;
-  --box-shadow: var(--box-shadow-lg);
+  --box-shadow: none;
   /* Prevent modal from resizing when keyboard appears */
   height: 100% !important;
   max-height: 100vh !important;
@@ -297,6 +311,11 @@ ion-modal ion-content {
   height: 100% !important;
 }
 
+/* Keep neutral cursor over dismissable backdrop areas */
+ion-modal::part(backdrop) {
+  cursor: default !important;
+}
+
 ion-action-sheet {
   --background: var(--color-background-neutral-primary);
   --color: var(--text-color-default-primary);
@@ -325,7 +344,7 @@ ion-toast {
 /* Base bottom sheet styling */
 .ds-bottom-sheet {
   --border-radius: 16px;
-  --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
+  --box-shadow: none;
   --backdrop-opacity: 0.4;
   transition: --backdrop-opacity 0.3s ease;
   /* Modal at top:0 so backdrop covers full screen including status bar */
@@ -461,7 +480,7 @@ ion-toast {
 .ds-mobile-modal {
   --background: var(--color-background-neutral-primary, #ffffff);
   --border-radius: 16px;
-  --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  --box-shadow: none;
   --max-width: 640px;
   --width: 100%;
 }

package/styles/mobile-page-base.css

@@ -156,6 +156,7 @@
 :host ion-content::part(scroll) {
   display: flex;
   flex-direction: column;
+  min-height: 100%;
   -webkit-overflow-scrolling: touch;
   /* Note: Do NOT set overscroll-behavior-y here as it prevents ion-refresher from working */
   /* overscroll-behavior on ion-app is sufficient to block native browser pull-to-refresh */
@@ -207,13 +208,13 @@
   width: 100%;
   position: relative;
   z-index: 20;
-  /* Flex child that grows to fill available space */
+  /* Fill remaining viewport height while keeping ion-content as scroller */
   flex: 1;
   display: flex;
   flex-direction: column;
   background: var(--color-background-neutral-primary);
   border-radius: 24px 24px 0 0;
-  overflow: scroll;
+  overflow: visible;
   
   /* Visual styling for iOS overshoot - extend background below using box-shadow */
   transform: translateZ(0);
@@ -226,13 +227,10 @@
   padding-left: var(--content-wrapper-padding, 20px);
   padding-right: var(--content-wrapper-padding, 20px);
   /* Bottom padding ALWAYS preserved for safe area and tab bar */
-  padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
+  padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px));
 }
 
 :host .content-inner {
-  /* Grow to fill parent flex container */
-  flex: 1;
-  
   /* Mobile-first: max-width 640px, centered */
   max-width: 640px;
   margin: 0 auto;