@propbinder/mobile-design 0.2.6 → 0.2.7

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, OnInit, ElementRef, OnDestroy, EventEmitter, ApplicationRef, EnvironmentInjector, Type, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, OnInit, ElementRef, Injector, TemplateRef, 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';
@@ -71,6 +71,9 @@ interface ActionItem {
     title: string;
     icon: string;
     destructive?: boolean;
+    subtitle?: string;
+    showChevron?: boolean;
+    flagIcon?: string;
 }
 interface ActionGroup {
     actions: ActionItem[];
@@ -231,6 +234,27 @@ declare class DsMobileBottomSheetService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileBottomSheetService>;
 }
 
+/**
+ * DsMobileBottomSheetWrapperComponent
+ *
+ * A wrapper component that provides common layout styling for all bottom sheets.
+ * Handles safe area insets and provides consistent layout structure.
+ *
+ * Usage:
+ * Wrap your bottom sheet content with this component using ng-content projection.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-bottom-sheet-wrapper>
+ *   <!-- Your bottom sheet content here -->
+ * </ds-mobile-bottom-sheet-wrapper>
+ * ```
+ */
+declare class DsMobileBottomSheetWrapperComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBottomSheetWrapperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBottomSheetWrapperComponent, "ds-mobile-bottom-sheet-wrapper", never, {}, {}, never, ["*"], true, never>;
+}
+
 /**
  * DsMobilePostCreateBottomSheetComponent
  *
@@ -294,6 +318,127 @@ declare class DsMobilePostCreateBottomSheetComponent implements AfterViewInit, O
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostCreateBottomSheetComponent, "ds-mobile-post-create-bottom-sheet", never, {}, {}, never, never, true, never>;
 }
 
+interface Language {
+    code: string;
+    nativeName: string;
+    englishName: string;
+    flagIcon: string;
+}
+/**
+ * DsMobileProfileActionsSheetComponent
+ *
+ * Bottom sheet for profile actions with navigable language selection.
+ * Features a smooth slide-in navigation pattern for sub-menus.
+ *
+ * @example
+ * ```typescript
+ * const sheet = await this.modalController.create({
+ *   component: DsMobileProfileActionsSheetComponent,
+ *   componentProps: {
+ *     actionGroups: [...],
+ *     currentLanguage: 'da',
+ *     availableLanguages: [...]
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: ['ds-bottom-sheet', 'auto-height']
+ * });
+ *
+ * const result = await sheet.onWillDismiss();
+ * if (result.data?.action) {
+ *   // Handle the action (e.g., 'language:da', 'profile', 'logout')
+ * }
+ * ```
+ */
+declare class DsMobileProfileActionsSheetComponent {
+    private modalController;
+    private injector;
+    /**
+     * Action groups to display in main view
+     */
+    actionGroups: ActionGroup[];
+    /**
+     * Currently selected language code
+     */
+    currentLanguage: string;
+    /**
+     * Initial language (for tracking changes)
+     */
+    private initialLanguage;
+    /**
+     * Currently selected language in the view (before confirmation)
+     */
+    selectedLanguage: _angular_core.WritableSignal<string>;
+    /**
+     * Check if language has changed
+     */
+    hasLanguageChanged: _angular_core.Signal<boolean>;
+    /**
+     * Available languages for selection
+     */
+    availableLanguages: Language[];
+    /**
+     * Current view state
+     */
+    currentView: _angular_core.WritableSignal<"main" | "language">;
+    /**
+     * Reference to the view container for height calculations
+     */
+    viewContainer?: ElementRef<HTMLDivElement>;
+    /**
+     * Reference to the profile actions sheet wrapper
+     */
+    sheetWrapper?: ElementRef<HTMLDivElement>;
+    /**
+     * Current container height (for dynamic transitions)
+     */
+    containerHeight: _angular_core.WritableSignal<number | null>;
+    /**
+     * Is animating between views
+     */
+    isAnimating: _angular_core.WritableSignal<boolean>;
+    constructor(modalController: ModalController, injector: Injector);
+    /**
+     * Handle action item click
+     */
+    handleActionClick(actionItem: ActionItem): void;
+    /**
+     * Navigate back to main view
+     */
+    navigateBack(): void;
+    /**
+     * Confirm language selection and dismiss
+     */
+    confirmLanguageSelection(): void;
+    /**
+     * Handle language selection (update selection, don't dismiss)
+     */
+    selectLanguage(languageCode: string): void;
+    /**
+     * Get current language flag icon
+     */
+    getCurrentLanguageFlag(): string;
+    /**
+     * Update container height based on active view
+     */
+    private updateHeight;
+    /**
+     * Animate view transition with height change
+     */
+    private animateViewTransition;
+    /**
+     * Helper to create delay promise
+     */
+    private delay;
+    /**
+     * Handle regular action selection
+     */
+    selectAction(action: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileProfileActionsSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileProfileActionsSheetComponent, "ds-mobile-profile-actions-sheet", never, { "actionGroups": { "alias": "actionGroups"; "required": false; }; "currentLanguage": { "alias": "currentLanguage"; "required": false; }; "availableLanguages": { "alias": "availableLanguages"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * DsMobilePageMainComponent
  *
@@ -716,6 +861,13 @@ declare class TileValueComponent {
  * ```
  */
 declare class DsMobileCommentComponent {
+    private platformId;
+    /**
+     * Detect if viewport is desktop size
+     * Use viewport width for breakpoint detection (show button on tablet and above)
+     */
+    isDesktop: _angular_core.WritableSignal<boolean>;
+    constructor();
     /**
      * Author's display name
      */
@@ -751,7 +903,7 @@ declare class DsMobileCommentComponent {
     /**
      * Whether the comment is liked by current user
      */
-    isLiked: _angular_core.ModelSignal<boolean>;
+    isLiked: _angular_core.InputSignal<boolean>;
     /**
      * Emits when like is toggled (after UI is opdateret)
      */
@@ -762,7 +914,15 @@ declare class DsMobileCommentComponent {
     /**
      * Number of likes
      */
-    likeCount: _angular_core.ModelSignal<number>;
+    likeCount: _angular_core.InputSignal<number>;
+    /**
+     * Internal signal to track like state for UI updates
+     */
+    internalIsLiked: _angular_core.WritableSignal<boolean>;
+    /**
+     * Internal signal to track like count for UI updates
+     */
+    internalLikeCount: _angular_core.WritableSignal<number>;
     /**
      * Signal to control pulse animation
      */
@@ -822,7 +982,7 @@ declare class DsMobileCommentComponent {
      */
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCommentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "isLiked": "isLikedChange"; "likeToggled": "likeToggled"; "likeCount": "likeCountChange"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "likeToggled": "likeToggled"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -889,6 +1049,7 @@ interface AttachmentData {
     type: AttachmentFileType;
     name?: string;
     size?: string;
+    isLoading?: boolean;
 }
 /**
  * DsMobileAttachmentPreviewComponent
@@ -936,12 +1097,164 @@ declare class DsMobileAttachmentPreviewComponent {
     getIconName(): string;
     /**
      * Handle remove button click
+     * Uses mousedown to prevent keyboard from closing
      */
-    handleRemove(): void;
+    handleRemove(event?: MouseEvent): 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>;
 }
 
+interface DsMobileDropdownItem {
+    id: string;
+    /** Optional leading icon */
+    leadingIcon?: string;
+    /** Optional trailing icon */
+    trailingIcon?: string;
+    /** Main label text */
+    label?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Optional action callback */
+    action?: () => void;
+    /** Custom data for template rendering */
+    data?: any;
+}
+type DropdownPosition = 'above' | 'below';
+type DropdownAlign = 'start' | 'end';
+/**
+ * DsMobileDropdownComponent
+ *
+ * A mobile-optimized dropdown component for action menus, mention lists, and selection lists.
+ * Uses Ionic Popover for robust mobile positioning and backdrop management.
+ *
+ * Features:
+ * - Vertical list layout with leading/main/trailing slots
+ * - Custom template support via content projection
+ * - Mobile-friendly touch interactions (mousedown events)
+ * - Ionic-powered backdrop overlay for dismissal
+ * - Configurable positioning (above/below) and alignment (start/end)
+ * - Max height with scroll support
+ * - Smooth enter/exit animations
+ *
+ * @example
+ * Basic dropdown with default items:
+ * ```html
+ * <button (click)="toggleMenu()">Open Menu</button>
+ * <ds-mobile-dropdown
+ *   [items]="menuItems"
+ *   [isOpen]="isMenuOpen()"
+ *   position="below"
+ *   align="start"
+ *   (itemSelected)="handleSelection($event)"
+ *   (closed)="closeMenu()">
+ * </ds-mobile-dropdown>
+ * ```
+ *
+ * @example
+ * Custom template for mention menu with avatars:
+ * ```html
+ * <textarea (input)="handleInput($event)"></textarea>
+ * <ds-mobile-dropdown
+ *   [items]="users"
+ *   [isOpen]="showMentions()"
+ *   position="above"
+ *   [maxHeight]="200"
+ *   (itemSelected)="selectUser($event)"
+ *   (closed)="closeMentions()">
+ *   <ng-template #itemTemplate let-item>
+ *     <ds-avatar
+ *       [initials]="item.data.initials"
+ *       size="sm" />
+ *     <div class="user-info">
+ *       <span>{{ item.data.name }}</span>
+ *       <span>{{ item.data.role }}</span>
+ *     </div>
+ *   </ng-template>
+ * </ds-mobile-dropdown>
+ * ```
+ */
+declare class DsMobileDropdownComponent {
+    private elementRef;
+    constructor();
+    /**
+     * Content projection for custom item template
+     */
+    customItemTemplate?: TemplateRef<any>;
+    /**
+     * Optional trigger element ID for Ionic Popover positioning
+     */
+    trigger: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional element to keep focused (prevent keyboard from dismissing)
+     * Pass ElementRef to maintain focus when popover opens
+     */
+    keepFocusOn: _angular_core.InputSignal<ElementRef<any> | undefined>;
+    /**
+     * Array of dropdown items to display
+     */
+    items: _angular_core.InputSignal<DsMobileDropdownItem[]>;
+    /**
+     * Whether the dropdown is open
+     */
+    isOpen: _angular_core.InputSignal<boolean>;
+    /**
+     * Position relative to parent container
+     * - 'above': Appears above the anchor
+     * - 'below': Appears below the anchor
+     */
+    position: _angular_core.InputSignal<DropdownPosition>;
+    /**
+     * Horizontal alignment
+     * - 'start': Left-aligned (default)
+     * - 'end': Right-aligned
+     */
+    align: _angular_core.InputSignal<DropdownAlign>;
+    /**
+     * Maximum height in pixels before scrolling
+     */
+    maxHeight: _angular_core.InputSignal<number>;
+    /**
+     * Message to show when items array is empty
+     */
+    emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * ARIA label for the dropdown menu
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Emits when an item is selected
+     */
+    itemSelected: _angular_core.OutputEmitterRef<DsMobileDropdownItem>;
+    /**
+     * Emits when the dropdown should be closed (backdrop click)
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Computed dropdown CSS classes
+     */
+    dropdownClasses: _angular_core.Signal<string>;
+    /**
+     * Computed offset Y for Ionic Popover
+     * Uses CSS variable for precise control
+     */
+    offsetY: _angular_core.Signal<"-4px" | "4px">;
+    /**
+     * Computed offset X for Ionic Popover
+     * Negative value to shift left by trigger position + add 20px left margin
+     */
+    offsetX: _angular_core.Signal<string>;
+    /**
+     * Get CSS classes for a dropdown item
+     */
+    getItemClass(item: DsMobileDropdownItem): string;
+    /**
+     * Handle item click with mousedown to prevent keyboard loss
+     */
+    handleItemClick(item: DsMobileDropdownItem, event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileDropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileDropdownComponent, "ds-mobile-dropdown", never, { "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "keepFocusOn": { "alias": "keepFocusOn"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "closed": "closed"; }, ["customItemTemplate"], never, true, never>;
+}
+
 /**
  * DsMobileMessageComposerComponent
  *
@@ -1022,7 +1335,7 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
     /**
      * ViewChild for message input
      */
-    messageInput?: ElementRef<HTMLTextAreaElement>;
+    messageInputRef?: ElementRef<HTMLTextAreaElement>;
     /**
      * ViewChild for file input
      */
@@ -1035,6 +1348,10 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * Attachments signal
      */
     attachments: _angular_core.WritableSignal<AttachmentData[]>;
+    /**
+     * Attachment menu open state
+     */
+    isAttachmentMenuOpen: _angular_core.WritableSignal<boolean>;
     /**
      * Editing message state (optional)
      */
@@ -1066,6 +1383,14 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
         initials: string;
         role: string;
     }[]>;
+    /**
+     * Convert filtered users to dropdown items
+     */
+    mentionDropdownItems: _angular_core.Signal<DsMobileDropdownItem[]>;
+    /**
+     * Attachment menu items
+     */
+    attachmentMenuItems: _angular_core.Signal<DsMobileDropdownItem[]>;
     /**
      * Emits when a message is sent
      */
@@ -1094,6 +1419,11 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * Emits when attachment button is clicked
      */
     attachmentClicked: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when attachments array changes (added or removed)
+     * Parent components (like chat modal) can use this to scroll to bottom
+     */
+    attachmentsChanged: _angular_core.OutputEmitterRef<void>;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
@@ -1116,6 +1446,18 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      * Handle input changes and detect @ mentions
      */
     handleInput(event: Event): void;
+    /**
+     * Handle mention selection from dropdown
+     */
+    handleMentionSelect(item: DsMobileDropdownItem): void;
+    /**
+     * Close mention menu
+     */
+    closeMentionMenu(): void;
+    /**
+     * Handle attachment menu selection from dropdown
+     */
+    handleAttachmentMenuSelect(item: DsMobileDropdownItem): void;
     /**
      * Select a user from mention menu
      */
@@ -1145,9 +1487,25 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      */
     focus(): void;
     /**
-     * Handle attachment button click
+     * Toggle attachment menu open/closed
+     * Uses mousedown/touchstart to prevent focus loss from textarea
+     */
+    toggleAttachmentMenu(event?: MouseEvent | TouchEvent): void;
+    /**
+     * Close attachment menu
      */
-    handleAttachmentClick(): void;
+    closeAttachmentMenu(event?: MouseEvent): void;
+    /**
+     * Handle add photo button click from menu
+     * Uses Capacitor Camera API to open photo library directly
+     * Allows multiple photo selection
+     */
+    handleAddPhoto(event?: MouseEvent): Promise<void>;
+    /**
+     * Handle add file button click from menu
+     * Opens file picker
+     */
+    handleAddFile(event?: MouseEvent): void;
     /**
      * Detect file type from file name or mime type
      */
@@ -1162,6 +1520,7 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
     handleFileSelect(event: Event): void;
     /**
      * Remove an attachment from the list
+     * Keeps keyboard open by maintaining focus
      */
     removeAttachment(attachmentId: string): void;
     /**
@@ -1169,7 +1528,7 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
      */
     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; }; "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>;
+    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"; "attachmentsChanged": "attachmentsChanged"; }, never, never, true, never>;
 }
 
 /**
@@ -1253,6 +1612,14 @@ declare class DsMobileMessageBubbleComponent {
      * Avatar photo source (for photo type)
      */
     avatarSrc: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show the avatar (for clustering logic)
+     */
+    showAvatar: _angular_core.InputSignal<boolean>;
+    /**
+     * Cluster position for border radius styling
+     */
+    clusterPosition: _angular_core.InputSignal<"single" | "first" | "middle" | "last">;
     /**
      * Whether to show read receipt (only for user's messages)
      */
@@ -1264,6 +1631,10 @@ declare class DsMobileMessageBubbleComponent {
      * Whether the message is clickable
      */
     clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether this is a newly sent message (triggers appearance animation)
+     */
+    isNewMessage: _angular_core.InputSignal<boolean>;
     /**
      * Emits when attachment is clicked
      */
@@ -1286,6 +1657,10 @@ declare class DsMobileMessageBubbleComponent {
     private readonly LONG_PRESS_DURATION;
     private readonly MOVE_THRESHOLD;
     private clickStartTime;
+    /**
+     * Tap animation state
+     */
+    isTapped: boolean;
     /**
      * Handle attachment click
      */
@@ -1311,7 +1686,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; }; "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>;
+    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; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "clusterPosition": { "alias": "clusterPosition"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isNewMessage": { "alias": "isNewMessage"; "required": false; "isSignal": true; }; }, { "attachmentClick": "attachmentClick"; "longPress": "longPress"; "messageClick": "messageClick"; }, never, never, true, never>;
 }
 
 /**
@@ -2244,256 +2619,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>;
 }
 
-/**
- * DsMobileCardInlineComponent
- *
- * A versatile, always-interactive inline card component for standalone or small-group usage.
- * Designed for tappable card-like elements such as file attachments, contact cards, etc.
- * Not intended for long scrolling lists - use ds-mobile-list-item for that purpose.
- *
- * Features:
- * - Always interactive/tappable (unless disabled)
- * - Two layout variants: default (column) and compact (row)
- * - Flexible content projection with leading/main/trailing slots
- * - Consistent styling with rounded corners and neutral background
- * - Built-in hover and active states
- * - Accessibility features (role, tabindex, aria attributes)
- *
- * @example
- * ```html
- * <!-- Default variant (column layout) -->
- * <ds-mobile-card-inline
- *   [variant]="'default'"
- *   (cardClick)="handleClick()">
- *
- *   <div content-leading>
- *     <ds-avatar initials="JD" />
- *   </div>
- *
- *   <div content-main>
- *     <div class="title">Document Title</div>
- *     <div class="subtitle">PDF · 1.2 MB</div>
- *   </div>
- *
- *   <ds-icon content-trailing name="remixArrowRightSLine" />
- * </ds-mobile-card-inline>
- *
- * <!-- Compact variant (row layout) -->
- * <ds-mobile-card-inline
- *   [variant]="'compact'"
- *   (cardClick)="handleClick()">
- *
- *   <ds-avatar content-leading size="sm" />
- *
- *   <div content-main>
- *     <span class="name">File.pdf</span>
- *     <span class="size">245 KB</span>
- *   </div>
- *
- *   <ds-icon content-trailing name="remixArrowRightSLine" />
- * </ds-mobile-card-inline>
- *
- * <!-- Disabled state -->
- * <ds-mobile-card-inline [disabled]="true">
- *   <div content-main>Disabled card</div>
- * </ds-mobile-card-inline>
- * ```
- */
-declare class DsMobileCardInlineComponent {
-    /**
-     * Display variant
-     * - 'default' - Column layout with standard padding (gap: 12px, padding: 10px 12px)
-     * - 'compact' - Row layout with reduced padding (gap: 8px, padding: 10px)
-     */
-    variant: _angular_core.InputSignal<"default" | "compact">;
-    /**
-     * Whether the card is disabled
-     * Disables all interactions and reduces opacity
-     */
-    disabled: _angular_core.InputSignal<boolean>;
-    /**
-     * Emits when the card is clicked (if not disabled)
-     */
-    cardClick: _angular_core.OutputEmitterRef<void>;
-    /**
-     * Handle click events
-     */
-    handleClick(event: Event): void;
-    /**
-     * Handle keyboard events (Enter/Space)
-     */
-    handleKeyDown(event: KeyboardEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineComponent, "ds-mobile-card-inline", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, never>;
-}
-
-/**
- * DsMobileCardInlineBannerComponent
- *
- * Specialized interactive component for displaying notification banners.
- * Used to show unread message notifications above inquiry details.
- *
- * Features:
- * - Neutral background matching file/contact cards
- * - Avatar icon with message symbol
- * - Title and timestamp
- * - Unread count badge
- * - Chevron for navigation indication
- *
- * @example
- * ```html
- * <ds-mobile-card-inline-banner
- *   [title]="'New messages'"
- *   [timestamp]="'2 min ago'"
- *   [unreadCount]="3"
- *   (bannerClick)="navigateToMessages()">
- * </ds-mobile-card-inline-banner>
- * ```
- */
-declare class DsMobileCardInlineBannerComponent {
-    /**
-     * Banner title (e.g., "New messages", "Unread messages")
-     */
-    title: _angular_core.InputSignal<string>;
-    /**
-     * Timestamp text (e.g., "2 min ago", "Just now")
-     */
-    timestamp: _angular_core.InputSignal<string>;
-    /**
-     * Number of unread items (optional, shows badge if > 0)
-     */
-    unreadCount: _angular_core.InputSignal<number>;
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout: _angular_core.InputSignal<"default" | "compact">;
-    /**
-     * Emits when the banner is clicked
-     */
-    bannerClick: _angular_core.OutputEmitterRef<void>;
-    handleBannerClick(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineBannerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineBannerComponent, "ds-mobile-card-inline-banner", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "unreadCount": { "alias": "unreadCount"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, { "bannerClick": "bannerClick"; }, never, never, true, never>;
-}
-
-/**
- * DsMobileCardInlineContactComponent
- *
- * Specialized interactive component for displaying contacts.
- * Displays contact name with avatar initials and metadata (person name + phone number).
- * Similar styling to file attachments with rounded corners and hover states.
- *
- * @example
- * ```html
- * <ds-mobile-card-inline-contact
- *   [name]="'Mortensen & Søn ApS'"
- *   [initials]="'M'"
- *   [contactPerson]="'John Mortensen'"
- *   [phoneNumber]="'+45 12 34 56 78'"
- *   [clickable]="true"
- *   (contactClick)="openContact()">
- * </ds-mobile-card-inline-contact>
- * ```
- */
-declare class DsMobileCardInlineContactComponent {
-    /**
-     * Contact/company name
-     */
-    name: _angular_core.InputSignal<string>;
-    /**
-     * Avatar initials (usually 1-2 letters)
-     */
-    initials: _angular_core.InputSignal<string>;
-    /**
-     * Contact person name (optional)
-     */
-    contactPerson: _angular_core.InputSignal<string>;
-    /**
-     * Phone number (optional)
-     */
-    phoneNumber: _angular_core.InputSignal<string>;
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout: _angular_core.InputSignal<"default" | "compact">;
-    /**
-     * Whether the contact item is clickable
-     */
-    clickable: _angular_core.InputSignal<boolean>;
-    /**
-     * Whether to show chevron icon
-     */
-    showChevron: _angular_core.InputSignal<boolean>;
-    /**
-     * Emits when the contact item is clicked (if clickable)
-     */
-    contactClick: _angular_core.OutputEmitterRef<void>;
-    handleContactClick(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineContactComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineContactComponent, "ds-mobile-card-inline-contact", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "contactPerson": { "alias": "contactPerson"; "required": false; "isSignal": true; }; "phoneNumber": { "alias": "phoneNumber"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; }, { "contactClick": "contactClick"; }, never, never, true, never>;
-}
-
-/**
- * DsMobileCardInlineFileComponent
- *
- * File attachment display for various document types.
- * Shows file info card with icon, filename, and file size.
- * Supports PDF and generic document formats.
- * Emits click event to open file in viewer.
- *
- * @example
- * ```html
- * <ds-mobile-card-inline-file
- *   [fileName]="'Document.pdf'"
- *   [fileSize]="'1.2 MB'"
- *   [variant]="'pdf'"
- *   [layout]="'compact'"
- *   (fileClick)="openFile()">
- * </ds-mobile-card-inline-file>
- * ```
- */
-declare class DsMobileCardInlineFileComponent {
-    /**
-     * File name
-     */
-    fileName: _angular_core.InputSignal<string>;
-    /**
-     * File size display (e.g., "1.2 MB")
-     */
-    fileSize: _angular_core.InputSignal<string>;
-    /**
-     * File type variant
-     * - 'pdf' - PDF document (red icon)
-     * - 'doc' - Generic document (blue icon)
-     */
-    variant: _angular_core.InputSignal<"pdf" | "doc">;
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout: _angular_core.InputSignal<"default" | "compact">;
-    /**
-     * Emits when the file attachment is clicked
-     */
-    fileClick: _angular_core.OutputEmitterRef<void>;
-    /**
-     * Get the appropriate icon name based on variant
-     */
-    getIconName(): string;
-    /**
-     * Get the file type label based on variant
-     */
-    getFileTypeLabel(): string;
-    handleClick(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineFileComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineFileComponent, "ds-mobile-card-inline-file", never, { "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "fileSize": { "alias": "fileSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, { "fileClick": "fileClick"; }, never, never, true, never>;
-}
-
 /**
  * Media file types supported by the lightbox
  */
@@ -3236,6 +3361,10 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * ResizeObserver for tracking fixed bottom height
      */
     private fixedBottomObserver?;
+    /**
+     * Flag to prevent ResizeObserver from updating padding during keyboard animations
+     */
+    private isKeyboardAnimating;
     /**
      * Loading state - when true, shows loading indicator
      * @default false
@@ -3277,6 +3406,17 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * Emitted when modal is closed
      */
     closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when keyboard is about to show
+     * Provides keyboard height in pixels
+     * Child components can listen to this to react to keyboard appearance
+     */
+    keyboardWillShow: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Emitted when keyboard is about to hide
+     * Child components can listen to this to react to keyboard dismissal
+     */
+    keyboardWillHide: _angular_core.OutputEmitterRef<void>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
@@ -3286,7 +3426,8 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
     close(): void;
     /**
      * Set up keyboard event listeners to adjust component position
-     * Uses --keyboard-height for fixed bottom composer and adds padding to scroll area
+     * Uses --keyboard-height for fixed bottom composer and adds padding to scroll area.
+     * Adjusts scroll position so content smoothly follows the keyboard up (like Messenger/Telegram).
      * @protected
      */
     protected setupKeyboardListeners(): void;
@@ -3302,7 +3443,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      */
     protected cleanupKeyboardListeners(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileModalBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
 }
 
 /**
@@ -3372,7 +3513,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
  * </ds-mobile-modal-base>
  * ```
  */
-declare class DsMobileModalBaseComponent extends MobileModalBase implements AfterContentInit {
+declare class DsMobileModalBaseComponent extends MobileModalBase implements OnInit, AfterContentInit, OnDestroy {
     private cdr;
     /**
      * Reference to ion-content for keyboard handling
@@ -3407,7 +3548,9 @@ declare class DsMobileModalBaseComponent extends MobileModalBase implements Afte
     hasCustomLoadingState: boolean;
     hasCustomErrorState: boolean;
     constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /**
      * Determine if header should be shown based on showHeader input and content detection
      */
@@ -3578,18 +3721,6 @@ declare class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit
         originalContent: string;
         timestamp: string;
     } | null>;
-    showMentionMenu: _angular_core.WritableSignal<boolean>;
-    mentionQuery: _angular_core.WritableSignal<string>;
-    availableUsers: _angular_core.Signal<{
-        name: string;
-        initials: string;
-        role: string;
-    }[]>;
-    filteredUsers: _angular_core.Signal<{
-        name: string;
-        initials: string;
-        role: string;
-    }[]>;
     constructor(lightbox: DsMobileLightboxService, bottomSheet: DsMobileBottomSheetService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -3602,13 +3733,9 @@ declare class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit
      */
     focusCommentInput(): void;
     /**
-     * Handle input changes and detect @ mentions
+     * Handle input changes for auto-resize
      */
     handleInput(event: Event): void;
-    /**
-     * Select a user from mention menu - show as reply indicator instead of inline mention
-     */
-    selectMention(userName: string): void;
     /**
      * Handle reply to a comment
      */
@@ -3819,6 +3946,7 @@ interface ChatMessage {
     isOwnMessage: boolean;
     attachments?: ChatAttachment[];
     fileAttachments?: AttachmentData[];
+    isNewMessage?: boolean;
 }
 /**
  * Message group interface for grouped timestamp display
@@ -3828,6 +3956,14 @@ interface MessageGroup {
     displayTimestamp: string;
     messages: ChatMessage[];
 }
+/**
+ * Extended message interface with display metadata
+ */
+interface MessageDisplay extends ChatMessage {
+    showAvatar: boolean;
+    clusterPosition: 'single' | 'first' | 'middle' | 'last';
+    isNewMessage?: boolean;
+}
 /**
  * Chat participant interface
  */
@@ -3838,6 +3974,9 @@ interface ChatParticipant {
     avatarInitials?: string;
     avatarType?: 'initials' | 'photo' | 'icon';
     avatarSrc?: string;
+    badge?: string;
+    verified?: boolean;
+    lastActive?: string;
 }
 /**
  * Chat modal data interface
@@ -3955,6 +4094,10 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
      * Error state - when set, shows error message
      */
     error?: string;
+    /**
+     * Back button click event
+     */
+    back: EventEmitter<void>;
     participant: _angular_core.WritableSignal<ChatParticipant>;
     messages: _angular_core.WritableSignal<ChatMessage[]>;
     currentUserInitials: _angular_core.WritableSignal<string>;
@@ -3965,6 +4108,10 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
      * Selected message ID for showing timestamp
      */
     selectedMessageId: _angular_core.WritableSignal<string | null>;
+    /**
+     * Track if keyboard is currently visible
+     */
+    private isKeyboardVisible;
     /**
      * Timeout for auto-hiding timestamp
      */
@@ -3973,9 +4120,30 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
      * Computed signal for grouped messages with timestamp headers
      */
     messageGroups: _angular_core.Signal<MessageGroup[]>;
+    /**
+     * Computed signal for messages with display metadata (avatar visibility)
+     */
+    messagesWithDisplay: _angular_core.Signal<(MessageGroup & {
+        messages: MessageDisplay[];
+    })[]>;
     constructor(lightboxService: DsMobileLightboxService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    /**
+     * Handle back button click
+     */
+    handleBack(): void;
+    /**
+     * Handle keyboard show event from base modal
+     * Only scrolls to bottom if user is already near the bottom, otherwise lets
+     * the natural padding expansion push content up (like Messenger/Signal/Telegram)
+     */
+    handleKeyboardShow(keyboardHeight: number): void;
+    /**
+     * Check if scroll position is near the bottom
+     * Used to determine if we should auto-scroll when keyboard appears
+     */
+    private isNearBottom;
     /**
      * Scroll to bottom of messages
      */
@@ -3998,6 +4166,16 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
      * Handle composer attachment button click
      */
     handleComposerAttachmentClick(): void;
+    /**
+     * Handle attachments changed (added or removed)
+     * ResizeObserver automatically updates padding, which naturally pushes content up.
+     * Only scroll to bottom if user is already viewing the latest messages.
+     */
+    handleAttachmentsChanged(): void;
+    /**
+     * Handle content area click - dismiss keyboard when tapping messages
+     */
+    handleContentClick(): void;
     /**
      * Get file variant for card-inline-file component
      */
@@ -4016,12 +4194,18 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
     handleMessageLongPress(message: ChatMessage): void;
     /**
      * Handle message click to show/hide timestamp
+     * Only shows timestamp if keyboard is already hidden
      */
     handleMessageClick(messageId: string): void;
     /**
      * Format message timestamp for display (EU 24-hour format, Danish)
      */
     formatMessageTimestamp(date: Date): string;
+    /**
+     * Get initial timestamp for empty chat state
+     * Returns current time formatted with smart date display
+     */
+    getInitialTimestamp(): string;
     /**
      * Group messages by time threshold
      * Messages within the threshold and on the same day are grouped together
@@ -4036,8 +4220,14 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
      * Uses 24-hour EU time format with Danish locale
      */
     private formatGroupTimestamp;
+    /**
+     * Add display metadata to message groups
+     * Determines which messages should show avatars (only last in cluster)
+     * and calculates cluster positions for border radius styling
+     */
+    private addDisplayMetadata;
     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>;
+    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; }; }, { "back": "back"; }, never, never, true, never>;
 }
 
 /**
@@ -4699,7 +4889,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     hasError: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"search" | "text" | "url" | "numeric" | "email" | "tel" | undefined>;
+    inputmode: _angular_core.InputSignal<"search" | "text" | "numeric" | "url" | "email" | "tel" | undefined>;
     autoClearError: _angular_core.InputSignal<boolean>;
     validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
     valueChange: _angular_core.OutputEmitterRef<string>;
@@ -4735,6 +4925,8 @@ declare class DsTextInputComponent implements ControlValueAccessor {
  * Features:
  * - Configurable positioning (bottom-right, bottom-left, bottom-center)
  * - Uses design system theming variables
+ * - Dynamically calculates position above tab bar (including safe areas)
+ * - Maintains consistent 20px gap from tab bar
  * - Handles iOS safe areas
  * - Accessible with ARIA labels
  * - Smooth entrance animation
@@ -4749,7 +4941,10 @@ declare class DsTextInputComponent implements ControlValueAccessor {
  * </ds-mobile-fab>
  * ```
  */
-declare class DsMobileFabComponent {
+declare class DsMobileFabComponent implements AfterViewInit, OnDestroy {
+    private elementRef;
+    private platform;
+    private resizeObserver?;
     /**
      * Icon name from the design system icon library
      * @default 'remixAddLine'
@@ -4780,10 +4975,21 @@ declare class DsMobileFabComponent {
      * Emitted when the FAB is clicked
      */
     fabClick: _angular_core.OutputEmitterRef<void>;
+    ngAfterViewInit(): void;
+    /**
+     * Calculate the FAB position dynamically based on actual tab bar height
+     */
+    private calculatePosition;
+    /**
+     * Setup ResizeObserver to recalculate position when tab bar size changes
+     * (e.g., when device rotates or safe area changes)
+     */
+    private setupResizeObserver;
     /**
      * Handle button click
      */
     handleClick(): void;
+    ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFabComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFabComponent, "ds-mobile-fab", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "fabClick": "fabClick"; }, never, never, true, never>;
 }
@@ -4873,6 +5079,28 @@ declare class WhitelabelService {
      * Convert hex color to RGB values
      */
     private hexToRgb;
+    /**
+     * Generate a hover state color by applying a black overlay
+     * This simulates the effect of overlaying #000000 with 10% opacity
+     *
+     * @param baseColor - Hex color to overlay on (e.g., '#6B5FF5')
+     * @param overlayColor - Overlay color (default: '#000000' for darkening)
+     * @param overlayAlpha - Opacity of overlay (0-1, default: 0.1 = 10%)
+     * @returns Hex color with overlay applied
+     *
+     * @example
+     * generateHoverColor('#6B5FF5') // Returns darker purple for hover state
+     * generateHoverColor('#FF0000', '#FFFFFF', 0.2) // Lighten red by 20%
+     */
+    private generateHoverColor;
+    /**
+     * Generate an active/pressed state color (darker than hover)
+     * Uses 20% black overlay for a more pronounced pressed effect
+     *
+     * @param baseColor - Hex color to overlay on
+     * @returns Hex color for active/pressed state
+     */
+    private generateActiveColor;
     /**
      * Apply colors to CSS custom properties and native StatusBar
      * This updates the actual CSS variables used throughout the app
@@ -4922,6 +5150,56 @@ declare class DsAvatarWithBadgeComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsAvatarWithBadgeComponent, "ds-avatar-with-badge", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "src": { "alias": "src"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * DsMobileEmptyStateComponent
+ *
+ * Reusable empty state component for displaying when there's no content.
+ * Used in chat modals, comment sections, and other list-based views.
+ *
+ * Features:
+ * - Optional image display
+ * - Customizable title and description
+ * - Consistent styling across the app
+ * - Flexible image sizing
+ *
+ * @example
+ * ```html
+ * <!-- With image -->
+ * <ds-mobile-empty-state
+ *   [imageSrc]="'/Assets/Empty state-chat.png'"
+ *   [imageAlt]="'No messages'"
+ *   [title]="'Ingen beskeder endnu'"
+ *   [description]="'Start samtalen ved at sende en besked'">
+ * </ds-mobile-empty-state>
+ *
+ * <!-- Without image -->
+ * <ds-mobile-empty-state
+ *   [title]="'Ingen resultater'"
+ *   [description]="'Prøv at justere dine søgekriterier'">
+ * </ds-mobile-empty-state>
+ * ```
+ */
+declare class DsMobileEmptyStateComponent {
+    /**
+     * Source URL for the empty state image (optional)
+     */
+    imageSrc: _angular_core.InputSignal<string>;
+    /**
+     * Alt text for the image
+     */
+    imageAlt: _angular_core.InputSignal<string>;
+    /**
+     * Title text for the empty state
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Description text for the empty state (optional)
+     */
+    description: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileEmptyStateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileEmptyStateComponent, "ds-mobile-empty-state", never, { "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * User service for managing current user data globally
  */
@@ -4955,6 +5233,7 @@ declare class UserService {
  * Unified data structures for community posts
  */
 interface Comment {
+    id?: string;
     authorName: string;
     authorRole: string;
     timestamp: string;
@@ -5104,7 +5383,9 @@ declare class MobileHomePageComponent {
     userService: UserService;
     constructor(navCtrl: NavController, userService: UserService);
     handleRefresh(event: any): void;
-    navigateToDetail(): void;
+    handlePostClick(): void;
+    handleContactClick(contactType: string): void;
+    handleFileClick(fileType: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHomePageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHomePageComponent, "app-home-page", never, {}, {}, never, never, true, never>;
 }
@@ -5122,7 +5403,7 @@ declare class MobileInquiriesPageComponent {
     private navCtrl;
     private newInquiryModal;
     constructor(userService: UserService, navCtrl: NavController, newInquiryModal: DsMobileNewInquiryModalService);
-    filterStatus: _angular_core.WritableSignal<"open" | "closed" | "all">;
+    filterStatus: _angular_core.WritableSignal<"all" | "open" | "closed">;
     tabItems: InlineTabItem[];
     inquiries: _angular_core.WritableSignal<Inquiry[]>;
     filteredInquiries: _angular_core.Signal<Inquiry[]>;
@@ -5132,6 +5413,7 @@ declare class MobileInquiriesPageComponent {
     getInquiryIcon(category: string): string;
     openInquiryDetail(inquiryId: string): void;
     showInquiryActions(inquiryId: string): void;
+    handleRefresh(event: any): 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>;
@@ -5197,7 +5479,7 @@ declare class MobileTabsExampleComponent implements OnInit {
      * so it will be used by both ds-mobile-tab-bar and ds-mobile-page-main components
      * throughout the entire application.
      */
-    profileMenuItems: ActionGroup[];
+    get profileMenuItems(): ActionGroup[];
     /**
      * Handle profile menu action selection.
      * The tab bar component handles the UI (opening/closing menu),
@@ -5319,5 +5601,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, 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 };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, 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, DsMobileProfileActionsSheetComponent, 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, DropdownAlign, DropdownPosition, DsMobileDropdownItem, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, Language, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };