@propbinder/mobile-design 0.2.13 → 0.2.15

package/index.d.ts

@@ -1,9 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, OnInit, ElementRef, Injector, TemplateRef, OnDestroy, EventEmitter, ApplicationRef, EnvironmentInjector, Type, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { OnDestroy, AfterViewInit, OnInit, ElementRef, Injector, TemplateRef, EventEmitter, ApplicationRef, EnvironmentInjector, Type, AfterContentInit, ChangeDetectorRef } from '@angular/core';
 import { ModalController, IonContent, NavController, GestureController, ModalOptions as ModalOptions$1 } from '@ionic/angular/standalone';
+import { Style } from '@capacitor/status-bar';
 import { ImpactStyle } from '@capacitor/haptics';
 import { DsTextareaComponent } from '@propbinder/design-system';
 import { ControlValueAccessor } from '@angular/forms';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Router, ActivatedRoute } from '@angular/router';
 import * as rxjs from 'rxjs';
 import * as _propbinder_mobile_design from '@propbinder/mobile-design';
@@ -17,20 +19,29 @@ import { Animation } from '@ionic/angular';
  * - 'full' - 100% width (no max)
  */
 type ContentWidth = 'narrow' | 'standard' | 'wide' | 'full';
+/**
+ * Network status type
+ */
+type NetworkStatus = 'online' | 'offline' | 'unknown';
 /**
  * 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.
+ * Provides consistent content width control and network status monitoring 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
  *
+ * **Network Monitoring:**
+ * - Tracks online/offline status via Capacitor Network plugin (native) or browser API (web)
+ * - Exposes `isOffline()` computed signal for easy consumption by child components
+ * - Pages can use this to conditionally disable features or show offline indicators
+ *
  * @internal This is a base class and should not be used directly.
  */
-declare abstract class MobilePageBase {
+declare abstract class MobilePageBase implements OnDestroy {
     /**
      * Maximum content width (desktop only)
      *
@@ -61,6 +72,68 @@ declare abstract class MobilePageBase {
      * @internal
      */
     protected maxWidthValue: _angular_core.Signal<string>;
+    /**
+     * Network status signal
+     * Tracks current online/offline state
+     *
+     * @internal
+     */
+    protected networkStatus: _angular_core.WritableSignal<NetworkStatus>;
+    /**
+     * Is the device currently offline?
+     * Public computed signal for consumption by child components and pages
+     *
+     * @example
+     * ```typescript
+     * // In a page component
+     * @ViewChild(DsMobilePageMainComponent) pageComponent!: DsMobilePageMainComponent;
+     *
+     * get isOffline() {
+     *   return this.pageComponent?.isOffline();
+     * }
+     * ```
+     */
+    isOffline: _angular_core.Signal<boolean>;
+    /**
+     * Is the device currently online?
+     * Public computed signal for consumption by child components and pages
+     */
+    isOnline: _angular_core.Signal<boolean>;
+    /**
+     * Network listener ID for Capacitor Network plugin
+     * Used to clean up listener on destroy
+     *
+     * @internal
+     */
+    private networkListenerId?;
+    /**
+     * Browser API event handlers
+     * Stored as class properties for proper cleanup
+     *
+     * @internal
+     */
+    private handleOnline;
+    private handleOffline;
+    /**
+     * Initialize network status monitoring
+     * Uses Capacitor Network plugin for native apps, browser API for web
+     *
+     * @param isNative - Whether running on native platform (iOS/Android)
+     * @internal Called by child components in ngAfterViewInit
+     */
+    protected initNetworkMonitoring(isNative: boolean): Promise<void>;
+    /**
+     * Initialize browser-based network monitoring
+     * Uses navigator.onLine and window events
+     *
+     * @internal
+     */
+    private initBrowserNetworkMonitoring;
+    /**
+     * Cleanup network monitoring listeners
+     * Called automatically on component destroy
+     */
+    ngOnDestroy(): void;
     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>;
 }
@@ -273,6 +346,7 @@ declare class DsMobilePostCreateBottomSheetComponent implements AfterViewInit, O
     private elementRef;
     textareaInput?: ElementRef<HTMLTextAreaElement>;
     fileInput?: ElementRef<HTMLInputElement>;
+    private whitelabelService;
     autoFocus: boolean;
     isReadonly: boolean;
     isEditMode: boolean;
@@ -308,11 +382,6 @@ declare class DsMobilePostCreateBottomSheetComponent implements AfterViewInit, O
     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;
@@ -499,6 +568,28 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
     showCondensedHeader: _angular_core.InputSignal<boolean>;
     scrollThreshold: _angular_core.InputSignal<number>;
     headerFadeDistance: _angular_core.InputSignal<number>;
+    /**
+     * Content wrapper padding
+     * - '0' (default) - No padding, use ds-mobile-section for content organization
+     * - '20px' - Legacy padding for content without sections
+     * - Any custom CSS padding value
+     *
+     * Note: Bottom padding for safe area and tab bar is always preserved
+     *
+     * @example
+     * ```html
+     * <!-- Default: sections handle padding -->
+     * <ds-mobile-page-main title="Home">
+     *   <ds-mobile-section>...</ds-mobile-section>
+     * </ds-mobile-page-main>
+     *
+     * <!-- Legacy: content without sections -->
+     * <ds-mobile-page-main title="Home" contentPadding="20px">
+     *   <div>Content without sections...</div>
+     * </ds-mobile-page-main>
+     * ```
+     */
+    contentPadding: _angular_core.InputSignal<string>;
     /**
      * Profile menu action groups to display when avatar is clicked.
      * If not provided, a default menu will be used (without Whitelabel Demo).
@@ -548,7 +639,7 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
      */
     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; }; "profileMenuItems": { "alias": "profileMenuItems"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "profileActionSelected": "profileActionSelected"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["[header-content]", "*"], true, 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; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "profileMenuItems": { "alias": "profileMenuItems"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "profileActionSelected": "profileActionSelected"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["[header-content]", "[offline-indicator]", "*"], true, never>;
 }
 
 interface InlineTabItem {
@@ -593,6 +684,176 @@ declare class DsMobileInlineTabsComponent {
     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>;
 }
 
+interface WhitelabelConfig {
+    logoUrl: string;
+    logoMarkUrl: string;
+    logoAlt: string;
+    logoSize: 'sm' | 'md' | 'lg' | 'xl';
+    logoWidth?: number;
+    logoHeight?: number;
+    logoMarkWidth?: number;
+    logoMarkHeight?: number;
+    appIconSurface: string;
+    appIconContent: string;
+    accent: string;
+    onAccent: string;
+    headerSurface: string;
+    headerContent: string;
+    headerAccent: string;
+    onHeaderAccent: string;
+    showCityIllustration: boolean;
+    signInBgType: 'solid' | 'gradient';
+    signInBgSolid: string;
+    signInBgGradientStart: string;
+    signInBgGradientEnd: string;
+    signInContentColor: string;
+    organizationName: string;
+    organizationId: string;
+}
+/**
+ * WhitelabelService
+ *
+ * Manages whitelabel configuration including logos and brand colors.
+ * Automatically updates CSS custom properties when colors change.
+ *
+ * @example
+ * Initialize with custom config:
+ * ```typescript
+ * whitelabelService.initialize({
+ *   logoUrl: '/Assets/logos/acme-logo.svg',
+ *   logoMarkUrl: '/Assets/logos/acme-mark.svg',
+ *   accent: '#2563eb',
+ *   onAccent: '#ffffff',
+ *   headerSurface: '#1e40af',
+ *   headerContent: '#ffffff',
+ *   organizationName: 'Acme Corp'
+ * });
+ * ```
+ *
+ * Load from API:
+ * ```typescript
+ * await whitelabelService.loadFromApi('acme-corp');
+ * ```
+ */
+declare class WhitelabelService {
+    private _config;
+    readonly logoUrl: _angular_core.Signal<string>;
+    readonly logoMarkUrl: _angular_core.Signal<string>;
+    readonly logoAlt: _angular_core.Signal<string>;
+    readonly logoSize: _angular_core.Signal<"sm" | "md" | "lg" | "xl">;
+    readonly logoHeight: _angular_core.Signal<number>;
+    readonly appIconSurface: _angular_core.Signal<string>;
+    readonly appIconContent: _angular_core.Signal<string>;
+    readonly accent: _angular_core.Signal<string>;
+    readonly onAccent: _angular_core.Signal<string>;
+    readonly headerSurface: _angular_core.Signal<string>;
+    readonly headerContent: _angular_core.Signal<string>;
+    readonly headerAccent: _angular_core.Signal<string>;
+    readonly onHeaderAccent: _angular_core.Signal<string>;
+    readonly showCityIllustration: _angular_core.Signal<boolean>;
+    readonly signInBgType: _angular_core.Signal<"solid" | "gradient">;
+    readonly signInBgSolid: _angular_core.Signal<string>;
+    readonly signInBgGradientStart: _angular_core.Signal<string>;
+    readonly signInBgGradientEnd: _angular_core.Signal<string>;
+    readonly signInContentColor: _angular_core.Signal<string>;
+    readonly organizationName: _angular_core.Signal<string>;
+    readonly organizationId: _angular_core.Signal<string>;
+    readonly signInBgStyle: _angular_core.Signal<string>;
+    readonly config: _angular_core.Signal<WhitelabelConfig>;
+    constructor();
+    /**
+     * Setup global listener for modal dismiss events
+     * Re-applies status bar after modals close to override Ionic's cached state restoration
+     */
+    private setupModalDismissListener;
+    /**
+     * Initialize whitelabel configuration
+     * Call this early in app initialization (app.config.ts or app.component.ts)
+     */
+    initialize(config: Partial<WhitelabelConfig>): void;
+    /**
+     * Load whitelabel config from API
+     * Typically called on app startup based on subdomain, user tenant, etc.
+     *
+     * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
+     */
+    loadFromApi(organizationId?: string): Promise<void>;
+    /**
+     * Update config dynamically (e.g., when user switches organizations)
+     */
+    updateConfig(updates: Partial<WhitelabelConfig>): void;
+    /**
+     * Update only the brand colors
+     */
+    updateColors(colors: {
+        appIconSurface?: string;
+        appIconContent?: string;
+        accent?: string;
+        onAccent?: string;
+        headerSurface?: string;
+        headerContent?: string;
+        headerAccent?: string;
+        onHeaderAccent?: string;
+    }): void;
+    /**
+     * Reset to default configuration
+     */
+    resetToDefault(): void;
+    /**
+     * Convert hex color to RGB values
+     */
+    private hexToRgb;
+    /**
+     * Calculate relative luminance of a color (WCAG standard)
+     * Returns a value between 0 (darkest) and 1 (lightest)
+     */
+    private getRelativeLuminance;
+    /**
+     * Determine if a color is light (needs dark status bar content)
+     */
+    private isColorLight;
+    /**
+     * Get the appropriate status bar style for a background color
+     * Public method for use by sign-in page
+     */
+    getStatusBarStyleForColor(color: string): Style;
+    /**
+     * Generate a hover state color by applying a black overlay
+     * This simulates the effect of overlaying #000000 with 10% opacity
+     *
+     * @param baseColor - Hex color to overlay on (e.g., '#6B5FF5')
+     * @param overlayColor - Overlay color (default: '#000000' for darkening)
+     * @param overlayAlpha - Opacity of overlay (0-1, default: 0.1 = 10%)
+     * @returns Hex color with overlay applied
+     *
+     * @example
+     * generateHoverColor('#6B5FF5') // Returns darker purple for hover state
+     * generateHoverColor('#FF0000', '#FFFFFF', 0.2) // Lighten red by 20%
+     */
+    private generateHoverColor;
+    /**
+     * Generate an active/pressed state color (darker than hover)
+     * Uses 20% black overlay for a more pronounced pressed effect
+     *
+     * @param baseColor - Hex color to overlay on
+     * @returns Hex color for active/pressed state
+     */
+    private generateActiveColor;
+    /**
+     * Apply colors to CSS custom properties and native StatusBar
+     * This updates the actual CSS variables used throughout the app
+     * and the native status bar color on mobile devices
+     */
+    private applyColors;
+    /**
+     * Update the native status bar color AND style
+     * Sets background color (Android) and content style (iOS/Android)
+     */
+    private updateNativeStatusBar;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WhitelabelService>;
+}
+
 /**
  * DsMobilePageDetailsComponent
  *
@@ -633,9 +894,19 @@ declare class DsMobilePageDetailsComponent extends MobilePageBase implements Aft
     private elementRef;
     ionContent?: IonContent;
     private platform;
+    whitelabelService: WhitelabelService;
     isNativePlatform: _angular_core.Signal<boolean>;
     title: _angular_core.InputSignal<string>;
     backRoute: _angular_core.InputSignal<string>;
+    /**
+     * Content wrapper padding
+     * - '0' (default) - No padding, use ds-mobile-section for content organization
+     * - '20px' - Legacy padding for content without sections
+     * - Any custom CSS padding value
+     *
+     * Note: Bottom padding for safe area and tab bar is always preserved
+     */
+    contentPadding: _angular_core.InputSignal<string>;
     tabs: _angular_core.InputSignal<InlineTabItem[] | undefined>;
     activeTab: _angular_core.InputSignal<string>;
     showRefresh: _angular_core.InputSignal<boolean>;
@@ -671,7 +942,7 @@ declare class DsMobilePageDetailsComponent extends MobilePageBase implements Aft
      */
     handleRefresh(event: any): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePageDetailsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePageDetailsComponent, "ds-mobile-page-details", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "backRoute": { "alias": "backRoute"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; "isSignal": true; }; "headerFadeDistance": { "alias": "headerFadeDistance"; "required": false; "isSignal": true; }; }, { "back": "back"; "tabChange": "tabChange"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["*"], true, never>;
+    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; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; "isSignal": true; }; "headerFadeDistance": { "alias": "headerFadeDistance"; "required": false; "isSignal": true; }; }, { "back": "back"; "tabChange": "tabChange"; "refresh": "refresh"; "scroll": "scroll"; }, never, ["[offline-indicator]", "*"], true, never>;
 }
 
 /**
@@ -680,18 +951,21 @@ declare class DsMobilePageDetailsComponent extends MobilePageBase implements Aft
  * Main content container for mobile pages with flexible layout options.
  * Provides consistent spacing and layout patterns.
  *
+ * **Note:** For production use, prefer `ds-mobile-section` for individual sections.
+ * This component is maintained for grid layouts and prototyping.
+ *
  * @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-section>...</ds-mobile-section>
+ *   <ds-mobile-section>...</ds-mobile-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>
+ *   <div>Grid item 1</div>
+ *   <div>Grid item 2</div>
  * </ds-mobile-content>
  * ```
  */
@@ -706,25 +980,6 @@ declare class DsMobileContentComponent {
     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
  *
@@ -747,6 +1002,128 @@ declare class ContentRowComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentRowComponent, "content-row", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * DsMobileSectionComponent
+ *
+ * Universal section component for mobile pages, modals, and content containers.
+ * Provides consistent layout with optional headlines, action links, flexible padding, and borders.
+ *
+ * **Features:**
+ * - Optional section headline with icon support
+ * - Optional action link with click handler
+ * - Flexible padding control
+ * - Border management (bottom border by default)
+ * - Works in pages, modals, and any content container
+ *
+ * **Usage Patterns:**
+ *
+ * @example
+ * ```html
+ * <!-- Section with headline and link -->
+ * <ds-mobile-section
+ *   headline="Recent Posts"
+ *   linkText="See all"
+ *   (linkClick)="navigate()">
+ *   <div class="posts-list">...</div>
+ * </ds-mobile-section>
+ *
+ * <!-- Section with icon in headline -->
+ * <ds-mobile-section
+ *   headline="Messages"
+ *   icon="remixChat3Line"
+ *   linkText="View all"
+ *   (linkClick)="viewMessages()">
+ *   <div class="messages">...</div>
+ * </ds-mobile-section>
+ *
+ * <!-- Empty state section (no headline) -->
+ * <ds-mobile-section>
+ *   <div class="empty-state">
+ *     <ds-avatar type="icon" iconName="remixInboxLine" />
+ *     <h3>No messages yet</h3>
+ *   </div>
+ * </ds-mobile-section>
+ *
+ * <!-- Last section without border -->
+ * <ds-mobile-section
+ *   headline="Contact"
+ *   [showBorder]="false">
+ *   <div class="contact-form">...</div>
+ * </ds-mobile-section>
+ *
+ * <!-- Section with custom padding -->
+ * <ds-mobile-section
+ *   headline="Photos"
+ *   padding="20px 0">
+ *   <div class="photo-grid">...</div>
+ * </ds-mobile-section>
+ *
+ * <!-- Full-width section in page (default behavior) -->
+ * <ds-mobile-page-main title="Home">
+ *   <ds-mobile-section headline="Posts">
+ *     <div class="posts">...</div>
+ *   </ds-mobile-section>
+ * </ds-mobile-page-main>
+ * ```
+ */
+declare class DsMobileSectionComponent {
+    /**
+     * Section headline text
+     * @default ''
+     */
+    headline: _angular_core.InputSignal<string>;
+    /**
+     * Optional icon to display before headline
+     * @default ''
+     */
+    icon: _angular_core.InputSignal<string>;
+    /**
+     * Link text (e.g., "See all", "View more")
+     * When provided, displays a clickable link in the section header
+     * @default ''
+     */
+    linkText: _angular_core.InputSignal<string>;
+    /**
+     * Section padding
+     * Accepts any valid CSS padding value
+     * When not set, defaults to 20px on mobile and 32px on desktop
+     * @default ''
+     */
+    padding: _angular_core.InputSignal<string>;
+    /**
+     * Gap between section header and content
+     * Accepts any valid CSS gap value
+     * @default '12px'
+     */
+    gap: _angular_core.InputSignal<string>;
+    /**
+     * Gap between child elements within section-content
+     * Accepts any valid CSS gap value
+     * @default '12px'
+     */
+    contentGap: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show bottom border
+     * @default true
+     */
+    showBorder: _angular_core.InputSignal<boolean>;
+    /**
+     * CSS overflow property for the section
+     * @default 'visible'
+     */
+    overflow: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when section link is clicked
+     */
+    linkClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Handle link click event
+     */
+    handleLinkClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSectionComponent, "ds-mobile-section", never, { "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "linkText": { "alias": "linkText"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "contentGap": { "alias": "contentGap"; "required": false; "isSignal": true; }; "showBorder": { "alias": "showBorder"; "required": false; "isSignal": true; }; "overflow": { "alias": "overflow"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, ["*"], true, never>;
+}
+
 /**
  * DsMobileHeaderContentComponent
  *
@@ -2532,7 +2909,7 @@ interface TabConfig {
  * ```css
  * ion-tabs {
  *   height: 100%;
- *   background: var(--color-brand-secondary);
+ *   background: var(--color-header-surface);
  * }
  * ```
  */
@@ -3115,12 +3492,21 @@ declare class DsMobileLightboxFooterComponent {
  * />
  * ```
  */
-declare class DsMobileInlinePhotoComponent {
+declare class DsMobileInlinePhotoComponent implements OnInit {
     private lightboxService;
     /**
      * Array of image URLs to display
      */
     images: string[];
+    /**
+     * Optional array of loading states for each image (by index)
+     * If provided, shows loader overlay for images that are still loading
+     */
+    loadingStates?: boolean[];
+    /**
+     * Internal signal to track image loading states
+     */
+    private internalLoadingStates;
     /**
      * Author information (passed to lightbox)
      */
@@ -3137,6 +3523,11 @@ declare class DsMobileInlinePhotoComponent {
      * Remaining images shown in lightbox only
      */
     maxVisible: number;
+    /**
+     * Whether to use grid layout (true) or flex-wrap layout (false)
+     * @default true
+     */
+    useGrid: boolean;
     /**
      * Event emitted when lightbox is opened
      */
@@ -3145,10 +3536,26 @@ declare class DsMobileInlinePhotoComponent {
         totalImages: number;
     }>;
     constructor(lightboxService: DsMobileLightboxService);
+    /**
+     * Initialize loading states for all visible images
+     */
+    ngOnInit(): void;
+    /**
+     * Handle image load event
+     */
+    onImageLoad(index: number): void;
+    /**
+     * Handle image error event
+     */
+    onImageError(index: number): void;
     /**
      * Get the first N images to display inline
      */
     get visibleImages(): string[];
+    /**
+     * Check if a specific image is loading
+     */
+    isImageLoading(index: number): boolean;
     /**
      * Calculate how many images are hidden
      */
@@ -3158,7 +3565,63 @@ declare class DsMobileInlinePhotoComponent {
      */
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlinePhotoComponent, "ds-mobile-inline-photo", never, { "images": { "alias": "images"; "required": false; }; "loadingStates": { "alias": "loadingStates"; "required": false; }; "author": { "alias": "author"; "required": false; }; "maxVisible": { "alias": "maxVisible"; "required": false; }; "useGrid": { "alias": "useGrid"; "required": false; }; }, { "photoClick": "photoClick"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileLoaderOverlayComponent
+ *
+ * Reusable loader overlay component that displays a spinner centered over its container.
+ * Designed to overlay images or other content during loading states.
+ *
+ * Features:
+ * - Semi-transparent white background overlay
+ * - Centered animated spinner
+ * - Customizable spinner size
+ * - Absolute positioning to cover parent
+ * - Accessible with proper z-index stacking
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <div style="position: relative;">
+ *   <img src="image.jpg" alt="Content" />
+ *   @if (isLoading) {
+ *     <ds-mobile-loader-overlay />
+ *   }
+ * </div>
+ *
+ * <!-- With custom spinner size -->
+ * <div style="position: relative;">
+ *   <div class="content">Loading content...</div>
+ *   <ds-mobile-loader-overlay [spinnerSize]="32" />
+ * </div>
+ *
+ * <!-- Over an image with rounded corners -->
+ * <div style="position: relative; border-radius: 12px; overflow: hidden;">
+ *   <img src="photo.jpg" />
+ *   <ds-mobile-loader-overlay [borderRadius]="12" />
+ * </div>
+ * ```
+ *
+ * @notes
+ * - Parent container must have position: relative for the overlay to work correctly
+ * - The overlay covers the entire parent element using inset: 0
+ * - Spinner animation runs continuously at 0.6s per rotation
+ */
+declare class DsMobileLoaderOverlayComponent {
+    /**
+     * Size of the spinner in pixels
+     * @default 24
+     */
+    spinnerSize: _angular_core.InputSignal<number>;
+    /**
+     * Border radius of the overlay in pixels (should match parent's border radius)
+     * @default 0
+     */
+    borderRadius: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLoaderOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLoaderOverlayComponent, "ds-mobile-loader-overlay", never, { "spinnerSize": { "alias": "spinnerSize"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -3421,9 +3884,32 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      */
     hasFixedBottom: _angular_core.InputSignal<boolean>;
     /**
-     * Emitted when modal is closed
-     */
-    closed: _angular_core.OutputEmitterRef<void>;
+     * Content padding for modal content
+     * Controls padding inside .modal-main-content
+     * - '0' (default) - No padding, use ds-mobile-section for content organization
+     * - '20px' - Legacy padding for content without sections
+     * - Any custom CSS padding value
+     *
+     * @default '0'
+     *
+     * @example
+     * ```html
+     * <!-- Default: sections handle padding -->
+     * <ds-mobile-modal-base headerTitle="Details">
+     *   <ds-mobile-section headline="Info">...</ds-mobile-section>
+     * </ds-mobile-modal-base>
+     *
+     * <!-- Legacy: content without sections -->
+     * <ds-mobile-modal-base headerTitle="Details" contentPadding="20px">
+     *   <div>Padded content</div>
+     * </ds-mobile-modal-base>
+     * ```
+     */
+    contentPadding: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when modal is closed
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
     /**
      * Emitted when keyboard is about to show
      * Provides keyboard height in pixels
@@ -3461,7 +3947,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      */
     protected cleanupKeyboardListeners(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileModalBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
 }
 
 /**
@@ -4881,6 +5367,7 @@ interface ContactItem {
  * This component is typically not used directly - use DsMobileHandbookDetailModalService instead.
  */
 declare class DsMobileHandbookDetailModalComponent implements OnInit {
+    private modalController;
     handbookData: HandbookDetailData;
     /**
      * Loading state - when true, shows loading indicator
@@ -4891,6 +5378,7 @@ declare class DsMobileHandbookDetailModalComponent implements OnInit {
      */
     error?: string;
     handbook: _angular_core.WritableSignal<HandbookDetailData>;
+    constructor(modalController: ModalController);
     ngOnInit(): void;
     /**
      * Split handbook items to enforce content structure rules:
@@ -4906,9 +5394,17 @@ declare class DsMobileHandbookDetailModalComponent implements OnInit {
      */
     getDisplayItems(): HandbookItem[];
     /**
-     * Handle contact click
+     * Handle contact click - shows bottom sheet with call and copy actions
      */
-    handleContactClick(contact: ContactItem): void;
+    handleContactClick(contact: ContactItem): Promise<void>;
+    /**
+     * Handle the selected contact action
+     */
+    private handleContactAction;
+    /**
+     * Fallback method for copying text to clipboard (for older browsers/webviews)
+     */
+    private fallbackCopyToClipboard;
     /**
      * Handle attachment click
      */
@@ -5267,127 +5763,43 @@ declare class DsMobileFabComponent implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFabComponent, "ds-mobile-fab", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "fabClick": "fabClick"; }, never, never, true, never>;
 }
 
-interface WhitelabelConfig {
-    logoUrl: string;
-    logoMarkUrl: string;
-    logoAlt: string;
-    logoWidth?: number;
-    logoHeight?: number;
-    logoMarkWidth?: number;
-    logoMarkHeight?: number;
-    primarySurface: string;
-    primaryContent: string;
-    secondarySurface: string;
-    secondaryContent: string;
-    organizationName: string;
-    organizationId: string;
-}
+type AppIconSize = 'sm' | 'md' | 'lg' | 'xl';
 /**
- * WhitelabelService
+ * DsAppIconComponent
  *
- * Manages whitelabel configuration including logos and brand colors.
- * Automatically updates CSS custom properties when colors change.
+ * Displays the organization's logomark styled as an app icon with rounded corners
+ * and shadow. The logomark fill color adapts to the background.
+ * Perfect for sign-in pages, splash screens, etc.
+ *
+ * Uses percentage-based padding and border-radius for perfect proportional scaling.
  *
  * @example
- * Initialize with custom config:
- * ```typescript
- * whitelabelService.initialize({
- *   logoUrl: '/Assets/logos/acme-logo.svg',
- *   logoMarkUrl: '/Assets/logos/acme-mark.svg',
- *   primaryColor: '#2563eb',
- *   secondaryColor: '#3b82f6',
- *   organizationName: 'Acme Corp'
- * });
+ * Sign-in page (large):
+ * ```html
+ * <ds-app-icon size="xl" />
  * ```
  *
- * Load from API:
- * ```typescript
- * await whitelabelService.loadFromApi('acme-corp');
+ * Settings preview (small):
+ * ```html
+ * <ds-app-icon size="sm" />
  * ```
  */
-declare class WhitelabelService {
-    private _config;
-    readonly logoUrl: _angular_core.Signal<string>;
-    readonly logoMarkUrl: _angular_core.Signal<string>;
-    readonly logoAlt: _angular_core.Signal<string>;
-    readonly logoHeight: _angular_core.Signal<number>;
-    readonly primarySurface: _angular_core.Signal<string>;
-    readonly primaryContent: _angular_core.Signal<string>;
-    readonly secondarySurface: _angular_core.Signal<string>;
-    readonly secondaryContent: _angular_core.Signal<string>;
-    readonly organizationName: _angular_core.Signal<string>;
-    readonly organizationId: _angular_core.Signal<string>;
-    readonly config: _angular_core.Signal<WhitelabelConfig>;
-    constructor();
-    /**
-     * Initialize whitelabel configuration
-     * Call this early in app initialization (app.config.ts or app.component.ts)
-     */
-    initialize(config: Partial<WhitelabelConfig>): void;
-    /**
-     * Load whitelabel config from API
-     * Typically called on app startup based on subdomain, user tenant, etc.
-     *
-     * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
-     */
-    loadFromApi(organizationId?: string): Promise<void>;
-    /**
-     * Update config dynamically (e.g., when user switches organizations)
-     */
-    updateConfig(updates: Partial<WhitelabelConfig>): void;
-    /**
-     * Update only the brand colors
-     */
-    updateColors(colors: {
-        primarySurface?: string;
-        primaryContent?: string;
-        secondarySurface?: string;
-        secondaryContent?: string;
-    }): void;
-    /**
-     * Reset to default configuration
-     */
-    resetToDefault(): void;
-    /**
-     * Convert hex color to RGB values
-     */
-    private hexToRgb;
-    /**
-     * Generate a hover state color by applying a black overlay
-     * This simulates the effect of overlaying #000000 with 10% opacity
-     *
-     * @param baseColor - Hex color to overlay on (e.g., '#6B5FF5')
-     * @param overlayColor - Overlay color (default: '#000000' for darkening)
-     * @param overlayAlpha - Opacity of overlay (0-1, default: 0.1 = 10%)
-     * @returns Hex color with overlay applied
-     *
-     * @example
-     * generateHoverColor('#6B5FF5') // Returns darker purple for hover state
-     * generateHoverColor('#FF0000', '#FFFFFF', 0.2) // Lighten red by 20%
-     */
-    private generateHoverColor;
-    /**
-     * Generate an active/pressed state color (darker than hover)
-     * Uses 20% black overlay for a more pronounced pressed effect
-     *
-     * @param baseColor - Hex color to overlay on
-     * @returns Hex color for active/pressed state
-     */
-    private generateActiveColor;
+declare class DsAppIconComponent {
+    whitelabelService: WhitelabelService;
     /**
-     * Apply colors to CSS custom properties and native StatusBar
-     * This updates the actual CSS variables used throughout the app
-     * and the native status bar color on mobile devices
+     * Size of the app icon
+     * - sm: 16x16px (padding: 2.4px, radius: 3.2px)
+     * - md: 32x32px (padding: 4.8px, radius: 6.4px)
+     * - lg: 48x48px (padding: 7.2px, radius: 9.6px)
+     * - xl: 64x64px (padding: 9.6px, radius: 12.8px)
      */
-    private applyColors;
+    size: AppIconSize;
     /**
-     * Update the native status bar color
-     * Note: This only works on Android. On iOS, the status bar is transparent
-     * and shows the web content behind it (controlled by CSS variables)
+     * Computed CSS class for size variant
      */
-    private updateNativeStatusBar;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WhitelabelService>;
+    sizeClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsAppIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsAppIconComponent, "ds-app-icon", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 type AvatarType = 'initials' | 'photo' | 'icon';
@@ -5419,10 +5831,50 @@ declare class DsAvatarWithBadgeComponent {
     showBadge: boolean;
     badgePosition: BadgePosition;
     badgeClasses: _angular_core.Signal<string>;
+    /**
+     * Computed badge icon size that scales with avatar size
+     * Maps avatar sizes to appropriate app icon sizes
+     */
+    badgeIconSize: _angular_core.Signal<AppIconSize>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsAvatarWithBadgeComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsAvatarWithBadgeComponent, "ds-avatar-with-badge", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "src": { "alias": "src"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+type LogoVariant = 'full' | 'mark';
+type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * DsLogoComponent
+ *
+ * Displays the whitelabeled logo or logomark based on current configuration.
+ * Automatically pulls logo assets from WhitelabelService.
+ *
+ * @example
+ * Full logo in header:
+ * ```html
+ * <ds-logo variant="full" size="md" />
+ * ```
+ *
+ * Logomark for compact spaces:
+ * ```html
+ * <ds-logo variant="mark" size="sm" />
+ * ```
+ */
+declare class DsLogoComponent {
+    whitelabelService: WhitelabelService;
+    variant: LogoVariant;
+    size: LogoSize;
+    customHeight?: number;
+    customWidth?: number;
+    get logoSrc(): string;
+    get logoAlt(): string;
+    /**
+     * Priority: customHeight input > whitelabel config logoHeight > default 32px
+     */
+    get effectiveHeight(): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsLogoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsLogoComponent, "ds-logo", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "customHeight": { "alias": "customHeight"; "required": false; }; "customWidth": { "alias": "customWidth"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * DsMobileEmptyStateComponent
  *
@@ -5439,7 +5891,7 @@ declare class DsAvatarWithBadgeComponent {
  * ```html
  * <!-- With image -->
  * <ds-mobile-empty-state
- *   [imageSrc]="'/Assets/Empty state-chat.png'"
+ *   [imageSrc]="'/Assets/empty-state-inquiry.svg'"
  *   [imageAlt]="'No messages'"
  *   [title]="'Ingen beskeder endnu'"
  *   [description]="'Start samtalen ved at sende en besked'">
@@ -5473,6 +5925,201 @@ declare class DsMobileEmptyStateComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileEmptyStateComponent, "ds-mobile-empty-state", never, { "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * DsMobileOfflineBannerComponent
+ *
+ * A compact banner component to indicate offline status.
+ * Designed to be used in the [offline-indicator] slot of page components.
+ *
+ * Features:
+ * - Amber/yellow warning styling
+ * - WiFi off icon
+ * - Customizable message
+ * - Compact, non-intrusive design
+ * - Smooth slide-in animation
+ *
+ * @example
+ * ```html
+ * <ds-mobile-page-main title="Community">
+ *   <ds-mobile-offline-banner
+ *     offline-indicator
+ *     *ngIf="pageComponent.isOffline()">
+ *   </ds-mobile-offline-banner>
+ *
+ *   <!-- Page content -->
+ * </ds-mobile-page-main>
+ * ```
+ */
+declare class DsMobileOfflineBannerComponent {
+    /**
+     * Icon to display (default: WiFi off icon)
+     */
+    icon: _angular_core.InputSignal<string>;
+    /**
+     * Title text for the banner
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Optional secondary message
+     */
+    message: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileOfflineBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileOfflineBannerComponent, "ds-mobile-offline-banner", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileIllustrationComponent
+ *
+ * A component that displays illustrations with dynamic whitelabel color adaptation.
+ * Inlines SVG and uses CSS variables to adapt colors to your theme.
+ *
+ * **Features:**
+ * - Predefined variants (post, inquiry) for common empty states
+ * - Automatic color adaptation using CSS variables
+ * - Preserves all SVG details (textures, filters, gradients, shadows)
+ * - White radial gradient overlay for depth effect
+ * - Configurable size
+ *
+ * **Color Adaptation:**
+ * The SVGs use the `--color-accent` CSS variable for the main page colors.
+ * All texture details, shadows, and effects are preserved.
+ *
+ * @example
+ * ```html
+ * <!-- Using predefined variant -->
+ * <ds-mobile-illustration variant="post" />
+ *
+ * <!-- Using predefined variant with custom size -->
+ * <ds-mobile-illustration variant="inquiry" size="150px" />
+ * ```
+ */
+declare class DsMobileIllustrationComponent {
+    private sanitizer;
+    /**
+     * Predefined illustration variant
+     * Available variants: 'post', 'inquiry'
+     */
+    variant: _angular_core.InputSignal<"post" | "inquiry">;
+    /**
+     * Illustration size (width and height)
+     * @default '120px'
+     */
+    size: _angular_core.InputSignal<string>;
+    constructor(sanitizer: DomSanitizer);
+    /**
+     * Inline SVG content for each variant
+     */
+    private svgMap;
+    /**
+     * Computed SVG content - sanitized for security
+     */
+    svgContent: _angular_core.Signal<SafeHtml>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileIllustrationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileIllustrationComponent, "ds-mobile-illustration", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobilePropertyBannerComponent
+ *
+ * Compact banner displaying property photo and address.
+ * Designed for use in page headers to show current property context.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-property-banner
+ *   address="Toftegårds Allé 5A, 2. tv."
+ *   photoUrl="/Assets/building.jpg">
+ * </ds-mobile-property-banner>
+ * ```
+ */
+declare class DsMobilePropertyBannerComponent {
+    /**
+     * Property address text
+     */
+    address: _angular_core.InputSignal<string>;
+    /**
+     * URL to property photo
+     */
+    photoUrl: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePropertyBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePropertyBannerComponent, "ds-mobile-property-banner", never, { "address": { "alias": "address"; "required": true; "isSignal": true; }; "photoUrl": { "alias": "photoUrl"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileSwiperComponent
+ *
+ * A reusable swiper/carousel component with configurable child width and spacing.
+ *
+ * Features:
+ * - First slide is left-aligned
+ * - Middle slides are centered when active
+ * - Last slide is right-aligned
+ * - Configurable slide width and gap
+ * - Content projection via ng-content
+ *
+ * Usage:
+ * ```html
+ * <ds-mobile-swiper [slideWidth]="'75vw'" [gap]="16">
+ *   <div class="swiper-slide">Slide 1</div>
+ *   <div class="swiper-slide">Slide 2</div>
+ *   <div class="swiper-slide">Slide 3</div>
+ * </ds-mobile-swiper>
+ * ```
+ */
+declare class DsMobileSwiperComponent implements AfterViewInit, OnDestroy {
+    private elementRef;
+    /**
+     * Width of each slide (e.g., '75vw', '300px', '80%')
+     */
+    slideWidth: _angular_core.InputSignal<string>;
+    /**
+     * Gap between slides in pixels
+     */
+    gap: _angular_core.InputSignal<number>;
+    /**
+     * Enable pagination dots
+     */
+    pagination: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable auto height - container adapts to active slide's height
+     */
+    autoHeight: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable progressive opacity based on slide position
+     * Slides fade in/out smoothly as they move toward/away from center
+     */
+    progressiveOpacity: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable progressive scale based on slide position
+     * Slides scale down smoothly as they move away from center
+     */
+    progressiveScale: _angular_core.InputSignal<boolean>;
+    swiperContainer: ElementRef;
+    private swiperInstance;
+    constructor(elementRef: ElementRef);
+    ngAfterViewInit(): void;
+    private initializeSwiper;
+    /**
+     * Navigate to previous slide
+     */
+    slidePrev(): void;
+    /**
+     * Navigate to next slide
+     */
+    slideNext(): void;
+    /**
+     * Check if at the beginning
+     */
+    isBeginning(): boolean;
+    /**
+     * Check if at the end
+     */
+    isEnd(): boolean;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSwiperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSwiperComponent, "ds-mobile-swiper", never, { "slideWidth": { "alias": "slideWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "autoHeight": { "alias": "autoHeight"; "required": false; "isSignal": true; }; "progressiveOpacity": { "alias": "progressiveOpacity"; "required": false; "isSignal": true; }; "progressiveScale": { "alias": "progressiveScale"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * User service for managing current user data globally
  */
@@ -5615,6 +6262,8 @@ declare class MobileCommunityPageComponent {
     private postModal;
     userService: UserService;
     private postsService;
+    pageComponent: DsMobilePageMainComponent;
+    pinnedSwiper?: DsMobileSwiperComponent;
     allPosts: _angular_core.Signal<Post[]>;
     pinnedPosts: _angular_core.Signal<Post[]>;
     hasAnyPosts: _angular_core.Signal<boolean>;
@@ -5642,12 +6291,29 @@ declare class MobileCommunityPageComponent {
      * Handle long press on a post to show action sheet
      */
     handlePostLongPress(postId: string, isOwnPost: boolean): Promise<void>;
+    /**
+     * Navigate to previous slide in pinned posts
+     */
+    slidePrev(): void;
+    /**
+     * Navigate to next slide in pinned posts
+     */
+    slideNext(): void;
+    /**
+     * Check if currently on first slide
+     */
+    isFirstSlide(): boolean;
+    /**
+     * Check if currently on last slide
+     */
+    isLastSlide(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileCommunityPageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileCommunityPageComponent, "app-mobile-community-page", never, {}, {}, never, never, true, never>;
 }
 
 declare class MobileHandbookPageComponent {
     userService: UserService;
+    pageComponent: DsMobilePageMainComponent;
     utilitiesItems: HandbookItem[];
     sikkerhedsudstyrItems: HandbookItem[];
     serviceContractsItems: HandbookItem[];
@@ -5663,6 +6329,7 @@ declare class MobileHomePageComponent {
     userService: UserService;
     private postsService;
     private postModal;
+    pageComponent: DsMobilePageMainComponent;
     recentPosts: _angular_core.Signal<_propbinder_mobile_design.Post[]>;
     private allInquiries;
     openInquiries: _angular_core.Signal<{
@@ -5694,6 +6361,7 @@ declare class MobileInquiriesPageComponent {
     userService: UserService;
     private navCtrl;
     private newInquiryModal;
+    pageComponent: DsMobilePageMainComponent;
     constructor(userService: UserService, navCtrl: NavController, newInquiryModal: DsMobileNewInquiryModalService);
     filterStatus: _angular_core.WritableSignal<"open" | "closed" | "all">;
     tabItems: InlineTabItem[];
@@ -5731,6 +6399,7 @@ declare class MobileInquiryDetailPageComponent {
     messageThreads: MessageThread[];
     unreadMessagesCount: _angular_core.Signal<number>;
     photos: LightboxImage[];
+    get photoUrls(): string[];
     constructor(userService: UserService, lightbox: DsMobileLightboxService, chatModal: DsMobileChatModalService);
     setActiveTab(tabId: string): void;
     goBack(): void;
@@ -5776,6 +6445,9 @@ declare class MobileTabsExampleComponent implements OnInit {
      * Handle profile menu action selection.
      * The tab bar component handles the UI (opening/closing menu),
      * this method handles the business logic.
+     *
+     * NOTE: Desktop only - called directly from tab bar.
+     * Mobile actions are handled globally in AppComponent via UserService.
      */
     handleProfileAction(result: ActionResult): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileTabsExampleComponent, never>;
@@ -5835,40 +6507,127 @@ declare class MobilePostDetailPageComponent {
  *
  * Sign-in page with email authentication.
  * Features logomark, decorative city background, and form validation.
+ * Auto-focuses email input on iOS to trigger keyboard.
  */
-declare class SignInPageComponent {
+declare class SignInPageComponent implements AfterViewInit, OnDestroy {
+    emailInputRef?: ElementRef;
+    whitelabelService: WhitelabelService;
     email: string;
     emailError: _angular_core.WritableSignal<boolean>;
     isSubmitting: _angular_core.WritableSignal<boolean>;
     emailSent: _angular_core.WritableSignal<boolean>;
+    ngAfterViewInit(): void;
+    /**
+     * Show the keyboard on mobile platforms
+     */
+    private showKeyboard;
     handleSubmit(): void;
     handleBackToLogin(): void;
+    /**
+     * Update status bar for sign-in page background
+     * Uses the sign-in background color to determine appropriate status bar style
+     */
+    private updateSignInStatusBar;
+    /**
+     * Restore status bar to header color when leaving sign-in page
+     */
+    ngOnDestroy(): void;
+    /**
+     * Restore status bar to use header surface color
+     */
+    private restoreHeaderStatusBar;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SignInPageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SignInPageComponent, "app-sign-in", never, {}, {}, never, never, true, never>;
 }
 
 /**
- * Whitelabel Demo Page
+ * Whitelabel Demo Modal Component
  *
  * Demonstrates the whitelabeling system with theme selection, brand colors, and logo previews.
+ * Opens as a full-screen modal similar to post details.
  */
-declare class WhitelabelDemoPage implements OnInit {
+declare class WhitelabelDemoModalComponent implements OnInit {
     whitelabelService: WhitelabelService;
+    private modalController;
     currentTheme: string;
-    customPrimarySurface: string;
-    customPrimaryContent: string;
-    customSecondarySurface: string;
-    customSecondaryContent: string;
+    customAppIconSurface: string;
+    customAppIconContent: string;
+    customAccent: string;
+    customOnAccent: string;
+    customHeaderSurface: string;
+    customHeaderContent: string;
+    customHeaderAccent: string;
+    customOnHeaderAccent: string;
+    customSignInBgSolid: string;
+    customSignInBgGradientStart: string;
+    customSignInBgGradientEnd: string;
+    customSignInContentColor: string;
     ngOnInit(): void;
+    /**
+     * Detect the current active theme based on colors
+     */
+    private detectCurrentTheme;
+    /**
+     * Close the modal
+     */
+    close(): void;
     applyDefaultTheme(): void;
     applyCejTheme(): void;
     applyPkaTheme(): void;
     applyClaveTheme(): void;
     applyFreedomTheme(): void;
     applyCustomColors(): void;
+    toggleCityIllustration(): void;
+    updateSignInBgType(type: 'solid' | 'gradient'): void;
+    updateLogoSize(size: 'sm' | 'md' | 'lg' | 'xl'): void;
+    applySignInBackground(): void;
+    applySignInContentColor(): void;
+    private updateSignInBgInputs;
+    private updateSignInContentColorInput;
     private updateCustomColorInputs;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelDemoPage, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WhitelabelDemoPage, "app-whitelabel-demo", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelDemoModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WhitelabelDemoModalComponent, "ds-whitelabel-demo-modal", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * WhitelabelDemoModalService
+ *
+ * Service for displaying the whitelabel demo in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * @example
+ * ```typescript
+ * constructor(private whitelabelModal: WhitelabelDemoModalService) {}
+ *
+ * async openDemo() {
+ *   await this.whitelabelModal.open();
+ * }
+ * ```
+ */
+declare class WhitelabelDemoModalService {
+    private modalController;
+    constructor(modalController: ModalController);
+    /**
+     * Open the whitelabel demo modal
+     *
+     * @returns Promise that resolves when the modal is presented
+     */
+    open(): Promise<void>;
+    /**
+     * Close the currently open whitelabel demo 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<WhitelabelDemoModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WhitelabelDemoModalService>;
 }
 
 /**
@@ -5893,5 +6652,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
-export type { ActionGroup, ActionItem, ActionResult, AttachmentData, AttachmentFileType, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, Comment, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, DropdownAlign, DropdownPosition, DsMobileDropdownItem, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, Language, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
+export type { ActionGroup, ActionItem, ActionResult, AppIconSize, AttachmentData, AttachmentFileType, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, Comment, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, DropdownAlign, DropdownPosition, DsMobileDropdownItem, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, Language, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, LogoSize, LogoVariant, ModalOptions, NetworkStatus, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };