@propbinder/mobile-design 0.2.8 → 0.2.10

package/fesm2022/propbinder-mobile-design.mjs

@@ -755,16 +755,16 @@ class DsMobileListItemComponent {
         if (isPlatformBrowser(this.platformId)) {
             // Show button on tablet breakpoint and above (768px+)
             const isDesktopViewport = window.innerWidth >= 768;
-            console.log('[ListItem] Desktop detection:', {
-                innerWidth: window.innerWidth,
-                isDesktopViewport
-            });
+            // console.log('[ListItem] Desktop detection:', {
+            //   innerWidth: window.innerWidth,
+            //   isDesktopViewport
+            // });
             this.isDesktop.set(isDesktopViewport);
             // Listen for window resize to update detection
             window.addEventListener('resize', () => {
                 const newIsDesktop = window.innerWidth >= 768;
                 if (newIsDesktop !== this.isDesktop()) {
-                    console.log('[ListItem] Viewport changed, updating desktop detection:', newIsDesktop);
+                    // console.log('[ListItem] Viewport changed, updating desktop detection:', newIsDesktop);
                     this.isDesktop.set(newIsDesktop);
                 }
             });
@@ -870,15 +870,15 @@ class DsMobileListItemComponent {
      * Handle click events
      */
     handleClick(event) {
-        console.log('[ListItem] Click event fired', {
-            interactive: this.interactive(),
-            disabled: this.disabled(),
-            loading: this.loading(),
-            longPressTriggered: this.longPressTriggered,
-            target: event.target
-        });
+        // console.log('[ListItem] Click event fired', {
+        //   interactive: this.interactive(),
+        //   disabled: this.disabled(),
+        //   loading: this.loading(),
+        //   longPressTriggered: this.longPressTriggered,
+        //   target: event.target
+        // });
         if (!this.interactive() || this.disabled() || this.loading()) {
-            console.log('[ListItem] Click ignored - not interactive or disabled/loading');
+            // console.log('[ListItem] Click ignored - not interactive or disabled/loading');
             return;
         }
         // Don't emit click if it came from an interactive child element
@@ -887,15 +887,15 @@ class DsMobileListItemComponent {
         const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
         // Check if the interactive element is a child, not the host itself
         if (closestInteractive && closestInteractive !== event.currentTarget) {
-            console.log('[ListItem] Click ignored - came from interactive child:', closestInteractive);
+            // console.log('[ListItem] Click ignored - came from interactive child:', closestInteractive);
             return;
         }
         if (!this.longPressTriggered) {
-            console.log('[ListItem] Emitting itemClick');
+            // console.log('[ListItem] Emitting itemClick');
             this.itemClick.emit();
         }
         else {
-            console.log('[ListItem] Click ignored - long press was triggered');
+            // console.log('[ListItem] Click ignored - long press was triggered');
         }
         this.longPressTriggered = false;
     }
@@ -926,7 +926,7 @@ class DsMobileListItemComponent {
      * Emits moreButtonClick for parent components to handle
      */
     handleMoreButtonClick(event) {
-        console.log('[ListItem] Desktop more button clicked');
+        // console.log('[ListItem] Desktop more button clicked');
         // Stop propagation to prevent triggering itemClick
         event.stopPropagation();
         event.preventDefault();
@@ -939,42 +939,43 @@ class DsMobileListItemComponent {
       <div class="content-leading">
         <ng-content select="[content-leading]" />
       </div>
-      
+
       <div class="content-main">
         @if (title()) {
-          <h3 class="structured-title">{{ title() }}</h3>
-        }
-        @if (subtitle()) {
-          <p class="structured-subtitle">{{ subtitle() }}</p>
+        <h3 class="structured-title">{{ title() }}</h3>
+        } @if (subtitle()) {
+        <p class="structured-subtitle">{{ subtitle() }}</p>
         }
-        
+
         <ng-content select="[content-main]" />
         <ng-content />
       </div>
-      
+
       <div class="content-trailing">
-        @if (interactive() && enableLongPress() && showDesktopMoreButton() && isDesktop()) {
-          <ds-icon-button
-            class="desktop-more-button"
-            icon="remixMoreFill"
-            variant="secondary"
-            size="sm"
-            (clicked)="handleMoreButtonClick($event)"
-            aria-label="More options">
-          </ds-icon-button>
+        @if (interactive() && enableLongPress() && showDesktopMoreButton() &&
+        isDesktop()) {
+        <ds-icon-button
+          class="desktop-more-button"
+          icon="remixMoreFill"
+          variant="secondary"
+          size="sm"
+          (clicked)="handleMoreButtonClick($event)"
+          aria-label="More options"
+        >
+        </ds-icon-button>
         }
         <ng-content select="[content-trailing]" />
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ds-mobile-list-item', standalone: true, imports: [CommonModule, DsIconButtonComponent], hostDirectives: [
                         {
                             directive: DsMobileLongPressDirective,
-                            outputs: ['longPress']
-                        }
+                            outputs: ['longPress'],
+                        },
                     ], host: {
                         '[class.interactive]': 'interactive() && !disabled()',
                         '[class.disabled]': 'disabled()',
@@ -993,40 +994,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '(click)': 'handleClick($event)',
                         '(keydown.enter)': 'handleKeyDown($event)',
                         '(keydown.space)': 'handleKeyDown($event)',
-                        '(longPress)': 'handleLongPress()'
+                        '(longPress)': 'handleLongPress()',
                     }, template: `
     <div class="list-item-inner">
       <div class="content-leading">
         <ng-content select="[content-leading]" />
       </div>
-      
+
       <div class="content-main">
         @if (title()) {
-          <h3 class="structured-title">{{ title() }}</h3>
-        }
-        @if (subtitle()) {
-          <p class="structured-subtitle">{{ subtitle() }}</p>
+        <h3 class="structured-title">{{ title() }}</h3>
+        } @if (subtitle()) {
+        <p class="structured-subtitle">{{ subtitle() }}</p>
         }
-        
+
         <ng-content select="[content-main]" />
         <ng-content />
       </div>
-      
+
       <div class="content-trailing">
-        @if (interactive() && enableLongPress() && showDesktopMoreButton() && isDesktop()) {
-          <ds-icon-button
-            class="desktop-more-button"
-            icon="remixMoreFill"
-            variant="secondary"
-            size="sm"
-            (clicked)="handleMoreButtonClick($event)"
-            aria-label="More options">
-          </ds-icon-button>
+        @if (interactive() && enableLongPress() && showDesktopMoreButton() &&
+        isDesktop()) {
+        <ds-icon-button
+          class="desktop-more-button"
+          icon="remixMoreFill"
+          variant="secondary"
+          size="sm"
+          (clicked)="handleMoreButtonClick($event)"
+          aria-label="More options"
+        >
+        </ds-icon-button>
         }
         <ng-content select="[content-trailing]" />
       </div>
     </div>
-  `, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"] }]
+  `, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { leadingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], enableLongPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLongPress", required: false }] }], showDesktopMoreButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDesktopMoreButton", required: false }] }], interactiveOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], dividerSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerSpacing", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], moreButtonClick: [{ type: i0.Output, args: ["moreButtonClick"] }] } });
 
 /**
@@ -3028,7 +3030,7 @@ class WhitelabelDemoModalService {
      */
     async open() {
         try {
-            console.log('[WhitelabelDemoModal] Opening...');
+            // console.log('[WhitelabelDemoModal] Opening...');
             const modal = await this.modalController.create({
                 component: WhitelabelDemoModalComponent,
                 cssClass: 'ds-whitelabel-demo-modal',
@@ -3040,14 +3042,14 @@ class WhitelabelDemoModalService {
                 keyboardClose: true,
                 // Control the presenting element animation
                 enterAnimation: undefined, // Use default
-                leaveAnimation: undefined // Use default
+                leaveAnimation: undefined, // Use default
             });
-            console.log('[WhitelabelDemoModal] Modal created, presenting...');
+            // console.log('[WhitelabelDemoModal] Modal created, presenting...');
             await modal.present();
-            console.log('[WhitelabelDemoModal] Modal presented');
+            // console.log('[WhitelabelDemoModal] Modal presented');
         }
         catch (error) {
-            console.error('[WhitelabelDemoModal] Error opening modal:', error);
+            // console.error('[WhitelabelDemoModal] Error opening modal:', error);
             throw error;
         }
     }
@@ -3074,7 +3076,7 @@ class WhitelabelDemoModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WhitelabelDemoModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -9838,8 +9840,8 @@ class DsMobileModalService {
      * ```
      */
     async open(options) {
-        console.log('[Modal] Opening modal with options:', options);
-        const { component, componentProps, cssClass, presentationStyle = 'card', backdropDismiss = true, showBackdrop = true, keyboardClose = true, swipeToClose, initialBreakpoint, breakpoints, animated = true, mode = 'ios', handleNavigationBack = true } = options;
+        // console.log('[Modal] Opening modal with options:', options);
+        const { component, componentProps, cssClass, presentationStyle = 'card', backdropDismiss = true, showBackdrop = true, keyboardClose = true, swipeToClose, initialBreakpoint, breakpoints, animated = true, mode = 'ios', handleNavigationBack = true, } = options;
         // Build modal configuration
         const modalConfig = {
             component,
@@ -9872,9 +9874,9 @@ class DsMobileModalService {
             };
         }
         const modal = await this.modalController.create(modalConfig);
-        console.log('[Modal] Modal created, presenting...');
+        // console.log('[Modal] Modal created, presenting...');
         await modal.present();
-        console.log('[Modal] Modal presented');
+        // console.log('[Modal] Modal presented');
         return modal;
     }
     /**
@@ -9895,7 +9897,7 @@ class DsMobileModalService {
             componentProps,
             presentationStyle: 'fullscreen',
             backdropDismiss: false,
-            showBackdrop: false
+            showBackdrop: false,
         });
     }
     /**
@@ -9916,7 +9918,7 @@ class DsMobileModalService {
             componentProps,
             presentationStyle: 'card',
             backdropDismiss: true,
-            showBackdrop: true
+            showBackdrop: true,
         });
     }
     /**
@@ -9945,7 +9947,7 @@ class DsMobileModalService {
             showBackdrop: true,
             swipeToClose: options?.swipeToClose ?? true,
             initialBreakpoint: options?.initialBreakpoint ?? 0.5,
-            breakpoints: options?.breakpoints ?? [0, 0.5, 0.75, 1]
+            breakpoints: options?.breakpoints ?? [0, 0.5, 0.75, 1],
         });
     }
     /**
@@ -10019,7 +10021,7 @@ class DsMobileModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -11621,8 +11623,8 @@ class DsMobilePostDetailModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(postData, options) {
-        console.log('[PostDetailModal] Opening with data:', postData);
-        console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
+        // console.log('[PostDetailModal] Opening with data:', postData);
+        // console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
         const modal = await this.createModal(DsMobilePostDetailModalComponent, {
             postData: postData,
             loading: options?.loading ?? false,
@@ -11634,9 +11636,9 @@ class DsMobilePostDetailModalService extends BaseModalService {
         }, {
             keyboardClose: true, // Keep keyboard close behavior for this modal
         });
-        console.log('[PostDetailModal] Modal created, presenting...');
+        // console.log('[PostDetailModal] Modal created, presenting...');
         await modal.present();
-        console.log('[PostDetailModal] Modal presented');
+        // console.log('[PostDetailModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, providedIn: 'root' });
@@ -12082,7 +12084,7 @@ class DsMobileCardInlineFileComponent {
      */
     fileName = input('Document', ...(ngDevMode ? [{ debugName: "fileName" }] : []));
     /**
-     * File size display (e.g., "1.2 MB")
+     * File size display (e.g., '1.2 MB')
      */
     fileSize = input('', ...(ngDevMode ? [{ debugName: "fileSize" }] : []));
     /**
@@ -12097,6 +12099,11 @@ class DsMobileCardInlineFileComponent {
      * - 'compact' - Reduced padding and row layout
      */
     layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Optional URL to open when clicked
+     * If provided, clicking the card will open this URL in a new tab
+     */
+    fileUrl = input(undefined, ...(ngDevMode ? [{ debugName: "fileUrl" }] : []));
     /**
      * Emits when the file attachment is clicked
      */
@@ -12105,7 +12112,9 @@ class DsMobileCardInlineFileComponent {
      * Get the appropriate icon name based on variant
      */
     getIconName() {
-        return this.variant() === 'pdf' ? 'remixFileTextLine' : 'remixAttachmentLine';
+        return this.variant() === 'pdf'
+            ? 'remixFileTextLine'
+            : 'remixAttachmentLine';
     }
     /**
      * Get the file type label based on variant
@@ -12114,73 +12123,87 @@ class DsMobileCardInlineFileComponent {
         return this.variant() === 'pdf' ? 'PDF' : 'DOC';
     }
     handleClick() {
+        const url = this.fileUrl();
+        console.log(url);
+        if (url) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
         this.fileClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineFileComponent, isStandalone: true, selector: "ds-mobile-card-inline-file", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileClick: "fileClick" }, ngImport: i0, template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleClick()">
-      
-      <div content-leading class="item-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineFileComponent, isStandalone: true, selector: "ds-mobile-card-inline-file", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, fileUrl: { classPropertyName: "fileUrl", publicName: "fileUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileClick: "fileClick" }, ngImport: i0, template: `
+    <ds-mobile-card-inline [variant]="layout()" (cardClick)="handleClick()">
+      <div
+        content-leading
+        class="item-avatar"
+        [class.pdf]="variant() === 'pdf'"
+        [class.doc]="variant() === 'doc'"
+      >
         <ds-avatar
           type="icon"
           [iconName]="getIconName()"
           [size]="layout() === 'compact' ? 'sm' : 'md'"
         />
       </div>
-      
+
       <div content-main class="item-content">
         <div class="item-name">{{ fileName() }}</div>
         @if (fileSize()) {
-          <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+        <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
         } @else {
-          <div class="item-meta">{{ getFileTypeLabel() }}</div>
+        <div class="item-meta">{{ getFileTypeLabel() }}</div>
         }
       </div>
-      
-      <ds-icon 
+
+      <ds-icon
         content-trailing
-        name="remixArrowRightSLine" 
+        name="remixArrowRightSLine"
         size="20px"
         class="item-trailing"
       />
     </ds-mobile-card-inline>
-  `, isInline: true, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+  `, isInline: true, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3b82f6)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-file', standalone: true, imports: [CommonModule, DsAvatarComponent, DsIconComponent, DsMobileCardInlineComponent], template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleClick()">
-      
-      <div content-leading class="item-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+            args: [{ selector: 'ds-mobile-card-inline-file', standalone: true, imports: [
+                        CommonModule,
+                        DsAvatarComponent,
+                        DsIconComponent,
+                        DsMobileCardInlineComponent,
+                    ], template: `
+    <ds-mobile-card-inline [variant]="layout()" (cardClick)="handleClick()">
+      <div
+        content-leading
+        class="item-avatar"
+        [class.pdf]="variant() === 'pdf'"
+        [class.doc]="variant() === 'doc'"
+      >
         <ds-avatar
           type="icon"
           [iconName]="getIconName()"
           [size]="layout() === 'compact' ? 'sm' : 'md'"
         />
       </div>
-      
+
       <div content-main class="item-content">
         <div class="item-name">{{ fileName() }}</div>
         @if (fileSize()) {
-          <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+        <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
         } @else {
-          <div class="item-meta">{{ getFileTypeLabel() }}</div>
+        <div class="item-meta">{{ getFileTypeLabel() }}</div>
         }
       </div>
-      
-      <ds-icon 
+
+      <ds-icon
         content-trailing
-        name="remixArrowRightSLine" 
+        name="remixArrowRightSLine"
         size="20px"
         class="item-trailing"
       />
     </ds-mobile-card-inline>
-  `, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}\n"] }]
-        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
+  `, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3b82f6)!important}\n"] }]
+        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fileUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUrl", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
 
 /**
  * DsMobileSystemMessageBannerComponent
@@ -12384,7 +12407,7 @@ class DsMobileChatModalComponent {
         // Track keyboard state
         this.isKeyboardVisible = true;
         // Check if user is near bottom before auto-scrolling
-        this.isNearBottom().then(isNear => {
+        this.isNearBottom().then((isNear) => {
             if (isNear) {
                 // User is already viewing latest messages, maintain that position
                 // Small delay to synchronize with keyboard animation
@@ -12443,7 +12466,7 @@ class DsMobileChatModalComponent {
             avatarType: this.currentUserAvatarType(),
             avatarSrc: this.currentUserAvatarSrc(),
             fileAttachments: event.attachments || [],
-            isNewMessage: true // Mark as new message to trigger animation
+            isNewMessage: true, // Mark as new message to trigger animation
         };
         // Add message to list
         const updatedMessages = [...this.messages(), newMessage];
@@ -12451,7 +12474,7 @@ class DsMobileChatModalComponent {
         // Remove the isNewMessage flag after animation completes (using spring-bouncy duration ~600ms)
         setTimeout(() => {
             const msgs = this.messages();
-            const msgIndex = msgs.findIndex(m => m.id === newMessage.id);
+            const msgIndex = msgs.findIndex((m) => m.id === newMessage.id);
             if (msgIndex !== -1) {
                 msgs[msgIndex].isNewMessage = false;
                 this.messages.set([...msgs]);
@@ -12508,7 +12531,10 @@ class DsMobileChatModalComponent {
                 timestamp: this.formatMessageTimestamp(ownerMessage.timestamp),
                 avatarInitials: ownerMessage.avatarInitials,
                 avatarSrc: ownerMessage.avatarSrc,
-                avatarType: ownerMessage.avatarType === 'photo' || ownerMessage.avatarType === 'initials' ? ownerMessage.avatarType : undefined,
+                avatarType: ownerMessage.avatarType === 'photo' ||
+                    ownerMessage.avatarType === 'initials'
+                    ? ownerMessage.avatarType
+                    : undefined,
             }
             : undefined;
         this.lightboxService.openImages({
@@ -12545,7 +12571,7 @@ class DsMobileChatModalComponent {
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
                 setTimeout(() => {
-                    this.isNearBottom().then(isNear => {
+                    this.isNearBottom().then((isNear) => {
                         if (isNear) {
                             // User is at bottom, maintain that position as composer expands
                             this.scrollToBottom();
@@ -12565,7 +12591,7 @@ class DsMobileChatModalComponent {
             .then(() => {
             this.isKeyboardVisible = false;
         })
-            .catch(e => console.log('[ChatModal] Keyboard.hide() not available:', e));
+            .catch((e) => console.log('[ChatModal] Keyboard.hide() not available:', e));
     }
     /**
      * Get file variant for card-inline-file component
@@ -12585,26 +12611,28 @@ class DsMobileChatModalComponent {
      */
     async handleImageClick(attachment, message) {
         await this.lightboxService.openImages({
-            images: [{
+            images: [
+                {
                     type: 'image',
                     src: attachment.src,
                     title: attachment.name || 'Image',
-                    alt: attachment.name || 'Chat image'
-                }],
+                    alt: attachment.name || 'Chat image',
+                },
+            ],
             author: {
                 name: message.senderName,
                 role: message.senderRole,
                 avatarInitials: message.avatarInitials,
                 avatarType: message.avatarType === 'initials' ? 'initials' : 'photo',
                 avatarSrc: message.avatarSrc,
-                timestamp: this.formatMessageTimestamp(message.timestamp)
+                timestamp: this.formatMessageTimestamp(message.timestamp),
             },
             initialIndex: 0,
             enableZoom: true,
             showControls: false,
             enableSwipe: false,
             showInfo: false,
-            showActions: false
+            showActions: false,
         });
     }
     /**
@@ -12625,7 +12653,7 @@ class DsMobileChatModalComponent {
                 .then(() => {
                 this.isKeyboardVisible = false;
             })
-                .catch(e => console.log('[ChatModal] Keyboard.hide() not available:', e));
+                .catch((e) => console.log('[ChatModal] Keyboard.hide() not available:', e));
             return; // Exit early, don't toggle timestamp
         }
         // Keyboard is hidden, proceed with timestamp toggle
@@ -12634,7 +12662,7 @@ class DsMobileChatModalComponent {
             clearTimeout(this.timestampTimeout);
         }
         // Toggle timestamp - if clicking same message, hide it; otherwise show new one
-        this.selectedMessageId.update(current => current === messageId ? null : messageId);
+        this.selectedMessageId.update((current) => current === messageId ? null : messageId);
         // Auto-hide after 3 seconds if showing
         if (this.selectedMessageId() === messageId) {
             this.timestampTimeout = setTimeout(() => {
@@ -12649,7 +12677,7 @@ class DsMobileChatModalComponent {
         return date.toLocaleTimeString('da-DK', {
             hour: '2-digit',
             minute: '2-digit',
-            hour12: false
+            hour12: false,
         });
     }
     /**
@@ -12672,11 +12700,12 @@ class DsMobileChatModalComponent {
             // 1. It's the first message
             // 2. More than threshold minutes have passed since last message
             // 3. Date changed (new day)
-            if (!currentGroup || this.shouldStartNewGroup(currentGroup.timestamp, messageDate, thresholdMinutes)) {
+            if (!currentGroup ||
+                this.shouldStartNewGroup(currentGroup.timestamp, messageDate, thresholdMinutes)) {
                 currentGroup = {
                     timestamp: messageDate,
                     displayTimestamp: this.formatGroupTimestamp(messageDate),
-                    messages: []
+                    messages: [],
                 };
                 groups.push(currentGroup);
             }
@@ -12710,7 +12739,7 @@ class DsMobileChatModalComponent {
         const timeStr = date.toLocaleTimeString('da-DK', {
             hour: '2-digit',
             minute: '2-digit',
-            hour12: false
+            hour12: false,
         });
         // Today: "14:34"
         if (messageDate.getTime() === today.getTime()) {
@@ -12723,12 +12752,12 @@ class DsMobileChatModalComponent {
         // This week: "Mandag, 14:34"
         const daysAgo = Math.floor((today.getTime() - messageDate.getTime()) / (1000 * 60 * 60 * 24));
         if (daysAgo < 7) {
-            return date.toLocaleDateString('da-DK', { weekday: 'long' }) + `, ${timeStr}`;
+            return (date.toLocaleDateString('da-DK', { weekday: 'long' }) + `, ${timeStr}`);
         }
         // Older: "15. jan, 14:34" or "20. dec. 2024, 14:34" if different year
         const dateFormat = {
             month: 'short',
-            day: 'numeric'
+            day: 'numeric',
         };
         if (date.getFullYear() !== now.getFullYear()) {
             dateFormat.year = 'numeric';
@@ -12741,7 +12770,7 @@ class DsMobileChatModalComponent {
      * and calculates cluster positions for border radius styling
      */
     addDisplayMetadata(groups) {
-        return groups.map(group => {
+        return groups.map((group) => {
             const messagesWithDisplay = [];
             for (let i = 0; i < group.messages.length; i++) {
                 const currentMsg = group.messages[i];
@@ -12770,12 +12799,12 @@ class DsMobileChatModalComponent {
                 messagesWithDisplay.push({
                     ...currentMsg,
                     showAvatar,
-                    clusterPosition
+                    clusterPosition,
                 });
             }
             return {
                 ...group,
-                messages: messagesWithDisplay
+                messages: messagesWithDisplay,
             };
         });
     }
@@ -12789,8 +12818,8 @@ class DsMobileChatModalComponent {
       [hasFixedBottom]="true"
       [enableKeyboardHandling]="true"
       (keyboardWillShow)="handleKeyboardShow($event)"
-      closeButtonLabel="Luk chat">
-
+      closeButtonLabel="Luk chat"
+    >
       <!-- Header Avatar -->
       <ds-avatar-with-badge
         header-leading
@@ -12815,94 +12844,109 @@ class DsMobileChatModalComponent {
             <div class="chat-avatar-name">
               {{ participant().name }}
               @if (participant().verified) {
-                <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
+              <ds-icon
+                name="remixCheckboxCircleFill"
+                size="24px"
+                [style.color]="'var(--color-primary-base)'"
+              ></ds-icon>
               }
             </div>
             @if (participant().role) {
-              <div class="chat-avatar-role">{{ participant().role }}</div>
-            }
-            @if (participant().lastActive) {
-              <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
+            <div class="chat-avatar-role">{{ participant().role }}</div>
+            } @if (participant().lastActive) {
+            <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
             }
           </div>
         </div>
 
         <div class="messages-list">
           @if (messages().length === 0) {
-            <!-- Empty State - Timestamp and System Message -->
-            <div class="timestamp-header">
-              <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
-            </div>
-            
-            <ds-mobile-system-message-banner
-              [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'"
-              [afterTimestamp]="true">
-            </ds-mobile-system-message-banner>
-          } @else {
-            @for (group of messagesWithDisplay(); track group.timestamp) {
-              <!-- Timestamp Header -->
-              <div class="timestamp-header">
-                <span class="timestamp-text">{{ group.displayTimestamp }}</span>
-              </div>
-              
-              <!-- System message example (shown after first timestamp) -->
-              @if ($first) {
-                <ds-mobile-system-message-banner
-                  [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'"
-                  [afterTimestamp]="true">
-                </ds-mobile-system-message-banner>
-              }
-              
-              @for (message of group.messages; track message.id) {
-                <!-- Only show bubble if has content -->
-                @if (message.content.trim()) {
-                  <ds-mobile-message-bubble
-                    [content]="message.content"
-                    [isOwnMessage]="message.isOwnMessage"
-                    [timestamp]="formatMessageTimestamp(message.timestamp)"
-                    [showTimestamp]="selectedMessageId() === message.id"
-                    [avatarInitials]="message.avatarInitials || ''"
-                    [avatarType]="message.avatarType || 'initials'"
-                    [avatarSrc]="message.avatarSrc || ''"
-                    [showAvatar]="message.showAvatar"
-                    [clusterPosition]="message.clusterPosition"
-                    [attachments]="message.attachments"
-                    [clickable]="true"
-                    [isNewMessage]="message.isNewMessage || false"
-                    (messageClick)="handleMessageClick(message.id)"
-                    (attachmentClick)="handleAttachmentClick($event)"
-                    (longPress)="handleMessageLongPress(message)">
-                  </ds-mobile-message-bubble>
-                }
-                
-                <!-- File attachments displayed below message bubble -->
-                @if (message.fileAttachments && message.fileAttachments.length > 0) {
-                  <div class="message-file-attachments" [class.own-message]="message.isOwnMessage">
-                    @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
-                      <!-- Show inline image preview for image attachments -->
-                      @if (fileAttachment.type === 'image') {
-                        <div class="message-image-attachment" (click)="handleImageClick(fileAttachment, message)">
-                          <img 
-                            [src]="fileAttachment.src" 
-                            [alt]="fileAttachment.name || 'Image'" 
-                            class="inline-image">
-                        </div>
-                      } @else {
-                        <!-- Show file card for non-image attachments -->
-                        <ds-mobile-card-inline-file
-                          [fileName]="fileAttachment.name || 'Unknown file'"
-                          [fileSize]="fileAttachment.size || ''"
-                          [variant]="getFileVariant(fileAttachment.type)"
-                          [layout]="'compact'"
-                          (fileClick)="handleFileAttachmentClick(fileAttachment)">
-                        </ds-mobile-card-inline-file>
-                      }
-                    }
-                  </div>
-                }
-              }
-            }
+          <!-- Empty State - Timestamp and System Message -->
+          <div class="timestamp-header">
+            <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
+          </div>
+
+          <ds-mobile-system-message-banner
+            [message]="
+              participant().name +
+              ' har overtaget din henvendelse og vil kontakte dig snart.'
+            "
+            [afterTimestamp]="true"
+          >
+          </ds-mobile-system-message-banner>
+          } @else { @for (group of messagesWithDisplay(); track group.timestamp)
+          {
+          <!-- Timestamp Header -->
+          <div class="timestamp-header">
+            <span class="timestamp-text">{{ group.displayTimestamp }}</span>
+          </div>
+
+          <!-- System message example (shown after first timestamp) -->
+          @if ($first) {
+          <ds-mobile-system-message-banner
+            [message]="
+              participant().name +
+              ' har overtaget din henvendelse og vil kontakte dig snart.'
+            "
+            [afterTimestamp]="true"
+          >
+          </ds-mobile-system-message-banner>
+          } @for (message of group.messages; track message.id) {
+          <!-- Only show bubble if has content -->
+          @if (message.content.trim()) {
+          <ds-mobile-message-bubble
+            [content]="message.content"
+            [isOwnMessage]="message.isOwnMessage"
+            [timestamp]="formatMessageTimestamp(message.timestamp)"
+            [showTimestamp]="selectedMessageId() === message.id"
+            [avatarInitials]="message.avatarInitials || ''"
+            [avatarType]="message.avatarType || 'initials'"
+            [avatarSrc]="message.avatarSrc || ''"
+            [showAvatar]="message.showAvatar"
+            [clusterPosition]="message.clusterPosition"
+            [attachments]="message.attachments"
+            [clickable]="true"
+            [isNewMessage]="message.isNewMessage || false"
+            (messageClick)="handleMessageClick(message.id)"
+            (attachmentClick)="handleAttachmentClick($event)"
+            (longPress)="handleMessageLongPress(message)"
+          >
+          </ds-mobile-message-bubble>
           }
+
+          <!-- File attachments displayed below message bubble -->
+          @if (message.fileAttachments && message.fileAttachments.length > 0) {
+          <div
+            class="message-file-attachments"
+            [class.own-message]="message.isOwnMessage"
+          >
+            @for (fileAttachment of message.fileAttachments; track
+            fileAttachment.id) {
+            <!-- Show inline image preview for image attachments -->
+            @if (fileAttachment.type === 'image') {
+            <div
+              class="message-image-attachment"
+              (click)="handleImageClick(fileAttachment, message)"
+            >
+              <img
+                [src]="fileAttachment.src"
+                [alt]="fileAttachment.name || 'Image'"
+                class="inline-image"
+              />
+            </div>
+            } @else {
+            <!-- Show file card for non-image attachments -->
+            <ds-mobile-card-inline-file
+              [fileName]="fileAttachment.name || 'Unknown file'"
+              [fileSize]="fileAttachment.size || ''"
+              [variant]="getFileVariant(fileAttachment.type)"
+              [layout]="'compact'"
+              (fileClick)="handleFileAttachmentClick(fileAttachment)"
+            >
+            </ds-mobile-card-inline-file>
+            } }
+          </div>
+          } } } }
         </div>
       </div>
 
@@ -12917,11 +12961,12 @@ class DsMobileChatModalComponent {
           [showAttachmentButton]="true"
           (messageSent)="handleMessageSent($event)"
           (attachmentClicked)="handleComposerAttachmentClick()"
-          (attachmentsChanged)="handleAttachmentsChanged()">
+          (attachmentsChanged)="handleAttachmentsChanged()"
+        >
         </ds-mobile-message-composer>
       </div>
     </ds-mobile-modal-base>
-  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ":host ::ng-deep .modal-content-container{padding-top:0}.chat-messages-container{display:flex;flex-direction:column;width:100%}.chat-avatar-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px 0;background:var(--color-background-neutral-primary, #ffffff)}.chat-avatar-info{display:flex;flex-direction:column;align-items:center;gap:4px}.chat-avatar-name{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.chat-avatar-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-secondary, #666666)}.chat-avatar-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:4px}.messages-list{display:flex;flex-direction:column;width:100%;padding:16px 20px 0;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.timestamp-header{display:flex;justify-content:center;margin:16px 0 8px}.timestamp-text{font-family:Brockmann,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-secondary);padding:4px 12px}.message-file-attachments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 20px 0 60px;max-width:100%}.message-file-attachments.own-message{padding:0 0 0 96px;align-items:flex-end}.message-file-attachments ds-mobile-card-inline-file{max-width:280px;width:100%}.message-image-attachment{width:96px;height:96px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;transition:transform .2s ease;border:1px solid var(--border-color-default, #e5e5e5)}.message-image-attachment:active{transform:scale(.98)}.message-image-attachment .inline-image{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileMessageComposerComponent, selector: "ds-mobile-message-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "placeholder", "sendButtonLabel", "attachmentButtonLabel", "showAttachmentButton", "editIndicatorText", "replyIndicatorText", "enableMentions", "mentionUsers", "autoFocus"], outputs: ["messageSent", "editCancelled", "replyCancelled", "mentionSelected", "attachmentClicked", "attachmentsChanged"] }, { kind: "component", type: DsMobileMessageBubbleComponent, selector: "ds-mobile-message-bubble", inputs: ["content", "isOwnMessage", "senderName", "timestamp", "showTimestamp", "avatarInitials", "avatarType", "avatarSrc", "showAvatar", "clusterPosition", "attachments", "clickable", "isNewMessage"], outputs: ["attachmentClick", "longPress", "messageClick"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileSystemMessageBannerComponent, selector: "ds-mobile-system-message-banner", inputs: ["message", "iconName", "afterTimestamp"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
+  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ":host ::ng-deep .modal-content-container{padding-top:0}.chat-messages-container{display:flex;flex-direction:column;width:100%}.chat-avatar-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px 0;background:var(--color-background-neutral-primary, #ffffff)}.chat-avatar-info{display:flex;flex-direction:column;align-items:center;gap:4px}.chat-avatar-name{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.chat-avatar-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-secondary, #666666)}.chat-avatar-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:4px}.messages-list{display:flex;flex-direction:column;width:100%;padding:16px 20px 0;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.timestamp-header{display:flex;justify-content:center;margin:16px 0 8px}.timestamp-text{font-family:Brockmann,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-secondary);padding:4px 12px}.message-file-attachments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 20px 0 60px;max-width:100%}.message-file-attachments.own-message{padding:0 0 0 96px;align-items:flex-end}.message-file-attachments ds-mobile-card-inline-file{max-width:280px;width:100%}.message-image-attachment{width:96px;height:96px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;transition:transform .2s ease;border:1px solid var(--border-color-default, #e5e5e5)}.message-image-attachment:active{transform:scale(.98)}.message-image-attachment .inline-image{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileMessageComposerComponent, selector: "ds-mobile-message-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "placeholder", "sendButtonLabel", "attachmentButtonLabel", "showAttachmentButton", "editIndicatorText", "replyIndicatorText", "enableMentions", "mentionUsers", "autoFocus"], outputs: ["messageSent", "editCancelled", "replyCancelled", "mentionSelected", "attachmentClicked", "attachmentsChanged"] }, { kind: "component", type: DsMobileMessageBubbleComponent, selector: "ds-mobile-message-bubble", inputs: ["content", "isOwnMessage", "senderName", "timestamp", "showTimestamp", "avatarInitials", "avatarType", "avatarSrc", "showAvatar", "clusterPosition", "attachments", "clickable", "isNewMessage"], outputs: ["attachmentClick", "longPress", "messageClick"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileSystemMessageBannerComponent, selector: "ds-mobile-system-message-banner", inputs: ["message", "iconName", "afterTimestamp"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalComponent, decorators: [{
             type: Component,
@@ -12933,8 +12978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         DsMobileModalBaseComponent,
                         DsMobileCardInlineFileComponent,
                         DsMobileSystemMessageBannerComponent,
-                        DsMobileEmptyStateComponent,
-                        DsIconComponent
+                        DsIconComponent,
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
     <ds-mobile-modal-base
       [loading]="loading"
@@ -12944,8 +12988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       [hasFixedBottom]="true"
       [enableKeyboardHandling]="true"
       (keyboardWillShow)="handleKeyboardShow($event)"
-      closeButtonLabel="Luk chat">
-
+      closeButtonLabel="Luk chat"
+    >
       <!-- Header Avatar -->
       <ds-avatar-with-badge
         header-leading
@@ -12970,94 +13014,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             <div class="chat-avatar-name">
               {{ participant().name }}
               @if (participant().verified) {
-                <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
+              <ds-icon
+                name="remixCheckboxCircleFill"
+                size="24px"
+                [style.color]="'var(--color-primary-base)'"
+              ></ds-icon>
               }
             </div>
             @if (participant().role) {
-              <div class="chat-avatar-role">{{ participant().role }}</div>
-            }
-            @if (participant().lastActive) {
-              <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
+            <div class="chat-avatar-role">{{ participant().role }}</div>
+            } @if (participant().lastActive) {
+            <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
             }
           </div>
         </div>
 
         <div class="messages-list">
           @if (messages().length === 0) {
-            <!-- Empty State - Timestamp and System Message -->
-            <div class="timestamp-header">
-              <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
-            </div>
-            
-            <ds-mobile-system-message-banner
-              [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'"
-              [afterTimestamp]="true">
-            </ds-mobile-system-message-banner>
-          } @else {
-            @for (group of messagesWithDisplay(); track group.timestamp) {
-              <!-- Timestamp Header -->
-              <div class="timestamp-header">
-                <span class="timestamp-text">{{ group.displayTimestamp }}</span>
-              </div>
-              
-              <!-- System message example (shown after first timestamp) -->
-              @if ($first) {
-                <ds-mobile-system-message-banner
-                  [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'"
-                  [afterTimestamp]="true">
-                </ds-mobile-system-message-banner>
-              }
-              
-              @for (message of group.messages; track message.id) {
-                <!-- Only show bubble if has content -->
-                @if (message.content.trim()) {
-                  <ds-mobile-message-bubble
-                    [content]="message.content"
-                    [isOwnMessage]="message.isOwnMessage"
-                    [timestamp]="formatMessageTimestamp(message.timestamp)"
-                    [showTimestamp]="selectedMessageId() === message.id"
-                    [avatarInitials]="message.avatarInitials || ''"
-                    [avatarType]="message.avatarType || 'initials'"
-                    [avatarSrc]="message.avatarSrc || ''"
-                    [showAvatar]="message.showAvatar"
-                    [clusterPosition]="message.clusterPosition"
-                    [attachments]="message.attachments"
-                    [clickable]="true"
-                    [isNewMessage]="message.isNewMessage || false"
-                    (messageClick)="handleMessageClick(message.id)"
-                    (attachmentClick)="handleAttachmentClick($event)"
-                    (longPress)="handleMessageLongPress(message)">
-                  </ds-mobile-message-bubble>
-                }
-                
-                <!-- File attachments displayed below message bubble -->
-                @if (message.fileAttachments && message.fileAttachments.length > 0) {
-                  <div class="message-file-attachments" [class.own-message]="message.isOwnMessage">
-                    @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
-                      <!-- Show inline image preview for image attachments -->
-                      @if (fileAttachment.type === 'image') {
-                        <div class="message-image-attachment" (click)="handleImageClick(fileAttachment, message)">
-                          <img 
-                            [src]="fileAttachment.src" 
-                            [alt]="fileAttachment.name || 'Image'" 
-                            class="inline-image">
-                        </div>
-                      } @else {
-                        <!-- Show file card for non-image attachments -->
-                        <ds-mobile-card-inline-file
-                          [fileName]="fileAttachment.name || 'Unknown file'"
-                          [fileSize]="fileAttachment.size || ''"
-                          [variant]="getFileVariant(fileAttachment.type)"
-                          [layout]="'compact'"
-                          (fileClick)="handleFileAttachmentClick(fileAttachment)">
-                        </ds-mobile-card-inline-file>
-                      }
-                    }
-                  </div>
-                }
-              }
-            }
+          <!-- Empty State - Timestamp and System Message -->
+          <div class="timestamp-header">
+            <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
+          </div>
+
+          <ds-mobile-system-message-banner
+            [message]="
+              participant().name +
+              ' har overtaget din henvendelse og vil kontakte dig snart.'
+            "
+            [afterTimestamp]="true"
+          >
+          </ds-mobile-system-message-banner>
+          } @else { @for (group of messagesWithDisplay(); track group.timestamp)
+          {
+          <!-- Timestamp Header -->
+          <div class="timestamp-header">
+            <span class="timestamp-text">{{ group.displayTimestamp }}</span>
+          </div>
+
+          <!-- System message example (shown after first timestamp) -->
+          @if ($first) {
+          <ds-mobile-system-message-banner
+            [message]="
+              participant().name +
+              ' har overtaget din henvendelse og vil kontakte dig snart.'
+            "
+            [afterTimestamp]="true"
+          >
+          </ds-mobile-system-message-banner>
+          } @for (message of group.messages; track message.id) {
+          <!-- Only show bubble if has content -->
+          @if (message.content.trim()) {
+          <ds-mobile-message-bubble
+            [content]="message.content"
+            [isOwnMessage]="message.isOwnMessage"
+            [timestamp]="formatMessageTimestamp(message.timestamp)"
+            [showTimestamp]="selectedMessageId() === message.id"
+            [avatarInitials]="message.avatarInitials || ''"
+            [avatarType]="message.avatarType || 'initials'"
+            [avatarSrc]="message.avatarSrc || ''"
+            [showAvatar]="message.showAvatar"
+            [clusterPosition]="message.clusterPosition"
+            [attachments]="message.attachments"
+            [clickable]="true"
+            [isNewMessage]="message.isNewMessage || false"
+            (messageClick)="handleMessageClick(message.id)"
+            (attachmentClick)="handleAttachmentClick($event)"
+            (longPress)="handleMessageLongPress(message)"
+          >
+          </ds-mobile-message-bubble>
           }
+
+          <!-- File attachments displayed below message bubble -->
+          @if (message.fileAttachments && message.fileAttachments.length > 0) {
+          <div
+            class="message-file-attachments"
+            [class.own-message]="message.isOwnMessage"
+          >
+            @for (fileAttachment of message.fileAttachments; track
+            fileAttachment.id) {
+            <!-- Show inline image preview for image attachments -->
+            @if (fileAttachment.type === 'image') {
+            <div
+              class="message-image-attachment"
+              (click)="handleImageClick(fileAttachment, message)"
+            >
+              <img
+                [src]="fileAttachment.src"
+                [alt]="fileAttachment.name || 'Image'"
+                class="inline-image"
+              />
+            </div>
+            } @else {
+            <!-- Show file card for non-image attachments -->
+            <ds-mobile-card-inline-file
+              [fileName]="fileAttachment.name || 'Unknown file'"
+              [fileSize]="fileAttachment.size || ''"
+              [variant]="getFileVariant(fileAttachment.type)"
+              [layout]="'compact'"
+              (fileClick)="handleFileAttachmentClick(fileAttachment)"
+            >
+            </ds-mobile-card-inline-file>
+            } }
+          </div>
+          } } } }
         </div>
       </div>
 
@@ -13072,7 +13131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           [showAttachmentButton]="true"
           (messageSent)="handleMessageSent($event)"
           (attachmentClicked)="handleComposerAttachmentClick()"
-          (attachmentsChanged)="handleAttachmentsChanged()">
+          (attachmentsChanged)="handleAttachmentsChanged()"
+        >
         </ds-mobile-message-composer>
       </div>
     </ds-mobile-modal-base>
@@ -13154,17 +13214,17 @@ class DsMobileChatModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(chatData, options) {
-        console.log('[ChatModal] Opening with data:', chatData);
+        // console.log('[ChatModal] Opening with data:', chatData);
         const modal = await this.createModal(DsMobileChatModalComponent, {
             chatData: chatData,
             loading: options?.loading ?? false,
-            error: options?.error
+            error: options?.error,
         }, {
             keyboardClose: true, // Keep keyboard close behavior for this modal
         });
-        console.log('[ChatModal] Modal created, presenting...');
+        // console.log('[ChatModal] Modal created, presenting...');
         await modal.present();
-        console.log('[ChatModal] Modal presented');
+        // console.log('[ChatModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalService, providedIn: 'root' });
@@ -13172,7 +13232,7 @@ class DsMobileChatModalService extends BaseModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -13695,17 +13755,17 @@ class DsMobileNewInquiryModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(options) {
-        console.log('[NewInquiryModal] Opening modal with options:', options);
+        // console.log('[NewInquiryModal] Opening modal with options:', options);
         const modal = await this.createModal(DsMobileNewInquiryModalComponent, {
             onSubmit: options?.onSubmit,
             loading: options?.loading ?? false,
-            error: options?.error
+            error: options?.error,
         }, {
             keyboardClose: false, // Don't close on keyboard hide for this modal
         });
-        console.log('[NewInquiryModal] Modal created, presenting...');
+        // console.log('[NewInquiryModal] Modal created, presenting...');
         await modal.present();
-        console.log('[NewInquiryModal] Modal presented');
+        // console.log('[NewInquiryModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileNewInquiryModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileNewInquiryModalService, providedIn: 'root' });
@@ -13713,7 +13773,7 @@ class DsMobileNewInquiryModalService extends BaseModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileNewInquiryModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -13944,7 +14004,7 @@ class DsMobileHandbookDetailModalComponent {
         variant: 'light-purple',
         iconName: 'remixFolder3Line',
         itemCount: 0,
-        items: []
+        items: [],
     }, ...(ngDevMode ? [{ debugName: "handbook" }] : []));
     ngOnInit() {
         // Initialize handbook data from input
@@ -13965,41 +14025,27 @@ class DsMobileHandbookDetailModalComponent {
         const hasImages = item.images && item.images.length > 0;
         const hasContacts = item.contacts && item.contacts.length > 0;
         const hasAttachments = item.attachments && item.attachments.length > 0;
-        // Case 1: Only one type of content - keep as is
-        const contentTypeCount = [hasImages, hasContacts, hasAttachments].filter(Boolean).length;
-        if (contentTypeCount <= 1) {
-            return [item];
-        }
-        // Case 2: Has images + contacts (allowed together) but no attachments
-        if (hasImages && hasContacts && !hasAttachments) {
-            return [item];
-        }
-        // Case 3: Violates rules - need to split
-        // First item: Text + Images (if present)
-        if (hasImages) {
+        const hasContent = hasContacts || hasAttachments;
+        // Case 1: Images AND other content -> Split Pictures from (Contacts + Attachments)
+        if (hasImages && hasContent) {
+            // Part 1: Images
             displayItems.push({
                 title: item.title,
                 description: item.description,
-                images: item.images
-            });
-        }
-        // Second item: Text + Contacts (if present and no images shown yet)
-        if (hasContacts) {
-            displayItems.push({
-                title: item.title,
-                description: hasImages ? undefined : item.description, // Only show description if not shown before
-                contacts: item.contacts
+                images: item.images,
             });
-        }
-        // Third item: Text + Attachments (if present)
-        if (hasAttachments) {
+            // Part 2: Contacts + Attachments
             displayItems.push({
-                title: item.title,
-                description: (!hasImages && !hasContacts) ? item.description : undefined, // Only show description if not shown before
-                attachments: item.attachments
+                title: '', // No title for the continuation
+                description: undefined,
+                contacts: item.contacts,
+                attachments: item.attachments,
             });
+            return displayItems;
         }
-        return displayItems;
+        // Case 2: No splitting needed (Images only, or No Images)
+        // This allows Contacts and Attachments to coexist in one item
+        return [item];
     }
     /**
      * Get all display items with enforced content structure rules applied
@@ -14025,7 +14071,7 @@ class DsMobileHandbookDetailModalComponent {
      */
     handleAttachmentClick(attachment) {
         console.log('Attachment clicked:', attachment);
-        // Implement attachment action (e.g., open file viewer, download, etc.)
+        // Attachment action is now handled by DsMobileCardInlineFileComponent via fileUrl input
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileHandbookDetailModalComponent, isStandalone: true, selector: "ds-mobile-handbook-detail-modal", inputs: { handbookData: "handbookData", loading: "loading", error: "error" }, ngImport: i0, template: `
@@ -14034,88 +14080,90 @@ class DsMobileHandbookDetailModalComponent {
       [error]="error"
       [headerTitle]="handbook().title"
       [headerMeta]="handbook().itemCount + ' emner'"
-      closeButtonLabel="Luk">
-
+      closeButtonLabel="Luk"
+    >
       <!-- Header Folder Icon -->
       <ds-mobile-handbook-folder-mini
         header-leading
         [variant]="handbook().variant"
-        [iconName]="handbook().iconName">
+        [iconName]="handbook().iconName"
+      >
       </ds-mobile-handbook-folder-mini>
 
       <!-- Content (main content slot) -->
       <div class="handbook-detail-container">
-        @if (handbook().items && handbook().items!.length > 0) {
-            @for (item of getDisplayItems(); track item.title + $index; let isLast = $last) {
-              <div class="handbook-item" [class.last-item]="isLast">
-                <div class="item-text-group">
-                <h2 class="item-title">{{ item.title }}</h2>
-                
-                @if (item.description) {
-                  <p class="item-description">{{ item.description }}</p>
-                }
-                </div>
-                
-                <!-- Images -->
-                @if (item.images && item.images.length > 0) {
-                  <ds-mobile-swiper [slideWidth]="item.images.length === 1 ? '100%' : '85%'" [gap]="16">
-                    @for (image of item.images; track image) {
-                      <div class="swiper-slide">
-                        <img 
-                          [src]="image" 
-                          [alt]="item.title"
-                          class="item-image"
-                        />
-                      </div>
-                    }
-                  </ds-mobile-swiper>
-                }
-                
-                <!-- Contacts -->
-                @if (item.contacts && item.contacts.length > 0) {
-                  <div class="contacts-list">
-                    @for (contact of item.contacts; track contact.name) {
-                      <ds-mobile-card-inline-contact
-                        [name]="contact.name"
-                        [initials]="contact.initials"
-                        [contactPerson]="contact.contactPerson || ''"
-                        [phoneNumber]="contact.phoneNumber || ''"
-                        [clickable]="true"
-                        (contactClick)="handleContactClick(contact)">
-                      </ds-mobile-card-inline-contact>
-                    }
-                  </div>
-                }
-                
-                <!-- Attachments -->
-                @if (item.attachments && item.attachments.length > 0) {
-                  <div class="attachments-list">
-                    @for (attachment of item.attachments; track attachment.name) {
-                      <ds-mobile-card-inline-file
-                        [fileName]="attachment.name"
-                        [variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
-                        (fileClick)="handleAttachmentClick(attachment)">
-                      </ds-mobile-card-inline-file>
-                    }
-                  </div>
-                }
-              </div>
+        @if (handbook().items && handbook().items!.length > 0) { @for (item of
+        getDisplayItems(); track item.title + $index; let isLast = $last) {
+        <div class="handbook-item" [class.last-item]="isLast">
+          <div class="item-text-group">
+            @if (item.title) {
+            <h2 class="item-title">{{ item.title }}</h2>
+            } @if (item.description) {
+            <p class="item-description" [innerHTML]="item.description"></p>
             }
-        } @else {
-          <!-- Empty State -->
-          <div class="handbook-empty-state">
-            <img 
-              src="/Assets/Empty%20state-chat.png" 
-              alt="No items yet" 
-              class="empty-state-image"
-            />
-            <h3 class="empty-state-title">No items yet</h3>
-            <p class="empty-state-description">This folder is empty</p>
           </div>
+
+          <!-- Images -->
+          @if (item.images && item.images.length > 0) {
+          <ds-mobile-swiper
+            [slideWidth]="item.images.length === 1 ? '100%' : '85%'"
+            [gap]="16"
+          >
+            @for (image of item.images; track image) {
+            <div class="swiper-slide">
+              <img [src]="image" [alt]="item.title" class="item-image" />
+            </div>
+            }
+          </ds-mobile-swiper>
+          }
+
+          <!-- Contacts -->
+          @if (item.contacts && item.contacts.length > 0) {
+          <div class="contacts-list">
+            @for (contact of item.contacts; track contact.name) {
+            <ds-mobile-card-inline-contact
+              [name]="contact.name"
+              [initials]="contact.initials"
+              [contactPerson]="contact.contactPerson || ''"
+              [phoneNumber]="contact.phoneNumber || ''"
+              [clickable]="true"
+              (contactClick)="handleContactClick(contact)"
+            >
+            </ds-mobile-card-inline-contact>
+            }
+          </div>
+          }
+
+          <!-- Attachments -->
+          @if (item.attachments && item.attachments.length > 0) {
+          <div class="attachments-list">
+            @for (attachment of item.attachments; track attachment.name) {
+            <ds-mobile-card-inline-file
+              [fileName]="attachment.name"
+              [variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
+              [fileUrl]="attachment.url"
+              (fileClick)="handleAttachmentClick(attachment)"
+            >
+            </ds-mobile-card-inline-file>
+            }
+          </div>
+          }
+        </div>
+        } } @else {
+        <!-- Empty State -->
+        <div class="handbook-empty-state">
+          <img
+            src="/Assets/Empty%20state-chat.png"
+            alt="No items yet"
+            class="empty-state-image"
+          />
+          <h3 class="empty-state-title">No items yet</h3>
+          <p class="empty-state-description">This folder is empty</p>
+        </div>
         }
       </div>
     </ds-mobile-modal-base>
-  `, isInline: true, styles: [".handbook-detail-container{display:flex;flex-direction:column;width:100%;flex:1}.handbook-item{width:100%;display:flex;flex-direction:column;gap:24px;padding:24px 20px;border-bottom:1px solid var(--border-color-default)}.handbook-item.last-item{border-bottom:none}.item-text-group{display:flex;flex-direction:column;gap:8px}.item-title{font-family:Brockmann,sans-serif;font-size:16px;font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-image{width:100%;max-width:100%;height:280px;-o-object-fit:cover;object-fit:cover;border-radius:12px;display:block}.contacts-list,.attachments-list{display:flex;flex-direction:column;gap:8px}.handbook-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}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373)}@supports (padding: env(safe-area-inset-bottom)){.handbook-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileHandbookFolderMiniComponent, selector: "ds-mobile-handbook-folder-mini", inputs: ["variant", "iconName"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron"], outputs: ["contactClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }] });
+  `, isInline: true, styles: [".handbook-detail-container{display:flex;flex-direction:column;width:100%;flex:1}.handbook-item{width:100%;display:flex;flex-direction:column;gap:24px;padding:24px 20px;border-bottom:1px solid var(--border-color-default)}.handbook-item.last-item{border-bottom:none}.item-text-group{display:flex;flex-direction:column;gap:8px}.item-title{font-family:Brockmann,sans-serif;font-size:16px;font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);margin:0}.item-image{width:100%;max-width:100%;height:280px;-o-object-fit:cover;object-fit:cover;border-radius:12px;display:block}.contacts-list,.attachments-list{display:flex;flex-direction:column;gap:8px}.handbook-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}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373)}@supports (padding: env(safe-area-inset-bottom)){.handbook-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileHandbookFolderMiniComponent, selector: "ds-mobile-handbook-folder-mini", inputs: ["variant", "iconName"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron"], outputs: ["contactClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalComponent, decorators: [{
             type: Component,
@@ -14125,91 +14173,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         DsMobileCardInlineFileComponent,
                         DsMobileCardInlineContactComponent,
                         DsMobileSwiperComponent,
-                        DsMobileModalBaseComponent
+                        DsMobileModalBaseComponent,
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
     <ds-mobile-modal-base
       [loading]="loading"
       [error]="error"
       [headerTitle]="handbook().title"
       [headerMeta]="handbook().itemCount + ' emner'"
-      closeButtonLabel="Luk">
-
+      closeButtonLabel="Luk"
+    >
       <!-- Header Folder Icon -->
       <ds-mobile-handbook-folder-mini
         header-leading
         [variant]="handbook().variant"
-        [iconName]="handbook().iconName">
+        [iconName]="handbook().iconName"
+      >
       </ds-mobile-handbook-folder-mini>
 
       <!-- Content (main content slot) -->
       <div class="handbook-detail-container">
-        @if (handbook().items && handbook().items!.length > 0) {
-            @for (item of getDisplayItems(); track item.title + $index; let isLast = $last) {
-              <div class="handbook-item" [class.last-item]="isLast">
-                <div class="item-text-group">
-                <h2 class="item-title">{{ item.title }}</h2>
-                
-                @if (item.description) {
-                  <p class="item-description">{{ item.description }}</p>
-                }
-                </div>
-                
-                <!-- Images -->
-                @if (item.images && item.images.length > 0) {
-                  <ds-mobile-swiper [slideWidth]="item.images.length === 1 ? '100%' : '85%'" [gap]="16">
-                    @for (image of item.images; track image) {
-                      <div class="swiper-slide">
-                        <img 
-                          [src]="image" 
-                          [alt]="item.title"
-                          class="item-image"
-                        />
-                      </div>
-                    }
-                  </ds-mobile-swiper>
-                }
-                
-                <!-- Contacts -->
-                @if (item.contacts && item.contacts.length > 0) {
-                  <div class="contacts-list">
-                    @for (contact of item.contacts; track contact.name) {
-                      <ds-mobile-card-inline-contact
-                        [name]="contact.name"
-                        [initials]="contact.initials"
-                        [contactPerson]="contact.contactPerson || ''"
-                        [phoneNumber]="contact.phoneNumber || ''"
-                        [clickable]="true"
-                        (contactClick)="handleContactClick(contact)">
-                      </ds-mobile-card-inline-contact>
-                    }
-                  </div>
-                }
-                
-                <!-- Attachments -->
-                @if (item.attachments && item.attachments.length > 0) {
-                  <div class="attachments-list">
-                    @for (attachment of item.attachments; track attachment.name) {
-                      <ds-mobile-card-inline-file
-                        [fileName]="attachment.name"
-                        [variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
-                        (fileClick)="handleAttachmentClick(attachment)">
-                      </ds-mobile-card-inline-file>
-                    }
-                  </div>
-                }
-              </div>
+        @if (handbook().items && handbook().items!.length > 0) { @for (item of
+        getDisplayItems(); track item.title + $index; let isLast = $last) {
+        <div class="handbook-item" [class.last-item]="isLast">
+          <div class="item-text-group">
+            @if (item.title) {
+            <h2 class="item-title">{{ item.title }}</h2>
+            } @if (item.description) {
+            <p class="item-description" [innerHTML]="item.description"></p>
             }
-        } @else {
-          <!-- Empty State -->
-          <div class="handbook-empty-state">
-            <img 
-              src="/Assets/Empty%20state-chat.png" 
-              alt="No items yet" 
-              class="empty-state-image"
-            />
-            <h3 class="empty-state-title">No items yet</h3>
-            <p class="empty-state-description">This folder is empty</p>
           </div>
+
+          <!-- Images -->
+          @if (item.images && item.images.length > 0) {
+          <ds-mobile-swiper
+            [slideWidth]="item.images.length === 1 ? '100%' : '85%'"
+            [gap]="16"
+          >
+            @for (image of item.images; track image) {
+            <div class="swiper-slide">
+              <img [src]="image" [alt]="item.title" class="item-image" />
+            </div>
+            }
+          </ds-mobile-swiper>
+          }
+
+          <!-- Contacts -->
+          @if (item.contacts && item.contacts.length > 0) {
+          <div class="contacts-list">
+            @for (contact of item.contacts; track contact.name) {
+            <ds-mobile-card-inline-contact
+              [name]="contact.name"
+              [initials]="contact.initials"
+              [contactPerson]="contact.contactPerson || ''"
+              [phoneNumber]="contact.phoneNumber || ''"
+              [clickable]="true"
+              (contactClick)="handleContactClick(contact)"
+            >
+            </ds-mobile-card-inline-contact>
+            }
+          </div>
+          }
+
+          <!-- Attachments -->
+          @if (item.attachments && item.attachments.length > 0) {
+          <div class="attachments-list">
+            @for (attachment of item.attachments; track attachment.name) {
+            <ds-mobile-card-inline-file
+              [fileName]="attachment.name"
+              [variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
+              [fileUrl]="attachment.url"
+              (fileClick)="handleAttachmentClick(attachment)"
+            >
+            </ds-mobile-card-inline-file>
+            }
+          </div>
+          }
+        </div>
+        } } @else {
+        <!-- Empty State -->
+        <div class="handbook-empty-state">
+          <img
+            src="/Assets/Empty%20state-chat.png"
+            alt="No items yet"
+            class="empty-state-image"
+          />
+          <h3 class="empty-state-title">No items yet</h3>
+          <p class="empty-state-description">This folder is empty</p>
+        </div>
         }
       </div>
     </ds-mobile-modal-base>
@@ -14272,17 +14322,17 @@ class DsMobileHandbookDetailModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(handbookData, options) {
-        console.log('[HandbookDetailModal] Opening with data:', handbookData);
+        // console.log('[HandbookDetailModal] Opening with data:', handbookData);
         const modal = await this.createModal(DsMobileHandbookDetailModalComponent, {
             handbookData: handbookData,
             loading: options?.loading ?? false,
-            error: options?.error
+            error: options?.error,
         }, {
             keyboardClose: true, // Keep keyboard close behavior for this modal
         });
-        console.log('[HandbookDetailModal] Modal created, presenting...');
+        // console.log('[HandbookDetailModal] Modal created, presenting...');
         await modal.present();
-        console.log('[HandbookDetailModal] Modal presented');
+        // console.log('[HandbookDetailModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalService, providedIn: 'root' });
@@ -14290,7 +14340,7 @@ class DsMobileHandbookDetailModalService extends BaseModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -14373,7 +14423,7 @@ class DsMobileHandbookFolderComponent {
             'salmon-orange': 'salmon-orange',
             'orange': 'orange',
             'lime-green': 'lime-green',
-            'grey': 'grey'
+            'grey': 'grey',
         };
         const colorName = variantMap[this.variant] || 'light-purple';
         return `var(--color-${colorName}-${suffix})`;
@@ -14422,11 +14472,11 @@ class DsMobileHandbookFolderComponent {
             variant: this.variant,
             iconName: this.iconName,
             itemCount: this.itemCount,
-            items: this.items
+            items: this.items,
         };
         await this.handbookModal.open(handbookData, {
             loading: this.loading,
-            error: this.error
+            error: this.error,
         });
     }
     /**
@@ -14442,55 +14492,43 @@ class DsMobileHandbookFolderComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookFolderComponent, deps: [{ token: DsMobileHandbookDetailModalService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileHandbookFolderComponent, isStandalone: true, selector: "ds-mobile-handbook-folder", inputs: { variant: "variant", iconName: "iconName", itemCount: "itemCount", label: "label", items: "items", loading: "loading", error: "error" }, host: { listeners: { "mouseenter": "open()", "mouseleave": "close()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchCancel()", "click": "onClick()" } }, ngImport: i0, template: `
-    <div class="folder-container" 
-         [class.open]="isOpen()">
+    <div class="folder-container" [class.open]="isOpen()">
       <!-- Folder Tab SVG -->
-      <svg 
-        class="folder-tab" 
-        width="101" 
-        height="24" 
-        viewBox="0 0 101 24" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg">
-        <path 
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
-          [attr.fill]="getColorVar('strong')"/>
+      <svg class="folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
+          [attr.fill]="getColorVar('strong')"
+        />
       </svg>
-      
+
       <!-- Folder Back -->
       <div class="folder-back" [style.background-color]="getColorVar('strong')">
         <!-- Page Sheets -->
         @for (sheet of getPageSheets(); track $index) {
-          <div class="page-sheet"></div>
+        <div class="page-sheet"></div>
         }
-        
+
         <!-- Folder Front -->
-        <div 
-          class="folder-front" 
-          [style.--border-color]="getColorVar('strong')"
-          [style.background-color]="getColorVar('base')">
+        <div class="folder-front" [style.--border-color]="getColorVar('strong')" [style.background-color]="getColorVar('base')">
           <!-- Icon (Centered) -->
           <div class="folder-icon">
-            <ds-icon 
-              [name]="iconName" 
-              [size]="'32px'"
-              [style.color]="'white'" />
+            <ds-icon [name]="iconName" [size]="'32px'" [style.color]="'white'" />
           </div>
         </div>
       </div>
     </div>
-    
+
     <!-- Label and Item Count -->
     <div class="folder-label-container">
       <div class="folder-label ui-sm-semiBold">{{ label }}</div>
       <div class="item-count ui-sm-regular" [style.color]="'var(--color-text-secondary, #6b7280)'">
         @if (loading) {
-          <span class="loading-indicator">Loading...</span>
+        <span class="loading-indicator">Loading...</span>
         } @else if (error) {
-          <span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
+        <span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
         } @else {
-          <span>{{ itemCount }}</span>
-          <span class="item-count-label">emner</span>
+        <span>{{ itemCount }}</span>
+        <span class="item-count-label">emner</span>
         }
       </div>
     </div>
@@ -14499,55 +14537,43 @@ class DsMobileHandbookFolderComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookFolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ds-mobile-handbook-folder', standalone: true, imports: [CommonModule, DsIconComponent], template: `
-    <div class="folder-container" 
-         [class.open]="isOpen()">
+    <div class="folder-container" [class.open]="isOpen()">
       <!-- Folder Tab SVG -->
-      <svg 
-        class="folder-tab" 
-        width="101" 
-        height="24" 
-        viewBox="0 0 101 24" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg">
-        <path 
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
-          [attr.fill]="getColorVar('strong')"/>
+      <svg class="folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
+          [attr.fill]="getColorVar('strong')"
+        />
       </svg>
-      
+
       <!-- Folder Back -->
       <div class="folder-back" [style.background-color]="getColorVar('strong')">
         <!-- Page Sheets -->
         @for (sheet of getPageSheets(); track $index) {
-          <div class="page-sheet"></div>
+        <div class="page-sheet"></div>
         }
-        
+
         <!-- Folder Front -->
-        <div 
-          class="folder-front" 
-          [style.--border-color]="getColorVar('strong')"
-          [style.background-color]="getColorVar('base')">
+        <div class="folder-front" [style.--border-color]="getColorVar('strong')" [style.background-color]="getColorVar('base')">
           <!-- Icon (Centered) -->
           <div class="folder-icon">
-            <ds-icon 
-              [name]="iconName" 
-              [size]="'32px'"
-              [style.color]="'white'" />
+            <ds-icon [name]="iconName" [size]="'32px'" [style.color]="'white'" />
           </div>
         </div>
       </div>
     </div>
-    
+
     <!-- Label and Item Count -->
     <div class="folder-label-container">
       <div class="folder-label ui-sm-semiBold">{{ label }}</div>
       <div class="item-count ui-sm-regular" [style.color]="'var(--color-text-secondary, #6b7280)'">
         @if (loading) {
-          <span class="loading-indicator">Loading...</span>
+        <span class="loading-indicator">Loading...</span>
         } @else if (error) {
-          <span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
+        <span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
         } @else {
-          <span>{{ itemCount }}</span>
-          <span class="item-count-label">emner</span>
+        <span>{{ itemCount }}</span>
+        <span class="item-count-label">emner</span>
         }
       </div>
     </div>
@@ -15916,7 +15942,7 @@ class MobileCommunityPageComponent {
         </div>
       </ds-mobile-content>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".post-feed,.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}ion-infinite-scroll{--color: var(--color-primary-surface)}ion-infinite-scroll-content{--color: var(--color-primary-surface)}ion-infinite-scroll-content::part(spinner){color:var(--color-primary-surface)}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "clickable"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout"], outputs: ["fileClick"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "author", "maxVisible"], outputs: ["photoClick"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }] });
+  `, isInline: true, styles: [".post-feed,.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}ion-infinite-scroll{--color: var(--color-primary-surface)}ion-infinite-scroll-content{--color: var(--color-primary-surface)}ion-infinite-scroll-content::part(spinner){color:var(--color-primary-surface)}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "clickable"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "author", "maxVisible"], outputs: ["photoClick"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MobileCommunityPageComponent, decorators: [{
             type: Component,
@@ -16156,58 +16182,72 @@ class MobileHandbookPageComponent {
             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' }
-            ]
+                {
+                    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' }
-            ]
+            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' }
-            ]
+                {
+                    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' }
-            ]
+                {
+                    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' }
-            ]
+                { 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' }
-            ]
+                {
+                    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' }
-            ]
+            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' }
-            ]
-        }
+            attachments: [{ name: 'Affaldsretningslinjer.pdf', type: 'pdf' }],
+        },
     ];
     // Safety Equipment folder data
     sikkerhedsudstyrItems = [
@@ -16216,30 +16256,45 @@ class MobileHandbookPageComponent {
             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'
-            ]
+                '/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' }
-            ]
+                {
+                    name: 'MediTech Service',
+                    initials: 'M',
+                    contactPerson: 'John Mortensen',
+                    phoneNumber: '+45 12 34 56 78',
+                },
+            ],
+            attachments: [
+                {
+                    name: 'Brandplan.pdf',
+                    type: 'pdf',
+                    url: 'https://portal-api.propbinder.com/Handbook/GetFile/50145267-d9a2-448b-a0e1-1af39d344818',
+                },
+            ],
         },
         {
             title: 'Brandslukningsudstyr',
             description: 'Brandslukkere placeret på hver etage. Eftersyn udføres årligt. Brandalarm aktiveres automatisk ved røg.',
-            attachments: [
-                { name: 'Brandplan.pdf', type: 'pdf' }
-            ]
+            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' }
-            ]
-        }
+                {
+                    name: 'SecureHome A/S',
+                    initials: 'S',
+                    contactPerson: 'Henrik Johansen',
+                    phoneNumber: '+45 98 76 54 32',
+                },
+            ],
+        },
     ];
     // Service Contracts folder data
     serviceContractsItems = [
@@ -16247,100 +16302,124 @@ class MobileHandbookPageComponent {
             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' }
-            ]
+                {
+                    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' }
-            ]
+                { 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'
-            ]
+                '/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' }
-            ]
+                {
+                    name: 'Green Gardens ApS',
+                    initials: 'G',
+                    contactPerson: 'Michael Olsen',
+                    phoneNumber: '+45 90 12 34 56',
+                },
+            ],
         },
         {
             title: 'Haveserviceaftale',
-            attachments: [
-                { name: 'Haveserviceaftale.pdf', type: 'pdf' }
-            ]
+            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' }
-            ]
+                {
+                    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' }
-            ]
+                {
+                    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' }
-            ]
-        }
+                { 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'
-            ]
+            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' }
-            ]
+                {
+                    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' }
-            ]
+                { 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'
-            ],
+            images: ['/Assets/Dummy-photos/handyman.jpg'],
             contacts: [
-                { name: 'Hausmeister Service', initials: 'H', contactPerson: 'Erik Sørensen', phoneNumber: '+45 56 78 90 12' }
-            ]
+                {
+                    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' }
-            ]
-        }
+                { name: 'Udlånspolitik.pdf', type: 'pdf' },
+            ],
+        },
     ];
     constructor(userService) {
         this.userService = userService;
@@ -16358,8 +16437,8 @@ class MobileHandbookPageComponent {
       title="Håndbog"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
-      (refresh)="handleRefresh($event)">
-      
+      (refresh)="handleRefresh($event)"
+    >
       <ds-mobile-content>
         <ds-mobile-content-section>
           <div class="folders-grid">
@@ -16368,7 +16447,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixLightbulbLine'"
               [itemCount]="8"
               [label]="'Forsyninger'"
-              [items]="utilitiesItems">
+              [items]="utilitiesItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16376,7 +16456,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixKey2Line'"
               [itemCount]="4"
               [label]="'Sikkerhedsudstyr'"
-              [items]="sikkerhedsudstyrItems">
+              [items]="sikkerhedsudstyrItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16384,7 +16465,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixFileList3Line'"
               [itemCount]="8"
               [label]="'Servicekontrakter'"
-              [items]="serviceContractsItems">
+              [items]="serviceContractsItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16392,7 +16474,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixToolsLine'"
               [itemCount]="5"
               [label]="'Udstyr'"
-              [items]="equipmentItems">
+              [items]="equipmentItems"
+            >
             </ds-mobile-handbook-folder>
           </div>
         </ds-mobile-content-section>
@@ -16406,14 +16489,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         DsMobilePageMainComponent,
                         DsMobileContentComponent,
                         DsMobileContentSectionComponent,
-                        DsMobileHandbookFolderComponent
+                        DsMobileHandbookFolderComponent,
                     ], template: `
     <ds-mobile-page-main
       title="Håndbog"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
-      (refresh)="handleRefresh($event)">
-      
+      (refresh)="handleRefresh($event)"
+    >
       <ds-mobile-content>
         <ds-mobile-content-section>
           <div class="folders-grid">
@@ -16422,7 +16505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
               [iconName]="'remixLightbulbLine'"
               [itemCount]="8"
               [label]="'Forsyninger'"
-              [items]="utilitiesItems">
+              [items]="utilitiesItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16430,7 +16514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
               [iconName]="'remixKey2Line'"
               [itemCount]="4"
               [label]="'Sikkerhedsudstyr'"
-              [items]="sikkerhedsudstyrItems">
+              [items]="sikkerhedsudstyrItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16438,7 +16523,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
               [iconName]="'remixFileList3Line'"
               [itemCount]="8"
               [label]="'Servicekontrakter'"
-              [items]="serviceContractsItems">
+              [items]="serviceContractsItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16446,7 +16532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
               [iconName]="'remixToolsLine'"
               [itemCount]="5"
               [label]="'Udstyr'"
-              [items]="equipmentItems">
+              [items]="equipmentItems"
+            >
             </ds-mobile-handbook-folder>
           </div>
         </ds-mobile-content-section>
@@ -16623,7 +16710,7 @@ class MobileHomePageComponent {
         </div>
       </ds-mobile-content>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".section-headline{font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;padding:0}.pinned-posts-section{margin:-12px -12px 0;padding:0 12px 12px;box-shadow:var(--box-shadow-sm);border-radius:16px;border:1px solid var(--border-color-default)}.pinned-posts-section .section-headline{padding:16px 0}.content-section{display:flex;flex-direction:column;gap:12px}.items-container{display:flex;flex-direction:column;gap:4px}\n"], dependencies: [{ kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileHeaderContentComponent, selector: "ds-mobile-header-content" }, { kind: "component", type: DsMobileHeaderContentTileComponent, selector: "ds-mobile-header-content-tile" }, { kind: "component", type: TileIconComponent, selector: "tile-icon" }, { kind: "component", type: TileContentComponent, selector: "tile-content" }, { kind: "component", type: TileLabelComponent, selector: "tile-label" }, { kind: "component", type: TileValueComponent, selector: "tile-value" }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron"], outputs: ["contactClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout"], outputs: ["fileClick"] }, { 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: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { 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"] }] });
+  `, isInline: true, styles: [".section-headline{font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;padding:0}.pinned-posts-section{margin:-12px -12px 0;padding:0 12px 12px;box-shadow:var(--box-shadow-sm);border-radius:16px;border:1px solid var(--border-color-default)}.pinned-posts-section .section-headline{padding:16px 0}.content-section{display:flex;flex-direction:column;gap:12px}.items-container{display:flex;flex-direction:column;gap:4px}\n"], dependencies: [{ kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileHeaderContentComponent, selector: "ds-mobile-header-content" }, { kind: "component", type: DsMobileHeaderContentTileComponent, selector: "ds-mobile-header-content-tile" }, { kind: "component", type: TileIconComponent, selector: "tile-icon" }, { kind: "component", type: TileContentComponent, selector: "tile-content" }, { kind: "component", type: TileLabelComponent, selector: "tile-label" }, { kind: "component", type: TileValueComponent, selector: "tile-value" }, { kind: "component", type: DsMobileContentComponent, selector: "ds-mobile-content", inputs: ["layout"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron"], outputs: ["contactClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { 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: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MobileHomePageComponent, decorators: [{
             type: Component,