@propbinder/mobile-design 0.1.15 → 0.1.17

package/fesm2022/propbinder-mobile-design.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { signal, computed, effect, Injectable, inject, Input, Component, input, Directive, EventEmitter, HostListener, Output, PLATFORM_ID, output, ViewChild, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, model, ElementRef, createComponent } from '@angular/core';
+import { signal, computed, effect, Injectable, inject, Input, Component, input, Directive, EventEmitter, HostListener, Output, PLATFORM_ID, output, ViewChild, model, ElementRef, CUSTOM_ELEMENTS_SCHEMA, createComponent, forwardRef, ViewEncapsulation } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$3 from '@angular/router';
 import { Router, NavigationEnd } from '@angular/router';
 import * as i1 from '@ionic/angular/standalone';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, ModalController, Platform, IonRefresher, IonRefresherContent, IonTabBar, IonTabButton, IonLabel, IonTabs, IonTab, IonSpinner, IonButton } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, Platform, ModalController, IonRefresher, IonRefresherContent, IonTabBar, IonTabButton, IonLabel, IonTabs, IonTab, IonSpinner, IonButton } from '@ionic/angular/standalone';
 import { ImpactStyle, Haptics } from '@capacitor/haptics';
 import { DsIconButtonComponent, DsIconComponent, DsButtonComponent, DsAvatarComponent, DsShapeIndicatorComponent } from '@propbinder/design-system';
 import { StatusBar } from '@capacitor/status-bar';
 import * as i1$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Keyboard } from '@capacitor/keyboard';
 import { Camera, CameraSource, CameraResultType } from '@capacitor/camera';
 import { filter } from 'rxjs/operators';
@@ -1815,1111 +1815,579 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             }] } });
 
 /**
- * DsAvatarWithBadgeComponent
- *
- * Displays an avatar with a logomark badge overlay.
- * Useful for showing user avatars with organization branding.
- *
- * @example
- * ```html
- * <ds-avatar-with-badge
- *   [type]="'initials'"
- *   [initials]="'JD'"
- *   [size]="'lg'"
- *   [badgePosition]="'bottom-right'"
- * />
- * ```
+ * User service for managing current user data globally
  */
-class DsAvatarWithBadgeComponent {
-    whitelabelService = inject(WhitelabelService);
-    // Avatar props
-    type = 'initials';
-    size = 'md';
-    initials = '';
-    src = '';
-    iconName = 'remixUser3Fill';
-    // Badge props
-    showBadge = true;
-    badgePosition = 'bottom-right';
-    badgeClasses = computed(() => {
-        return `avatar-badge avatar-badge--${this.badgePosition} avatar-badge--${this.size}`;
-    }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsAvatarWithBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsAvatarWithBadgeComponent, isStandalone: true, selector: "ds-avatar-with-badge", inputs: { type: "type", size: "size", initials: "initials", src: "src", iconName: "iconName", showBadge: "showBadge", badgePosition: "badgePosition" }, ngImport: i0, template: `
-    <div class="avatar-badge-container">
-      <ds-avatar
-        [type]="type"
-        [size]="size"
-        [initials]="initials"
-        [src]="src"
-        [iconName]="iconName"
-      />
-      
-      @if (showBadge) {
-        <div [class]="badgeClasses()">
-          <img [src]="whitelabelService.logoMarkUrl()" [alt]="whitelabelService.logoAlt()" />
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:inline-block;position:relative}.avatar-badge-container{position:relative;display:inline-block}.avatar-badge{position:absolute;background:var(--color-brand-secondary, #5d5fef);border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge img{width:10px;height:10px;object-fit:contain}.avatar-badge--bottom-right{bottom:-6px;right:-6px}.avatar-badge--bottom-left{bottom:-6px;left:-6px}.avatar-badge--top-right{top:-6px;right:-6px}.avatar-badge--top-left{top:-6px;left:-6px}.avatar-badge--xs{width:16px;height:16px}.avatar-badge--sm{width:18px;height:18px}.avatar-badge--md{width:20px;height:20px}.avatar-badge--lg{width:24px;height:24px}.avatar-badge--xl{width:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }] });
+class UserService {
+    // User avatar configuration
+    _avatarInitials = signal('LM', ...(ngDevMode ? [{ debugName: "_avatarInitials" }] : []));
+    _avatarType = signal('initials', ...(ngDevMode ? [{ debugName: "_avatarType" }] : []));
+    _avatarSrc = signal('', ...(ngDevMode ? [{ debugName: "_avatarSrc" }] : []));
+    // Profile menu items configuration
+    _profileMenuItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_profileMenuItems" }] : []));
+    // Readonly computed values
+    avatarInitials = this._avatarInitials.asReadonly();
+    avatarType = this._avatarType.asReadonly();
+    avatarSrc = this._avatarSrc.asReadonly();
+    profileMenuItems = this._profileMenuItems.asReadonly();
+    /**
+     * Update avatar configuration
+     */
+    setAvatarInitials(initials) {
+        this._avatarInitials.set(initials);
+    }
+    setAvatarType(type) {
+        this._avatarType.set(type);
+    }
+    setAvatarSrc(src) {
+        this._avatarSrc.set(src);
+    }
+    /**
+     * Set profile menu items globally.
+     * This will be used by both ds-mobile-tab-bar and ds-mobile-page-main
+     * if they don't receive profileMenuItems as an input.
+     */
+    setProfileMenuItems(items) {
+        this._profileMenuItems.set(items);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UserService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsAvatarWithBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-avatar-with-badge', standalone: true, imports: [CommonModule, DsAvatarComponent], encapsulation: ViewEncapsulation.Emulated, template: `
-    <div class="avatar-badge-container">
-      <ds-avatar
-        [type]="type"
-        [size]="size"
-        [initials]="initials"
-        [src]="src"
-        [iconName]="iconName"
-      />
-      
-      @if (showBadge) {
-        <div [class]="badgeClasses()">
-          <img [src]="whitelabelService.logoMarkUrl()" [alt]="whitelabelService.logoAlt()" />
-        </div>
-      }
-    </div>
-  `, styles: [":host{display:inline-block;position:relative}.avatar-badge-container{position:relative;display:inline-block}.avatar-badge{position:absolute;background:var(--color-brand-secondary, #5d5fef);border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge img{width:10px;height:10px;object-fit:contain}.avatar-badge--bottom-right{bottom:-6px;right:-6px}.avatar-badge--bottom-left{bottom:-6px;left:-6px}.avatar-badge--top-right{top:-6px;right:-6px}.avatar-badge--top-left{top:-6px;left:-6px}.avatar-badge--xs{width:16px;height:16px}.avatar-badge--sm{width:18px;height:18px}.avatar-badge--md{width:20px;height:20px}.avatar-badge--lg{width:24px;height:24px}.avatar-badge--xl{width:28px;height:28px}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], initials: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], showBadge: [{
-                type: Input
-            }], badgePosition: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 /**
- * Whitelabel Demo Modal Component
+ * DsMobilePageMainComponent
  *
- * Demonstrates the whitelabeling system with theme selection, brand colors, and logo previews.
- * Opens as a full-screen modal similar to post details.
+ * A complete mobile page layout for main/tab pages with:
+ * - Fixed header with logomark + title + avatar
+ * - Purple expandable header section (scrolls with content)
+ * - White rounded content wrapper
+ * - Pull-to-refresh support
+ * - Auto scroll title fade-in
+ *
+ * @example
+ * ```html
+ * <!-- Simple page -->
+ * <ds-mobile-page-main
+ *   title="Inquiries"
+ *   [avatarInitials]="'JD'">
+ *   <div class="page-content">
+ *     <!-- Your content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ *
+ * <!-- Page with custom header content -->
+ * <ds-mobile-page-main
+ *   title="Home"
+ *   headerTitle="Welcome, Lars"
+ *   headerSubtitle="Your rental property at a glance."
+ *   [avatarInitials]="'L'">
+ *
+ *   <div header-content class="property-tiles">
+ *     <!-- Custom header content like tiles -->
+ *   </div>
+ *
+ *   <div class="page-content">
+ *     <!-- Main page content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ * ```
  */
-class WhitelabelDemoModalComponent {
-    whitelabelService = inject(WhitelabelService);
+class DsMobilePageMainComponent extends MobilePageBase {
+    elementRef;
+    ionContent;
+    // Platform detection
+    platform = inject(Platform);
     modalController = inject(ModalController);
-    // Current active theme
-    currentTheme = 'default';
-    // Custom color inputs
-    customPrimarySurface = '#6B5FF5';
-    customPrimaryContent = '#FFFFFF';
-    customSecondarySurface = '#221a4c';
-    customSecondaryContent = '#FFFFFF';
-    ngOnInit() {
-        this.updateCustomColorInputs();
-        this.detectCurrentTheme();
-    }
+    router = inject(Router);
+    userService = inject(UserService);
+    // Computed property to check if running on native platform
+    isNativePlatform = computed(() => this.platform.is('ios') ||
+        this.platform.is('android') ||
+        this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
+    // Inputs - Title
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : [])); // For fixed header title
+    headerTitle = input('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : [])); // Optional different title for expandable header
+    headerSubtitle = input('', ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : []));
+    // Inputs - Avatar
+    avatarType = input('initials', ...(ngDevMode ? [{ debugName: "avatarType" }] : []));
+    avatarInitials = input('U', ...(ngDevMode ? [{ debugName: "avatarInitials" }] : []));
+    avatarSrc = input('', ...(ngDevMode ? [{ debugName: "avatarSrc" }] : []));
+    avatarIconName = input('remixUser3Line', ...(ngDevMode ? [{ debugName: "avatarIconName" }] : []));
+    // Inputs - Features
+    showRefresh = input(true, ...(ngDevMode ? [{ debugName: "showRefresh" }] : []));
+    showCondensedHeader = input(true, ...(ngDevMode ? [{ debugName: "showCondensedHeader" }] : []));
+    scrollThreshold = input(160, ...(ngDevMode ? [{ debugName: "scrollThreshold" }] : [])); // Pixels to scroll before title appears
+    headerFadeDistance = input(150, ...(ngDevMode ? [{ debugName: "headerFadeDistance" }] : [])); // Distance over which header fades out
     /**
-     * Detect the current active theme based on colors
+     * Profile menu action groups to display when avatar is clicked.
+     * If not provided, a default menu will be used (without Whitelabel Demo).
+     *
+     * @example
+     * ```typescript
+     * profileMenuItems: ActionGroup[] = [
+     *   {
+     *     actions: [
+     *       { action: 'profile', title: 'Min profil', icon: 'remixUser3Line' },
+     *       { action: 'settings', title: 'Indstillinger', icon: 'remixSettings3Line' }
+     *     ]
+     *   },
+     *   {
+     *     actions: [
+     *       { action: 'logout', title: 'Log ud', icon: 'remixLogoutBoxLine', destructive: true }
+     *     ]
+     *   }
+     * ];
+     * ```
      */
-    detectCurrentTheme() {
-        const secondarySurface = this.whitelabelService.secondarySurface().toUpperCase();
-        if (secondarySurface === '#A70923') {
-            this.currentTheme = 'cej';
-        }
-        else if (secondarySurface === '#660036') {
-            this.currentTheme = 'pka';
-        }
-        else if (secondarySurface === '#262424') {
-            this.currentTheme = 'clave';
-        }
-        else {
-            this.currentTheme = 'default';
-        }
-    }
+    profileMenuItems = input(undefined, ...(ngDevMode ? [{ debugName: "profileMenuItems" }] : []));
+    // Outputs
+    avatarClick = output();
     /**
-     * Close the modal
+     * Emitted when a profile menu action is selected.
+     * Parent component should handle the action logic (navigation, logout, etc.).
      */
-    close() {
-        this.modalController.dismiss();
+    profileActionSelected = output();
+    refresh = output();
+    scroll = output();
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
     }
-    applyDefaultTheme() {
-        this.currentTheme = 'default';
-        this.whitelabelService.updateConfig({
-            logoUrl: '/Assets/logos/propbinder-logomark.svg',
-            logoMarkUrl: '/Assets/logos/propbinder-logomark.svg',
-            logoAlt: 'Propbinder',
-            logoHeight: 28,
-            primarySurface: '#6B5FF5',
-            primaryContent: '#FFFFFF',
-            secondarySurface: '#221a4c',
-            secondaryContent: '#FFFFFF',
-            organizationName: 'Propbinder',
-            organizationId: 'default'
-        });
-        this.updateCustomColorInputs();
+    ngAfterViewInit() {
+        // Initial setup if needed
     }
-    applyCejTheme() {
-        this.currentTheme = 'cej';
-        this.whitelabelService.updateConfig({
-            logoUrl: '/Assets/logos/cej-logo.png',
-            logoMarkUrl: '/Assets/logos/cej-logo.png',
-            logoAlt: 'CEJ',
-            logoHeight: 36,
-            primarySurface: '#FFFFFF',
-            primaryContent: '#A70923',
-            secondarySurface: '#A70923',
-            secondaryContent: '#FFFFFF',
-            organizationName: 'CEJ',
-            organizationId: 'cej'
-        });
-        this.updateCustomColorInputs();
-    }
-    applyPkaTheme() {
-        this.currentTheme = 'pka';
-        this.whitelabelService.updateConfig({
-            logoUrl: '/Assets/logos/pka-logo.svg',
-            logoMarkUrl: '/Assets/logos/pka-logo.svg',
-            logoAlt: 'PKA',
-            logoHeight: 24,
-            primarySurface: '#CC006C',
-            primaryContent: '#FFFFFF',
-            secondarySurface: '#660036',
-            secondaryContent: '#FFFFFF',
-            organizationName: 'PKA',
-            organizationId: 'pka'
-        });
-        this.updateCustomColorInputs();
-    }
-    applyClaveTheme() {
-        this.currentTheme = 'clave';
-        this.whitelabelService.updateConfig({
-            logoUrl: '/Assets/logos/clave-logo.svg',
-            logoMarkUrl: '/Assets/logos/clave-logo.svg',
-            logoAlt: 'Clave',
-            logoHeight: 24,
-            primarySurface: '#868764',
-            primaryContent: '#262424',
-            secondarySurface: '#262424',
-            secondaryContent: '#FFFFFF',
-            organizationName: 'Clave',
-            organizationId: 'clave'
+    /**
+     * Handle avatar click - opens profile actions bottom sheet
+     */
+    async handleAvatarClick() {
+        console.log('Avatar clicked - opening profile bottom sheet');
+        // Emit the event for any parent listeners
+        this.avatarClick.emit();
+        // Use input if provided, otherwise fall back to service, otherwise use default menu
+        const menuItems = this.profileMenuItems() || this.userService.profileMenuItems() || [
+            {
+                actions: [
+                    {
+                        action: 'profile',
+                        title: 'Min profil',
+                        icon: 'remixUser3Line',
+                        destructive: false
+                    },
+                    {
+                        action: 'settings',
+                        title: 'Indstillinger',
+                        icon: 'remixSettings3Line',
+                        destructive: false
+                    }
+                ]
+            },
+            {
+                actions: [
+                    {
+                        action: 'logout',
+                        title: 'Log ud',
+                        icon: 'remixLogoutBoxLine',
+                        destructive: true
+                    }
+                ]
+            }
+        ];
+        // If no menu items configured, just emit and return
+        if (!menuItems || menuItems.length === 0) {
+            return;
+        }
+        const sheet = await this.modalController.create({
+            component: DsMobileActionsBottomSheetComponent,
+            componentProps: {
+                customActionGroups: menuItems
+            },
+            // Auto-height: no breakpoints, no handle
+            cssClass: 'ds-bottom-sheet auto-height'
         });
-        this.updateCustomColorInputs();
+        await sheet.present();
+        const result = await sheet.onWillDismiss();
+        if (result.data?.action) {
+            // Emit the selected action to parent
+            this.profileActionSelected.emit(result.data);
+        }
     }
-    applyCustomColors() {
-        this.whitelabelService.updateColors({
-            primarySurface: this.customPrimarySurface,
-            primaryContent: this.customPrimaryContent,
-            secondarySurface: this.customSecondarySurface,
-            secondaryContent: this.customSecondaryContent
-        });
+    /**
+     * Handle scroll events
+     * - Shows title in fixed header when scrolled past threshold
+     * - Fades out expandable header content based on scroll position
+     * - Emits scroll event for custom handling
+     */
+    handleScroll(event) {
+        const scrollTop = event.detail.scrollTop;
+        const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
+        const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
+        // Show title in fixed header when scrolled past threshold
+        if (scrollTop > this.scrollThreshold()) {
+            header?.classList.add('header-scrolled');
+        }
+        else {
+            header?.classList.remove('header-scrolled');
+        }
+        // Fade out header-expandable content based on scroll
+        if (headerExpandable) {
+            const fadeDistance = this.headerFadeDistance();
+            const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
+            // Calculate opacity (1 to 0)
+            const opacity = 1 - fadeProgress;
+            // Calculate transform (0px to -20px upward)
+            const translateY = fadeProgress * -20;
+            // Apply styles
+            headerExpandable.style.opacity = opacity.toString();
+            headerExpandable.style.transform = `translateY(${translateY}px)`;
+        }
+        this.scroll.emit(event);
     }
-    updateCustomColorInputs() {
-        this.customPrimarySurface = this.whitelabelService.primarySurface();
-        this.customPrimaryContent = this.whitelabelService.primaryContent();
-        this.customSecondarySurface = this.whitelabelService.secondarySurface();
-        this.customSecondaryContent = this.whitelabelService.secondaryContent();
+    /**
+     * Handle pull-to-refresh
+     * Emits refresh event - parent should call event.target.complete()
+     */
+    async handleRefresh(event) {
+        // Haptic feedback for pull-to-refresh
+        try {
+            await Haptics.impact({ style: ImpactStyle.Medium });
+        }
+        catch {
+            // Fallback to Web Vibration API if Capacitor Haptics is not available
+            if ('vibrate' in navigator) {
+                navigator.vibrate(50);
+            }
+        }
+        this.refresh.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: WhitelabelDemoModalComponent, isStandalone: true, selector: "ds-whitelabel-demo-modal", ngImport: i0, template: `
-    <!-- Fixed Header -->
-    <div class="modal-header">
-      <div class="header-content">
-        <span class="header-title">Whitelabel</span>
-        <ds-icon-button
-          icon="remixCloseLine"
-          variant="secondary"
-          size="lg"
-          (click)="close()"
-          class="close-button"
-          aria-label="Close">
-        </ds-icon-button>
-      </div>
-    </div>
-    
-    <!-- Scrollable Content -->
-    <ion-content [scrollY]="true" class="modal-content">
-      <div class="demo-container">
-          <!-- Theme Selection -->
-          <div class="demo-section">
-            <h2>Theme</h2>
-            <div class="theme-buttons">
-              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
-                Propbinder
-              </button>
-              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
-                CEJ
-              </button>
-              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
-                PKA
-              </button>
-              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
-                Clave
-              </button>
-            </div>
-          </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageMainComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobilePageMainComponent, isStandalone: true, selector: "ds-mobile-page-main", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarIconName: { classPropertyName: "avatarIconName", publicName: "avatarIconName", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showCondensedHeader: { classPropertyName: "showCondensedHeader", publicName: "showCondensedHeader", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, headerFadeDistance: { classPropertyName: "headerFadeDistance", publicName: "headerFadeDistance", isSignal: true, isRequired: false, transformFunction: null }, profileMenuItems: { classPropertyName: "profileMenuItems", publicName: "profileMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick", profileActionSelected: "profileActionSelected", refresh: "refresh", scroll: "scroll" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-home">
+          <!-- Whitelabel Logomark -->
+          <ds-logo variant="mark" size="lg" />
           
-          <!-- Logo & Logomark Preview -->
-          <div class="demo-section">
-            <h2>Logo Preview</h2>
-            <div class="preview-grid">
-              <div class="preview-tile">
-                <h3>Logo</h3>
-                <div class="logo-preview">
-                  <ds-logo variant="full" />
-                </div>
-              </div>
-              <div class="preview-tile">
-                <h3>Logomark</h3>
-                <div class="logomark-preview">
-                  <ds-avatar-with-badge
-                    [type]="'initials'"
-                    [initials]="'KN'"
-                    [size]="'md'"
-                    [badgePosition]="'bottom-right'"
-                  />
-                </div>
-              </div>
-            </div>
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-home__title">{{ title() }}</ion-title>
+          
+          <!-- Avatar -->
+          <div class="header-home__actions">
+            <ds-avatar
+              [size]="'md'"
+              [type]="avatarType()"
+              [initials]="avatarInitials()"
+              [src]="avatarSrc()"
+              [iconName]="avatarIconName()"
+              (click)="handleAvatarClick()"
+              style="cursor: pointer;"
+            />
+          </div>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
+      <!-- Condensed header for Ionic scroll effects -->
+      @if (showCondensedHeader()) {
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">{{ title() }}</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      }
+
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (showRefresh() && isNativePlatform()) {
+        <ion-refresher 
+          slot="fixed" 
+          (ionRefresh)="handleRefresh($event)"
+          [pullFactor]="0.4" 
+          [pullMin]="80" 
+          [pullMax]="240"
+          closeDuration="600ms">
+          <ion-refresher-content
+            pullingIcon="remixArrowDownS"
+            refreshingSpinner="lines">
+          </ion-refresher-content>
+        </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">{{ headerTitle() || title() }}</h1>
+            @if (headerSubtitle()) {
+              <p class="header-expandable__subtitle">{{ headerSubtitle() }}</p>
+            }
           </div>
           
-          <!-- Brand Colors -->
-          <div class="demo-section">
-            <h2>Brand Colors</h2>
-            <div class="color-section">
-              <div class="color-swatches">
-                <div class="swatch swatch--primary-surface">
-                  <div class="swatch-label">Primary Surface</div>
-                  <div class="swatch-value">{{ whitelabelService.primarySurface() }}</div>
-                </div>
-                <div class="swatch swatch--primary-content">
-                  <div class="swatch-label">Primary Content</div>
-                  <div class="swatch-value">{{ whitelabelService.primaryContent() }}</div>
-                </div>
-                <div class="swatch swatch--secondary-surface">
-                  <div class="swatch-label">Secondary Surface</div>
-                  <div class="swatch-value">{{ whitelabelService.secondarySurface() }}</div>
-                </div>
-                <div class="swatch swatch--secondary-content">
-                  <div class="swatch-label">Secondary Content</div>
-                  <div class="swatch-value">{{ whitelabelService.secondaryContent() }}</div>
-                </div>
-              </div>
-              
-              <div class="color-inputs">
-                <div class="color-group-label">Primary</div>
-                <div class="color-row">
-                  <label>Surface</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customPrimarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customPrimarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Content</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customPrimaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customPrimaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                
-                <div class="color-group-label">Secondary</div>
-                <div class="color-row">
-                  <label>Surface</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customSecondarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customSecondarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Content</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customSecondaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customSecondaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+          <!-- Slot for custom header content (e.g., property tiles) -->
+          <ng-content select="[header-content]"></ng-content>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        <div class="content-inner">
+          <!-- Main page content -->
+          <ng-content></ng-content>
         </div>
+      </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--primary-surface{background:var(--color-primary-surface);color:var(--color-primary-content)}.swatch--primary-content{background:var(--color-primary-content);color:var(--color-primary-surface);border:1px solid #e0e0e0}.swatch--secondary-surface{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.swatch--secondary-content{background:var(--color-secondary-content);color:var(--color-secondary-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%}:host ion-header{background:var(--color-brand-secondary);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){ion-header{display:none;height:auto}}.header-home{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--color-brand-secondary);height:72px}.header-home__title{position:absolute;left:50%;transform:translate(-50%) translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0;transition:transform .6s ease,opacity .6s ease;margin:0;padding:0;--color: white}.header-scrolled .header-home__title{opacity:1;transform:translate(-50%) translateY(0)}.header-home__actions{display:flex;align-items:center;gap:8px}.header-home__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}.logomark{height:28px;width:auto;flex-shrink:0}@media (min-width: 768px){.header-home{padding:16px 24px}.logomark{height:32px}.header-home__title{display:none}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px;overflow:hidden}ion-content::part(scroll){display:flex;flex-direction:column}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-header[collapse=condense]{display:none}@media (min-width: 768px){ion-header[collapse=condense]{display:none}}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}.header-expandable__text{margin-bottom:0}.header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}.header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){.header-expandable{padding:48px var(--content-padding-md)}.header-expandable__title{font-size:var(--font-size-3xl)}.header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{position:relative;z-index:20;padding:0;flex:1;display:flex;flex-direction:column}@media (min-width: 768px){.content-wrapper{width:100%}}.content-inner{background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary);flex:1;padding:24px 20px 32px;padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom,0px))}@media (min-width: 768px){.content-inner{border-radius:16px 16px 0 0;padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.content-inner{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.content-inner{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.content-inner{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.content-inner{padding:32px var(--content-padding-3xl)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-whitelabel-demo-modal', standalone: true, imports: [
+            args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [
                         CommonModule,
-                        FormsModule,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
                         IonContent,
-                        DsLogoComponent,
-                        DsAvatarWithBadgeComponent,
-                        DsIconButtonComponent
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
-    <!-- Fixed Header -->
-    <div class="modal-header">
-      <div class="header-content">
-        <span class="header-title">Whitelabel</span>
-        <ds-icon-button
-          icon="remixCloseLine"
-          variant="secondary"
-          size="lg"
-          (click)="close()"
-          class="close-button"
-          aria-label="Close">
-        </ds-icon-button>
-      </div>
-    </div>
-    
-    <!-- Scrollable Content -->
-    <ion-content [scrollY]="true" class="modal-content">
-      <div class="demo-container">
-          <!-- Theme Selection -->
-          <div class="demo-section">
-            <h2>Theme</h2>
-            <div class="theme-buttons">
-              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
-                Propbinder
-              </button>
-              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
-                CEJ
-              </button>
-              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
-                PKA
-              </button>
-              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
-                Clave
-              </button>
-            </div>
-          </div>
+                        IonRefresher,
+                        IonRefresherContent,
+                        DsAvatarComponent,
+                        DsLogoComponent
+                    ], template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-home">
+          <!-- Whitelabel Logomark -->
+          <ds-logo variant="mark" size="lg" />
           
-          <!-- Logo & Logomark Preview -->
-          <div class="demo-section">
-            <h2>Logo Preview</h2>
-            <div class="preview-grid">
-              <div class="preview-tile">
-                <h3>Logo</h3>
-                <div class="logo-preview">
-                  <ds-logo variant="full" />
-                </div>
-              </div>
-              <div class="preview-tile">
-                <h3>Logomark</h3>
-                <div class="logomark-preview">
-                  <ds-avatar-with-badge
-                    [type]="'initials'"
-                    [initials]="'KN'"
-                    [size]="'md'"
-                    [badgePosition]="'bottom-right'"
-                  />
-                </div>
-              </div>
-            </div>
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-home__title">{{ title() }}</ion-title>
+          
+          <!-- Avatar -->
+          <div class="header-home__actions">
+            <ds-avatar
+              [size]="'md'"
+              [type]="avatarType()"
+              [initials]="avatarInitials()"
+              [src]="avatarSrc()"
+              [iconName]="avatarIconName()"
+              (click)="handleAvatarClick()"
+              style="cursor: pointer;"
+            />
+          </div>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
+      <!-- Condensed header for Ionic scroll effects -->
+      @if (showCondensedHeader()) {
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">{{ title() }}</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      }
+
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (showRefresh() && isNativePlatform()) {
+        <ion-refresher 
+          slot="fixed" 
+          (ionRefresh)="handleRefresh($event)"
+          [pullFactor]="0.4" 
+          [pullMin]="80" 
+          [pullMax]="240"
+          closeDuration="600ms">
+          <ion-refresher-content
+            pullingIcon="remixArrowDownS"
+            refreshingSpinner="lines">
+          </ion-refresher-content>
+        </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">{{ headerTitle() || title() }}</h1>
+            @if (headerSubtitle()) {
+              <p class="header-expandable__subtitle">{{ headerSubtitle() }}</p>
+            }
           </div>
           
-          <!-- Brand Colors -->
-          <div class="demo-section">
-            <h2>Brand Colors</h2>
-            <div class="color-section">
-              <div class="color-swatches">
-                <div class="swatch swatch--primary-surface">
-                  <div class="swatch-label">Primary Surface</div>
-                  <div class="swatch-value">{{ whitelabelService.primarySurface() }}</div>
-                </div>
-                <div class="swatch swatch--primary-content">
-                  <div class="swatch-label">Primary Content</div>
-                  <div class="swatch-value">{{ whitelabelService.primaryContent() }}</div>
-                </div>
-                <div class="swatch swatch--secondary-surface">
-                  <div class="swatch-label">Secondary Surface</div>
-                  <div class="swatch-value">{{ whitelabelService.secondarySurface() }}</div>
-                </div>
-                <div class="swatch swatch--secondary-content">
-                  <div class="swatch-label">Secondary Content</div>
-                  <div class="swatch-value">{{ whitelabelService.secondaryContent() }}</div>
-                </div>
-              </div>
-              
-              <div class="color-inputs">
-                <div class="color-group-label">Primary</div>
-                <div class="color-row">
-                  <label>Surface</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customPrimarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customPrimarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Content</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customPrimaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customPrimaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                
-                <div class="color-group-label">Secondary</div>
-                <div class="color-row">
-                  <label>Surface</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customSecondarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customSecondarySurface"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Content</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customSecondaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customSecondaryContent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+          <!-- Slot for custom header content (e.g., property tiles) -->
+          <ng-content select="[header-content]"></ng-content>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        <div class="content-inner">
+          <!-- Main page content -->
+          <ng-content></ng-content>
         </div>
+      </div>
     </ion-content>
-  `, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--primary-surface{background:var(--color-primary-surface);color:var(--color-primary-content)}.swatch--primary-content{background:var(--color-primary-content);color:var(--color-primary-surface);border:1px solid #e0e0e0}.swatch--secondary-surface{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.swatch--secondary-content{background:var(--color-secondary-content);color:var(--color-secondary-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"] }]
-        }] });
-
-/**
- * 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();
- * }
- * ```
- */
-class WhitelabelDemoModalService {
-    modalController;
-    constructor(modalController) {
-        this.modalController = modalController;
-    }
-    /**
-     * Open the whitelabel demo modal
-     *
-     * @returns Promise that resolves when the modal is presented
-     */
-    async open() {
-        try {
-            console.log('[WhitelabelDemoModal] Opening...');
-            const modal = await this.modalController.create({
-                component: WhitelabelDemoModalComponent,
-                cssClass: 'ds-whitelabel-demo-modal',
-                mode: 'ios',
-                presentingElement: document.querySelector('ion-router-outlet') || undefined,
-                backdropDismiss: true,
-                showBackdrop: true,
-                animated: true,
-                keyboardClose: true
-            });
-            console.log('[WhitelabelDemoModal] Modal created, presenting...');
-            await modal.present();
-            console.log('[WhitelabelDemoModal] Modal presented');
-        }
-        catch (error) {
-            console.error('[WhitelabelDemoModal] Error opening modal:', error);
-            throw error;
-        }
-    }
-    /**
-     * 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
-     */
-    async close(data) {
-        return this.modalController.dismiss(data);
-    }
-    /**
-     * Get the top-most modal if one exists
-     *
-     * @returns Promise that resolves to the modal element or undefined
-     */
-    async getTop() {
-        return this.modalController.getTop();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.ModalController }] });
+  `, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%}:host ion-header{background:var(--color-brand-secondary);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){ion-header{display:none;height:auto}}.header-home{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--color-brand-secondary);height:72px}.header-home__title{position:absolute;left:50%;transform:translate(-50%) translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0;transition:transform .6s ease,opacity .6s ease;margin:0;padding:0;--color: white}.header-scrolled .header-home__title{opacity:1;transform:translate(-50%) translateY(0)}.header-home__actions{display:flex;align-items:center;gap:8px}.header-home__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}.logomark{height:28px;width:auto;flex-shrink:0}@media (min-width: 768px){.header-home{padding:16px 24px}.logomark{height:32px}.header-home__title{display:none}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px;overflow:hidden}ion-content::part(scroll){display:flex;flex-direction:column}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-header[collapse=condense]{display:none}@media (min-width: 768px){ion-header[collapse=condense]{display:none}}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}.header-expandable__text{margin-bottom:0}.header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}.header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){.header-expandable{padding:48px var(--content-padding-md)}.header-expandable__title{font-size:var(--font-size-3xl)}.header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{position:relative;z-index:20;padding:0;flex:1;display:flex;flex-direction:column}@media (min-width: 768px){.content-wrapper{width:100%}}.content-inner{background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary);flex:1;padding:24px 20px 32px;padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom,0px))}@media (min-width: 768px){.content-inner{border-radius:16px 16px 0 0;padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.content-inner{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.content-inner{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.content-inner{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.content-inner{padding:32px var(--content-padding-3xl)!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ionContent: [{
+                type: ViewChild,
+                args: [IonContent]
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], showCondensedHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCondensedHeader", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], headerFadeDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerFadeDistance", required: false }] }], profileMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileMenuItems", required: false }] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }], profileActionSelected: [{ type: i0.Output, args: ["profileActionSelected"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], scroll: [{ type: i0.Output, args: ["scroll"] }] } });
 
 /**
- * DsMobilePageMainComponent
+ * DsMobilePageDetailsComponent
  *
- * A complete mobile page layout for main/tab pages with:
- * - Fixed header with logomark + title + avatar
- * - Purple expandable header section (scrolls with content)
- * - White rounded content wrapper
- * - Pull-to-refresh support
- * - Auto scroll title fade-in
+ * A mobile page layout for detail/drill-down pages with:
+ * - Back button header (mobile + desktop variants)
+ * - White background content area
+ * - Responsive padding
  *
  * @example
  * ```html
- * <!-- Simple page -->
- * <ds-mobile-page-main
- *   title="Inquiries"
- *   [avatarInitials]="'JD'">
+ * <!-- Simple detail page -->
+ * <ds-mobile-page-details
+ *   title="Property Details"
+ *   (back)="goBack()">
  *   <div class="page-content">
  *     <!-- Your content -->
  *   </div>
- * </ds-mobile-page-main>
- *
- * <!-- Page with custom header content -->
- * <ds-mobile-page-main
- *   title="Home"
- *   headerTitle="Welcome, Lars"
- *   headerSubtitle="Your rental property at a glance."
- *   [avatarInitials]="'L'">
- *
- *   <div header-content class="property-tiles">
- *     <!-- Custom header content like tiles -->
- *   </div>
+ * </ds-mobile-page-details>
  *
+ * <!-- With default back route -->
+ * <ds-mobile-page-details
+ *   title="Invoice Details"
+ *   backRoute="/invoices">
  *   <div class="page-content">
- *     <!-- Main page content -->
+ *     <!-- Your content -->
  *   </div>
- * </ds-mobile-page-main>
+ * </ds-mobile-page-details>
  * ```
  */
-class DsMobilePageMainComponent extends MobilePageBase {
+class DsMobilePageDetailsComponent extends MobilePageBase {
+    navCtrl;
     elementRef;
-    ionContent;
-    // Platform detection
-    platform = inject(Platform);
-    modalController = inject(ModalController);
-    router = inject(Router);
-    whitelabelDemoModal = inject(WhitelabelDemoModalService);
-    // Computed property to check if running on native platform
-    isNativePlatform = computed(() => this.platform.is('ios') ||
-        this.platform.is('android') ||
-        this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
-    // Inputs - Title
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : [])); // For fixed header title
-    headerTitle = input('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : [])); // Optional different title for expandable header
-    headerSubtitle = input('', ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : []));
-    // Inputs - Avatar
-    avatarType = input('initials', ...(ngDevMode ? [{ debugName: "avatarType" }] : []));
-    avatarInitials = input('U', ...(ngDevMode ? [{ debugName: "avatarInitials" }] : []));
-    avatarSrc = input('', ...(ngDevMode ? [{ debugName: "avatarSrc" }] : []));
-    avatarIconName = input('remixUser3Line', ...(ngDevMode ? [{ debugName: "avatarIconName" }] : []));
-    // Inputs - Features
-    showRefresh = input(true, ...(ngDevMode ? [{ debugName: "showRefresh" }] : []));
-    showCondensedHeader = input(true, ...(ngDevMode ? [{ debugName: "showCondensedHeader" }] : []));
-    scrollThreshold = input(160, ...(ngDevMode ? [{ debugName: "scrollThreshold" }] : [])); // Pixels to scroll before title appears
-    headerFadeDistance = input(150, ...(ngDevMode ? [{ debugName: "headerFadeDistance" }] : [])); // Distance over which header fades out
+    // Inputs
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    backRoute = input('', ...(ngDevMode ? [{ debugName: "backRoute" }] : [])); // Optional default back route
     // Outputs
-    avatarClick = output();
-    refresh = output();
-    scroll = output();
-    constructor(elementRef) {
+    back = output();
+    constructor(navCtrl, elementRef) {
         super();
+        this.navCtrl = navCtrl;
         this.elementRef = elementRef;
     }
-    ngAfterViewInit() {
-        // Initial setup if needed
-    }
     /**
-     * Handle avatar click - opens profile actions bottom sheet
+     * Handle back navigation
+     *
+     * By default, navigates using the provided backRoute or browser back.
+     * Parent components can listen to the (back) event to override this behavior.
+     *
+     * @example
+     * ```html
+     * <!-- Default behavior: uses backRoute or browser back -->
+     * <ds-mobile-page-details
+     *   title="Details"
+     *   backRoute="/home">
+     * </ds-mobile-page-details>
+     *
+     * <!-- Custom behavior: parent handles navigation -->
+     * <ds-mobile-page-details
+     *   title="Details"
+     *   (back)="customBackHandler()">
+     * </ds-mobile-page-details>
+     * ```
      */
-    async handleAvatarClick() {
-        console.log('Avatar clicked - opening profile bottom sheet');
-        // Emit the event for any parent listeners
-        this.avatarClick.emit();
-        const sheet = await this.modalController.create({
-            component: DsMobileActionsBottomSheetComponent,
-            componentProps: {
-                customActionGroups: [
-                    {
-                        actions: [
-                            {
-                                action: 'profile',
-                                title: 'Min profil',
-                                icon: 'remixUser3Line',
-                                destructive: false
-                            },
-                            {
-                                action: 'settings',
-                                title: 'Indstillinger',
-                                icon: 'remixSettings3Line',
-                                destructive: false
-                            },
-                            {
-                                action: 'whitelabel-demo',
-                                title: 'Whitelabel Demo',
-                                icon: 'remixPaletteLine',
-                                destructive: false
-                            }
-                        ]
-                    },
-                    {
-                        actions: [
-                            {
-                                action: 'logout',
-                                title: 'Log ud',
-                                icon: 'remixLogoutBoxLine',
-                                destructive: true
-                            }
-                        ]
-                    }
-                ]
-            },
-            // Auto-height: no breakpoints, no handle
-            cssClass: 'ds-bottom-sheet auto-height'
-        });
-        await sheet.present();
-        const result = await sheet.onWillDismiss();
-        if (result.data?.action) {
-            console.log('Profile action selected:', result.data.action);
-            switch (result.data.action) {
-                case 'logout':
-                    console.log('Logging out...');
-                    // TODO: Implement logout logic
-                    break;
-                case 'profile':
-                    console.log('Opening profile...');
-                    // TODO: Navigate to profile page
-                    break;
-                case 'settings':
-                    console.log('Opening settings...');
-                    // TODO: Navigate to settings page
-                    break;
-                case 'whitelabel-demo':
-                    console.log('Whitelabel demo selected');
-                    await this.whitelabelDemoModal.open();
-                    break;
-            }
-        }
-    }
-    /**
-     * Handle scroll events
-     * - Shows title in fixed header when scrolled past threshold
-     * - Fades out expandable header content based on scroll position
-     * - Emits scroll event for custom handling
-     */
-    handleScroll(event) {
-        const scrollTop = event.detail.scrollTop;
-        const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
-        const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
-        // Show title in fixed header when scrolled past threshold
-        if (scrollTop > this.scrollThreshold()) {
-            header?.classList.add('header-scrolled');
+    handleBack() {
+        // Add class to trigger reverse animation
+        this.elementRef.nativeElement.classList.add('navigating-back');
+        // Emit event for parent to optionally handle
+        this.back.emit();
+        // Default behavior: navigate using backRoute or browser back
+        if (this.backRoute()) {
+            this.navCtrl.navigateBack(this.backRoute());
         }
         else {
-            header?.classList.remove('header-scrolled');
-        }
-        // Fade out header-expandable content based on scroll
-        if (headerExpandable) {
-            const fadeDistance = this.headerFadeDistance();
-            const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
-            // Calculate opacity (1 to 0)
-            const opacity = 1 - fadeProgress;
-            // Calculate transform (0px to -20px upward)
-            const translateY = fadeProgress * -20;
-            // Apply styles
-            headerExpandable.style.opacity = opacity.toString();
-            headerExpandable.style.transform = `translateY(${translateY}px)`;
-        }
-        this.scroll.emit(event);
-    }
-    /**
-     * Handle pull-to-refresh
-     * Emits refresh event - parent should call event.target.complete()
-     */
-    async handleRefresh(event) {
-        // Haptic feedback for pull-to-refresh
-        try {
-            await Haptics.impact({ style: ImpactStyle.Medium });
-        }
-        catch {
-            // Fallback to Web Vibration API if Capacitor Haptics is not available
-            if ('vibrate' in navigator) {
-                navigator.vibrate(50);
-            }
+            this.navCtrl.back();
         }
-        this.refresh.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageMainComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobilePageMainComponent, isStandalone: true, selector: "ds-mobile-page-main", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarIconName: { classPropertyName: "avatarIconName", publicName: "avatarIconName", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showCondensedHeader: { classPropertyName: "showCondensedHeader", publicName: "showCondensedHeader", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, headerFadeDistance: { classPropertyName: "headerFadeDistance", publicName: "headerFadeDistance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick", refresh: "refresh", scroll: "scroll" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <!-- Fixed header at top -->
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageDetailsComponent, deps: [{ token: i1.NavController }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: DsMobilePageDetailsComponent, isStandalone: true, selector: "ds-mobile-page-details", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, backRoute: { classPropertyName: "backRoute", publicName: "backRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, usesInheritance: true, ngImport: i0, template: `
+    <!-- Mobile header - hidden on desktop -->
     <ion-header>
       <ion-toolbar>
-        <div class="header-home">
-          <!-- Whitelabel Logomark -->
-          <ds-logo variant="mark" size="lg" />
-          
-          <!-- Title - fades in on scroll -->
-          <ion-title class="header-home__title">{{ title() }}</ion-title>
-          
-          <!-- Avatar -->
-          <div class="header-home__actions">
-            <ds-avatar
-              [size]="'md'"
-              [type]="avatarType()"
-              [initials]="avatarInitials()"
-              [src]="avatarSrc()"
-              [iconName]="avatarIconName()"
-              (click)="handleAvatarClick()"
-              style="cursor: pointer;"
-            />
-          </div>
+        <div class="header-back">
+          <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
+            <ds-icon name="remixArrowLeftLine" size="24px" />
+          </button>
+          <h1 class="header-title">{{ title() }}</h1>
         </div>
       </ion-toolbar>
     </ion-header>
 
-    <!-- Content with expandable header -->
-    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
-      <!-- Condensed header for Ionic scroll effects -->
-      @if (showCondensedHeader()) {
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">{{ title() }}</ion-title>
-          </ion-toolbar>
-        </ion-header>
-      }
-
-      <!-- Pull to refresh (only on native iOS/Android) -->
-      @if (showRefresh() && isNativePlatform()) {
-        <ion-refresher 
-          slot="fixed" 
-          (ionRefresh)="handleRefresh($event)"
-          [pullFactor]="0.4" 
-          [pullMin]="80" 
-          [pullMax]="240"
-          closeDuration="600ms">
-          <ion-refresher-content
-            pullingIcon="remixArrowDownS"
-            refreshingSpinner="lines">
-          </ion-refresher-content>
-        </ion-refresher>
-      }
-
-      <!-- Expandable header section (purple background) -->
-      <div class="header-expandable">
-        <div class="header-expandable-inner">
-          <div class="header-expandable__text">
-            <h1 class="header-expandable__title">{{ headerTitle() || title() }}</h1>
-            @if (headerSubtitle()) {
-              <p class="header-expandable__subtitle">{{ headerSubtitle() }}</p>
-            }
-          </div>
-          
-          <!-- Slot for custom header content (e.g., property tiles) -->
-          <ng-content select="[header-content]"></ng-content>
-        </div>
+    <ion-content>
+      <!-- Desktop header above content -->
+      <div class="desktop-header">
+        <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
+          <ds-icon name="remixArrowLeftLine" size="24px" />
+        </button>
+        <h1>{{ title() }}</h1>
       </div>
 
-      <!-- Content wrapper -->
-      <div class="content-wrapper">
-        <div class="content-inner">
-          <!-- Main page content -->
-          <ng-content></ng-content>
-        </div>
+      <!-- Content area -->
+      <div class="detail-content">
+        <ng-content></ng-content>
       </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%}:host ion-header{background:var(--color-brand-secondary);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){ion-header{display:none;height:auto}}.header-home{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--color-brand-secondary);height:72px}.header-home__title{position:absolute;left:50%;transform:translate(-50%) translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0;transition:transform .6s ease,opacity .6s ease;margin:0;padding:0;--color: white}.header-scrolled .header-home__title{opacity:1;transform:translate(-50%) translateY(0)}.header-home__actions{display:flex;align-items:center;gap:8px}.header-home__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}.logomark{height:28px;width:auto;flex-shrink:0}@media (min-width: 768px){.header-home{padding:16px 24px}.logomark{height:32px}.header-home__title{display:none}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px;overflow:hidden}ion-content::part(scroll){display:flex;flex-direction:column}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-header[collapse=condense]{display:none}@media (min-width: 768px){ion-header[collapse=condense]{display:none}}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}.header-expandable__text{margin-bottom:0}.header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}.header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){.header-expandable{padding:48px var(--content-padding-md)}.header-expandable__title{font-size:var(--font-size-3xl)}.header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{position:relative;z-index:20;padding:0;flex:1;display:flex;flex-direction:column}@media (min-width: 768px){.content-wrapper{width:100%}}.content-inner{background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary);flex:1;padding:24px 20px 32px;padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom,0px))}@media (min-width: 768px){.content-inner{border-radius:16px 16px 0 0;padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.content-inner{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.content-inner{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.content-inner{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.content-inner{padding:32px var(--content-padding-3xl)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}ion-header{background:var(--color-brand-secondary);box-shadow:none;height:64px}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 64px;height:100%;min-height:64px;padding:0}ion-header ion-toolbar::part(native){height:100%;min-height:64px;padding:0}@media (min-width: 768px){ion-header{display:none}}.header-back{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-brand-secondary);position:relative;height:100%;min-height:64px}.header-back .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:opacity var(--transition-duration-fast) var(--ease-smooth);z-index:10}.header-back .back-button:hover{opacity:.8}.header-back .back-button:active{opacity:.6}.header-back .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:#fff;margin:0}.desktop-header{display:none}@media (min-width: 768px){.desktop-header{display:flex;align-items:center;gap:16px;padding:32px var(--content-padding-md) 24px var(--content-padding-md);max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}.desktop-header .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color-default-primary);transition:opacity var(--transition-duration-fast) var(--ease-smooth)}.desktop-header .back-button:hover{opacity:.8}.desktop-header .back-button:active{opacity:.6}.desktop-header h1{font-size:var(--font-size-2xl);font-weight:600;margin:0;color:var(--text-color-default-primary)}}@media (min-width: 992px){.desktop-header{max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.desktop-header{max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.desktop-header{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.desktop-header{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-content{--background: var(--color-background-neutral-primary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;overflow:hidden}@media (max-width: 767px){ion-content{border-radius:24px 24px 36px 36px;animation:bottomRadiusOut .6s ease .3s forwards}:host(.navigating-back) ion-content{border-radius:24px 24px 0 0;animation:bottomRadiusIn .8s cubic-bezier(.36,.66,.04,1) forwards!important}}@keyframes bottomRadiusOut{0%{border-radius:24px 24px 36px 36px}to{border-radius:24px 24px 0 0}}@keyframes bottomRadiusIn{0%{border-radius:24px 24px 0 0}to{border-radius:24px 24px 36px 36px}}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0;animation:none}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}.detail-content{padding:24px 20px 32px}@media (min-width: 768px){.detail-content{padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.detail-content{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.detail-content{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.detail-content{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.detail-content{padding:32px var(--content-padding-3xl)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [
+            args: [{ selector: 'ds-mobile-page-details', standalone: true, imports: [
                         CommonModule,
                         IonHeader,
                         IonToolbar,
-                        IonTitle,
                         IonContent,
-                        IonRefresher,
-                        IonRefresherContent,
-                        DsAvatarComponent,
-                        DsLogoComponent
+                        DsIconComponent
                     ], template: `
-    <!-- Fixed header at top -->
+    <!-- Mobile header - hidden on desktop -->
     <ion-header>
       <ion-toolbar>
-        <div class="header-home">
-          <!-- Whitelabel Logomark -->
-          <ds-logo variant="mark" size="lg" />
-          
-          <!-- Title - fades in on scroll -->
-          <ion-title class="header-home__title">{{ title() }}</ion-title>
-          
-          <!-- Avatar -->
-          <div class="header-home__actions">
-            <ds-avatar
-              [size]="'md'"
-              [type]="avatarType()"
-              [initials]="avatarInitials()"
-              [src]="avatarSrc()"
-              [iconName]="avatarIconName()"
-              (click)="handleAvatarClick()"
-              style="cursor: pointer;"
-            />
-          </div>
+        <div class="header-back">
+          <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
+            <ds-icon name="remixArrowLeftLine" size="24px" />
+          </button>
+          <h1 class="header-title">{{ title() }}</h1>
         </div>
       </ion-toolbar>
     </ion-header>
 
-    <!-- Content with expandable header -->
-    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
-      <!-- Condensed header for Ionic scroll effects -->
-      @if (showCondensedHeader()) {
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">{{ title() }}</ion-title>
-          </ion-toolbar>
-        </ion-header>
-      }
-
-      <!-- Pull to refresh (only on native iOS/Android) -->
-      @if (showRefresh() && isNativePlatform()) {
-        <ion-refresher 
-          slot="fixed" 
-          (ionRefresh)="handleRefresh($event)"
-          [pullFactor]="0.4" 
-          [pullMin]="80" 
-          [pullMax]="240"
-          closeDuration="600ms">
-          <ion-refresher-content
-            pullingIcon="remixArrowDownS"
-            refreshingSpinner="lines">
-          </ion-refresher-content>
-        </ion-refresher>
-      }
-
-      <!-- Expandable header section (purple background) -->
-      <div class="header-expandable">
-        <div class="header-expandable-inner">
-          <div class="header-expandable__text">
-            <h1 class="header-expandable__title">{{ headerTitle() || title() }}</h1>
-            @if (headerSubtitle()) {
-              <p class="header-expandable__subtitle">{{ headerSubtitle() }}</p>
-            }
-          </div>
-          
-          <!-- Slot for custom header content (e.g., property tiles) -->
-          <ng-content select="[header-content]"></ng-content>
-        </div>
+    <ion-content>
+      <!-- Desktop header above content -->
+      <div class="desktop-header">
+        <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
+          <ds-icon name="remixArrowLeftLine" size="24px" />
+        </button>
+        <h1>{{ title() }}</h1>
       </div>
 
-      <!-- Content wrapper -->
-      <div class="content-wrapper">
-        <div class="content-inner">
-          <!-- Main page content -->
-          <ng-content></ng-content>
-        </div>
+      <!-- Content area -->
+      <div class="detail-content">
+        <ng-content></ng-content>
       </div>
     </ion-content>
-  `, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%}:host ion-header{background:var(--color-brand-secondary);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){ion-header{display:none;height:auto}}.header-home{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--color-brand-secondary);height:72px}.header-home__title{position:absolute;left:50%;transform:translate(-50%) translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0;transition:transform .6s ease,opacity .6s ease;margin:0;padding:0;--color: white}.header-scrolled .header-home__title{opacity:1;transform:translate(-50%) translateY(0)}.header-home__actions{display:flex;align-items:center;gap:8px}.header-home__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}.logomark{height:28px;width:auto;flex-shrink:0}@media (min-width: 768px){.header-home{padding:16px 24px}.logomark{height:32px}.header-home__title{display:none}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px;overflow:hidden}ion-content::part(scroll){display:flex;flex-direction:column}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-header[collapse=condense]{display:none}@media (min-width: 768px){ion-header[collapse=condense]{display:none}}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}.header-expandable__text{margin-bottom:0}.header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}.header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){.header-expandable{padding:48px var(--content-padding-md)}.header-expandable__title{font-size:var(--font-size-3xl)}.header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{position:relative;z-index:20;padding:0;flex:1;display:flex;flex-direction:column}@media (min-width: 768px){.content-wrapper{width:100%}}.content-inner{background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary);flex:1;padding:24px 20px 32px;padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom,0px))}@media (min-width: 768px){.content-inner{border-radius:16px 16px 0 0;padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.content-inner{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.content-inner{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.content-inner{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.content-inner{padding:32px var(--content-padding-3xl)!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ionContent: [{
-                type: ViewChild,
-                args: [IonContent]
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], showCondensedHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCondensedHeader", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], headerFadeDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerFadeDistance", required: false }] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], scroll: [{ type: i0.Output, args: ["scroll"] }] } });
+  `, styles: [":host{display:flex;flex-direction:column;height:100%}ion-header{background:var(--color-brand-secondary);box-shadow:none;height:64px}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 64px;height:100%;min-height:64px;padding:0}ion-header ion-toolbar::part(native){height:100%;min-height:64px;padding:0}@media (min-width: 768px){ion-header{display:none}}.header-back{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-brand-secondary);position:relative;height:100%;min-height:64px}.header-back .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:opacity var(--transition-duration-fast) var(--ease-smooth);z-index:10}.header-back .back-button:hover{opacity:.8}.header-back .back-button:active{opacity:.6}.header-back .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:#fff;margin:0}.desktop-header{display:none}@media (min-width: 768px){.desktop-header{display:flex;align-items:center;gap:16px;padding:32px var(--content-padding-md) 24px var(--content-padding-md);max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}.desktop-header .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color-default-primary);transition:opacity var(--transition-duration-fast) var(--ease-smooth)}.desktop-header .back-button:hover{opacity:.8}.desktop-header .back-button:active{opacity:.6}.desktop-header h1{font-size:var(--font-size-2xl);font-weight:600;margin:0;color:var(--text-color-default-primary)}}@media (min-width: 992px){.desktop-header{max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.desktop-header{max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.desktop-header{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.desktop-header{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-content{--background: var(--color-background-neutral-primary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;overflow:hidden}@media (max-width: 767px){ion-content{border-radius:24px 24px 36px 36px;animation:bottomRadiusOut .6s ease .3s forwards}:host(.navigating-back) ion-content{border-radius:24px 24px 0 0;animation:bottomRadiusIn .8s cubic-bezier(.36,.66,.04,1) forwards!important}}@keyframes bottomRadiusOut{0%{border-radius:24px 24px 36px 36px}to{border-radius:24px 24px 0 0}}@keyframes bottomRadiusIn{0%{border-radius:24px 24px 0 0}to{border-radius:24px 24px 36px 36px}}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0;animation:none}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}.detail-content{padding:24px 20px 32px}@media (min-width: 768px){.detail-content{padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.detail-content{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.detail-content{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.detail-content{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.detail-content{padding:32px var(--content-padding-3xl)!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NavController }, { type: i0.ElementRef }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "backRoute", required: false }] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 /**
- * DsMobilePageDetailsComponent
+ * DsMobileContentComponent
  *
- * A mobile page layout for detail/drill-down pages with:
- * - Back button header (mobile + desktop variants)
- * - White background content area
- * - Responsive padding
- *
- * @example
- * ```html
- * <!-- Simple detail page -->
- * <ds-mobile-page-details
- *   title="Property Details"
- *   (back)="goBack()">
- *   <div class="page-content">
- *     <!-- Your content -->
- *   </div>
- * </ds-mobile-page-details>
- *
- * <!-- With default back route -->
- * <ds-mobile-page-details
- *   title="Invoice Details"
- *   backRoute="/invoices">
- *   <div class="page-content">
- *     <!-- Your content -->
- *   </div>
- * </ds-mobile-page-details>
- * ```
- */
-class DsMobilePageDetailsComponent extends MobilePageBase {
-    navCtrl;
-    elementRef;
-    // Inputs
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
-    backRoute = input('', ...(ngDevMode ? [{ debugName: "backRoute" }] : [])); // Optional default back route
-    // Outputs
-    back = output();
-    constructor(navCtrl, elementRef) {
-        super();
-        this.navCtrl = navCtrl;
-        this.elementRef = elementRef;
-    }
-    /**
-     * Handle back navigation
-     *
-     * By default, navigates using the provided backRoute or browser back.
-     * Parent components can listen to the (back) event to override this behavior.
-     *
-     * @example
-     * ```html
-     * <!-- Default behavior: uses backRoute or browser back -->
-     * <ds-mobile-page-details
-     *   title="Details"
-     *   backRoute="/home">
-     * </ds-mobile-page-details>
-     *
-     * <!-- Custom behavior: parent handles navigation -->
-     * <ds-mobile-page-details
-     *   title="Details"
-     *   (back)="customBackHandler()">
-     * </ds-mobile-page-details>
-     * ```
-     */
-    handleBack() {
-        // Add class to trigger reverse animation
-        this.elementRef.nativeElement.classList.add('navigating-back');
-        // Emit event for parent to optionally handle
-        this.back.emit();
-        // Default behavior: navigate using backRoute or browser back
-        if (this.backRoute()) {
-            this.navCtrl.navigateBack(this.backRoute());
-        }
-        else {
-            this.navCtrl.back();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageDetailsComponent, deps: [{ token: i1.NavController }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: DsMobilePageDetailsComponent, isStandalone: true, selector: "ds-mobile-page-details", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, backRoute: { classPropertyName: "backRoute", publicName: "backRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, usesInheritance: true, ngImport: i0, template: `
-    <!-- Mobile header - hidden on desktop -->
-    <ion-header>
-      <ion-toolbar>
-        <div class="header-back">
-          <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-            <ds-icon name="remixArrowLeftLine" size="24px" />
-          </button>
-          <h1 class="header-title">{{ title() }}</h1>
-        </div>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <!-- Desktop header above content -->
-      <div class="desktop-header">
-        <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-          <ds-icon name="remixArrowLeftLine" size="24px" />
-        </button>
-        <h1>{{ title() }}</h1>
-      </div>
-
-      <!-- Content area -->
-      <div class="detail-content">
-        <ng-content></ng-content>
-      </div>
-    </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}ion-header{background:var(--color-brand-secondary);box-shadow:none;height:64px}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 64px;height:100%;min-height:64px;padding:0}ion-header ion-toolbar::part(native){height:100%;min-height:64px;padding:0}@media (min-width: 768px){ion-header{display:none}}.header-back{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-brand-secondary);position:relative;height:100%;min-height:64px}.header-back .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:opacity var(--transition-duration-fast) var(--ease-smooth);z-index:10}.header-back .back-button:hover{opacity:.8}.header-back .back-button:active{opacity:.6}.header-back .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:#fff;margin:0}.desktop-header{display:none}@media (min-width: 768px){.desktop-header{display:flex;align-items:center;gap:16px;padding:32px var(--content-padding-md) 24px var(--content-padding-md);max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}.desktop-header .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color-default-primary);transition:opacity var(--transition-duration-fast) var(--ease-smooth)}.desktop-header .back-button:hover{opacity:.8}.desktop-header .back-button:active{opacity:.6}.desktop-header h1{font-size:var(--font-size-2xl);font-weight:600;margin:0;color:var(--text-color-default-primary)}}@media (min-width: 992px){.desktop-header{max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.desktop-header{max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.desktop-header{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.desktop-header{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-content{--background: var(--color-background-neutral-primary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;overflow:hidden}@media (max-width: 767px){ion-content{border-radius:24px 24px 36px 36px;animation:bottomRadiusOut .6s ease .3s forwards}:host(.navigating-back) ion-content{border-radius:24px 24px 0 0;animation:bottomRadiusIn .8s cubic-bezier(.36,.66,.04,1) forwards!important}}@keyframes bottomRadiusOut{0%{border-radius:24px 24px 36px 36px}to{border-radius:24px 24px 0 0}}@keyframes bottomRadiusIn{0%{border-radius:24px 24px 0 0}to{border-radius:24px 24px 36px 36px}}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0;animation:none}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}.detail-content{padding:24px 20px 32px}@media (min-width: 768px){.detail-content{padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.detail-content{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.detail-content{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.detail-content{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.detail-content{padding:32px var(--content-padding-3xl)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePageDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-page-details', standalone: true, imports: [
-                        CommonModule,
-                        IonHeader,
-                        IonToolbar,
-                        IonContent,
-                        DsIconComponent
-                    ], template: `
-    <!-- Mobile header - hidden on desktop -->
-    <ion-header>
-      <ion-toolbar>
-        <div class="header-back">
-          <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-            <ds-icon name="remixArrowLeftLine" size="24px" />
-          </button>
-          <h1 class="header-title">{{ title() }}</h1>
-        </div>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <!-- Desktop header above content -->
-      <div class="desktop-header">
-        <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-          <ds-icon name="remixArrowLeftLine" size="24px" />
-        </button>
-        <h1>{{ title() }}</h1>
-      </div>
-
-      <!-- Content area -->
-      <div class="detail-content">
-        <ng-content></ng-content>
-      </div>
-    </ion-content>
-  `, styles: [":host{display:flex;flex-direction:column;height:100%}ion-header{background:var(--color-brand-secondary);box-shadow:none;height:64px}ion-header ion-toolbar{--background: var(--color-brand-secondary);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 64px;height:100%;min-height:64px;padding:0}ion-header ion-toolbar::part(native){height:100%;min-height:64px;padding:0}@media (min-width: 768px){ion-header{display:none}}.header-back{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-brand-secondary);position:relative;height:100%;min-height:64px}.header-back .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:opacity var(--transition-duration-fast) var(--ease-smooth);z-index:10}.header-back .back-button:hover{opacity:.8}.header-back .back-button:active{opacity:.6}.header-back .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:#fff;margin:0}.desktop-header{display:none}@media (min-width: 768px){.desktop-header{display:flex;align-items:center;gap:16px;padding:32px var(--content-padding-md) 24px var(--content-padding-md);max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}.desktop-header .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color-default-primary);transition:opacity var(--transition-duration-fast) var(--ease-smooth)}.desktop-header .back-button:hover{opacity:.8}.desktop-header .back-button:active{opacity:.6}.desktop-header h1{font-size:var(--font-size-2xl);font-weight:600;margin:0;color:var(--text-color-default-primary)}}@media (min-width: 992px){.desktop-header{max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.desktop-header{max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.desktop-header{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.desktop-header{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-content{--background: var(--color-background-neutral-primary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;overflow:hidden}@media (max-width: 767px){ion-content{border-radius:24px 24px 36px 36px;animation:bottomRadiusOut .6s ease .3s forwards}:host(.navigating-back) ion-content{border-radius:24px 24px 0 0;animation:bottomRadiusIn .8s cubic-bezier(.36,.66,.04,1) forwards!important}}@keyframes bottomRadiusOut{0%{border-radius:24px 24px 36px 36px}to{border-radius:24px 24px 0 0}}@keyframes bottomRadiusIn{0%{border-radius:24px 24px 0 0}to{border-radius:24px 24px 36px 36px}}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0;animation:none}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}.detail-content{padding:24px 20px 32px}@media (min-width: 768px){.detail-content{padding:32px var(--content-padding-md)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));margin:0 auto;width:100%}}@media (min-width: 992px){.detail-content{padding:32px var(--content-padding-lg)!important;max-width:calc(var(--content-max-width-md) + (var(--content-padding-md) * 2))}}@media (min-width: 1440px){.detail-content{padding:32px var(--content-padding-xl)!important;max-width:calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2))}}@media (min-width: 1768px){.detail-content{padding:32px var(--content-padding-2xl)!important}}@media (min-width: 1920px){.detail-content{padding:32px var(--content-padding-3xl)!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NavController }, { type: i0.ElementRef }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "backRoute", required: false }] }], back: [{ type: i0.Output, args: ["back"] }] } });
-
-/**
- * DsMobileContentComponent
- *
- * Main content container for mobile pages with flexible layout options.
- * Provides consistent spacing and layout patterns.
+ * Main content container for mobile pages with flexible layout options.
+ * Provides consistent spacing and layout patterns.
  *
  * @example
  * ```html
@@ -4720,6 +4188,7 @@ class DsMobileTabBarComponent {
     routerSubscription;
     router;
     modalController = inject(ModalController);
+    userService = inject(UserService);
     constructor(elementRef) {
         this.elementRef = elementRef;
         // Inject Router optionally
@@ -5168,15 +4637,17 @@ class DsMobileTabBarComponent {
     async handleAvatarClick() {
         // Emit the basic click event (for backwards compatibility)
         this.avatarClick.emit();
+        // Use input if provided, otherwise fall back to service
+        const menuItems = this.profileMenuItems || this.userService.profileMenuItems();
         // If no menu items configured, just emit and return
-        if (!this.profileMenuItems || this.profileMenuItems.length === 0) {
+        if (!menuItems || menuItems.length === 0) {
             return;
         }
         // Open the bottom sheet with configured menu items
         const sheet = await this.modalController.create({
             component: DsMobileActionsBottomSheetComponent,
             componentProps: {
-                customActionGroups: this.profileMenuItems
+                customActionGroups: menuItems
             },
             // Auto-height: no breakpoints, no handle
             cssClass: 'ds-bottom-sheet auto-height'
@@ -9565,41 +9036,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: ['click']
             }] } });
 
-// Mobile Page Components
-
 /**
- * User service for managing current user data globally
+ * 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>
+ * ```
  */
-class UserService {
-    // User avatar configuration
-    _avatarInitials = signal('LM', ...(ngDevMode ? [{ debugName: "_avatarInitials" }] : []));
-    _avatarType = signal('initials', ...(ngDevMode ? [{ debugName: "_avatarType" }] : []));
-    _avatarSrc = signal('', ...(ngDevMode ? [{ debugName: "_avatarSrc" }] : []));
-    // Readonly computed values
-    avatarInitials = this._avatarInitials.asReadonly();
-    avatarType = this._avatarType.asReadonly();
-    avatarSrc = this._avatarSrc.asReadonly();
+class DsTextInputComponent {
+    // Input properties
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : []));
+    autoClearError = input(true, ...(ngDevMode ? [{ debugName: "autoClearError" }] : []));
+    validator = input(null, ...(ngDevMode ? [{ debugName: "validator" }] : []));
+    // Output events
+    valueChange = output();
+    blur = output();
+    focus = output();
+    errorCleared = output();
+    // Internal state
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Generate unique ID for accessibility
+    inputId = `ds-text-input-${Math.random().toString(36).substring(2, 9)}`;
+    // ControlValueAccessor implementation
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const target = event.target;
+        const newValue = target.value;
+        this._value.set(newValue);
+        this.onChange(newValue);
+        this.valueChange.emit(newValue);
+        // Auto-clear error if input becomes valid
+        if (this.autoClearError() && this.hasError()) {
+            const isValid = this.validateInput(newValue);
+            if (isValid) {
+                this.errorCleared.emit();
+            }
+        }
+    }
     /**
-     * Update avatar configuration
+     * Validates the input value based on type or custom validator
      */
-    setAvatarInitials(initials) {
-        this._avatarInitials.set(initials);
+    validateInput(value) {
+        // Use custom validator if provided
+        const customValidator = this.validator();
+        if (customValidator) {
+            return customValidator(value);
+        }
+        // Use built-in validation based on input type
+        const inputType = this.type();
+        const inputElement = document.createElement('input');
+        inputElement.type = inputType;
+        inputElement.value = value;
+        // For email type, use HTML5 validation
+        if (inputType === 'email') {
+            return inputElement.validity.valid;
+        }
+        // For required fields, check if value exists
+        if (this.required() && !value.trim()) {
+            return false;
+        }
+        // Default: valid if HTML5 validation passes
+        return inputElement.validity.valid;
     }
-    setAvatarType(type) {
-        this._avatarType.set(type);
+    onBlur() {
+        this.onTouched();
     }
-    setAvatarSrc(src) {
-        this._avatarSrc.set(src);
+    onFocus() {
+        // Focus event can be emitted if needed
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UserService, providedIn: 'root' });
+    // ControlValueAccessor methods
+    writeValue(value) {
+        this._value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Angular forms will handle this via the disabled input
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsTextInputComponent, isStandalone: true, selector: "ds-text-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, autoClearError: { classPropertyName: "autoClearError", publicName: "autoClearError", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", errorCleared: "errorCleared" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsTextInputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div class="text-input-wrapper">
+      <input
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [autocomplete]="autocomplete() || null"
+        [attr.inputmode]="inputmode() || null"
+        [class.error]="hasError()"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="hasError() && errorMessage() ? 'error-' + inputId : null"
+        class="text-input"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (focus)="onFocus()"
+        [id]="inputId">
+      
+      @if (hasError() && errorMessage()) {
+        <div 
+          class="error-message"
+          [id]="'error-' + inputId"
+          role="alert">
+          {{ errorMessage() }}
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.text-input-wrapper{position:relative;width:100%}.text-input{width:100%;height:48px;padding:0 16px;box-sizing:border-box;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);font-weight:400;line-height:1.4;color:var(--text-color-default-primary);background-color:var(--color-background-neutral-primary);border:1px solid var(--border-color-default);border-radius:8px;transition:border-color var(--transition-duration-fast) var(--ease-smooth),background-color var(--transition-duration-fast) var(--ease-smooth),box-shadow var(--transition-duration-fast) var(--ease-smooth);outline:none;-webkit-appearance:none;appearance:none}.text-input::placeholder{color:var(--text-color-default-tertiary)}.text-input:hover:not(:disabled):not(:focus){border-color:var(--border-color-default);background-color:var(--color-background-neutral-primary-hover)}.text-input:focus{border-color:var(--color-brand-base);background-color:var(--color-background-neutral-primary);box-shadow:0 0 0 3px var(--outline-color-default)}.text-input.error{border-color:var(--color-destructive-base)}.text-input.error:focus{border-color:var(--color-destructive-base);box-shadow:0 0 0 3px #dc26261a}.text-input:disabled{background-color:var(--color-background-neutral-disabled);border-color:var(--border-color-default);color:var(--text-color-default-disabled);cursor:not-allowed}.text-input:disabled::placeholder{color:var(--text-color-default-disabled)}.error-message{margin-top:8px;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-destructive-base)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UserService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-text-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsTextInputComponent),
+                            multi: true
+                        }
+                    ], template: `
+    <div class="text-input-wrapper">
+      <input
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [autocomplete]="autocomplete() || null"
+        [attr.inputmode]="inputmode() || null"
+        [class.error]="hasError()"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="hasError() && errorMessage() ? 'error-' + inputId : null"
+        class="text-input"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (focus)="onFocus()"
+        [id]="inputId">
+      
+      @if (hasError() && errorMessage()) {
+        <div 
+          class="error-message"
+          [id]="'error-' + inputId"
+          role="alert">
+          {{ errorMessage() }}
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%}.text-input-wrapper{position:relative;width:100%}.text-input{width:100%;height:48px;padding:0 16px;box-sizing:border-box;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);font-weight:400;line-height:1.4;color:var(--text-color-default-primary);background-color:var(--color-background-neutral-primary);border:1px solid var(--border-color-default);border-radius:8px;transition:border-color var(--transition-duration-fast) var(--ease-smooth),background-color var(--transition-duration-fast) var(--ease-smooth),box-shadow var(--transition-duration-fast) var(--ease-smooth);outline:none;-webkit-appearance:none;appearance:none}.text-input::placeholder{color:var(--text-color-default-tertiary)}.text-input:hover:not(:disabled):not(:focus){border-color:var(--border-color-default);background-color:var(--color-background-neutral-primary-hover)}.text-input:focus{border-color:var(--color-brand-base);background-color:var(--color-background-neutral-primary);box-shadow:0 0 0 3px var(--outline-color-default)}.text-input.error{border-color:var(--color-destructive-base)}.text-input.error:focus{border-color:var(--color-destructive-base);box-shadow:0 0 0 3px #dc26261a}.text-input:disabled{background-color:var(--color-background-neutral-disabled);border-color:var(--border-color-default);color:var(--text-color-default-disabled);cursor:not-allowed}.text-input:disabled::placeholder{color:var(--text-color-default-disabled)}.error-message{margin-top:8px;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-destructive-base)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autoClearError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClearError", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], errorCleared: [{ type: i0.Output, args: ["errorCleared"] }] } });
+
+// Mobile Page Components
 
 class MobileCommunityPageComponent {
     router;
@@ -10246,7 +9890,7 @@ class MobileCommunityPageComponent {
         </div>
       </ds-mobile-content>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".post-feed{display:flex;flex-direction:column;max-width:640px}.post-list-wrapper{display:flex;flex-direction:column}.pinned-posts-section{margin:-12px -12px 12px;padding:0 12px 12px;box-shadow:var(--box-shadow-sm);border-radius:16px;border:1px solid var(--border-color-default)}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.community-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance"], outputs: ["avatarClick", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "clickable"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout"], outputs: ["fileClick"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "author", "maxVisible"], outputs: ["photoClick"] }] });
+  `, isInline: true, styles: [".post-feed{display:flex;flex-direction:column;max-width:640px}.post-list-wrapper{display:flex;flex-direction:column}.pinned-posts-section{margin:-12px -12px 12px;padding:0 12px 12px;box-shadow:var(--box-shadow-sm);border-radius:16px;border:1px solid var(--border-color-default)}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.community-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "clickable"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout"], outputs: ["fileClick"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "author", "maxVisible"], outputs: ["photoClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileCommunityPageComponent, decorators: [{
             type: Component,
@@ -10775,7 +10419,7 @@ class MobileHandbookPageComponent {
         </ds-mobile-content-section>
       </ds-mobile-content>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".folders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center}@media (min-width: 768px){.folders-grid{grid-template-columns:repeat(3,1fr)}}ds-mobile-handbook-folder{width:100%}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance"], outputs: ["avatarClick", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileContentSectionComponent, selector: "ds-mobile-content-section" }, { kind: "component", type: DsMobileHandbookFolderComponent, selector: "ds-mobile-handbook-folder", inputs: ["variant", "iconName", "itemCount", "label", "items", "loading", "error"] }] });
+  `, isInline: true, styles: [".folders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center}@media (min-width: 768px){.folders-grid{grid-template-columns:repeat(3,1fr)}}ds-mobile-handbook-folder{width:100%}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileContentSectionComponent, selector: "ds-mobile-content-section" }, { kind: "component", type: DsMobileHandbookFolderComponent, selector: "ds-mobile-handbook-folder", inputs: ["variant", "iconName", "itemCount", "label", "items", "loading", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileHandbookPageComponent, decorators: [{
             type: Component,
@@ -10966,7 +10610,7 @@ class MobileHomePageComponent {
         </ds-mobile-content-section>
       </ds-mobile-content>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".grey-box{height:120px;border-radius:12px;background:var(--color-background-neutral-tertiary);flex:1}.grey-box.clickable{background:var(--color-background-brand);cursor:pointer;transition:transform var(--transition-duration-fast) var(--ease-smooth)}.grey-box.clickable:active{transform:scale(.98)}\n"], dependencies: [{ kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance"], outputs: ["avatarClick", "refresh", "scroll"] }, { kind: "component", type: DsMobileHeaderContentComponent, selector: "ds-mobile-header-content" }, { kind: "component", type: DsMobileHeaderContentTileComponent, selector: "ds-mobile-header-content-tile" }, { kind: "component", type: TileIconComponent, selector: "tile-icon" }, { kind: "component", type: TileContentComponent, selector: "tile-content" }, { kind: "component", type: TileLabelComponent, selector: "tile-label" }, { kind: "component", type: TileValueComponent, selector: "tile-value" }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileContentSectionComponent, selector: "ds-mobile-content-section" }, { kind: "component", type: SectionHeaderComponent, selector: "section-header", inputs: ["width"] }, { kind: "component", type: ContentRowComponent, selector: "content-row" }] });
+  `, isInline: true, styles: [".grey-box{height:120px;border-radius:12px;background:var(--color-background-neutral-tertiary);flex:1}.grey-box.clickable{background:var(--color-background-brand);cursor:pointer;transition:transform var(--transition-duration-fast) var(--ease-smooth)}.grey-box.clickable:active{transform:scale(.98)}\n"], dependencies: [{ kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileHeaderContentComponent, selector: "ds-mobile-header-content" }, { kind: "component", type: DsMobileHeaderContentTileComponent, selector: "ds-mobile-header-content-tile" }, { kind: "component", type: TileIconComponent, selector: "tile-icon" }, { kind: "component", type: TileContentComponent, selector: "tile-content" }, { kind: "component", type: TileLabelComponent, selector: "tile-label" }, { kind: "component", type: TileValueComponent, selector: "tile-value" }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileContentSectionComponent, selector: "ds-mobile-content-section" }, { kind: "component", type: SectionHeaderComponent, selector: "section-header", inputs: ["width"] }, { kind: "component", type: ContentRowComponent, selector: "content-row" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileHomePageComponent, decorators: [{
             type: Component,
@@ -11294,7 +10938,7 @@ class MobileInquiriesPageComponent {
         </div>
       </ds-mobile-content>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".inquiries-container{display:flex;flex-direction:column;max-width:640px}.inquiry-list-wrapper{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance"], outputs: ["avatarClick", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "clickable", "showChevron"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
+  `, isInline: true, styles: [".inquiries-container{display:flex;flex-direction:column;max-width:640px}.inquiry-list-wrapper{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "clickable", "showChevron"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiriesPageComponent, decorators: [{
             type: Component,
@@ -11321,600 +10965,1187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         </ds-mobile-inline-tabs>
       </div>
       
-      <ds-mobile-content>
-        <div class="inquiries-container">
-          @if (filteredInquiries().length > 0) {
-              <div class="inquiry-list-wrapper">
-              @for (inquiry of filteredInquiries(); track inquiry.id; let idx = $index) {
-                  <ds-mobile-interactive-list-item-inquiry
-                    [title]="inquiry.title"
-                    [description]="inquiry.description"
-                  [status]="inquiry.status"
-                    [timestamp]="inquiry.timestamp"
-                    [iconName]="getInquiryIcon(inquiry.category)"
-                    [clickable]="true"
-                    [showChevron]="false"
-                    (inquiryClick)="openInquiryDetail(inquiry.id)"
-                    (longPress)="showInquiryActions(inquiry.id)">
-                  </ds-mobile-interactive-list-item-inquiry>
-
-                }
-              </div>
-          } @else {
-            <!-- Empty state -->
-            <div class="empty-state">
-              <ds-icon name="remixInboxLine" size="48px" color="tertiary" />
-              <h3 class="empty-state-title">Ingen henvendelser endnu</h3>
-              <p class="empty-state-description">
-                @if (filterStatus() === 'open') {
-                  Du har ingen åbne henvendelser
-                } @else if (filterStatus() === 'closed') {
-                  Du har ingen lukkede henvendelser
-                } @else {
-                  Du har ikke oprettet nogen henvendelser endnu
-                }
-              </p>
-            </div>
-          }
+      <ds-mobile-content>
+        <div class="inquiries-container">
+          @if (filteredInquiries().length > 0) {
+              <div class="inquiry-list-wrapper">
+              @for (inquiry of filteredInquiries(); track inquiry.id; let idx = $index) {
+                  <ds-mobile-interactive-list-item-inquiry
+                    [title]="inquiry.title"
+                    [description]="inquiry.description"
+                  [status]="inquiry.status"
+                    [timestamp]="inquiry.timestamp"
+                    [iconName]="getInquiryIcon(inquiry.category)"
+                    [clickable]="true"
+                    [showChevron]="false"
+                    (inquiryClick)="openInquiryDetail(inquiry.id)"
+                    (longPress)="showInquiryActions(inquiry.id)">
+                  </ds-mobile-interactive-list-item-inquiry>
+
+                }
+              </div>
+          } @else {
+            <!-- Empty state -->
+            <div class="empty-state">
+              <ds-icon name="remixInboxLine" size="48px" color="tertiary" />
+              <h3 class="empty-state-title">Ingen henvendelser endnu</h3>
+              <p class="empty-state-description">
+                @if (filterStatus() === 'open') {
+                  Du har ingen åbne henvendelser
+                } @else if (filterStatus() === 'closed') {
+                  Du har ingen lukkede henvendelser
+                } @else {
+                  Du har ikke oprettet nogen henvendelser endnu
+                }
+              </p>
+            </div>
+          }
+        </div>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `, styles: [".inquiries-container{display:flex;flex-direction:column;max-width:640px}.inquiry-list-wrapper{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }] });
+
+class MobileInquiryDetailPageComponent extends MobilePageBase {
+    userService;
+    navCtrl;
+    elementRef;
+    ionContent;
+    // Platform detection
+    platform = inject(Platform);
+    // Computed property to check if running on native platform
+    isNativePlatform = computed(() => this.platform.is('ios') ||
+        this.platform.is('android') ||
+        this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
+    inquiryTitle = 'Tørretumbler virker ikke';
+    activeTab = signal('activity', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tabItems = [
+        { id: 'activity', label: 'Aktivitet' },
+        { id: 'messages', label: 'Beskeder', badge: 0 },
+        { id: 'details', label: 'Detaljer' }
+    ];
+    activities = [
+        {
+            id: '1',
+            type: 'assignment',
+            actor: 'Martin Smith',
+            actorInitials: 'MS',
+            title: 'er blevet tildelt som din dedikerede tekniker.',
+            timestamp: '2 dage siden',
+            date: '28. feb 2025',
+            iconName: 'remixUserAddLine'
+        },
+        {
+            id: '2',
+            type: 'assignment',
+            actor: 'Ricki Meihlen',
+            actorInitials: 'RM',
+            title: 'er blevet tildelt til at håndtere din henvendelse.',
+            timestamp: '8 dage siden',
+            date: '22. feb 2025',
+            iconName: 'remixUserLine'
+        },
+        {
+            id: '3',
+            type: 'creation',
+            title: 'Henvendelse oprettet',
+            timestamp: '8 dage siden',
+            date: '22. feb 2025',
+            iconName: 'remixAddCircleLine'
+        }
+    ];
+    messageThreads = [
+        {
+            id: '1',
+            senderName: 'Ove Hindborg',
+            senderAvatar: '',
+            senderInitials: 'OH',
+            message: 'Dejligt at høre! Jeg venter på din teknikerbesøg tidsplan.',
+            role: 'Sagsbehandler',
+            timestamp: '2t siden',
+            unread: true
+        },
+        {
+            id: '2',
+            senderName: 'Martin Smith',
+            senderAvatar: '',
+            senderInitials: 'MS',
+            message: 'Dejligt at høre! Jeg venter på din teknikerbesøg tidsplan.',
+            role: 'Tekniker',
+            timestamp: '4t siden',
+            unread: true
+        }
+    ];
+    unreadMessagesCount = computed(() => {
+        const count = this.messageThreads.filter(m => m.unread).length;
+        // Update badge in tab items
+        const messagesTab = this.tabItems.find(t => t.id === 'messages');
+        if (messagesTab) {
+            messagesTab.badge = count;
+        }
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "unreadMessagesCount" }] : []));
+    constructor(userService, navCtrl, elementRef) {
+        super();
+        this.userService = userService;
+        this.navCtrl = navCtrl;
+        this.elementRef = elementRef;
+        // Trigger initial badge update
+        this.unreadMessagesCount();
+    }
+    ngAfterViewInit() {
+        // Initial setup if needed
+    }
+    setActiveTab(tabId) {
+        this.activeTab.set(tabId);
+    }
+    goBack() {
+        this.navCtrl.back({ animation: customBackTransition });
+    }
+    handleScroll(event) {
+        const scrollTop = event.detail.scrollTop;
+        const threshold = 160;
+        const fadeDistance = 200;
+        const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
+        const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
+        // Show title in fixed header when scrolled past threshold
+        if (scrollTop > threshold) {
+            header?.classList.add('header-scrolled');
+        }
+        else {
+            header?.classList.remove('header-scrolled');
+        }
+        // Fade out header-expandable content based on scroll
+        if (headerExpandable) {
+            const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
+            // Calculate opacity (1 to 0)
+            const opacity = 1 - fadeProgress;
+            // Calculate transform (0px to -20px upward)
+            const translateY = fadeProgress * -20;
+            // Apply styles
+            headerExpandable.style.opacity = opacity.toString();
+            headerExpandable.style.transform = `translateY(${translateY}px)`;
+        }
+    }
+    handleRefresh(event) {
+        console.log('Pull-to-refresh triggered');
+        setTimeout(() => {
+            console.log('Refresh complete');
+            event.target.complete();
+        }, 1000);
+    }
+    openMessage(messageId) {
+        console.log('Opening message:', messageId);
+        // Navigate to message thread detail
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiryDetailPageComponent, deps: [{ token: UserService }, { token: i1.NavController }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MobileInquiryDetailPageComponent, isStandalone: true, selector: "app-mobile-inquiry-detail-page", host: { classAttribute: "ion-page" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-detail">
+          <!-- Back Button -->
+          <button class="back-button" (click)="goBack()" [attr.aria-label]="'Go back'">
+            <ds-icon name="remixArrowLeftSLine" size="24px" color="white" />
+          </button>
+          
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-detail__title">{{ inquiryTitle }}</ion-title>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (isNativePlatform()) {
+        <ion-refresher 
+          slot="fixed" 
+          (ionRefresh)="handleRefresh($event)"
+          [pullFactor]="0.4" 
+          [pullMin]="80" 
+          [pullMax]="240"
+          closeDuration="600ms">
+          <ion-refresher-content
+            pullingIcon="remixArrowDownS"
+            refreshingSpinner="lines">
+          </ion-refresher-content>
+        </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">{{ inquiryTitle }}</h1>
+          </div>
+          
+          <!-- Tabs in header -->
+          <ds-mobile-inline-tabs
+            [tabs]="tabItems"
+            [activeTab]="activeTab()"
+            (tabChange)="setActiveTab($event)">
+          </ds-mobile-inline-tabs>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        <div class="content-inner">
+          <!-- Activity Tab Content -->
+          @if (activeTab() === 'activity') {
+            <div class="activity-list">
+              @for (activity of activities; track activity.id) {
+                <div class="activity-item">
+                  @if (activity.actor) {
+                    <!-- Avatar with badge for actor activities -->
+                    <div class="avatar-wrapper">
+                      <ds-avatar 
+                        [type]="'initials'"
+                        [initials]="activity.actorInitials || ''"
+                        size="md" />
+                      
+                      <div class="avatar-badge">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" fill="none">
+                          <path d="M33.9862 5.51709H23.1724V8.82743H26.0413C26.2841 8.82743 26.4827 9.02606 26.4827 9.26881V12.7998C26.4827 13.0426 26.2841 13.2412 26.0413 13.2412H23.1724V14.3447H26.0413C26.2841 14.3447 26.4827 14.5433 26.4827 14.7861V18.3171C26.4827 18.5598 26.2841 18.7585 26.0413 18.7585H23.1724V19.8619H26.0413C26.2841 19.8619 26.4827 20.0605 26.4827 20.3033V23.8343C26.4827 24.0771 26.2841 24.2757 26.0413 24.2757H23.1724V26.2619C23.1724 26.7496 23.0267 27.2043 22.7773 27.5861H27.5862L32 31.9999V27.5861H33.9862C34.7167 27.5861 35.3103 26.9924 35.3103 26.2619V6.84123C35.3103 6.11075 34.7167 5.51709 33.9862 5.51709ZM32 23.8343C32 24.0771 31.8013 24.2757 31.5586 24.2757H28.0276C27.7848 24.2757 27.5862 24.0771 27.5862 23.8343V20.3033C27.5862 20.0605 27.7848 19.8619 28.0276 19.8619H31.5586C31.8013 19.8619 32 20.0605 32 20.3033V23.8343ZM32 18.3171C32 18.5598 31.8013 18.7585 31.5586 18.7585H28.0276C27.7848 18.7585 27.5862 18.5598 27.5862 18.3171V14.7861C27.5862 14.5433 27.7848 14.3447 28.0276 14.3447H31.5586C31.8013 14.3447 32 14.5433 32 14.7861V18.3171ZM32 12.7998C32 13.0426 31.8013 13.2412 31.5586 13.2412H28.0276C27.7848 13.2412 27.5862 13.0426 27.5862 12.7998V9.26881C27.5862 9.02606 27.7848 8.82743 28.0276 8.82743H31.5586C31.8013 8.82743 32 9.02606 32 9.26881V12.7998Z" fill="white"/>
+                          <path d="M20.7448 0H1.32414C0.593655 0 0 0.593655 0 1.32414V26.2621C0 26.9926 0.593655 27.5862 1.32414 27.5862H3.31034V32L7.72414 27.5862H20.7448C21.4753 27.5862 22.069 26.9926 22.069 26.2621V1.32414C22.069 0.593655 21.4753 0 20.7448 0ZM7.72414 23.8345C7.72414 24.0772 7.52552 24.2759 7.28276 24.2759H3.75172C3.50897 24.2759 3.31034 24.0772 3.31034 23.8345V20.3034C3.31034 20.0607 3.50897 19.8621 3.75172 19.8621H7.28276C7.52552 19.8621 7.72414 20.0607 7.72414 20.3034V23.8345ZM7.72414 18.3172C7.72414 18.56 7.52552 18.7586 7.28276 18.7586H3.75172C3.50897 18.7586 3.31034 18.56 3.31034 18.3172V14.7862C3.31034 14.5434 3.50897 14.3448 3.75172 14.3448H7.28276C7.52552 14.3448 7.72414 14.5434 7.72414 14.7862V18.3172ZM7.72414 12.8C7.72414 13.0428 7.52552 13.2414 7.28276 13.2414H3.75172C3.50897 13.2414 3.31034 13.0428 3.31034 12.8V9.26897C3.31034 9.02621 3.50897 8.82759 3.75172 8.82759H7.28276C7.52552 8.82759 7.72414 9.02621 7.72414 9.26897V12.8ZM7.72414 7.28276C7.72414 7.52552 7.52552 7.72414 7.28276 7.72414H3.75172C3.50897 7.72414 3.31034 7.52552 3.31034 7.28276V3.75172C3.31034 3.50897 3.50897 3.31034 3.75172 3.31034H7.28276C7.52552 3.31034 7.72414 3.50897 7.72414 3.75172V7.28276ZM13.2414 23.8345C13.2414 24.0772 13.0428 24.2759 12.8 24.2759H9.26897C9.02621 24.2759 8.82759 24.0772 8.82759 23.8345V20.3034C8.82759 20.0607 9.02621 19.8621 9.26897 19.8621H12.8C13.0428 19.8621 13.2414 20.0607 13.2414 20.3034V23.8345ZM13.2414 18.3172C13.2414 18.56 13.0428 18.7586 12.8 18.7586H9.26897C9.02621 18.7586 8.82759 18.56 8.82759 18.3172V14.7862C8.82759 14.5434 9.02621 14.3448 9.26897 14.3448H12.8C13.0428 14.3448 13.2414 14.5434 13.2414 14.7862V18.3172ZM13.2414 12.8C13.2414 13.0428 13.0428 13.2414 12.8 13.2414H9.26897C9.02621 13.2414 8.82759 13.0428 8.82759 12.8V9.26897C8.82759 9.02621 9.02621 8.82759 9.26897 8.82759H12.8C13.0428 8.82759 13.2414 9.02621 13.2414 9.26897V12.8ZM13.2414 6.84138V7.28276C13.2414 7.52552 13.0428 7.72414 12.8 7.72414H9.26897C9.02621 7.72414 8.82759 7.52552 8.82759 7.28276V3.75172C8.82759 3.50897 9.02621 3.31034 9.26897 3.31034H12.8C13.0428 3.31034 13.2414 3.50897 13.2414 3.75172V6.84138ZM18.7586 23.8345C18.7586 24.0772 18.56 24.2759 18.3172 24.2759H14.7862C14.5434 24.2759 14.3448 24.0772 14.3448 23.8345V20.3034C14.3448 20.0607 14.5434 19.8621 14.7862 19.8621H18.3172C18.56 19.8621 18.7586 20.0607 18.7586 20.3034V23.8345ZM18.7586 18.3172C18.7586 18.56 18.56 18.7586 18.3172 18.7586H14.7862C14.5434 18.7586 14.3448 18.56 14.3448 18.3172V14.7862C14.3448 14.5434 14.5434 14.3448 14.7862 14.3448H18.3172C18.56 14.3448 18.7586 14.5434 18.7586 14.7862V18.3172ZM18.7586 12.8C18.7586 13.0428 18.56 13.2414 18.3172 13.2414H14.7862C14.5434 13.2414 14.3448 13.0428 14.3448 12.8V9.26897C14.3448 9.02621 14.5434 8.82759 14.7862 8.82759H18.3172C18.56 8.82759 18.7586 9.02621 18.7586 9.26897V12.8ZM18.7586 5.51724V7.28276C18.7586 7.52552 18.56 7.72414 18.3172 7.72414H14.7862C14.5434 7.72414 14.3448 7.52552 14.3448 7.28276V3.75172C14.3448 3.50897 14.5434 3.31034 14.7862 3.31034H18.3172C18.56 3.31034 18.7586 3.50897 18.7586 3.75172V5.51724Z" fill="white"/>
+                        </svg>
+                      </div>
+                    </div>
+                  } @else {
+                    <!-- Icon wrapper for non-actor activities -->
+                    <div class="activity-icon-wrapper">
+                      <ds-icon 
+                        [name]="activity.iconName"
+                        size="18px"
+                        color="secondary" />
+                    </div>
+                  }
+                  
+                  <div class="activity-content">
+                    <p class="activity-title">
+                      @if (activity.actor) {
+                        <span class="actor-name">{{ activity.actor }}</span>
+                        <span class="activity-text"> {{ activity.title }}</span>
+                      } @else {
+                        <span class="actor-name">{{ activity.title }}</span>
+                      }
+                    </p>
+                    @if (activity.description) {
+                      <p class="activity-description">{{ activity.description }}</p>
+                    }
+                    <div class="activity-timestamp">
+                      <ds-icon name="remixCalendarLine" size="12px" color="--color-text-tertiary" />
+                      <span>{{ activity.date }}</span>
+                    </div>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+          
+          <!-- Messages Tab Content -->
+          @if (activeTab() === 'messages') {
+            <div class="messages-list">
+              @for (message of messageThreads; track message.id) {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="message.senderName"
+                  [senderRole]="message.role"
+                  [message]="message.message"
+                  [avatarInitials]="message.senderInitials"
+                  [unread]="message.unread"
+                  (messageClick)="openMessage(message.id)">
+                </ds-mobile-interactive-list-item-message>
+              }
+            </div>
+          }
+          
+          <!-- Details Tab Content -->
+          @if (activeTab() === 'details') {
+            <div class="details-list">
+              <!-- Assignee -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-avatar
+                    [size]="'sm'"
+                    [type]="'initials'"
+                    [initials]="'R'" />
+                </div>
+                <div content-main>
+                  <div class="detail-label">Sagsbehandler</div>
+                  <div class="detail-value">Ricki Meihlen</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Technician -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-avatar
+                    [size]="'sm'"
+                    [type]="'initials'"
+                    [initials]="'M'" />
+                </div>
+                <div content-main>
+                  <div class="detail-label">Tekniker</div>
+                  <div class="detail-value">Martin Smith</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Title -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixTextBlock" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="detail-value">{{ inquiryTitle }}</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Description -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixAlignLeft" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="detail-value description-text">
+                    I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
+                  </div>
+                  <div class="detail-tag">Husholdningsapparater</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Photos -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixCameraLine" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="photo-grid">
+                    <button class="photo-add">
+                      <ds-icon name="remixAddLine" size="20px" color="tertiary" />
+                    </button>
+                    <!-- Placeholder photos -->
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                  </div>
+                </div>
+              </ds-mobile-list-item-static>
+            </div>
+          }
+        </div>
+      </div>
+    </ion-content>
+  `, isInline: true, styles: ["ion-header{--background: var(--color-brand-secondary, #5d5fef);height:72px;min-height:72px}ion-toolbar{--background: var(--color-brand-secondary, #5d5fef);--color: white;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:100%;min-height:72px}ion-toolbar ion-title{transition:transform .2s ease,opacity .2s ease!important}.header-detail{display:flex;align-items:center;gap:12px;padding:0 20px;height:100%}.back-button{width:36px;height:36px;border-radius:50%;background:#ffffff1a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;color:#fff;padding:0;flex-shrink:0}.back-button:hover,.back-button:active{background:#ffffff26}.header-detail__title{position:absolute;left:64px;transform:translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important;margin:0;padding:0;--color: white;text-align:left!important}.header-scrolled .header-detail__title{opacity:1!important;pointer-events:auto;transform:translateY(0)}@media (min-width: 768px){.header-detail{padding:16px 24px}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px}.header-expandable__text{margin-bottom:0}@media (min-width: 768px){.header-expandable{padding:40px var(--content-padding-md) 32px var(--content-padding-md)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{background:var(--color-background-neutral-primary, white);border-radius:24px 24px 0 0;flex:1 1 auto;min-height:100%;position:relative;z-index:10;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary)}.content-inner{padding:24px 20px 40px}@media (min-width: 768px){.content-inner{padding:32px}}.activity-list{display:flex;flex-direction:column;gap:32px}.activity-item{display:flex;gap:12px;position:relative}.activity-item:after{content:\"\";position:absolute;bottom:-16px;left:44px;right:8px;height:1px;background:var(--border-color-default, #e5e5e5)}.activity-item:last-child:after{display:none}.activity-icon-wrapper{width:32px;height:32px;border-radius:8px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-wrapper{position:relative;display:flex;align-items:start;justify-content:center;flex-shrink:0;width:32px;height:32px}.avatar-badge{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:8px;background:var(--color-brand-secondary, #5d5fef);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge svg{width:10px;position:relative;top:1px;fill:#fff}.activity-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.activity-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0}.activity-title .actor-name{font-weight:600;color:var(--text-color-default-primary, #202227)}.activity-title .activity-text{color:var(--text-color-default-secondary, #545B66);font-weight:400}.activity-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0}.activity-timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);display:flex;align-items:center;gap:4px;margin-top:2px}.messages-list{display:flex;flex-direction:column;gap:8px;margin:-8px}.details-list{display:flex;flex-direction:column;gap:20px}.detail-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-tertiary, #737373)}.detail-value{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:24px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227)}.detail-value.description-text{padding:8px 0}.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--text-color-default-secondary, #525866);margin-top:4px;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.photo-grid{display:flex;gap:8px;margin-top:8px;overflow-x:auto}.photo-add{width:80px;height:80px;border-radius:12px;border:1px dashed var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.photo-item{width:80px;height:80px;border-radius:12px;background:var(--color-background-neutral-secondary, #e5e5e5);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileListItemStaticComponent, selector: "ds-mobile-list-item-static", inputs: ["leadingSize"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "clickable"], outputs: ["messageClick", "longPress"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiryDetailPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mobile-inquiry-detail-page', standalone: true, imports: [
+                        CommonModule,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonContent,
+                        IonRefresher,
+                        IonRefresherContent,
+                        DsIconComponent,
+                        DsAvatarComponent,
+                        DsMobileInlineTabsComponent,
+                        DsMobileListItemStaticComponent,
+                        DsMobileInteractiveListItemMessageComponent
+                    ], host: {
+                        class: 'ion-page'
+                    }, template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-detail">
+          <!-- Back Button -->
+          <button class="back-button" (click)="goBack()" [attr.aria-label]="'Go back'">
+            <ds-icon name="remixArrowLeftSLine" size="24px" color="white" />
+          </button>
+          
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-detail__title">{{ inquiryTitle }}</ion-title>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (isNativePlatform()) {
+        <ion-refresher 
+          slot="fixed" 
+          (ionRefresh)="handleRefresh($event)"
+          [pullFactor]="0.4" 
+          [pullMin]="80" 
+          [pullMax]="240"
+          closeDuration="600ms">
+          <ion-refresher-content
+            pullingIcon="remixArrowDownS"
+            refreshingSpinner="lines">
+          </ion-refresher-content>
+        </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">{{ inquiryTitle }}</h1>
+          </div>
+          
+          <!-- Tabs in header -->
+          <ds-mobile-inline-tabs
+            [tabs]="tabItems"
+            [activeTab]="activeTab()"
+            (tabChange)="setActiveTab($event)">
+          </ds-mobile-inline-tabs>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        <div class="content-inner">
+          <!-- Activity Tab Content -->
+          @if (activeTab() === 'activity') {
+            <div class="activity-list">
+              @for (activity of activities; track activity.id) {
+                <div class="activity-item">
+                  @if (activity.actor) {
+                    <!-- Avatar with badge for actor activities -->
+                    <div class="avatar-wrapper">
+                      <ds-avatar 
+                        [type]="'initials'"
+                        [initials]="activity.actorInitials || ''"
+                        size="md" />
+                      
+                      <div class="avatar-badge">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" fill="none">
+                          <path d="M33.9862 5.51709H23.1724V8.82743H26.0413C26.2841 8.82743 26.4827 9.02606 26.4827 9.26881V12.7998C26.4827 13.0426 26.2841 13.2412 26.0413 13.2412H23.1724V14.3447H26.0413C26.2841 14.3447 26.4827 14.5433 26.4827 14.7861V18.3171C26.4827 18.5598 26.2841 18.7585 26.0413 18.7585H23.1724V19.8619H26.0413C26.2841 19.8619 26.4827 20.0605 26.4827 20.3033V23.8343C26.4827 24.0771 26.2841 24.2757 26.0413 24.2757H23.1724V26.2619C23.1724 26.7496 23.0267 27.2043 22.7773 27.5861H27.5862L32 31.9999V27.5861H33.9862C34.7167 27.5861 35.3103 26.9924 35.3103 26.2619V6.84123C35.3103 6.11075 34.7167 5.51709 33.9862 5.51709ZM32 23.8343C32 24.0771 31.8013 24.2757 31.5586 24.2757H28.0276C27.7848 24.2757 27.5862 24.0771 27.5862 23.8343V20.3033C27.5862 20.0605 27.7848 19.8619 28.0276 19.8619H31.5586C31.8013 19.8619 32 20.0605 32 20.3033V23.8343ZM32 18.3171C32 18.5598 31.8013 18.7585 31.5586 18.7585H28.0276C27.7848 18.7585 27.5862 18.5598 27.5862 18.3171V14.7861C27.5862 14.5433 27.7848 14.3447 28.0276 14.3447H31.5586C31.8013 14.3447 32 14.5433 32 14.7861V18.3171ZM32 12.7998C32 13.0426 31.8013 13.2412 31.5586 13.2412H28.0276C27.7848 13.2412 27.5862 13.0426 27.5862 12.7998V9.26881C27.5862 9.02606 27.7848 8.82743 28.0276 8.82743H31.5586C31.8013 8.82743 32 9.02606 32 9.26881V12.7998Z" fill="white"/>
+                          <path d="M20.7448 0H1.32414C0.593655 0 0 0.593655 0 1.32414V26.2621C0 26.9926 0.593655 27.5862 1.32414 27.5862H3.31034V32L7.72414 27.5862H20.7448C21.4753 27.5862 22.069 26.9926 22.069 26.2621V1.32414C22.069 0.593655 21.4753 0 20.7448 0ZM7.72414 23.8345C7.72414 24.0772 7.52552 24.2759 7.28276 24.2759H3.75172C3.50897 24.2759 3.31034 24.0772 3.31034 23.8345V20.3034C3.31034 20.0607 3.50897 19.8621 3.75172 19.8621H7.28276C7.52552 19.8621 7.72414 20.0607 7.72414 20.3034V23.8345ZM7.72414 18.3172C7.72414 18.56 7.52552 18.7586 7.28276 18.7586H3.75172C3.50897 18.7586 3.31034 18.56 3.31034 18.3172V14.7862C3.31034 14.5434 3.50897 14.3448 3.75172 14.3448H7.28276C7.52552 14.3448 7.72414 14.5434 7.72414 14.7862V18.3172ZM7.72414 12.8C7.72414 13.0428 7.52552 13.2414 7.28276 13.2414H3.75172C3.50897 13.2414 3.31034 13.0428 3.31034 12.8V9.26897C3.31034 9.02621 3.50897 8.82759 3.75172 8.82759H7.28276C7.52552 8.82759 7.72414 9.02621 7.72414 9.26897V12.8ZM7.72414 7.28276C7.72414 7.52552 7.52552 7.72414 7.28276 7.72414H3.75172C3.50897 7.72414 3.31034 7.52552 3.31034 7.28276V3.75172C3.31034 3.50897 3.50897 3.31034 3.75172 3.31034H7.28276C7.52552 3.31034 7.72414 3.50897 7.72414 3.75172V7.28276ZM13.2414 23.8345C13.2414 24.0772 13.0428 24.2759 12.8 24.2759H9.26897C9.02621 24.2759 8.82759 24.0772 8.82759 23.8345V20.3034C8.82759 20.0607 9.02621 19.8621 9.26897 19.8621H12.8C13.0428 19.8621 13.2414 20.0607 13.2414 20.3034V23.8345ZM13.2414 18.3172C13.2414 18.56 13.0428 18.7586 12.8 18.7586H9.26897C9.02621 18.7586 8.82759 18.56 8.82759 18.3172V14.7862C8.82759 14.5434 9.02621 14.3448 9.26897 14.3448H12.8C13.0428 14.3448 13.2414 14.5434 13.2414 14.7862V18.3172ZM13.2414 12.8C13.2414 13.0428 13.0428 13.2414 12.8 13.2414H9.26897C9.02621 13.2414 8.82759 13.0428 8.82759 12.8V9.26897C8.82759 9.02621 9.02621 8.82759 9.26897 8.82759H12.8C13.0428 8.82759 13.2414 9.02621 13.2414 9.26897V12.8ZM13.2414 6.84138V7.28276C13.2414 7.52552 13.0428 7.72414 12.8 7.72414H9.26897C9.02621 7.72414 8.82759 7.52552 8.82759 7.28276V3.75172C8.82759 3.50897 9.02621 3.31034 9.26897 3.31034H12.8C13.0428 3.31034 13.2414 3.50897 13.2414 3.75172V6.84138ZM18.7586 23.8345C18.7586 24.0772 18.56 24.2759 18.3172 24.2759H14.7862C14.5434 24.2759 14.3448 24.0772 14.3448 23.8345V20.3034C14.3448 20.0607 14.5434 19.8621 14.7862 19.8621H18.3172C18.56 19.8621 18.7586 20.0607 18.7586 20.3034V23.8345ZM18.7586 18.3172C18.7586 18.56 18.56 18.7586 18.3172 18.7586H14.7862C14.5434 18.7586 14.3448 18.56 14.3448 18.3172V14.7862C14.3448 14.5434 14.5434 14.3448 14.7862 14.3448H18.3172C18.56 14.3448 18.7586 14.5434 18.7586 14.7862V18.3172ZM18.7586 12.8C18.7586 13.0428 18.56 13.2414 18.3172 13.2414H14.7862C14.5434 13.2414 14.3448 13.0428 14.3448 12.8V9.26897C14.3448 9.02621 14.5434 8.82759 14.7862 8.82759H18.3172C18.56 8.82759 18.7586 9.02621 18.7586 9.26897V12.8ZM18.7586 5.51724V7.28276C18.7586 7.52552 18.56 7.72414 18.3172 7.72414H14.7862C14.5434 7.72414 14.3448 7.52552 14.3448 7.28276V3.75172C14.3448 3.50897 14.5434 3.31034 14.7862 3.31034H18.3172C18.56 3.31034 18.7586 3.50897 18.7586 3.75172V5.51724Z" fill="white"/>
+                        </svg>
+                      </div>
+                    </div>
+                  } @else {
+                    <!-- Icon wrapper for non-actor activities -->
+                    <div class="activity-icon-wrapper">
+                      <ds-icon 
+                        [name]="activity.iconName"
+                        size="18px"
+                        color="secondary" />
+                    </div>
+                  }
+                  
+                  <div class="activity-content">
+                    <p class="activity-title">
+                      @if (activity.actor) {
+                        <span class="actor-name">{{ activity.actor }}</span>
+                        <span class="activity-text"> {{ activity.title }}</span>
+                      } @else {
+                        <span class="actor-name">{{ activity.title }}</span>
+                      }
+                    </p>
+                    @if (activity.description) {
+                      <p class="activity-description">{{ activity.description }}</p>
+                    }
+                    <div class="activity-timestamp">
+                      <ds-icon name="remixCalendarLine" size="12px" color="--color-text-tertiary" />
+                      <span>{{ activity.date }}</span>
+                    </div>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+          
+          <!-- Messages Tab Content -->
+          @if (activeTab() === 'messages') {
+            <div class="messages-list">
+              @for (message of messageThreads; track message.id) {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="message.senderName"
+                  [senderRole]="message.role"
+                  [message]="message.message"
+                  [avatarInitials]="message.senderInitials"
+                  [unread]="message.unread"
+                  (messageClick)="openMessage(message.id)">
+                </ds-mobile-interactive-list-item-message>
+              }
+            </div>
+          }
+          
+          <!-- Details Tab Content -->
+          @if (activeTab() === 'details') {
+            <div class="details-list">
+              <!-- Assignee -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-avatar
+                    [size]="'sm'"
+                    [type]="'initials'"
+                    [initials]="'R'" />
+                </div>
+                <div content-main>
+                  <div class="detail-label">Sagsbehandler</div>
+                  <div class="detail-value">Ricki Meihlen</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Technician -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-avatar
+                    [size]="'sm'"
+                    [type]="'initials'"
+                    [initials]="'M'" />
+                </div>
+                <div content-main>
+                  <div class="detail-label">Tekniker</div>
+                  <div class="detail-value">Martin Smith</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Title -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixTextBlock" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="detail-value">{{ inquiryTitle }}</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Description -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixAlignLeft" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="detail-value description-text">
+                    I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
+                  </div>
+                  <div class="detail-tag">Husholdningsapparater</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Photos -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixCameraLine" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="photo-grid">
+                    <button class="photo-add">
+                      <ds-icon name="remixAddLine" size="20px" color="tertiary" />
+                    </button>
+                    <!-- Placeholder photos -->
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                  </div>
+                </div>
+              </ds-mobile-list-item-static>
+            </div>
+          }
+        </div>
+      </div>
+    </ion-content>
+  `, styles: ["ion-header{--background: var(--color-brand-secondary, #5d5fef);height:72px;min-height:72px}ion-toolbar{--background: var(--color-brand-secondary, #5d5fef);--color: white;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:100%;min-height:72px}ion-toolbar ion-title{transition:transform .2s ease,opacity .2s ease!important}.header-detail{display:flex;align-items:center;gap:12px;padding:0 20px;height:100%}.back-button{width:36px;height:36px;border-radius:50%;background:#ffffff1a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;color:#fff;padding:0;flex-shrink:0}.back-button:hover,.back-button:active{background:#ffffff26}.header-detail__title{position:absolute;left:64px;transform:translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important;margin:0;padding:0;--color: white;text-align:left!important}.header-scrolled .header-detail__title{opacity:1!important;pointer-events:auto;transform:translateY(0)}@media (min-width: 768px){.header-detail{padding:16px 24px}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px}.header-expandable__text{margin-bottom:0}@media (min-width: 768px){.header-expandable{padding:40px var(--content-padding-md) 32px var(--content-padding-md)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{background:var(--color-background-neutral-primary, white);border-radius:24px 24px 0 0;flex:1 1 auto;min-height:100%;position:relative;z-index:10;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary)}.content-inner{padding:24px 20px 40px}@media (min-width: 768px){.content-inner{padding:32px}}.activity-list{display:flex;flex-direction:column;gap:32px}.activity-item{display:flex;gap:12px;position:relative}.activity-item:after{content:\"\";position:absolute;bottom:-16px;left:44px;right:8px;height:1px;background:var(--border-color-default, #e5e5e5)}.activity-item:last-child:after{display:none}.activity-icon-wrapper{width:32px;height:32px;border-radius:8px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-wrapper{position:relative;display:flex;align-items:start;justify-content:center;flex-shrink:0;width:32px;height:32px}.avatar-badge{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:8px;background:var(--color-brand-secondary, #5d5fef);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge svg{width:10px;position:relative;top:1px;fill:#fff}.activity-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.activity-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0}.activity-title .actor-name{font-weight:600;color:var(--text-color-default-primary, #202227)}.activity-title .activity-text{color:var(--text-color-default-secondary, #545B66);font-weight:400}.activity-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0}.activity-timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);display:flex;align-items:center;gap:4px;margin-top:2px}.messages-list{display:flex;flex-direction:column;gap:8px;margin:-8px}.details-list{display:flex;flex-direction:column;gap:20px}.detail-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-tertiary, #737373)}.detail-value{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:24px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227)}.detail-value.description-text{padding:8px 0}.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--text-color-default-secondary, #525866);margin-top:4px;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.photo-grid{display:flex;gap:8px;margin-top:8px;overflow-x:auto}.photo-add{width:80px;height:80px;border-radius:12px;border:1px dashed var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.photo-item{width:80px;height:80px;border-radius:12px;background:var(--color-background-neutral-secondary, #e5e5e5);flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }, { type: i0.ElementRef }], propDecorators: { ionContent: [{
+                type: ViewChild,
+                args: [IonContent]
+            }] } });
+
+/**
+ * DsAvatarWithBadgeComponent
+ *
+ * Displays an avatar with a logomark badge overlay.
+ * Useful for showing user avatars with organization branding.
+ *
+ * @example
+ * ```html
+ * <ds-avatar-with-badge
+ *   [type]="'initials'"
+ *   [initials]="'JD'"
+ *   [size]="'lg'"
+ *   [badgePosition]="'bottom-right'"
+ * />
+ * ```
+ */
+class DsAvatarWithBadgeComponent {
+    whitelabelService = inject(WhitelabelService);
+    // Avatar props
+    type = 'initials';
+    size = 'md';
+    initials = '';
+    src = '';
+    iconName = 'remixUser3Fill';
+    // Badge props
+    showBadge = true;
+    badgePosition = 'bottom-right';
+    badgeClasses = computed(() => {
+        return `avatar-badge avatar-badge--${this.badgePosition} avatar-badge--${this.size}`;
+    }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsAvatarWithBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsAvatarWithBadgeComponent, isStandalone: true, selector: "ds-avatar-with-badge", inputs: { type: "type", size: "size", initials: "initials", src: "src", iconName: "iconName", showBadge: "showBadge", badgePosition: "badgePosition" }, ngImport: i0, template: `
+    <div class="avatar-badge-container">
+      <ds-avatar
+        [type]="type"
+        [size]="size"
+        [initials]="initials"
+        [src]="src"
+        [iconName]="iconName"
+      />
+      
+      @if (showBadge) {
+        <div [class]="badgeClasses()">
+          <img [src]="whitelabelService.logoMarkUrl()" [alt]="whitelabelService.logoAlt()" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:inline-block;position:relative}.avatar-badge-container{position:relative;display:inline-block}.avatar-badge{position:absolute;background:var(--color-brand-secondary, #5d5fef);border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge img{width:10px;height:10px;object-fit:contain}.avatar-badge--bottom-right{bottom:-6px;right:-6px}.avatar-badge--bottom-left{bottom:-6px;left:-6px}.avatar-badge--top-right{top:-6px;right:-6px}.avatar-badge--top-left{top:-6px;left:-6px}.avatar-badge--xs{width:16px;height:16px}.avatar-badge--sm{width:18px;height:18px}.avatar-badge--md{width:20px;height:20px}.avatar-badge--lg{width:24px;height:24px}.avatar-badge--xl{width:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsAvatarWithBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-avatar-with-badge', standalone: true, imports: [CommonModule, DsAvatarComponent], encapsulation: ViewEncapsulation.Emulated, template: `
+    <div class="avatar-badge-container">
+      <ds-avatar
+        [type]="type"
+        [size]="size"
+        [initials]="initials"
+        [src]="src"
+        [iconName]="iconName"
+      />
+      
+      @if (showBadge) {
+        <div [class]="badgeClasses()">
+          <img [src]="whitelabelService.logoMarkUrl()" [alt]="whitelabelService.logoAlt()" />
         </div>
-      </ds-mobile-content>
-    </ds-mobile-page-main>
-  `, styles: [".inquiries-container{display:flex;flex-direction:column;max-width:640px}.inquiry-list-wrapper{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }] });
+      }
+    </div>
+  `, styles: [":host{display:inline-block;position:relative}.avatar-badge-container{position:relative;display:inline-block}.avatar-badge{position:absolute;background:var(--color-brand-secondary, #5d5fef);border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge img{width:10px;height:10px;object-fit:contain}.avatar-badge--bottom-right{bottom:-6px;right:-6px}.avatar-badge--bottom-left{bottom:-6px;left:-6px}.avatar-badge--top-right{top:-6px;right:-6px}.avatar-badge--top-left{top:-6px;left:-6px}.avatar-badge--xs{width:16px;height:16px}.avatar-badge--sm{width:18px;height:18px}.avatar-badge--md{width:20px;height:20px}.avatar-badge--lg{width:24px;height:24px}.avatar-badge--xl{width:28px;height:28px}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], initials: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], showBadge: [{
+                type: Input
+            }], badgePosition: [{
+                type: Input
+            }] } });
 
-class MobileInquiryDetailPageComponent extends MobilePageBase {
-    userService;
-    navCtrl;
-    elementRef;
-    ionContent;
-    // Platform detection
-    platform = inject(Platform);
-    // Computed property to check if running on native platform
-    isNativePlatform = computed(() => this.platform.is('ios') ||
-        this.platform.is('android') ||
-        this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
-    inquiryTitle = 'Tørretumbler virker ikke';
-    activeTab = signal('activity', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    tabItems = [
-        { id: 'activity', label: 'Aktivitet' },
-        { id: 'messages', label: 'Beskeder', badge: 0 },
-        { id: 'details', label: 'Detaljer' }
-    ];
-    activities = [
-        {
-            id: '1',
-            type: 'assignment',
-            actor: 'Martin Smith',
-            actorInitials: 'MS',
-            title: 'er blevet tildelt som din dedikerede tekniker.',
-            timestamp: '2 dage siden',
-            date: '28. feb 2025',
-            iconName: 'remixUserAddLine'
-        },
-        {
-            id: '2',
-            type: 'assignment',
-            actor: 'Ricki Meihlen',
-            actorInitials: 'RM',
-            title: 'er blevet tildelt til at håndtere din henvendelse.',
-            timestamp: '8 dage siden',
-            date: '22. feb 2025',
-            iconName: 'remixUserLine'
-        },
-        {
-            id: '3',
-            type: 'creation',
-            title: 'Henvendelse oprettet',
-            timestamp: '8 dage siden',
-            date: '22. feb 2025',
-            iconName: 'remixAddCircleLine'
+/**
+ * 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.
+ */
+class WhitelabelDemoModalComponent {
+    whitelabelService = inject(WhitelabelService);
+    modalController = inject(ModalController);
+    // Current active theme
+    currentTheme = 'default';
+    // Custom color inputs
+    customPrimarySurface = '#6B5FF5';
+    customPrimaryContent = '#FFFFFF';
+    customSecondarySurface = '#221a4c';
+    customSecondaryContent = '#FFFFFF';
+    ngOnInit() {
+        this.updateCustomColorInputs();
+        this.detectCurrentTheme();
+    }
+    /**
+     * Detect the current active theme based on colors
+     */
+    detectCurrentTheme() {
+        const secondarySurface = this.whitelabelService.secondarySurface().toUpperCase();
+        if (secondarySurface === '#A70923') {
+            this.currentTheme = 'cej';
         }
-    ];
-    messageThreads = [
-        {
-            id: '1',
-            senderName: 'Ove Hindborg',
-            senderAvatar: '',
-            senderInitials: 'OH',
-            message: 'Dejligt at høre! Jeg venter på din teknikerbesøg tidsplan.',
-            role: 'Sagsbehandler',
-            timestamp: '2t siden',
-            unread: true
-        },
-        {
-            id: '2',
-            senderName: 'Martin Smith',
-            senderAvatar: '',
-            senderInitials: 'MS',
-            message: 'Dejligt at høre! Jeg venter på din teknikerbesøg tidsplan.',
-            role: 'Tekniker',
-            timestamp: '4t siden',
-            unread: true
+        else if (secondarySurface === '#660036') {
+            this.currentTheme = 'pka';
         }
-    ];
-    unreadMessagesCount = computed(() => {
-        const count = this.messageThreads.filter(m => m.unread).length;
-        // Update badge in tab items
-        const messagesTab = this.tabItems.find(t => t.id === 'messages');
-        if (messagesTab) {
-            messagesTab.badge = count;
+        else if (secondarySurface === '#262424') {
+            this.currentTheme = 'clave';
+        }
+        else {
+            this.currentTheme = 'default';
         }
-        return count;
-    }, ...(ngDevMode ? [{ debugName: "unreadMessagesCount" }] : []));
-    constructor(userService, navCtrl, elementRef) {
-        super();
-        this.userService = userService;
-        this.navCtrl = navCtrl;
-        this.elementRef = elementRef;
-        // Trigger initial badge update
-        this.unreadMessagesCount();
     }
-    ngAfterViewInit() {
-        // Initial setup if needed
+    /**
+     * Close the modal
+     */
+    close() {
+        this.modalController.dismiss();
     }
-    setActiveTab(tabId) {
-        this.activeTab.set(tabId);
+    applyDefaultTheme() {
+        this.currentTheme = 'default';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/propbinder-logomark.svg',
+            logoMarkUrl: '/Assets/logos/propbinder-logomark.svg',
+            logoAlt: 'Propbinder',
+            logoHeight: 28,
+            primarySurface: '#6B5FF5',
+            primaryContent: '#FFFFFF',
+            secondarySurface: '#221a4c',
+            secondaryContent: '#FFFFFF',
+            organizationName: 'Propbinder',
+            organizationId: 'default'
+        });
+        this.updateCustomColorInputs();
     }
-    goBack() {
-        this.navCtrl.back({ animation: customBackTransition });
+    applyCejTheme() {
+        this.currentTheme = 'cej';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/cej-logo.png',
+            logoMarkUrl: '/Assets/logos/cej-logo.png',
+            logoAlt: 'CEJ',
+            logoHeight: 36,
+            primarySurface: '#FFFFFF',
+            primaryContent: '#A70923',
+            secondarySurface: '#A70923',
+            secondaryContent: '#FFFFFF',
+            organizationName: 'CEJ',
+            organizationId: 'cej'
+        });
+        this.updateCustomColorInputs();
     }
-    handleScroll(event) {
-        const scrollTop = event.detail.scrollTop;
-        const threshold = 160;
-        const fadeDistance = 200;
-        const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
-        const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
-        // Show title in fixed header when scrolled past threshold
-        if (scrollTop > threshold) {
-            header?.classList.add('header-scrolled');
-        }
-        else {
-            header?.classList.remove('header-scrolled');
-        }
-        // Fade out header-expandable content based on scroll
-        if (headerExpandable) {
-            const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
-            // Calculate opacity (1 to 0)
-            const opacity = 1 - fadeProgress;
-            // Calculate transform (0px to -20px upward)
-            const translateY = fadeProgress * -20;
-            // Apply styles
-            headerExpandable.style.opacity = opacity.toString();
-            headerExpandable.style.transform = `translateY(${translateY}px)`;
-        }
+    applyPkaTheme() {
+        this.currentTheme = 'pka';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/pka-logo.svg',
+            logoMarkUrl: '/Assets/logos/pka-logo.svg',
+            logoAlt: 'PKA',
+            logoHeight: 24,
+            primarySurface: '#CC006C',
+            primaryContent: '#FFFFFF',
+            secondarySurface: '#660036',
+            secondaryContent: '#FFFFFF',
+            organizationName: 'PKA',
+            organizationId: 'pka'
+        });
+        this.updateCustomColorInputs();
     }
-    handleRefresh(event) {
-        console.log('Pull-to-refresh triggered');
-        setTimeout(() => {
-            console.log('Refresh complete');
-            event.target.complete();
-        }, 1000);
+    applyClaveTheme() {
+        this.currentTheme = 'clave';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/clave-logo.svg',
+            logoMarkUrl: '/Assets/logos/clave-logo.svg',
+            logoAlt: 'Clave',
+            logoHeight: 24,
+            primarySurface: '#868764',
+            primaryContent: '#262424',
+            secondarySurface: '#262424',
+            secondaryContent: '#FFFFFF',
+            organizationName: 'Clave',
+            organizationId: 'clave'
+        });
+        this.updateCustomColorInputs();
     }
-    openMessage(messageId) {
-        console.log('Opening message:', messageId);
-        // Navigate to message thread detail
+    applyCustomColors() {
+        this.whitelabelService.updateColors({
+            primarySurface: this.customPrimarySurface,
+            primaryContent: this.customPrimaryContent,
+            secondarySurface: this.customSecondarySurface,
+            secondaryContent: this.customSecondaryContent
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiryDetailPageComponent, deps: [{ token: UserService }, { token: i1.NavController }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MobileInquiryDetailPageComponent, isStandalone: true, selector: "app-mobile-inquiry-detail-page", host: { classAttribute: "ion-page" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <!-- Fixed header at top -->
-    <ion-header>
-      <ion-toolbar>
-        <div class="header-detail">
-          <!-- Back Button -->
-          <button class="back-button" (click)="goBack()" [attr.aria-label]="'Go back'">
-            <ds-icon name="remixArrowLeftSLine" size="24px" color="white" />
-          </button>
-          
-          <!-- Title - fades in on scroll -->
-          <ion-title class="header-detail__title">{{ inquiryTitle }}</ion-title>
-        </div>
-      </ion-toolbar>
-    </ion-header>
-
-    <!-- Content with expandable header -->
-    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
-      <!-- Pull to refresh (only on native iOS/Android) -->
-      @if (isNativePlatform()) {
-        <ion-refresher 
-          slot="fixed" 
-          (ionRefresh)="handleRefresh($event)"
-          [pullFactor]="0.4" 
-          [pullMin]="80" 
-          [pullMax]="240"
-          closeDuration="600ms">
-          <ion-refresher-content
-            pullingIcon="remixArrowDownS"
-            refreshingSpinner="lines">
-          </ion-refresher-content>
-        </ion-refresher>
-      }
-
-      <!-- Expandable header section (purple background) -->
-      <div class="header-expandable">
-        <div class="header-expandable-inner">
-          <div class="header-expandable__text">
-            <h1 class="header-expandable__title">{{ inquiryTitle }}</h1>
-          </div>
-          
-          <!-- Tabs in header -->
-          <ds-mobile-inline-tabs
-            [tabs]="tabItems"
-            [activeTab]="activeTab()"
-            (tabChange)="setActiveTab($event)">
-          </ds-mobile-inline-tabs>
-        </div>
+    updateCustomColorInputs() {
+        this.customPrimarySurface = this.whitelabelService.primarySurface();
+        this.customPrimaryContent = this.whitelabelService.primaryContent();
+        this.customSecondarySurface = this.whitelabelService.secondarySurface();
+        this.customSecondaryContent = this.whitelabelService.secondaryContent();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: WhitelabelDemoModalComponent, isStandalone: true, selector: "ds-whitelabel-demo-modal", ngImport: i0, template: `
+    <!-- Fixed Header -->
+    <div class="modal-header">
+      <div class="header-content">
+        <span class="header-title">Whitelabel</span>
+        <ds-icon-button
+          icon="remixCloseLine"
+          variant="secondary"
+          size="lg"
+          (click)="close()"
+          class="close-button"
+          aria-label="Close">
+        </ds-icon-button>
       </div>
-
-      <!-- Content wrapper -->
-      <div class="content-wrapper">
-        <div class="content-inner">
-          <!-- Activity Tab Content -->
-          @if (activeTab() === 'activity') {
-            <div class="activity-list">
-              @for (activity of activities; track activity.id) {
-                <div class="activity-item">
-                  @if (activity.actor) {
-                    <!-- Avatar with badge for actor activities -->
-                    <div class="avatar-wrapper">
-                      <ds-avatar 
-                        [type]="'initials'"
-                        [initials]="activity.actorInitials || ''"
-                        size="md" />
-                      
-                      <div class="avatar-badge">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" fill="none">
-                          <path d="M33.9862 5.51709H23.1724V8.82743H26.0413C26.2841 8.82743 26.4827 9.02606 26.4827 9.26881V12.7998C26.4827 13.0426 26.2841 13.2412 26.0413 13.2412H23.1724V14.3447H26.0413C26.2841 14.3447 26.4827 14.5433 26.4827 14.7861V18.3171C26.4827 18.5598 26.2841 18.7585 26.0413 18.7585H23.1724V19.8619H26.0413C26.2841 19.8619 26.4827 20.0605 26.4827 20.3033V23.8343C26.4827 24.0771 26.2841 24.2757 26.0413 24.2757H23.1724V26.2619C23.1724 26.7496 23.0267 27.2043 22.7773 27.5861H27.5862L32 31.9999V27.5861H33.9862C34.7167 27.5861 35.3103 26.9924 35.3103 26.2619V6.84123C35.3103 6.11075 34.7167 5.51709 33.9862 5.51709ZM32 23.8343C32 24.0771 31.8013 24.2757 31.5586 24.2757H28.0276C27.7848 24.2757 27.5862 24.0771 27.5862 23.8343V20.3033C27.5862 20.0605 27.7848 19.8619 28.0276 19.8619H31.5586C31.8013 19.8619 32 20.0605 32 20.3033V23.8343ZM32 18.3171C32 18.5598 31.8013 18.7585 31.5586 18.7585H28.0276C27.7848 18.7585 27.5862 18.5598 27.5862 18.3171V14.7861C27.5862 14.5433 27.7848 14.3447 28.0276 14.3447H31.5586C31.8013 14.3447 32 14.5433 32 14.7861V18.3171ZM32 12.7998C32 13.0426 31.8013 13.2412 31.5586 13.2412H28.0276C27.7848 13.2412 27.5862 13.0426 27.5862 12.7998V9.26881C27.5862 9.02606 27.7848 8.82743 28.0276 8.82743H31.5586C31.8013 8.82743 32 9.02606 32 9.26881V12.7998Z" fill="white"/>
-                          <path d="M20.7448 0H1.32414C0.593655 0 0 0.593655 0 1.32414V26.2621C0 26.9926 0.593655 27.5862 1.32414 27.5862H3.31034V32L7.72414 27.5862H20.7448C21.4753 27.5862 22.069 26.9926 22.069 26.2621V1.32414C22.069 0.593655 21.4753 0 20.7448 0ZM7.72414 23.8345C7.72414 24.0772 7.52552 24.2759 7.28276 24.2759H3.75172C3.50897 24.2759 3.31034 24.0772 3.31034 23.8345V20.3034C3.31034 20.0607 3.50897 19.8621 3.75172 19.8621H7.28276C7.52552 19.8621 7.72414 20.0607 7.72414 20.3034V23.8345ZM7.72414 18.3172C7.72414 18.56 7.52552 18.7586 7.28276 18.7586H3.75172C3.50897 18.7586 3.31034 18.56 3.31034 18.3172V14.7862C3.31034 14.5434 3.50897 14.3448 3.75172 14.3448H7.28276C7.52552 14.3448 7.72414 14.5434 7.72414 14.7862V18.3172ZM7.72414 12.8C7.72414 13.0428 7.52552 13.2414 7.28276 13.2414H3.75172C3.50897 13.2414 3.31034 13.0428 3.31034 12.8V9.26897C3.31034 9.02621 3.50897 8.82759 3.75172 8.82759H7.28276C7.52552 8.82759 7.72414 9.02621 7.72414 9.26897V12.8ZM7.72414 7.28276C7.72414 7.52552 7.52552 7.72414 7.28276 7.72414H3.75172C3.50897 7.72414 3.31034 7.52552 3.31034 7.28276V3.75172C3.31034 3.50897 3.50897 3.31034 3.75172 3.31034H7.28276C7.52552 3.31034 7.72414 3.50897 7.72414 3.75172V7.28276ZM13.2414 23.8345C13.2414 24.0772 13.0428 24.2759 12.8 24.2759H9.26897C9.02621 24.2759 8.82759 24.0772 8.82759 23.8345V20.3034C8.82759 20.0607 9.02621 19.8621 9.26897 19.8621H12.8C13.0428 19.8621 13.2414 20.0607 13.2414 20.3034V23.8345ZM13.2414 18.3172C13.2414 18.56 13.0428 18.7586 12.8 18.7586H9.26897C9.02621 18.7586 8.82759 18.56 8.82759 18.3172V14.7862C8.82759 14.5434 9.02621 14.3448 9.26897 14.3448H12.8C13.0428 14.3448 13.2414 14.5434 13.2414 14.7862V18.3172ZM13.2414 12.8C13.2414 13.0428 13.0428 13.2414 12.8 13.2414H9.26897C9.02621 13.2414 8.82759 13.0428 8.82759 12.8V9.26897C8.82759 9.02621 9.02621 8.82759 9.26897 8.82759H12.8C13.0428 8.82759 13.2414 9.02621 13.2414 9.26897V12.8ZM13.2414 6.84138V7.28276C13.2414 7.52552 13.0428 7.72414 12.8 7.72414H9.26897C9.02621 7.72414 8.82759 7.52552 8.82759 7.28276V3.75172C8.82759 3.50897 9.02621 3.31034 9.26897 3.31034H12.8C13.0428 3.31034 13.2414 3.50897 13.2414 3.75172V6.84138ZM18.7586 23.8345C18.7586 24.0772 18.56 24.2759 18.3172 24.2759H14.7862C14.5434 24.2759 14.3448 24.0772 14.3448 23.8345V20.3034C14.3448 20.0607 14.5434 19.8621 14.7862 19.8621H18.3172C18.56 19.8621 18.7586 20.0607 18.7586 20.3034V23.8345ZM18.7586 18.3172C18.7586 18.56 18.56 18.7586 18.3172 18.7586H14.7862C14.5434 18.7586 14.3448 18.56 14.3448 18.3172V14.7862C14.3448 14.5434 14.5434 14.3448 14.7862 14.3448H18.3172C18.56 14.3448 18.7586 14.5434 18.7586 14.7862V18.3172ZM18.7586 12.8C18.7586 13.0428 18.56 13.2414 18.3172 13.2414H14.7862C14.5434 13.2414 14.3448 13.0428 14.3448 12.8V9.26897C14.3448 9.02621 14.5434 8.82759 14.7862 8.82759H18.3172C18.56 8.82759 18.7586 9.02621 18.7586 9.26897V12.8ZM18.7586 5.51724V7.28276C18.7586 7.52552 18.56 7.72414 18.3172 7.72414H14.7862C14.5434 7.72414 14.3448 7.52552 14.3448 7.28276V3.75172C14.3448 3.50897 14.5434 3.31034 14.7862 3.31034H18.3172C18.56 3.31034 18.7586 3.50897 18.7586 3.75172V5.51724Z" fill="white"/>
-                        </svg>
-                      </div>
-                    </div>
-                  } @else {
-                    <!-- Icon wrapper for non-actor activities -->
-                    <div class="activity-icon-wrapper">
-                      <ds-icon 
-                        [name]="activity.iconName"
-                        size="18px"
-                        color="secondary" />
-                    </div>
-                  }
-                  
-                  <div class="activity-content">
-                    <p class="activity-title">
-                      @if (activity.actor) {
-                        <span class="actor-name">{{ activity.actor }}</span>
-                        <span class="activity-text"> {{ activity.title }}</span>
-                      } @else {
-                        <span class="actor-name">{{ activity.title }}</span>
-                      }
-                    </p>
-                    @if (activity.description) {
-                      <p class="activity-description">{{ activity.description }}</p>
-                    }
-                    <div class="activity-timestamp">
-                      <ds-icon name="remixCalendarLine" size="12px" color="--color-text-tertiary" />
-                      <span>{{ activity.date }}</span>
-                    </div>
-                  </div>
-                </div>
-              }
-            </div>
-          }
-          
-          <!-- Messages Tab Content -->
-          @if (activeTab() === 'messages') {
-            <div class="messages-list">
-              @for (message of messageThreads; track message.id) {
-                <ds-mobile-interactive-list-item-message
-                  [senderName]="message.senderName"
-                  [senderRole]="message.role"
-                  [message]="message.message"
-                  [avatarInitials]="message.senderInitials"
-                  [unread]="message.unread"
-                  (messageClick)="openMessage(message.id)">
-                </ds-mobile-interactive-list-item-message>
-              }
+    </div>
+    
+    <!-- Scrollable Content -->
+    <ion-content [scrollY]="true" class="modal-content">
+      <div class="demo-container">
+          <!-- Theme Selection -->
+          <div class="demo-section">
+            <h2>Theme</h2>
+            <div class="theme-buttons">
+              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
+                Propbinder
+              </button>
+              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
+                CEJ
+              </button>
+              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
+                PKA
+              </button>
+              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
+                Clave
+              </button>
             </div>
-          }
+          </div>
           
-          <!-- Details Tab Content -->
-          @if (activeTab() === 'details') {
-            <div class="details-list">
-              <!-- Assignee -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-avatar
-                    [size]="'sm'"
-                    [type]="'initials'"
-                    [initials]="'R'" />
-                </div>
-                <div content-main>
-                  <div class="detail-label">Sagsbehandler</div>
-                  <div class="detail-value">Ricki Meihlen</div>
+          <!-- Logo & Logomark Preview -->
+          <div class="demo-section">
+            <h2>Logo Preview</h2>
+            <div class="preview-grid">
+              <div class="preview-tile">
+                <h3>Logo</h3>
+                <div class="logo-preview">
+                  <ds-logo variant="full" />
                 </div>
-              </ds-mobile-list-item-static>
-              
-              <!-- Technician -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-avatar
-                    [size]="'sm'"
+              </div>
+              <div class="preview-tile">
+                <h3>Logomark</h3>
+                <div class="logomark-preview">
+                  <ds-avatar-with-badge
                     [type]="'initials'"
-                    [initials]="'M'" />
+                    [initials]="'KN'"
+                    [size]="'md'"
+                    [badgePosition]="'bottom-right'"
+                  />
                 </div>
-                <div content-main>
-                  <div class="detail-label">Tekniker</div>
-                  <div class="detail-value">Martin Smith</div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Brand Colors -->
+          <div class="demo-section">
+            <h2>Brand Colors</h2>
+            <div class="color-section">
+              <div class="color-swatches">
+                <div class="swatch swatch--primary-surface">
+                  <div class="swatch-label">Primary Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.primarySurface() }}</div>
+                </div>
+                <div class="swatch swatch--primary-content">
+                  <div class="swatch-label">Primary Content</div>
+                  <div class="swatch-value">{{ whitelabelService.primaryContent() }}</div>
                 </div>
-              </ds-mobile-list-item-static>
-              
-              <!-- Title -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-icon name="remixTextBlock" size="20px" color="tertiary" />
+                <div class="swatch swatch--secondary-surface">
+                  <div class="swatch-label">Secondary Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.secondarySurface() }}</div>
                 </div>
-                <div content-main>
-                  <div class="detail-value">{{ inquiryTitle }}</div>
+                <div class="swatch swatch--secondary-content">
+                  <div class="swatch-label">Secondary Content</div>
+                  <div class="swatch-value">{{ whitelabelService.secondaryContent() }}</div>
                 </div>
-              </ds-mobile-list-item-static>
+              </div>
               
-              <!-- Description -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-icon name="remixAlignLeft" size="20px" color="tertiary" />
+              <div class="color-inputs">
+                <div class="color-group-label">Primary</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customPrimarySurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customPrimarySurface"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-                <div content-main>
-                  <div class="detail-value description-text">
-                    I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
-                  </div>
-                  <div class="detail-tag">Husholdningsapparater</div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customPrimaryContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customPrimaryContent"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-              </ds-mobile-list-item-static>
-              
-              <!-- Photos -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-icon name="remixCameraLine" size="20px" color="tertiary" />
+                
+                <div class="color-group-label">Secondary</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customSecondarySurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customSecondarySurface"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-                <div content-main>
-                  <div class="photo-grid">
-                    <button class="photo-add">
-                      <ds-icon name="remixAddLine" size="20px" color="tertiary" />
-                    </button>
-                    <!-- Placeholder photos -->
-                    <div class="photo-item"></div>
-                    <div class="photo-item"></div>
-                    <div class="photo-item"></div>
-                    <div class="photo-item"></div>
-                  </div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customSecondaryContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customSecondaryContent"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-              </ds-mobile-list-item-static>
+              </div>
             </div>
-          }
+          </div>
         </div>
-      </div>
     </ion-content>
-  `, isInline: true, styles: ["ion-header{--background: var(--color-brand-secondary, #5d5fef);height:72px;min-height:72px}ion-toolbar{--background: var(--color-brand-secondary, #5d5fef);--color: white;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:100%;min-height:72px}ion-toolbar ion-title{transition:transform .2s ease,opacity .2s ease!important}.header-detail{display:flex;align-items:center;gap:12px;padding:0 20px;height:100%}.back-button{width:36px;height:36px;border-radius:50%;background:#ffffff1a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;color:#fff;padding:0;flex-shrink:0}.back-button:hover,.back-button:active{background:#ffffff26}.header-detail__title{position:absolute;left:64px;transform:translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important;margin:0;padding:0;--color: white;text-align:left!important}.header-scrolled .header-detail__title{opacity:1!important;pointer-events:auto;transform:translateY(0)}@media (min-width: 768px){.header-detail{padding:16px 24px}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px}.header-expandable__text{margin-bottom:0}@media (min-width: 768px){.header-expandable{padding:40px var(--content-padding-md) 32px var(--content-padding-md)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{background:var(--color-background-neutral-primary, white);border-radius:24px 24px 0 0;flex:1 1 auto;min-height:100%;position:relative;z-index:10;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary)}.content-inner{padding:24px 20px 40px}@media (min-width: 768px){.content-inner{padding:32px}}.activity-list{display:flex;flex-direction:column;gap:32px}.activity-item{display:flex;gap:12px;position:relative}.activity-item:after{content:\"\";position:absolute;bottom:-16px;left:44px;right:8px;height:1px;background:var(--border-color-default, #e5e5e5)}.activity-item:last-child:after{display:none}.activity-icon-wrapper{width:32px;height:32px;border-radius:8px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-wrapper{position:relative;display:flex;align-items:start;justify-content:center;flex-shrink:0;width:32px;height:32px}.avatar-badge{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:8px;background:var(--color-brand-secondary, #5d5fef);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge svg{width:10px;position:relative;top:1px;fill:#fff}.activity-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.activity-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0}.activity-title .actor-name{font-weight:600;color:var(--text-color-default-primary, #202227)}.activity-title .activity-text{color:var(--text-color-default-secondary, #545B66);font-weight:400}.activity-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0}.activity-timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);display:flex;align-items:center;gap:4px;margin-top:2px}.messages-list{display:flex;flex-direction:column;gap:8px;margin:-8px}.details-list{display:flex;flex-direction:column;gap:20px}.detail-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-tertiary, #737373)}.detail-value{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:24px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227)}.detail-value.description-text{padding:8px 0}.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--text-color-default-secondary, #525866);margin-top:4px;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.photo-grid{display:flex;gap:8px;margin-top:8px;overflow-x:auto}.photo-add{width:80px;height:80px;border-radius:12px;border:1px dashed var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.photo-item{width:80px;height:80px;border-radius:12px;background:var(--color-background-neutral-secondary, #e5e5e5);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileListItemStaticComponent, selector: "ds-mobile-list-item-static", inputs: ["leadingSize"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "clickable"], outputs: ["messageClick", "longPress"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--primary-surface{background:var(--color-primary-surface);color:var(--color-primary-content)}.swatch--primary-content{background:var(--color-primary-content);color:var(--color-primary-surface);border:1px solid #e0e0e0}.swatch--secondary-surface{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.swatch--secondary-content{background:var(--color-secondary-content);color:var(--color-secondary-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiryDetailPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-mobile-inquiry-detail-page', standalone: true, imports: [
+            args: [{ selector: 'ds-whitelabel-demo-modal', standalone: true, imports: [
                         CommonModule,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
+                        FormsModule,
                         IonContent,
-                        IonRefresher,
-                        IonRefresherContent,
-                        DsIconComponent,
-                        DsAvatarComponent,
-                        DsMobileInlineTabsComponent,
-                        DsMobileListItemStaticComponent,
-                        DsMobileInteractiveListItemMessageComponent
-                    ], host: {
-                        class: 'ion-page'
-                    }, template: `
-    <!-- Fixed header at top -->
-    <ion-header>
-      <ion-toolbar>
-        <div class="header-detail">
-          <!-- Back Button -->
-          <button class="back-button" (click)="goBack()" [attr.aria-label]="'Go back'">
-            <ds-icon name="remixArrowLeftSLine" size="24px" color="white" />
-          </button>
-          
-          <!-- Title - fades in on scroll -->
-          <ion-title class="header-detail__title">{{ inquiryTitle }}</ion-title>
-        </div>
-      </ion-toolbar>
-    </ion-header>
-
-    <!-- Content with expandable header -->
-    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
-      <!-- Pull to refresh (only on native iOS/Android) -->
-      @if (isNativePlatform()) {
-        <ion-refresher 
-          slot="fixed" 
-          (ionRefresh)="handleRefresh($event)"
-          [pullFactor]="0.4" 
-          [pullMin]="80" 
-          [pullMax]="240"
-          closeDuration="600ms">
-          <ion-refresher-content
-            pullingIcon="remixArrowDownS"
-            refreshingSpinner="lines">
-          </ion-refresher-content>
-        </ion-refresher>
-      }
-
-      <!-- Expandable header section (purple background) -->
-      <div class="header-expandable">
-        <div class="header-expandable-inner">
-          <div class="header-expandable__text">
-            <h1 class="header-expandable__title">{{ inquiryTitle }}</h1>
-          </div>
-          
-          <!-- Tabs in header -->
-          <ds-mobile-inline-tabs
-            [tabs]="tabItems"
-            [activeTab]="activeTab()"
-            (tabChange)="setActiveTab($event)">
-          </ds-mobile-inline-tabs>
-        </div>
+                        DsLogoComponent,
+                        DsAvatarWithBadgeComponent,
+                        DsIconButtonComponent
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <!-- Fixed Header -->
+    <div class="modal-header">
+      <div class="header-content">
+        <span class="header-title">Whitelabel</span>
+        <ds-icon-button
+          icon="remixCloseLine"
+          variant="secondary"
+          size="lg"
+          (click)="close()"
+          class="close-button"
+          aria-label="Close">
+        </ds-icon-button>
       </div>
-
-      <!-- Content wrapper -->
-      <div class="content-wrapper">
-        <div class="content-inner">
-          <!-- Activity Tab Content -->
-          @if (activeTab() === 'activity') {
-            <div class="activity-list">
-              @for (activity of activities; track activity.id) {
-                <div class="activity-item">
-                  @if (activity.actor) {
-                    <!-- Avatar with badge for actor activities -->
-                    <div class="avatar-wrapper">
-                      <ds-avatar 
-                        [type]="'initials'"
-                        [initials]="activity.actorInitials || ''"
-                        size="md" />
-                      
-                      <div class="avatar-badge">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" fill="none">
-                          <path d="M33.9862 5.51709H23.1724V8.82743H26.0413C26.2841 8.82743 26.4827 9.02606 26.4827 9.26881V12.7998C26.4827 13.0426 26.2841 13.2412 26.0413 13.2412H23.1724V14.3447H26.0413C26.2841 14.3447 26.4827 14.5433 26.4827 14.7861V18.3171C26.4827 18.5598 26.2841 18.7585 26.0413 18.7585H23.1724V19.8619H26.0413C26.2841 19.8619 26.4827 20.0605 26.4827 20.3033V23.8343C26.4827 24.0771 26.2841 24.2757 26.0413 24.2757H23.1724V26.2619C23.1724 26.7496 23.0267 27.2043 22.7773 27.5861H27.5862L32 31.9999V27.5861H33.9862C34.7167 27.5861 35.3103 26.9924 35.3103 26.2619V6.84123C35.3103 6.11075 34.7167 5.51709 33.9862 5.51709ZM32 23.8343C32 24.0771 31.8013 24.2757 31.5586 24.2757H28.0276C27.7848 24.2757 27.5862 24.0771 27.5862 23.8343V20.3033C27.5862 20.0605 27.7848 19.8619 28.0276 19.8619H31.5586C31.8013 19.8619 32 20.0605 32 20.3033V23.8343ZM32 18.3171C32 18.5598 31.8013 18.7585 31.5586 18.7585H28.0276C27.7848 18.7585 27.5862 18.5598 27.5862 18.3171V14.7861C27.5862 14.5433 27.7848 14.3447 28.0276 14.3447H31.5586C31.8013 14.3447 32 14.5433 32 14.7861V18.3171ZM32 12.7998C32 13.0426 31.8013 13.2412 31.5586 13.2412H28.0276C27.7848 13.2412 27.5862 13.0426 27.5862 12.7998V9.26881C27.5862 9.02606 27.7848 8.82743 28.0276 8.82743H31.5586C31.8013 8.82743 32 9.02606 32 9.26881V12.7998Z" fill="white"/>
-                          <path d="M20.7448 0H1.32414C0.593655 0 0 0.593655 0 1.32414V26.2621C0 26.9926 0.593655 27.5862 1.32414 27.5862H3.31034V32L7.72414 27.5862H20.7448C21.4753 27.5862 22.069 26.9926 22.069 26.2621V1.32414C22.069 0.593655 21.4753 0 20.7448 0ZM7.72414 23.8345C7.72414 24.0772 7.52552 24.2759 7.28276 24.2759H3.75172C3.50897 24.2759 3.31034 24.0772 3.31034 23.8345V20.3034C3.31034 20.0607 3.50897 19.8621 3.75172 19.8621H7.28276C7.52552 19.8621 7.72414 20.0607 7.72414 20.3034V23.8345ZM7.72414 18.3172C7.72414 18.56 7.52552 18.7586 7.28276 18.7586H3.75172C3.50897 18.7586 3.31034 18.56 3.31034 18.3172V14.7862C3.31034 14.5434 3.50897 14.3448 3.75172 14.3448H7.28276C7.52552 14.3448 7.72414 14.5434 7.72414 14.7862V18.3172ZM7.72414 12.8C7.72414 13.0428 7.52552 13.2414 7.28276 13.2414H3.75172C3.50897 13.2414 3.31034 13.0428 3.31034 12.8V9.26897C3.31034 9.02621 3.50897 8.82759 3.75172 8.82759H7.28276C7.52552 8.82759 7.72414 9.02621 7.72414 9.26897V12.8ZM7.72414 7.28276C7.72414 7.52552 7.52552 7.72414 7.28276 7.72414H3.75172C3.50897 7.72414 3.31034 7.52552 3.31034 7.28276V3.75172C3.31034 3.50897 3.50897 3.31034 3.75172 3.31034H7.28276C7.52552 3.31034 7.72414 3.50897 7.72414 3.75172V7.28276ZM13.2414 23.8345C13.2414 24.0772 13.0428 24.2759 12.8 24.2759H9.26897C9.02621 24.2759 8.82759 24.0772 8.82759 23.8345V20.3034C8.82759 20.0607 9.02621 19.8621 9.26897 19.8621H12.8C13.0428 19.8621 13.2414 20.0607 13.2414 20.3034V23.8345ZM13.2414 18.3172C13.2414 18.56 13.0428 18.7586 12.8 18.7586H9.26897C9.02621 18.7586 8.82759 18.56 8.82759 18.3172V14.7862C8.82759 14.5434 9.02621 14.3448 9.26897 14.3448H12.8C13.0428 14.3448 13.2414 14.5434 13.2414 14.7862V18.3172ZM13.2414 12.8C13.2414 13.0428 13.0428 13.2414 12.8 13.2414H9.26897C9.02621 13.2414 8.82759 13.0428 8.82759 12.8V9.26897C8.82759 9.02621 9.02621 8.82759 9.26897 8.82759H12.8C13.0428 8.82759 13.2414 9.02621 13.2414 9.26897V12.8ZM13.2414 6.84138V7.28276C13.2414 7.52552 13.0428 7.72414 12.8 7.72414H9.26897C9.02621 7.72414 8.82759 7.52552 8.82759 7.28276V3.75172C8.82759 3.50897 9.02621 3.31034 9.26897 3.31034H12.8C13.0428 3.31034 13.2414 3.50897 13.2414 3.75172V6.84138ZM18.7586 23.8345C18.7586 24.0772 18.56 24.2759 18.3172 24.2759H14.7862C14.5434 24.2759 14.3448 24.0772 14.3448 23.8345V20.3034C14.3448 20.0607 14.5434 19.8621 14.7862 19.8621H18.3172C18.56 19.8621 18.7586 20.0607 18.7586 20.3034V23.8345ZM18.7586 18.3172C18.7586 18.56 18.56 18.7586 18.3172 18.7586H14.7862C14.5434 18.7586 14.3448 18.56 14.3448 18.3172V14.7862C14.3448 14.5434 14.5434 14.3448 14.7862 14.3448H18.3172C18.56 14.3448 18.7586 14.5434 18.7586 14.7862V18.3172ZM18.7586 12.8C18.7586 13.0428 18.56 13.2414 18.3172 13.2414H14.7862C14.5434 13.2414 14.3448 13.0428 14.3448 12.8V9.26897C14.3448 9.02621 14.5434 8.82759 14.7862 8.82759H18.3172C18.56 8.82759 18.7586 9.02621 18.7586 9.26897V12.8ZM18.7586 5.51724V7.28276C18.7586 7.52552 18.56 7.72414 18.3172 7.72414H14.7862C14.5434 7.72414 14.3448 7.52552 14.3448 7.28276V3.75172C14.3448 3.50897 14.5434 3.31034 14.7862 3.31034H18.3172C18.56 3.31034 18.7586 3.50897 18.7586 3.75172V5.51724Z" fill="white"/>
-                        </svg>
-                      </div>
-                    </div>
-                  } @else {
-                    <!-- Icon wrapper for non-actor activities -->
-                    <div class="activity-icon-wrapper">
-                      <ds-icon 
-                        [name]="activity.iconName"
-                        size="18px"
-                        color="secondary" />
-                    </div>
-                  }
-                  
-                  <div class="activity-content">
-                    <p class="activity-title">
-                      @if (activity.actor) {
-                        <span class="actor-name">{{ activity.actor }}</span>
-                        <span class="activity-text"> {{ activity.title }}</span>
-                      } @else {
-                        <span class="actor-name">{{ activity.title }}</span>
-                      }
-                    </p>
-                    @if (activity.description) {
-                      <p class="activity-description">{{ activity.description }}</p>
-                    }
-                    <div class="activity-timestamp">
-                      <ds-icon name="remixCalendarLine" size="12px" color="--color-text-tertiary" />
-                      <span>{{ activity.date }}</span>
-                    </div>
-                  </div>
-                </div>
-              }
-            </div>
-          }
-          
-          <!-- Messages Tab Content -->
-          @if (activeTab() === 'messages') {
-            <div class="messages-list">
-              @for (message of messageThreads; track message.id) {
-                <ds-mobile-interactive-list-item-message
-                  [senderName]="message.senderName"
-                  [senderRole]="message.role"
-                  [message]="message.message"
-                  [avatarInitials]="message.senderInitials"
-                  [unread]="message.unread"
-                  (messageClick)="openMessage(message.id)">
-                </ds-mobile-interactive-list-item-message>
-              }
+    </div>
+    
+    <!-- Scrollable Content -->
+    <ion-content [scrollY]="true" class="modal-content">
+      <div class="demo-container">
+          <!-- Theme Selection -->
+          <div class="demo-section">
+            <h2>Theme</h2>
+            <div class="theme-buttons">
+              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
+                Propbinder
+              </button>
+              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
+                CEJ
+              </button>
+              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
+                PKA
+              </button>
+              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
+                Clave
+              </button>
             </div>
-          }
+          </div>
           
-          <!-- Details Tab Content -->
-          @if (activeTab() === 'details') {
-            <div class="details-list">
-              <!-- Assignee -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-avatar
-                    [size]="'sm'"
-                    [type]="'initials'"
-                    [initials]="'R'" />
-                </div>
-                <div content-main>
-                  <div class="detail-label">Sagsbehandler</div>
-                  <div class="detail-value">Ricki Meihlen</div>
+          <!-- Logo & Logomark Preview -->
+          <div class="demo-section">
+            <h2>Logo Preview</h2>
+            <div class="preview-grid">
+              <div class="preview-tile">
+                <h3>Logo</h3>
+                <div class="logo-preview">
+                  <ds-logo variant="full" />
                 </div>
-              </ds-mobile-list-item-static>
-              
-              <!-- Technician -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-avatar
-                    [size]="'sm'"
+              </div>
+              <div class="preview-tile">
+                <h3>Logomark</h3>
+                <div class="logomark-preview">
+                  <ds-avatar-with-badge
                     [type]="'initials'"
-                    [initials]="'M'" />
+                    [initials]="'KN'"
+                    [size]="'md'"
+                    [badgePosition]="'bottom-right'"
+                  />
                 </div>
-                <div content-main>
-                  <div class="detail-label">Tekniker</div>
-                  <div class="detail-value">Martin Smith</div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Brand Colors -->
+          <div class="demo-section">
+            <h2>Brand Colors</h2>
+            <div class="color-section">
+              <div class="color-swatches">
+                <div class="swatch swatch--primary-surface">
+                  <div class="swatch-label">Primary Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.primarySurface() }}</div>
                 </div>
-              </ds-mobile-list-item-static>
-              
-              <!-- Title -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-icon name="remixTextBlock" size="20px" color="tertiary" />
+                <div class="swatch swatch--primary-content">
+                  <div class="swatch-label">Primary Content</div>
+                  <div class="swatch-value">{{ whitelabelService.primaryContent() }}</div>
                 </div>
-                <div content-main>
-                  <div class="detail-value">{{ inquiryTitle }}</div>
+                <div class="swatch swatch--secondary-surface">
+                  <div class="swatch-label">Secondary Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.secondarySurface() }}</div>
                 </div>
-              </ds-mobile-list-item-static>
+                <div class="swatch swatch--secondary-content">
+                  <div class="swatch-label">Secondary Content</div>
+                  <div class="swatch-value">{{ whitelabelService.secondaryContent() }}</div>
+                </div>
+              </div>
               
-              <!-- Description -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-icon name="remixAlignLeft" size="20px" color="tertiary" />
+              <div class="color-inputs">
+                <div class="color-group-label">Primary</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customPrimarySurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customPrimarySurface"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-                <div content-main>
-                  <div class="detail-value description-text">
-                    I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
-                  </div>
-                  <div class="detail-tag">Husholdningsapparater</div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customPrimaryContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customPrimaryContent"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-              </ds-mobile-list-item-static>
-              
-              <!-- Photos -->
-              <ds-mobile-list-item-static [leadingSize]="'32px'">
-                <div content-leading>
-                  <ds-icon name="remixCameraLine" size="20px" color="tertiary" />
+                
+                <div class="color-group-label">Secondary</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customSecondarySurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customSecondarySurface"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-                <div content-main>
-                  <div class="photo-grid">
-                    <button class="photo-add">
-                      <ds-icon name="remixAddLine" size="20px" color="tertiary" />
-                    </button>
-                    <!-- Placeholder photos -->
-                    <div class="photo-item"></div>
-                    <div class="photo-item"></div>
-                    <div class="photo-item"></div>
-                    <div class="photo-item"></div>
-                  </div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customSecondaryContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customSecondaryContent"
+                    (change)="applyCustomColors()"
+                  />
                 </div>
-              </ds-mobile-list-item-static>
+              </div>
             </div>
-          }
+          </div>
         </div>
-      </div>
     </ion-content>
-  `, styles: ["ion-header{--background: var(--color-brand-secondary, #5d5fef);height:72px;min-height:72px}ion-toolbar{--background: var(--color-brand-secondary, #5d5fef);--color: white;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:100%;min-height:72px}ion-toolbar ion-title{transition:transform .2s ease,opacity .2s ease!important}.header-detail{display:flex;align-items:center;gap:12px;padding:0 20px;height:100%}.back-button{width:36px;height:36px;border-radius:50%;background:#ffffff1a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;color:#fff;padding:0;flex-shrink:0}.back-button:hover,.back-button:active{background:#ffffff26}.header-detail__title{position:absolute;left:64px;transform:translateY(-100%);font-size:var(--font-size-base);font-weight:600;color:#fff;opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important;margin:0;padding:0;--color: white;text-align:left!important}.header-scrolled .header-detail__title{opacity:1!important;pointer-events:auto;transform:translateY(0)}@media (min-width: 768px){.header-detail{padding:16px 24px}}ion-content{--background: var(--color-brand-secondary);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}.plt-ios ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){ion-content{border-radius:24px 24px 0 0}}ion-content::part(scroll){-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}ion-refresher{z-index:0}ion-refresher-content{--color: white}.header-expandable{background:var(--color-brand-secondary);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out}.header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px}.header-expandable__text{margin-bottom:0}@media (min-width: 768px){.header-expandable{padding:40px var(--content-padding-md) 32px var(--content-padding-md)}}@media (min-width: 992px){.header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){.header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}.content-wrapper{background:var(--color-background-neutral-primary, white);border-radius:24px 24px 0 0;flex:1 1 auto;min-height:100%;position:relative;z-index:10;box-shadow:0 200vh 0 0 var(--color-background-neutral-primary)}.content-inner{padding:24px 20px 40px}@media (min-width: 768px){.content-inner{padding:32px}}.activity-list{display:flex;flex-direction:column;gap:32px}.activity-item{display:flex;gap:12px;position:relative}.activity-item:after{content:\"\";position:absolute;bottom:-16px;left:44px;right:8px;height:1px;background:var(--border-color-default, #e5e5e5)}.activity-item:last-child:after{display:none}.activity-icon-wrapper{width:32px;height:32px;border-radius:8px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-wrapper{position:relative;display:flex;align-items:start;justify-content:center;flex-shrink:0;width:32px;height:32px}.avatar-badge{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:8px;background:var(--color-brand-secondary, #5d5fef);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge svg{width:10px;position:relative;top:1px;fill:#fff}.activity-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.activity-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0}.activity-title .actor-name{font-weight:600;color:var(--text-color-default-primary, #202227)}.activity-title .activity-text{color:var(--text-color-default-secondary, #545B66);font-weight:400}.activity-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0}.activity-timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);display:flex;align-items:center;gap:4px;margin-top:2px}.messages-list{display:flex;flex-direction:column;gap:8px;margin:-8px}.details-list{display:flex;flex-direction:column;gap:20px}.detail-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-tertiary, #737373)}.detail-value{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:24px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227)}.detail-value.description-text{padding:8px 0}.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--text-color-default-secondary, #525866);margin-top:4px;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.photo-grid{display:flex;gap:8px;margin-top:8px;overflow-x:auto}.photo-add{width:80px;height:80px;border-radius:12px;border:1px dashed var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.photo-item{width:80px;height:80px;border-radius:12px;background:var(--color-background-neutral-secondary, #e5e5e5);flex-shrink:0}\n"] }]
-        }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }, { type: i0.ElementRef }], propDecorators: { ionContent: [{
-                type: ViewChild,
-                args: [IonContent]
-            }] } });
+  `, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--primary-surface{background:var(--color-primary-surface);color:var(--color-primary-content)}.swatch--primary-content{background:var(--color-primary-content);color:var(--color-primary-surface);border:1px solid #e0e0e0}.swatch--secondary-surface{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.swatch--secondary-content{background:var(--color-secondary-content);color:var(--color-secondary-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"] }]
+        }] });
+
+/**
+ * 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();
+ * }
+ * ```
+ */
+class WhitelabelDemoModalService {
+    modalController;
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    /**
+     * Open the whitelabel demo modal
+     *
+     * @returns Promise that resolves when the modal is presented
+     */
+    async open() {
+        try {
+            console.log('[WhitelabelDemoModal] Opening...');
+            const modal = await this.modalController.create({
+                component: WhitelabelDemoModalComponent,
+                cssClass: 'ds-whitelabel-demo-modal',
+                mode: 'ios',
+                presentingElement: document.querySelector('ion-router-outlet') || undefined,
+                backdropDismiss: true,
+                showBackdrop: true,
+                animated: true,
+                keyboardClose: true
+            });
+            console.log('[WhitelabelDemoModal] Modal created, presenting...');
+            await modal.present();
+            console.log('[WhitelabelDemoModal] Modal presented');
+        }
+        catch (error) {
+            console.error('[WhitelabelDemoModal] Error opening modal:', error);
+            throw error;
+        }
+    }
+    /**
+     * 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
+     */
+    async close(data) {
+        return this.modalController.dismiss(data);
+    }
+    /**
+     * Get the top-most modal if one exists
+     *
+     * @returns Promise that resolves to the modal element or undefined
+     */
+    async getTop() {
+        return this.modalController.getTop();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
 
 /**
  * MobileTabsExampleComponent
@@ -11939,6 +12170,8 @@ class MobileTabsExampleComponent {
         // Configure user avatar globally - this is now the single source of truth
         this.userService.setAvatarInitials('LM');
         this.userService.setAvatarType('initials');
+        // Set profile menu items globally - this will be used by both tab bar and page-main components
+        this.userService.setProfileMenuItems(this.profileMenuItems);
     }
     tabs = [
         {
@@ -11972,7 +12205,9 @@ class MobileTabsExampleComponent {
     ];
     /**
      * Profile menu items configuration.
-     * Define once here, and the tab bar component handles opening/closing the menu.
+     * Define once here - this is set globally in UserService in ngOnInit(),
+     * so it will be used by both ds-mobile-tab-bar and ds-mobile-page-main components
+     * throughout the entire application.
      */
     profileMenuItems = [
         {
@@ -13034,5 +13269,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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, 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 { 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 };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map