@propbinder/mobile-design 0.2.3 → 0.2.5

package/index.d.ts

@@ -1,7 +1,8 @@
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, OnInit, ElementRef, OnDestroy, EventEmitter, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';
-import { ModalController, IonContent, NavController, GestureController } from '@ionic/angular/standalone';
+import { AfterViewInit, OnInit, ElementRef, OnDestroy, EventEmitter, ApplicationRef, EnvironmentInjector, Type, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { ModalController, IonContent, NavController, GestureController, ModalOptions as ModalOptions$1 } from '@ionic/angular/standalone';
 import { ImpactStyle } from '@capacitor/haptics';
+import { DsTextareaComponent } from '@propbinder/design-system';
 import { ControlValueAccessor } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Animation } from '@ionic/angular';
@@ -403,13 +404,58 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePageMainComponent, "ds-mobile-page-main", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerSubtitle": { "alias": "headerSubtitle"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "showCondensedHeader": { "alias": "showCondensedHeader"; "required": false; "isSignal": true; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; "isSignal": true; }; "headerFadeDistance": { "alias": "headerFadeDistance"; "required": false; "isSignal": true; }; "profileMenuItems": { "alias": "profileMenuItems"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "profileActionSelected": "profileActionSelected"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["[header-content]", "*"], true, never>;
 }
 
+interface InlineTabItem {
+    id: string;
+    label: string;
+    badge?: number;
+}
+/**
+ * DsMobileInlineTabsComponent
+ *
+ * Pill-style inline tabs for filtering/switching views
+ * Used in the purple header section of pages
+ *
+ * @example
+ * ```html
+ * <ds-mobile-inline-tabs
+ *   [tabs]="[
+ *     { id: 'all', label: 'All' },
+ *     { id: 'open', label: 'Open' },
+ *     { id: 'closed', label: 'Closed' }
+ *   ]"
+ *   [activeTab]="'all'"
+ *   (tabChange)="handleTabChange($event)">
+ * </ds-mobile-inline-tabs>
+ * ```
+ */
+declare class DsMobileInlineTabsComponent {
+    /**
+     * Array of tab items to display
+     */
+    tabs: _angular_core.InputSignal<InlineTabItem[]>;
+    /**
+     * Currently active tab ID
+     */
+    activeTab: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when a tab is clicked
+     */
+    tabChange: _angular_core.OutputEmitterRef<string>;
+    handleTabClick(tabId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInlineTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlineTabsComponent, "ds-mobile-inline-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}
+
 /**
  * DsMobilePageDetailsComponent
  *
- * A mobile page layout for detail/drill-down pages with:
- * - Back button header (mobile + desktop variants)
- * - White background content area
- * - Responsive padding
+ * A complete mobile page layout for detail/drill-down pages with:
+ * - Fixed header with back button + title (fades in on scroll)
+ * - Purple expandable header section (scrolls with content)
+ * - Optional inline tabs in expandable header
+ * - White rounded content wrapper
+ * - Pull-to-refresh support (native platforms only)
+ * - Auto scroll title fade-in and header fade-out
  *
  * @example
  * ```html
@@ -422,47 +468,63 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
  *   </div>
  * </ds-mobile-page-details>
  *
- * <!-- With default back route -->
+ * <!-- With tabs -->
  * <ds-mobile-page-details
- *   title="Invoice Details"
- *   backRoute="/invoices">
+ *   title="Inquiry Details"
+ *   [tabs]="tabItems"
+ *   [activeTab]="activeTab()"
+ *   (tabChange)="setActiveTab($event)"
+ *   (back)="goBack()">
  *   <div class="page-content">
  *     <!-- Your content -->
  *   </div>
  * </ds-mobile-page-details>
  * ```
  */
-declare class DsMobilePageDetailsComponent extends MobilePageBase {
+declare class DsMobilePageDetailsComponent extends MobilePageBase implements AfterViewInit {
     private navCtrl;
     private elementRef;
+    ionContent?: IonContent;
+    private platform;
+    isNativePlatform: _angular_core.Signal<boolean>;
     title: _angular_core.InputSignal<string>;
     backRoute: _angular_core.InputSignal<string>;
+    tabs: _angular_core.InputSignal<InlineTabItem[] | undefined>;
+    activeTab: _angular_core.InputSignal<string>;
+    showRefresh: _angular_core.InputSignal<boolean>;
+    scrollThreshold: _angular_core.InputSignal<number>;
+    headerFadeDistance: _angular_core.InputSignal<number>;
     back: _angular_core.OutputEmitterRef<void>;
+    tabChange: _angular_core.OutputEmitterRef<string>;
+    refresh: _angular_core.OutputEmitterRef<any>;
+    scroll: _angular_core.OutputEmitterRef<any>;
     constructor(navCtrl: NavController, elementRef: ElementRef);
+    ngAfterViewInit(): void;
     /**
      * Handle back navigation
      *
      * By default, navigates using the provided backRoute or browser back.
      * Parent components can listen to the (back) event to override this behavior.
-     *
-     * @example
-     * ```html
-     * <!-- Default behavior: uses backRoute or browser back -->
-     * <ds-mobile-page-details
-     *   title="Details"
-     *   backRoute="/home">
-     * </ds-mobile-page-details>
-     *
-     * <!-- Custom behavior: parent handles navigation -->
-     * <ds-mobile-page-details
-     *   title="Details"
-     *   (back)="customBackHandler()">
-     * </ds-mobile-page-details>
-     * ```
      */
     handleBack(): void;
+    /**
+     * Handle tab change
+     */
+    handleTabChange(tabId: string): void;
+    /**
+     * Handle scroll events
+     * - Shows title in fixed header when scrolled past threshold
+     * - Fades out expandable header content based on scroll position
+     * - Emits scroll event for custom handling
+     */
+    handleScroll(event: any): void;
+    /**
+     * Handle pull-to-refresh
+     * Emits refresh event - parent should call event.target.complete()
+     */
+    handleRefresh(event: any): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePageDetailsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePageDetailsComponent, "ds-mobile-page-details", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "backRoute": { "alias": "backRoute"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePageDetailsComponent, "ds-mobile-page-details", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "backRoute": { "alias": "backRoute"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; "isSignal": true; }; "headerFadeDistance": { "alias": "headerFadeDistance"; "required": false; "isSignal": true; }; }, { "back": "back"; "tabChange": "tabChange"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -814,6 +876,72 @@ declare class DsMobilePostComposerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostComposerComponent, "ds-mobile-post-composer", never, { "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": false; "isSignal": true; }; }, { "composerClick": "composerClick"; }, never, never, true, never>;
 }
 
+/**
+ * File type for attachment preview
+ */
+type AttachmentFileType = 'image' | 'pdf' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'other';
+/**
+ * Attachment data interface
+ */
+interface AttachmentData {
+    id: string;
+    src: string;
+    type: AttachmentFileType;
+    name?: string;
+    size?: string;
+}
+/**
+ * DsMobileAttachmentPreviewComponent
+ *
+ * Reusable component for displaying attachment previews.
+ * Supports both image previews and file type indicators (PDF, DOCX, etc.).
+ *
+ * Features:
+ * - Image preview for photos
+ * - File type indicator box for documents
+ * - Remove button overlay
+ * - Consistent 96x96 size
+ *
+ * @example
+ * ```html
+ * <!-- Image attachment -->
+ * <ds-mobile-attachment-preview
+ *   [attachment]="{ id: '1', src: 'photo.jpg', type: 'image' }"
+ *   (remove)="handleRemove($event)">
+ * </ds-mobile-attachment-preview>
+ *
+ * <!-- PDF attachment -->
+ * <ds-mobile-attachment-preview
+ *   [attachment]="{ id: '2', src: 'doc.pdf', type: 'pdf', name: 'Document.pdf' }"
+ *   (remove)="handleRemove($event)">
+ * </ds-mobile-attachment-preview>
+ * ```
+ */
+declare class DsMobileAttachmentPreviewComponent {
+    /**
+     * Attachment data to display
+     */
+    attachment: _angular_core.InputSignal<AttachmentData>;
+    /**
+     * Emits when the remove button is clicked
+     */
+    remove: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Get the file type label (PDF, DOCX, etc.)
+     */
+    getFileTypeLabel(): string;
+    /**
+     * Get the appropriate icon name based on file type
+     */
+    getIconName(): string;
+    /**
+     * Handle remove button click
+     */
+    handleRemove(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileAttachmentPreviewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileAttachmentPreviewComponent, "ds-mobile-attachment-preview", never, { "attachment": { "alias": "attachment"; "required": true; "isSignal": true; }; }, { "remove": "remove"; }, never, never, true, never>;
+}
+
 /**
  * DsMobileMessageComposerComponent
  *
@@ -859,6 +987,14 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * Send button aria label
      */
     sendButtonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Attachment button aria label
+     */
+    attachmentButtonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show the attachment button
+     */
+    showAttachmentButton: _angular_core.InputSignal<boolean>;
     /**
      * Edit indicator text (when editing)
      */
@@ -887,10 +1023,18 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * ViewChild for message input
      */
     messageInput?: ElementRef<HTMLTextAreaElement>;
+    /**
+     * ViewChild for file input
+     */
+    fileInput?: ElementRef<HTMLInputElement>;
     /**
      * Message text signal
      */
     messageText: _angular_core.WritableSignal<string>;
+    /**
+     * Attachments signal
+     */
+    attachments: _angular_core.WritableSignal<AttachmentData[]>;
     /**
      * Editing message state (optional)
      */
@@ -930,6 +1074,7 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
         isReply?: boolean;
         replyTo?: string;
         isEdit?: boolean;
+        attachments?: AttachmentData[];
     }>;
     /**
      * Emits when edit is cancelled
@@ -945,6 +1090,10 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
     mentionSelected: _angular_core.OutputEmitterRef<{
         userName: string;
     }>;
+    /**
+     * Emits when attachment button is clicked
+     */
+    attachmentClicked: _angular_core.OutputEmitterRef<void>;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
@@ -959,6 +1108,10 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * Show the keyboard when user interacts with input
      */
     showKeyboard(): void;
+    /**
+     * Handle keyboard shortcuts (Shift+Enter to send)
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     /**
      * Handle input changes and detect @ mentions
      */
@@ -991,12 +1144,32 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * Focus the input
      */
     focus(): void;
+    /**
+     * Handle attachment button click
+     */
+    handleAttachmentClick(): void;
+    /**
+     * Detect file type from file name or mime type
+     */
+    private detectFileType;
+    /**
+     * Format file size for display
+     */
+    private formatFileSize;
+    /**
+     * Handle file selection from file input
+     */
+    handleFileSelect(event: Event): void;
+    /**
+     * Remove an attachment from the list
+     */
+    removeAttachment(attachmentId: string): void;
     /**
      * Send message
      */
     sendMessage(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileMessageComposerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileMessageComposerComponent, "ds-mobile-message-composer", never, { "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "sendButtonLabel": { "alias": "sendButtonLabel"; "required": false; "isSignal": true; }; "editIndicatorText": { "alias": "editIndicatorText"; "required": false; "isSignal": true; }; "replyIndicatorText": { "alias": "replyIndicatorText"; "required": false; "isSignal": true; }; "enableMentions": { "alias": "enableMentions"; "required": false; "isSignal": true; }; "mentionUsers": { "alias": "mentionUsers"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "messageSent": "messageSent"; "editCancelled": "editCancelled"; "replyCancelled": "replyCancelled"; "mentionSelected": "mentionSelected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileMessageComposerComponent, "ds-mobile-message-composer", never, { "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "sendButtonLabel": { "alias": "sendButtonLabel"; "required": false; "isSignal": true; }; "attachmentButtonLabel": { "alias": "attachmentButtonLabel"; "required": false; "isSignal": true; }; "showAttachmentButton": { "alias": "showAttachmentButton"; "required": false; "isSignal": true; }; "editIndicatorText": { "alias": "editIndicatorText"; "required": false; "isSignal": true; }; "replyIndicatorText": { "alias": "replyIndicatorText"; "required": false; "isSignal": true; }; "enableMentions": { "alias": "enableMentions"; "required": false; "isSignal": true; }; "mentionUsers": { "alias": "mentionUsers"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "messageSent": "messageSent"; "editCancelled": "editCancelled"; "replyCancelled": "replyCancelled"; "mentionSelected": "mentionSelected"; "attachmentClicked": "attachmentClicked"; }, never, never, true, never>;
 }
 
 /**
@@ -1064,6 +1237,10 @@ declare class DsMobileMessageBubbleComponent {
      * Timestamp text (e.g., "12:34", "08-12-2025 13:18")
      */
     timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show the timestamp below the bubble
+     */
+    showTimestamp: _angular_core.InputSignal<boolean>;
     /**
      * Avatar initials
      */
@@ -1095,6 +1272,10 @@ declare class DsMobileMessageBubbleComponent {
      * Emits when the message is long-pressed
      */
     longPress: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the message is clicked (to toggle timestamp)
+     */
+    messageClick: _angular_core.OutputEmitterRef<void>;
     /**
      * Long press tracking
      */
@@ -1104,16 +1285,21 @@ declare class DsMobileMessageBubbleComponent {
     private touchStartY;
     private readonly LONG_PRESS_DURATION;
     private readonly MOVE_THRESHOLD;
+    private clickStartTime;
     /**
      * Handle attachment click
      */
     handleAttachmentClick(attachment: ChatAttachment): void;
+    /**
+     * Handle click (for web/mouse support)
+     */
+    handleClick(event: MouseEvent): void;
     /**
      * Handle touch start for long press detection
      */
     handleTouchStart(event: TouchEvent): void;
     /**
-     * Handle touch end to clear long press timer
+     * Handle touch end to clear long press timer and detect short tap
      */
     handleTouchEnd(event: TouchEvent): void;
     /**
@@ -1125,7 +1311,7 @@ declare class DsMobileMessageBubbleComponent {
      */
     handleContextMenu(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileMessageBubbleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileMessageBubbleComponent, "ds-mobile-message-bubble", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "isOwnMessage": { "alias": "isOwnMessage"; "required": false; "isSignal": true; }; "senderName": { "alias": "senderName"; "required": false; "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; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "attachmentClick": "attachmentClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileMessageBubbleComponent, "ds-mobile-message-bubble", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "isOwnMessage": { "alias": "isOwnMessage"; "required": false; "isSignal": true; }; "senderName": { "alias": "senderName"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "showTimestamp": { "alias": "showTimestamp"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "attachmentClick": "attachmentClick"; "longPress": "longPress"; "messageClick": "messageClick"; }, never, never, true, never>;
 }
 
 /**
@@ -1311,7 +1497,7 @@ declare class DsMobileListItemComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
+    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
     /**
      * Whether the list item is interactive (clickable and long-pressable)
      * When true, adds interactive background, cursor pointer, and touch handlers
@@ -2058,48 +2244,6 @@ declare class DsMobileTabsComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabsComponent, "ds-mobile-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "avatarType": { "alias": "avatarType"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; }; }, { "avatarClick": "avatarClick"; }, never, never, true, never>;
 }
 
-interface InlineTabItem {
-    id: string;
-    label: string;
-    badge?: number;
-}
-/**
- * DsMobileInlineTabsComponent
- *
- * Pill-style inline tabs for filtering/switching views
- * Used in the purple header section of pages
- *
- * @example
- * ```html
- * <ds-mobile-inline-tabs
- *   [tabs]="[
- *     { id: 'all', label: 'All' },
- *     { id: 'open', label: 'Open' },
- *     { id: 'closed', label: 'Closed' }
- *   ]"
- *   [activeTab]="'all'"
- *   (tabChange)="handleTabChange($event)">
- * </ds-mobile-inline-tabs>
- * ```
- */
-declare class DsMobileInlineTabsComponent {
-    /**
-     * Array of tab items to display
-     */
-    tabs: _angular_core.InputSignal<InlineTabItem[]>;
-    /**
-     * Currently active tab ID
-     */
-    activeTab: _angular_core.InputSignal<string>;
-    /**
-     * Emitted when a tab is clicked
-     */
-    tabChange: _angular_core.OutputEmitterRef<string>;
-    handleTabClick(tabId: string): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInlineTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlineTabsComponent, "ds-mobile-inline-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
-}
-
 /**
  * Media file types supported by the lightbox
  */
@@ -2809,86 +2953,304 @@ declare class DsMobileModalService {
 }
 
 /**
- * Post data interface for the modal
- *
- * Represents a post with its content, author info, and comments.
- * Use this interface to map your API response data to the component.
+ * MobileModalBase
  *
- * @example
- * ```typescript
- * const postData: PostDetailData = {
- *   postId: '123',
- *   authorName: 'John Doe',
- *   authorRole: 'Tenant',
- *   timestamp: '2h ago',
- *   avatarInitials: 'JD',
- *   content: 'Post content here...',
- *   likeCount: 42,
- *   commentCount: 12,
- *   comments: [...]
- * };
- * ```
- */
-interface PostDetailData {
-    /** Unique post identifier */
-    postId: string;
-    /** Post author name */
-    authorName: string;
-    /** Author role (e.g., 'Tenant', 'Manager') */
-    authorRole: string;
-    /** Post timestamp (e.g., '2h ago', 'Yesterday') */
-    timestamp: string;
-    /** Author avatar initials (1-2 letters) */
-    avatarInitials?: string;
-    /** Avatar display type */
-    avatarType?: 'photo' | 'initials';
-    /** Author avatar image URL */
-    avatarSrc?: string;
-    /** Post text content */
-    content: string;
-    /** Optional post image URL */
-    imageSrc?: string;
-    /** Image alt text */
-    imageAlt?: string;
-    /** Whether the current user has liked this post */
-    isLiked?: boolean;
-    /** Number of likes */
-    likeCount?: number;
-    /** Number of comments */
-    commentCount?: number;
-    /** Array of comments */
-    comments?: CommentData[];
-    /** Auto-focus comment input when modal opens */
-    focusComment?: boolean;
-}
-/**
- * Comment data interface
+ * Shared base class for mobile modal components.
+ * Provides consistent modal behavior, state management, and keyboard handling.
  *
- * Represents a single comment on a post.
+ * **Key Features:**
+ * - Loading and error state management
+ * - Header configuration (title, meta)
+ * - Automatic keyboard height tracking (iOS/Android)
+ * - Fixed bottom component support
+ * - Consistent close behavior
  *
- * @example
+ * **Usage:**
  * ```typescript
- * const comment: CommentData = {
- *   authorName: 'Jane Smith',
- *   authorRole: 'Tenant',
- *   timestamp: '1h ago',
- *   avatarInitials: 'JS',
- *   content: 'Great post!',
- *   isLiked: false,
- *   likeCount: 5,
- *   isOwnComment: false
- * };
+ * export class MyModalComponent extends MobileModalBase {
+ *   constructor() {
+ *     super();
+ *   }
+ * }
  * ```
+ *
+ * @internal This is a base class and should not be used directly.
  */
-interface CommentData {
-    /** Unique comment identifier */
-    id?: string;
-    /** Comment author name */
-    authorName: string;
-    /** Author role */
-    authorRole: string;
-    /** Comment timestamp */
-    timestamp: string;
+declare abstract class MobileModalBase implements OnInit, OnDestroy {
+    protected modalController: ModalController;
+    /**
+     * Reference to IonContent for accessing scroll element
+     */
+    protected ionContent?: IonContent;
+    /**
+     * ResizeObserver for tracking fixed bottom height
+     */
+    private fixedBottomObserver?;
+    /**
+     * Loading state - when true, shows loading indicator
+     * @default false
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Error state - when set, shows error message
+     * @default undefined
+     */
+    error: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Modal header title
+     * @default ''
+     */
+    headerTitle: _angular_core.InputSignal<string>;
+    /**
+     * Modal header metadata (subtitle/secondary text)
+     * @default ''
+     */
+    headerMeta: _angular_core.InputSignal<string>;
+    /**
+     * Accessibility label for close button
+     * @default 'Close'
+     */
+    closeButtonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Enable automatic keyboard height tracking
+     * When enabled, sets --keyboard-height CSS variable for sliding content
+     * @default false
+     */
+    enableKeyboardHandling: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether modal has a fixed bottom component
+     * Used to manage spacing and keyboard interactions
+     * @default false
+     */
+    hasFixedBottom: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when modal is closed
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Close the modal
+     * Emits closed event and dismisses the modal
+     */
+    close(): void;
+    /**
+     * Set up keyboard event listeners to adjust component position
+     * Uses --keyboard-height for fixed bottom composer and adds padding to scroll area
+     * @protected
+     */
+    protected setupKeyboardListeners(): void;
+    /**
+     * Set up ResizeObserver to track fixed bottom height and apply as CSS variable
+     * This allows dynamic bottom padding that adjusts to content
+     * @protected
+     */
+    protected setupFixedBottomObserver(): Promise<void>;
+    /**
+     * Clean up keyboard event listeners
+     * @protected
+     */
+    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; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileModalBaseComponent
+ *
+ * Base modal component providing consistent layout and behavior for all modals.
+ *
+ * **Features:**
+ * - Optional header with auto-detection of content
+ * - Flexible header with slots for leading content (avatar, icon)
+ * - Title and metadata inputs or custom header slot
+ * - Default loading and error state templates (with override capability)
+ * - Fixed bottom component support (e.g., message composer)
+ * - Automatic keyboard handling
+ * - Safe area support
+ *
+ * **Slot Structure:**
+ * - `[header-leading]` - Left side of header (avatar, icon)
+ * - `[header-main]` - Custom header content (replaces title/meta)
+ * - `[loading-state]` - Custom loading template
+ * - `[error-state]` - Custom error template
+ * - `[footer]` or `[fixed-bottom]` - Fixed bottom component (slides with keyboard)
+ * - Default slot - Main modal content
+ *
+ * @example
+ * ```html
+ * <!-- Simple title modal -->
+ * <ds-mobile-modal-base
+ *   headerTitle="Settings"
+ *   closeButtonLabel="Close">
+ *   <div class="content">...</div>
+ * </ds-mobile-modal-base>
+ *
+ * <!-- Avatar header modal -->
+ * <ds-mobile-modal-base
+ *   headerTitle="John Doe"
+ *   headerMeta="Tenant · 2h ago"
+ *   [hasFixedBottom]="true"
+ *   [enableKeyboardHandling]="true">
+ *
+ *   <ds-avatar header-leading [initials]="'JD'" size="md" />
+ *
+ *   <div class="content">...</div>
+ *
+ *   <div fixed-bottom class="composer">...</div>
+ * </ds-mobile-modal-base>
+ *
+ * <!-- Headerless modal (close button positioned absolutely) -->
+ * <ds-mobile-modal-base [showHeader]="false">
+ *   <div class="full-width-content">...</div>
+ * </ds-mobile-modal-base>
+ *
+ * <!-- Modal with footer actions (slides with keyboard) -->
+ * <ds-mobile-modal-base
+ *   headerTitle="Create Inquiry"
+ *   [hasFixedBottom]="true"
+ *   [enableKeyboardHandling]="true">
+ *
+ *   <div class="content">
+ *     <input type="text" placeholder="Type something..." />
+ *   </div>
+ *
+ *   <div footer class="action-bar">
+ *     <button>Cancel</button>
+ *     <button>Submit</button>
+ *   </div>
+ * </ds-mobile-modal-base>
+ * ```
+ */
+declare class DsMobileModalBaseComponent extends MobileModalBase implements AfterContentInit {
+    private cdr;
+    /**
+     * Reference to ion-content for keyboard handling
+     */
+    ionContent?: IonContent;
+    /**
+     * Control header visibility
+     * - true: Always show header
+     * - false: Never show header (close button becomes absolute)
+     * - 'auto' (default): Auto-detect based on header content
+     */
+    showHeader: _angular_core.InputSignal<boolean | "auto">;
+    /**
+     * Detect if custom loading state is provided
+     */
+    customLoadingState?: ElementRef;
+    /**
+     * Detect if custom error state is provided
+     */
+    customErrorState?: ElementRef;
+    /**
+     * Detect if header leading content is provided
+     */
+    headerLeading?: ElementRef;
+    /**
+     * Detect if header main content is provided
+     */
+    headerMain?: ElementRef;
+    /**
+     * Flag to track if content has been initialized
+     */
+    hasCustomLoadingState: boolean;
+    hasCustomErrorState: boolean;
+    constructor(cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    /**
+     * Determine if header should be shown based on showHeader input and content detection
+     */
+    shouldShowHeader(): boolean;
+    /**
+     * Check if a content child slot has actual content
+     */
+    private hasContentInSlot;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileModalBaseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileModalBaseComponent, "ds-mobile-modal-base", never, { "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; }, {}, ["customLoadingState", "customErrorState", "headerLeading", "headerMain"], ["[header-leading]", "[header-main]", "[loading-state]", "[error-state]", "*", "[fixed-bottom]", "[footer]"], true, never>;
+}
+
+/**
+ * Post data interface for the modal
+ *
+ * Represents a post with its content, author info, and comments.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const postData: PostDetailData = {
+ *   postId: '123',
+ *   authorName: 'John Doe',
+ *   authorRole: 'Tenant',
+ *   timestamp: '2h ago',
+ *   avatarInitials: 'JD',
+ *   content: 'Post content here...',
+ *   likeCount: 42,
+ *   commentCount: 12,
+ *   comments: [...]
+ * };
+ * ```
+ */
+interface PostDetailData {
+    /** Unique post identifier */
+    postId: string;
+    /** Post author name */
+    authorName: string;
+    /** Author role (e.g., 'Tenant', 'Manager') */
+    authorRole: string;
+    /** Post timestamp (e.g., '2h ago', 'Yesterday') */
+    timestamp: string;
+    /** Author avatar initials (1-2 letters) */
+    avatarInitials?: string;
+    /** Avatar display type */
+    avatarType?: 'photo' | 'initials';
+    /** Author avatar image URL */
+    avatarSrc?: string;
+    /** Post text content */
+    content: string;
+    /** Optional post image URL */
+    imageSrc?: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Whether the current user has liked this post */
+    isLiked?: boolean;
+    /** Number of likes */
+    likeCount?: number;
+    /** Number of comments */
+    commentCount?: number;
+    /** Array of comments */
+    comments?: CommentData[];
+    /** Auto-focus comment input when modal opens */
+    focusComment?: boolean;
+}
+/**
+ * Comment data interface
+ *
+ * Represents a single comment on a post.
+ *
+ * @example
+ * ```typescript
+ * const comment: CommentData = {
+ *   authorName: 'Jane Smith',
+ *   authorRole: 'Tenant',
+ *   timestamp: '1h ago',
+ *   avatarInitials: 'JS',
+ *   content: 'Great post!',
+ *   isLiked: false,
+ *   likeCount: 5,
+ *   isOwnComment: false
+ * };
+ * ```
+ */
+interface CommentData {
+    /** Unique comment identifier */
+    id?: string;
+    /** Comment author name */
+    authorName: string;
+    /** Author role */
+    authorRole: string;
+    /** Comment timestamp */
+    timestamp: string;
     /** Author avatar initials */
     avatarInitials: string;
     /** Comment text content */
@@ -2929,13 +3291,14 @@ interface CommentData {
  * }
  * ```
  */
-declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestroy {
-    private modalController;
+declare class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit {
     private lightbox;
     private bottomSheet;
     postData: PostDetailData;
     currentUserName: string;
     currentUserInitialsInput: string;
+    loading: boolean;
+    error: string | undefined;
     onSubmitComment?: (payload: {
         postId: string;
         text: string;
@@ -2951,16 +3314,6 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
     onDeleteComment?: (payload: {
         commentId: string;
     }) => void;
-    /**
-     * Loading state - when true, shows loading indicator
-     * Set this to true while fetching post data from your API
-     */
-    loading: boolean;
-    /**
-     * Error state - when set, shows error message
-     * Set this to an error message string if API call fails
-     */
-    error?: string;
     commentInput?: ElementRef<HTMLTextAreaElement>;
     post: _angular_core.WritableSignal<PostDetailData>;
     commentText: _angular_core.WritableSignal<string>;
@@ -2987,19 +3340,9 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
         initials: string;
         role: string;
     }[]>;
-    constructor(modalController: ModalController, lightbox: DsMobileLightboxService, bottomSheet: DsMobileBottomSheetService);
+    constructor(lightbox: DsMobileLightboxService, bottomSheet: DsMobileBottomSheetService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    /**
-     * Set up keyboard event listeners to adjust composer position
-     * The CSS uses --keyboard-height variable to translate the composer up
-     */
-    private setupKeyboardListeners;
-    /**
-     * Clean up keyboard event listeners
-     */
-    private cleanupKeyboardListeners;
     /**
      * Show the keyboard when user interacts with input
      */
@@ -3041,10 +3384,6 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
         active: boolean;
         count: number;
     }): void;
-    /**
-     * Close the modal
-     */
-    close(): void;
     /**
      * Submit a comment
      */
@@ -3058,7 +3397,83 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
      */
     handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "currentUserName": { "alias": "currentUserName"; "required": false; }; "currentUserInitialsInput": { "alias": "currentUserInitialsInput"; "required": false; }; "onSubmitComment": { "alias": "onSubmitComment"; "required": false; }; "onToggleCommentLike": { "alias": "onToggleCommentLike"; "required": false; }; "onEditComment": { "alias": "onEditComment"; "required": false; }; "onDeleteComment": { "alias": "onDeleteComment"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "currentUserName": { "alias": "currentUserName"; "required": false; }; "currentUserInitialsInput": { "alias": "currentUserInitialsInput"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onSubmitComment": { "alias": "onSubmitComment"; "required": false; }; "onToggleCommentLike": { "alias": "onToggleCommentLike"; "required": false; }; "onEditComment": { "alias": "onEditComment"; "required": false; }; "onDeleteComment": { "alias": "onDeleteComment"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * BaseModalService
+ *
+ * Abstract base class for all modal services in the application.
+ * Enforces consistent modal configuration and presentation across all modals.
+ *
+ * **Features:**
+ * - Standardized modal presentation (stacked effect with gap at top)
+ * - Consistent backdrop and dismissal behavior
+ * - Automatic safe area handling
+ * - Native iOS-style animations
+ *
+ * **Why use this:**
+ * - Ensures all modals have the same look and feel
+ * - Prevents inconsistencies in modal configuration
+ * - Single source of truth for modal settings
+ * - Makes it impossible to forget critical configuration
+ *
+ * @example
+ * ```typescript
+ * @Injectable({ providedIn: 'root' })
+ * export class MyModalService extends BaseModalService {
+ *   async open(data: MyData) {
+ *     const modal = await this.createModal(
+ *       MyModalComponent,
+ *       { data }
+ *     );
+ *     await modal.present();
+ *   }
+ * }
+ * ```
+ */
+declare abstract class BaseModalService {
+    protected modalController: ModalController;
+    constructor(modalController: ModalController);
+    /**
+     * Create a modal with standardized configuration
+     *
+     * This method enforces consistent modal behavior across the app:
+     * - Uses 'ds-modal-base' CSS class for consistent styling
+     * - iOS mode for native feel
+     * - presentingElement for stacked modal effect
+     * - Standard backdrop and dismissal settings
+     *
+     * @param component The component to display in the modal
+     * @param componentProps Props to pass to the component
+     * @param customOptions Optional overrides for specific modal needs
+     * @returns Promise resolving to the created modal
+     *
+     * @example
+     * ```typescript
+     * const modal = await this.createModal(
+     *   PostDetailComponent,
+     *   { postId: '123', loading: false }
+     * );
+     * await modal.present();
+     * ```
+     */
+    protected createModal<T>(component: Type<T>, componentProps?: Record<string, any>, customOptions?: Partial<ModalOptions$1>): Promise<HTMLIonModalElement>;
+    /**
+     * Close the currently open modal
+     *
+     * @param data Optional data to pass back when dismissing
+     * @returns Promise that resolves when the modal is dismissed
+     */
+    close(data?: any): Promise<boolean>;
+    /**
+     * Get the top-most modal if one exists
+     *
+     * @returns Promise that resolves to the modal element or undefined
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<BaseModalService>;
 }
 
 /**
@@ -3104,8 +3519,7 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
  * }
  * ```
  */
-declare class DsMobilePostDetailModalService {
-    private modalController;
+declare class DsMobilePostDetailModalService extends BaseModalService {
     constructor(modalController: ModalController);
     /**
      * Open the post detail modal
@@ -3135,19 +3549,6 @@ declare class DsMobilePostDetailModalService {
         currentUserName?: string;
         currentUserInitials?: string;
     }): Promise<void>;
-    /**
-     * Close the currently open post detail modal
-     *
-     * @param data Optional data to pass back when dismissing
-     * @returns Promise that resolves when the modal is dismissed
-     */
-    close(data?: any): Promise<boolean>;
-    /**
-     * Get the top-most modal if one exists
-     *
-     * @returns Promise that resolves to the modal element or undefined
-     */
-    getTop(): Promise<HTMLIonModalElement | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobilePostDetailModalService>;
 }
@@ -3161,12 +3562,21 @@ interface ChatMessage {
     senderId: string;
     senderName: string;
     senderRole?: string;
-    timestamp: string;
+    timestamp: Date;
     avatarInitials?: string;
     avatarType?: 'initials' | 'photo' | 'icon';
     avatarSrc?: string;
     isOwnMessage: boolean;
     attachments?: ChatAttachment[];
+    fileAttachments?: AttachmentData[];
+}
+/**
+ * Message group interface for grouped timestamp display
+ */
+interface MessageGroup {
+    timestamp: Date;
+    displayTimestamp: string;
+    messages: ChatMessage[];
 }
 /**
  * Chat participant interface
@@ -3184,27 +3594,58 @@ interface ChatParticipant {
  *
  * Represents the data needed to display a chat conversation.
  *
- * @example
+* @example
  * ```typescript
  * const chatData: ChatModalData = {
  *   participant: {
- *     id: '123',
+ *     id: 'u-123',
  *     name: 'Ricki Meihlen',
  *     role: 'Inquiry assignee',
- *     avatarInitials: 'RM'
+ *     avatarInitials: 'RM',
+ *     avatarType: 'initials'
  *   },
+ *   currentUserId: 'u-456',
+ *   currentUserInitials: 'SD',
+ *   currentUserAvatarType: 'initials',
+ *   autoFocus: true,
  *   messages: [
  *     {
- *       id: '1',
- *       content: 'We have received your case...',
- *       senderId: '123',
+ *       id: 'm-1',
+ *       content: 'We have received your case. Please see the attached photo.',
+ *       senderId: 'u-123',
  *       senderName: 'Ricki Meihlen',
+ *       senderRole: 'Case worker',
  *       timestamp: '12:34',
  *       isOwnMessage: false,
- *       avatarInitials: 'RM'
+ *       avatarInitials: 'RM',
+ *       avatarType: 'initials',
+ *       attachments: [
+ *         {
+ *           id: 'a-1',
+ *           type: 'image',
+ *           url: 'https://example.com/photo.jpg',
+ *           name: 'photo.jpg',
+ *           thumbnail: 'https://example.com/photo_thumb.jpg'
+ *         },
+ *         {
+ *           id: 'a-2',
+ *           type: 'pdf',
+ *           url: 'https://example.com/report.pdf',
+ *           name: 'report.pdf'
+ *         }
+ *       ]
+ *     },
+ *     {
+ *       id: 'm-2',
+ *       content: 'Thanks — I will take a look.',
+ *       senderId: 'u-456',
+ *       senderName: 'You',
+ *       timestamp: '12:36',
+ *       isOwnMessage: true,
+ *       avatarInitials: 'SD',
+ *       avatarType: 'initials'
  *     }
- *   ],
- *   currentUserId: '456'
+ *   ]
  * };
  * ```
  */
@@ -3253,8 +3694,8 @@ interface ChatModalData {
  * }
  * ```
  */
-declare class DsMobileChatModalComponent implements OnInit, AfterViewInit, OnDestroy {
-    private modalController;
+declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
+    private lightboxService;
     chatData: ChatModalData;
     /**
      * Loading state - when true, shows loading indicator
@@ -3270,18 +3711,25 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit, OnDes
     currentUserAvatarType: _angular_core.WritableSignal<"initials" | "photo" | "icon">;
     currentUserAvatarSrc: _angular_core.WritableSignal<string>;
     autoFocus: _angular_core.WritableSignal<boolean>;
-    constructor(modalController: ModalController);
+    /**
+     * Selected message ID for showing timestamp
+     */
+    selectedMessageId: _angular_core.WritableSignal<string | null>;
+    /**
+     * Timeout for auto-hiding timestamp
+     */
+    private timestampTimeout?;
+    /**
+     * Computed signal for grouped messages with timestamp headers
+     */
+    messageGroups: _angular_core.Signal<MessageGroup[]>;
+    constructor(lightboxService: DsMobileLightboxService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     /**
      * Scroll to bottom of messages
      */
     private scrollToBottom;
-    /**
-     * Close the modal
-     */
-    close(): void;
     /**
      * Handle message sent from composer
      */
@@ -3290,15 +3738,54 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit, OnDes
         isReply?: boolean;
         replyTo?: string;
         isEdit?: boolean;
+        attachments?: AttachmentData[];
     }): void;
     /**
      * Handle attachment click
      */
     handleAttachmentClick(attachment: ChatAttachment): void;
+    /**
+     * Handle composer attachment button click
+     */
+    handleComposerAttachmentClick(): void;
+    /**
+     * Get file variant for card-inline-file component
+     */
+    getFileVariant(type: string): 'pdf' | 'doc';
+    /**
+     * Handle file attachment click
+     */
+    handleFileAttachmentClick(fileAttachment: AttachmentData): void;
+    /**
+     * Handle image attachment click - opens lightbox
+     */
+    handleImageClick(attachment: AttachmentData, message: ChatMessage): Promise<void>;
     /**
      * Handle message long press
      */
     handleMessageLongPress(message: ChatMessage): void;
+    /**
+     * Handle message click to show/hide timestamp
+     */
+    handleMessageClick(messageId: string): void;
+    /**
+     * Format message timestamp for display (EU 24-hour format, Danish)
+     */
+    formatMessageTimestamp(date: Date): string;
+    /**
+     * Group messages by time threshold
+     * Messages within the threshold and on the same day are grouped together
+     */
+    private groupMessagesByTime;
+    /**
+     * Determine if a new message group should be started
+     */
+    private shouldStartNewGroup;
+    /**
+     * Format group timestamp header with smart date display
+     * Uses 24-hour EU time format with Danish locale
+     */
+    private formatGroupTimestamp;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileChatModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileChatModalComponent, "ds-mobile-chat-modal", never, { "chatData": { "alias": "chatData"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -3358,8 +3845,7 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit, OnDes
  * }
  * ```
  */
-declare class DsMobileChatModalService {
-    private modalController;
+declare class DsMobileChatModalService extends BaseModalService {
     constructor(modalController: ModalController);
     /**
      * Open the chat modal
@@ -3372,21 +3858,190 @@ declare class DsMobileChatModalService {
         loading?: boolean;
         error?: string;
     }): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileChatModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileChatModalService>;
+}
+
+/**
+ * Photo interface for inquiry (deprecated - use AttachmentData)
+ * @deprecated Use AttachmentData from attachment-preview component instead
+ */
+interface InquiryPhoto {
+    id: string;
+    src: string;
+    alt?: string;
+}
+/**
+ * New inquiry form data
+ */
+interface NewInquiryData {
+    title: string;
+    description: string;
+    attachments: AttachmentData[];
+    category?: string;
+}
+/**
+ * DsMobileNewInquiryModalComponent
+ *
+ * Modal component for creating new inquiries.
+ * Uses ds-mobile-modal-base for consistent layout and behavior.
+ *
+ * Features:
+ * - Title and description fields
+ * - Photo upload with preview
+ * - Submit button at bottom
+ * - Form validation
+ * - Camera/photo picker integration
+ *
+ * This component is typically not used directly - use DsMobileNewInquiryModalService instead.
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
+ *
+ * createInquiry() {
+ *   this.inquiryModal.open({
+ *     onSubmit: (data) => console.log('Inquiry created:', data)
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit {
+    titleInputRef?: ElementRef<HTMLElement>;
+    titleInput?: DsTextareaComponent;
+    fileInput?: ElementRef<HTMLInputElement>;
     /**
-     * Close the currently open chat modal
-     *
-     * @param data Optional data to pass back when dismissing
-     * @returns Promise that resolves when the modal is dismissed
+     * Loading state for the modal
      */
-    close(data?: any): Promise<boolean>;
+    loading: boolean;
     /**
-     * Get the top-most modal if one exists
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Callback function when form is submitted
+     */
+    onSubmit?: (data: NewInquiryData) => void | Promise<void>;
+    /**
+     * Form title field
+     */
+    title: string;
+    /**
+     * Form description field
+     */
+    description: string;
+    /**
+     * Attachments array (replaces photos)
+     */
+    attachments: _angular_core.WritableSignal<AttachmentData[]>;
+    /**
+     * Form validation state
+     */
+    isFormValid: _angular_core.WritableSignal<boolean>;
+    /**
+     * Submitting state
+     */
+    isSubmitting: _angular_core.WritableSignal<boolean>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    /**
+     * Auto-resize the title textarea based on content
+     */
+    private autoResizeTitleTextarea;
+    /**
+     * Handle title change with auto-resize
+     */
+    handleTitleChange(value: string): void;
+    /**
+     * Validate form fields
+     */
+    validateForm(): void;
+    /**
+     * Add a new photo from camera/library
+     */
+    addPhoto(): Promise<void>;
+    /**
+     * Remove an attachment
+     */
+    removeAttachment(attachmentId: string): void;
+    /**
+     * Handle attachment button click
+     */
+    handleAddAttachment(): void;
+    /**
+     * Detect file type from file name or mime type
+     */
+    private detectFileType;
+    /**
+     * Format file size for display
+     */
+    private formatFileSize;
+    /**
+     * Handle file selection from file input
+     */
+    handleFileSelect(event: Event): void;
+    /**
+     * Handle form submission
+     */
+    handleSubmit(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileNewInquiryModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileNewInquiryModalComponent, "ds-mobile-new-inquiry-modal", never, { "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onSubmit": { "alias": "onSubmit"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Options for opening the new inquiry modal
+ */
+interface NewInquiryModalOptions {
+    /** Callback function when inquiry is submitted */
+    onSubmit?: (data: NewInquiryData) => void | Promise<void>;
+    /** Initial loading state */
+    loading?: boolean;
+    /** Initial error message */
+    error?: string;
+}
+/**
+ * DsMobileNewInquiryModalService
+ *
+ * Service for displaying the new inquiry creation modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * Features:
+ * - Full-screen modal with form
+ * - Title and description inputs
+ * - Photo upload with camera/gallery
+ * - Form validation
+ * - Submit handling
+ * - Loading and error states
+ *
+ * @example
+ * ```typescript
+ * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
+ *
+ * async createNewInquiry() {
+ *   await this.inquiryModal.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();
+ *     }
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileNewInquiryModalService extends BaseModalService {
+    constructor(modalController: ModalController);
+    /**
+     * Open the new inquiry modal
      *
-     * @returns Promise that resolves to the modal element or undefined
+     * @param options Modal options including onSubmit callback
+     * @returns Promise that resolves when the modal is presented
      */
-    getTop(): Promise<HTMLIonModalElement | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileChatModalService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileChatModalService>;
+    open(options?: NewInquiryModalOptions): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileNewInquiryModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileNewInquiryModalService>;
 }
 
 /**
@@ -3512,8 +4167,7 @@ interface ContactItem {
  *
  * This component is typically not used directly - use DsMobileHandbookDetailModalService instead.
  */
-declare class DsMobileHandbookDetailModalComponent {
-    private modalController;
+declare class DsMobileHandbookDetailModalComponent implements OnInit {
     handbookData: HandbookDetailData;
     /**
      * Loading state - when true, shows loading indicator
@@ -3524,7 +4178,6 @@ declare class DsMobileHandbookDetailModalComponent {
      */
     error?: string;
     handbook: _angular_core.WritableSignal<HandbookDetailData>;
-    constructor(modalController: ModalController);
     ngOnInit(): void;
     /**
      * Split handbook items to enforce content structure rules:
@@ -3539,10 +4192,6 @@ declare class DsMobileHandbookDetailModalComponent {
      * Get all display items with enforced content structure rules applied
      */
     getDisplayItems(): HandbookItem[];
-    /**
-     * Close the modal
-     */
-    close(): void;
     /**
      * Handle contact click
      */
@@ -3593,8 +4242,7 @@ declare class DsMobileHandbookDetailModalComponent {
  * }
  * ```
  */
-declare class DsMobileHandbookDetailModalService {
-    private modalController;
+declare class DsMobileHandbookDetailModalService extends BaseModalService {
     constructor(modalController: ModalController);
     /**
      * Open the handbook detail modal
@@ -3607,19 +4255,6 @@ declare class DsMobileHandbookDetailModalService {
         loading?: boolean;
         error?: string;
     }): Promise<void>;
-    /**
-     * Close the currently open handbook detail modal
-     *
-     * @param data Optional data to pass back when dismissing
-     * @returns Promise that resolves when the modal is dismissed
-     */
-    close(data?: any): Promise<boolean>;
-    /**
-     * Get the top-most modal if one exists
-     *
-     * @returns Promise that resolves to the modal element or undefined
-     */
-    getTop(): Promise<HTMLIonModalElement | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHandbookDetailModalService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileHandbookDetailModalService>;
 }
@@ -3841,6 +4476,68 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTextInputComponent, "ds-text-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "autoClearError": { "alias": "autoClearError"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "errorCleared": "errorCleared"; }, never, never, true, never>;
 }
 
+/**
+ * DsMobileFabComponent
+ *
+ * Floating Action Button component for mobile interfaces.
+ * A prominent circular button that floats above the content.
+ *
+ * Features:
+ * - Configurable positioning (bottom-right, bottom-left, bottom-center)
+ * - Uses design system theming variables
+ * - Handles iOS safe areas
+ * - Accessible with ARIA labels
+ * - Smooth entrance animation
+ *
+ * @example
+ * ```html
+ * <ds-mobile-fab
+ *   icon="remixAddLine"
+ *   [position]="'bottom-right'"
+ *   (fabClick)="handleAddClick()"
+ *   ariaLabel="Add new inquiry">
+ * </ds-mobile-fab>
+ * ```
+ */
+declare class DsMobileFabComponent {
+    /**
+     * Icon name from the design system icon library
+     * @default 'remixAddLine'
+     */
+    icon: _angular_core.InputSignal<string>;
+    /**
+     * Position of the FAB on the screen
+     * @default 'bottom-right'
+     */
+    position: _angular_core.InputSignal<"bottom-right" | "bottom-left" | "bottom-center">;
+    /**
+     * Size of the FAB button
+     * Note: FAB is always 56px circular, but this affects the icon size
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /**
+     * ARIA label for accessibility
+     * @required - Always provide a descriptive label
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Whether the FAB is disabled
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when the FAB is clicked
+     */
+    fabClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Handle button click
+     */
+    handleClick(): 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>;
+}
+
 interface WhitelabelConfig {
     logoUrl: string;
     logoMarkUrl: string;
@@ -4003,6 +4700,105 @@ declare class UserService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<UserService>;
 }
 
+/**
+ * Post and Comment Models
+ * Unified data structures for community posts
+ */
+interface Comment {
+    authorName: string;
+    authorRole: string;
+    timestamp: string;
+    avatarInitials: string;
+    avatarSrc?: string;
+    avatarType?: 'photo' | 'initials' | 'icon';
+    content: string;
+    likeCount: number;
+    isLiked?: boolean;
+    isOwnComment: boolean;
+}
+interface Post {
+    id: string;
+    authorName: string;
+    authorRole: string;
+    timestamp: string;
+    avatarType: 'photo' | 'initials' | 'icon';
+    avatarSrc?: string;
+    avatarInitials?: string;
+    avatarIconName?: string;
+    content: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    isLiked: boolean;
+    likeCount: number;
+    commentCount: number;
+    comments?: Comment[];
+    isPinned?: boolean;
+    showBadge?: boolean;
+    hasInlinePhotos?: boolean;
+    inlinePhotos?: string[];
+    inlinePhotoCount?: number;
+}
+
+/**
+ * PostsService
+ *
+ * Centralized service for managing community posts.
+ * Provides a single source of truth for post data, including comments.
+ *
+ * Features:
+ * - CRUD operations for posts
+ * - Infinite scroll pagination
+ * - Post search/filter (future)
+ * - Comment management (future)
+ */
+declare class PostsService {
+    private postsState;
+    posts: _angular_core.Signal<Post[]>;
+    private currentPage;
+    private hasMore;
+    constructor();
+    /**
+     * Get a post by ID
+     */
+    getPostById(id: string): Post | undefined;
+    /**
+     * Add a new post (e.g., from post creator)
+     * Adds to the beginning of the list
+     */
+    addPost(post: Post): void;
+    /**
+     * Update an existing post
+     */
+    updatePost(id: string, updates: Partial<Post>): void;
+    /**
+     * Delete a post by ID
+     */
+    deletePost(id: string): void;
+    /**
+     * Load more posts for infinite scroll
+     * Returns true if more posts were loaded, false if no more posts
+     */
+    loadMorePosts(): Promise<boolean>;
+    /**
+     * Check if there are more posts to load
+     */
+    hasMorePosts(): boolean;
+    /**
+     * Reset pagination (e.g., on pull-to-refresh)
+     */
+    resetPagination(): void;
+    /**
+     * Get initial posts (shown on page load)
+     */
+    private getInitialPosts;
+    /**
+     * Get additional posts for infinite scroll
+     */
+    private getAdditionalPosts;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostsService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<PostsService>;
+}
+
 declare class MobileCommunityPageComponent {
     private router;
     private route;
@@ -4010,23 +4806,22 @@ declare class MobileCommunityPageComponent {
     private lightbox;
     private postModal;
     userService: UserService;
-    userPosts: _angular_core.WritableSignal<any[]>;
-    showStaticPosts: _angular_core.WritableSignal<boolean>;
+    private postsService;
+    allPosts: _angular_core.Signal<Post[]>;
     hasAnyPosts: _angular_core.Signal<boolean>;
-    constructor(router: Router, route: ActivatedRoute, bottomSheet: DsMobileBottomSheetService, lightbox: DsMobileLightboxService, postModal: DsMobilePostDetailModalService, userService: UserService);
+    hasMorePosts: _angular_core.Signal<boolean>;
+    constructor(router: Router, route: ActivatedRoute, bottomSheet: DsMobileBottomSheetService, lightbox: DsMobileLightboxService, postModal: DsMobilePostDetailModalService, userService: UserService, postsService: PostsService);
+    /**
+     * Handle infinite scroll event
+     * Loads more posts when user scrolls to bottom
+     */
+    onInfiniteScroll(event: any): Promise<void>;
     handleRefresh(event: any): void;
     /**
      * Open post detail modal
-     * This provides a better UX than route navigation:
-     * - Maintains scroll position
-     * - Native iOS-style modal feel
-     * - Proper close button that works
+     * Gets post data from service and opens modal
      */
     openPost(postId: string, focusComment?: boolean): Promise<void>;
-    /**
-     * Open user-created post detail modal
-     */
-    openUserPost(index: number, focusComment?: boolean): Promise<void>;
     openPostCreator(): Promise<void>;
     /**
      * Open an image in the lightbox viewer
@@ -4037,7 +4832,7 @@ declare class MobileCommunityPageComponent {
     /**
      * Handle long press on a post to show action sheet
      */
-    handlePostLongPress(postIdOrIndex: string | number, isOwnPost: boolean): Promise<void>;
+    handlePostLongPress(postId: string, isOwnPost: boolean): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileCommunityPageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileCommunityPageComponent, "app-mobile-community-page", never, {}, {}, never, never, true, never>;
 }
@@ -4075,7 +4870,8 @@ interface Inquiry {
 declare class MobileInquiriesPageComponent {
     userService: UserService;
     private navCtrl;
-    constructor(userService: UserService, navCtrl: NavController);
+    private newInquiryModal;
+    constructor(userService: UserService, navCtrl: NavController, newInquiryModal: DsMobileNewInquiryModalService);
     filterStatus: _angular_core.WritableSignal<"open" | "closed" | "all">;
     tabItems: InlineTabItem[];
     inquiries: _angular_core.WritableSignal<Inquiry[]>;
@@ -4086,22 +4882,11 @@ declare class MobileInquiriesPageComponent {
     getInquiryIcon(category: string): string;
     openInquiryDetail(inquiryId: string): void;
     showInquiryActions(inquiryId: string): void;
+    createNewInquiry(): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileInquiriesPageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileInquiriesPageComponent, "app-mobile-inquiries-page", never, {}, {}, never, never, true, never>;
 }
 
-interface ActivityItem {
-    id: string;
-    type: 'assignment' | 'status_change' | 'creation';
-    actor?: string;
-    actorInitials?: string;
-    title: string;
-    description?: string;
-    timestamp: string;
-    date: string;
-    iconName: string;
-    iconBgColor?: string;
-}
 interface MessageThread {
     id: string;
     senderName: string;
@@ -4112,28 +4897,28 @@ interface MessageThread {
     timestamp: string;
     unread: boolean;
 }
-declare class MobileInquiryDetailPageComponent extends MobilePageBase implements AfterViewInit {
+declare class MobileInquiryDetailPageComponent {
     userService: UserService;
-    private navCtrl;
-    private elementRef;
     private lightbox;
     private chatModal;
-    ionContent?: IonContent;
-    private platform;
-    isNativePlatform: _angular_core.Signal<boolean>;
     inquiryTitle: string;
     activeTab: _angular_core.WritableSignal<string>;
     tabItems: InlineTabItem[];
-    activities: ActivityItem[];
     messageThreads: MessageThread[];
     unreadMessagesCount: _angular_core.Signal<number>;
     photos: LightboxImage[];
-    constructor(userService: UserService, navCtrl: NavController, elementRef: ElementRef, lightbox: DsMobileLightboxService, chatModal: DsMobileChatModalService);
-    ngAfterViewInit(): void;
+    constructor(userService: UserService, lightbox: DsMobileLightboxService, chatModal: DsMobileChatModalService);
     setActiveTab(tabId: string): void;
     goBack(): void;
-    handleScroll(event: any): void;
     handleRefresh(event: any): void;
+    /**
+     * Check if there are unread messages
+     */
+    hasUnreadMessages(): boolean;
+    /**
+     * Navigate to messages tab when banner is clicked
+     */
+    navigateToMessagesTab(): void;
     openMessage(messageId: string): Promise<void>;
     openPhotoLightbox(index: number): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileInquiryDetailPageComponent, never>;
@@ -4221,6 +5006,23 @@ declare class MobilePostDetailPageComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobilePostDetailPageComponent, "app-mobile-post-detail-page", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * SignInPageComponent
+ *
+ * Sign-in page with email authentication.
+ * Features logomark, decorative city background, and form validation.
+ */
+declare class SignInPageComponent {
+    email: string;
+    emailError: _angular_core.WritableSignal<boolean>;
+    isSubmitting: _angular_core.WritableSignal<boolean>;
+    emailSent: _angular_core.WritableSignal<boolean>;
+    handleSubmit(): void;
+    handleBackToLogin(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SignInPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SignInPageComponent, "app-sign-in", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Whitelabel Demo Page
  *
@@ -4246,23 +5048,26 @@ declare class WhitelabelDemoPage implements OnInit {
 }
 
 /**
- * Custom page transition - iOS-style push/pop
+ * Custom page transition - iOS-style push/pop with dark overlay
  *
  * FORWARD (navigating TO detail):
  * - Entering page (detail): slides in from RIGHT, z-index 10 (on top)
  * - Leaving page (list): slides LEFT slightly, z-index 9 (underneath)
+ * - Dark overlay: fades in on leaving page (opacity 0 to 0.70)
  *
  * REVERSE (swipe back FROM detail):
  * - Entering page (list): slides in from LEFT, z-index 9 (underneath)
  * - Leaving page (detail): slides out to RIGHT, z-index 10 (on top)
+ * - Dark overlay: fades out on entering page (main page underneath, opacity 0.70 to 0)
  */
 declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
 /**
  * Custom back transition - iOS style where page slides out to reveal page underneath
  * The entering page (inquiries) slides in from the LEFT underneath
  * The leaving page (detail) slides out to the RIGHT on top
+ * Dark overlay: fades out on entering page (main page underneath, opacity 0.70 to 0)
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
-export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export type { ActionGroup, ActionItem, ActionResult, AttachmentData, AttachmentFileType, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, Comment, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };