@propbinder/mobile-design 0.2.7 → 0.2.9

package/fesm2022/propbinder-mobile-design.mjs

@@ -11799,6 +11799,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, styles: [":host{display:flex;align-items:center;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease;box-sizing:border-box}:host(.variant-default){gap:12px;padding:10px 12px}:host(.variant-compact){gap:8px;padding:10px}@media (hover: hover) and (pointer: fine){:host(:hover):not(.disabled){background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host(:active):not(.disabled){transform:scale(.98);background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host(:focus-visible):not(.disabled){outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none;cursor:not-allowed}.card-inline-inner{display:flex;align-items:center;gap:inherit;width:100%;min-width:0}.content-leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;display:flex;align-items:center}:host(.variant-compact) .content-main{flex-direction:row;gap:8px}:host(.variant-default) .content-main{flex-direction:column;align-items:flex-start;gap:2px}.content-trailing{flex-shrink:0;display:flex;align-items:center}::ng-deep .item-avatar{flex-shrink:0}::ng-deep .item-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}:host(.variant-compact) ::ng-deep .item-content{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}::ng-deep .item-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);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}::ng-deep .item-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);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;flex-shrink:0}::ng-deep .item-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
 
+/**
+ * DsMobileCardInlineBannerComponent
+ *
+ * Specialized interactive component for displaying notification banners.
+ * Used to show unread message notifications above inquiry details.
+ *
+ * Features:
+ * - Neutral background matching file/contact cards
+ * - Avatar icon with message symbol
+ * - Title and timestamp
+ * - Unread count badge
+ * - Chevron for navigation indication
+ *
+ * @example
+ * ```html
+ * <ds-mobile-card-inline-banner
+ *   [title]="'New messages'"
+ *   [timestamp]="'2 min ago'"
+ *   [unreadCount]="3"
+ *   (bannerClick)="navigateToMessages()">
+ * </ds-mobile-card-inline-banner>
+ * ```
+ */
+class DsMobileCardInlineBannerComponent {
+    /**
+     * Banner title (e.g., "New messages", "Unread messages")
+     */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * Timestamp text (e.g., "2 min ago", "Just now")
+     */
+    timestamp = input('', ...(ngDevMode ? [{ debugName: "timestamp" }] : []));
+    /**
+     * Number of unread items (optional, shows badge if > 0)
+     */
+    unreadCount = input(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Emits when the banner is clicked
+     */
+    bannerClick = output();
+    handleBannerClick() {
+        this.bannerClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineBannerComponent, isStandalone: true, selector: "ds-mobile-card-inline-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bannerClick: "bannerClick" }, ngImport: i0, template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      (cardClick)="handleBannerClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          type="icon"
+          [iconName]="'remixNotificationLine'"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ title() }}</div>
+        
+        @if (timestamp()) {
+          <div class="item-meta">
+            <span>{{ timestamp() }}</span>
+          </div>
+        }
+      </div>
+      
+      <div content-trailing class="item-trailing">
+        @if (unreadCount() && unreadCount()! > 0) {
+          <span class="unread-badge">{{ unreadCount() }}</span>
+        }
+        <ds-icon name="remixArrowRightSLine" size="20px" />
+      </div>
+    </ds-mobile-card-inline>
+  `, isInline: true, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-card-inline-banner', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      (cardClick)="handleBannerClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          type="icon"
+          [iconName]="'remixNotificationLine'"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ title() }}</div>
+        
+        @if (timestamp()) {
+          <div class="item-meta">
+            <span>{{ timestamp() }}</span>
+          </div>
+        }
+      </div>
+      
+      <div content-trailing class="item-trailing">
+        @if (unreadCount() && unreadCount()! > 0) {
+          <span class="unread-badge">{{ unreadCount() }}</span>
+        }
+        <ds-icon name="remixArrowRightSLine" size="20px" />
+      </div>
+    </ds-mobile-card-inline>
+  `, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], unreadCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadCount", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] } });
+
+/**
+ * DsMobileCardInlineContactComponent
+ *
+ * Specialized interactive component for displaying contacts.
+ * Displays contact name with avatar initials and metadata (person name + phone number).
+ * Similar styling to file attachments with rounded corners and hover states.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-card-inline-contact
+ *   [name]="'Mortensen & Søn ApS'"
+ *   [initials]="'M'"
+ *   [contactPerson]="'John Mortensen'"
+ *   [phoneNumber]="'+45 12 34 56 78'"
+ *   [clickable]="true"
+ *   (contactClick)="openContact()">
+ * </ds-mobile-card-inline-contact>
+ * ```
+ */
+class DsMobileCardInlineContactComponent {
+    /**
+     * Contact/company name
+     */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Avatar initials (usually 1-2 letters)
+     */
+    initials = input.required(...(ngDevMode ? [{ debugName: "initials" }] : []));
+    /**
+     * Contact person name (optional)
+     */
+    contactPerson = input('', ...(ngDevMode ? [{ debugName: "contactPerson" }] : []));
+    /**
+     * Phone number (optional)
+     */
+    phoneNumber = input('', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Whether the contact item is clickable
+     */
+    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    /**
+     * Whether to show chevron icon
+     */
+    showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : []));
+    /**
+     * Emits when the contact item is clicked (if clickable)
+     */
+    contactClick = output();
+    handleContactClick() {
+        this.contactClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineContactComponent, isStandalone: true, selector: "ds-mobile-card-inline-contact", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, contactPerson: { classPropertyName: "contactPerson", publicName: "contactPerson", isSignal: true, isRequired: false, transformFunction: null }, phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contactClick: "contactClick" }, ngImport: i0, template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      [disabled]="!clickable()"
+      (cardClick)="handleContactClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          [initials]="initials()"
+          type="initials"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ name() }}</div>
+        
+        @if (contactPerson() || phoneNumber()) {
+          <div class="item-meta">
+            @if (contactPerson()) {
+              <span>{{ contactPerson() }}</span>
+            }
+            @if (contactPerson() && phoneNumber()) {
+              <span>·</span>
+            }
+            @if (phoneNumber()) {
+              <span>{{ phoneNumber() }}</span>
+            }
+          </div>
+        }
+      </div>
+      
+      @if (showChevron()) {
+        <div content-trailing class="item-trailing">
+          <ds-icon name="remixArrowRightSLine" size="20px" />
+        </div>
+      }
+    </ds-mobile-card-inline>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-card-inline-contact', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      [disabled]="!clickable()"
+      (cardClick)="handleContactClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          [initials]="initials()"
+          type="initials"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ name() }}</div>
+        
+        @if (contactPerson() || phoneNumber()) {
+          <div class="item-meta">
+            @if (contactPerson()) {
+              <span>{{ contactPerson() }}</span>
+            }
+            @if (contactPerson() && phoneNumber()) {
+              <span>·</span>
+            }
+            @if (phoneNumber()) {
+              <span>{{ phoneNumber() }}</span>
+            }
+          </div>
+        }
+      </div>
+      
+      @if (showChevron()) {
+        <div content-trailing class="item-trailing">
+          <ds-icon name="remixArrowRightSLine" size="20px" />
+        </div>
+      }
+    </ds-mobile-card-inline>
+  ` }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], contactPerson: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactPerson", required: false }] }], phoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumber", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], contactClick: [{ type: i0.Output, args: ["contactClick"] }] } });
+
 /**
  * DsMobileCardInlineFileComponent
  *
@@ -11824,7 +12082,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" }] : []));
     /**
@@ -11839,6 +12097,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
      */
@@ -11847,7 +12110,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
@@ -11856,73 +12121,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
@@ -12126,7 +12405,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
@@ -12185,7 +12464,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];
@@ -12193,7 +12472,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]);
@@ -12250,7 +12529,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({
@@ -12287,7 +12569,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();
@@ -12307,7 +12589,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
@@ -12327,26 +12609,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,
         });
     }
     /**
@@ -12367,7 +12651,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
@@ -12376,7 +12660,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(() => {
@@ -12391,7 +12675,7 @@ class DsMobileChatModalComponent {
         return date.toLocaleTimeString('da-DK', {
             hour: '2-digit',
             minute: '2-digit',
-            hour12: false
+            hour12: false,
         });
     }
     /**
@@ -12414,11 +12698,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);
             }
@@ -12452,7 +12737,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()) {
@@ -12465,12 +12750,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';
@@ -12483,7 +12768,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];
@@ -12512,12 +12797,12 @@ class DsMobileChatModalComponent {
                 messagesWithDisplay.push({
                     ...currentMsg,
                     showAvatar,
-                    clusterPosition
+                    clusterPosition,
                 });
             }
             return {
                 ...group,
-                messages: messagesWithDisplay
+                messages: messagesWithDisplay,
             };
         });
     }
@@ -12531,8 +12816,8 @@ class DsMobileChatModalComponent {
       [hasFixedBottom]="true"
       [enableKeyboardHandling]="true"
       (keyboardWillShow)="handleKeyboardShow($event)"
-      closeButtonLabel="Luk chat">
-
+      closeButtonLabel="Luk chat"
+    >
       <!-- Header Avatar -->
       <ds-avatar-with-badge
         header-leading
@@ -12557,94 +12842,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>
 
@@ -12659,11 +12959,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,
@@ -12675,8 +12976,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"
@@ -12686,8 +12986,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
@@ -12712,94 +13012,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>
 
@@ -12814,7 +13129,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>
@@ -13570,147 +13886,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }] } });
 
-/**
- * DsMobileCardInlineContactComponent
- *
- * Specialized interactive component for displaying contacts.
- * Displays contact name with avatar initials and metadata (person name + phone number).
- * Similar styling to file attachments with rounded corners and hover states.
- *
- * @example
- * ```html
- * <ds-mobile-card-inline-contact
- *   [name]="'Mortensen & Søn ApS'"
- *   [initials]="'M'"
- *   [contactPerson]="'John Mortensen'"
- *   [phoneNumber]="'+45 12 34 56 78'"
- *   [clickable]="true"
- *   (contactClick)="openContact()">
- * </ds-mobile-card-inline-contact>
- * ```
- */
-class DsMobileCardInlineContactComponent {
-    /**
-     * Contact/company name
-     */
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    /**
-     * Avatar initials (usually 1-2 letters)
-     */
-    initials = input.required(...(ngDevMode ? [{ debugName: "initials" }] : []));
-    /**
-     * Contact person name (optional)
-     */
-    contactPerson = input('', ...(ngDevMode ? [{ debugName: "contactPerson" }] : []));
-    /**
-     * Phone number (optional)
-     */
-    phoneNumber = input('', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
-    /**
-     * Whether the contact item is clickable
-     */
-    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
-    /**
-     * Whether to show chevron icon
-     */
-    showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : []));
-    /**
-     * Emits when the contact item is clicked (if clickable)
-     */
-    contactClick = output();
-    handleContactClick() {
-        this.contactClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineContactComponent, isStandalone: true, selector: "ds-mobile-card-inline-contact", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, contactPerson: { classPropertyName: "contactPerson", publicName: "contactPerson", isSignal: true, isRequired: false, transformFunction: null }, phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contactClick: "contactClick" }, ngImport: i0, template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      [disabled]="!clickable()"
-      (cardClick)="handleContactClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          [initials]="initials()"
-          type="initials"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ name() }}</div>
-        
-        @if (contactPerson() || phoneNumber()) {
-          <div class="item-meta">
-            @if (contactPerson()) {
-              <span>{{ contactPerson() }}</span>
-            }
-            @if (contactPerson() && phoneNumber()) {
-              <span>·</span>
-            }
-            @if (phoneNumber()) {
-              <span>{{ phoneNumber() }}</span>
-            }
-          </div>
-        }
-      </div>
-      
-      @if (showChevron()) {
-        <div content-trailing class="item-trailing">
-          <ds-icon name="remixArrowRightSLine" size="20px" />
-        </div>
-      }
-    </ds-mobile-card-inline>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-contact', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      [disabled]="!clickable()"
-      (cardClick)="handleContactClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          [initials]="initials()"
-          type="initials"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ name() }}</div>
-        
-        @if (contactPerson() || phoneNumber()) {
-          <div class="item-meta">
-            @if (contactPerson()) {
-              <span>{{ contactPerson() }}</span>
-            }
-            @if (contactPerson() && phoneNumber()) {
-              <span>·</span>
-            }
-            @if (phoneNumber()) {
-              <span>{{ phoneNumber() }}</span>
-            }
-          </div>
-        }
-      </div>
-      
-      @if (showChevron()) {
-        <div content-trailing class="item-trailing">
-          <ds-icon name="remixArrowRightSLine" size="20px" />
-        </div>
-      }
-    </ds-mobile-card-inline>
-  ` }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], contactPerson: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactPerson", required: false }] }], phoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumber", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], contactClick: [{ type: i0.Output, args: ["contactClick"] }] } });
-
 /**
  * DsMobileSwiperComponent
  *
@@ -13827,7 +14002,7 @@ class DsMobileHandbookDetailModalComponent {
         variant: 'light-purple',
         iconName: 'remixFolder3Line',
         itemCount: 0,
-        items: []
+        items: [],
     }, ...(ngDevMode ? [{ debugName: "handbook" }] : []));
     ngOnInit() {
         // Initialize handbook data from input
@@ -13848,41 +14023,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
@@ -13908,7 +14069,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: `
@@ -13917,88 +14078,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>
+            }
+          </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>
             }
-        } @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>
+        } } @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,
@@ -14008,91 +14171,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>
+      <!-- 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">
+            @if (item.title) {
+            <h2 class="item-title">{{ item.title }}</h2>
+            } @if (item.description) {
+            <p class="item-description" [innerHTML]="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'"
+              [fileUrl]="attachment.url"
+              (fileClick)="handleAttachmentClick(attachment)"
+            >
+            </ds-mobile-card-inline-file>
             }
-        } @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>
+        } } @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>
@@ -14256,7 +14421,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})`;
@@ -14305,11 +14470,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,
         });
     }
     /**
@@ -14325,55 +14490,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>
@@ -14382,55 +14535,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>
@@ -15799,7 +15940,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,
@@ -16039,58 +16180,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 = [
@@ -16099,30 +16254,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 = [
@@ -16130,100 +16300,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;
@@ -16241,8 +16435,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">
@@ -16251,7 +16445,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixLightbulbLine'"
               [itemCount]="8"
               [label]="'Forsyninger'"
-              [items]="utilitiesItems">
+              [items]="utilitiesItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16259,7 +16454,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixKey2Line'"
               [itemCount]="4"
               [label]="'Sikkerhedsudstyr'"
-              [items]="sikkerhedsudstyrItems">
+              [items]="sikkerhedsudstyrItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16267,7 +16463,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixFileList3Line'"
               [itemCount]="8"
               [label]="'Servicekontrakter'"
-              [items]="serviceContractsItems">
+              [items]="serviceContractsItems"
+            >
             </ds-mobile-handbook-folder>
 
             <ds-mobile-handbook-folder
@@ -16275,7 +16472,8 @@ class MobileHandbookPageComponent {
               [iconName]="'remixToolsLine'"
               [itemCount]="5"
               [label]="'Udstyr'"
-              [items]="equipmentItems">
+              [items]="equipmentItems"
+            >
             </ds-mobile-handbook-folder>
           </div>
         </ds-mobile-content-section>
@@ -16289,14 +16487,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">
@@ -16305,7 +16503,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
@@ -16313,7 +16512,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
@@ -16321,7 +16521,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
@@ -16329,7 +16530,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>
@@ -16506,7 +16708,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,
@@ -16921,123 +17123,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, styles: [".inquiries-container{display:flex;flex-direction:column}.inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-8px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }, { type: DsMobileNewInquiryModalService }] });
 
-/**
- * DsMobileCardInlineBannerComponent
- *
- * Specialized interactive component for displaying notification banners.
- * Used to show unread message notifications above inquiry details.
- *
- * Features:
- * - Neutral background matching file/contact cards
- * - Avatar icon with message symbol
- * - Title and timestamp
- * - Unread count badge
- * - Chevron for navigation indication
- *
- * @example
- * ```html
- * <ds-mobile-card-inline-banner
- *   [title]="'New messages'"
- *   [timestamp]="'2 min ago'"
- *   [unreadCount]="3"
- *   (bannerClick)="navigateToMessages()">
- * </ds-mobile-card-inline-banner>
- * ```
- */
-class DsMobileCardInlineBannerComponent {
-    /**
-     * Banner title (e.g., "New messages", "Unread messages")
-     */
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
-    /**
-     * Timestamp text (e.g., "2 min ago", "Just now")
-     */
-    timestamp = input('', ...(ngDevMode ? [{ debugName: "timestamp" }] : []));
-    /**
-     * Number of unread items (optional, shows badge if > 0)
-     */
-    unreadCount = input(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
-    /**
-     * Emits when the banner is clicked
-     */
-    bannerClick = output();
-    handleBannerClick() {
-        this.bannerClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineBannerComponent, isStandalone: true, selector: "ds-mobile-card-inline-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bannerClick: "bannerClick" }, ngImport: i0, template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleBannerClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          type="icon"
-          [iconName]="'remixNotificationLine'"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ title() }}</div>
-        
-        @if (timestamp()) {
-          <div class="item-meta">
-            <span>{{ timestamp() }}</span>
-          </div>
-        }
-      </div>
-      
-      <div content-trailing class="item-trailing">
-        @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
-        }
-        <ds-icon name="remixArrowRightSLine" size="20px" />
-      </div>
-    </ds-mobile-card-inline>
-  `, isInline: true, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-banner', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleBannerClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          type="icon"
-          [iconName]="'remixNotificationLine'"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ title() }}</div>
-        
-        @if (timestamp()) {
-          <div class="item-meta">
-            <span>{{ timestamp() }}</span>
-          </div>
-        }
-      </div>
-      
-      <div content-trailing class="item-trailing">
-        @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
-        }
-        <ds-icon name="remixArrowRightSLine" size="20px" />
-      </div>
-    </ds-mobile-card-inline>
-  `, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], unreadCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadCount", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] } });
-
 class MobileInquiryDetailPageComponent {
     userService;
     lightbox;
@@ -18916,5 +19001,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map