@propbinder/mobile-design 0.2.35 → 0.2.37

package/fesm2022/propbinder-mobile-design.mjs

@@ -7164,6 +7164,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * ```
  */
 class DsMobileMessageComposerComponent {
+    cdr;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
     /**
      * Avatar initials
      */
@@ -7258,41 +7262,40 @@ class DsMobileMessageComposerComponent {
         const users = this.mentionUsers();
         if (!query)
             return users;
-        return users.filter(user => user.name.toLowerCase().includes(query));
+        return users.filter((user) => user.name.toLowerCase().includes(query));
     }, ...(ngDevMode ? [{ debugName: "filteredUsers" }] : []));
     /**
      * Convert filtered users to dropdown items
      */
     mentionDropdownItems = computed(() => {
-        return this.filteredUsers().map(user => ({
+        return this.filteredUsers().map((user) => ({
             id: user.name,
             label: user.name,
             data: {
                 name: user.name,
                 initials: user.initials,
-                role: user.role
-            }
+                role: user.role,
+            },
         }));
     }, ...(ngDevMode ? [{ debugName: "mentionDropdownItems" }] : []));
     /**
      * Attachment menu items
+     * Static list to prevent change detection loops
      */
-    attachmentMenuItems = computed(() => {
-        return [
-            {
-                id: 'photo',
-                leadingIcon: 'remixImageLine',
-                label: 'Photo',
-                action: () => this.handleAddPhoto()
-            },
-            {
-                id: 'file',
-                leadingIcon: 'remixFile3Line',
-                label: 'File',
-                action: () => this.handleAddFile()
-            }
-        ];
-    }, ...(ngDevMode ? [{ debugName: "attachmentMenuItems" }] : []));
+    attachmentMenuItems = [
+        {
+            id: 'photo',
+            leadingIcon: 'remixImageLine',
+            label: 'Photo',
+            action: () => this.handleAddPhoto(),
+        },
+        {
+            id: 'file',
+            leadingIcon: 'remixFile3Line',
+            label: 'File',
+            action: () => this.handleAddFile(),
+        },
+    ];
     /**
      * Emits when a message is sent
      */
@@ -7328,6 +7331,8 @@ class DsMobileMessageComposerComponent {
         }
         // Set up keyboard listeners
         this.setupKeyboardListeners();
+        // Explicitly trigger change detection to avoid NG0100 with ViewChild bindings
+        this.cdr.detectChanges();
     }
     ngOnDestroy() {
         // Clean up keyboard listeners
@@ -7339,22 +7344,22 @@ class DsMobileMessageComposerComponent {
     setupKeyboardListeners() {
         Keyboard.addListener('keyboardWillShow', (info) => {
             document.documentElement.style.setProperty('--keyboard-height', `${info.keyboardHeight}px`);
-        }).catch(e => console.log('Keyboard listeners not available:', e));
+        }).catch(() => { });
         Keyboard.addListener('keyboardWillHide', () => {
             document.documentElement.style.setProperty('--keyboard-height', '0px');
-        }).catch(e => console.log('Keyboard listeners not available:', e));
+        }).catch(() => { });
     }
     /**
      * Clean up keyboard event listeners
      */
     cleanupKeyboardListeners() {
-        Keyboard.removeAllListeners().catch(e => console.log('Keyboard cleanup not available:', e));
+        Keyboard.removeAllListeners().catch(() => { });
     }
     /**
      * Show the keyboard when user interacts with input
      */
     showKeyboard() {
-        Keyboard.show().catch(e => console.log('Keyboard.show() not available'));
+        Keyboard.show().catch(() => { });
     }
     /**
      * Handle keyboard shortcuts (Shift+Enter to send)
@@ -7527,7 +7532,7 @@ class DsMobileMessageComposerComponent {
             event.preventDefault();
             event.stopPropagation();
         }
-        this.isAttachmentMenuOpen.update(open => !open);
+        this.isAttachmentMenuOpen.update((open) => !open);
     }
     /**
      * Close attachment menu
@@ -7573,15 +7578,13 @@ class DsMobileMessageComposerComponent {
                         type: 'image',
                         name: `Photo ${this.attachments().length + 1}`,
                         size: '',
-                        isLoading: true
+                        isLoading: true,
                     };
-                    this.attachments.update(attachments => [...attachments, loadingAttachment]);
+                    this.attachments.update((attachments) => [...attachments, loadingAttachment]);
                     // Simulate processing time (in real app, this would be actual image processing)
                     // TODO: Reduce to 300ms or remove in production
                     setTimeout(() => {
-                        this.attachments.update(attachments => attachments.map(a => a.id === attachmentId
-                            ? { ...a, isLoading: false }
-                            : a));
+                        this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, isLoading: false } : a)));
                     }, 1500); // 1.5s for testing - shows loading overlay clearly
                 }
                 console.log('[MessageComposer] All photos added successfully');
@@ -7653,7 +7656,7 @@ class DsMobileMessageComposerComponent {
         const k = 1024;
         const sizes = ['B', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
     }
     /**
      * Handle file selection from file input
@@ -7668,7 +7671,7 @@ class DsMobileMessageComposerComponent {
         // Process each selected file (up to 6 total)
         const remainingSlots = 6 - this.attachments().length;
         const filesToProcess = Array.from(files).slice(0, remainingSlots);
-        filesToProcess.forEach(file => {
+        filesToProcess.forEach((file) => {
             const fileType = this.detectFileType(file);
             const attachmentId = `file-${Date.now()}-${Math.random()}`;
             // Add attachment with loading state immediately
@@ -7678,9 +7681,9 @@ class DsMobileMessageComposerComponent {
                 type: fileType,
                 name: file.name,
                 size: this.formatFileSize(file.size),
-                isLoading: true
+                isLoading: true,
             };
-            this.attachments.update(attachments => [...attachments, loadingAttachment]);
+            this.attachments.update((attachments) => [...attachments, loadingAttachment]);
             // Create a data URL for preview
             const reader = new FileReader();
             reader.onload = (e) => {
@@ -7690,9 +7693,7 @@ class DsMobileMessageComposerComponent {
                     // TODO: Remove setTimeout in production (use actual FileReader timing)
                     setTimeout(() => {
                         // Update attachment with actual data and remove loading state
-                        this.attachments.update(attachments => attachments.map(a => a.id === attachmentId
-                            ? { ...a, src: result, isLoading: false }
-                            : a));
+                        this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, src: result, isLoading: false } : a)));
                         // Notify parent that attachments changed so it can scroll
                         setTimeout(() => {
                             this.attachmentsChanged.emit();
@@ -7711,12 +7712,12 @@ class DsMobileMessageComposerComponent {
      * Keeps keyboard open by maintaining focus
      */
     removeAttachment(attachmentId) {
-        this.attachments.update(attachments => attachments.filter(a => a.id !== attachmentId));
+        this.attachments.update((attachments) => attachments.filter((a) => a.id !== attachmentId));
         // Immediately refocus input to prevent keyboard from closing
         setTimeout(() => {
             if (this.messageInputRef?.nativeElement) {
                 this.messageInputRef.nativeElement.focus();
-                Keyboard.show().catch(e => console.log('Keyboard.show() not available:', e));
+                Keyboard.show().catch((e) => console.log('Keyboard.show() not available:', e));
             }
         }, 0);
         // Notify parent that attachments changed so it can scroll
@@ -7736,13 +7737,11 @@ class DsMobileMessageComposerComponent {
         const isReply = !!this.replyingTo();
         // Emit message sent event
         this.messageSent.emit({
-            content: isReply && this.replyingTo()
-                ? `@${this.replyingTo().authorName} ${text}`
-                : text,
+            content: isReply && this.replyingTo() ? `@${this.replyingTo().authorName} ${text}` : text,
             isReply,
             replyTo: this.replyingTo()?.authorName,
             isEdit,
-            attachments: hasAttachments ? [...this.attachments()] : undefined
+            attachments: hasAttachments ? [...this.attachments()] : undefined,
         });
         // Keep keyboard open by explicitly showing it before clearing
         // This prevents the keyboard from starting to close during the clear operation
@@ -7757,7 +7756,7 @@ class DsMobileMessageComposerComponent {
             this.messageInputRef.nativeElement.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileMessageComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileMessageComposerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileMessageComposerComponent, isStandalone: true, selector: "ds-mobile-message-composer", inputs: { avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, attachmentButtonLabel: { classPropertyName: "attachmentButtonLabel", publicName: "attachmentButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showAttachmentButton: { classPropertyName: "showAttachmentButton", publicName: "showAttachmentButton", isSignal: true, isRequired: false, transformFunction: null }, editIndicatorText: { classPropertyName: "editIndicatorText", publicName: "editIndicatorText", isSignal: true, isRequired: false, transformFunction: null }, replyIndicatorText: { classPropertyName: "replyIndicatorText", publicName: "replyIndicatorText", isSignal: true, isRequired: false, transformFunction: null }, enableMentions: { classPropertyName: "enableMentions", publicName: "enableMentions", isSignal: true, isRequired: false, transformFunction: null }, mentionUsers: { classPropertyName: "mentionUsers", publicName: "mentionUsers", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSent: "messageSent", editCancelled: "editCancelled", replyCancelled: "replyCancelled", mentionSelected: "mentionSelected", attachmentClicked: "attachmentClicked", attachmentsChanged: "attachmentsChanged" }, viewQueries: [{ propertyName: "messageInputRef", first: true, predicate: ["messageInputEl"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
     <div class="message-composer">
       <!-- Edit indicator (optional) -->
@@ -7772,7 +7771,7 @@ class DsMobileMessageComposerComponent {
           </button>
         </div>
       }
-      
+
       <!-- Reply indicator (optional) -->
       @if (replyingTo() && !editingMessage()) {
         <div class="reply-indicator">
@@ -7787,21 +7786,18 @@ class DsMobileMessageComposerComponent {
           </button>
         </div>
       }
-      
+
       <!-- Attachment Previews (if any) -->
       @if (attachments().length > 0) {
         <div class="attachment-previews-section">
           <div class="attachment-previews">
             @for (attachment of attachments(); track attachment.id) {
-              <ds-mobile-attachment-preview
-                [attachment]="attachment"
-                (remove)="removeAttachment($event)"
-              />
+              <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
             }
           </div>
         </div>
       }
-      
+
       <div class="composer-content">
         <!-- Attachment button replacing avatar (left side) -->
         @if (showAttachmentButton()) {
@@ -7812,34 +7808,30 @@ class DsMobileMessageComposerComponent {
               icon="remixAddLine"
               variant="secondary"
               size="lg"
-              (touchstart)="toggleAttachmentMenu($event)"
-              (mousedown)="toggleAttachmentMenu($event)"
+              (clicked)="toggleAttachmentMenu($event)"
               [attr.aria-label]="attachmentButtonLabel()"
-              [attr.aria-expanded]="isAttachmentMenuOpen()">
+              [attr.aria-expanded]="isAttachmentMenuOpen()"
+            >
             </ds-icon-button>
-            
+
             <!-- Attachment menu using dropdown -->
             <ds-mobile-dropdown
-              [items]="attachmentMenuItems()"
+              [items]="attachmentMenuItems"
               [isOpen]="isAttachmentMenuOpen()"
               [trigger]="'attachment-trigger'"
               [keepFocusOn]="messageInputRef"
               position="above"
               align="start"
               (itemSelected)="handleAttachmentMenuSelect($event)"
-              (closed)="closeAttachmentMenu()">
+              (closed)="closeAttachmentMenu()"
+            >
             </ds-mobile-dropdown>
           </div>
         } @else {
           <!-- Avatar (only shown when attachment button is hidden) -->
-          <ds-avatar
-            [initials]="avatarInitials()"
-            [type]="avatarType()"
-            [src]="avatarSrc()"
-            size="lg"
-          />
+          <ds-avatar [initials]="avatarInitials()" [type]="avatarType()" [src]="avatarSrc()" size="lg" />
         }
-        
+
         <div class="composer-input-wrapper">
           <textarea
             #messageInputEl
@@ -7852,8 +7844,9 @@ class DsMobileMessageComposerComponent {
             (focus)="showKeyboard()"
             (click)="showKeyboard()"
             rows="1"
-          >          </textarea>
-          
+          >
+          </textarea>
+
           <!-- Mention menu using dropdown (only render if mentions are enabled) -->
           @if (enableMentions()) {
             <ds-mobile-dropdown
@@ -7864,12 +7857,10 @@ class DsMobileMessageComposerComponent {
               align="start"
               [maxHeight]="200"
               (itemSelected)="handleMentionSelect($event)"
-              (closed)="closeMentionMenu()">
+              (closed)="closeMentionMenu()"
+            >
               <ng-template #itemTemplate let-item>
-                <ds-avatar 
-                  [initials]="item.data.initials"
-                  [type]="'initials'"
-                  size="sm" />
+                <ds-avatar [initials]="item.data.initials" [type]="'initials'" size="sm" />
                 <div class="mention-user-info">
                   <span class="mention-user-name">{{ item.data.name }}</span>
                   <span class="mention-user-role">{{ item.data.role }}</span>
@@ -7877,7 +7868,7 @@ class DsMobileMessageComposerComponent {
               </ng-template>
             </ds-mobile-dropdown>
           }
-          
+
           <!-- Send button (absolute positioned in top right, always rendered) -->
           <ds-icon-button
             icon="remixCheckLine"
@@ -7886,11 +7877,12 @@ class DsMobileMessageComposerComponent {
             (clicked)="sendMessage()"
             [attr.aria-label]="sendButtonLabel()"
             [class.send-button-inline]="true"
-            [class.show]="messageText().trim().length > 0 || attachments().length > 0">
+            [class.show]="messageText().trim().length > 0 || attachments().length > 0"
+          >
           </ds-icon-button>
         </div>
       </div>
-      
+
       <!-- Hidden file input -->
       <input
         #fileInput
@@ -7902,19 +7894,11 @@ class DsMobileMessageComposerComponent {
         (change)="handleFileSelect($event)"
       />
     </div>
-  `, isInline: true, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.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-accent, #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-accent, #6B5FF5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #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-accent, #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)}}.attachment-previews-section{padding:0 0 8px;animation:slideDown .2s ease-out}.attachment-previews{display:flex;flex-wrap:wrap;gap:8px}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.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 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;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-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: 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: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel"], outputs: ["itemSelected", "closed"] }] });
+  `, isInline: true, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.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-accent, #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-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #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-accent, #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)}}.attachment-previews-section{padding:0 0 8px;animation:slideDown .2s ease-out}.attachment-previews{display:flex;flex-wrap:wrap;gap:8px}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.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 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;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-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: 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: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel"], outputs: ["itemSelected", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileMessageComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-message-composer', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        DsAvatarComponent,
-                        DsIconButtonComponent,
-                        DsIconComponent,
-                        DsMobileAttachmentPreviewComponent,
-                        DsMobileDropdownComponent
-                    ], template: `
+            args: [{ selector: 'ds-mobile-message-composer', standalone: true, imports: [CommonModule, FormsModule, DsAvatarComponent, DsIconButtonComponent, DsIconComponent, DsMobileAttachmentPreviewComponent, DsMobileDropdownComponent], template: `
     <div class="message-composer">
       <!-- Edit indicator (optional) -->
       @if (editingMessage()) {
@@ -7928,7 +7912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </button>
         </div>
       }
-      
+
       <!-- Reply indicator (optional) -->
       @if (replyingTo() && !editingMessage()) {
         <div class="reply-indicator">
@@ -7943,21 +7927,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </button>
         </div>
       }
-      
+
       <!-- Attachment Previews (if any) -->
       @if (attachments().length > 0) {
         <div class="attachment-previews-section">
           <div class="attachment-previews">
             @for (attachment of attachments(); track attachment.id) {
-              <ds-mobile-attachment-preview
-                [attachment]="attachment"
-                (remove)="removeAttachment($event)"
-              />
+              <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
             }
           </div>
         </div>
       }
-      
+
       <div class="composer-content">
         <!-- Attachment button replacing avatar (left side) -->
         @if (showAttachmentButton()) {
@@ -7968,34 +7949,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               icon="remixAddLine"
               variant="secondary"
               size="lg"
-              (touchstart)="toggleAttachmentMenu($event)"
-              (mousedown)="toggleAttachmentMenu($event)"
+              (clicked)="toggleAttachmentMenu($event)"
               [attr.aria-label]="attachmentButtonLabel()"
-              [attr.aria-expanded]="isAttachmentMenuOpen()">
+              [attr.aria-expanded]="isAttachmentMenuOpen()"
+            >
             </ds-icon-button>
-            
+
             <!-- Attachment menu using dropdown -->
             <ds-mobile-dropdown
-              [items]="attachmentMenuItems()"
+              [items]="attachmentMenuItems"
               [isOpen]="isAttachmentMenuOpen()"
               [trigger]="'attachment-trigger'"
               [keepFocusOn]="messageInputRef"
               position="above"
               align="start"
               (itemSelected)="handleAttachmentMenuSelect($event)"
-              (closed)="closeAttachmentMenu()">
+              (closed)="closeAttachmentMenu()"
+            >
             </ds-mobile-dropdown>
           </div>
         } @else {
           <!-- Avatar (only shown when attachment button is hidden) -->
-          <ds-avatar
-            [initials]="avatarInitials()"
-            [type]="avatarType()"
-            [src]="avatarSrc()"
-            size="lg"
-          />
+          <ds-avatar [initials]="avatarInitials()" [type]="avatarType()" [src]="avatarSrc()" size="lg" />
         }
-        
+
         <div class="composer-input-wrapper">
           <textarea
             #messageInputEl
@@ -8008,8 +7985,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             (focus)="showKeyboard()"
             (click)="showKeyboard()"
             rows="1"
-          >          </textarea>
-          
+          >
+          </textarea>
+
           <!-- Mention menu using dropdown (only render if mentions are enabled) -->
           @if (enableMentions()) {
             <ds-mobile-dropdown
@@ -8020,12 +7998,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               align="start"
               [maxHeight]="200"
               (itemSelected)="handleMentionSelect($event)"
-              (closed)="closeMentionMenu()">
+              (closed)="closeMentionMenu()"
+            >
               <ng-template #itemTemplate let-item>
-                <ds-avatar 
-                  [initials]="item.data.initials"
-                  [type]="'initials'"
-                  size="sm" />
+                <ds-avatar [initials]="item.data.initials" [type]="'initials'" size="sm" />
                 <div class="mention-user-info">
                   <span class="mention-user-name">{{ item.data.name }}</span>
                   <span class="mention-user-role">{{ item.data.role }}</span>
@@ -8033,7 +8009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               </ng-template>
             </ds-mobile-dropdown>
           }
-          
+
           <!-- Send button (absolute positioned in top right, always rendered) -->
           <ds-icon-button
             icon="remixCheckLine"
@@ -8042,11 +8018,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             (clicked)="sendMessage()"
             [attr.aria-label]="sendButtonLabel()"
             [class.send-button-inline]="true"
-            [class.show]="messageText().trim().length > 0 || attachments().length > 0">
+            [class.show]="messageText().trim().length > 0 || attachments().length > 0"
+          >
           </ds-icon-button>
         </div>
       </div>
-      
+
       <!-- Hidden file input -->
       <input
         #fileInput
@@ -8058,8 +8035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         (change)="handleFileSelect($event)"
       />
     </div>
-  `, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.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-accent, #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-accent, #6B5FF5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #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-accent, #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)}}.attachment-previews-section{padding:0 0 8px;animation:slideDown .2s ease-out}.attachment-previews{display:flex;flex-wrap:wrap;gap:8px}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.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 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;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-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::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)}}\n"] }]
-        }], propDecorators: { avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], attachmentButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentButtonLabel", required: false }] }], showAttachmentButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAttachmentButton", required: false }] }], editIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "editIndicatorText", required: false }] }], replyIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyIndicatorText", required: false }] }], enableMentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMentions", required: false }] }], mentionUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionUsers", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], messageInputRef: [{
+  `, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.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-accent, #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-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #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-accent, #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)}}.attachment-previews-section{padding:0 0 8px;animation:slideDown .2s ease-out}.attachment-previews{display:flex;flex-wrap:wrap;gap:8px}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.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 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;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-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::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)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], attachmentButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentButtonLabel", required: false }] }], showAttachmentButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAttachmentButton", required: false }] }], editIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "editIndicatorText", required: false }] }], replyIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyIndicatorText", required: false }] }], enableMentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMentions", required: false }] }], mentionUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionUsers", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], messageInputRef: [{
                 type: ViewChild,
                 args: ['messageInputEl']
             }], fileInput: [{
@@ -15144,8 +15121,10 @@ class DsMobileChatModalComponent {
                 }, 150);
             });
         });
-        // In a real app, you would send this to your backend
-        // this.chatService.sendMessage(this.chatData.participant.id, event.content, event.attachments);
+        // Executing the onSend callback if provided
+        if (this.chatData.onSend) {
+            this.chatData.onSend(event.content, event.attachments || []);
+        }
     }
     /**
      * Handle attachment click
@@ -15251,8 +15230,28 @@ class DsMobileChatModalComponent {
      * Handle file attachment click
      */
     handleFileAttachmentClick(fileAttachment) {
-        console.log('[ChatModal] File attachment clicked:', fileAttachment);
-        // In a real app, you would open the file viewer
+        // If a custom handler is provided, use it
+        if (this.chatData.onFileClick) {
+            this.chatData.onFileClick(fileAttachment);
+            return;
+        }
+        // Default behavior: Try to open/download the file
+        const url = fileAttachment.src || fileAttachment.url;
+        if (url) {
+            const link = document.createElement('a');
+            link.href = url;
+            link.target = '_blank';
+            // If it has a name, setting download attribute suggests downloading
+            if (fileAttachment.name) {
+                link.download = fileAttachment.name;
+            }
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        else {
+            console.warn('[ChatModal] No URL or source for file attachment:', fileAttachment);
+        }
     }
     /**
      * Handle image attachment click - opens lightbox
@@ -15809,7 +15808,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *     ],
  *     currentUserId: '456',
  *     currentUserInitials: 'JD',
- *     autoFocus: true
+ *     currentUserInitials: 'JD',
+ *     autoFocus: true,
+ *     onSend: async (message, attachments) => {
+ *       console.log('Sending message:', message);
+ *       // await this.chatService.sendMessage(participant.id, message, attachments);
+ *     },
+ *     onFileClick: (file) => {
+ *       console.log('File clicked:', file);
+ *       // window.open(file.url, '_blank');
+ *     }
  *   });
  * }
  * ```