@propbinder/mobile-design 0.1.14 → 0.1.16

package/index.d.ts

@@ -2,6 +2,7 @@ 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 { ControlValueAccessor } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Animation } from '@ionic/angular';
 
@@ -105,6 +106,7 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
     private platform;
     private modalController;
     private router;
+    private whitelabelDemoModal;
     isNativePlatform: _angular_core.Signal<boolean>;
     title: _angular_core.InputSignal<string>;
     headerTitle: _angular_core.InputSignal<string>;
@@ -375,226 +377,6 @@ declare class TileValueComponent {
     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
  *
@@ -1188,6 +970,110 @@ declare class DsMobileInteractiveListItemPostComponent {
     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>;
 }
+/**
+ * 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>;
+}
 
 /**
  * PostPdfAttachmentComponent
@@ -1404,156 +1290,18 @@ declare class DsMobileContactListItemComponent {
     /**
      * 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;
-}
-/**
- * DsMobileTabBarComponent
- *
- * Responsive navigation tab bar that adapts from mobile to desktop:
- * - Mobile (< 768px): Bottom tab bar with icons + labels
- * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
- *
- * Use this component INSIDE your own `ion-tabs` when Angular routing
- * requires `ion-tabs` to be a direct child in your component.
- *
- * @example
- * ```html
- * <!-- In your component with child routes -->
- * <ion-tabs>
- *   <ds-mobile-tab-bar
- *     [tabs]="tabs"
- *     [avatarInitials]="'JD'"
- *     (avatarClick)="handleAvatarClick()"
- *   />
- * </ion-tabs>
- * ```
- */
-declare class DsMobileTabBarComponent implements OnInit, AfterViewInit, OnDestroy {
-    private elementRef;
-    tabs: TabConfig$1[];
-    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?;
-    private resizeObserver?;
-    private mediaQuery?;
-    constructor(elementRef: ElementRef);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    private setupBreakpointDetection;
-    private handleBreakpointChange;
-    private setupTitleRemovalObserver;
-    private removeTitleAttributes;
-    trackByTabId(index: number, tab: TabConfig$1): string;
-    isTabActive(tabId: string): boolean;
-    handleAvatarClick(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabBarComponent, "ds-mobile-tab-bar", 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>;
-}
-
-/**
- * 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.
- *
- * NOTE: This component wraps `ion-tabs` internally. If your Angular
- * routing requires `ion-tabs` to be a direct child in your component
- * (e.g., when using `ion-router-outlet` in app.html), use the
- * `DsMobileTabBarComponent` directly inside your own `ion-tabs` instead.
- *
- * @example
- * ```html
- * <ds-mobile-tabs
- *   [tabs]="tabsConfig"
- *   [avatarInitials]="'JD'"
- *   (avatarClick)="handleAvatarClick()"
- * />
- * ```
- */
-declare class DsMobileTabsComponent implements OnInit {
-    tabs: TabConfig$1[];
-    avatarType: 'initials' | 'photo' | 'icon';
-    avatarInitials: string;
-    avatarSrc: string;
-    avatarIconName: string;
-    avatarClick: EventEmitter<void>;
-    constructor();
-    ngOnInit(): void;
-    trackByTabId(index: number, tab: TabConfig$1): string;
-    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 InlineTabItem {
-    id: string;
-    label: string;
-    badge?: number;
-}
-/**
- * DsMobileInlineTabsComponent
- *
- * Pill-style inline tabs for filtering/switching views
- * Used in the purple header section of pages
- *
- * @example
- * ```html
- * <ds-mobile-inline-tabs
- *   [tabs]="[
- *     { id: 'all', label: 'All' },
- *     { id: 'open', label: 'Open' },
- *     { id: 'closed', label: 'Closed' }
- *   ]"
- *   [activeTab]="'all'"
- *   (tabChange)="handleTabChange($event)">
- * </ds-mobile-inline-tabs>
- * ```
- */
-declare class DsMobileInlineTabsComponent {
-    /**
-     * Array of tab items to display
-     */
-    tabs: _angular_core.InputSignal<InlineTabItem[]>;
+    clickable: _angular_core.InputSignal<boolean>;
     /**
-     * Currently active tab ID
+     * Whether to show chevron icon
      */
-    activeTab: _angular_core.InputSignal<string>;
+    showChevron: _angular_core.InputSignal<boolean>;
     /**
-     * Emitted when a tab is clicked
+     * Emits when the contact item is clicked (if clickable)
      */
-    tabChange: _angular_core.OutputEmitterRef<string>;
-    handleTabClick(tabId: string): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInlineTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlineTabsComponent, "ds-mobile-inline-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+    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 ActionResult {
@@ -1787,6 +1535,213 @@ declare class DsMobilePostCreateBottomSheetComponent implements AfterViewInit, O
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostCreateBottomSheetComponent, "ds-mobile-post-create-bottom-sheet", never, {}, {}, never, never, true, never>;
 }
 
+interface TabConfig {
+    id: string;
+    label: string;
+    route: string;
+    icon: string;
+    iconActive: string;
+}
+/**
+ * DsMobileTabBarComponent
+ *
+ * Responsive navigation tab bar that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
+ *
+ * Use this component INSIDE your own `ion-tabs` when Angular routing
+ * requires `ion-tabs` to be a direct child in your component.
+ *
+ * @example
+ * ```html
+ * <!-- In your component with child routes -->
+ * <!-- IMPORTANT: Add class="ds-tabs-wrapper" to ion-tabs for proper styling -->
+ * <ion-tabs class="ds-tabs-wrapper">
+ *   <ds-mobile-tab-bar
+ *     [tabs]="tabs"
+ *     [avatarInitials]="'JD'"
+ *     [profileMenuItems]="profileMenuItems"
+ *     (profileActionSelected)="handleProfileAction($event)"
+ *   />
+ * </ion-tabs>
+ * ```
+ *
+ * @example With profile menu configuration
+ * ```typescript
+ * profileMenuItems: ActionGroup[] = [
+ *   {
+ *     actions: [
+ *       { action: 'profile', title: 'My Profile', icon: 'remixUser3Line' },
+ *       { action: 'settings', title: 'Settings', icon: 'remixSettings3Line' }
+ *     ]
+ *   },
+ *   {
+ *     actions: [
+ *       { action: 'logout', title: 'Log Out', icon: 'remixLogoutBoxLine', destructive: true }
+ *     ]
+ *   }
+ * ];
+ *
+ * handleProfileAction(result: ActionResult): void {
+ *   switch (result.action) {
+ *     case 'profile': // Navigate to profile
+ *     case 'settings': // Navigate to settings
+ *     case 'logout': // Handle logout
+ *   }
+ * }
+ * ```
+ *
+ * @note When using this component, you must add the class "ds-tabs-wrapper"
+ * to your `ion-tabs` element, or manually apply these styles:
+ * ```css
+ * ion-tabs {
+ *   height: 100%;
+ *   background: var(--color-brand-secondary);
+ * }
+ * ```
+ */
+declare class DsMobileTabBarComponent implements OnInit, AfterViewInit, OnDestroy {
+    private elementRef;
+    tabs: TabConfig[];
+    avatarType: 'initials' | 'photo' | 'icon';
+    avatarInitials: string;
+    avatarSrc: string;
+    avatarIconName: string;
+    /**
+     * Profile menu action groups to display when avatar is clicked.
+     * If not provided, only the avatarClick event will be emitted.
+     *
+     * @example
+     * ```typescript
+     * profileMenuItems: ActionGroup[] = [
+     *   {
+     *     actions: [
+     *       { action: 'profile', title: 'My Profile', icon: 'remixUser3Line' },
+     *       { action: 'settings', title: 'Settings', icon: 'remixSettings3Line' }
+     *     ]
+     *   }
+     * ];
+     * ```
+     */
+    profileMenuItems?: ActionGroup[];
+    avatarClick: EventEmitter<void>;
+    /**
+     * Emitted when a profile menu action is selected.
+     * Parent component should handle the action logic (navigation, logout, etc.).
+     */
+    profileActionSelected: EventEmitter<ActionResult>;
+    activeTab: _angular_core.WritableSignal<string>;
+    isDesktop: _angular_core.WritableSignal<boolean>;
+    private mutationObserver?;
+    private slotEnforcementObserver?;
+    private resizeObserver?;
+    private mediaQuery?;
+    private routerSubscription?;
+    private router?;
+    private modalController;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    private updateSlot;
+    private setupSlotEnforcement;
+    ngOnDestroy(): void;
+    private setupBreakpointDetection;
+    private handleBreakpointChange;
+    private setupTitleRemovalObserver;
+    private removeTitleAttributes;
+    private setupActiveTabDetection;
+    private updateActiveTabFromDOM;
+    trackByTabId(index: number, tab: TabConfig): string;
+    isTabActive(tabRoute: string): boolean;
+    /**
+     * Handle avatar click - opens profile menu if configured, otherwise just emits avatarClick
+     */
+    handleAvatarClick(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabBarComponent, "ds-mobile-tab-bar", 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; }; "profileMenuItems": { "alias": "profileMenuItems"; "required": false; }; }, { "avatarClick": "avatarClick"; "profileActionSelected": "profileActionSelected"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ *
+ * NOTE: This component wraps `ion-tabs` internally. If your Angular
+ * routing requires `ion-tabs` to be a direct child in your component
+ * (e.g., when using `ion-router-outlet` in app.html), use the
+ * `DsMobileTabBarComponent` directly inside your own `ion-tabs` instead.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-tabs
+ *   [tabs]="tabsConfig"
+ *   [avatarInitials]="'JD'"
+ *   (avatarClick)="handleAvatarClick()"
+ * />
+ * ```
+ */
+declare class DsMobileTabsComponent implements OnInit {
+    tabs: TabConfig[];
+    avatarType: 'initials' | 'photo' | 'icon';
+    avatarInitials: string;
+    avatarSrc: string;
+    avatarIconName: string;
+    avatarClick: EventEmitter<void>;
+    constructor();
+    ngOnInit(): void;
+    trackByTabId(index: number, tab: TabConfig): string;
+    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 InlineTabItem {
+    id: string;
+    label: string;
+    badge?: number;
+}
+/**
+ * DsMobileInlineTabsComponent
+ *
+ * Pill-style inline tabs for filtering/switching views
+ * Used in the purple header section of pages
+ *
+ * @example
+ * ```html
+ * <ds-mobile-inline-tabs
+ *   [tabs]="[
+ *     { id: 'all', label: 'All' },
+ *     { id: 'open', label: 'Open' },
+ *     { id: 'closed', label: 'Closed' }
+ *   ]"
+ *   [activeTab]="'all'"
+ *   (tabChange)="handleTabChange($event)">
+ * </ds-mobile-inline-tabs>
+ * ```
+ */
+declare class DsMobileInlineTabsComponent {
+    /**
+     * Array of tab items to display
+     */
+    tabs: _angular_core.InputSignal<InlineTabItem[]>;
+    /**
+     * Currently active tab ID
+     */
+    activeTab: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when a tab is clicked
+     */
+    tabChange: _angular_core.OutputEmitterRef<string>;
+    handleTabClick(tabId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInlineTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlineTabsComponent, "ds-mobile-inline-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}
+
 /**
  * Media file types supported by the lightbox
  */
@@ -2489,32 +2444,92 @@ declare class DsMobileModalService {
 
 /**
  * Post data interface for the modal
+ *
+ * Represents a post with its content, author info, and comments.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const postData: PostDetailData = {
+ *   postId: '123',
+ *   authorName: 'John Doe',
+ *   authorRole: 'Tenant',
+ *   timestamp: '2h ago',
+ *   avatarInitials: 'JD',
+ *   content: 'Post content here...',
+ *   likeCount: 42,
+ *   commentCount: 12,
+ *   comments: [...]
+ * };
+ * ```
  */
 interface PostDetailData {
+    /** Unique post identifier */
     postId: string;
+    /** Post author name */
     authorName: string;
+    /** Author role (e.g., 'Tenant', 'Manager') */
     authorRole: string;
+    /** Post timestamp (e.g., '2h ago', 'Yesterday') */
     timestamp: string;
+    /** Author avatar initials (1-2 letters) */
     avatarInitials?: string;
+    /** Avatar display type */
     avatarType?: 'photo' | 'initials';
+    /** Author avatar image URL */
     avatarSrc?: string;
+    /** Post text content */
     content: string;
+    /** Optional post image URL */
     imageSrc?: string;
+    /** Image alt text */
     imageAlt?: string;
+    /** Whether the current user has liked this post */
     isLiked?: boolean;
+    /** Number of likes */
     likeCount?: number;
+    /** Number of comments */
     commentCount?: number;
+    /** Array of comments */
     comments?: CommentData[];
+    /** Auto-focus comment input when modal opens */
     focusComment?: boolean;
 }
+/**
+ * Comment data interface
+ *
+ * Represents a single comment on a post.
+ *
+ * @example
+ * ```typescript
+ * const comment: CommentData = {
+ *   authorName: 'Jane Smith',
+ *   authorRole: 'Tenant',
+ *   timestamp: '1h ago',
+ *   avatarInitials: 'JS',
+ *   content: 'Great post!',
+ *   isLiked: false,
+ *   likeCount: 5,
+ *   isOwnComment: false
+ * };
+ * ```
+ */
 interface CommentData {
+    /** Comment author name */
     authorName: string;
+    /** Author role */
     authorRole: string;
+    /** Comment timestamp */
     timestamp: string;
+    /** Author avatar initials */
     avatarInitials: string;
+    /** Comment text content */
     content: string;
+    /** Whether the current user has liked this comment */
     isLiked?: boolean;
+    /** Number of likes on this comment */
     likeCount?: number;
+    /** Whether this comment belongs to the current user */
     isOwnComment?: boolean;
 }
 /**
@@ -2551,6 +2566,16 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
     private lightbox;
     private bottomSheet;
     postData: PostDetailData;
+    /**
+     * Loading state - when true, shows loading indicator
+     * Set this to true while fetching post data from your API
+     */
+    loading: boolean;
+    /**
+     * Error state - when set, shows error message
+     * Set this to an error message string if API call fails
+     */
+    error?: string;
     commentInput?: ElementRef<HTMLTextAreaElement>;
     post: _angular_core.WritableSignal<PostDetailData>;
     commentText: _angular_core.WritableSignal<string>;
@@ -2638,7 +2663,7 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
      */
     handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -2691,9 +2716,13 @@ declare class DsMobilePostDetailModalService {
      * Open the post detail modal
      *
      * @param postData Post data to display
+     * @param options Optional loading and error states
      * @returns Promise that resolves when the modal is presented
      */
-    open(postData: PostDetailData): Promise<void>;
+    open(postData: PostDetailData, options?: {
+        loading?: boolean;
+        error?: string;
+    }): Promise<void>;
     /**
      * Close the currently open post detail modal
      *
@@ -2713,30 +2742,111 @@ declare class DsMobilePostDetailModalService {
 
 /**
  * Handbook detail data interface
+ *
+ * Represents a handbook category/folder with its sections/items.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const handbookData: HandbookDetailData = {
+ *   title: 'Access Systems',
+ *   variant: 'blue',
+ *   iconName: 'remixKey2Line',
+ *   itemCount: 5,
+ *   items: [...]
+ * };
+ * ```
  */
 interface HandbookDetailData {
+    /** Category/folder title */
     title: string;
+    /** Color variant: 'success', 'warning', 'destructive', 'blue', 'light-purple', 'pink', 'salmon-orange', 'orange', 'lime-green', 'grey' */
     variant: string;
+    /** Icon name from design system (e.g., 'remixKey2Line', 'remixLightbulbLine') */
     iconName: string;
+    /** Total number of items/sections in this category */
     itemCount: number;
+    /** Array of handbook sections/items */
     items?: HandbookItem[];
 }
+/**
+ * Handbook section/item interface
+ *
+ * Represents a single section within a handbook category.
+ * Each section can have a title, description, images, contacts, and attachments.
+ *
+ * @example
+ * ```typescript
+ * const item: HandbookItem = {
+ *   title: 'Key Box Entrance',
+ *   description: 'Key box located at main entrance...',
+ *   images: ['https://api.example.com/images/keybox.jpg'],
+ *   contacts: [{ name: 'Security Co', initials: 'S', phoneNumber: '+45 12345678' }],
+ *   attachments: [{ name: 'Manual.pdf', type: 'pdf', url: 'https://...' }]
+ * };
+ * ```
+ */
 interface HandbookItem {
+    /** Section title */
     title: string;
+    /** Optional section description */
     description?: string;
+    /** Array of image URLs to display */
     images?: string[];
+    /** Array of file attachments */
     attachments?: AttachmentItem[];
+    /** Array of contact information */
     contacts?: ContactItem[];
 }
+/**
+ * File attachment interface
+ *
+ * Represents a file attachment in a handbook section.
+ *
+ * @example
+ * ```typescript
+ * const attachment: AttachmentItem = {
+ *   name: 'Installation_Manual.pdf',
+ *   type: 'pdf',
+ *   url: 'https://api.example.com/files/manual.pdf'
+ * };
+ * ```
+ */
 interface AttachmentItem {
+    /** File name to display */
     name: string;
+    /** File type: 'pdf', 'doc', etc. (used for icon display) */
     type?: string;
+    /** Optional URL for downloading/opening the file */
+    url?: string;
 }
+/**
+ * Contact information interface
+ *
+ * Represents contact information in a handbook section.
+ *
+ * @example
+ * ```typescript
+ * const contact: ContactItem = {
+ *   name: 'Propbinder ApS',
+ *   initials: 'P',
+ *   contactPerson: 'John Doe',
+ *   phoneNumber: '+45 12345678',
+ *   email: 'support@propbinder.dk'
+ * };
+ * ```
+ */
 interface ContactItem {
+    /** Company or contact name */
     name: string;
+    /** Initials for avatar (1-2 letters) */
     initials: string;
+    /** Optional contact person name */
     contactPerson?: string;
+    /** Optional phone number */
     phoneNumber?: string;
+    /** Optional email address */
+    email?: string;
 }
 /**
  * DsMobileHandbookDetailModalComponent
@@ -2756,6 +2866,14 @@ interface ContactItem {
 declare class DsMobileHandbookDetailModalComponent {
     private modalController;
     handbookData: HandbookDetailData;
+    /**
+     * Loading state - when true, shows loading indicator
+     */
+    loading: boolean;
+    /**
+     * Error state - when set, shows error message
+     */
+    error?: string;
     handbook: _angular_core.WritableSignal<HandbookDetailData>;
     constructor(modalController: ModalController);
     ngOnInit(): void;
@@ -2785,7 +2903,7 @@ declare class DsMobileHandbookDetailModalComponent {
      */
     handleAttachmentClick(attachment: AttachmentItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHandbookDetailModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookDetailModalComponent, "ds-mobile-handbook-detail-modal", never, { "handbookData": { "alias": "handbookData"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookDetailModalComponent, "ds-mobile-handbook-detail-modal", never, { "handbookData": { "alias": "handbookData"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -2833,9 +2951,13 @@ declare class DsMobileHandbookDetailModalService {
      * Open the handbook detail modal
      *
      * @param handbookData Handbook data to display
+     * @param options Optional loading and error states
      * @returns Promise that resolves when the modal is presented
      */
-    open(handbookData: HandbookDetailData): Promise<void>;
+    open(handbookData: HandbookDetailData, options?: {
+        loading?: boolean;
+        error?: string;
+    }): Promise<void>;
     /**
      * Close the currently open handbook detail modal
      *
@@ -2892,16 +3014,28 @@ declare class DsMobileHandbookFolderComponent {
     iconName: string;
     /**
      * Number of items in the folder
+     * This should match the length of the items array when data is loaded
      */
     itemCount: number;
     /**
-     * Label text displayed below the folder
+     * Label text displayed below the folder (category name)
      */
     label: string;
     /**
      * Optional items data for the handbook folder
+     * Pass the HandbookItem[] array from your API response here
      */
     items?: HandbookItem[];
+    /**
+     * Loading state - when true, shows "Loading..." indicator instead of item count
+     * Set this to true while fetching data from your API
+     */
+    loading: boolean;
+    /**
+     * Error state - when set, shows "Error" indicator instead of item count
+     * Set this to an error message string if API call fails
+     */
+    error?: string;
     /**
      * Track open/closed state for animation
      */
@@ -2932,6 +3066,7 @@ declare class DsMobileHandbookFolderComponent {
     onTouchCancel(): void;
     /**
      * Handle click - open modal
+     * Only opens modal if not in loading or error state
      */
     onClick(): Promise<void>;
     /**
@@ -2941,7 +3076,7 @@ declare class DsMobileHandbookFolderComponent {
     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>;
+    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; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -2976,6 +3111,87 @@ declare class DsMobileHandbookFolderMiniComponent {
     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>;
 }
 
+/**
+ * DsTextInputComponent
+ *
+ * Mobile-first text input field component following the design system.
+ * Supports email, phone, text, and other input types.
+ *
+ * Features:
+ * - All design system states (default, hover, focus, error, disabled)
+ * - Validation error state with destructive border color
+ * - Automatic error clearing when input becomes valid (configurable)
+ * - Built-in validation based on input type or custom validator function
+ * - Accessible with proper ARIA attributes
+ * - ControlValueAccessor for Angular forms integration
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ds-text-input
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [(ngModel)]="email">
+ * </ds-text-input>
+ *
+ * <!-- With validation error and auto-clear -->
+ * <ds-text-input
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [hasError]="emailInvalid"
+ *   errorMessage="Please enter a valid email"
+ *   [autoClearError]="true"
+ *   (errorCleared)="emailInvalid = false"
+ *   [(ngModel)]="email">
+ * </ds-text-input>
+ *
+ * <!-- With custom validator -->
+ * <ds-text-input
+ *   type="text"
+ *   placeholder="Enter phone number"
+ *   [validator]="phoneValidator"
+ *   [hasError]="phoneInvalid"
+ *   (errorCleared)="phoneInvalid = false"
+ *   [(ngModel)]="phone">
+ * </ds-text-input>
+ * ```
+ */
+declare class DsTextInputComponent implements ControlValueAccessor {
+    type: _angular_core.InputSignal<"text" | "email" | "tel" | "password" | "url" | "search">;
+    placeholder: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    hasError: _angular_core.InputSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string>;
+    autocomplete: _angular_core.InputSignal<string>;
+    inputmode: _angular_core.InputSignal<"text" | "email" | "tel" | "url" | "search" | "numeric" | undefined>;
+    autoClearError: _angular_core.InputSignal<boolean>;
+    validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    blur: _angular_core.OutputEmitterRef<FocusEvent>;
+    focus: _angular_core.OutputEmitterRef<FocusEvent>;
+    errorCleared: _angular_core.OutputEmitterRef<void>;
+    private _value;
+    value: _angular_core.Signal<string>;
+    inputId: string;
+    private onChange;
+    private onTouched;
+    onInput(event: Event): void;
+    /**
+     * Validates the input value based on type or custom validator
+     */
+    private validateInput;
+    onBlur(): void;
+    onFocus(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTextInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTextInputComponent, "ds-text-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "autoClearError": { "alias": "autoClearError"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "errorCleared": "errorCleared"; }, never, never, true, never>;
+}
+
 /**
  * User service for managing current user data globally
  */
@@ -3129,23 +3345,33 @@ declare class MobileInquiryDetailPageComponent extends MobilePageBase implements
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileInquiryDetailPageComponent, "app-mobile-inquiry-detail-page", never, {}, {}, never, never, true, never>;
 }
 
-interface TabConfig {
-    id: string;
-    label: string;
-    route: string;
-    icon: string;
-    iconActive: string;
-}
-
+/**
+ * MobileTabsExampleComponent
+ *
+ * Example page using the TenantApp pattern:
+ * - Uses ion-tabs as wrapper (required for Angular routing)
+ * - Uses ds-mobile-tab-bar inside (not ds-mobile-tabs)
+ *
+ * This matches the pattern used in TenantApp for consistency.
+ */
 declare class MobileTabsExampleComponent implements OnInit {
     userService: UserService;
-    private modalController;
     private router;
     private whitelabelDemoModal;
-    constructor(userService: UserService, modalController: ModalController, router: Router);
+    constructor(userService: UserService, router: Router);
     ngOnInit(): void;
     tabs: TabConfig[];
-    handleAvatarClick(): Promise<void>;
+    /**
+     * Profile menu items configuration.
+     * Define once here, and the tab bar component handles opening/closing the menu.
+     */
+    profileMenuItems: ActionGroup[];
+    /**
+     * Handle profile menu action selection.
+     * The tab bar component handles the UI (opening/closing menu),
+     * this method handles the business logic.
+     */
+    handleProfileAction(result: ActionResult): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileTabsExampleComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileTabsExampleComponent, "app-mobile-tabs-example", never, {}, {}, never, never, true, never>;
 }
@@ -3341,5 +3567,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
-export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig$1 as TabConfig, WhitelabelConfig };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };