@propbinder/mobile-design 0.1.22 → 0.2.0

package/index.d.ts

@@ -338,6 +338,7 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
     private modalController;
     private router;
     private userService;
+    private whitelabelDemoModal;
     isNativePlatform: _angular_core.Signal<boolean>;
     title: _angular_core.InputSignal<string>;
     headerTitle: _angular_core.InputSignal<string>;
@@ -813,6 +814,320 @@ 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>;
 }
 
+/**
+ * DsMobileMessageComposerComponent
+ *
+ * Reusable message composer component extracted from post-detail-modal.
+ * Can be used for both comments and chat messages.
+ *
+ * Features:
+ * - Text input with auto-resize
+ * - Avatar display
+ * - Send button (appears when text is entered)
+ * - Optional mention menu support
+ * - Optional edit/reply indicators
+ * - Keyboard handling for mobile
+ * - Safe area support
+ *
+ * @example
+ * ```html
+ * <ds-mobile-message-composer
+ *   [avatarInitials]="'JD'"
+ *   [placeholder]="'Write a message...'"
+ *   (messageSent)="handleMessage($event)">
+ * </ds-mobile-message-composer>
+ * ```
+ */
+declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestroy {
+    /**
+     * Avatar initials
+     */
+    avatarInitials: _angular_core.InputSignal<string>;
+    /**
+     * Avatar type
+     */
+    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    /**
+     * Avatar photo source (for photo type)
+     */
+    avatarSrc: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Send button aria label
+     */
+    sendButtonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Edit indicator text (when editing)
+     */
+    editIndicatorText: _angular_core.InputSignal<string>;
+    /**
+     * Reply indicator text prefix
+     */
+    replyIndicatorText: _angular_core.InputSignal<string>;
+    /**
+     * Whether to enable mention support
+     */
+    enableMentions: _angular_core.InputSignal<boolean>;
+    /**
+     * Available users for mentions (if mentions enabled)
+     */
+    mentionUsers: _angular_core.InputSignal<{
+        name: string;
+        initials: string;
+        role: string;
+    }[]>;
+    /**
+     * Auto-focus input on mount
+     */
+    autoFocus: _angular_core.InputSignal<boolean>;
+    /**
+     * ViewChild for message input
+     */
+    messageInput?: ElementRef<HTMLTextAreaElement>;
+    /**
+     * Message text signal
+     */
+    messageText: _angular_core.WritableSignal<string>;
+    /**
+     * Editing message state (optional)
+     */
+    editingMessage: _angular_core.WritableSignal<{
+        authorName: string;
+        originalContent: string;
+        timestamp: string;
+    } | null>;
+    /**
+     * Replying to state (optional)
+     */
+    replyingTo: _angular_core.WritableSignal<{
+        authorName: string;
+        content: string;
+    } | null>;
+    /**
+     * Mention menu state
+     */
+    showMentionMenu: _angular_core.WritableSignal<boolean>;
+    /**
+     * Mention query for filtering
+     */
+    mentionQuery: _angular_core.WritableSignal<string>;
+    /**
+     * Filtered users based on mention query
+     */
+    filteredUsers: _angular_core.Signal<{
+        name: string;
+        initials: string;
+        role: string;
+    }[]>;
+    /**
+     * Emits when a message is sent
+     */
+    messageSent: _angular_core.OutputEmitterRef<{
+        content: string;
+        isReply?: boolean;
+        replyTo?: string;
+        isEdit?: boolean;
+    }>;
+    /**
+     * Emits when edit is cancelled
+     */
+    editCancelled: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when reply is cancelled
+     */
+    replyCancelled: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when mention is selected
+     */
+    mentionSelected: _angular_core.OutputEmitterRef<{
+        userName: string;
+    }>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set up keyboard event listeners
+     */
+    private setupKeyboardListeners;
+    /**
+     * Clean up keyboard event listeners
+     */
+    private cleanupKeyboardListeners;
+    /**
+     * Show the keyboard when user interacts with input
+     */
+    showKeyboard(): void;
+    /**
+     * Handle input changes and detect @ mentions
+     */
+    handleInput(event: Event): void;
+    /**
+     * Select a user from mention menu
+     */
+    selectMention(userName: string): void;
+    /**
+     * Cancel edit
+     */
+    cancelEdit(): void;
+    /**
+     * Cancel reply
+     */
+    cancelReply(): void;
+    /**
+     * Set reply state (for external use)
+     */
+    setReply(authorName: string, content: string): void;
+    /**
+     * Set edit state (for external use)
+     */
+    setEdit(authorName: string, originalContent: string, timestamp: string): void;
+    /**
+     * Clear composer state
+     */
+    clear(): void;
+    /**
+     * Focus the input
+     */
+    focus(): 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>;
+}
+
+/**
+ * Chat attachment interface
+ */
+interface ChatAttachment {
+    id: string;
+    type: 'image' | 'pdf' | 'file';
+    url: string;
+    name: string;
+    size?: number;
+    thumbnail?: string;
+}
+/**
+ * DsMobileMessageBubbleComponent
+ *
+ * Individual message bubble component for chat conversations.
+ * Supports left-aligned (sender) and right-aligned (user) messages with different styling.
+ *
+ * Features:
+ * - Left/right alignment based on sender
+ * - Avatar display (left for sender, right for user)
+ * - Message content with text wrapping
+ * - Timestamp display
+ * - Read receipt indicator (for user's messages)
+ * - Attachment support
+ * - Long press support for actions
+ *
+ * @example
+ * ```html
+ * <!-- Sender's message (left-aligned) -->
+ * <ds-mobile-message-bubble
+ *   [isOwnMessage]="false"
+ *   [senderName]="'Ricki Meihlen'"
+ *   [content]="'We have received your case...'"
+ *   [timestamp]="'12:34'"
+ *   [avatarInitials]="'RM'">
+ * </ds-mobile-message-bubble>
+ *
+ * <!-- User's message (right-aligned) -->
+ * <ds-mobile-message-bubble
+ *   [isOwnMessage]="true"
+ *   [senderName]="'You'"
+ *   [content]="'Thank you!'"
+ *   [timestamp]="'12:35'"
+ *   [readStatus]="true"
+ *   [avatarInitials]="'JD'">
+ * </ds-mobile-message-bubble>
+ * ```
+ */
+declare class DsMobileMessageBubbleComponent {
+    /**
+     * Message content text
+     */
+    content: _angular_core.InputSignal<string>;
+    /**
+     * Whether this is the current user's message (right-aligned)
+     */
+    isOwnMessage: _angular_core.InputSignal<boolean>;
+    /**
+     * Sender's name (for display purposes)
+     */
+    senderName: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp text (e.g., "12:34", "08-12-2025 13:18")
+     */
+    timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Avatar initials
+     */
+    avatarInitials: _angular_core.InputSignal<string>;
+    /**
+     * Avatar type
+     */
+    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    /**
+     * Avatar photo source (for photo type)
+     */
+    avatarSrc: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show read receipt (only for user's messages)
+     */
+    /**
+     * Message attachments
+     */
+    attachments: _angular_core.InputSignal<ChatAttachment[] | undefined>;
+    /**
+     * Whether the message is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when attachment is clicked
+     */
+    attachmentClick: _angular_core.OutputEmitterRef<ChatAttachment>;
+    /**
+     * Emits when the message is long-pressed
+     */
+    longPress: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Long press tracking
+     */
+    private longPressTimer;
+    private longPressTriggered;
+    private touchStartX;
+    private touchStartY;
+    private readonly LONG_PRESS_DURATION;
+    private readonly MOVE_THRESHOLD;
+    /**
+     * Handle attachment click
+     */
+    handleAttachmentClick(attachment: ChatAttachment): void;
+    /**
+     * Handle touch start for long press detection
+     */
+    handleTouchStart(event: TouchEvent): void;
+    /**
+     * Handle touch end to clear long press timer
+     */
+    handleTouchEnd(event: TouchEvent): void;
+    /**
+     * Handle touch move to cancel long press if moved too much
+     */
+    handleTouchMove(event: TouchEvent): void;
+    /**
+     * Handle context menu (right-click on desktop) to trigger long press action
+     */
+    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>;
+}
+
 /**
  * DsMobileLongPressDirective
  *
@@ -986,11 +1301,17 @@ declare class DsMobileListItemComponent {
     leadingSize: _angular_core.InputSignal<string>;
     /**
      * Display variant
-     * - 'feed' - Standard feed display (default)
-     * - 'detail' - Full detail view
+     * - undefined (default) - Standard display
      * - 'compact' - Compact display for nested/related items
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | undefined>;
+    /**
+     * Vertical alignment of leading and main content slots
+     * - 'top' - Align to top (default)
+     * - 'center' - Align to center
+     * - 'bottom' - Align to 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
@@ -1089,7 +1410,7 @@ declare class DsMobileListItemComponent {
      */
     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; }; "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; }; "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"; }; }]>;
 }
 
 /**
@@ -1207,11 +1528,10 @@ declare class DsMobileInteractiveListItemPostComponent {
     showBadge: _angular_core.InputSignal<boolean>;
     /**
      * Display variant
-     * - 'feed' - Standard feed display (default)
-     * - 'detail' - Full detail view
+     * - undefined (default) - Standard display
      * - 'compact' - Compact display for nested/related posts
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | undefined>;
     /**
      * Whether the post card is clickable
      */
@@ -1416,11 +1736,10 @@ declare class DsMobileInteractiveListItemInquiryComponent {
     iconColor: _angular_core.InputSignal<string>;
     /**
      * Display variant
-     * - 'feed' - Standard feed display (default)
-     * - 'detail' - Full detail view
+     * - undefined (default) - Standard display
      * - 'compact' - Compact display
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | undefined>;
     /**
      * Whether the inquiry item is clickable
      */
@@ -1478,6 +1797,10 @@ declare class DsMobileInteractiveListItemMessageComponent {
      * Sender's role (e.g., "Tenant", "Property Manager")
      */
     senderRole: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp for the message (e.g., "2h ago", "2t siden")
+     */
+    timestamp: _angular_core.InputSignal<string>;
     /**
      * Message preview text
      */
@@ -1513,7 +1836,7 @@ declare class DsMobileInteractiveListItemMessageComponent {
     handleMessageClick(): void;
     handleLongPress(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemMessageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemMessageComponent, "ds-mobile-interactive-list-item-message", never, { "senderName": { "alias": "senderName"; "required": true; "isSignal": true; }; "senderRole": { "alias": "senderRole"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "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; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "messageClick": "messageClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemMessageComponent, "ds-mobile-interactive-list-item-message", never, { "senderName": { "alias": "senderName"; "required": true; "isSignal": true; }; "senderRole": { "alias": "senderRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "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; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "messageClick": "messageClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -1855,6 +2178,8 @@ interface LightboxImageOptions {
     enableSwipe?: boolean;
     /** Show image info (title, description) */
     showInfo?: boolean;
+    /** Show like & comment action buttons */
+    showActions?: boolean;
     /** Animation type for opening */
     animation?: 'fade' | 'zoom' | 'slide';
 }
@@ -1995,6 +2320,7 @@ declare class DsMobileLightboxImageComponent implements OnInit, AfterViewInit, O
     showControls: boolean;
     enableSwipe: boolean;
     showInfo: boolean;
+    showActions: boolean;
     animation: 'fade' | 'zoom' | 'slide';
     onCloseRequested?: () => void;
     swiperContainer: ElementRef<HTMLDivElement>;
@@ -2168,8 +2494,12 @@ declare class DsMobileLightboxHeaderComponent {
      * Emitted when close button is clicked
      */
     closeClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when share button is clicked
+     */
+    shareClick: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxHeaderComponent, "ds-mobile-lightbox-header", never, { "author": { "alias": "author"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxHeaderComponent, "ds-mobile-lightbox-header", never, { "author": { "alias": "author"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; "shareClick": "shareClick"; }, never, never, true, never>;
 }
 
 /**
@@ -2191,6 +2521,11 @@ declare class DsMobileLightboxFooterComponent {
      * Total number of images
      */
     totalImages: _angular_core.InputSignal<number>;
+    /**
+     * Whether to show like & comment action buttons
+     * @default false
+     */
+    showActions: _angular_core.InputSignal<boolean>;
     /**
      * Whether the content is liked
      */
@@ -2219,12 +2554,8 @@ declare class DsMobileLightboxFooterComponent {
      * Emitted when comment button is clicked
      */
     commentClick: _angular_core.OutputEmitterRef<void>;
-    /**
-     * Emitted when share button is clicked
-     */
-    shareClick: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxFooterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxFooterComponent, "ds-mobile-lightbox-footer", never, { "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "currentIndex": { "alias": "currentIndex"; "required": false; "isSignal": true; }; "totalImages": { "alias": "totalImages"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; "commentCount": { "alias": "commentCount"; "required": false; "isSignal": true; }; }, { "prevClick": "prevClick"; "nextClick": "nextClick"; "likeClick": "likeClick"; "commentClick": "commentClick"; "shareClick": "shareClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxFooterComponent, "ds-mobile-lightbox-footer", never, { "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "currentIndex": { "alias": "currentIndex"; "required": false; "isSignal": true; }; "totalImages": { "alias": "totalImages"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; "commentCount": { "alias": "commentCount"; "required": false; "isSignal": true; }; }, { "prevClick": "prevClick"; "nextClick": "nextClick"; "likeClick": "likeClick"; "commentClick": "commentClick"; }, never, never, true, never>;
 }
 
 /**
@@ -2821,6 +3152,243 @@ declare class DsMobilePostDetailModalService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobilePostDetailModalService>;
 }
 
+/**
+ * Chat message data interface
+ */
+interface ChatMessage {
+    id: string;
+    content: string;
+    senderId: string;
+    senderName: string;
+    senderRole?: string;
+    timestamp: string;
+    avatarInitials?: string;
+    avatarType?: 'initials' | 'photo' | 'icon';
+    avatarSrc?: string;
+    isOwnMessage: boolean;
+    attachments?: ChatAttachment[];
+}
+/**
+ * Chat participant interface
+ */
+interface ChatParticipant {
+    id: string;
+    name: string;
+    role?: string;
+    avatarInitials?: string;
+    avatarType?: 'initials' | 'photo' | 'icon';
+    avatarSrc?: string;
+}
+/**
+ * Chat modal data interface
+ *
+ * Represents the data needed to display a chat conversation.
+ *
+ * @example
+ * ```typescript
+ * const chatData: ChatModalData = {
+ *   participant: {
+ *     id: '123',
+ *     name: 'Ricki Meihlen',
+ *     role: 'Inquiry assignee',
+ *     avatarInitials: 'RM'
+ *   },
+ *   messages: [
+ *     {
+ *       id: '1',
+ *       content: 'We have received your case...',
+ *       senderId: '123',
+ *       senderName: 'Ricki Meihlen',
+ *       timestamp: '12:34',
+ *       isOwnMessage: false,
+ *       avatarInitials: 'RM'
+ *     }
+ *   ],
+ *   currentUserId: '456'
+ * };
+ * ```
+ */
+interface ChatModalData {
+    /** The other participant in the conversation */
+    participant: ChatParticipant;
+    /** Array of messages in the conversation */
+    messages: ChatMessage[];
+    /** Current user's ID */
+    currentUserId: string;
+    /** Current user's avatar initials */
+    currentUserInitials?: string;
+    /** Current user's avatar type */
+    currentUserAvatarType?: 'initials' | 'photo' | 'icon';
+    /** Current user's avatar source */
+    currentUserAvatarSrc?: string;
+    /** Auto-focus input when modal opens */
+    autoFocus?: boolean;
+}
+/**
+ * DsMobileChatModalComponent
+ *
+ * Modal component for displaying and managing chat conversations.
+ * Follows the same pattern as post-detail-modal for consistent behavior.
+ *
+ * Features:
+ * - Header with participant info and close button
+ * - Scrollable message thread
+ * - Fixed message composer at bottom
+ * - Keyboard handling
+ * - Safe area support
+ *
+ * This component is typically not used directly - use DsMobileChatModalService instead.
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private chatModal: DsMobileChatModalService) {}
+ *
+ * openChat() {
+ *   this.chatModal.open({
+ *     participant: { id: '123', name: 'Ricki Meihlen' },
+ *     messages: [...],
+ *     currentUserId: '456'
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileChatModalComponent implements OnInit, AfterViewInit, OnDestroy {
+    private modalController;
+    chatData: ChatModalData;
+    /**
+     * Loading state - when true, shows loading indicator
+     */
+    loading: boolean;
+    /**
+     * Error state - when set, shows error message
+     */
+    error?: string;
+    participant: _angular_core.WritableSignal<ChatParticipant>;
+    messages: _angular_core.WritableSignal<ChatMessage[]>;
+    currentUserInitials: _angular_core.WritableSignal<string>;
+    currentUserAvatarType: _angular_core.WritableSignal<"initials" | "photo" | "icon">;
+    currentUserAvatarSrc: _angular_core.WritableSignal<string>;
+    autoFocus: _angular_core.WritableSignal<boolean>;
+    constructor(modalController: ModalController);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Scroll to bottom of messages
+     */
+    private scrollToBottom;
+    /**
+     * Close the modal
+     */
+    close(): void;
+    /**
+     * Handle message sent from composer
+     */
+    handleMessageSent(event: {
+        content: string;
+        isReply?: boolean;
+        replyTo?: string;
+        isEdit?: boolean;
+    }): void;
+    /**
+     * Handle attachment click
+     */
+    handleAttachmentClick(attachment: ChatAttachment): void;
+    /**
+     * Handle message long press
+     */
+    handleMessageLongPress(message: ChatMessage): void;
+    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>;
+}
+
+/**
+ * DsMobileChatModalService
+ *
+ * Service for displaying chat conversations in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobilePostDetailModalService for consistent behavior.
+ *
+ * Features:
+ * - Full conversation display
+ * - Message thread with bubbles
+ * - Message composer
+ * - Native modal animations
+ * - Safe area support
+ * - Keyboard handling
+ *
+ * @example
+ * ```typescript
+ * constructor(private chatModal: DsMobileChatModalService) {}
+ *
+ * async openChat() {
+ *   await this.chatModal.open({
+ *     participant: {
+ *       id: '123',
+ *       name: 'Ricki Meihlen',
+ *       role: 'Inquiry assignee',
+ *       avatarInitials: 'RM'
+ *     },
+ *     messages: [
+ *       {
+ *         id: '1',
+ *         content: 'We have received your case...',
+ *         senderId: '123',
+ *         senderName: 'Ricki Meihlen',
+ *         timestamp: '12:34',
+ *         isOwnMessage: false,
+ *         avatarInitials: 'RM'
+ *       },
+ *       {
+ *         id: '2',
+ *         content: 'Thank you!',
+ *         senderId: '456',
+ *         senderName: 'You',
+ *         timestamp: '12:35',
+ *         isOwnMessage: true,
+ *         avatarInitials: 'JD',
+ *         readStatus: true
+ *       }
+ *     ],
+ *     currentUserId: '456',
+ *     currentUserInitials: 'JD',
+ *     autoFocus: true
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileChatModalService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Open the chat modal
+     *
+     * @param chatData Chat data to display
+     * @param options Optional loading and error states
+     * @returns Promise that resolves when the modal is presented
+     */
+    open(chatData: ChatModalData, options?: {
+        loading?: boolean;
+        error?: string;
+    }): Promise<void>;
+    /**
+     * Close the currently open chat 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<DsMobileChatModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileChatModalService>;
+}
+
 /**
  * Handbook detail data interface
  *
@@ -3238,7 +3806,7 @@ declare class DsMobileHandbookFolderMiniComponent {
  * ```
  */
 declare class DsTextInputComponent implements ControlValueAccessor {
-    type: _angular_core.InputSignal<"search" | "text" | "email" | "tel" | "password" | "url">;
+    type: _angular_core.InputSignal<"search" | "text" | "url" | "email" | "tel" | "password">;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     readonly: _angular_core.InputSignal<boolean>;
@@ -3246,7 +3814,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     hasError: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"search" | "text" | "email" | "tel" | "url" | "numeric" | undefined>;
+    inputmode: _angular_core.InputSignal<"search" | "text" | "numeric" | "url" | "email" | "tel" | undefined>;
     autoClearError: _angular_core.InputSignal<boolean>;
     validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
     valueChange: _angular_core.OutputEmitterRef<string>;
@@ -3414,6 +3982,8 @@ declare class MobileInquiryDetailPageComponent extends MobilePageBase implements
     userService: UserService;
     private navCtrl;
     private elementRef;
+    private lightbox;
+    private chatModal;
     ionContent?: IonContent;
     private platform;
     isNativePlatform: _angular_core.Signal<boolean>;
@@ -3423,13 +3993,15 @@ declare class MobileInquiryDetailPageComponent extends MobilePageBase implements
     activities: ActivityItem[];
     messageThreads: MessageThread[];
     unreadMessagesCount: _angular_core.Signal<number>;
-    constructor(userService: UserService, navCtrl: NavController, elementRef: ElementRef);
+    photos: LightboxImage[];
+    constructor(userService: UserService, navCtrl: NavController, elementRef: ElementRef, lightbox: DsMobileLightboxService, chatModal: DsMobileChatModalService);
     ngAfterViewInit(): void;
     setActiveTab(tabId: string): void;
     goBack(): void;
     handleScroll(event: any): void;
     handleRefresh(event: any): void;
-    openMessage(messageId: string): void;
+    openMessage(messageId: string): Promise<void>;
+    openPhotoLightbox(index: number): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileInquiryDetailPageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileInquiryDetailPageComponent, "app-mobile-inquiry-detail-page", never, {}, {}, never, never, true, never>;
 }
@@ -3633,6 +4205,7 @@ declare class WhitelabelDemoPage implements OnInit {
     applyCejTheme(): void;
     applyPkaTheme(): void;
     applyClaveTheme(): void;
+    applyFreedomTheme(): void;
     applyCustomColors(): void;
     private updateCustomColorInputs;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelDemoPage, never>;
@@ -3658,5 +4231,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, 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, 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, BottomSheetOptions, 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, 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, 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 };