@propbinder/mobile-design 0.0.1

package/index.d.ts

@@ -0,0 +1,2860 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, EventEmitter, OnInit, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';
+import { IonContent, NavController, ModalController, GestureController } from '@ionic/angular/standalone';
+import { ImpactStyle } from '@capacitor/haptics';
+import { Router } from '@angular/router';
+import { BreakpointObserver } from '@angular/cdk/layout';
+
+/**
+ * Content width preset values
+ * - 'narrow' - 640px max width (reading content)
+ * - 'standard' - 1024px max width (default)
+ * - 'wide' - 1440px max width (dashboards)
+ * - 'full' - 100% width (no max)
+ */
+type ContentWidth = 'narrow' | 'standard' | 'wide' | 'full';
+/**
+ * MobilePageBase
+ *
+ * Shared base class for mobile page components (ds-mobile-page-main, ds-mobile-page-details).
+ * Provides consistent content width control across all page types.
+ *
+ * **Padding Strategy:**
+ * - All pages use 20px horizontal padding globally
+ * - For tappable lists, use negative margins (e.g., margin: 0 -8px) to create full-width sections
+ * - This approach simplifies padding management and provides consistency
+ *
+ * @internal This is a base class and should not be used directly.
+ */
+declare abstract class MobilePageBase {
+    /**
+     * Maximum content width (desktop only)
+     *
+     * **Options:**
+     * - `'narrow'` (640px) - For reading content, forms
+     * - `'standard'` (1024px) - Default for most pages
+     * - `'wide'` (1440px) - For dashboards, tables
+     * - `'full'` - No max-width constraint
+     *
+     * **Note:** Only applies on desktop (>= 768px). Mobile is always full width.
+     *
+     * @default 'standard'
+     *
+     * @example
+     * ```html
+     * <!-- Narrow reading layout -->
+     * <ds-mobile-page-main title="Article" contentWidth="narrow">
+     *
+     * <!-- Wide dashboard -->
+     * <ds-mobile-page-main title="Dashboard" contentWidth="wide">
+     * ```
+     */
+    contentWidth: _angular_core.InputSignal<ContentWidth>;
+    /**
+     * Resolved max-width value (computed)
+     * Maps preset values to pixel values
+     *
+     * @internal
+     */
+    protected maxWidthValue: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobilePageBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobilePageBase, never, never, { "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobilePageMainComponent
+ *
+ * A complete mobile page layout for main/tab pages with:
+ * - Fixed header with logomark + title + avatar
+ * - Purple expandable header section (scrolls with content)
+ * - White rounded content wrapper
+ * - Pull-to-refresh support
+ * - Auto scroll title fade-in
+ *
+ * @example
+ * ```html
+ * <!-- Simple page -->
+ * <ds-mobile-page-main
+ *   title="Inquiries"
+ *   [avatarInitials]="'JD'">
+ *   <div class="page-content">
+ *     <!-- Your content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ *
+ * <!-- Page with custom header content -->
+ * <ds-mobile-page-main
+ *   title="Home"
+ *   headerTitle="Welcome, Lars"
+ *   headerSubtitle="Your rental property at a glance."
+ *   [avatarInitials]="'L'">
+ *
+ *   <div header-content class="property-tiles">
+ *     <!-- Custom header content like tiles -->
+ *   </div>
+ *
+ *   <div class="page-content">
+ *     <!-- Main page content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ * ```
+ */
+declare class DsMobilePageMainComponent extends MobilePageBase implements AfterViewInit {
+    private elementRef;
+    ionContent?: IonContent;
+    private platform;
+    private modalController;
+    private router;
+    isNativePlatform: _angular_core.Signal<boolean>;
+    title: _angular_core.InputSignal<string>;
+    headerTitle: _angular_core.InputSignal<string>;
+    headerSubtitle: _angular_core.InputSignal<string>;
+    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarInitials: _angular_core.InputSignal<string>;
+    avatarSrc: _angular_core.InputSignal<string>;
+    avatarIconName: _angular_core.InputSignal<string>;
+    showRefresh: _angular_core.InputSignal<boolean>;
+    showCondensedHeader: _angular_core.InputSignal<boolean>;
+    scrollThreshold: _angular_core.InputSignal<number>;
+    headerFadeDistance: _angular_core.InputSignal<number>;
+    avatarClick: _angular_core.OutputEmitterRef<void>;
+    refresh: _angular_core.OutputEmitterRef<any>;
+    scroll: _angular_core.OutputEmitterRef<any>;
+    constructor(elementRef: ElementRef);
+    ngAfterViewInit(): void;
+    /**
+     * Handle avatar click - opens profile actions bottom sheet
+     */
+    handleAvatarClick(): Promise<void>;
+    /**
+     * Handle scroll events
+     * - Shows title in fixed header when scrolled past threshold
+     * - Fades out expandable header content based on scroll position
+     * - Emits scroll event for custom handling
+     */
+    handleScroll(event: any): void;
+    /**
+     * Handle pull-to-refresh
+     * Emits refresh event - parent should call event.target.complete()
+     */
+    handleRefresh(event: any): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePageMainComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePageMainComponent, "ds-mobile-page-main", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerSubtitle": { "alias": "headerSubtitle"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "showCondensedHeader": { "alias": "showCondensedHeader"; "required": false; "isSignal": true; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; "isSignal": true; }; "headerFadeDistance": { "alias": "headerFadeDistance"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["[header-content]", "*"], true, never>;
+}
+
+/**
+ * DsMobilePageDetailsComponent
+ *
+ * A mobile page layout for detail/drill-down pages with:
+ * - Back button header (mobile + desktop variants)
+ * - White background content area
+ * - Responsive padding
+ *
+ * @example
+ * ```html
+ * <!-- Simple detail page -->
+ * <ds-mobile-page-details
+ *   title="Property Details"
+ *   (back)="goBack()">
+ *   <div class="page-content">
+ *     <!-- Your content -->
+ *   </div>
+ * </ds-mobile-page-details>
+ *
+ * <!-- With default back route -->
+ * <ds-mobile-page-details
+ *   title="Invoice Details"
+ *   backRoute="/invoices">
+ *   <div class="page-content">
+ *     <!-- Your content -->
+ *   </div>
+ * </ds-mobile-page-details>
+ * ```
+ */
+declare class DsMobilePageDetailsComponent extends MobilePageBase {
+    private navCtrl;
+    private elementRef;
+    title: _angular_core.InputSignal<string>;
+    backRoute: _angular_core.InputSignal<string>;
+    back: _angular_core.OutputEmitterRef<void>;
+    constructor(navCtrl: NavController, elementRef: ElementRef);
+    /**
+     * Handle back navigation
+     *
+     * By default, navigates using the provided backRoute or browser back.
+     * Parent components can listen to the (back) event to override this behavior.
+     *
+     * @example
+     * ```html
+     * <!-- Default behavior: uses backRoute or browser back -->
+     * <ds-mobile-page-details
+     *   title="Details"
+     *   backRoute="/home">
+     * </ds-mobile-page-details>
+     *
+     * <!-- Custom behavior: parent handles navigation -->
+     * <ds-mobile-page-details
+     *   title="Details"
+     *   (back)="customBackHandler()">
+     * </ds-mobile-page-details>
+     * ```
+     */
+    handleBack(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePageDetailsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePageDetailsComponent, "ds-mobile-page-details", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "backRoute": { "alias": "backRoute"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, ["*"], true, never>;
+}
+
+/**
+ * DsMobileContentComponent
+ *
+ * Main content container for mobile pages with flexible layout options.
+ * Provides consistent spacing and layout patterns.
+ *
+ * @example
+ * ```html
+ * <!-- Default: stacked layout -->
+ * <ds-mobile-content>
+ *   <ds-mobile-content-section>...</ds-mobile-content-section>
+ *   <ds-mobile-content-section>...</ds-mobile-content-section>
+ * </ds-mobile-content>
+ *
+ * <!-- Grid layout -->
+ * <ds-mobile-content layout="grid-2">
+ *   <ds-mobile-content-section>...</ds-mobile-content-section>
+ *   <ds-mobile-content-section>...</ds-mobile-content-section>
+ * </ds-mobile-content>
+ * ```
+ */
+declare class DsMobileContentComponent {
+    /**
+     * Layout mode for content sections
+     * - 'stacked' - Vertical stack with 32px gap (default)
+     * - 'grid-2' - 2 column grid
+     * - 'grid-3' - 3 column grid (stacks on mobile)
+     */
+    layout: _angular_core.InputSignal<"stacked" | "grid-2" | "grid-3">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileContentComponent, "ds-mobile-content", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * DsMobileContentSectionComponent
+ *
+ * Section within mobile content with optional header.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-content-section>
+ *   <section-header width="half"></section-header>
+ *   <content-row>
+ *     <div class="grey-box"></div>
+ *   </content-row>
+ * </ds-mobile-content-section>
+ * ```
+ */
+declare class DsMobileContentSectionComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileContentSectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileContentSectionComponent, "ds-mobile-content-section", never, {}, {}, never, ["section-header", "*"], true, never>;
+}
+/**
+ * SectionHeaderComponent
+ *
+ * Semantic placeholder header for content sections.
+ * Used for prototyping/placeholders.
+ */
+declare class SectionHeaderComponent {
+    /** Width of the header placeholder */
+    width: _angular_core.InputSignal<"full" | "half" | "third">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionHeaderComponent, "section-header", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * ContentRowComponent
+ *
+ * Horizontal row container for content items.
+ */
+declare class ContentRowComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentRowComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentRowComponent, "content-row", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * DsMobileHeaderContentComponent
+ *
+ * Container for header content tiles - displays tiles in a responsive grid.
+ * Used within the expandable header section of mobile pages to show
+ * summary information like property details, statistics, etc.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-header-content header-content>
+ *   <ds-mobile-header-content-tile>
+ *     <tile-icon>
+ *       <ds-icon name="remixHome4Line" />
+ *     </tile-icon>
+ *     <tile-content>
+ *       <tile-label>Area</tile-label>
+ *       <tile-value>120 m²</tile-value>
+ *     </tile-content>
+ *   </ds-mobile-header-content-tile>
+ * </ds-mobile-header-content>
+ * ```
+ */
+declare class DsMobileHeaderContentComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHeaderContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHeaderContentComponent, "ds-mobile-header-content", never, {}, {}, never, ["ds-mobile-header-content-tile"], true, never>;
+}
+/**
+ * DsMobileHeaderContentTileComponent
+ *
+ * Individual tile for displaying summary information in the header.
+ * Styled with purple background to match the mobile header theme.
+ *
+ * Must contain:
+ * - `<tile-icon>` - Icon container (optional)
+ * - `<tile-content>` - Label and value container
+ *
+ * @example
+ * ```html
+ * <ds-mobile-header-content-tile>
+ *   <tile-icon>
+ *     <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
+ *   </tile-icon>
+ *   <tile-content>
+ *     <tile-label>Rooms</tile-label>
+ *     <tile-value>3 rooms</tile-value>
+ *   </tile-content>
+ * </ds-mobile-header-content-tile>
+ * ```
+ */
+declare class DsMobileHeaderContentTileComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHeaderContentTileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHeaderContentTileComponent, "ds-mobile-header-content-tile", never, {}, {}, never, ["tile-icon", "tile-content"], true, never>;
+}
+/**
+ * TileIconComponent
+ *
+ * Semantic slot for tile icon with dark purple background.
+ * Use within `ds-mobile-header-content-tile`.
+ */
+declare class TileIconComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileIconComponent, "tile-icon", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * TileContentComponent
+ *
+ * Semantic slot for tile content containing label and value.
+ * Use within `ds-mobile-header-content-tile`.
+ *
+ * Contains:
+ * - `<tile-label>` - Small label text
+ * - `<tile-value>` - Large value text
+ */
+declare class TileContentComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileContentComponent, "tile-content", never, {}, {}, never, ["tile-label", "tile-value"], true, never>;
+}
+/**
+ * TileLabelComponent
+ *
+ * Label text for tile content.
+ * Use within `tile-content` inside `ds-mobile-header-content-tile`.
+ */
+declare class TileLabelComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileLabelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileLabelComponent, "tile-label", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * TileValueComponent
+ *
+ * Value text for tile content.
+ * Use within `tile-content` inside `ds-mobile-header-content-tile`.
+ */
+declare class TileValueComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileValueComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileValueComponent, "tile-value", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * DsMobilePostCardComponent
+ *
+ * Individual post card for community feed and post details.
+ * Displays user posts with avatar, content, media, and action buttons.
+ * Follows Threads-inspired design with clean layout and interactions.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-post-card
+ *   [authorName]="'John Doe'"
+ *   [authorRole]="'Tenant'"
+ *   [timestamp]="'2h ago'"
+ *   [avatarInitials]="'JD'"
+ *   [clickable]="true"
+ *   (postClick)="openPost()">
+ *
+ *   <post-content>
+ *     <post-text>This is a sample post...</post-text>
+ *   </post-content>
+ *
+ *   <post-actions>
+ *     <action-like [active]="true" count="42" />
+ *     <action-comment count="12" />
+ *     <action-share />
+ *   </post-actions>
+ * </ds-mobile-post-card>
+ * ```
+ */
+declare class DsMobilePostCardComponent {
+    /**
+     * Author's display name
+     */
+    authorName: _angular_core.InputSignal<string>;
+    /**
+     * Author's role (e.g., "Tenant", "Property Manager")
+     */
+    authorRole: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp text (e.g., "2h ago", "1d ago")
+     */
+    timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Avatar initials (for initials type)
+     */
+    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>;
+    /**
+     * Icon name (for icon type avatars)
+     */
+    avatarIconName: _angular_core.InputSignal<string>;
+    /**
+     * Show badge on avatar (e.g., for property managers)
+     */
+    showBadge: _angular_core.InputSignal<boolean>;
+    /**
+     * Display variant
+     * - 'feed' - Standard feed display (default)
+     * - 'detail' - Full detail view
+     * - 'compact' - Compact display for nested/related posts
+     */
+    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    /**
+     * Whether the post card is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the post card is clicked (if clickable)
+     */
+    postClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the comment button is clicked
+     */
+    commentClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the post card 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;
+    handlePostClick(event: Event): void;
+    handleCommentClick(): 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<DsMobilePostCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostCardComponent, "ds-mobile-post-card", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
+}
+/**
+ * PostContentComponent
+ *
+ * Main content section of the post.
+ *
+ * Contains:
+ * - `<post-text>` - Text content
+ * - `<post-media>` - Optional images/videos
+ * - `<post-attachments>` - Optional file attachments
+ */
+declare class PostContentComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostContentComponent, "post-content", never, {}, {}, never, ["post-text", "post-media", "ds-mobile-inline-photo", "post-attachments"], true, never>;
+}
+/**
+ * PostTextComponent
+ *
+ * Text content of the post.
+ */
+declare class PostTextComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostTextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostTextComponent, "post-text", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * PostMediaComponent
+ *
+ * Media container for images/videos.
+ */
+declare class PostMediaComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostMediaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostMediaComponent, "post-media", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * PostAttachmentsComponent
+ *
+ * Container for file attachments, links, etc.
+ */
+declare class PostAttachmentsComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostAttachmentsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostAttachmentsComponent, "post-attachments", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * PostActionsComponent
+ *
+ * Action buttons container (like, comment, share).
+ *
+ * Contains:
+ * - `<action-like>` - Like button with count
+ * - `<action-comment>` - Comment button with count
+ * - `<action-share>` - Share button
+ */
+declare class PostActionsComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostActionsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostActionsComponent, "post-actions", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * ActionLikeComponent
+ *
+ * Like action button with count display and animated heart icon.
+ */
+declare class ActionLikeComponent {
+    /**
+     * Whether the like is active (user has liked)
+     * Using model() for two-way binding
+     */
+    active: _angular_core.ModelSignal<boolean>;
+    /**
+     * Number of likes
+     * Using model() for two-way binding
+     */
+    count: _angular_core.ModelSignal<number>;
+    /**
+     * Emits when the like button is clicked
+     */
+    likeClick: _angular_core.OutputEmitterRef<{
+        active: boolean;
+        count: number;
+    }>;
+    /**
+     * Signal to control pulse animation
+     */
+    isPulsing: _angular_core.WritableSignal<boolean>;
+    handleClick(event: Event): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionLikeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionLikeComponent, "action-like", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "count": "countChange"; "likeClick": "likeClick"; }, never, never, true, never>;
+}
+/**
+ * ActionCommentComponent
+ *
+ * Comment action button with count display.
+ */
+declare class ActionCommentComponent {
+    /**
+     * Number of comments
+     */
+    count: _angular_core.InputSignal<number>;
+    /**
+     * Emits when the comment button is clicked
+     */
+    commentClick: _angular_core.OutputEmitterRef<void>;
+    handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionCommentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionCommentComponent, "action-comment", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; }, { "commentClick": "commentClick"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileCommentComponent
+ *
+ * Individual comment component for post discussions.
+ * Displays user comments with avatar, content, and like action.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-comment
+ *   [authorName]="'John Doe'"
+ *   [authorRole]="'Tenant'"
+ *   [timestamp]="'1h ago'"
+ *   [avatarInitials]="'JD'"
+ *   [content]="'Great post!'">
+ * </ds-mobile-comment>
+ * ```
+ */
+declare class DsMobileCommentComponent {
+    /**
+     * Author's display name
+     */
+    authorName: _angular_core.InputSignal<string>;
+    /**
+     * Author's role (e.g., "Tenant", "Property Manager")
+     */
+    authorRole: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp text (e.g., "1h ago", "2d ago")
+     */
+    timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Comment content text
+     */
+    content: _angular_core.InputSignal<string>;
+    /**
+     * Avatar initials
+     */
+    avatarInitials: _angular_core.InputSignal<string>;
+    /**
+     * Avatar type
+     */
+    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    /**
+     * Whether the comment is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether this comment belongs to the current user
+     */
+    isOwnComment: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the comment is liked by current user
+     */
+    isLiked: _angular_core.ModelSignal<boolean>;
+    /**
+     * Number of likes
+     */
+    likeCount: _angular_core.ModelSignal<number>;
+    /**
+     * Signal to control pulse animation
+     */
+    isPulsing: _angular_core.WritableSignal<boolean>;
+    /**
+     * Computed property to format content with @mentions
+     */
+    formattedContent: _angular_core.Signal<string>;
+    /**
+     * Emits when the comment card is clicked (if clickable)
+     */
+    commentClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when reply is clicked
+     */
+    replyClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when edit is clicked
+     */
+    editClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the comment 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;
+    handleCommentClick(event: Event): void;
+    toggleLike(): Promise<void>;
+    handleReply(): void;
+    handleEdit(): 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;
+    /**
+     * Handle desktop more button click
+     * Stops propagation and triggers long press action
+     */
+    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"; "likeCount": "likeCountChange"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobilePostComposerComponent
+ *
+ * A "fake" input composer for creating new posts in the community feed.
+ * Features a user avatar, placeholder input, and post button.
+ * Clicking opens the full post creation modal/page.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-post-composer
+ *   [avatarInitials]="'LM'"
+ *   [avatarType]="'photo'"
+ *   [avatarSrc]="'...'"
+ *   (composerClick)="openPostCreator()">
+ * </ds-mobile-post-composer>
+ * ```
+ */
+declare class DsMobilePostComposerComponent {
+    /**
+     * Avatar initials (for initials type)
+     */
+    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>;
+    /**
+     * Icon name (for icon type avatars)
+     */
+    avatarIconName: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Text for the post button
+     */
+    buttonText: _angular_core.InputSignal<string>;
+    /**
+     * Emits when the composer is clicked
+     */
+    composerClick: _angular_core.OutputEmitterRef<void>;
+    handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostComposerComponent, never>;
+    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>;
+}
+
+/**
+ * DsMobileLongPressDirective
+ *
+ * A reusable directive for handling long press interactions on mobile devices.
+ * Provides haptic feedback and prevents long press when touching interactive elements.
+ *
+ * Features:
+ * - Configurable duration and movement threshold
+ * - Automatic haptic feedback (with fallback to navigator.vibrate)
+ * - Excludes interactive elements (buttons, links, inputs)
+ * - Handles touchmove cancellation
+ * - Context menu support (right-click on desktop)
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <div dsMobileLongPress (longPress)="handleLongPress()">
+ *   Long press me
+ * </div>
+ *
+ * <!-- Custom duration and threshold -->
+ * <div
+ *   dsMobileLongPress
+ *   [longPressDuration]="800"
+ *   [moveThreshold]="15"
+ *   [excludeSelectors]="'button, a, .no-longpress'"
+ *   (longPress)="showContextMenu()">
+ *   Custom long press
+ * </div>
+ * ```
+ */
+declare class DsMobileLongPressDirective implements OnDestroy {
+    /**
+     * Duration in milliseconds to trigger long press
+     * @default 500
+     */
+    longPressDuration: number;
+    /**
+     * Maximum movement in pixels before canceling long press
+     * @default 10
+     */
+    moveThreshold: number;
+    /**
+     * CSS selectors to exclude from long press detection
+     * @default 'button, a, input, select, textarea, [role="button"]'
+     */
+    excludeSelectors: string;
+    /**
+     * Haptic feedback style (Light, Medium, Heavy)
+     * @default ImpactStyle.Medium
+     */
+    hapticStyle: ImpactStyle;
+    /**
+     * Enable/disable haptic feedback
+     * @default true
+     */
+    enableHaptics: boolean;
+    /**
+     * Emits when long press is triggered
+     */
+    longPress: EventEmitter<void>;
+    /**
+     * Emits when long press starts (timer begins)
+     */
+    longPressStart: EventEmitter<void>;
+    /**
+     * Emits when long press is cancelled
+     */
+    longPressCancel: EventEmitter<void>;
+    private longPressTimer;
+    private longPressTriggered;
+    private touchStartX;
+    private touchStartY;
+    /**
+     * 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;
+    /**
+     * Trigger haptic feedback
+     */
+    private triggerHaptics;
+    /**
+     * Cleanup on destroy
+     */
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLongPressDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DsMobileLongPressDirective, "[dsMobileLongPress]", never, { "longPressDuration": { "alias": "longPressDuration"; "required": false; }; "moveThreshold": { "alias": "moveThreshold"; "required": false; }; "excludeSelectors": { "alias": "excludeSelectors"; "required": false; }; "hapticStyle": { "alias": "hapticStyle"; "required": false; }; "enableHaptics": { "alias": "enableHaptics"; "required": false; }; }, { "longPress": "longPress"; "longPressStart": "longPressStart"; "longPressCancel": "longPressCancel"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileListItemComponent
+ *
+ * A versatile, reusable list item component for mobile applications.
+ * Supports both interactive and non-interactive modes with flexible content projection.
+ *
+ * Features:
+ * - Interactive mode with click and long-press support
+ * - Pseudo-element background extends 8px beyond bounds (no negative margins needed)
+ * - Flexible content slots (leading, main, trailing)
+ * - Optional structured inputs for common use cases (title, subtitle)
+ * - Accessibility features (focus states, ARIA attributes)
+ * - Disabled and loading states
+ *
+ * This component serves as the foundation for specialized list item types like posts,
+ * notifications, messages, contacts, and other list content.
+ *
+ * @example
+ * ```html
+ * <!-- Simple structured usage -->
+ * <ds-mobile-list-item
+ *   title="Document Title"
+ *   subtitle="Supporting text"
+ *   [interactive]="true"
+ *   (itemClick)="handleClick()">
+ *
+ *   <ds-icon content-leading name="document" />
+ * </ds-mobile-list-item>
+ *
+ * <!-- Flexible custom usage -->
+ * <ds-mobile-list-item
+ *   [interactive]="true"
+ *   (itemClick)="handleClick()"
+ *   (longPress)="showContextMenu()">
+ *
+ *   <div content-leading>
+ *     <ds-avatar initials="JD" />
+ *   </div>
+ *
+ *   <div content-main>
+ *     <h3>Custom Content</h3>
+ *     <p>Full control over layout and styling</p>
+ *   </div>
+ *
+ *   <button content-trailing (click)="handleAction($event)">
+ *     Action
+ *   </button>
+ * </ds-mobile-list-item>
+ *
+ * <!-- Non-interactive read-only -->
+ * <ds-mobile-list-item
+ *   title="Read-only Item"
+ *   subtitle="No interaction">
+ *   <ds-icon content-leading name="info" />
+ * </ds-mobile-list-item>
+ * ```
+ */
+declare class DsMobileListItemComponent {
+    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();
+    /**
+     * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
+     * Defaults to '32px' for standard list item avatars/icons
+     */
+    leadingSize: _angular_core.InputSignal<string>;
+    /**
+     * Display variant
+     * - 'feed' - Standard feed display (default)
+     * - 'detail' - Full detail view
+     * - 'compact' - Compact display for nested/related items
+     */
+    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    /**
+     * Whether the list item is interactive (clickable and long-pressable)
+     * When true, adds interactive background, cursor pointer, and touch handlers
+     */
+    interactive: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the list item is disabled
+     * Disables all interactions and reduces opacity
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the list item is in a loading state
+     * Disables interactions but maintains full opacity
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable long-press interaction when interactive is true
+     * Set to false to disable long-press but keep click
+     */
+    enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Show "more actions" button on desktop for items with long-press enabled
+     * Only visible on desktop (hover: hover) and when enableLongPress is true
+     * Clicking this button triggers the same handler as long-press on mobile
+     * @default true
+     */
+    showDesktopMoreButton: _angular_core.InputSignal<boolean>;
+    /**
+     * Offset distance for the interactive background pseudo-element
+     * Extends the background beyond the content bounds
+     * @default '8px'
+     */
+    interactiveOffset: _angular_core.InputSignal<string>;
+    /**
+     * Optional structured title text
+     * Provides a simple way to add title without custom markup
+     */
+    title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional structured subtitle text
+     * Provides a simple way to add subtitle without custom markup
+     */
+    subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show the divider line below the list item
+     * Automatically hidden on last-child and detail variant
+     * @default true
+     */
+    showDivider: _angular_core.InputSignal<boolean>;
+    /**
+     * Spacing around the divider (top and bottom padding)
+     * @default '4px'
+     */
+    dividerSpacing: _angular_core.InputSignal<string>;
+    /**
+     * Emits when the list item is clicked (if interactive and not disabled)
+     */
+    itemClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the desktop more actions button is clicked
+     * This is separate from longPress to give more control to parent components
+     * Typically, you can use (longPress) for both mobile and desktop actions
+     */
+    moreButtonClick: _angular_core.OutputEmitterRef<Event>;
+    /**
+     * Track if long press was triggered to prevent click
+     */
+    private longPressTriggered;
+    /**
+     * Check if leading content slot has content
+     * Always true to maintain consistent layout
+     */
+    hasLeadingContent: _angular_core.Signal<boolean>;
+    /**
+     * Check if trailing content slot has content
+     * Always true to maintain consistent layout
+     */
+    hasTrailingContent: _angular_core.Signal<boolean>;
+    /**
+     * Handle click events
+     */
+    handleClick(event: Event): void;
+    /**
+     * Handle keyboard events (Enter/Space)
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle long press events from the directive
+     * Set the flag to prevent the subsequent click event
+     */
+    handleLongPress(): void;
+    /**
+     * Handle desktop more button click
+     * Stops propagation to prevent triggering itemClick
+     * Emits moreButtonClick for parent components to handle
+     */
+    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"; }; }]>;
+}
+
+/**
+ * DsMobileInteractiveListItemPostComponent
+ *
+ * Specialized interactive list item for displaying social media posts.
+ * Built on top of ds-mobile-interactive-list-item base component.
+ * Displays user posts with avatar, content, media, and action buttons.
+ * Follows Threads-inspired design with clean layout and interactions.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-interactive-list-item-post
+ *   [authorName]="'John Doe'"
+ *   [authorRole]="'Tenant'"
+ *   [timestamp]="'2h ago'"
+ *   [avatarInitials]="'JD'"
+ *   [clickable]="true"
+ *   (postClick)="openPost()">
+ *
+ *   <post-content>
+ *     <post-text>This is a sample post...</post-text>
+ *   </post-content>
+ *
+ *   <post-actions>
+ *     <action-like [active]="true" count="42" />
+ *     <action-comment count="12" />
+ *   </post-actions>
+ * </ds-mobile-interactive-list-item-post>
+ * ```
+ */
+declare class DsMobileInteractiveListItemPostComponent {
+    /**
+     * Author's display name
+     */
+    authorName: _angular_core.InputSignal<string>;
+    /**
+     * Author's role (e.g., "Tenant", "Property Manager")
+     */
+    authorRole: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp text (e.g., "2h ago", "1d ago")
+     */
+    timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Avatar initials (for initials type)
+     */
+    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>;
+    /**
+     * Icon name (for icon type avatars)
+     */
+    avatarIconName: _angular_core.InputSignal<string>;
+    /**
+     * Show badge on avatar (e.g., for property managers)
+     */
+    showBadge: _angular_core.InputSignal<boolean>;
+    /**
+     * Display variant
+     * - 'feed' - Standard feed display (default)
+     * - 'detail' - Full detail view
+     * - 'compact' - Compact display for nested/related posts
+     */
+    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    /**
+     * Whether the post card is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the post card is clicked (if clickable)
+     */
+    postClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the comment button is clicked
+     */
+    commentClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the post card is long-pressed
+     */
+    longPress: _angular_core.OutputEmitterRef<void>;
+    handlePostClick(): void;
+    handleCommentClick(): void;
+    handleLongPress(): void;
+    handleMoreButtonClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemPostComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
+}
+
+/**
+ * PostPdfAttachmentComponent
+ *
+ * PDF file attachment display for posts.
+ * Shows PDF info card with icon, filename, and file size.
+ * Emits click event to open PDF in viewer.
+ */
+declare class PostPdfAttachmentComponent {
+    /**
+     * PDF file name
+     */
+    fileName: _angular_core.InputSignal<string>;
+    /**
+     * File size display (e.g., "1.2 MB")
+     */
+    fileSize: _angular_core.InputSignal<string>;
+    /**
+     * Emits when the PDF attachment is clicked
+     */
+    pdfClick: _angular_core.OutputEmitterRef<void>;
+    handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostPdfAttachmentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostPdfAttachmentComponent, "post-pdf-attachment", never, { "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "fileSize": { "alias": "fileSize"; "required": false; "isSignal": true; }; }, { "pdfClick": "pdfClick"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileInteractiveListItemInquiryComponent
+ *
+ * Specialized interactive list item for displaying inquiries/tickets.
+ * Built on top of ds-mobile-interactive-list-item base component.
+ * Displays inquiry title, description, status, and timestamp.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-interactive-list-item-inquiry
+ *   [title]="'Tumble dryer is not working'"
+ *   [description]="'For the past three days, I have been experiencing...'"
+ *   [status]="'open'"
+ *   [timestamp]="'12 days ago'"
+ *   [iconName]="'remixCalendarLine'"
+ *   [clickable]="true"
+ *   (inquiryClick)="openInquiry()">
+ * </ds-mobile-interactive-list-item-inquiry>
+ * ```
+ */
+declare class DsMobileInteractiveListItemInquiryComponent {
+    /**
+     * Inquiry title
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Inquiry description/preview text
+     */
+    description: _angular_core.InputSignal<string>;
+    /**
+     * Inquiry status
+     */
+    status: _angular_core.InputSignal<"open" | "closed">;
+    /**
+     * Status label (defaults to capitalized status)
+     */
+    statusLabel: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp text (e.g., "12 days ago", "2 months ago")
+     */
+    timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Icon name for the leading icon
+     */
+    iconName: _angular_core.InputSignal<string>;
+    /**
+     * Icon color
+     */
+    iconColor: _angular_core.InputSignal<string>;
+    /**
+     * Display variant
+     * - 'feed' - Standard feed display (default)
+     * - 'detail' - Full detail view
+     * - 'compact' - Compact display
+     */
+    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    /**
+     * Whether the inquiry item is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show chevron icon
+     */
+    showChevron: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the inquiry item is clicked (if clickable)
+     */
+    inquiryClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the inquiry item is long-pressed
+     */
+    longPress: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Get computed status label
+     */
+    computedStatusLabel(): string;
+    handleInquiryClick(): void;
+    handleLongPress(): void;
+    handleMoreButtonClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemInquiryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileInteractiveListItemMessageComponent
+ *
+ * Specialized interactive list item for displaying message threads.
+ * Built on top of ds-mobile-interactive-list-item base component.
+ * Displays message preview with sender info - simplified version without actions.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-interactive-list-item-message
+ *   [senderName]="'John Doe'"
+ *   [senderRole]="'Tenant'"
+ *   [timestamp]="'2h ago'"
+ *   [message]="'Hey, when is the maintenance scheduled?'"
+ *   [avatarInitials]="'JD'"
+ *   [unread]="true"
+ *   [clickable]="true"
+ *   (messageClick)="openThread()">
+ * </ds-mobile-interactive-list-item-message>
+ * ```
+ */
+declare class DsMobileInteractiveListItemMessageComponent {
+    /**
+     * Sender's display name
+     */
+    senderName: _angular_core.InputSignal<string>;
+    /**
+     * Sender's role (e.g., "Tenant", "Property Manager")
+     */
+    senderRole: _angular_core.InputSignal<string>;
+    /**
+     * Message preview text
+     */
+    message: _angular_core.InputSignal<string>;
+    /**
+     * Avatar initials (for initials type)
+     */
+    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 the message is unread
+     */
+    unread: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the message item is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the message item is clicked
+     */
+    messageClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the message item is long-pressed
+     */
+    longPress: _angular_core.OutputEmitterRef<void>;
+    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>;
+}
+
+/**
+ * DsMobileContactListItemComponent
+ *
+ * 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-contact-list-item
+ *   [name]="'Mortensen & Søn ApS'"
+ *   [initials]="'M'"
+ *   [contactPerson]="'John Mortensen'"
+ *   [phoneNumber]="'+45 12 34 56 78'"
+ *   [clickable]="true"
+ *   (contactClick)="openContact()">
+ * </ds-mobile-contact-list-item>
+ * ```
+ */
+declare class DsMobileContactListItemComponent {
+    /**
+     * 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>;
+    /**
+     * 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<DsMobileContactListItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileContactListItemComponent, "ds-mobile-contact-list-item", 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; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; }, { "contactClick": "contactClick"; }, never, never, true, never>;
+}
+
+interface TabConfig$1 {
+    id: string;
+    label: string;
+    route: string;
+    icon: string;
+    iconActive: string;
+}
+type HeaderVariant = 'home' | 'simple' | 'back' | 'none';
+/**
+ * DsMobileAppLayoutComponent
+ *
+ * A complete mobile application shell component based on actual mobile page patterns.
+ * Provides tab navigation, flexible headers, and mobile-optimized layout.
+ *
+ * Features:
+ * - Tab bar navigation with active state
+ * - Multiple header variants (home with logomark, simple title, back button)
+ * - Pull-to-refresh support
+ * - Purple brand background with content wrapper
+ * - iOS safe area support
+ *
+ * @example
+ * ```html
+ * <ds-mobile-app-layout
+ *   [showTabBar]="true"
+ *   [tabs]="tabsConfig"
+ *   [headerVariant]="'home'"
+ *   [avatarInitials]="'JD'"
+ * />
+ * ```
+ */
+declare class DsMobileAppLayoutComponent implements AfterViewInit {
+    private router;
+    private elementRef;
+    private breakpointObserver;
+    ionContent: IonContent;
+    private platform;
+    isNativePlatform: _angular_core.Signal<boolean>;
+    headerVariant: _angular_core.InputSignal<HeaderVariant>;
+    pageTitle: _angular_core.InputSignal<string>;
+    showBackButton: _angular_core.InputSignal<boolean>;
+    showPullToRefresh: _angular_core.InputSignal<boolean>;
+    showTabBar: _angular_core.InputSignal<boolean>;
+    tabs: _angular_core.InputSignal<TabConfig$1[]>;
+    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarInitials: _angular_core.InputSignal<string>;
+    avatarSrc: _angular_core.InputSignal<string>;
+    avatarIconName: _angular_core.InputSignal<string>;
+    backClick: _angular_core.OutputEmitterRef<void>;
+    refresh: _angular_core.OutputEmitterRef<any>;
+    avatarClick: _angular_core.OutputEmitterRef<void>;
+    scroll: _angular_core.OutputEmitterRef<any>;
+    private scrollY;
+    activeTab: _angular_core.WritableSignal<string>;
+    isDesktop: _angular_core.WritableSignal<boolean>;
+    constructor(router: Router, elementRef: ElementRef, breakpointObserver: BreakpointObserver);
+    ngAfterViewInit(): void;
+    handleScroll(event: any): void;
+    handleRefresh(event: any): Promise<void>;
+    handleBackClick(): void;
+    handleAvatarClick(): void;
+    navigateToTab(route: string): void;
+    private ensureScrollable;
+    isTabActive(tabId: string): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileAppLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileAppLayoutComponent, "ds-mobile-app-layout", never, { "headerVariant": { "alias": "headerVariant"; "required": false; "isSignal": true; }; "pageTitle": { "alias": "pageTitle"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "showPullToRefresh": { "alias": "showPullToRefresh"; "required": false; "isSignal": true; }; "showTabBar": { "alias": "showTabBar"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; }, { "backClick": "backClick"; "refresh": "refresh"; "avatarClick": "avatarClick"; "scroll": "scroll"; }, never, ["*"], true, never>;
+}
+
+interface TabConfig {
+    id: string;
+    label: string;
+    route: string;
+    icon: string;
+    iconActive: string;
+}
+/**
+ * DsMobileTabsComponent
+ *
+ * Responsive tab navigation that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
+ *
+ * Wraps ion-tabs to maintain native routing functionality while
+ * providing a responsive navigation experience with branding.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-tabs
+ *   [tabs]="tabsConfig"
+ *   [avatarInitials]="'JD'"
+ *   (avatarClick)="handleAvatarClick()"
+ * />
+ * ```
+ */
+declare class DsMobileTabsComponent implements OnInit, AfterViewInit {
+    private elementRef;
+    tabs: TabConfig[];
+    avatarType: 'initials' | 'photo' | 'icon';
+    avatarInitials: string;
+    avatarSrc: string;
+    avatarIconName: string;
+    avatarClick: EventEmitter<void>;
+    activeTab: _angular_core.WritableSignal<string>;
+    isDesktop: _angular_core.WritableSignal<boolean>;
+    private mutationObserver?;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setupTitleRemovalObserver;
+    private removeTitleAttributes;
+    trackByTabId(index: number, tab: TabConfig): string;
+    isTabActive(tabId: string): boolean;
+    handleAvatarClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabsComponent, "ds-mobile-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "avatarType": { "alias": "avatarType"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; }; }, { "avatarClick": "avatarClick"; }, never, never, true, never>;
+}
+
+interface ActionResult {
+    action: string;
+}
+interface ActionItem {
+    action: string;
+    title: string;
+    icon: string;
+    destructive?: boolean;
+}
+interface ActionGroup {
+    actions: ActionItem[];
+}
+/**
+ * DsMobileActionsBottomSheetComponent
+ *
+ * Generic bottom sheet for displaying action lists.
+ * Supports custom action groups or preset content actions (posts/comments).
+ * Action groups are automatically separated by full-width dividers.
+ *
+ * @example Custom actions with auto-height (recommended to avoid cropping)
+ * ```typescript
+ * const sheet = await this.modalController.create({
+ *   component: DsMobileActionsBottomSheetComponent,
+ *   componentProps: {
+ *     customActionGroups: [
+ *       {
+ *         actions: [
+ *           { action: 'profile', title: 'Min profil', icon: 'remixUser3Line' },
+ *           { action: 'settings', title: 'Indstillinger', icon: 'remixSettings3Line' }
+ *         ]
+ *       },
+ *       {
+ *         actions: [
+ *           { action: 'logout', title: 'Log ud', icon: 'remixLogoutBoxLine', destructive: true }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: 'auto-height'
+ * });
+ *
+ * const result = await sheet.onWillDismiss();
+ * if (result.data?.action) {
+ *   // Handle the action
+ * }
+ * ```
+ *
+ * @example Preset content actions
+ * ```typescript
+ * const sheet = await this.modalController.create({
+ *   component: DsMobileActionsBottomSheetComponent,
+ *   componentProps: {
+ *     isOwnContent: false
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: 'auto-height'
+ * });
+ * ```
+ */
+declare class DsMobileActionsBottomSheetComponent {
+    private modalController;
+    /**
+     * Custom action groups to display (overrides isOwnContent)
+     */
+    customActionGroups?: ActionGroup[];
+    /**
+     * Whether this content belongs to the current user (for preset content actions)
+     */
+    isOwnContent: boolean;
+    /**
+     * Computed action groups - uses custom groups if provided, otherwise falls back to preset content actions
+     */
+    actionGroups: _angular_core.Signal<ActionGroup[]>;
+    constructor(modalController: ModalController);
+    /**
+     * Handle action selection and dismiss with result
+     */
+    selectAction(action: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileActionsBottomSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileActionsBottomSheetComponent, "ds-mobile-actions-bottom-sheet", never, { "customActionGroups": { "alias": "customActionGroups"; "required": false; }; "isOwnContent": { "alias": "isOwnContent"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Configuration options for the bottom sheet modal
+ */
+interface BottomSheetOptions {
+    /** The component to display in the bottom sheet */
+    component: any;
+    /** Component props to pass to the modal content */
+    componentProps?: {
+        [key: string]: any;
+    };
+    /** Breakpoints for the bottom sheet (0-1 values representing percentage of screen) */
+    breakpoints?: number[];
+    /** Initial breakpoint to open the sheet at */
+    initialBreakpoint?: number;
+    /** Show/hide the drag handle */
+    handle?: boolean;
+    /** Custom CSS class for styling */
+    cssClass?: string | string[];
+    /** Whether backdrop dismisses the modal */
+    backdropDismiss?: boolean;
+    /** Backdrop opacity (0-1) */
+    backdropOpacity?: number;
+    /** Enable backdrop blur effect */
+    backdropBlur?: boolean;
+    /** Keyboard close behavior */
+    keyboardClose?: boolean;
+    /** Auto-height mode: sheet sizes to content instead of using fixed breakpoints */
+    autoHeight?: boolean;
+}
+/**
+ * DsMobileBottomSheetService
+ *
+ * Service for creating and managing Ionic 6 bottom sheet modals.
+ * Based on the Ionic blog article: https://ionic.io/blog/5-examples-of-the-new-ionic-6-bottom-sheet-modal
+ *
+ * Features:
+ * - Multiple breakpoints for snap-to positions
+ * - Customizable initial height
+ * - Optional drag handle
+ * - Backdrop blur effect
+ * - Custom styling support
+ *
+ * @example
+ * ```typescript
+ * constructor(private bottomSheet: DsMobileBottomSheetService) {}
+ *
+ * async openSheet() {
+ *   const sheet = await this.bottomSheet.create({
+ *     component: PostCreateComponent,
+ *     breakpoints: [0, 0.5, 0.9],
+ *     initialBreakpoint: 0.5,
+ *     handle: true
+ *   });
+ *
+ *   const result = await sheet.onWillDismiss();
+ *   console.log('Sheet dismissed with:', result.data);
+ * }
+ * ```
+ */
+declare class DsMobileBottomSheetService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Create and present a bottom sheet modal
+     *
+     * @param options Configuration options for the bottom sheet
+     * @returns Promise that resolves to the modal instance
+     */
+    create(options: BottomSheetOptions): Promise<HTMLIonModalElement>;
+    /**
+     * Dismiss all open modals
+     */
+    dismiss(data?: any, role?: string): Promise<boolean>;
+    /**
+     * Get the top-most modal overlay
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBottomSheetService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileBottomSheetService>;
+}
+
+/**
+ * DsMobilePostCreateBottomSheetComponent
+ *
+ * Bottom sheet modal for creating new posts in the community feed.
+ * This is the modal content that gets displayed in the bottom sheet.
+ * Features Threads-inspired interface with rich text editing capabilities.
+ *
+ * Auto-focuses the textarea and brings up the keyboard when opened.
+ *
+ * Usage: Use with DsMobileBottomSheetService to present as a bottom sheet
+ */
+declare class DsMobilePostCreateBottomSheetComponent implements AfterViewInit, OnInit {
+    private modalController;
+    private elementRef;
+    textareaInput?: ElementRef<HTMLTextAreaElement>;
+    fileInput?: ElementRef<HTMLInputElement>;
+    autoFocus: boolean;
+    isReadonly: boolean;
+    isEditMode: boolean;
+    postId?: string;
+    initialContent: string;
+    postContent: string;
+    selectedImages: _angular_core.WritableSignal<string[]>;
+    username: _angular_core.WritableSignal<string>;
+    placeholder: _angular_core.WritableSignal<string>;
+    modalTitle: _angular_core.WritableSignal<string>;
+    submitButtonLabel: _angular_core.WritableSignal<string>;
+    constructor(modalController: ModalController, elementRef: ElementRef);
+    /**
+     * Ensure toolbar doesn't have unnecessary padding
+     * Modal is already positioned below status bar, so no extra safe area needed
+     */
+    private applySafeAreaToToolbar;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    /**
+     * Ionic lifecycle hook - called when modal enters view
+     * At 95% height, this acts more like a page than a modal
+     * which might allow keyboard to open
+     */
+    ionViewDidEnter(): void;
+    handleFocus(): void;
+    handleInput(): void;
+    /**
+     * Auto-resize textarea based on content
+     */
+    private resizeTextarea;
+    canPost(): boolean;
+    handleCancel(): Promise<void>;
+    handlePost(): Promise<void>;
+    handleAddImage(): Promise<void>;
+    /**
+     * Restore StatusBar configuration (background task)
+     * Safe area padding is now handled preventively via applySafeAreaToToolbar()
+     */
+    private restoreStatusBar;
+    handleRemoveImage(index: number): void;
+    handleAddAttachment(): void;
+    handleFileSelect(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostCreateBottomSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostCreateBottomSheetComponent, "ds-mobile-post-create-bottom-sheet", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Media file types supported by the lightbox
+ */
+type LightboxMediaType = 'image' | 'pdf';
+/**
+ * Base media file interface
+ */
+interface LightboxMediaFile {
+    /** File source URL */
+    src: string;
+    /** Media type - determines which viewer to use */
+    type: LightboxMediaType;
+    /** File title */
+    title?: string;
+    /** File description */
+    description?: string;
+}
+/**
+ * Image data for lightbox display
+ */
+interface LightboxImage extends LightboxMediaFile {
+    type: 'image';
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Thumbnail URL for faster loading (optional) */
+    thumbnail?: string;
+    /** Whether the image is liked */
+    isLiked?: boolean;
+    /** Number of likes */
+    likeCount?: number;
+    /** Number of comments */
+    commentCount?: number;
+}
+/**
+ * PDF document data for lightbox display
+ */
+interface LightboxPdf extends LightboxMediaFile {
+    type: 'pdf';
+    /** File size in bytes (optional, for display) */
+    fileSize?: number;
+    /** Number of pages (optional, for display) */
+    pageCount?: number;
+}
+/**
+ * Author metadata for the lightbox
+ */
+interface LightboxAuthor {
+    /** Author name */
+    name: string;
+    /** Author role/subtitle */
+    role?: string;
+    /** Author avatar URL */
+    avatarSrc?: string;
+    /** Author avatar initials (if no photo) */
+    avatarInitials?: string;
+    /** Avatar type */
+    avatarType?: 'photo' | 'initials';
+    /** Timestamp */
+    timestamp?: string;
+}
+/**
+ * Configuration options for image lightbox
+ */
+interface LightboxImageOptions {
+    /** Array of images to display */
+    images: LightboxImage[];
+    /** Author information to display in header */
+    author?: LightboxAuthor;
+    /** Initial image index to show (0-based) */
+    initialIndex?: number;
+    /** Enable pinch-to-zoom and double-tap zoom */
+    enableZoom?: boolean;
+    /** Show navigation controls (arrows, counter) */
+    showControls?: boolean;
+    /** Enable swipe gestures to navigate between images */
+    enableSwipe?: boolean;
+    /** Show image info (title, description) */
+    showInfo?: boolean;
+    /** Animation type for opening */
+    animation?: 'fade' | 'zoom' | 'slide';
+}
+/**
+ * Configuration options for PDF lightbox
+ */
+interface LightboxPdfOptions {
+    /** PDF document to display */
+    pdf: LightboxPdf;
+    /** Author information to display */
+    author?: LightboxAuthor;
+}
+/**
+ * Generic lightbox options (for backward compatibility)
+ */
+type LightboxOptions = LightboxImageOptions;
+/**
+ * DsMobileLightboxService
+ *
+ * Service for displaying media files (images and PDFs) in full-screen viewers.
+ * - Images: Full-screen modal with gestures (pinch-zoom, swipe navigation)
+ * - PDFs: Native device PDF viewer (iOS/Android)
+ *
+ * Features:
+ * - Full-screen image viewing with gestures
+ * - Native PDF viewing
+ * - Swipe navigation between images
+ * - Pinch-to-zoom and double-tap zoom for images
+ * - Mobile-optimized touch gestures
+ * - Share functionality
+ *
+ * @example
+ * ```typescript
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ *
+ * // Open images
+ * async openImages() {
+ *   const modal = await this.lightbox.openImages({
+ *     images: [
+ *       {
+ *         type: 'image',
+ *         src: 'https://example.com/image1.jpg',
+ *         title: 'Beautiful Sunset'
+ *       }
+ *     ]
+ *   });
+ *
+ *   // Listen for when lightbox is dismissed
+ *   const { data } = await modal.onDidDismiss();
+ *   if (data?.action === 'comment') {
+ *     // Open post detail modal with comment focus
+ *     this.openPostDetail({ focusComment: true });
+ *   }
+ * }
+ *
+ * // Open PDF
+ * async openPdf() {
+ *   await this.lightbox.openPdf({
+ *     pdf: {
+ *       type: 'pdf',
+ *       src: 'https://example.com/document.pdf',
+ *       title: 'Document'
+ *     }
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileLightboxService {
+    private appRef;
+    private injector;
+    private currentLightbox;
+    constructor(appRef: ApplicationRef, injector: EnvironmentInjector);
+    /**
+     * Open the lightbox with images (backward compatible method)
+     *
+     * @param options Configuration options for the image lightbox
+     * @returns Promise that resolves to a dismiss function
+     */
+    open(options: LightboxOptions): Promise<() => void>;
+    /**
+     * Open the image lightbox with one or more images
+     *
+     * @param options Configuration options for the image lightbox
+     * @returns Promise that resolves to a dismiss function
+     */
+    openImages(options: LightboxImageOptions): Promise<() => void>;
+    /**
+     * Open the PDF lightbox (opens native PDF viewer)
+     *
+     * @param options Configuration options for the PDF lightbox
+     * @returns Promise that resolves to a dismiss function
+     */
+    openPdf(options: LightboxPdfOptions): Promise<() => void>;
+    /**
+     * Close the currently open lightbox
+     */
+    close(): void;
+    /**
+     * Check if a lightbox is currently open
+     */
+    isOpen(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileLightboxService>;
+}
+
+/**
+ * DsMobileLightboxImageComponent
+ *
+ * Full-screen image lightbox component with Swiper.js navigation and pinch-zoom.
+ *
+ * This component is typically not used directly - use DsMobileLightboxService instead.
+ *
+ * Features:
+ * - Swiper.js for smooth image navigation
+ * - Pinch to zoom in/out
+ * - Double-tap to toggle zoom
+ * - Swipe down to close (when not zoomed)
+ * - Image counter and navigation controls
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ *
+ * openImage() {
+ *   this.lightbox.openImages({
+ *     images: [{ type: 'image', src: 'image.jpg', title: 'My Image' }]
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileLightboxImageComponent implements OnInit, AfterViewInit, OnDestroy {
+    private gestureCtrl;
+    images: LightboxImage[];
+    author?: LightboxAuthor;
+    initialIndex: number;
+    enableZoom: boolean;
+    showControls: boolean;
+    enableSwipe: boolean;
+    showInfo: boolean;
+    animation: 'fade' | 'zoom' | 'slide';
+    onCloseRequested?: () => void;
+    swiperContainer: ElementRef<HTMLDivElement>;
+    currentIndex: _angular_core.WritableSignal<number>;
+    scale: _angular_core.WritableSignal<number>;
+    isZoomed: _angular_core.WritableSignal<boolean>;
+    isLoading: _angular_core.WritableSignal<boolean>;
+    hasError: _angular_core.WritableSignal<boolean>;
+    isLiked: _angular_core.WritableSignal<boolean>;
+    likeCount: _angular_core.WritableSignal<number>;
+    commentCount: _angular_core.WritableSignal<number>;
+    currentImage: _angular_core.Signal<LightboxImage>;
+    private swiper?;
+    private zoomData;
+    constructor(gestureCtrl: GestureController);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Initialize Swiper for image navigation
+     */
+    private initializeSwiper;
+    /**
+     * Initialize pinch-zoom gestures for all slides
+     */
+    private initializeZoomGestures;
+    /**
+     * Initialize zoom gestures for a specific slide
+     */
+    private initializeZoomForSlide;
+    /**
+     * Toggle zoom on double-tap
+     */
+    private toggleZoom;
+    /**
+     * Update action states (like, comments) when slide changes
+     */
+    private updateActionStates;
+    /**
+     * Close the lightbox
+     */
+    close(): void;
+    /**
+     * Handle share button click
+     */
+    onShare(): Promise<void>;
+    /**
+     * Handle like button toggle
+     */
+    onLikeToggle(): void;
+    /**
+     * Handle reply/comment button click
+     */
+    onReply(): void;
+    /**
+     * Navigate to the next image
+     */
+    nextImage(): void;
+    /**
+     * Navigate to the previous image
+     */
+    previousImage(): void;
+    /**
+     * Handle image load success
+     */
+    onImageLoad(index: number): void;
+    /**
+     * Handle image load error
+     */
+    onImageError(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxImageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxImageComponent, "ds-mobile-lightbox-image", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileLightboxPdfComponent
+ *
+ * PDF viewer component that displays PDF info and allows users to open PDFs in the native device viewer.
+ * Shows a lightbox with PDF details first, then user can choose to open in native viewer.
+ *
+ * This component is typically not used directly - use DsMobileLightboxService instead.
+ *
+ * Features:
+ * - PDF info preview (title, size, icon)
+ * - User-initiated native PDF viewing (iOS/Android)
+ * - Download and cache support
+ * - Share functionality
+ * - Loading states
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ *
+ * openPdf() {
+ *   this.lightbox.openPdf({
+ *     pdf: { type: 'pdf', src: 'document.pdf', title: 'My Document' }
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileLightboxPdfComponent implements OnInit {
+    pdf: LightboxPdf;
+    author?: LightboxAuthor;
+    onCloseRequested?: () => void;
+    isLoading: boolean;
+    hasError: boolean;
+    errorMessage: string;
+    cachedFilePath?: string;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Open the PDF in the native device viewer
+     */
+    openPdfInNativeViewer(): Promise<void>;
+    /**
+     * Download a remote PDF and open it
+     */
+    private downloadAndOpenPdf;
+    /**
+     * Open a local PDF file
+     */
+    private openLocalPdf;
+    /**
+     * Convert Blob to base64 string
+     */
+    private blobToBase64;
+    /**
+     * Get display title with file extension
+     * If title is provided, ensure it has .pdf extension
+     * Otherwise, extract filename from src
+     */
+    getDisplayTitle(): string;
+    /**
+     * Format file size for display
+     */
+    formatFileSize(bytes: number): string;
+    /**
+     * Share the PDF
+     */
+    onShare(): Promise<void>;
+    /**
+     * Close the PDF viewer
+     */
+    close(): void;
+    /**
+     * Handle like toggle
+     */
+    onLikeToggle(): void;
+    /**
+     * Handle reply/comment
+     * Close the lightbox and signal to open post detail with comment focus
+     */
+    onReply(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxPdfComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxPdfComponent, "ds-mobile-lightbox-pdf", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileLightboxHeaderComponent
+ *
+ * Shared header component for all lightbox types (image, PDF, etc.)
+ * Displays author information and close button with consistent styling.
+ */
+declare class DsMobileLightboxHeaderComponent {
+    /**
+     * Author information to display
+     */
+    author: _angular_core.InputSignal<LightboxAuthor | undefined>;
+    /**
+     * Emitted when close button is clicked
+     */
+    closeClick: _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>;
+}
+
+/**
+ * DsMobileLightboxFooterComponent
+ *
+ * Shared footer component for all lightbox types (image, PDF, etc.)
+ * Displays navigation controls (for multiple images) and action buttons.
+ */
+declare class DsMobileLightboxFooterComponent {
+    /**
+     * Whether to show navigation controls
+     */
+    showNavigation: _angular_core.InputSignal<boolean>;
+    /**
+     * Current image index (0-based)
+     */
+    currentIndex: _angular_core.InputSignal<number>;
+    /**
+     * Total number of images
+     */
+    totalImages: _angular_core.InputSignal<number>;
+    /**
+     * Whether the content is liked
+     */
+    isLiked: _angular_core.InputSignal<boolean>;
+    /**
+     * Number of likes
+     */
+    likeCount: _angular_core.InputSignal<number>;
+    /**
+     * Number of comments
+     */
+    commentCount: _angular_core.InputSignal<number>;
+    /**
+     * Emitted when previous button is clicked
+     */
+    prevClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when next button is clicked
+     */
+    nextClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when like button is clicked
+     */
+    likeClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * 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>;
+}
+
+/**
+ * DsMobileInlinePhotoComponent
+ *
+ * Displays one or multiple photos in a grid layout optimized for social feeds.
+ * Supports up to 5 visible images with automatic grid layouts.
+ *
+ * Features:
+ * - Automatic grid layouts for 1-5 images
+ * - Shows "+N more" overlay if more than 5 images
+ * - Opens lightbox with all images (including hidden ones) when clicked
+ * - Optimized layouts: 1 full, 2 split, 3 masonry, 4 grid, 5 grid
+ *
+ * @example
+ * ```html
+ * <ds-mobile-inline-photo
+ *   [images]="['img1.jpg', 'img2.jpg', 'img3.jpg']"
+ *   [author]="authorInfo"
+ * />
+ * ```
+ */
+declare class DsMobileInlinePhotoComponent {
+    private lightboxService;
+    /**
+     * Array of image URLs to display
+     */
+    images: string[];
+    /**
+     * Author information (passed to lightbox)
+     */
+    author?: {
+        name: string;
+        role?: string;
+        avatarSrc?: string;
+        avatarInitials?: string;
+        avatarType?: 'photo' | 'initials';
+        timestamp?: string;
+    };
+    /**
+     * Maximum number of images to show inline (default: 5)
+     * Remaining images shown in lightbox only
+     */
+    maxVisible: number;
+    /**
+     * Event emitted when lightbox is opened
+     */
+    photoClick: _angular_core.OutputEmitterRef<{
+        index: number;
+        totalImages: number;
+    }>;
+    constructor(lightboxService: DsMobileLightboxService);
+    /**
+     * Get the first N images to display inline
+     */
+    get visibleImages(): string[];
+    /**
+     * Calculate how many images are hidden
+     */
+    get hiddenCount(): number;
+    /**
+     * Open lightbox with all images, starting at the clicked index
+     */
+    openLightbox(index: number, event?: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInlinePhotoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlinePhotoComponent, "ds-mobile-inline-photo", never, { "images": { "alias": "images"; "required": false; }; "author": { "alias": "author"; "required": false; }; "maxVisible": { "alias": "maxVisible"; "required": false; }; }, { "photoClick": "photoClick"; }, never, never, true, never>;
+}
+
+/**
+ * Configuration options for modal presentation
+ */
+interface ModalOptions<T = any> {
+    /** The component to display in the modal */
+    component: Type<T>;
+    /** Props to pass to the component */
+    componentProps?: Record<string, any>;
+    /** CSS class(es) to apply to the modal */
+    cssClass?: string | string[];
+    /** Modal presentation style */
+    presentationStyle?: 'fullscreen' | 'card' | 'sheet';
+    /** Enable backdrop dismiss (tap outside to close) */
+    backdropDismiss?: boolean;
+    /** Show backdrop */
+    showBackdrop?: boolean;
+    /** Enable keyboard close (ESC key) */
+    keyboardClose?: boolean;
+    /** Enable swipe to close */
+    swipeToClose?: boolean;
+    /** Initial breakpoint (0-1) for sheet presentation */
+    initialBreakpoint?: number;
+    /** Available breakpoints for sheet presentation */
+    breakpoints?: number[];
+    /** Animation type */
+    animated?: boolean;
+    /** Mode (ios or md) */
+    mode?: 'ios' | 'md';
+    /** Whether to handle navigation back button */
+    handleNavigationBack?: boolean;
+}
+/**
+ * DsMobileModalService
+ *
+ * Generic service for displaying any component as a modal.
+ * Built on Ionic's modal system with customizable presentation styles.
+ *
+ * Features:
+ * - Open any component as a modal
+ * - Fullscreen, card, or sheet presentation styles
+ * - Customizable backdrop and dismissal behavior
+ * - Native gestures and animations
+ * - Type-safe component props
+ *
+ * @example
+ * ```typescript
+ * import { MobilePostDetailPageComponent } from './post-detail.page';
+ *
+ * constructor(private modal: DsMobileModalService) {}
+ *
+ * async openPostModal() {
+ *   await this.modal.open({
+ *     component: MobilePostDetailPageComponent,
+ *     componentProps: {
+ *       postId: '123',
+ *       authorName: 'John Doe'
+ *     },
+ *     presentationStyle: 'card',
+ *     backdropDismiss: true
+ *   });
+ * }
+ * ```
+ *
+ * @example Sheet presentation with breakpoints
+ * ```typescript
+ * async openSheet() {
+ *   await this.modal.open({
+ *     component: CommentsComponent,
+ *     presentationStyle: 'sheet',
+ *     initialBreakpoint: 0.5,
+ *     breakpoints: [0, 0.5, 0.75, 1],
+ *     swipeToClose: true
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileModalService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Open a component as a modal
+     *
+     * @param options Configuration options for the modal
+     * @returns Promise that resolves when the modal is presented
+     *
+     * @example
+     * ```typescript
+     * await this.modal.open({
+     *   component: MyComponent,
+     *   componentProps: { data: 'value' },
+     *   presentationStyle: 'fullscreen'
+     * });
+     * ```
+     */
+    open<T = any>(options: ModalOptions<T>): Promise<HTMLIonModalElement>;
+    /**
+     * Open a component as a fullscreen modal
+     *
+     * @param component Component to display
+     * @param componentProps Props to pass to the component
+     * @returns Promise that resolves when the modal is presented
+     *
+     * @example
+     * ```typescript
+     * await this.modal.openFullscreen(PostDetailPage, { postId: '123' });
+     * ```
+     */
+    openFullscreen<T = any>(component: Type<T>, componentProps?: Record<string, any>): Promise<HTMLIonModalElement>;
+    /**
+     * Open a component as a card modal
+     *
+     * @param component Component to display
+     * @param componentProps Props to pass to the component
+     * @returns Promise that resolves when the modal is presented
+     *
+     * @example
+     * ```typescript
+     * await this.modal.openCard(DetailComponent, { itemId: '456' });
+     * ```
+     */
+    openCard<T = any>(component: Type<T>, componentProps?: Record<string, any>): Promise<HTMLIonModalElement>;
+    /**
+     * Open a component as a bottom sheet
+     *
+     * @param component Component to display
+     * @param componentProps Props to pass to the component
+     * @param options Additional sheet options (breakpoints, etc.)
+     * @returns Promise that resolves when the modal is presented
+     *
+     * @example
+     * ```typescript
+     * await this.modal.openSheet(
+     *   CommentsComponent,
+     *   { postId: '789' },
+     *   { initialBreakpoint: 0.5, breakpoints: [0, 0.5, 1] }
+     * );
+     * ```
+     */
+    openSheet<T = any>(component: Type<T>, componentProps?: Record<string, any>, options?: {
+        initialBreakpoint?: number;
+        breakpoints?: number[];
+        swipeToClose?: boolean;
+    }): Promise<HTMLIonModalElement>;
+    /**
+     * Close the currently open modal
+     *
+     * @param data Optional data to pass back when dismissing
+     * @param role Optional role (e.g., 'cancel', 'confirm')
+     * @returns Promise that resolves when the modal is dismissed
+     *
+     * @example
+     * ```typescript
+     * await this.modal.dismiss({ saved: true }, 'confirm');
+     * ```
+     */
+    dismiss(data?: any, role?: string): Promise<boolean>;
+    /**
+     * Get the top-most modal if one exists
+     *
+     * @returns Promise that resolves to the modal element or undefined
+     *
+     * @example
+     * ```typescript
+     * const topModal = await this.modal.getTop();
+     * if (topModal) {
+     *   await topModal.dismiss();
+     * }
+     * ```
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    /**
+     * Get all currently open modals
+     *
+     * @returns Promise that resolves to an array of modal elements
+     */
+    getAll(): Promise<HTMLIonModalElement[]>;
+    /**
+     * Build CSS classes for the modal
+     */
+    private buildCssClasses;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileModalService>;
+}
+
+/**
+ * Post data interface for the modal
+ */
+interface PostDetailData {
+    postId: string;
+    authorName: string;
+    authorRole: string;
+    timestamp: string;
+    avatarInitials?: string;
+    avatarType?: 'photo' | 'initials';
+    avatarSrc?: string;
+    content: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    isLiked?: boolean;
+    likeCount?: number;
+    commentCount?: number;
+    comments?: CommentData[];
+    focusComment?: boolean;
+}
+interface CommentData {
+    authorName: string;
+    authorRole: string;
+    timestamp: string;
+    avatarInitials: string;
+    content: string;
+    isLiked?: boolean;
+    likeCount?: number;
+    isOwnComment?: boolean;
+}
+/**
+ * DsMobilePostDetailModalComponent
+ *
+ * Modal wrapper for displaying post details with comments.
+ * Follows the same pattern as the lightbox modal for consistent behavior.
+ *
+ * Features:
+ * - Full post content display
+ * - Comments section
+ * - Image lightbox integration
+ * - Native modal controls (close, swipe down)
+ * - Safe area support
+ *
+ * This component is typically not used directly - use DsMobilePostDetailModalService instead.
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private postModal: DsMobilePostDetailModalService) {}
+ *
+ * openPost() {
+ *   this.postModal.open({
+ *     postId: '123',
+ *     authorName: 'John Doe',
+ *     content: 'Post content...'
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestroy {
+    private modalController;
+    private lightbox;
+    private bottomSheet;
+    postData: PostDetailData;
+    commentInput?: ElementRef<HTMLTextAreaElement>;
+    post: _angular_core.WritableSignal<PostDetailData>;
+    commentText: _angular_core.WritableSignal<string>;
+    currentUserInitials: _angular_core.WritableSignal<string>;
+    replyingTo: _angular_core.WritableSignal<{
+        authorName: string;
+        content: string;
+    } | null>;
+    editingComment: _angular_core.WritableSignal<{
+        authorName: string;
+        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(modalController: ModalController, lightbox: DsMobileLightboxService, bottomSheet: DsMobileBottomSheetService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set up keyboard event listeners to adjust composer position
+     * The CSS uses --keyboard-height variable to translate the composer up
+     */
+    private setupKeyboardListeners;
+    /**
+     * Clean up keyboard event listeners
+     */
+    private cleanupKeyboardListeners;
+    /**
+     * Show the keyboard when user interacts with input
+     */
+    showKeyboard(): void;
+    /**
+     * Focus the comment input when comment icon is tapped
+     */
+    focusCommentInput(): void;
+    /**
+     * Handle input changes and detect @ mentions
+     */
+    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
+     */
+    handleReply(authorName: string, content: string): void;
+    /**
+     * Cancel reply
+     */
+    cancelReply(): void;
+    /**
+     * Cancel edit
+     */
+    cancelEdit(): void;
+    /**
+     * Handle edit comment
+     */
+    handleEditComment(authorName: string, originalContent: string, timestamp: string): void;
+    /**
+     * Close the modal
+     */
+    close(): void;
+    /**
+     * Submit a comment
+     */
+    submitComment(): void;
+    /**
+     * Open image in lightbox
+     */
+    openImageLightbox(): void;
+    /**
+     * Handle long press on a comment to show action sheet
+     */
+    handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobilePostDetailModalService
+ *
+ * Service for displaying post details in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobileLightboxService for consistent behavior.
+ *
+ * Features:
+ * - Full post content display
+ * - Comments section
+ * - Like/comment actions
+ * - Image lightbox integration
+ * - Native modal animations
+ * - Safe area support
+ *
+ * @example
+ * ```typescript
+ * constructor(private postModal: DsMobilePostDetailModalService) {}
+ *
+ * async openPost() {
+ *   await this.postModal.open({
+ *     postId: '123',
+ *     authorName: 'John Doe',
+ *     authorRole: 'Tenant',
+ *     timestamp: '2h ago',
+ *     avatarInitials: 'JD',
+ *     content: 'Just moved into my new apartment!',
+ *     isLiked: false,
+ *     likeCount: 42,
+ *     commentCount: 12,
+ *     comments: [
+ *       {
+ *         authorName: 'Jane Smith',
+ *         authorRole: 'Tenant',
+ *         timestamp: '1h ago',
+ *         avatarInitials: 'JS',
+ *         content: 'Welcome to the community!'
+ *       }
+ *     ]
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobilePostDetailModalService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Open the post detail modal
+     *
+     * @param postData Post data to display
+     * @returns Promise that resolves when the modal is presented
+     */
+    open(postData: PostDetailData): Promise<void>;
+    /**
+     * Close the currently open post detail modal
+     *
+     * @param data Optional data to pass back when dismissing
+     * @returns Promise that resolves when the modal is dismissed
+     */
+    close(data?: any): Promise<boolean>;
+    /**
+     * Get the top-most modal if one exists
+     *
+     * @returns Promise that resolves to the modal element or undefined
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobilePostDetailModalService>;
+}
+
+/**
+ * Handbook detail data interface
+ */
+interface HandbookDetailData {
+    title: string;
+    variant: string;
+    iconName: string;
+    itemCount: number;
+    items?: HandbookItem[];
+}
+interface HandbookItem {
+    title: string;
+    description?: string;
+    images?: string[];
+    attachments?: AttachmentItem[];
+    contacts?: ContactItem[];
+}
+interface AttachmentItem {
+    name: string;
+    type?: string;
+}
+interface ContactItem {
+    name: string;
+    initials: string;
+    contactPerson?: string;
+    phoneNumber?: string;
+}
+
+/**
+ * DsMobileHandbookDetailModalService
+ *
+ * Service for displaying handbook folder details in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * Features:
+ * - Full handbook content display
+ * - Items list with descriptions
+ * - Images and attachments
+ * - Contact information
+ * - Native modal animations
+ * - Safe area support
+ *
+ * @example
+ * ```typescript
+ * constructor(private handbookModal: DsMobileHandbookDetailModalService) {}
+ *
+ * async openHandbook() {
+ *   await this.handbookModal.open({
+ *     title: 'Utilities',
+ *     variant: 'pink',
+ *     iconName: 'remixLightbulbLine',
+ *     itemCount: 8,
+ *     items: [
+ *       {
+ *         title: 'Hjertestarter',
+ *         description: 'Installed on the 4th floor...',
+ *         images: ['/path/to/image.jpg'],
+ *         contacts: [
+ *           { name: 'Mortensen & Søn ApS', initials: 'M' }
+ *         ]
+ *       }
+ *     ]
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileHandbookDetailModalService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Open the handbook detail modal
+     *
+     * @param handbookData Handbook data to display
+     * @returns Promise that resolves when the modal is presented
+     */
+    open(handbookData: HandbookDetailData): Promise<void>;
+    /**
+     * Close the currently open handbook detail modal
+     *
+     * @param data Optional data to pass back when dismissing
+     * @returns Promise that resolves when the modal is dismissed
+     */
+    close(data?: any): Promise<boolean>;
+    /**
+     * Get the top-most modal if one exists
+     *
+     * @returns Promise that resolves to the modal element or undefined
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHandbookDetailModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileHandbookDetailModalService>;
+}
+
+/**
+ * DsMobileHandbookFolderComponent
+ *
+ * A visually rich folder component for displaying handbook categories or sections.
+ * Features a two-layer folder design with customizable colors, icon, item count, and label.
+ *
+ * Design Details:
+ * - Folder back: 72px height with a decorative notch
+ * - Folder front: 64px height overlaying the back
+ * - Item count displayed in bottom-left corner
+ * - Icon displayed in bottom-right corner
+ * - Label text centered below the folder
+ *
+ * @example
+ * ```html
+ * <ds-mobile-handbook-folder
+ *   [colorBase]="'#d244cf'"
+ *   [colorWeak]="'#f9e6f9'"
+ *   [iconName]="'remixLightbulbLine'"
+ *   [itemCount]="8"
+ *   [label]="'Utilities'">
+ * </ds-mobile-handbook-folder>
+ * ```
+ */
+declare class DsMobileHandbookFolderComponent {
+    private handbookModal;
+    /**
+     * Color variant for the folder
+     * Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
+     * Example: 'pink', 'success', 'blue'
+     */
+    variant: string;
+    /**
+     * Icon name from the design system icon library
+     * Example: 'remixLightbulbLine', 'remixFolder3Line'
+     */
+    iconName: string;
+    /**
+     * Number of items in the folder
+     */
+    itemCount: number;
+    /**
+     * Label text displayed below the folder
+     */
+    label: string;
+    /**
+     * Optional items data for the handbook folder
+     */
+    items?: HandbookItem[];
+    /**
+     * Track open/closed state for animation
+     */
+    isOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Get the CSS variable name for the color variant
+     */
+    getColorVar(suffix: 'base' | 'strong'): string;
+    /**
+     * Open folder animation
+     */
+    open(): void;
+    /**
+     * Close folder animation
+     */
+    close(): void;
+    /**
+     * Handle touch start - open animation
+     */
+    onTouchStart(event: TouchEvent): void;
+    /**
+     * Handle touch end - close animation
+     */
+    onTouchEnd(): void;
+    /**
+     * Handle touch cancel - close animation
+     */
+    onTouchCancel(): void;
+    /**
+     * Handle click - open modal
+     */
+    onClick(): Promise<void>;
+    /**
+     * Calculate the number of page sheets to display
+     * Max 6 sheets regardless of item count
+     */
+    getPageSheets(): number[];
+    constructor(handbookModal: DsMobileHandbookDetailModalService);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHandbookFolderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookFolderComponent, "ds-mobile-handbook-folder", never, { "variant": { "alias": "variant"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "itemCount": { "alias": "itemCount"; "required": false; }; "label": { "alias": "label"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileHandbookFolderMiniComponent
+ *
+ * A minimized folder icon component for use in headers and small spaces.
+ * Simplified version without animations or page sheets - just folder and icon.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-handbook-folder-mini
+ *   [variant]="'pink'"
+ *   [iconName]="'remixLightbulbLine'">
+ * </ds-mobile-handbook-folder-mini>
+ * ```
+ */
+declare class DsMobileHandbookFolderMiniComponent {
+    /**
+     * Color variant for the folder
+     * Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
+     */
+    variant: string;
+    /**
+     * Icon name from the design system icon library
+     */
+    iconName: string;
+    /**
+     * Get the CSS variable name for the color variant
+     */
+    getColorVar(suffix: 'base' | 'strong'): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHandbookFolderMiniComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookFolderMiniComponent, "ds-mobile-handbook-folder-mini", never, { "variant": { "alias": "variant"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabsComponent, MobilePageBase, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent };
+export type { ActionGroup, ActionItem, ActionResult, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContentWidth, HeaderVariant, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig };