@propbinder/mobile-design 0.1.19 → 0.1.20

package/fesm2022/propbinder-mobile-design.mjs

@@ -6712,6 +6712,9 @@ class DsMobilePostDetailModalComponent {
     bottomSheet;
     // Post data passed from service
     postData;
+    // Current user info for comment composer
+    currentUserName = '';
+    currentUserInitialsInput = '';
     // Callback for submitting a new comment
     onSubmitComment;
     /**
@@ -6733,7 +6736,7 @@ class DsMobilePostDetailModalComponent {
         authorRole: '',
         timestamp: '',
         content: '',
-        comments: []
+        comments: [],
     }, ...(ngDevMode ? [{ debugName: "post" }] : []));
     // Comment composer state
     commentText = signal('', ...(ngDevMode ? [{ debugName: "commentText" }] : []));
@@ -6750,18 +6753,22 @@ class DsMobilePostDetailModalComponent {
         // Add post author
         users.push({
             name: post.authorName,
-            initials: post.avatarInitials || post.authorName.split(' ').map(n => n[0]).join(''),
-            role: post.authorRole
+            initials: post.avatarInitials ||
+                post.authorName
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join(''),
+            role: post.authorRole,
         });
         // Add unique commenters
         const commenterNames = new Set();
-        post.comments?.forEach(comment => {
+        post.comments?.forEach((comment) => {
             if (!commenterNames.has(comment.authorName)) {
                 commenterNames.add(comment.authorName);
                 users.push({
                     name: comment.authorName,
                     initials: comment.avatarInitials,
-                    role: comment.authorRole
+                    role: comment.authorRole,
                 });
             }
         });
@@ -6772,7 +6779,7 @@ class DsMobilePostDetailModalComponent {
         const query = this.mentionQuery().toLowerCase();
         if (!query)
             return this.availableUsers();
-        return this.availableUsers().filter(user => user.name.toLowerCase().includes(query));
+        return this.availableUsers().filter((user) => user.name.toLowerCase().includes(query));
     }, ...(ngDevMode ? [{ debugName: "filteredUsers" }] : []));
     constructor(modalController, lightbox, bottomSheet) {
         this.modalController = modalController;
@@ -6784,6 +6791,21 @@ class DsMobilePostDetailModalComponent {
         if (this.postData) {
             this.post.set(this.postData);
         }
+        // Set current user initials
+        if (this.currentUserInitialsInput) {
+            this.currentUserInitials.set(this.currentUserInitialsInput);
+        }
+        else if (this.currentUserName) {
+            // fallback: derive from name
+            const initials = this.currentUserName
+                .trim()
+                .split(/\s+/)
+                .map(p => p[0])
+                .join('')
+                .substring(0, 2)
+                .toUpperCase();
+            this.currentUserInitials.set(initials);
+        }
         // Set up keyboard listeners to update CSS variable for composer positioning
         this.setupKeyboardListeners();
     }
@@ -6809,22 +6831,22 @@ class DsMobilePostDetailModalComponent {
     setupKeyboardListeners() {
         Keyboard.addListener('keyboardWillShow', (info) => {
             document.documentElement.style.setProperty('--keyboard-height', `${info.keyboardHeight}px`);
-        }).catch(e => console.log('Keyboard listeners not available:', e));
+        }).catch((e) => console.log('Keyboard listeners not available:', e));
         Keyboard.addListener('keyboardWillHide', () => {
             document.documentElement.style.setProperty('--keyboard-height', '0px');
-        }).catch(e => console.log('Keyboard listeners not available:', e));
+        }).catch((e) => console.log('Keyboard listeners not available:', e));
     }
     /**
      * Clean up keyboard event listeners
      */
     cleanupKeyboardListeners() {
-        Keyboard.removeAllListeners().catch(e => console.log('Keyboard cleanup not available:', e));
+        Keyboard.removeAllListeners().catch((e) => console.log('Keyboard cleanup not available:', e));
     }
     /**
      * Show the keyboard when user interacts with input
      */
     showKeyboard() {
-        Keyboard.show().catch(e => console.log('Keyboard.show() not available'));
+        Keyboard.show().catch((e) => console.log('Keyboard.show() not available'));
     }
     /**
      * Focus the comment input when comment icon is tapped
@@ -6956,43 +6978,42 @@ class DsMobilePostDetailModalComponent {
             console.log('[PostDetailModal] Updating comment:', text);
             const editing = this.editingComment();
             // Update the existing comment
-            const updatedComments = currentPost.comments?.map(comment => {
-                if (comment.authorName === editing.authorName &&
-                    comment.content === editing.originalContent &&
-                    comment.timestamp === editing.timestamp) {
+            const updatedComments = currentPost.comments?.map((comment) => {
+                if (comment.authorName === editing.authorName && comment.content === editing.originalContent && comment.timestamp === editing.timestamp) {
                     return {
                         ...comment,
                         content: text,
-                        timestamp: 'Just now (edited)'
+                        timestamp: 'Just now (edited)',
                     };
                 }
                 return comment;
             });
             this.post.set({
                 ...currentPost,
-                comments: updatedComments
+                comments: updatedComments,
             });
             // Clear edit state
             this.editingComment.set(null);
         }
         else {
             console.log('[PostDetailModal] Submitting comment:', finalText);
+            console.log('[PostDetailModal] onSubmitComment =', this.onSubmitComment);
             const newComment = {
-                authorName: 'Lars Mikkelsen',
-                authorRole: 'You',
+                authorName: this.currentUserName || 'Dig',
+                authorRole: 'Dig',
                 timestamp: 'Just now',
                 avatarInitials: this.currentUserInitials(),
                 content: finalText,
                 isLiked: false,
                 likeCount: 0,
-                isOwnComment: true
+                isOwnComment: true,
             };
             // Add comment to the list
             const updatedComments = [...(currentPost.comments || []), newComment];
             this.post.set({
                 ...currentPost,
                 comments: updatedComments,
-                commentCount: updatedComments.length
+                commentCount: updatedComments.length,
             });
             // Clear reply state
             this.replyingTo.set(null);
@@ -7027,7 +7048,7 @@ class DsMobilePostDetailModalComponent {
             avatarInitials: postData.avatarInitials || '',
             avatarType: postData.avatarType || 'initials',
             avatarSrc: postData.avatarSrc || '',
-            timestamp: postData.timestamp
+            timestamp: postData.timestamp,
         };
         this.lightbox.open({
             images: [
@@ -7039,13 +7060,13 @@ class DsMobilePostDetailModalComponent {
                     description: postData.content,
                     isLiked: postData.isLiked || false,
                     likeCount: postData.likeCount || 0,
-                    commentCount: postData.commentCount || 0
-                }
+                    commentCount: postData.commentCount || 0,
+                },
             ],
             author: authorMeta,
             enableZoom: true,
             showControls: false,
-            showInfo: true
+            showInfo: true,
         });
     }
     /**
@@ -7055,13 +7076,13 @@ class DsMobilePostDetailModalComponent {
         const sheet = await this.bottomSheet.create({
             component: DsMobileActionsBottomSheetComponent,
             componentProps: {
-                isOwnContent: isOwnComment
+                isOwnContent: isOwnComment,
             },
             breakpoints: [0, 1],
             initialBreakpoint: 1,
             handle: true,
             backdropDismiss: true,
-            cssClass: 'auto-height'
+            cssClass: 'auto-height',
         });
         const result = await sheet.onWillDismiss();
         if (result.role === 'select' && result.data) {
@@ -7071,13 +7092,13 @@ class DsMobilePostDetailModalComponent {
                 case 'like':
                     console.log('Like comment by', authorName);
                     // Find and toggle like on the comment
-                    const updatedComments = currentPost.comments?.map(comment => {
+                    const updatedComments = currentPost.comments?.map((comment) => {
                         if (comment.authorName === authorName && comment.content === content) {
                             const isLiked = !comment.isLiked;
                             return {
                                 ...comment,
                                 isLiked,
-                                likeCount: isLiked ? (comment.likeCount || 0) + 1 : Math.max(0, (comment.likeCount || 0) - 1)
+                                likeCount: isLiked ? (comment.likeCount || 0) + 1 : Math.max(0, (comment.likeCount || 0) - 1),
                             };
                         }
                         return comment;
@@ -7091,7 +7112,7 @@ class DsMobilePostDetailModalComponent {
                 case 'edit':
                     console.log('Edit comment by', authorName);
                     // Find the full comment data to get timestamp
-                    const commentToEdit = currentPost.comments?.find(comment => comment.authorName === authorName && comment.content === content);
+                    const commentToEdit = currentPost.comments?.find((comment) => comment.authorName === authorName && comment.content === content);
                     if (commentToEdit) {
                         this.handleEditComment(authorName, content, commentToEdit.timestamp);
                     }
@@ -7100,11 +7121,11 @@ class DsMobilePostDetailModalComponent {
                     console.log('Delete comment by', authorName);
                     // Show confirmation before deleting
                     if (confirm('Are you sure you want to delete this comment?')) {
-                        const updatedCommentsAfterDelete = currentPost.comments?.filter(comment => !(comment.authorName === authorName && comment.content === content));
+                        const updatedCommentsAfterDelete = currentPost.comments?.filter((comment) => !(comment.authorName === authorName && comment.content === content));
                         this.post.set({
                             ...currentPost,
                             comments: updatedCommentsAfterDelete,
-                            commentCount: updatedCommentsAfterDelete?.length || 0
+                            commentCount: updatedCommentsAfterDelete?.length || 0,
                         });
                     }
                     break;
@@ -7112,7 +7133,7 @@ class DsMobilePostDetailModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePostDetailModalComponent, deps: [{ token: i1.ModalController }, { token: DsMobileLightboxService }, { token: DsMobileBottomSheetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobilePostDetailModalComponent, isStandalone: true, selector: "ds-mobile-post-detail-modal", inputs: { postData: "postData", onSubmitComment: "onSubmitComment", loading: "loading", error: "error" }, viewQueries: [{ propertyName: "commentInput", first: true, predicate: ["commentInput"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DsMobilePostDetailModalComponent, isStandalone: true, selector: "ds-mobile-post-detail-modal", inputs: { postData: "postData", currentUserName: "currentUserName", currentUserInitialsInput: "currentUserInitialsInput", onSubmitComment: "onSubmitComment", loading: "loading", error: "error" }, viewQueries: [{ propertyName: "commentInput", first: true, predicate: ["commentInput"], descendants: true }], ngImport: i0, template: `
     <ion-content [fullscreen]="true" [scrollY]="true" class="post-modal-content">
       <div class="post-modal-wrapper">
         <!-- Header with post author info -->
@@ -7120,12 +7141,7 @@ class DsMobilePostDetailModalComponent {
           <div class="header-content">
             <!-- Post author info -->
             <div class="post-author-info">
-              <ds-avatar
-                [initials]="post().avatarInitials || ''"
-                [type]="post().avatarType || 'initials'"
-                [src]="post().avatarSrc || ''"
-                size="md"
-              />
+              <ds-avatar [initials]="post().avatarInitials || ''" [type]="post().avatarType || 'initials'" [src]="post().avatarSrc || ''" size="md" />
               <div class="author-details">
                 <div class="author-name">{{ post().authorName }}</div>
                 <div class="author-meta">
@@ -7135,34 +7151,27 @@ class DsMobilePostDetailModalComponent {
                 </div>
               </div>
             </div>
-            
+
             <!-- Close button -->
-            <ds-icon-button
-              icon="remixCloseLine"
-              variant="secondary"
-              size="lg"
-              (click)="close()"
-              class="close-button"
-              aria-label="Luk opslag">
-            </ds-icon-button>
+            <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (click)="close()" class="close-button" aria-label="Luk opslag"> </ds-icon-button>
           </div>
         </div>
 
         <!-- Post content -->
         <div class="post-detail-container">
           @if (loading) {
-            <!-- Loading State -->
-            <div class="post-loading-state">
-              <div class="loading-spinner"></div>
-              <p class="loading-text">Loading post...</p>
-            </div>
+          <!-- Loading State -->
+          <div class="post-loading-state">
+            <div class="loading-spinner"></div>
+            <p class="loading-text">Loading post...</p>
+          </div>
           } @else if (error) {
-            <!-- Error State -->
-            <div class="post-error-state">
-              <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
-              <h3 class="error-state-title">Error loading post</h3>
-              <p class="error-state-description">{{ error }}</p>
-            </div>
+          <!-- Error State -->
+          <div class="post-error-state">
+            <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
+            <h3 class="error-state-title">Error loading post</h3>
+            <p class="error-state-description">{{ error }}</p>
+          </div>
           } @else {
           <!-- Post Section -->
           <div class="post-section">
@@ -7171,154 +7180,124 @@ class DsMobilePostDetailModalComponent {
                 <div [innerHTML]="post().content"></div>
               </post-text>
               @if (post().imageSrc) {
-                <post-media>
-                  <img 
-                    [src]="post().imageSrc"
-                    [alt]="post().imageAlt || 'Post image'"
-                    class="clickable-image"
-                    (click)="openImageLightbox()"
-                  />
-                </post-media>
+              <post-media>
+                <img [src]="post().imageSrc" [alt]="post().imageAlt || 'Post image'" class="clickable-image" (click)="openImageLightbox()" />
+              </post-media>
               }
             </div>
-            
+
             <!-- Post actions -->
             <div class="post-actions">
-              <action-like 
-                [active]="post().isLiked || false" 
-                [count]="post().likeCount || 0" />
-              <action-comment 
-                [count]="post().commentCount || 0"
-                (commentClick)="focusCommentInput()" />
+              <action-like [active]="post().isLiked || false" [count]="post().likeCount || 0" />
+              <action-comment [count]="post().commentCount || 0" (commentClick)="focusCommentInput()" />
             </div>
           </div>
-        
-        <!-- Comments Section -->
-        <div class="comments-section">
-          @if (post().comments && post().comments!.length > 0) {
+
+          <!-- Comments Section -->
+          <div class="comments-section">
+            @if (post().comments && post().comments!.length > 0) {
             <h2 class="comments-header">{{ post().comments!.length }} {{ post().comments!.length === 1 ? 'reply' : 'replies' }}</h2>
-            
+
             <div class="comments-list">
               @for (comment of post().comments!; track comment.authorName + comment.timestamp) {
-                <ds-mobile-comment
-                  [authorName]="comment.authorName"
-                  [authorRole]="comment.authorRole"
-                  [timestamp]="comment.timestamp"
-                  [avatarInitials]="comment.avatarInitials"
-                  [content]="comment.content"
-                  [isLiked]="comment.isLiked || false"
-                  [likeCount]="comment.likeCount || 0"
-                  [clickable]="true"
-                  [isOwnComment]="comment.isOwnComment || false"
-                  (replyClick)="handleReply(comment.authorName, comment.content)"
-                  (editClick)="handleEditComment(comment.authorName, comment.content, comment.timestamp)"
-                  (longPress)="handleCommentLongPress(comment.authorName, comment.content, comment.isOwnComment || false)" />
+              <ds-mobile-comment
+                [authorName]="comment.authorName"
+                [authorRole]="comment.authorRole"
+                [timestamp]="comment.timestamp"
+                [avatarInitials]="comment.avatarInitials"
+                [content]="comment.content"
+                [isLiked]="comment.isLiked || false"
+                [likeCount]="comment.likeCount || 0"
+                [clickable]="true"
+                [isOwnComment]="comment.isOwnComment || false"
+                (replyClick)="handleReply(comment.authorName, comment.content)"
+                (editClick)="handleEditComment(comment.authorName, comment.content, comment.timestamp)"
+                (longPress)="handleCommentLongPress(comment.authorName, comment.content, comment.isOwnComment || false)" />
               }
             </div>
-          } @else {
+            } @else {
             <!-- Empty State -->
             <div class="comments-empty-state">
-              <img 
-                src="/Assets/Empty%20state-chat.png" 
-                alt="Ingen kommentarer endnu" 
-                class="empty-state-image"
-              />
+              <img src="/Assets/Empty%20state-chat.png" alt="Ingen kommentarer endnu" class="empty-state-image" />
               <h3 class="empty-state-title">Ingen svar endnu</h3>
               <p class="empty-state-description">Vær den første til at svare på dette opslag</p>
             </div>
+            }
+
+            <!-- Bottom spacer for fixed composer -->
+            <div class="composer-spacer"></div>
+          </div>
           }
-          
-          <!-- Bottom spacer for fixed composer -->
-          <div class="composer-spacer"></div>
-        </div>
-        }
         </div>
       </div>
     </ion-content>
-    
+
     <!-- Fixed comment composer -->
     @if (!loading && !error) {
     <div class="comment-composer-fixed">
       <div class="comment-composer">
         <!-- Edit indicator -->
         @if (editingComment()) {
-          <div class="edit-indicator">
-            <div class="edit-indicator-content">
-              <ds-icon name="remixEditLine" size="16px" />
-              <span class="edit-text">Redigerer kommentar</span>
-            </div>
-            <button class="cancel-edit" (click)="cancelEdit()">
-              <ds-icon name="remixCloseLine" size="16px" />
-            </button>
+        <div class="edit-indicator">
+          <div class="edit-indicator-content">
+            <ds-icon name="remixEditLine" size="16px" />
+            <span class="edit-text">Redigerer kommentar</span>
           </div>
+          <button class="cancel-edit" (click)="cancelEdit()">
+            <ds-icon name="remixCloseLine" size="16px" />
+          </button>
+        </div>
         } @else if (replyingTo()) {
-          <!-- Reply indicator -->
-          <div class="reply-indicator">
-            <div class="reply-indicator-content">
-              <ds-icon name="remixReplyLine" size="16px" />
-              <span class="reply-to-text">
-                Svarer til <span class="reply-author">{{ replyingTo()!.authorName }}</span>
-              </span>
-            </div>
-            <button class="cancel-reply" (click)="cancelReply()">
-              <ds-icon name="remixCloseLine" size="16px" />
-            </button>
+        <!-- Reply indicator -->
+        <div class="reply-indicator">
+          <div class="reply-indicator-content">
+            <ds-icon name="remixReplyLine" size="16px" />
+            <span class="reply-to-text">
+              Svarer til <span class="reply-author">{{ replyingTo()!.authorName }}</span>
+            </span>
           </div>
+          <button class="cancel-reply" (click)="cancelReply()">
+            <ds-icon name="remixCloseLine" size="16px" />
+          </button>
+        </div>
         }
-        
+
         <div class="composer-content">
-          <ds-avatar
-            [initials]="currentUserInitials()"
-            [type]="'initials'"
-            size="md"
-          />
+          <ds-avatar [initials]="currentUserInitials()" [type]="'initials'" size="md" />
           <div class="composer-input-wrapper">
             <!-- Mention menu -->
             @if (showMentionMenu() && filteredUsers().length > 0 && !editingComment()) {
-              <div class="mention-menu">
-                @for (user of filteredUsers(); track user.name) {
-                  <button 
-                    class="mention-menu-item" 
-                    (click)="selectMention(user.name)">
-                    <ds-avatar 
-                      [initials]="user.initials"
-                      [type]="'initials'"
-                      size="sm" />
-                    <div class="mention-user-info">
-                      <span class="mention-user-name">{{ user.name }}</span>
-                      <span class="mention-user-role">{{ user.role }}</span>
-                    </div>
-                  </button>
-                }
-              </div>
+            <div class="mention-menu">
+              @for (user of filteredUsers(); track user.name) {
+              <button class="mention-menu-item" (click)="selectMention(user.name)">
+                <ds-avatar [initials]="user.initials" [type]="'initials'" size="sm" />
+                <div class="mention-user-info">
+                  <span class="mention-user-name">{{ user.name }}</span>
+                  <span class="mention-user-role">{{ user.role }}</span>
+                </div>
+              </button>
+              }
+            </div>
             }
-            
+
             <textarea
               #commentInput
               class="composer-input"
-              [placeholder]="editingComment() ? 'Rediger din kommentar...' : (replyingTo() ? 'Tilføj et svar...' : 'Tilføj et svar...')"
+              [placeholder]="editingComment() ? 'Rediger din kommentar...' : replyingTo() ? 'Tilføj et svar...' : 'Tilføj et svar...'"
               [(ngModel)]="commentText"
               (input)="handleInput($event)"
               (focus)="showKeyboard()"
               (click)="showKeyboard()"
-              rows="1"
-            ></textarea>
+              rows="1"></textarea>
           </div>
           @if (commentText().trim().length > 0) {
-            <ds-icon-button
-              icon="remixCheckLine"
-              variant="primary"
-              size="sm"
-              (clicked)="submitComment()"
-              aria-label="Send kommentar"
-              class="send-button-fixed">
-            </ds-icon-button>
+          <ds-icon-button icon="remixCheckLine" variant="primary" size="sm" (clicked)="submitComment()" aria-label="Send kommentar" class="send-button-fixed"> </ds-icon-button>
           }
         </div>
       </div>
     </div>
     }
-  `, 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}\n", ":host{display:block;position:relative;height:100%;width:100%}.post-modal-content{--background: var(--color-background-neutral-primary, #ffffff)}.post-modal-wrapper{display:flex;flex-direction:column;min-height:100%;min-height:100dvh;background:var(--color-background-neutral-primary, #ffffff)}.post-modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:0 16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.post-detail-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px 0 20px;flex:1}.post-section{width:100%;border-bottom:1px solid var(--border-color-default);padding:0 0 16px}.post-content-only{font-size:var(--font-size-sm);line-height:24px;color:var(--color-text-primary, #1a1a1a);margin-bottom:16px;padding:0 20px}.post-content-only post-media{margin-top:16px}.post-actions{display:flex;align-items:center;gap:16px;padding:0 20px}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.comments-section{display:flex;flex-direction:column;margin-left:0;margin-right:0;padding:0 20px}.comments-header{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0 0 16px;padding-left:0;padding-right:0}.comments-list{display:flex;flex-direction:column}.comments-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}.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);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(--color-text-secondary, #737373);margin:0}.composer-spacer{height:calc(81px + env(safe-area-inset-bottom,0px))}.bottom-spacer{height:0px}.comment-composer-fixed{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s ease-out;max-width:100vw}.comment-composer{pointer-events:auto;background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));width:100%;display:flex;flex-direction:column;gap:8px;box-shadow:100px 150px 0 150px var(--color-background-neutral-primary, #ffffff)}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-brand-base, #6B5FF5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-brand-base, #6B5FF5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-brand-base, #6B5FF5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-brand-base, #6B5FF5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.composer-content{display:flex;align-items:flex-start;gap:12px;width:100%;position:relative}.composer-content ds-avatar{position:relative;top:6px}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 48px 12px 16px;min-height:44px;position:relative}.mention-menu{position:absolute;bottom:100%;left:0;right:0;background:var(--color-background-neutral-primary, #ffffff);border-radius:12px;box-shadow:0 4px 12px #00000026;margin-bottom:8px;max-height:200px;overflow-y:auto;z-index:10;animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mention-menu-item{display:flex;align-items:center;gap:12px;padding:12px;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-color-default)}.mention-menu-item:last-child{border-bottom:none}.mention-menu-item:active{background:var(--color-background-neutral-secondary, #f5f5f5)}.mention-user-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-fixed{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;animation:slideInFromRight .2s ease-out}.send-button-fixed::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}.composer-input-wrapper ds-icon-button{flex-shrink:0;animation:slideInFromRight .2s ease-out}.composer-input-wrapper ds-icon-button::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}@supports (padding: env(safe-area-inset-bottom)){.post-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}.post-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.post-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { 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: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { 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: DsMobileCommentComponent, selector: "ds-mobile-comment", inputs: ["authorName", "authorRole", "timestamp", "content", "avatarInitials", "avatarType", "clickable", "isOwnComment", "isLiked", "likeCount"], outputs: ["isLikedChange", "likeCountChange", "commentClick", "replyClick", "editClick", "longPress"] }] });
+  `, 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}\n", ":host{display:block;position:relative;height:100%;width:100%}.post-modal-content{--background: var(--color-background-neutral-primary, #ffffff)}.post-modal-wrapper{display:flex;flex-direction:column;min-height:100%;min-height:100dvh;background:var(--color-background-neutral-primary, #ffffff)}.post-modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:0 16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.post-detail-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px 0 20px;flex:1}.post-section{width:100%;border-bottom:1px solid var(--border-color-default);padding:0 0 16px}.post-content-only{font-size:var(--font-size-sm);line-height:24px;color:var(--color-text-primary, #1a1a1a);margin-bottom:16px;padding:0 20px}.post-content-only post-media{margin-top:16px}.post-actions{display:flex;align-items:center;gap:16px;padding:0 20px}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.comments-section{display:flex;flex-direction:column;margin-left:0;margin-right:0;padding:0 20px}.comments-header{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0 0 16px;padding-left:0;padding-right:0}.comments-list{display:flex;flex-direction:column}.comments-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}.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);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(--color-text-secondary, #737373);margin:0}.composer-spacer{height:calc(81px + env(safe-area-inset-bottom,0px))}.bottom-spacer{height:0px}.comment-composer-fixed{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s ease-out;max-width:100vw}.comment-composer{pointer-events:auto;background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));width:100%;display:flex;flex-direction:column;gap:8px;box-shadow:100px 150px 0 150px var(--color-background-neutral-primary, #ffffff)}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-brand-base, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-brand-base, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-brand-base, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-brand-base, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.composer-content{display:flex;align-items:flex-start;gap:12px;width:100%;position:relative}.composer-content ds-avatar{position:relative;top:6px}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 48px 12px 16px;min-height:44px;position:relative}.mention-menu{position:absolute;bottom:100%;left:0;right:0;background:var(--color-background-neutral-primary, #ffffff);border-radius:12px;box-shadow:0 4px 12px #00000026;margin-bottom:8px;max-height:200px;overflow-y:auto;z-index:10;animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mention-menu-item{display:flex;align-items:center;gap:12px;padding:12px;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-color-default)}.mention-menu-item:last-child{border-bottom:none}.mention-menu-item:active{background:var(--color-background-neutral-secondary, #f5f5f5)}.mention-user-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-fixed{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;animation:slideInFromRight .2s ease-out}.send-button-fixed::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}.composer-input-wrapper ds-icon-button{flex-shrink:0;animation:slideInFromRight .2s ease-out}.composer-input-wrapper ds-icon-button::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}@supports (padding: env(safe-area-inset-bottom)){.post-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}.post-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.post-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { 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: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { 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: DsMobileCommentComponent, selector: "ds-mobile-comment", inputs: ["authorName", "authorRole", "timestamp", "content", "avatarInitials", "avatarType", "clickable", "isOwnComment", "isLiked", "likeCount"], outputs: ["isLikedChange", "likeCountChange", "commentClick", "replyClick", "editClick", "longPress"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePostDetailModalComponent, decorators: [{
             type: Component,
@@ -7333,7 +7312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         PostMediaComponent,
                         ActionLikeComponent,
                         ActionCommentComponent,
-                        DsMobileCommentComponent
+                        DsMobileCommentComponent,
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
     <ion-content [fullscreen]="true" [scrollY]="true" class="post-modal-content">
       <div class="post-modal-wrapper">
@@ -7342,12 +7321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
           <div class="header-content">
             <!-- Post author info -->
             <div class="post-author-info">
-              <ds-avatar
-                [initials]="post().avatarInitials || ''"
-                [type]="post().avatarType || 'initials'"
-                [src]="post().avatarSrc || ''"
-                size="md"
-              />
+              <ds-avatar [initials]="post().avatarInitials || ''" [type]="post().avatarType || 'initials'" [src]="post().avatarSrc || ''" size="md" />
               <div class="author-details">
                 <div class="author-name">{{ post().authorName }}</div>
                 <div class="author-meta">
@@ -7357,34 +7331,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 </div>
               </div>
             </div>
-            
+
             <!-- Close button -->
-            <ds-icon-button
-              icon="remixCloseLine"
-              variant="secondary"
-              size="lg"
-              (click)="close()"
-              class="close-button"
-              aria-label="Luk opslag">
-            </ds-icon-button>
+            <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (click)="close()" class="close-button" aria-label="Luk opslag"> </ds-icon-button>
           </div>
         </div>
 
         <!-- Post content -->
         <div class="post-detail-container">
           @if (loading) {
-            <!-- Loading State -->
-            <div class="post-loading-state">
-              <div class="loading-spinner"></div>
-              <p class="loading-text">Loading post...</p>
-            </div>
+          <!-- Loading State -->
+          <div class="post-loading-state">
+            <div class="loading-spinner"></div>
+            <p class="loading-text">Loading post...</p>
+          </div>
           } @else if (error) {
-            <!-- Error State -->
-            <div class="post-error-state">
-              <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
-              <h3 class="error-state-title">Error loading post</h3>
-              <p class="error-state-description">{{ error }}</p>
-            </div>
+          <!-- Error State -->
+          <div class="post-error-state">
+            <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
+            <h3 class="error-state-title">Error loading post</h3>
+            <p class="error-state-description">{{ error }}</p>
+          </div>
           } @else {
           <!-- Post Section -->
           <div class="post-section">
@@ -7393,156 +7360,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 <div [innerHTML]="post().content"></div>
               </post-text>
               @if (post().imageSrc) {
-                <post-media>
-                  <img 
-                    [src]="post().imageSrc"
-                    [alt]="post().imageAlt || 'Post image'"
-                    class="clickable-image"
-                    (click)="openImageLightbox()"
-                  />
-                </post-media>
+              <post-media>
+                <img [src]="post().imageSrc" [alt]="post().imageAlt || 'Post image'" class="clickable-image" (click)="openImageLightbox()" />
+              </post-media>
               }
             </div>
-            
+
             <!-- Post actions -->
             <div class="post-actions">
-              <action-like 
-                [active]="post().isLiked || false" 
-                [count]="post().likeCount || 0" />
-              <action-comment 
-                [count]="post().commentCount || 0"
-                (commentClick)="focusCommentInput()" />
+              <action-like [active]="post().isLiked || false" [count]="post().likeCount || 0" />
+              <action-comment [count]="post().commentCount || 0" (commentClick)="focusCommentInput()" />
             </div>
           </div>
-        
-        <!-- Comments Section -->
-        <div class="comments-section">
-          @if (post().comments && post().comments!.length > 0) {
+
+          <!-- Comments Section -->
+          <div class="comments-section">
+            @if (post().comments && post().comments!.length > 0) {
             <h2 class="comments-header">{{ post().comments!.length }} {{ post().comments!.length === 1 ? 'reply' : 'replies' }}</h2>
-            
+
             <div class="comments-list">
               @for (comment of post().comments!; track comment.authorName + comment.timestamp) {
-                <ds-mobile-comment
-                  [authorName]="comment.authorName"
-                  [authorRole]="comment.authorRole"
-                  [timestamp]="comment.timestamp"
-                  [avatarInitials]="comment.avatarInitials"
-                  [content]="comment.content"
-                  [isLiked]="comment.isLiked || false"
-                  [likeCount]="comment.likeCount || 0"
-                  [clickable]="true"
-                  [isOwnComment]="comment.isOwnComment || false"
-                  (replyClick)="handleReply(comment.authorName, comment.content)"
-                  (editClick)="handleEditComment(comment.authorName, comment.content, comment.timestamp)"
-                  (longPress)="handleCommentLongPress(comment.authorName, comment.content, comment.isOwnComment || false)" />
+              <ds-mobile-comment
+                [authorName]="comment.authorName"
+                [authorRole]="comment.authorRole"
+                [timestamp]="comment.timestamp"
+                [avatarInitials]="comment.avatarInitials"
+                [content]="comment.content"
+                [isLiked]="comment.isLiked || false"
+                [likeCount]="comment.likeCount || 0"
+                [clickable]="true"
+                [isOwnComment]="comment.isOwnComment || false"
+                (replyClick)="handleReply(comment.authorName, comment.content)"
+                (editClick)="handleEditComment(comment.authorName, comment.content, comment.timestamp)"
+                (longPress)="handleCommentLongPress(comment.authorName, comment.content, comment.isOwnComment || false)" />
               }
             </div>
-          } @else {
+            } @else {
             <!-- Empty State -->
             <div class="comments-empty-state">
-              <img 
-                src="/Assets/Empty%20state-chat.png" 
-                alt="Ingen kommentarer endnu" 
-                class="empty-state-image"
-              />
+              <img src="/Assets/Empty%20state-chat.png" alt="Ingen kommentarer endnu" class="empty-state-image" />
               <h3 class="empty-state-title">Ingen svar endnu</h3>
               <p class="empty-state-description">Vær den første til at svare på dette opslag</p>
             </div>
+            }
+
+            <!-- Bottom spacer for fixed composer -->
+            <div class="composer-spacer"></div>
+          </div>
           }
-          
-          <!-- Bottom spacer for fixed composer -->
-          <div class="composer-spacer"></div>
-        </div>
-        }
         </div>
       </div>
     </ion-content>
-    
+
     <!-- Fixed comment composer -->
     @if (!loading && !error) {
     <div class="comment-composer-fixed">
       <div class="comment-composer">
         <!-- Edit indicator -->
         @if (editingComment()) {
-          <div class="edit-indicator">
-            <div class="edit-indicator-content">
-              <ds-icon name="remixEditLine" size="16px" />
-              <span class="edit-text">Redigerer kommentar</span>
-            </div>
-            <button class="cancel-edit" (click)="cancelEdit()">
-              <ds-icon name="remixCloseLine" size="16px" />
-            </button>
+        <div class="edit-indicator">
+          <div class="edit-indicator-content">
+            <ds-icon name="remixEditLine" size="16px" />
+            <span class="edit-text">Redigerer kommentar</span>
           </div>
+          <button class="cancel-edit" (click)="cancelEdit()">
+            <ds-icon name="remixCloseLine" size="16px" />
+          </button>
+        </div>
         } @else if (replyingTo()) {
-          <!-- Reply indicator -->
-          <div class="reply-indicator">
-            <div class="reply-indicator-content">
-              <ds-icon name="remixReplyLine" size="16px" />
-              <span class="reply-to-text">
-                Svarer til <span class="reply-author">{{ replyingTo()!.authorName }}</span>
-              </span>
-            </div>
-            <button class="cancel-reply" (click)="cancelReply()">
-              <ds-icon name="remixCloseLine" size="16px" />
-            </button>
+        <!-- Reply indicator -->
+        <div class="reply-indicator">
+          <div class="reply-indicator-content">
+            <ds-icon name="remixReplyLine" size="16px" />
+            <span class="reply-to-text">
+              Svarer til <span class="reply-author">{{ replyingTo()!.authorName }}</span>
+            </span>
           </div>
+          <button class="cancel-reply" (click)="cancelReply()">
+            <ds-icon name="remixCloseLine" size="16px" />
+          </button>
+        </div>
         }
-        
+
         <div class="composer-content">
-          <ds-avatar
-            [initials]="currentUserInitials()"
-            [type]="'initials'"
-            size="md"
-          />
+          <ds-avatar [initials]="currentUserInitials()" [type]="'initials'" size="md" />
           <div class="composer-input-wrapper">
             <!-- Mention menu -->
             @if (showMentionMenu() && filteredUsers().length > 0 && !editingComment()) {
-              <div class="mention-menu">
-                @for (user of filteredUsers(); track user.name) {
-                  <button 
-                    class="mention-menu-item" 
-                    (click)="selectMention(user.name)">
-                    <ds-avatar 
-                      [initials]="user.initials"
-                      [type]="'initials'"
-                      size="sm" />
-                    <div class="mention-user-info">
-                      <span class="mention-user-name">{{ user.name }}</span>
-                      <span class="mention-user-role">{{ user.role }}</span>
-                    </div>
-                  </button>
-                }
-              </div>
+            <div class="mention-menu">
+              @for (user of filteredUsers(); track user.name) {
+              <button class="mention-menu-item" (click)="selectMention(user.name)">
+                <ds-avatar [initials]="user.initials" [type]="'initials'" size="sm" />
+                <div class="mention-user-info">
+                  <span class="mention-user-name">{{ user.name }}</span>
+                  <span class="mention-user-role">{{ user.role }}</span>
+                </div>
+              </button>
+              }
+            </div>
             }
-            
+
             <textarea
               #commentInput
               class="composer-input"
-              [placeholder]="editingComment() ? 'Rediger din kommentar...' : (replyingTo() ? 'Tilføj et svar...' : 'Tilføj et svar...')"
+              [placeholder]="editingComment() ? 'Rediger din kommentar...' : replyingTo() ? 'Tilføj et svar...' : 'Tilføj et svar...'"
               [(ngModel)]="commentText"
               (input)="handleInput($event)"
               (focus)="showKeyboard()"
               (click)="showKeyboard()"
-              rows="1"
-            ></textarea>
+              rows="1"></textarea>
           </div>
           @if (commentText().trim().length > 0) {
-            <ds-icon-button
-              icon="remixCheckLine"
-              variant="primary"
-              size="sm"
-              (clicked)="submitComment()"
-              aria-label="Send kommentar"
-              class="send-button-fixed">
-            </ds-icon-button>
+          <ds-icon-button icon="remixCheckLine" variant="primary" size="sm" (clicked)="submitComment()" aria-label="Send kommentar" class="send-button-fixed"> </ds-icon-button>
           }
         </div>
       </div>
     </div>
     }
-  `, 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}\n", ":host{display:block;position:relative;height:100%;width:100%}.post-modal-content{--background: var(--color-background-neutral-primary, #ffffff)}.post-modal-wrapper{display:flex;flex-direction:column;min-height:100%;min-height:100dvh;background:var(--color-background-neutral-primary, #ffffff)}.post-modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:0 16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.post-detail-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px 0 20px;flex:1}.post-section{width:100%;border-bottom:1px solid var(--border-color-default);padding:0 0 16px}.post-content-only{font-size:var(--font-size-sm);line-height:24px;color:var(--color-text-primary, #1a1a1a);margin-bottom:16px;padding:0 20px}.post-content-only post-media{margin-top:16px}.post-actions{display:flex;align-items:center;gap:16px;padding:0 20px}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.comments-section{display:flex;flex-direction:column;margin-left:0;margin-right:0;padding:0 20px}.comments-header{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0 0 16px;padding-left:0;padding-right:0}.comments-list{display:flex;flex-direction:column}.comments-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}.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);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(--color-text-secondary, #737373);margin:0}.composer-spacer{height:calc(81px + env(safe-area-inset-bottom,0px))}.bottom-spacer{height:0px}.comment-composer-fixed{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s ease-out;max-width:100vw}.comment-composer{pointer-events:auto;background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));width:100%;display:flex;flex-direction:column;gap:8px;box-shadow:100px 150px 0 150px var(--color-background-neutral-primary, #ffffff)}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-brand-base, #6B5FF5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-brand-base, #6B5FF5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-brand-base, #6B5FF5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-brand-base, #6B5FF5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.composer-content{display:flex;align-items:flex-start;gap:12px;width:100%;position:relative}.composer-content ds-avatar{position:relative;top:6px}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 48px 12px 16px;min-height:44px;position:relative}.mention-menu{position:absolute;bottom:100%;left:0;right:0;background:var(--color-background-neutral-primary, #ffffff);border-radius:12px;box-shadow:0 4px 12px #00000026;margin-bottom:8px;max-height:200px;overflow-y:auto;z-index:10;animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mention-menu-item{display:flex;align-items:center;gap:12px;padding:12px;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-color-default)}.mention-menu-item:last-child{border-bottom:none}.mention-menu-item:active{background:var(--color-background-neutral-secondary, #f5f5f5)}.mention-user-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-fixed{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;animation:slideInFromRight .2s ease-out}.send-button-fixed::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}.composer-input-wrapper ds-icon-button{flex-shrink:0;animation:slideInFromRight .2s ease-out}.composer-input-wrapper ds-icon-button::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}@supports (padding: env(safe-area-inset-bottom)){.post-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}.post-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.post-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}\n"] }]
+  `, 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}\n", ":host{display:block;position:relative;height:100%;width:100%}.post-modal-content{--background: var(--color-background-neutral-primary, #ffffff)}.post-modal-wrapper{display:flex;flex-direction:column;min-height:100%;min-height:100dvh;background:var(--color-background-neutral-primary, #ffffff)}.post-modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:0 16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.post-detail-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px 0 20px;flex:1}.post-section{width:100%;border-bottom:1px solid var(--border-color-default);padding:0 0 16px}.post-content-only{font-size:var(--font-size-sm);line-height:24px;color:var(--color-text-primary, #1a1a1a);margin-bottom:16px;padding:0 20px}.post-content-only post-media{margin-top:16px}.post-actions{display:flex;align-items:center;gap:16px;padding:0 20px}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.comments-section{display:flex;flex-direction:column;margin-left:0;margin-right:0;padding:0 20px}.comments-header{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:24px;color:var(--color-text-primary, #1a1a1a);margin:0 0 16px;padding-left:0;padding-right:0}.comments-list{display:flex;flex-direction:column}.comments-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}.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);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(--color-text-secondary, #737373);margin:0}.composer-spacer{height:calc(81px + env(safe-area-inset-bottom,0px))}.bottom-spacer{height:0px}.comment-composer-fixed{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s ease-out;max-width:100vw}.comment-composer{pointer-events:auto;background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));width:100%;display:flex;flex-direction:column;gap:8px;box-shadow:100px 150px 0 150px var(--color-background-neutral-primary, #ffffff)}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-brand-base, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-brand-base, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-brand-base, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-brand-base, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.composer-content{display:flex;align-items:flex-start;gap:12px;width:100%;position:relative}.composer-content ds-avatar{position:relative;top:6px}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 48px 12px 16px;min-height:44px;position:relative}.mention-menu{position:absolute;bottom:100%;left:0;right:0;background:var(--color-background-neutral-primary, #ffffff);border-radius:12px;box-shadow:0 4px 12px #00000026;margin-bottom:8px;max-height:200px;overflow-y:auto;z-index:10;animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mention-menu-item{display:flex;align-items:center;gap:12px;padding:12px;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-color-default)}.mention-menu-item:last-child{border-bottom:none}.mention-menu-item:active{background:var(--color-background-neutral-secondary, #f5f5f5)}.mention-user-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-fixed{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;animation:slideInFromRight .2s ease-out}.send-button-fixed::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}.composer-input-wrapper ds-icon-button{flex-shrink:0;animation:slideInFromRight .2s ease-out}.composer-input-wrapper ds-icon-button::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}@supports (padding: env(safe-area-inset-bottom)){.post-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}.post-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.post-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.ModalController }, { type: DsMobileLightboxService }, { type: DsMobileBottomSheetService }], propDecorators: { postData: [{
                 type: Input
+            }], currentUserName: [{
+                type: Input
+            }], currentUserInitialsInput: [{
+                type: Input
             }], onSubmitComment: [{
                 type: Input
             }], loading: [{
@@ -7611,13 +7552,16 @@ class DsMobilePostDetailModalService {
      */
     async open(postData, options) {
         console.log('[PostDetailModal] Opening with data:', postData);
+        console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
         const modal = await this.modalController.create({
             component: DsMobilePostDetailModalComponent,
             componentProps: {
                 postData: postData,
                 loading: options?.loading ?? false,
                 error: options?.error,
-                onSubmitComment: options?.onSubmitComment
+                onSubmitComment: options?.onSubmitComment,
+                currentUserName: options?.currentUserName ?? '',
+                currentUserInitials: options?.currentUserInitials ?? '',
             },
             cssClass: 'ds-post-detail-modal',
             mode: 'ios',
@@ -7628,7 +7572,7 @@ class DsMobilePostDetailModalService {
             keyboardClose: true,
             // Control the presenting element animation
             enterAnimation: undefined, // Use default
-            leaveAnimation: undefined // Use default
+            leaveAnimation: undefined, // Use default
         });
         console.log('[PostDetailModal] Modal created, presenting...');
         await modal.present();
@@ -7657,7 +7601,7 @@ class DsMobilePostDetailModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DsMobilePostDetailModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });