@propbinder/mobile-design 0.0.1 → 0.0.21

package/fesm2022/propbinder-mobile-design.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, computed, Directive, EventEmitter, HostListener, Output, Input, inject, PLATFORM_ID, signal, output, Component, Injectable, ViewChild, model, ElementRef, CUSTOM_ELEMENTS_SCHEMA, createComponent } from '@angular/core';
+import { input, computed, Directive, EventEmitter, HostListener, Output, Input, inject, PLATFORM_ID, signal, output, Component, Injectable, ViewChild, model, ElementRef, CUSTOM_ELEMENTS_SCHEMA, createComponent, effect, ViewEncapsulation } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { Router } from '@angular/router';
 import * as i1 from '@ionic/angular/standalone';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, Platform, ModalController, IonRefresher, IonRefresherContent, IonTabs, IonTabBar, IonTabButton, IonLabel, IonTab, IonSpinner } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, Platform, ModalController, IonRefresher, IonRefresherContent, IonTabs, IonTabBar, IonTabButton, IonLabel, IonTab, IonSpinner, IonButton } from '@ionic/angular/standalone';
 import { ImpactStyle, Haptics } from '@capacitor/haptics';
 import { DsIconButtonComponent, DsIconComponent, DsButtonComponent, DsAvatarComponent, DsShapeIndicatorComponent } from '@propbinder/design-system';
 import * as i2 from '@angular/forms';
@@ -18,6 +18,7 @@ import { Share } from '@capacitor/share';
 import Swiper from 'swiper';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Browser } from '@capacitor/browser';
+import { createAnimation } from '@ionic/core';
 
 /**
  * MobilePageBase
@@ -4419,7 +4420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * />
  * ```
  */
-class DsMobileTabsComponent {
+let DsMobileTabsComponent$1 = class DsMobileTabsComponent {
     elementRef;
     // Inputs
     tabs = [];
@@ -4555,8 +4556,8 @@ class DsMobileTabsComponent {
       </ion-tab-bar>
     </ion-tabs>
   `, isInline: true, styles: [":host{display:block;height:100vh;height:100dvh}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}ion-tabs{height:100%;background:var(--color-brand-secondary)}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:calc(var(--ion-safe-area-bottom, 34px) - 4px)}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){ion-tabs:has(ds-mobile-page-details) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){ion-tab-bar[slot=top]{--background: var(--color-brand-secondary);position:relative;display:flex;align-items:center;padding:12px 24px;height:64px;max-width:none}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-brand-base);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-brand-base);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-brand-base);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:auto;flex:0 0 auto;--color: rgba(255, 255, 255, .7);--color-selected: white;background:#ffffff1a;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover{--color: white;--color-selected: white}.ds-tab-button.tab-selected{background:var(--color-background-brand);--color-selected: white}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:#ffffff4d;border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTab, selector: "ion-tab", inputs: ["component", "tab"] }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabsComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabsComponent$1, decorators: [{
             type: Component,
             args: [{ selector: 'ds-mobile-tabs', standalone: true, imports: [
                         CommonModule,
@@ -8284,11 +8285,4312 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 // Mobile Page Components
 
+/**
+ * User service for managing current user data globally
+ */
+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();
+    /**
+     * Update avatar configuration
+     */
+    setAvatarInitials(initials) {
+        this._avatarInitials.set(initials);
+    }
+    setAvatarType(type) {
+        this._avatarType.set(type);
+    }
+    setAvatarSrc(src) {
+        this._avatarSrc.set(src);
+    }
+    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: UserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MobileCommunityPageComponent {
+    router;
+    route;
+    bottomSheet;
+    lightbox;
+    postModal;
+    userService;
+    // Store user-created posts
+    userPosts = signal([
+        {
+            id: 'user-post-1',
+            authorName: 'Lars Mikkelsen',
+            authorRole: 'Dig',
+            timestamp: '5m siden',
+            avatarType: 'initials',
+            avatarInitials: 'LM',
+            content: 'Dette er mit første opslag! Ser frem til at forbinde med alle i bygningen. 🏠',
+            isLiked: false,
+            likeCount: 3,
+            commentCount: 1
+        }
+    ], ...(ngDevMode ? [{ debugName: "userPosts" }] : []));
+    // Flag to control whether static demo posts are shown
+    // Set to false to see the empty state
+    showStaticPosts = signal(true, ...(ngDevMode ? [{ debugName: "showStaticPosts" }] : []));
+    // Computed to check if there are any posts to display
+    hasAnyPosts = computed(() => {
+        return this.userPosts().length > 0 || this.showStaticPosts();
+    }, ...(ngDevMode ? [{ debugName: "hasAnyPosts" }] : []));
+    constructor(router, route, bottomSheet, lightbox, postModal, userService) {
+        this.router = router;
+        this.route = route;
+        this.bottomSheet = bottomSheet;
+        this.lightbox = lightbox;
+        this.postModal = postModal;
+        this.userService = userService;
+    }
+    handleRefresh(event) {
+        console.log('Pull-to-refresh triggered');
+        setTimeout(() => {
+            console.log('Refresh complete');
+            event.target.complete();
+        }, 1000);
+    }
+    /**
+     * Open post detail modal
+     * This provides a better UX than route navigation:
+     * - Maintains scroll position
+     * - Native iOS-style modal feel
+     * - Proper close button that works
+     */
+    async openPost(postId, focusComment = false) {
+        console.log('[Community] ===== openPost called =====', postId, 'Focus comment:', focusComment);
+        // Map post ID to post data (in real app, fetch from service)
+        const postDataMap = {
+            '1': {
+                postId: '1',
+                authorName: 'Anders Jensen',
+                authorRole: 'Lejer',
+                timestamp: '2t siden',
+                avatarType: 'photo',
+                avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
+                content: 'Lige flyttet ind i min nye lejlighed! Udlejeren var super hjælpsom gennem hele processen. Virkelig begejstret for at være en del af dette fællesskab! 🏠',
+                isLiked: false,
+                likeCount: 42,
+                commentCount: 12,
+                comments: [
+                    {
+                        authorName: 'Mette Larsen',
+                        authorRole: 'Lejer',
+                        timestamp: '1t siden',
+                        avatarInitials: 'ML',
+                        content: 'Velkommen til fællesskabet!',
+                        likeCount: 5,
+                        isOwnComment: false
+                    },
+                    {
+                        authorName: 'Lars Mikkelsen',
+                        authorRole: 'Dig',
+                        timestamp: 'Lige nu',
+                        avatarInitials: 'LM',
+                        content: 'Vxhknbh',
+                        likeCount: 0,
+                        isOwnComment: true
+                    }
+                ]
+            },
+            '2': {
+                postId: '2',
+                authorName: 'Sophie Andersen',
+                authorRole: 'Lejer',
+                timestamp: '4t siden',
+                avatarInitials: 'SA',
+                content: 'Se denne smukke udsigt fra min altan! Morgenkaffe har aldrig smagt så godt ☕️',
+                imageSrc: '/Assets/Dummy-photos/balcony-view.jpg',
+                imageAlt: 'Altanudsigt',
+                isLiked: true,
+                likeCount: 156,
+                commentCount: 34,
+                comments: [
+                    {
+                        authorName: 'Anders Jensen',
+                        authorRole: 'Lejer',
+                        timestamp: '3t siden',
+                        avatarInitials: 'AJ',
+                        content: 'Wow, den udsigt er fantastisk! Hvilken etage er du på?',
+                        likeCount: 12,
+                        isOwnComment: false
+                    },
+                    {
+                        authorName: 'Thomas Hansen',
+                        authorRole: 'Lejer',
+                        timestamp: '3t siden',
+                        avatarInitials: 'TH',
+                        content: 'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆',
+                        isLiked: true,
+                        likeCount: 8,
+                        isOwnComment: false
+                    },
+                    {
+                        authorName: 'Lars Mikkelsen',
+                        authorRole: 'Dig',
+                        timestamp: 'Lige nu',
+                        avatarInitials: 'LM',
+                        content: 'Vxhknbh',
+                        likeCount: 0,
+                        isOwnComment: true
+                    }
+                ]
+            },
+            '3': {
+                postId: '3',
+                authorName: 'Thomas Hansen',
+                authorRole: 'Lejer',
+                timestamp: '1d siden',
+                avatarType: 'photo',
+                avatarSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
+                content: 'Kender nogen et fælles fitnesscenter i nærheden? Leder efter anbefalinger til gode træningscentre i området. 🏋️',
+                isLiked: false,
+                likeCount: 23,
+                commentCount: 45,
+                comments: []
+            },
+            '4': {
+                postId: '4',
+                authorName: 'Karen Nielsen',
+                authorRole: 'Ejendomsadministrator',
+                timestamp: '2d siden',
+                avatarInitials: 'KN',
+                content: '📢 Påmindelse: Bygningsvedligeholdelse planlagt til denne lørdag fra kl. 9 til 14. Vandet vil være midlertidigt lukket. Vær venlig at planlægge derefter!',
+                isLiked: false,
+                likeCount: 89,
+                commentCount: 67,
+                comments: []
+            },
+            '5': {
+                postId: '5',
+                authorName: 'Emma Petersen',
+                authorRole: 'Lejer',
+                timestamp: '3d siden',
+                avatarType: 'photo',
+                avatarSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face',
+                content: 'Arrangerer en fælles BBQ næste weekend! Alle er inviteret. Tag din yndlingsret med til at dele. Lad os lære hinanden bedre at kende! 🍔🌭',
+                isLiked: true,
+                likeCount: 124,
+                commentCount: 89,
+                comments: []
+            }
+        };
+        const postData = postDataMap[postId];
+        if (postData) {
+            // Add focusComment flag to postData
+            await this.postModal.open({ ...postData, focusComment });
+        }
+    }
+    /**
+     * Open user-created post detail modal
+     */
+    async openUserPost(index, focusComment = false) {
+        const posts = this.userPosts();
+        const post = posts[index];
+        if (post) {
+            console.log('[Community] Opening user post modal:', index, 'Focus comment:', focusComment);
+            // Convert user post to modal format with empty comments array
+            const postData = {
+                ...post,
+                postId: `user-${index}`,
+                comments: [] // User posts don't have comments yet
+            };
+            await this.postModal.open({ ...postData, focusComment });
+        }
+    }
+    async openPostCreator() {
+        // Open the post creator as a bottom sheet modal
+        // Using 95% initial height to maximize keyboard auto-open chances
+        const sheet = await this.bottomSheet.create({
+            component: DsMobilePostCreateBottomSheetComponent,
+            componentProps: {
+                // This helps the component know it should auto-focus
+                autoFocus: true
+            },
+            breakpoints: [0, 0.95, 1],
+            initialBreakpoint: 0.95,
+            handle: true
+        });
+        // Handle the result when the sheet is dismissed
+        const result = await sheet.onWillDismiss();
+        if (result.role === 'post' && result.data) {
+            console.log('New post created:', result.data);
+            // Create a new post object
+            const newPost = {
+                id: `user-post-${Date.now()}`, // Generate unique ID
+                authorName: 'Lars Mikkelsen', // Current user name
+                authorRole: 'Dig',
+                timestamp: 'Lige nu',
+                avatarType: this.userService.avatarType(),
+                avatarSrc: this.userService.avatarSrc(),
+                avatarInitials: this.userService.avatarInitials(),
+                content: result.data.content,
+                imageSrc: result.data.images && result.data.images.length > 0 ? result.data.images[0] : undefined,
+                imageAlt: result.data.images && result.data.images.length > 0 ? 'Slået billede op' : undefined,
+                isLiked: false,
+                likeCount: 0,
+                commentCount: 0
+            };
+            // Add to the beginning of the posts array
+            this.userPosts.update(posts => [newPost, ...posts]);
+        }
+    }
+    /**
+     * Open an image in the lightbox viewer
+     * Prevents the post click event from firing
+     */
+    async openImageLightbox(imageSrc, title, description, event) {
+        console.log('[Community] Opening lightbox for image:', imageSrc);
+        // Prevent the post card click event from firing
+        event.stopPropagation();
+        const authorMeta = {
+            name: 'Sophie Andersen',
+            role: 'Lejer',
+            avatarInitials: 'SA',
+            timestamp: '4t siden'
+        };
+        // Open the lightbox with the image
+        await this.lightbox.open({
+            images: [
+                {
+                    type: 'image',
+                    src: imageSrc,
+                    alt: title,
+                    title: title,
+                    description: description,
+                    isLiked: true,
+                    likeCount: 156,
+                    commentCount: 34
+                }
+            ],
+            author: authorMeta,
+            enableZoom: true,
+            showControls: false, // Single image, no need for controls
+            showInfo: true
+        });
+    }
+    async openHouseRulesPdf() {
+        console.log('[Community] Opening House Rules PDF');
+        // Author metadata
+        const authorMeta = {
+            name: 'Karen Nielsen',
+            role: 'Ejendomsadministrator',
+            avatarInitials: 'KN',
+            timestamp: '2d siden'
+        };
+        // Open the PDF lightbox
+        // Use absolute path for production deployment (Vercel, etc.)
+        await this.lightbox.openPdf({
+            pdf: {
+                type: 'pdf',
+                src: '/Assets/House_Rules.pdf', // Capital A to match public/Assets folder structure
+                title: 'House Rules',
+                description: 'Building regulations and community guidelines',
+                fileSize: 250880, // 245 KB in bytes
+                pageCount: 8
+            },
+            author: authorMeta
+        });
+    }
+    /**
+     * Handle long press on a post to show action sheet
+     */
+    async handlePostLongPress(postIdOrIndex, isOwnPost) {
+        console.log('[Community] Post long pressed:', postIdOrIndex, 'isOwn:', isOwnPost);
+        const sheet = await this.bottomSheet.create({
+            component: DsMobileActionsBottomSheetComponent,
+            componentProps: {
+                isOwnContent: isOwnPost
+            },
+            breakpoints: [0, 1],
+            initialBreakpoint: 1,
+            handle: true,
+            backdropDismiss: true,
+            cssClass: 'auto-height'
+        });
+        const result = await sheet.onWillDismiss();
+        if (result.role === 'select' && result.data) {
+            const action = result.data.action;
+            switch (action) {
+                case 'edit':
+                    console.log('Edit post:', postIdOrIndex);
+                    // Open the post create bottom sheet in edit mode
+                    let postContent = '';
+                    let postId = '';
+                    // Get post content based on postIdOrIndex
+                    if (typeof postIdOrIndex === 'number') {
+                        const post = this.userPosts()[postIdOrIndex];
+                        if (post) {
+                            postContent = post.content || '';
+                            postId = post.id || postIdOrIndex.toString();
+                        }
+                    }
+                    else {
+                        // For static posts, we'll need to determine content
+                        // For now, use a placeholder
+                        postId = postIdOrIndex.toString();
+                        postContent = 'Edit this post...';
+                    }
+                    // Open the bottom sheet in edit mode
+                    const editSheet = await this.bottomSheet.create({
+                        component: DsMobilePostCreateBottomSheetComponent,
+                        componentProps: {
+                            autoFocus: true,
+                            isEditMode: true,
+                            postId: postId,
+                            initialContent: postContent
+                        },
+                        breakpoints: [0, 0.95, 1],
+                        initialBreakpoint: 0.95,
+                        handle: true,
+                        backdropBlur: true,
+                        backdropOpacity: 0.6
+                    });
+                    // Handle the result when the sheet is dismissed
+                    const editResult = await editSheet.onWillDismiss();
+                    if (editResult.role === 'post' && editResult.data) {
+                        console.log('Post updated:', editResult.data);
+                        // Update the post in the array
+                        if (typeof postIdOrIndex === 'number') {
+                            const currentPosts = this.userPosts();
+                            const updatedPosts = currentPosts.map((post, index) => index === postIdOrIndex
+                                ? { ...post, content: editResult.data.content, timestamp: 'Just now' }
+                                : post);
+                            this.userPosts.set(updatedPosts);
+                        }
+                    }
+                    break;
+                case 'delete':
+                    console.log('Delete post:', postIdOrIndex);
+                    if (confirm('Er du sikker på, at du vil slette dette opslag?')) {
+                        // If it's a user post (number index), remove it from the array
+                        if (typeof postIdOrIndex === 'number') {
+                            const currentPosts = this.userPosts();
+                            const updatedPosts = currentPosts.filter((_, index) => index !== postIdOrIndex);
+                            this.userPosts.set(updatedPosts);
+                        }
+                        // Otherwise it's a static post, just show confirmation
+                        else {
+                            alert('Opslag slettet!');
+                        }
+                    }
+                    break;
+                case 'like':
+                    console.log('Like post:', postIdOrIndex);
+                    // Toggle like - in a real app, this would call an API
+                    alert('Opslag liket!');
+                    break;
+                case 'reply':
+                    console.log('Reply to post:', postIdOrIndex);
+                    // Open the post detail modal with comment input focused
+                    if (typeof postIdOrIndex === 'number') {
+                        await this.openUserPost(postIdOrIndex, true);
+                    }
+                    else {
+                        await this.openPost(postIdOrIndex, true);
+                    }
+                    break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileCommunityPageComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: DsMobileBottomSheetService }, { token: DsMobileLightboxService }, { token: DsMobilePostDetailModalService }, { token: UserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MobileCommunityPageComponent, isStandalone: true, selector: "app-mobile-community-page", ngImport: i0, template: `
+    <ds-mobile-page-main
+      title="Fællesskab"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Post Composer in header-expandable -->
+      <ds-mobile-post-composer
+        header-content
+        [avatarInitials]="userService.avatarInitials()"
+        [avatarType]="userService.avatarType()"
+        [avatarSrc]="userService.avatarSrc()"
+        (composerClick)="openPostCreator()"
+      />
+      
+      <ds-mobile-content>
+        <div class="post-feed">
+          <!-- Pinned Posts Section -->
+          <div class="pinned-posts-section">
+            <h2 class="section-headline">
+              <ds-icon name="remixPushpinFill" size="16px" color="primary" />
+              Fastgjorte opslag
+            </h2>
+            
+            <!-- Pinned: Maintenance Announcement -->
+            <ds-mobile-interactive-list-item-post
+              [authorName]="'Karen Nielsen'"
+              [authorRole]="'Ejendomsadministrator'"
+              [timestamp]="'2d siden'"
+              [avatarInitials]="'KN'"
+              [showBadge]="true"
+              [clickable]="true"
+              (postClick)="openPost('4')"
+              (commentClick)="openPost('4', true)"
+              (longPress)="handlePostLongPress('4', false)">
+              
+              <post-content>
+                <post-text>📢 Påmindelse: Bygningsvedligeholdelse planlagt til denne lørdag fra kl. 9 til 14. Vandet vil være midlertidigt lukket. Vær venlig at planlægge derefter!</post-text>
+                
+                <post-attachments>
+                  <post-pdf-attachment
+                    [fileName]="'Husregler.pdf'"
+                    [fileSize]="'245 KB'"
+                    (pdfClick)="openHouseRulesPdf()">
+                  </post-pdf-attachment>
+                </post-attachments>
+              </post-content>
+              
+              <post-actions>
+                <action-like [count]="89" />
+                <action-comment [count]="67" (commentClick)="openPost('4', true)" />
+              </post-actions>
+            </ds-mobile-interactive-list-item-post>
+          </div>
+          
+          <!-- All Posts Section -->
+          <h2 class="section-headline">Alle opslag</h2>
+          
+          @if (hasAnyPosts()) {
+            <div class="post-list-wrapper">
+              <!-- User Created Posts -->
+              @for (post of userPosts(); track $index) {
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarType]="post.avatarType"
+                  [avatarSrc]="post.avatarSrc"
+                  [avatarInitials]="post.avatarInitials"
+                  [clickable]="true"
+                  (postClick)="openUserPost($index)"
+                  (commentClick)="openUserPost($index, true)"
+                  (longPress)="handlePostLongPress($index, post.authorRole === 'Dig')">
+                  
+                  <post-content>
+                    @if (post.content) {
+                      <post-text>{{ post.content }}</post-text>
+                    }
+                    @if (post.imageSrc) {
+                      <post-media>
+                        <img 
+                          [src]="post.imageSrc" 
+                          [alt]="post.imageAlt || 'Posted image'" 
+                          class="clickable-image"
+                          (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
+                        />
+                      </post-media>
+                    }
+                  </post-content>
+                  
+                  <post-actions>
+                    <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openUserPost($index, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              }
+              
+              <!-- Post 1: Text only -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Anders Jensen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'2t siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('1')"
+                (commentClick)="openPost('1', true)"
+                (longPress)="handlePostLongPress('1', false)">
+                
+                <post-content>
+                  <post-text>Lige flyttet ind i min nye lejlighed! Udlejeren var super hjælpsom gennem hele processen. Virkelig begejstret for at være en del af dette fællesskab! 🏠</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="42" />
+                  <action-comment [count]="12" (commentClick)="openPost('1', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 2: With multiple images (grid layout) -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Sophie Andersen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'4t siden'"
+                [avatarInitials]="'SA'"
+                [clickable]="true"
+                (postClick)="openPost('2')"
+                (commentClick)="openPost('2', true)"
+                (longPress)="handlePostLongPress('2', false)">
+                
+                <post-content>
+                  <post-text>Jeg har taget nogle billeder af vores smukke ejendom i løbet af det sidste par måneder. Fra altanudsigten om morgenen til den nye trappe og fællesområderne. Elsker virkelig at bo her! 🏡✨</post-text>
+                  <ds-mobile-inline-photo
+                    [images]="[
+                      '/Assets/Dummy-photos/balcony-view.jpg',
+                      '/Assets/Dummy-photos/staircase.jpg',
+                      '/Assets/Dummy-photos/park.jpg',
+                      '/Assets/Dummy-photos/yard.jpg'
+                    ]"
+                    [author]="{
+                      name: 'Sophie Andersen',
+                      role: 'Lejer',
+                      avatarInitials: 'SA',
+                      avatarType: 'initials',
+                      timestamp: '4t siden'
+                    }"
+                  />
+                </post-content>
+                
+                <post-actions>
+                  <action-like [active]="true" [count]="156" />
+                  <action-comment [count]="34" (commentClick)="openPost('2', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 3: Question -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Thomas Hansen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'1d siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('3')"
+                (commentClick)="openPost('3', true)"
+                (longPress)="handlePostLongPress('3', false)">
+                
+                <post-content>
+                  <post-text>Kender nogen et fælles fitnesscenter i nærheden? Leder efter anbefalinger til gode træningscentre i området. 🏋️</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="23" />
+                  <action-comment [count]="45" (commentClick)="openPost('3', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 3.5: Property Manager showcase with 6+ photos -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Karen Nielsen'"
+                [authorRole]="'Ejendomsadministrator'"
+                [timestamp]="'2d siden'"
+                [avatarInitials]="'KN'"
+                [showBadge]="true"
+                [clickable]="true"
+                (postClick)="openPost('3.5')"
+                (commentClick)="openPost('3.5', true)"
+                (longPress)="handlePostLongPress('3.5', false)">
+                
+                <post-content>
+                  <post-text>Her er et kig på vores nyligt renoverede fællesområder! Vi har opgraderet postkasserne, trappeafsatsen og gårdområdet. Der er også blevet ansat en ny vicevært. Glæd dig over forbedringerne! 🏢✨</post-text>
+                  <ds-mobile-inline-photo
+                    [images]="[
+                      '/Assets/Dummy-photos/mailboxes.jpg',
+                      '/Assets/Dummy-photos/staircase.jpg',
+                      '/Assets/Dummy-photos/yard.jpg',
+                      '/Assets/Dummy-photos/park.jpg',
+                      '/Assets/Dummy-photos/balcony-view.jpg',
+                      '/Assets/Dummy-photos/handyman.jpg'
+                    ]"
+                    [author]="{
+                      name: 'Karen Nielsen',
+                      role: 'Ejendomsadministrator',
+                      avatarInitials: 'KN',
+                      avatarType: 'initials',
+                      timestamp: '2d siden'
+                    }"
+                    [maxVisible]="5"
+                  />
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="234" />
+                  <action-comment [count]="89" (commentClick)="openPost('3.5', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 5: Event -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Emma Petersen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'3d siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('5')"
+                (commentClick)="openPost('5', true)"
+                (longPress)="handlePostLongPress('5', false)">
+                
+                <post-content>
+                  <post-text>Arrangerer en fælles BBQ næste weekend! Alle er inviteret. Tag din yndlingsret med til at dele. Lad os lære hinanden bedre at kende! 🍔🌭</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [active]="true" [count]="124" />
+                  <action-comment [count]="89" (commentClick)="openPost('5', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+            </div>
+          } @else {
+            <!-- Empty State -->
+            <div class="community-empty-state">
+              <img 
+                src="/Assets/Empty state-chat.png" 
+                alt="Ingen opslag endnu" 
+                class="empty-state-image"
+              />
+              <h3 class="empty-state-title">Ingen opslag endnu</h3>
+              <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
+            </div>
+          }
+        </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: PostPdfAttachmentComponent, selector: "post-pdf-attachment", inputs: ["fileName", "fileSize"], outputs: ["pdfClick"] }, { 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,
+            args: [{ selector: 'app-mobile-community-page', standalone: true, imports: [
+                        DsMobilePageMainComponent,
+                        DsMobileContentComponent,
+                        DsMobileInteractiveListItemPostComponent,
+                        DsMobilePostComposerComponent,
+                        PostContentComponent,
+                        PostTextComponent,
+                        PostMediaComponent,
+                        PostAttachmentsComponent,
+                        PostActionsComponent,
+                        ActionLikeComponent,
+                        ActionCommentComponent,
+                        PostPdfAttachmentComponent,
+                        DsIconComponent,
+                        DsMobileInlinePhotoComponent
+                    ], template: `
+    <ds-mobile-page-main
+      title="Fællesskab"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Post Composer in header-expandable -->
+      <ds-mobile-post-composer
+        header-content
+        [avatarInitials]="userService.avatarInitials()"
+        [avatarType]="userService.avatarType()"
+        [avatarSrc]="userService.avatarSrc()"
+        (composerClick)="openPostCreator()"
+      />
+      
+      <ds-mobile-content>
+        <div class="post-feed">
+          <!-- Pinned Posts Section -->
+          <div class="pinned-posts-section">
+            <h2 class="section-headline">
+              <ds-icon name="remixPushpinFill" size="16px" color="primary" />
+              Fastgjorte opslag
+            </h2>
+            
+            <!-- Pinned: Maintenance Announcement -->
+            <ds-mobile-interactive-list-item-post
+              [authorName]="'Karen Nielsen'"
+              [authorRole]="'Ejendomsadministrator'"
+              [timestamp]="'2d siden'"
+              [avatarInitials]="'KN'"
+              [showBadge]="true"
+              [clickable]="true"
+              (postClick)="openPost('4')"
+              (commentClick)="openPost('4', true)"
+              (longPress)="handlePostLongPress('4', false)">
+              
+              <post-content>
+                <post-text>📢 Påmindelse: Bygningsvedligeholdelse planlagt til denne lørdag fra kl. 9 til 14. Vandet vil være midlertidigt lukket. Vær venlig at planlægge derefter!</post-text>
+                
+                <post-attachments>
+                  <post-pdf-attachment
+                    [fileName]="'Husregler.pdf'"
+                    [fileSize]="'245 KB'"
+                    (pdfClick)="openHouseRulesPdf()">
+                  </post-pdf-attachment>
+                </post-attachments>
+              </post-content>
+              
+              <post-actions>
+                <action-like [count]="89" />
+                <action-comment [count]="67" (commentClick)="openPost('4', true)" />
+              </post-actions>
+            </ds-mobile-interactive-list-item-post>
+          </div>
+          
+          <!-- All Posts Section -->
+          <h2 class="section-headline">Alle opslag</h2>
+          
+          @if (hasAnyPosts()) {
+            <div class="post-list-wrapper">
+              <!-- User Created Posts -->
+              @for (post of userPosts(); track $index) {
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarType]="post.avatarType"
+                  [avatarSrc]="post.avatarSrc"
+                  [avatarInitials]="post.avatarInitials"
+                  [clickable]="true"
+                  (postClick)="openUserPost($index)"
+                  (commentClick)="openUserPost($index, true)"
+                  (longPress)="handlePostLongPress($index, post.authorRole === 'Dig')">
+                  
+                  <post-content>
+                    @if (post.content) {
+                      <post-text>{{ post.content }}</post-text>
+                    }
+                    @if (post.imageSrc) {
+                      <post-media>
+                        <img 
+                          [src]="post.imageSrc" 
+                          [alt]="post.imageAlt || 'Posted image'" 
+                          class="clickable-image"
+                          (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
+                        />
+                      </post-media>
+                    }
+                  </post-content>
+                  
+                  <post-actions>
+                    <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openUserPost($index, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              }
+              
+              <!-- Post 1: Text only -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Anders Jensen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'2t siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('1')"
+                (commentClick)="openPost('1', true)"
+                (longPress)="handlePostLongPress('1', false)">
+                
+                <post-content>
+                  <post-text>Lige flyttet ind i min nye lejlighed! Udlejeren var super hjælpsom gennem hele processen. Virkelig begejstret for at være en del af dette fællesskab! 🏠</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="42" />
+                  <action-comment [count]="12" (commentClick)="openPost('1', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 2: With multiple images (grid layout) -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Sophie Andersen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'4t siden'"
+                [avatarInitials]="'SA'"
+                [clickable]="true"
+                (postClick)="openPost('2')"
+                (commentClick)="openPost('2', true)"
+                (longPress)="handlePostLongPress('2', false)">
+                
+                <post-content>
+                  <post-text>Jeg har taget nogle billeder af vores smukke ejendom i løbet af det sidste par måneder. Fra altanudsigten om morgenen til den nye trappe og fællesområderne. Elsker virkelig at bo her! 🏡✨</post-text>
+                  <ds-mobile-inline-photo
+                    [images]="[
+                      '/Assets/Dummy-photos/balcony-view.jpg',
+                      '/Assets/Dummy-photos/staircase.jpg',
+                      '/Assets/Dummy-photos/park.jpg',
+                      '/Assets/Dummy-photos/yard.jpg'
+                    ]"
+                    [author]="{
+                      name: 'Sophie Andersen',
+                      role: 'Lejer',
+                      avatarInitials: 'SA',
+                      avatarType: 'initials',
+                      timestamp: '4t siden'
+                    }"
+                  />
+                </post-content>
+                
+                <post-actions>
+                  <action-like [active]="true" [count]="156" />
+                  <action-comment [count]="34" (commentClick)="openPost('2', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 3: Question -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Thomas Hansen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'1d siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('3')"
+                (commentClick)="openPost('3', true)"
+                (longPress)="handlePostLongPress('3', false)">
+                
+                <post-content>
+                  <post-text>Kender nogen et fælles fitnesscenter i nærheden? Leder efter anbefalinger til gode træningscentre i området. 🏋️</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="23" />
+                  <action-comment [count]="45" (commentClick)="openPost('3', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 3.5: Property Manager showcase with 6+ photos -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Karen Nielsen'"
+                [authorRole]="'Ejendomsadministrator'"
+                [timestamp]="'2d siden'"
+                [avatarInitials]="'KN'"
+                [showBadge]="true"
+                [clickable]="true"
+                (postClick)="openPost('3.5')"
+                (commentClick)="openPost('3.5', true)"
+                (longPress)="handlePostLongPress('3.5', false)">
+                
+                <post-content>
+                  <post-text>Her er et kig på vores nyligt renoverede fællesområder! Vi har opgraderet postkasserne, trappeafsatsen og gårdområdet. Der er også blevet ansat en ny vicevært. Glæd dig over forbedringerne! 🏢✨</post-text>
+                  <ds-mobile-inline-photo
+                    [images]="[
+                      '/Assets/Dummy-photos/mailboxes.jpg',
+                      '/Assets/Dummy-photos/staircase.jpg',
+                      '/Assets/Dummy-photos/yard.jpg',
+                      '/Assets/Dummy-photos/park.jpg',
+                      '/Assets/Dummy-photos/balcony-view.jpg',
+                      '/Assets/Dummy-photos/handyman.jpg'
+                    ]"
+                    [author]="{
+                      name: 'Karen Nielsen',
+                      role: 'Ejendomsadministrator',
+                      avatarInitials: 'KN',
+                      avatarType: 'initials',
+                      timestamp: '2d siden'
+                    }"
+                    [maxVisible]="5"
+                  />
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="234" />
+                  <action-comment [count]="89" (commentClick)="openPost('3.5', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 5: Event -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Emma Petersen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'3d siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('5')"
+                (commentClick)="openPost('5', true)"
+                (longPress)="handlePostLongPress('5', false)">
+                
+                <post-content>
+                  <post-text>Arrangerer en fælles BBQ næste weekend! Alle er inviteret. Tag din yndlingsret med til at dele. Lad os lære hinanden bedre at kende! 🍔🌭</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [active]="true" [count]="124" />
+                  <action-comment [count]="89" (commentClick)="openPost('5', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+            </div>
+          } @else {
+            <!-- Empty State -->
+            <div class="community-empty-state">
+              <img 
+                src="/Assets/Empty state-chat.png" 
+                alt="Ingen opslag endnu" 
+                class="empty-state-image"
+              />
+              <h3 class="empty-state-title">Ingen opslag endnu</h3>
+              <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
+            </div>
+          }
+        </div>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: DsMobileBottomSheetService }, { type: DsMobileLightboxService }, { type: DsMobilePostDetailModalService }, { type: UserService }] });
+
+class MobileHandbookPageComponent {
+    userService;
+    // Utilities folder data
+    utilitiesItems = [
+        {
+            title: 'El',
+            description: 'Hovedeltavle placeret i kælderrum B-12. Nødafbryderknap er ved hovedindgangen. Alle kredsløb er mærket.',
+            contacts: [
+                { name: 'ElektroTek ApS', initials: 'E', contactPerson: 'Lars Nielsen', phoneNumber: '+45 23 45 67 89' }
+            ]
+        },
+        {
+            title: 'Elektrisk diagram',
+            description: 'Komplet diagram over bygningens elektriske installation med alle kredsløb og afbrydere.',
+            attachments: [
+                { name: 'Elektrisk_Diagram.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Vandforsyning',
+            description: 'Hovedvandhane er placeret i kælderens tekniske rum. Individuelle lejlighedsafspærringer er i gangpanelerne. Vandtryk overvåges automatisk.',
+            contacts: [
+                { name: 'VVS Hansen', initials: 'V', contactPerson: 'Peter Hansen', phoneNumber: '+45 34 56 78 90' }
+            ]
+        },
+        {
+            title: 'Varmesystem',
+            description: 'Fjernvarmetilslutning i kælder. Termostater i hver enhed kan justeres individuelt. Systemet vedligeholdes kvartalsvis af certificerede teknikere.',
+            contacts: [
+                { name: 'Varme Service A/S', initials: 'V', contactPerson: 'Maria Jensen', phoneNumber: '+45 45 67 89 01' }
+            ]
+        },
+        {
+            title: 'Varmeanlæg dokumentation',
+            description: 'Teknisk dokumentation og vedligeholdelseshistorik for bygningens varmesystem.',
+            attachments: [
+                { name: 'Varmeplan.pdf', type: 'pdf' },
+                { name: 'Vedligeholdelseslog.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Internet & TV',
+            description: 'Fiberforbindelse i bygningen. Distributionspanel er i stueetageteknisk rum. Hver lejlighed har ethernet-stik i stue og soveværelser.',
+            contacts: [
+                { name: 'TeleCom Solutions', initials: 'T', contactPerson: 'Anders Petersen', phoneNumber: '+45 56 78 90 12' }
+            ]
+        },
+        {
+            title: 'Netværksopsætning guide',
+            attachments: [
+                { name: 'Netværksopsætning.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Affaldshåndtering',
+            description: 'Affaldssorteringsstation placeret i gården. Afhentninger: Dagrenovation (man/tor), Genbrug (ons), Organisk (tir/fre). Storskrald kræver booking.',
+            attachments: [
+                { name: 'Affaldsretningslinjer.pdf', type: 'pdf' }
+            ]
+        }
+    ];
+    // Safety Equipment folder data
+    sikkerhedsudstyrItems = [
+        {
+            title: 'Fælles områder og sikkerhed',
+            description: 'Trappeopgange med nødbelysning og brandsikre døre. Postkasser placeret i indgangspartiet. Hold altid flugtveje fri.',
+            images: [
+                '/Assets/Dummy-photos/staircase.jpg',
+                '/Assets/Dummy-photos/mailboxes.jpg'
+            ]
+        },
+        {
+            title: 'Hjertestarter (AED)',
+            description: 'Automatisk hjertestarter placeret i stueetagen ved hovedindgangen. Tilgængelig 24/7. Ingen særlig uddannelse kræves - enheden guider dig gennem processen.',
+            contacts: [
+                { name: 'MediTech Service', initials: 'M', contactPerson: 'John Mortensen', phoneNumber: '+45 12 34 56 78' }
+            ]
+        },
+        {
+            title: 'Brandslukningsudstyr',
+            description: 'Brandslukkere placeret på hver etage. Eftersyn udføres årligt. Brandalarm aktiveres automatisk ved røg.',
+            attachments: [
+                { name: 'Brandplan.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Alarmsystem',
+            description: 'Adgangskontrol med kodesystem ved alle indgange. Kode ændres kvartalsvis. Ved indbrud kontakt straks politiet og ejendomsadministrationen.',
+            contacts: [
+                { name: 'SecureHome A/S', initials: 'S', contactPerson: 'Henrik Johansen', phoneNumber: '+45 98 76 54 32' }
+            ]
+        }
+    ];
+    // Service Contracts folder data
+    serviceContractsItems = [
+        {
+            title: 'Rengøringsservice',
+            description: 'Ugentlig rengøring af fællesarealer inklusiv indgangshal, trapper og elevatorer. Hovedrengøring kvartalsvis. Service leveres mandag-fredag, 6:00-9:00.',
+            contacts: [
+                { name: 'CleanCo Denmark', initials: 'C', contactPerson: 'Anne Kristensen', phoneNumber: '+45 89 01 23 45' }
+            ]
+        },
+        {
+            title: 'Rengøringskontrakt',
+            attachments: [
+                { name: 'Rengøringskontrakt_2024.pdf', type: 'pdf' },
+                { name: 'Rengøringsplan.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Udendørs arealer',
+            description: 'Fælles grønne områder med bede, siddepladser og terrasse. Beboere må frit benytte området. Respektér planterne og hold området pænt.',
+            images: [
+                '/Assets/Dummy-photos/park.jpg',
+                '/Assets/Dummy-photos/yard.jpg'
+            ]
+        },
+        {
+            title: 'Havevedligeholdelse',
+            description: 'Professionel havepleje inklusiv plæneklipning, hækklipning og blomsterbedvedligeholdelse. Vintersnefjerning inkluderet.',
+            contacts: [
+                { name: 'Green Gardens ApS', initials: 'G', contactPerson: 'Michael Olsen', phoneNumber: '+45 90 12 34 56' }
+            ]
+        },
+        {
+            title: 'Haveserviceaftale',
+            attachments: [
+                { name: 'Haveserviceaftale.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Vinduespolering',
+            description: 'Professionel vinduespoleringsservice for alle udvendige vinduer to gange årligt - forår og efterår.',
+            contacts: [
+                { name: 'Crystal Clear Windows', initials: 'C', contactPerson: 'Lene Schmidt', phoneNumber: '+45 01 23 45 67' }
+            ]
+        },
+        {
+            title: 'Sikkerhedsservice',
+            description: '24/7 overvågningsservice med alarmrespons. Direkte forbindelse til politi og brandvæsen.',
+            contacts: [
+                { name: 'SecureHome A/S', initials: 'S', contactPerson: 'Henrik Johansen', phoneNumber: '+45 12 34 56 78' }
+            ]
+        },
+        {
+            title: 'Sikkerhedskontrakt og procedurer',
+            attachments: [
+                { name: 'Sikkerhedskontrakt.pdf', type: 'pdf' },
+                { name: 'Nødprocedurer.pdf', type: 'pdf' }
+            ]
+        }
+    ];
+    // Equipment folder data
+    equipmentItems = [
+        {
+            title: 'Balkon udsigt',
+            description: 'Eksempel på udsigt fra øverste etagers balkoner. Flere lejligheder har privat altan med fantastisk udsyn.',
+            images: [
+                '/Assets/Dummy-photos/balcony-view.jpg'
+            ]
+        },
+        {
+            title: 'Vaskerum',
+            description: 'Fælles vaskerum med 4 vaskemaskiner og 4 tørretumblere. Bookingsystem tilgængeligt via beboerportal. Maskiner accepterer betalingskort. Åbningstider: 7:00-22:00.',
+            contacts: [
+                { name: 'WashTech Service', initials: 'W', contactPerson: 'Kirsten Berg', phoneNumber: '+45 34 56 78 90' }
+            ]
+        },
+        {
+            title: 'Vaskeri instruktioner',
+            attachments: [
+                { name: 'Vaskeinstruktioner.pdf', type: 'pdf' },
+                { name: 'Bookingguide.pdf', type: 'pdf' }
+            ]
+        },
+        {
+            title: 'Vedligeholdelse og reparationer',
+            description: 'Ved behov for reparationer eller vedligeholdelse i din lejlighed, kontakt vores hausmeister. Akutte problemer håndteres samme dag.',
+            images: [
+                '/Assets/Dummy-photos/handyman.jpg'
+            ],
+            contacts: [
+                { name: 'Hausmeister Service', initials: 'H', contactPerson: 'Erik Sørensen', phoneNumber: '+45 56 78 90 12' }
+            ]
+        },
+        {
+            title: 'Værktøjsudlån',
+            description: 'Basis håndværktøj tilgængeligt til beboerbrug. Kvittér for værktøj ved receptionen. Returnér inden for 48 timer.',
+            attachments: [
+                { name: 'Værktøjsliste.pdf', type: 'pdf' },
+                { name: 'Udlånspolitik.pdf', type: 'pdf' }
+            ]
+        }
+    ];
+    constructor(userService) {
+        this.userService = userService;
+    }
+    handleRefresh(event) {
+        console.log('Pull-to-refresh triggered');
+        setTimeout(() => {
+            console.log('Refresh complete');
+            event.target.complete();
+        }, 1000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileHandbookPageComponent, deps: [{ token: UserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MobileHandbookPageComponent, isStandalone: true, selector: "app-mobile-handbook-page", ngImport: i0, template: `
+    <ds-mobile-page-main
+      title="Håndbog"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <ds-mobile-content>
+        <ds-mobile-content-section>
+          <div class="folders-grid">
+            <ds-mobile-handbook-folder
+              [variant]="'pink'"
+              [iconName]="'remixLightbulbLine'"
+              [itemCount]="8"
+              [label]="'Forsyninger'"
+              [items]="utilitiesItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'success'"
+              [iconName]="'remixKey2Line'"
+              [itemCount]="4"
+              [label]="'Sikkerhedsudstyr'"
+              [items]="sikkerhedsudstyrItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'blue'"
+              [iconName]="'remixFileList3Line'"
+              [itemCount]="8"
+              [label]="'Servicekontrakter'"
+              [items]="serviceContractsItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'warning'"
+              [iconName]="'remixToolsLine'"
+              [itemCount]="5"
+              [label]="'Udstyr'"
+              [items]="equipmentItems">
+            </ds-mobile-handbook-folder>
+          </div>
+        </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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileHandbookPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mobile-handbook-page', standalone: true, imports: [
+                        DsMobilePageMainComponent,
+                        DsMobileContentComponent,
+                        DsMobileContentSectionComponent,
+                        SectionHeaderComponent,
+                        ContentRowComponent,
+                        DsMobileHandbookFolderComponent
+                    ], template: `
+    <ds-mobile-page-main
+      title="Håndbog"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <ds-mobile-content>
+        <ds-mobile-content-section>
+          <div class="folders-grid">
+            <ds-mobile-handbook-folder
+              [variant]="'pink'"
+              [iconName]="'remixLightbulbLine'"
+              [itemCount]="8"
+              [label]="'Forsyninger'"
+              [items]="utilitiesItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'success'"
+              [iconName]="'remixKey2Line'"
+              [itemCount]="4"
+              [label]="'Sikkerhedsudstyr'"
+              [items]="sikkerhedsudstyrItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'blue'"
+              [iconName]="'remixFileList3Line'"
+              [itemCount]="8"
+              [label]="'Servicekontrakter'"
+              [items]="serviceContractsItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'warning'"
+              [iconName]="'remixToolsLine'"
+              [itemCount]="5"
+              [label]="'Udstyr'"
+              [items]="equipmentItems">
+            </ds-mobile-handbook-folder>
+          </div>
+        </ds-mobile-content-section>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: UserService }] });
+
+class MobileHomePageComponent {
+    navCtrl;
+    userService;
+    constructor(navCtrl, userService) {
+        this.navCtrl = navCtrl;
+        this.userService = userService;
+        console.log('MobileHomePageComponent constructor');
+    }
+    handleRefresh(event) {
+        console.log('Pull-to-refresh triggered');
+        setTimeout(() => {
+            console.log('Refresh complete');
+            event.target.complete();
+        }, 1000);
+    }
+    navigateToDetail() {
+        // Navigation removed - home/detail page was deleted
+        console.log('Navigate to detail (page removed)');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1.NavController }, { token: UserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MobileHomePageComponent, isStandalone: true, selector: "app-home-page", ngImport: i0, template: `
+    <ds-mobile-page-main
+      title="Hjem"
+      headerTitle="Velkommen, Lars"
+      headerSubtitle="Din lejebolig på et øjeblik."
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Property info tiles in header -->
+      <ds-mobile-header-content header-content>
+        <ds-mobile-header-content-tile>
+          <tile-icon>
+              <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
+          </tile-icon>
+          <tile-content>
+            <tile-label>Areal</tile-label>
+            <tile-value>120 m²</tile-value>
+          </tile-content>
+        </ds-mobile-header-content-tile>
+
+        <ds-mobile-header-content-tile>
+          <tile-icon>
+              <ds-icon name="remixCollageLine" size="20px" color="#DFE4FF" />
+          </tile-icon>
+          <tile-content>
+            <tile-label>Værelser</tile-label>
+            <tile-value>3 værelser</tile-value>
+          </tile-content>
+        </ds-mobile-header-content-tile>
+      </ds-mobile-header-content>
+      
+      <!-- Main page content -->
+      <ds-mobile-content>
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <!-- Purple box - clickable with brand background -->
+        <content-row>
+          <div class="grey-box clickable" (click)="navigateToDetail()"></div>
+        </content-row>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileHomePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-home-page', standalone: true, imports: [
+                        DsIconComponent,
+                        DsMobilePageMainComponent,
+                        DsMobileHeaderContentComponent,
+                        DsMobileHeaderContentTileComponent,
+                        TileIconComponent,
+                        TileContentComponent,
+                        TileLabelComponent,
+                        TileValueComponent,
+                        DsMobileContentComponent,
+                        DsMobileContentSectionComponent,
+                        SectionHeaderComponent,
+                        ContentRowComponent
+                    ], template: `
+    <ds-mobile-page-main
+      title="Hjem"
+      headerTitle="Velkommen, Lars"
+      headerSubtitle="Din lejebolig på et øjeblik."
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Property info tiles in header -->
+      <ds-mobile-header-content header-content>
+        <ds-mobile-header-content-tile>
+          <tile-icon>
+              <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
+          </tile-icon>
+          <tile-content>
+            <tile-label>Areal</tile-label>
+            <tile-value>120 m²</tile-value>
+          </tile-content>
+        </ds-mobile-header-content-tile>
+
+        <ds-mobile-header-content-tile>
+          <tile-icon>
+              <ds-icon name="remixCollageLine" size="20px" color="#DFE4FF" />
+          </tile-icon>
+          <tile-content>
+            <tile-label>Værelser</tile-label>
+            <tile-value>3 værelser</tile-value>
+          </tile-content>
+        </ds-mobile-header-content-tile>
+      </ds-mobile-header-content>
+      
+      <!-- Main page content -->
+      <ds-mobile-content>
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <!-- Purple box - clickable with brand background -->
+        <content-row>
+          <div class="grey-box clickable" (click)="navigateToDetail()"></div>
+        </content-row>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: i1.NavController }, { type: UserService }] });
+
+/**
+ * Custom page transition - iOS-style push/pop
+ *
+ * FORWARD (navigating TO detail):
+ * - Entering page (detail): slides in from RIGHT, z-index 10 (on top)
+ * - Leaving page (list): slides LEFT slightly, z-index 9 (underneath)
+ *
+ * REVERSE (swipe back FROM detail):
+ * - Entering page (list): slides in from LEFT, z-index 9 (underneath)
+ * - Leaving page (detail): slides out to RIGHT, z-index 10 (on top)
+ */
+const customPageTransition = (_, opts) => {
+    const DURATION = 400;
+    const isBackDirection = opts.direction === 'back';
+    const rootTransition = createAnimation()
+        .duration(opts.duration || DURATION)
+        .easing('cubic-bezier(0.32,0.72,0,1)');
+    // Entering page animation
+    const enteringPage = createAnimation()
+        .addElement(opts.enteringEl)
+        .beforeRemoveClass('ion-page-invisible')
+        .beforeStyles({
+        'z-index': isBackDirection ? '9' : '10',
+        'opacity': '1'
+    })
+        .fromTo('transform', isBackDirection ? 'translateX(-20%)' : 'translateX(100%)', 'translateX(0)');
+    // Leaving page animation
+    const leavingPage = createAnimation()
+        .addElement(opts.leavingEl)
+        .beforeStyles({
+        'z-index': isBackDirection ? '10' : '9'
+    })
+        .fromTo('transform', 'translateX(0)', isBackDirection ? 'translateX(100%)' : 'translateX(-20%)');
+    rootTransition.addAnimation([enteringPage, leavingPage]);
+    return rootTransition;
+};
+/**
+ * Custom back transition - iOS style where page slides out to reveal page underneath
+ * The entering page (inquiries) slides in from the LEFT underneath
+ * The leaving page (detail) slides out to the RIGHT on top
+ */
+const customBackTransition = (_, opts) => {
+    const DURATION = 400;
+    const rootTransition = createAnimation()
+        .duration(opts.duration || DURATION)
+        .easing('cubic-bezier(0.32,0.72,0,1)');
+    // Entering page: underneath, sliding in from LEFT (-20% to 0)
+    const enteringPage = createAnimation()
+        .addElement(opts.enteringEl)
+        .beforeRemoveClass('ion-page-invisible')
+        .beforeStyles({
+        'z-index': '9',
+        'opacity': '1'
+    })
+        .fromTo('transform', 'translateX(-20%)', 'translateX(0)');
+    // Leaving page: on top, sliding out to the RIGHT (0 to 100%)
+    const leavingPage = createAnimation()
+        .addElement(opts.leavingEl)
+        .beforeStyles({
+        'z-index': '10',
+    })
+        .fromTo('transform', 'translateX(0)', 'translateX(100%)');
+    rootTransition.addAnimation([enteringPage, leavingPage]);
+    return rootTransition;
+};
+
+/**
+ * DsMobileTabBarComponent
+ *
+ * Pill-style tab bar for filtering/switching views
+ * Used in the purple header section of pages
+ *
+ * @example
+ * ```html
+ * <ds-mobile-tab-bar
+ *   [tabs]="[
+ *     { id: 'all', label: 'All' },
+ *     { id: 'open', label: 'Open' },
+ *     { id: 'closed', label: 'Closed' }
+ *   ]"
+ *   [activeTab]="'all'"
+ *   (tabChange)="handleTabChange($event)">
+ * </ds-mobile-tab-bar>
+ * ```
+ */
+class DsMobileTabBarComponent {
+    /**
+     * Array of tab items to display
+     */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /**
+     * Currently active tab ID
+     */
+    activeTab = input.required(...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /**
+     * Emitted when a tab is clicked
+     */
+    tabChange = output();
+    handleTabClick(tabId) {
+        this.tabChange.emit(tabId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: `
+    <div class="filter-tabs">
+      @for (tab of tabs(); track tab.id) {
+        <button 
+          class="filter-tab"
+          [class.active]="activeTab() === tab.id"
+          (click)="handleTabClick(tab.id)"
+          [attr.aria-label]="tab.label"
+          [attr.aria-selected]="activeTab() === tab.id">
+          {{ tab.label }}
+          @if (tab.badge && tab.badge > 0) {
+            <span class="tab-badge">{{ tab.badge }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:#fff9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-background-brand, #5d5fef);color:#fff}.filter-tab:hover:not(.active){background:#ffffff1a}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:#fff3;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:#ffffff4d;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule], template: `
+    <div class="filter-tabs">
+      @for (tab of tabs(); track tab.id) {
+        <button 
+          class="filter-tab"
+          [class.active]="activeTab() === tab.id"
+          (click)="handleTabClick(tab.id)"
+          [attr.aria-label]="tab.label"
+          [attr.aria-selected]="activeTab() === tab.id">
+          {{ tab.label }}
+          @if (tab.badge && tab.badge > 0) {
+            <span class="tab-badge">{{ tab.badge }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:#fff9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-background-brand, #5d5fef);color:#fff}.filter-tab:hover:not(.active){background:#ffffff1a}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:#fff3;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:#ffffff4d;color:#fff}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+
+class MobileInquiriesPageComponent {
+    userService;
+    navCtrl;
+    constructor(userService, navCtrl) {
+        this.userService = userService;
+        this.navCtrl = navCtrl;
+    }
+    filterStatus = signal('all', ...(ngDevMode ? [{ debugName: "filterStatus" }] : []));
+    tabItems = [
+        { id: 'all', label: 'Alle' },
+        { id: 'open', label: 'Åben' },
+        { id: 'closed', label: 'Lukket' }
+    ];
+    inquiries = signal([
+        {
+            id: '1',
+            title: 'Tørretumbler virker ikke',
+            description: 'I de sidste tre dage har jeg oplevet vedvarende problemer med tørretumbleren. Den starter, men stopper efter få minutter.',
+            status: 'open',
+            timestamp: '12 dage siden',
+            category: 'appliance'
+        },
+        {
+            id: '2',
+            title: 'Problem med vandtryk',
+            description: 'Lavt vandtryk i badeværelseshåndvasken. Det er blevet gradvist værre i løbet af den sidste uge.',
+            status: 'open',
+            timestamp: '5 dage siden',
+            category: 'plumbing'
+        },
+        {
+            id: '3',
+            title: 'Varme virker ikke ordentligt',
+            description: 'Varmesystemet holder ikke den indstillede temperatur. Lejligheden er meget koldere, end den burde være.',
+            status: 'closed',
+            timestamp: '2 måneder siden',
+            category: 'heating'
+        }
+    ], ...(ngDevMode ? [{ debugName: "inquiries" }] : []));
+    // Computed signals that automatically update when dependencies change
+    filteredInquiries = computed(() => {
+        const all = this.inquiries();
+        const status = this.filterStatus();
+        if (status === 'all') {
+            return all;
+        }
+        else if (status === 'open') {
+            return all.filter(i => i.status === 'open');
+        }
+        else {
+            return all.filter(i => i.status === 'closed');
+        }
+    }, ...(ngDevMode ? [{ debugName: "filteredInquiries" }] : []));
+    openInquiries = computed(() => {
+        return this.inquiries().filter(i => i.status === 'open');
+    }, ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
+    closedInquiries = computed(() => {
+        return this.inquiries().filter(i => i.status === 'closed');
+    }, ...(ngDevMode ? [{ debugName: "closedInquiries" }] : []));
+    setFilter(status) {
+        this.filterStatus.set(status);
+    }
+    getInquiryIcon(category) {
+        return 'remixTodoLine';
+    }
+    openInquiryDetail(inquiryId) {
+        console.log('Opening inquiry:', inquiryId);
+        // Navigate to inquiry detail page with custom transition (absolute path outside tabs for animations)
+        this.navCtrl.navigateForward([`/inquiry-detail/${inquiryId}`], {
+            animation: customPageTransition
+        });
+    }
+    showInquiryActions(inquiryId) {
+        console.log('Showing actions for inquiry:', inquiryId);
+        // Show bottom sheet with actions (edit, delete, etc.)
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiriesPageComponent, deps: [{ token: UserService }, { token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MobileInquiriesPageComponent, isStandalone: true, selector: "app-mobile-inquiries-page", host: { classAttribute: "ion-page" }, ngImport: i0, template: `
+    <ds-mobile-page-main
+      title="Henvendelser"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()">
+      
+      <!-- Filter tabs in header -->
+      <div header-content>
+        <ds-mobile-tab-bar
+          [tabs]="tabItems"
+          [activeTab]="filterStatus()"
+          (tabChange)="setFilter($any($event))">
+        </ds-mobile-tab-bar>
+      </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>
+  `, 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: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileInquiriesPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mobile-inquiries-page', standalone: true, imports: [
+                        DsMobilePageMainComponent,
+                        DsMobileContentComponent,
+                        DsMobileInteractiveListItemInquiryComponent,
+                        DsIconComponent,
+                        DsMobileTabBarComponent
+                    ], host: {
+                        class: 'ion-page'
+                    }, template: `
+    <ds-mobile-page-main
+      title="Henvendelser"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()">
+      
+      <!-- Filter tabs in header -->
+      <div header-content>
+        <ds-mobile-tab-bar
+          [tabs]="tabItems"
+          [activeTab]="filterStatus()"
+          (tabChange)="setFilter($any($event))">
+        </ds-mobile-tab-bar>
+      </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 }] });
+
+/**
+ * DsMobileListItemStaticComponent
+ *
+ * A read-only version of the interactive list item component.
+ * Used for displaying static information without interaction.
+ *
+ * This component has the same structure as the interactive list item but without:
+ * - Padding
+ * - Rounded corners
+ * - Hover states
+ * - Click interactions
+ * - Background fill (transparent)
+ *
+ * @example
+ * ```html
+ * <ds-mobile-list-item-static
+ *   [leadingSize]="'40px'">
+ *
+ *   <div content-leading>
+ *     <ds-avatar initials="JD" />
+ *   </div>
+ *
+ *   <div content-main>
+ *     <h3>Main Content</h3>
+ *     <p>Supporting text goes here...</p>
+ *   </div>
+ *
+ *   <div content-trailing>
+ *     <span>Info</span>
+ *   </div>
+ * </ds-mobile-list-item-static>
+ * ```
+ */
+class DsMobileListItemStaticComponent {
+    /**
+     * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
+     * Defaults to '32px' for standard list item avatars
+     */
+    leadingSize = input('32px', ...(ngDevMode ? [{ debugName: "leadingSize" }] : []));
+    /**
+     * Check if leading content slot has content
+     */
+    hasLeadingContent = computed(() => true, ...(ngDevMode ? [{ debugName: "hasLeadingContent" }] : [])); // Always render slot container for consistency
+    /**
+     * Check if trailing content slot has content
+     */
+    hasTrailingContent = computed(() => true, ...(ngDevMode ? [{ debugName: "hasTrailingContent" }] : [])); // Always render slot container for consistency
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileListItemStaticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobileListItemStaticComponent, isStandalone: true, selector: "ds-mobile-list-item-static", inputs: { leadingSize: { classPropertyName: "leadingSize", publicName: "leadingSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--leading-size": "leadingSize()" } }, ngImport: i0, template: `
+    @if (hasLeadingContent()) {
+      <div class="content-leading">
+        <ng-content select="[content-leading]" />
+      </div>
+    }
+    
+    <div class="content-main">
+      <ng-content select="[content-main]" />
+      <ng-content />
+    </div>
+    
+    @if (hasTrailingContent()) {
+      <div class="content-trailing">
+        <ng-content select="[content-trailing]" />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:row;align-items:flex-start;background:transparent;padding:0;gap:12px;position:relative;--leading-size: 32px}:host:after{content:\"\";position:absolute;bottom:-10px;left:calc(var(--leading-size) + 12px);right:0;height:1px;background:var(--border-color-default)}:host:last-child:after{display:none}.content-leading{flex-shrink:0;width:var(--leading-size);min-height:var(--leading-size);height:auto;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;min-height:var(--leading-size);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileListItemStaticComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-list-item-static', standalone: true, imports: [CommonModule], host: {
+                        '[style.--leading-size]': 'leadingSize()'
+                    }, template: `
+    @if (hasLeadingContent()) {
+      <div class="content-leading">
+        <ng-content select="[content-leading]" />
+      </div>
+    }
+    
+    <div class="content-main">
+      <ng-content select="[content-main]" />
+      <ng-content />
+    </div>
+    
+    @if (hasTrailingContent()) {
+      <div class="content-trailing">
+        <ng-content select="[content-trailing]" />
+      </div>
+    }
+  `, styles: [":host{display:flex;flex-direction:row;align-items:flex-start;background:transparent;padding:0;gap:12px;position:relative;--leading-size: 32px}:host:after{content:\"\";position:absolute;bottom:-10px;left:calc(var(--leading-size) + 12px);right:0;height:1px;background:var(--border-color-default)}:host:last-child:after{display:none}.content-leading{flex-shrink:0;width:var(--leading-size);min-height:var(--leading-size);height:auto;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;min-height:var(--leading-size);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start}\n"] }]
+        }], propDecorators: { leadingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingSize", required: false }] }] } });
+
+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="chevron-down-circle-outline"
+            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-tab-bar
+            [tabs]="tabItems"
+            [activeTab]="activeTab()"
+            (tabChange)="setActiveTab($event)">
+          </ds-mobile-tab-bar>
+        </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:#fff;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}.header-expandable__title{font-family:Brockmann,sans-serif;font-size:var(--font-size-2xl);font-weight:600;line-height:1.2;letter-spacing:-.5px;margin:0;color:#fff}@media (min-width: 768px){.header-expandable{padding:40px var(--content-padding-md) 32px var(--content-padding-md)}.header-expandable__title{font-size:var(--font-size-3xl)}}@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: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", 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,
+                        DsMobileTabBarComponent,
+                        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="chevron-down-circle-outline"
+            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-tab-bar
+            [tabs]="tabItems"
+            [activeTab]="activeTab()"
+            (tabChange)="setActiveTab($event)">
+          </ds-mobile-tab-bar>
+        </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:#fff;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}.header-expandable__title{font-family:Brockmann,sans-serif;font-size:var(--font-size-2xl);font-weight:600;line-height:1.2;letter-spacing:-.5px;margin:0;color:#fff}@media (min-width: 768px){.header-expandable{padding:40px var(--content-padding-md) 32px var(--content-padding-md)}.header-expandable__title{font-size:var(--font-size-3xl)}}@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]
+            }] } });
+
+/**
+ * DsMobileTabsComponent
+ *
+ * Responsive tab navigation that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
+ *
+ * Wraps ion-tabs to maintain native routing functionality while
+ * providing a responsive navigation experience with branding.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-tabs
+ *   [tabs]="tabsConfig"
+ *   [avatarInitials]="'JD'"
+ *   (avatarClick)="handleAvatarClick()"
+ * />
+ * ```
+ */
+class DsMobileTabsComponent {
+    elementRef;
+    platformId = inject(PLATFORM_ID);
+    resizeListener;
+    mutationObserver;
+    // Inputs
+    tabs = [];
+    // Avatar inputs
+    avatarType = 'initials';
+    avatarInitials = 'U';
+    avatarSrc = '';
+    avatarIconName = 'remixUser3Line';
+    // Outputs
+    avatarClick = new EventEmitter();
+    // Internal state
+    activeTab = signal('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    isDesktop = signal(false, ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        console.log('DsMobileTabsComponent initialized');
+        // Only run breakpoint detection in browser
+        if (isPlatformBrowser(this.platformId)) {
+            // Initial check
+            this.checkBreakpoint();
+            // Listen for window resize
+            this.resizeListener = () => this.checkBreakpoint();
+            window.addEventListener('resize', this.resizeListener);
+        }
+    }
+    ngAfterViewInit() {
+        // Initial removal
+        this.removeTitleAttributes();
+        // Set up mutation observer to continuously remove title attributes
+        this.setupTitleRemovalObserver();
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId) && this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    setupTitleRemovalObserver() {
+        const config = {
+            attributes: true,
+            attributeFilter: ['title'],
+            subtree: true,
+            childList: true
+        };
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
+                    const target = mutation.target;
+                    if (target.tagName === 'ION-TAB-BUTTON' && target.hasAttribute('title')) {
+                        target.removeAttribute('title');
+                    }
+                }
+            });
+            // Also do a sweep after any changes
+            this.removeTitleAttributes();
+        });
+        this.mutationObserver.observe(this.elementRef.nativeElement, config);
+    }
+    removeTitleAttributes() {
+        const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
+        tabButtons.forEach((button) => {
+            if (button.hasAttribute('title')) {
+                button.removeAttribute('title');
+            }
+            // Also remove from the native button inside shadow DOM
+            const nativeButton = button.shadowRoot?.querySelector('button');
+            if (nativeButton?.hasAttribute('title')) {
+                nativeButton.removeAttribute('title');
+            }
+        });
+    }
+    checkBreakpoint() {
+        // 768px matches the @media (min-width: 768px) in CSS
+        this.isDesktop.set(window.innerWidth >= 768);
+    }
+    trackByTabId(index, tab) {
+        return tab.id;
+    }
+    isTabActive(tabId) {
+        return this.activeTab() === tabId;
+    }
+    handleAvatarClick() {
+        this.avatarClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DsMobileTabsComponent, isStandalone: true, selector: "ds-mobile-tabs", inputs: { tabs: "tabs", avatarType: "avatarType", avatarInitials: "avatarInitials", avatarSrc: "avatarSrc", avatarIconName: "avatarIconName" }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: `
+    <ion-tabs>
+      <ion-tab-bar 
+        [attr.slot]="isDesktop() ? 'top' : 'bottom'" 
+        class="ds-tab-bar"
+        [class.ds-tab-bar--desktop]="isDesktop()">
+        
+        <!-- Logo (desktop only, positioned via CSS) -->
+        <div class="ds-tab-bar__logo">
+          <svg class="logomark" width="32" height="28" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <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>
+        
+        <!-- Tab buttons container -->
+        <div class="ds-tab-bar__tabs" *ngIf="tabs">
+          <ion-tab-button 
+            *ngFor="let tab of tabs; trackBy: trackByTabId"
+            [tab]="tab.id"
+            [attr.data-icon]="tab.icon"
+            [attr.data-icon-active]="tab.iconActive"
+            [attr.aria-label]="tab.label"
+            class="ds-tab-button ion-activatable"
+            [class.tab-selected]="isTabActive(tab.id)">
+            <div class="tab-icon-ripple"></div>
+            <div class="tab-icon-wrapper">
+              <ds-icon 
+                [name]="tab.icon"
+                [size]="isDesktop() ? '20px' : '24px'"
+                class="tab-icon-inactive"
+              />
+              <ds-icon 
+                [name]="tab.iconActive"
+                [size]="isDesktop() ? '20px' : '24px'"
+                class="tab-icon-active"
+              />
+            </div>
+            <ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
+          </ion-tab-button>
+        </div>
+        
+        <!-- Avatar (desktop only, positioned via CSS) -->
+        <div class="ds-tab-bar__actions">
+          <ds-avatar
+            [initials]="avatarInitials"
+            [type]="avatarType"
+            [src]="avatarSrc"
+            [iconName]="avatarIconName"
+            (click)="handleAvatarClick()"
+            style="cursor: pointer;"
+          />
+        </div>
+      </ion-tab-bar>
+    </ion-tabs>
+  `, isInline: true, styles: [":host{display:block;height:100vh;height:100dvh}ion-tabs{height:100%;background:var(--color-brand-secondary)}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:calc(var(--ion-safe-area-bottom, 34px) - 4px)}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){ion-tabs:has(ds-mobile-page-details) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){ion-tab-bar[slot=top]{--background: var(--color-brand-secondary);position:relative;display:flex;align-items:center;padding:12px 24px;height:64px;max-width:none}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-brand-base);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-brand-base);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-brand-base);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:auto;flex:0 0 auto;--color: rgba(255, 255, 255, .7);--color-selected: white;background:#ffffff1a;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover{--color: white;--color-selected: white}.ds-tab-button.tab-selected{background:var(--color-background-brand);--color-selected: white}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:#ffffff4d;border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobileTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-tabs', standalone: true, imports: [
+                        CommonModule,
+                        IonTabs,
+                        IonTabBar,
+                        IonTabButton,
+                        IonLabel,
+                        DsIconComponent,
+                        DsAvatarComponent
+                    ], template: `
+    <ion-tabs>
+      <ion-tab-bar 
+        [attr.slot]="isDesktop() ? 'top' : 'bottom'" 
+        class="ds-tab-bar"
+        [class.ds-tab-bar--desktop]="isDesktop()">
+        
+        <!-- Logo (desktop only, positioned via CSS) -->
+        <div class="ds-tab-bar__logo">
+          <svg class="logomark" width="32" height="28" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <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>
+        
+        <!-- Tab buttons container -->
+        <div class="ds-tab-bar__tabs" *ngIf="tabs">
+          <ion-tab-button 
+            *ngFor="let tab of tabs; trackBy: trackByTabId"
+            [tab]="tab.id"
+            [attr.data-icon]="tab.icon"
+            [attr.data-icon-active]="tab.iconActive"
+            [attr.aria-label]="tab.label"
+            class="ds-tab-button ion-activatable"
+            [class.tab-selected]="isTabActive(tab.id)">
+            <div class="tab-icon-ripple"></div>
+            <div class="tab-icon-wrapper">
+              <ds-icon 
+                [name]="tab.icon"
+                [size]="isDesktop() ? '20px' : '24px'"
+                class="tab-icon-inactive"
+              />
+              <ds-icon 
+                [name]="tab.iconActive"
+                [size]="isDesktop() ? '20px' : '24px'"
+                class="tab-icon-active"
+              />
+            </div>
+            <ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
+          </ion-tab-button>
+        </div>
+        
+        <!-- Avatar (desktop only, positioned via CSS) -->
+        <div class="ds-tab-bar__actions">
+          <ds-avatar
+            [initials]="avatarInitials"
+            [type]="avatarType"
+            [src]="avatarSrc"
+            [iconName]="avatarIconName"
+            (click)="handleAvatarClick()"
+            style="cursor: pointer;"
+          />
+        </div>
+      </ion-tab-bar>
+    </ion-tabs>
+  `, styles: [":host{display:block;height:100vh;height:100dvh}ion-tabs{height:100%;background:var(--color-brand-secondary)}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:calc(var(--ion-safe-area-bottom, 34px) - 4px)}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){ion-tabs:has(ds-mobile-page-details) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){ion-tab-bar[slot=top]{--background: var(--color-brand-secondary);position:relative;display:flex;align-items:center;padding:12px 24px;height:64px;max-width:none}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-brand-base);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-brand-base);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-brand-base);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:auto;flex:0 0 auto;--color: rgba(255, 255, 255, .7);--color-selected: white;background:#ffffff1a;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover{--color: white;--color-selected: white}.ds-tab-button.tab-selected{background:var(--color-background-brand);--color-selected: white}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:#ffffff4d;border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabs: [{
+                type: Input
+            }], avatarType: [{
+                type: Input
+            }], avatarInitials: [{
+                type: Input
+            }], avatarSrc: [{
+                type: Input
+            }], avatarIconName: [{
+                type: Input
+            }], avatarClick: [{
+                type: Output
+            }] } });
+
+class MobileTabsExampleComponent {
+    userService;
+    modalController;
+    router;
+    constructor(userService, modalController, router) {
+        this.userService = userService;
+        this.modalController = modalController;
+        this.router = router;
+        console.log('MobileTabsExampleComponent constructor');
+    }
+    ngOnInit() {
+        console.log('MobileTabsExampleComponent ngOnInit');
+        // Configure user avatar globally - this is now the single source of truth
+        this.userService.setAvatarInitials('LM');
+        this.userService.setAvatarType('initials');
+    }
+    tabs = [
+        {
+            id: 'home',
+            label: 'Hjem',
+            route: 'home',
+            icon: 'remixHomeSmile2Line',
+            iconActive: 'remixHomeSmile2Fill'
+        },
+        {
+            id: 'inquiries',
+            label: 'Henvendelser',
+            route: 'inquiries',
+            icon: 'remixFileList3Line',
+            iconActive: 'remixFileList3Fill'
+        },
+        {
+            id: 'announcements',
+            label: 'Fællesskab',
+            route: 'announcements',
+            icon: 'remixCommunityLine',
+            iconActive: 'remixCommunityFill'
+        },
+        {
+            id: 'handbook',
+            label: 'Håndbog',
+            route: 'handbook',
+            icon: 'remixBook2Line',
+            iconActive: 'remixBook2Fill'
+        }
+    ];
+    async handleAvatarClick() {
+        console.log('Avatar clicked - opening profile bottom sheet');
+        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('Opening whitelabel demo...');
+                    this.router.navigate(['/whitelabel-demo']);
+                    break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileTabsExampleComponent, deps: [{ token: UserService }, { token: i1.ModalController }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MobileTabsExampleComponent, isStandalone: true, selector: "app-mobile-tabs-example", ngImport: i0, template: `
+      <ds-mobile-tabs
+        [tabs]="tabs"
+        [avatarInitials]="userService.avatarInitials()"
+        (avatarClick)="handleAvatarClick()"
+      />
+  `, isInline: true, styles: [":host{display:block;height:100vh;width:100vw;position:relative}\n"], dependencies: [{ kind: "component", type: DsMobileTabsComponent, selector: "ds-mobile-tabs", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName"], outputs: ["avatarClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobileTabsExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mobile-tabs-example', standalone: true, imports: [DsMobileTabsComponent], template: `
+      <ds-mobile-tabs
+        [tabs]="tabs"
+        [avatarInitials]="userService.avatarInitials()"
+        (avatarClick)="handleAvatarClick()"
+      />
+  `, styles: [":host{display:block;height:100vh;width:100vw;position:relative}\n"] }]
+        }], ctorParameters: () => [{ type: UserService }, { type: i1.ModalController }, { type: i1$1.Router }] });
+
+/**
+ * PostCreatePageComponent
+ *
+ * Full-screen detail page for creating new posts in the community feed.
+ * Features Threads-inspired interface with rich text editing capabilities.
+ */
+class PostCreatePageComponent {
+    router;
+    route;
+    userService;
+    textareaInput;
+    postContent = '';
+    username = signal('Lars Mikkelsen', ...(ngDevMode ? [{ debugName: "username" }] : []));
+    placeholder = signal("What's new?", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    // Edit mode state
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    postId = signal(null, ...(ngDevMode ? [{ debugName: "postId" }] : []));
+    pageTitle = signal('New post', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
+    submitButtonLabel = signal('Post', ...(ngDevMode ? [{ debugName: "submitButtonLabel" }] : []));
+    constructor(router, route, userService) {
+        this.router = router;
+        this.route = route;
+        this.userService = userService;
+    }
+    ngOnInit() {
+        // Check for edit mode via query parameters
+        this.route.queryParams.subscribe(params => {
+            const editMode = params['edit'] === 'true';
+            const postId = params['id'];
+            const content = params['content'];
+            if (editMode && postId) {
+                this.isEditMode.set(true);
+                this.postId.set(postId);
+                this.pageTitle.set('Edit post');
+                this.submitButtonLabel.set('Save');
+                // Prefill content if provided
+                if (content) {
+                    this.postContent = decodeURIComponent(content);
+                }
+            }
+            else {
+                // Reset to create mode
+                this.isEditMode.set(false);
+                this.postId.set(null);
+                this.pageTitle.set('New post');
+                this.submitButtonLabel.set('Post');
+                this.postContent = '';
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Focus the textarea after view initialization to trigger keyboard on mobile
+        setTimeout(() => {
+            this.textareaInput?.nativeElement.focus();
+        }, 300);
+    }
+    handleInput() {
+        // Handle text input changes
+    }
+    canPost() {
+        return this.postContent.trim().length > 0;
+    }
+    handleCancel() {
+        if (this.postContent.trim().length > 0) {
+            // Show confirmation dialog
+            const confirmed = confirm('Discard this post?');
+            if (confirmed) {
+                this.router.navigate(['/mobile-tabs-example/community']);
+            }
+        }
+        else {
+            this.router.navigate(['/mobile-tabs-example/community']);
+        }
+    }
+    handlePost() {
+        if (!this.canPost())
+            return;
+        if (this.isEditMode()) {
+            console.log('Updating post:', this.postId(), this.postContent);
+            // TODO: Implement post update logic
+            // this.postService.updatePost(this.postId(), this.postContent).subscribe(() => {
+            //   this.router.navigate(['/mobile-tabs-example/community']);
+            // });
+        }
+        else {
+            console.log('Creating post:', this.postContent);
+            // TODO: Implement post creation logic
+            // this.postService.createPost(this.postContent).subscribe(() => {
+            //   this.router.navigate(['/mobile-tabs-example/community']);
+            // });
+        }
+        // For now, just navigate back
+        this.router.navigate(['/mobile-tabs-example/community']);
+    }
+    handleAddImage() {
+        console.log('Add image');
+        // TODO: Open image picker
+    }
+    handleAddEmoji() {
+        console.log('Add emoji');
+        // TODO: Open emoji picker
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PostCreatePageComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: UserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PostCreatePageComponent, isStandalone: true, selector: "app-post-create-page", viewQueries: [{ propertyName: "textareaInput", first: true, predicate: ["textareaInput"], descendants: true }], ngImport: i0, template: `
+    <ds-mobile-page-details
+      [title]="pageTitle()"
+      [backRoute]="'/mobile-tabs-example/announcements'"
+      (back)="handleCancel()">
+      
+      <div class="post-create-container">
+        <div class="post-composer">
+          <div class="post-composer__avatar">
+            <ds-avatar 
+              [initials]="userService.avatarInitials()"
+              [type]="userService.avatarType()"
+              [src]="userService.avatarSrc()"
+              size="md" />
+          </div>
+          
+          <div class="post-composer__main">
+            <div class="post-composer__header">
+              <span class="post-composer__username">{{ username() }}</span>
+            </div>
+            
+            <textarea
+              #textareaInput
+              class="post-composer__textarea"
+              [(ngModel)]="postContent"
+              [placeholder]="placeholder()"
+              (input)="handleInput()">
+            </textarea>
+            
+            <div class="post-composer__actions">
+              <div class="post-composer__action-btns">
+                <button class="post-composer__action-btn" (click)="handleAddImage()">
+                  <ds-icon name="remixImageLine" size="22px" />
+                </button>
+                <button class="post-composer__action-btn" (click)="handleAddEmoji()">
+                  <ds-icon name="remixEmotionLine" size="22px" />
+                </button>
+              </div>
+              
+              <ds-button
+                variant="primary"
+                size="md"
+                [disabled]="!canPost()"
+                (clicked)="handlePost()">
+                {{ submitButtonLabel() }}
+              </ds-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ds-mobile-page-details>
+  `, isInline: true, styles: [".post-create-container{display:flex;flex-direction:column;height:100%;max-width:640px}.content{flex:1;overflow-y:auto;padding:16px}.post-composer{display:flex;gap:12px;margin-bottom:24px;align-items:flex-start}.post-composer__avatar{flex-shrink:0;padding-top:2px}.post-composer__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.post-composer__header{display:flex;align-items:center;gap:8px;height:32px}.post-composer__username{font-family:Brockmann,sans-serif;font-size:15px;font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a)}.post-composer__textarea{width:100%;min-height:120px;border:none;outline:none;resize:none;font-family:Brockmann,sans-serif;font-size:15px;font-weight:400;line-height:22px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);background:transparent;padding:0}.post-composer__textarea::placeholder{color:var(--color-text-tertiary, #999999)}.post-composer__actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.post-composer__action-btns{display:flex;align-items:center;gap:16px}.post-composer__action-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);transition:color .2s ease}.post-composer__action-btn:hover{color:var(--color-text-primary, #1a1a1a)}.thread-line{position:absolute;left:35px;top:60px;bottom:0;width:2px;background:var(--border-color-default)}@media (max-width: 768px){.content{padding:12px 16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "backRoute"], outputs: ["back"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PostCreatePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-post-create-page', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        DsAvatarComponent,
+                        DsIconComponent,
+                        DsButtonComponent,
+                        DsMobilePageDetailsComponent
+                    ], template: `
+    <ds-mobile-page-details
+      [title]="pageTitle()"
+      [backRoute]="'/mobile-tabs-example/announcements'"
+      (back)="handleCancel()">
+      
+      <div class="post-create-container">
+        <div class="post-composer">
+          <div class="post-composer__avatar">
+            <ds-avatar 
+              [initials]="userService.avatarInitials()"
+              [type]="userService.avatarType()"
+              [src]="userService.avatarSrc()"
+              size="md" />
+          </div>
+          
+          <div class="post-composer__main">
+            <div class="post-composer__header">
+              <span class="post-composer__username">{{ username() }}</span>
+            </div>
+            
+            <textarea
+              #textareaInput
+              class="post-composer__textarea"
+              [(ngModel)]="postContent"
+              [placeholder]="placeholder()"
+              (input)="handleInput()">
+            </textarea>
+            
+            <div class="post-composer__actions">
+              <div class="post-composer__action-btns">
+                <button class="post-composer__action-btn" (click)="handleAddImage()">
+                  <ds-icon name="remixImageLine" size="22px" />
+                </button>
+                <button class="post-composer__action-btn" (click)="handleAddEmoji()">
+                  <ds-icon name="remixEmotionLine" size="22px" />
+                </button>
+              </div>
+              
+              <ds-button
+                variant="primary"
+                size="md"
+                [disabled]="!canPost()"
+                (clicked)="handlePost()">
+                {{ submitButtonLabel() }}
+              </ds-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ds-mobile-page-details>
+  `, styles: [".post-create-container{display:flex;flex-direction:column;height:100%;max-width:640px}.content{flex:1;overflow-y:auto;padding:16px}.post-composer{display:flex;gap:12px;margin-bottom:24px;align-items:flex-start}.post-composer__avatar{flex-shrink:0;padding-top:2px}.post-composer__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.post-composer__header{display:flex;align-items:center;gap:8px;height:32px}.post-composer__username{font-family:Brockmann,sans-serif;font-size:15px;font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a)}.post-composer__textarea{width:100%;min-height:120px;border:none;outline:none;resize:none;font-family:Brockmann,sans-serif;font-size:15px;font-weight:400;line-height:22px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);background:transparent;padding:0}.post-composer__textarea::placeholder{color:var(--color-text-tertiary, #999999)}.post-composer__actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.post-composer__action-btns{display:flex;align-items:center;gap:16px}.post-composer__action-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);transition:color .2s ease}.post-composer__action-btn:hover{color:var(--color-text-primary, #1a1a1a)}.thread-line{position:absolute;left:35px;top:60px;bottom:0;width:2px;background:var(--border-color-default)}@media (max-width: 768px){.content{padding:12px 16px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: UserService }], propDecorators: { textareaInput: [{
+                type: ViewChild,
+                args: ['textareaInput']
+            }] } });
+
+class MobilePostDetailPageComponent {
+    lightbox;
+    bottomSheet;
+    repliesCount = 6;
+    constructor(lightbox, bottomSheet) {
+        this.lightbox = lightbox;
+        this.bottomSheet = bottomSheet;
+    }
+    /**
+     * Open an image in the lightbox viewer
+     */
+    openImageLightbox(imageSrc, title, description) {
+        const authorMeta = {
+            name: 'Sophie Andersen',
+            role: 'Lejer',
+            avatarInitials: 'SA',
+            timestamp: '4t siden'
+        };
+        this.lightbox.open({
+            images: [
+                {
+                    type: 'image',
+                    src: imageSrc,
+                    alt: title,
+                    title: title,
+                    description: description,
+                    isLiked: true,
+                    likeCount: 156,
+                    commentCount: 34
+                }
+            ],
+            author: authorMeta,
+            enableZoom: true,
+            showControls: false, // Single image, no need for controls
+            showInfo: true
+        });
+    }
+    /**
+     * Handle long press on a comment to show action sheet
+     */
+    async handleCommentLongPress(authorName, content, isOwnComment) {
+        const sheet = await this.bottomSheet.create({
+            component: DsMobileActionsBottomSheetComponent,
+            componentProps: {
+                isOwnContent: isOwnComment
+            },
+            breakpoints: [0, 1],
+            initialBreakpoint: 1,
+            handle: true,
+            backdropDismiss: true,
+            cssClass: 'auto-height'
+        });
+        const result = await sheet.onWillDismiss();
+        if (result.role === 'select' && result.data) {
+            const action = result.data.action;
+            switch (action) {
+                case 'like':
+                    console.log('Like comment by', authorName);
+                    // Implement like logic
+                    break;
+                case 'reply':
+                    console.log('Reply to comment by', authorName);
+                    // Implement reply logic
+                    break;
+                case 'edit':
+                    console.log('Edit comment by', authorName);
+                    // Implement edit logic
+                    break;
+                case 'delete':
+                    console.log('Delete comment by', authorName);
+                    // Implement delete logic (with confirmation)
+                    break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobilePostDetailPageComponent, deps: [{ token: DsMobileLightboxService }, { token: DsMobileBottomSheetService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MobilePostDetailPageComponent, isStandalone: true, selector: "app-mobile-post-detail-page", ngImport: i0, template: `
+    <ds-mobile-page-details title="Opslag">
+      <div class="post-detail-container">
+        <!-- Post Section -->
+        <div class="post-section">
+          <ds-mobile-post-card
+            [authorName]="'Sophie Andersen'"
+            [authorRole]="'Lejer'"
+            [timestamp]="'4t siden'"
+            [avatarInitials]="'SA'"
+            [variant]="'detail'">
+            
+            <post-content class="no-indent">
+              <post-text>Se denne smukke udsigt fra min altan! Morgenkaffe har aldrig smagt så godt ☕️</post-text>
+              <post-media>
+                <img 
+                  src="/Assets/Dummy-photos/balcony-view.jpg" 
+                  alt="Altanudsigt" 
+                  class="clickable-image"
+                  (click)="openImageLightbox('/Assets/Dummy-photos/balcony-view.jpg', 'Altanudsigt', 'Morgenkaffe har aldrig smagt så godt ☕️')"
+                />
+              </post-media>
+            </post-content>
+            
+            <post-actions class="no-indent">
+              <action-like [active]="true" [count]="156" />
+              <action-comment [count]="34" />
+            </post-actions>
+          </ds-mobile-post-card>
+        </div>
+        
+        <!-- Comments Section -->
+        <div class="comments-section">
+          <h2 class="comments-header">{{ repliesCount }} svar</h2>
+          
+          <div class="comments-list">
+            <ds-mobile-comment
+              [authorName]="'Anders Jensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'3t siden'"
+              [avatarInitials]="'AJ'"
+              [content]="'Wow, den udsigt er fantastisk! Hvilken etage er du på?'"
+              [likeCount]="12"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Anders Jensen', 'Wow, den udsigt er fantastisk! Hvilken etage er du på?', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Thomas Hansen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'3t siden'"
+              [avatarInitials]="'TH'"
+              [content]="'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆'"
+              [isLiked]="true"
+              [likeCount]="8"
+              [clickable]="true"
+              [isOwnComment]="true"
+              (longPress)="handleCommentLongPress('Thomas Hansen', 'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆', true)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Emma Petersen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'2t siden'"
+              [avatarInitials]="'EP'"
+              [content]="'Dette er præcis derfor jeg elsker at bo her. Godt billede!'"
+              [likeCount]="15"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Emma Petersen', 'Dette er præcis derfor jeg elsker at bo her. Godt billede!', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Nikolaj Sørensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'2t siden'"
+              [avatarInitials]="'NS'"
+              [content]="'Solnedgangene fra den vinkel må være utrolige'"
+              [likeCount]="6"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Nikolaj Sørensen', 'Solnedgangene fra den vinkel må være utrolige', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Mette Larsen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'1t siden'"
+              [avatarInitials]="'ML'"
+              [content]="'Giver mig lyst til at få min morgenkaffe på altanen også! ☕'"
+              [likeCount]="9"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Mette Larsen', 'Giver mig lyst til at få min morgenkaffe på altanen også! ☕', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Frederik Nielsen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'1t siden'"
+              [avatarInitials]="'FN'"
+              [content]="'Heldig! Min altan vender den anden vej, men stadig pæn'"
+              [likeCount]="4"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Frederik Nielsen', 'Heldig! Min altan vender den anden vej, men stadig pæn', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Caroline Jensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'45m siden'"
+              [avatarInitials]="'CJ'"
+              [content]="'Denne bygning har den bedste udsigt i byen, uden tvivl'"
+              [likeCount]="11"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Caroline Jensen', 'Denne bygning har den bedste udsigt i byen, uden tvivl', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Anna Hansen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'30m siden'"
+              [avatarInitials]="'AH'"
+              [content]="'Jeg skal se din altan en dag! 😍'"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Anna Hansen', 'Jeg skal se din altan en dag! 😍', false)" />
+          </div>
+        </div>
+      </div>
+    </ds-mobile-page-details>
+  `, isInline: true, styles: [".post-detail-container{display:flex;flex-direction:column;gap:16px;max-width:640px}.post-section{border-bottom:1px solid var(--border-color-default);padding-bottom:16px}.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}.comments-section{display:flex;flex-direction:column;margin-left:-8px;margin-right:-8px}.comments-header{font-family:Brockmann,sans-serif;font-size:18px;font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin-bottom:16px;padding-left:8px;padding-right:8px}.comments-list{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "backRoute"], outputs: ["back"] }, { kind: "component", type: DsMobilePostCardComponent, selector: "ds-mobile-post-card", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "clickable"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: PostContentComponent$1, selector: "post-content" }, { kind: "component", type: PostTextComponent$1, selector: "post-text" }, { kind: "component", type: PostMediaComponent$1, selector: "post-media" }, { kind: "component", type: PostActionsComponent$1, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent$1, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent$1, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCommentComponent, selector: "ds-mobile-comment", inputs: ["authorName", "authorRole", "timestamp", "content", "avatarInitials", "avatarType", "clickable", "isOwnComment", "isLiked", "likeCount"], outputs: ["isLikedChange", "likeCountChange", "commentClick", "replyClick", "editClick", "longPress"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MobilePostDetailPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mobile-post-detail-page', standalone: true, imports: [
+                        DsMobilePageDetailsComponent,
+                        DsMobilePostCardComponent,
+                        PostContentComponent$1,
+                        PostTextComponent$1,
+                        PostMediaComponent$1,
+                        PostActionsComponent$1,
+                        ActionLikeComponent$1,
+                        ActionCommentComponent$1,
+                        DsMobileCommentComponent
+                    ], template: `
+    <ds-mobile-page-details title="Opslag">
+      <div class="post-detail-container">
+        <!-- Post Section -->
+        <div class="post-section">
+          <ds-mobile-post-card
+            [authorName]="'Sophie Andersen'"
+            [authorRole]="'Lejer'"
+            [timestamp]="'4t siden'"
+            [avatarInitials]="'SA'"
+            [variant]="'detail'">
+            
+            <post-content class="no-indent">
+              <post-text>Se denne smukke udsigt fra min altan! Morgenkaffe har aldrig smagt så godt ☕️</post-text>
+              <post-media>
+                <img 
+                  src="/Assets/Dummy-photos/balcony-view.jpg" 
+                  alt="Altanudsigt" 
+                  class="clickable-image"
+                  (click)="openImageLightbox('/Assets/Dummy-photos/balcony-view.jpg', 'Altanudsigt', 'Morgenkaffe har aldrig smagt så godt ☕️')"
+                />
+              </post-media>
+            </post-content>
+            
+            <post-actions class="no-indent">
+              <action-like [active]="true" [count]="156" />
+              <action-comment [count]="34" />
+            </post-actions>
+          </ds-mobile-post-card>
+        </div>
+        
+        <!-- Comments Section -->
+        <div class="comments-section">
+          <h2 class="comments-header">{{ repliesCount }} svar</h2>
+          
+          <div class="comments-list">
+            <ds-mobile-comment
+              [authorName]="'Anders Jensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'3t siden'"
+              [avatarInitials]="'AJ'"
+              [content]="'Wow, den udsigt er fantastisk! Hvilken etage er du på?'"
+              [likeCount]="12"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Anders Jensen', 'Wow, den udsigt er fantastisk! Hvilken etage er du på?', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Thomas Hansen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'3t siden'"
+              [avatarInitials]="'TH'"
+              [content]="'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆'"
+              [isLiked]="true"
+              [likeCount]="8"
+              [clickable]="true"
+              [isOwnComment]="true"
+              (longPress)="handleCommentLongPress('Thomas Hansen', 'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆', true)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Emma Petersen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'2t siden'"
+              [avatarInitials]="'EP'"
+              [content]="'Dette er præcis derfor jeg elsker at bo her. Godt billede!'"
+              [likeCount]="15"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Emma Petersen', 'Dette er præcis derfor jeg elsker at bo her. Godt billede!', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Nikolaj Sørensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'2t siden'"
+              [avatarInitials]="'NS'"
+              [content]="'Solnedgangene fra den vinkel må være utrolige'"
+              [likeCount]="6"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Nikolaj Sørensen', 'Solnedgangene fra den vinkel må være utrolige', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Mette Larsen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'1t siden'"
+              [avatarInitials]="'ML'"
+              [content]="'Giver mig lyst til at få min morgenkaffe på altanen også! ☕'"
+              [likeCount]="9"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Mette Larsen', 'Giver mig lyst til at få min morgenkaffe på altanen også! ☕', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Frederik Nielsen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'1t siden'"
+              [avatarInitials]="'FN'"
+              [content]="'Heldig! Min altan vender den anden vej, men stadig pæn'"
+              [likeCount]="4"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Frederik Nielsen', 'Heldig! Min altan vender den anden vej, men stadig pæn', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Caroline Jensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'45m siden'"
+              [avatarInitials]="'CJ'"
+              [content]="'Denne bygning har den bedste udsigt i byen, uden tvivl'"
+              [likeCount]="11"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Caroline Jensen', 'Denne bygning har den bedste udsigt i byen, uden tvivl', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Anna Hansen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'30m siden'"
+              [avatarInitials]="'AH'"
+              [content]="'Jeg skal se din altan en dag! 😍'"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Anna Hansen', 'Jeg skal se din altan en dag! 😍', false)" />
+          </div>
+        </div>
+      </div>
+    </ds-mobile-page-details>
+  `, styles: [".post-detail-container{display:flex;flex-direction:column;gap:16px;max-width:640px}.post-section{border-bottom:1px solid var(--border-color-default);padding-bottom:16px}.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}.comments-section{display:flex;flex-direction:column;margin-left:-8px;margin-right:-8px}.comments-header{font-family:Brockmann,sans-serif;font-size:18px;font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin-bottom:16px;padding-left:8px;padding-right:8px}.comments-list{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: DsMobileLightboxService }, { type: DsMobileBottomSheetService }] });
+
+const DEFAULT_CONFIG = {
+    logoUrl: '/assets/logos/propbinder-logo.svg',
+    logoMarkUrl: '/assets/logos/propbinder-logomark.svg',
+    logoAlt: 'Propbinder',
+    primaryColor: '#6B5FF5', // Propbinder brand purple (--color-background-brand)
+    secondaryColor: '#221a4c', // Propbinder dark purple for headers (--color-brand-secondary)
+    organizationName: 'Propbinder',
+    organizationId: 'default'
+};
+/**
+ * WhitelabelService
+ *
+ * Manages whitelabel configuration including logos and brand colors.
+ * Automatically updates CSS custom properties when colors change.
+ *
+ * @example
+ * Initialize with custom config:
+ * ```typescript
+ * whitelabelService.initialize({
+ *   logoUrl: '/assets/logos/acme-logo.svg',
+ *   logoMarkUrl: '/assets/logos/acme-mark.svg',
+ *   primaryColor: '#2563eb',
+ *   secondaryColor: '#3b82f6',
+ *   organizationName: 'Acme Corp'
+ * });
+ * ```
+ *
+ * Load from API:
+ * ```typescript
+ * await whitelabelService.loadFromApi('acme-corp');
+ * ```
+ */
+class WhitelabelService {
+    _config = signal(DEFAULT_CONFIG, ...(ngDevMode ? [{ debugName: "_config" }] : []));
+    // Readonly getters for accessing config values
+    logoUrl = () => this._config().logoUrl;
+    logoMarkUrl = () => this._config().logoMarkUrl;
+    logoAlt = () => this._config().logoAlt;
+    primaryColor = () => this._config().primaryColor;
+    secondaryColor = () => this._config().secondaryColor;
+    organizationName = () => this._config().organizationName;
+    organizationId = () => this._config().organizationId;
+    // Full config accessor
+    config = this._config.asReadonly();
+    constructor() {
+        // Apply default colors on initialization
+        this.applyColors(DEFAULT_CONFIG.primaryColor, DEFAULT_CONFIG.secondaryColor);
+        // Watch for config changes and update CSS custom properties
+        effect(() => {
+            const config = this._config();
+            this.applyColors(config.primaryColor, config.secondaryColor);
+        });
+    }
+    /**
+     * Initialize whitelabel configuration
+     * Call this early in app initialization (app.config.ts or app.component.ts)
+     */
+    initialize(config) {
+        this._config.update(current => ({
+            ...current,
+            ...config
+        }));
+    }
+    /**
+     * Load whitelabel config from API
+     * Typically called on app startup based on subdomain, user tenant, etc.
+     *
+     * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
+     */
+    async loadFromApi(organizationId) {
+        try {
+            // Example API call structure
+            // const response = await fetch(`/api/whitelabel/${organizationId || 'default'}`);
+            // const config = await response.json();
+            // this.initialize(config);
+            console.log('Loading whitelabel config from API for:', organizationId);
+            // Example: Different configs for different organizations
+            if (organizationId === 'demo-client') {
+                this.initialize({
+                    logoUrl: '/assets/logos/demo-logo.svg',
+                    logoMarkUrl: '/assets/logos/demo-mark.svg',
+                    logoAlt: 'Demo Client',
+                    primaryColor: '#2563eb', // Blue
+                    secondaryColor: '#3b82f6', // Lighter blue
+                    organizationName: 'Demo Client',
+                    organizationId: 'demo-client'
+                });
+            }
+            // Add more organization-specific configs as needed
+        }
+        catch (error) {
+            console.error('Failed to load whitelabel config:', error);
+            // Fallback to defaults already set
+        }
+    }
+    /**
+     * Update config dynamically (e.g., when user switches organizations)
+     */
+    updateConfig(updates) {
+        this.initialize(updates);
+    }
+    /**
+     * Update only the brand colors
+     */
+    updateColors(primaryColor, secondaryColor) {
+        this._config.update(current => ({
+            ...current,
+            primaryColor,
+            secondaryColor
+        }));
+    }
+    /**
+     * Reset to default configuration
+     */
+    resetToDefault() {
+        this._config.set(DEFAULT_CONFIG);
+    }
+    /**
+     * Apply colors to CSS custom properties
+     * This updates the actual CSS variables used throughout the app
+     */
+    applyColors(primaryColor, secondaryColor) {
+        if (typeof document !== 'undefined') {
+            const root = document.documentElement;
+            root.style.setProperty('--color-background-brand', primaryColor);
+            root.style.setProperty('--color-brand-secondary', secondaryColor);
+            console.log('Applied whitelabel colors:', { primaryColor, secondaryColor });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * DsLogoComponent
+ *
+ * Displays the whitelabeled logo or logomark based on current configuration.
+ * Automatically pulls logo assets from WhitelabelService.
+ *
+ * @example
+ * Full logo in header:
+ * ```html
+ * <ds-logo variant="full" size="md" />
+ * ```
+ *
+ * Logomark for compact spaces:
+ * ```html
+ * <ds-logo variant="mark" size="sm" />
+ * ```
+ */
+class DsLogoComponent {
+    whitelabelService = inject(WhitelabelService);
+    variant = 'full';
+    size = 'md';
+    customHeight;
+    customWidth;
+    logoSrc = computed(() => {
+        return this.variant === 'full'
+            ? this.whitelabelService.logoUrl()
+            : this.whitelabelService.logoMarkUrl();
+    }, ...(ngDevMode ? [{ debugName: "logoSrc" }] : []));
+    logoAlt = computed(() => {
+        const alt = this.whitelabelService.logoAlt();
+        return this.variant === 'full' ? alt : `${alt} logo`;
+    }, ...(ngDevMode ? [{ debugName: "logoAlt" }] : []));
+    logoClasses = computed(() => {
+        return `logo logo--${this.variant} logo--${this.size}`;
+    }, ...(ngDevMode ? [{ debugName: "logoClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DsLogoComponent, isStandalone: true, selector: "ds-logo", inputs: { variant: "variant", size: "size", customHeight: "customHeight", customWidth: "customWidth" }, ngImport: i0, template: `
+    <img 
+      [src]="logoSrc()"
+      [alt]="logoAlt()"
+      [class]="logoClasses()"
+      [style.height.px]="customHeight"
+      [style.width.px]="customWidth"
+    />
+  `, isInline: true, styles: [":host{display:inline-block;line-height:0}.logo{display:block;object-fit:contain}.logo--full.logo--sm{height:24px;width:auto}.logo--full.logo--md{height:32px;width:auto}.logo--full.logo--lg{height:40px;width:auto}.logo--full.logo--xl{height:48px;width:auto}.logo--mark.logo--sm{height:20px;width:20px}.logo--mark.logo--md{height:28px;width:28px}.logo--mark.logo--lg{height:36px;width:36px}.logo--mark.logo--xl{height:44px;width:44px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-logo', standalone: true, imports: [CommonModule], template: `
+    <img 
+      [src]="logoSrc()"
+      [alt]="logoAlt()"
+      [class]="logoClasses()"
+      [style.height.px]="customHeight"
+      [style.width.px]="customWidth"
+    />
+  `, styles: [":host{display:inline-block;line-height:0}.logo{display:block;object-fit:contain}.logo--full.logo--sm{height:24px;width:auto}.logo--full.logo--md{height:32px;width:auto}.logo--full.logo--lg{height:40px;width:auto}.logo--full.logo--xl{height:48px;width:auto}.logo--mark.logo--sm{height:20px;width:20px}.logo--mark.logo--md{height:28px;width:28px}.logo--mark.logo--lg{height:36px;width:36px}.logo--mark.logo--xl{height:44px;width:44px}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], customHeight: [{
+                type: Input
+            }], customWidth: [{
+                type: Input
+            }] } });
+
+/**
+ * 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 {
+    // 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" }] : []));
+    // Calculate badge logo size based on avatar size
+    badgeLogoSize = computed(() => {
+        const sizeMap = {
+            xs: 10,
+            sm: 14,
+            md: 16,
+            lg: 22,
+            xl: 28
+        };
+        return sizeMap[this.size];
+    }, ...(ngDevMode ? [{ debugName: "badgeLogoSize" }] : []));
+    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()">
+          <ds-logo 
+            variant="mark" 
+            [customHeight]="badgeLogoSize()"
+            [customWidth]="badgeLogoSize()"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:inline-block;position:relative}.avatar-badge-container{position:relative;display:inline-block}.avatar-badge{position:absolute;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a}.avatar-badge--bottom-right{bottom:0;right:0}.avatar-badge--bottom-left{bottom:0;left:0}.avatar-badge--top-right{top:0;right:0}.avatar-badge--top-left{top:0;left:0}.avatar-badge--xs{width:16px;height:16px;padding:3px}.avatar-badge--sm{width:20px;height:20px;padding:3px}.avatar-badge--md{width:24px;height:24px;padding:4px}.avatar-badge--lg{width:32px;height:32px;padding:5px}.avatar-badge--xl{width:40px;height:40px;padding:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DsAvatarWithBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-avatar-with-badge', standalone: true, imports: [CommonModule, DsAvatarComponent, DsLogoComponent], 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()">
+          <ds-logo 
+            variant="mark" 
+            [customHeight]="badgeLogoSize()"
+            [customWidth]="badgeLogoSize()"
+          />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:inline-block;position:relative}.avatar-badge-container{position:relative;display:inline-block}.avatar-badge{position:absolute;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a}.avatar-badge--bottom-right{bottom:0;right:0}.avatar-badge--bottom-left{bottom:0;left:0}.avatar-badge--top-right{top:0;right:0}.avatar-badge--top-left{top:0;left:0}.avatar-badge--xs{width:16px;height:16px;padding:3px}.avatar-badge--sm{width:20px;height:20px;padding:3px}.avatar-badge--md{width:24px;height:24px;padding:4px}.avatar-badge--lg{width:32px;height:32px;padding:5px}.avatar-badge--xl{width:40px;height:40px;padding:6px}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], initials: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], showBadge: [{
+                type: Input
+            }], badgePosition: [{
+                type: Input
+            }] } });
+
+/**
+ * Whitelabel Demo Page
+ *
+ * Demonstrates the whitelabeling system with live color and logo switching.
+ */
+class WhitelabelDemoPage {
+    whitelabelService = inject(WhitelabelService);
+    // Custom color inputs
+    customPrimaryColor = '#6B5FF5';
+    customSecondaryColor = '#221a4c';
+    // Logo upload state
+    uploadedFullLogoName = '';
+    uploadedLogomarkName = '';
+    ngOnInit() {
+        console.log('Whitelabel Demo Page initialized');
+        // Initialize custom colors with current values
+        this.customPrimaryColor = this.whitelabelService.primaryColor();
+        this.customSecondaryColor = this.whitelabelService.secondaryColor();
+    }
+    handleFullLogoUpload(event) {
+        const input = event.target;
+        if (input.files && input.files[0]) {
+            const file = input.files[0];
+            this.uploadedFullLogoName = file.name;
+            // Convert to data URL
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const dataUrl = e.target?.result;
+                this.whitelabelService.updateConfig({
+                    logoUrl: dataUrl
+                });
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    handleLogomarkUpload(event) {
+        const input = event.target;
+        if (input.files && input.files[0]) {
+            const file = input.files[0];
+            this.uploadedLogomarkName = file.name;
+            // Convert to data URL
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const dataUrl = e.target?.result;
+                this.whitelabelService.updateConfig({
+                    logoMarkUrl: dataUrl
+                });
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    resetFullLogo() {
+        this.uploadedFullLogoName = '';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/assets/logos/propbinder-logo.svg'
+        });
+    }
+    resetLogomark() {
+        this.uploadedLogomarkName = '';
+        this.whitelabelService.updateConfig({
+            logoMarkUrl: '/assets/logos/propbinder-logomark.svg'
+        });
+    }
+    configJson() {
+        return JSON.stringify(this.whitelabelService.config(), null, 2);
+    }
+    applyDefaultTheme() {
+        this.whitelabelService.updateConfig({
+            primaryColor: '#6B5FF5',
+            secondaryColor: '#221a4c',
+            organizationName: 'Propbinder',
+            organizationId: 'default'
+        });
+        this.updateCustomColorInputs();
+    }
+    applyBlueTheme() {
+        this.whitelabelService.updateConfig({
+            primaryColor: '#2563eb',
+            secondaryColor: '#3b82f6',
+            organizationName: 'Blue Corp',
+            organizationId: 'blue-corp'
+        });
+        this.updateCustomColorInputs();
+    }
+    applyGreenTheme() {
+        this.whitelabelService.updateConfig({
+            primaryColor: '#16a34a',
+            secondaryColor: '#22c55e',
+            organizationName: 'Green Industries',
+            organizationId: 'green-industries'
+        });
+        this.updateCustomColorInputs();
+    }
+    applyOrangeTheme() {
+        this.whitelabelService.updateConfig({
+            primaryColor: '#ea580c',
+            secondaryColor: '#f97316',
+            organizationName: 'Orange Solutions',
+            organizationId: 'orange-solutions'
+        });
+        this.updateCustomColorInputs();
+    }
+    applyCustomColors() {
+        this.whitelabelService.updateColors(this.customPrimaryColor, this.customSecondaryColor);
+    }
+    updateCustomColorInputs() {
+        this.customPrimaryColor = this.whitelabelService.primaryColor();
+        this.customSecondaryColor = this.whitelabelService.secondaryColor();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: WhitelabelDemoPage, isStandalone: true, selector: "app-whitelabel-demo", ngImport: i0, template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Whitelabel Demo</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <div class="demo-container">
+        <!-- Logo Section -->
+        <div class="demo-section">
+          <h2>Logos</h2>
+          <div class="logo-showcase">
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Full Logo (md)</p>
+              <ds-logo variant="full" size="md" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (sm)</p>
+              <ds-logo variant="mark" size="sm" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (md)</p>
+              <ds-logo variant="mark" size="md" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (lg)</p>
+              <ds-logo variant="mark" size="lg" />
+            </div>
+          </div>
+          
+          <!-- Logo Upload Section -->
+          <div class="logo-upload">
+            <div class="upload-section">
+              <h3>Upload Full Logo</h3>
+              <div class="file-input-wrapper">
+                <input 
+                  #fullLogoInput
+                  type="file" 
+                  accept="image/*"
+                  (change)="handleFullLogoUpload($event)"
+                />
+                <button class="upload-button" (click)="fullLogoInput.click()">
+                  Choose File
+                </button>
+                @if (uploadedFullLogoName) {
+                  <span class="file-name">{{ uploadedFullLogoName }}</span>
+                }
+                @if (uploadedFullLogoName) {
+                  <button class="reset-button" (click)="resetFullLogo()">Reset</button>
+                }
+              </div>
+            </div>
+            
+            <div class="upload-section">
+              <h3>Upload Logomark</h3>
+              <div class="file-input-wrapper">
+                <input 
+                  #logomarkInput
+                  type="file" 
+                  accept="image/*"
+                  (change)="handleLogomarkUpload($event)"
+                />
+                <button class="upload-button" (click)="logomarkInput.click()">
+                  Choose File
+                </button>
+                @if (uploadedLogomarkName) {
+                  <span class="file-name">{{ uploadedLogomarkName }}</span>
+                }
+                @if (uploadedLogomarkName) {
+                  <button class="reset-button" (click)="resetLogomark()">Reset</button>
+                }
+              </div>
+            </div>
+            
+            <p style="font-size: 12px; color: #999; margin-top: 12px;">
+              Tip: Use SVG or PNG files with transparent backgrounds for best results
+            </p>
+          </div>
+        </div>
+        
+        <!-- Avatar with Badge Section -->
+        <div class="demo-section">
+          <h2>Avatar with Logo Badge</h2>
+          <div class="avatar-showcase">
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Small</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'sm'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Medium</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'md'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Large</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'lg'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">X-Large</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'xl'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+          </div>
+        </div>
+        
+        <!-- Color Section -->
+        <div class="demo-section">
+          <h2>Brand Colors</h2>
+          <div class="color-demo">
+            <p style="margin-bottom: 8px; color: #666;">Current brand colors:</p>
+            <div class="color-swatch">
+              <div class="swatch swatch--primary">
+                Primary<br/>
+                <span style="font-size: 11px; opacity: 0.9;">{{ whitelabelService.primaryColor() }}</span>
+              </div>
+              <div class="swatch swatch--secondary">
+                Secondary<br/>
+                <span style="font-size: 11px; opacity: 0.9;">{{ whitelabelService.secondaryColor() }}</span>
+              </div>
+            </div>
+            
+            <!-- Custom Color Inputs -->
+            <div class="color-inputs">
+              <div class="color-input-row">
+                <label>Primary:</label>
+                <input 
+                  type="color" 
+                  [(ngModel)]="customPrimaryColor"
+                  (change)="applyCustomColors()"
+                />
+                <input 
+                  type="text" 
+                  [(ngModel)]="customPrimaryColor"
+                  (change)="applyCustomColors()"
+                  placeholder="#6B5FF5"
+                />
+              </div>
+              <div class="color-input-row">
+                <label>Secondary:</label>
+                <input 
+                  type="color" 
+                  [(ngModel)]="customSecondaryColor"
+                  (change)="applyCustomColors()"
+                />
+                <input 
+                  type="text" 
+                  [(ngModel)]="customSecondaryColor"
+                  (change)="applyCustomColors()"
+                  placeholder="#221a4c"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Theme Switcher -->
+        <div class="demo-section">
+          <h2>Switch Organization Theme</h2>
+          <div class="button-group">
+            <ion-button (click)="applyDefaultTheme()">
+              Default (Purple)
+            </ion-button>
+            <ion-button (click)="applyBlueTheme()">
+              Blue Theme
+            </ion-button>
+            <ion-button (click)="applyGreenTheme()">
+              Green Theme
+            </ion-button>
+            <ion-button (click)="applyOrangeTheme()">
+              Orange Theme
+            </ion-button>
+          </div>
+        </div>
+        
+        <!-- Current Config -->
+        <div class="demo-section">
+          <h2>Current Configuration</h2>
+          <div class="current-config">
+            <pre>{{ configJson() }}</pre>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  `, isInline: true, styles: [":host{display:block}ion-toolbar{--background: var(--color-brand-secondary);--color: white}ion-content{--background: #f5f5f5}.demo-container{padding:20px;max-width:800px;margin:0 auto}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:20px;font-weight:600}.logo-showcase{display:flex;gap:24px;align-items:center;padding:24px;background:#fff;border-radius:8px}.avatar-showcase{display:flex;gap:16px;align-items:center;padding:24px;background:#fff;border-radius:8px;flex-wrap:wrap}.button-group{display:flex;gap:12px;flex-wrap:wrap}.color-demo{padding:24px;background:#fff;border-radius:8px}.color-swatch{display:flex;gap:16px;margin-top:16px}.swatch{flex:1;min-height:100px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}.swatch--primary{background:var(--color-background-brand)}.swatch--secondary{background:var(--color-brand-secondary)}.current-config{padding:16px;background:#f5f5f5;border-radius:8px;margin-top:16px}.current-config pre{margin:0;font-size:12px;overflow-x:auto}.color-inputs{display:flex;flex-direction:column;gap:16px;margin-top:16px}.color-input-row{display:flex;align-items:center;gap:12px}.color-input-row label{min-width:100px;font-weight:600;font-size:14px}.color-input-row input[type=color]{width:50px;height:40px;border:none;border-radius:8px;cursor:pointer}.color-input-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-family:monospace;font-size:14px}.logo-upload{margin-top:24px;padding:20px;background:#fff;border-radius:8px}.upload-section{margin-bottom:20px}.upload-section h3{font-size:16px;font-weight:600;margin-bottom:12px}.file-input-wrapper{display:flex;align-items:center;gap:12px}.file-input-wrapper input[type=file]{display:none}.upload-button{padding:10px 16px;background:var(--color-background-brand);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}.upload-button:hover{opacity:.9}.file-name{font-size:14px;color:#666}.reset-button{padding:8px 12px;background:#f5f5f5;color:#666;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WhitelabelDemoPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-whitelabel-demo', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        IonContent,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonButton,
+                        DsLogoComponent,
+                        DsAvatarWithBadgeComponent
+                    ], template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Whitelabel Demo</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <div class="demo-container">
+        <!-- Logo Section -->
+        <div class="demo-section">
+          <h2>Logos</h2>
+          <div class="logo-showcase">
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Full Logo (md)</p>
+              <ds-logo variant="full" size="md" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (sm)</p>
+              <ds-logo variant="mark" size="sm" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (md)</p>
+              <ds-logo variant="mark" size="md" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (lg)</p>
+              <ds-logo variant="mark" size="lg" />
+            </div>
+          </div>
+          
+          <!-- Logo Upload Section -->
+          <div class="logo-upload">
+            <div class="upload-section">
+              <h3>Upload Full Logo</h3>
+              <div class="file-input-wrapper">
+                <input 
+                  #fullLogoInput
+                  type="file" 
+                  accept="image/*"
+                  (change)="handleFullLogoUpload($event)"
+                />
+                <button class="upload-button" (click)="fullLogoInput.click()">
+                  Choose File
+                </button>
+                @if (uploadedFullLogoName) {
+                  <span class="file-name">{{ uploadedFullLogoName }}</span>
+                }
+                @if (uploadedFullLogoName) {
+                  <button class="reset-button" (click)="resetFullLogo()">Reset</button>
+                }
+              </div>
+            </div>
+            
+            <div class="upload-section">
+              <h3>Upload Logomark</h3>
+              <div class="file-input-wrapper">
+                <input 
+                  #logomarkInput
+                  type="file" 
+                  accept="image/*"
+                  (change)="handleLogomarkUpload($event)"
+                />
+                <button class="upload-button" (click)="logomarkInput.click()">
+                  Choose File
+                </button>
+                @if (uploadedLogomarkName) {
+                  <span class="file-name">{{ uploadedLogomarkName }}</span>
+                }
+                @if (uploadedLogomarkName) {
+                  <button class="reset-button" (click)="resetLogomark()">Reset</button>
+                }
+              </div>
+            </div>
+            
+            <p style="font-size: 12px; color: #999; margin-top: 12px;">
+              Tip: Use SVG or PNG files with transparent backgrounds for best results
+            </p>
+          </div>
+        </div>
+        
+        <!-- Avatar with Badge Section -->
+        <div class="demo-section">
+          <h2>Avatar with Logo Badge</h2>
+          <div class="avatar-showcase">
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Small</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'sm'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Medium</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'md'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Large</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'lg'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">X-Large</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'xl'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+          </div>
+        </div>
+        
+        <!-- Color Section -->
+        <div class="demo-section">
+          <h2>Brand Colors</h2>
+          <div class="color-demo">
+            <p style="margin-bottom: 8px; color: #666;">Current brand colors:</p>
+            <div class="color-swatch">
+              <div class="swatch swatch--primary">
+                Primary<br/>
+                <span style="font-size: 11px; opacity: 0.9;">{{ whitelabelService.primaryColor() }}</span>
+              </div>
+              <div class="swatch swatch--secondary">
+                Secondary<br/>
+                <span style="font-size: 11px; opacity: 0.9;">{{ whitelabelService.secondaryColor() }}</span>
+              </div>
+            </div>
+            
+            <!-- Custom Color Inputs -->
+            <div class="color-inputs">
+              <div class="color-input-row">
+                <label>Primary:</label>
+                <input 
+                  type="color" 
+                  [(ngModel)]="customPrimaryColor"
+                  (change)="applyCustomColors()"
+                />
+                <input 
+                  type="text" 
+                  [(ngModel)]="customPrimaryColor"
+                  (change)="applyCustomColors()"
+                  placeholder="#6B5FF5"
+                />
+              </div>
+              <div class="color-input-row">
+                <label>Secondary:</label>
+                <input 
+                  type="color" 
+                  [(ngModel)]="customSecondaryColor"
+                  (change)="applyCustomColors()"
+                />
+                <input 
+                  type="text" 
+                  [(ngModel)]="customSecondaryColor"
+                  (change)="applyCustomColors()"
+                  placeholder="#221a4c"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Theme Switcher -->
+        <div class="demo-section">
+          <h2>Switch Organization Theme</h2>
+          <div class="button-group">
+            <ion-button (click)="applyDefaultTheme()">
+              Default (Purple)
+            </ion-button>
+            <ion-button (click)="applyBlueTheme()">
+              Blue Theme
+            </ion-button>
+            <ion-button (click)="applyGreenTheme()">
+              Green Theme
+            </ion-button>
+            <ion-button (click)="applyOrangeTheme()">
+              Orange Theme
+            </ion-button>
+          </div>
+        </div>
+        
+        <!-- Current Config -->
+        <div class="demo-section">
+          <h2>Current Configuration</h2>
+          <div class="current-config">
+            <pre>{{ configJson() }}</pre>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  `, styles: [":host{display:block}ion-toolbar{--background: var(--color-brand-secondary);--color: white}ion-content{--background: #f5f5f5}.demo-container{padding:20px;max-width:800px;margin:0 auto}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:20px;font-weight:600}.logo-showcase{display:flex;gap:24px;align-items:center;padding:24px;background:#fff;border-radius:8px}.avatar-showcase{display:flex;gap:16px;align-items:center;padding:24px;background:#fff;border-radius:8px;flex-wrap:wrap}.button-group{display:flex;gap:12px;flex-wrap:wrap}.color-demo{padding:24px;background:#fff;border-radius:8px}.color-swatch{display:flex;gap:16px;margin-top:16px}.swatch{flex:1;min-height:100px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}.swatch--primary{background:var(--color-background-brand)}.swatch--secondary{background:var(--color-brand-secondary)}.current-config{padding:16px;background:#f5f5f5;border-radius:8px;margin-top:16px}.current-config pre{margin:0;font-size:12px;overflow-x:auto}.color-inputs{display:flex;flex-direction:column;gap:16px;margin-top:16px}.color-input-row{display:flex;align-items:center;gap:12px}.color-input-row label{min-width:100px;font-weight:600;font-size:14px}.color-input-row input[type=color]{width:50px;height:40px;border:none;border-radius:8px;cursor:pointer}.color-input-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-family:monospace;font-size:14px}.logo-upload{margin-top:24px;padding:20px;background:#fff;border-radius:8px}.upload-section{margin-bottom:20px}.upload-section h3{font-size:16px;font-weight:600;margin-bottom:12px}.file-input-wrapper{display:flex;align-items:center;gap:12px}.file-input-wrapper input[type=file]{display:none}.upload-button{padding:10px 16px;background:var(--color-background-brand);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}.upload-button:hover{opacity:.9}.file-name{font-size:14px;color:#666}.reset-button{padding:8px 12px;background:#f5f5f5;color:#666;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px}\n"] }]
+        }] });
+
 /* Auto-generated. Do not edit. */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionCommentComponent$1 as ActionCommentComponent, ActionLikeComponent$1 as ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabsComponent, MobilePageBase, PostActionsComponent$1 as PostActionsComponent, PostAttachmentsComponent$1 as PostAttachmentsComponent, PostContentComponent$1 as PostContentComponent, PostMediaComponent$1 as PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent$1 as PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent };
+export { ActionCommentComponent$1 as ActionCommentComponent, ActionLikeComponent$1 as ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabsComponent$1 as DsMobileTabsComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent$1 as PostActionsComponent, PostAttachmentsComponent$1 as PostAttachmentsComponent, PostContentComponent$1 as PostContentComponent, PostCreatePageComponent, PostMediaComponent$1 as PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent$1 as PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, customBackTransition, customPageTransition };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map