@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/chat-modal/ds-mobile-chat-modal.css

@@ -1,159 +0,0 @@
-/**
- * Chat Modal Styles
- *
- * Component-specific styles for the chat modal.
- * Base modal styles are inherited from ds-mobile-modal-base.
- */
-
-/* ============================================
-   OVERRIDE BASE MODAL STYLES
-   ============================================ */
-
-/* Remove top padding from base modal for chat - we want the background to start immediately after header */
-:host ::ng-deep .modal-content-container {
-  padding-top: 0;
-}
-
-/* ============================================
-   MESSAGES CONTAINER
-   ============================================ */
-
-/* Old container no longer needed - section provides structure */
-.chat-messages-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-/* ============================================
-   CENTERED AVATAR SECTION (inside chat wrapper)
-   ============================================ */
-
-/* Old padding removed - section provides padding */
-.chat-avatar-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 48px 0 0 0;
-  background: var(--color-background-neutral-primary, #ffffff);
-}
-
-.chat-avatar-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.chat-avatar-name {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--color-text-primary, #1a1a1a);
-}
-
-.chat-avatar-role {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-xs);
-  font-weight: 400;
-  line-height: 1.2;
-  color: var(--color-text-secondary, #666666);
-}
-
-.chat-avatar-meta {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-xs);
-  font-weight: 400;
-  line-height: 1.2;
-  color: var(--color-text-tertiary, #737373);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* Old padding removed - section provides padding */
-.messages-list {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 16px 0 0 0;
-  align-items: stretch; /* Ensure messages take full width for proper alignment */
-}
-
-/* Ensure message bubbles can align properly */
-.messages-list ds-mobile-message-bubble {
-  width: 100%;
-  display: flex;
-}
-
-/* ============================================
-   TIMESTAMP HEADER
-   ============================================ */
-
-.timestamp-header {
-  display: flex;
-  justify-content: center;
-  margin: 16px 0 8px 0;
-}
-
-.timestamp-text {
-  font-family: 'Brockmann', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--color-text-secondary);
-  padding: 4px 12px;
-}
-
-/* ============================================
-   FILE ATTACHMENTS
-   ============================================ */
-
-.message-file-attachments {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 12px;
-  padding: 0 20px 0 60px; /* Left padding to align with message bubble (20px + 32px avatar + 8px gap) */
-  max-width: 100%;
-}
-
-.message-file-attachments.own-message {
-  padding: 0 0px 0 96px; /* No avatar on right, so just right padding like normal content */
-  align-items: flex-end;
-}
-
-.message-file-attachments ds-mobile-card-inline-file {
-  max-width: 280px;
-  width: 100%;
-}
-
-/* Inline image preview */
-.message-image-attachment {
-  width: 96px;
-  height: 96px;
-  cursor: pointer;
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  transition: transform 0.2s ease;
-  border: 1px solid var(--border-color-default, #e5e5e5);
-}
-
-.message-image-attachment:active {
-  transform: scale(0.98);
-}
-
-.message-image-attachment .inline-image {
-  width: 100%;
-  height: 100%;
-  display: block;
-  -o-object-fit: cover;
-     object-fit: cover; /* Crop to fit the square */
-}
-
-

package/src/components/chat-modal/ds-mobile-chat-modal.service.ts

@@ -1,105 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
-import { DsMobileChatModalComponent, ChatModalData } from './ds-mobile-chat-modal';
-import { BaseModalService } from '../../services/base-modal.service';
-
-/**
- * DsMobileChatModalService
- *
- * Service for displaying chat conversations in a full-screen modal.
- * Built on Ionic's modal system with native gestures and animations.
- * Follows the same pattern as DsMobilePostDetailModalService for consistent behavior.
- *
- * Features:
- * - Full conversation display
- * - Message thread with bubbles
- * - Message composer
- * - Native modal animations
- * - Safe area support
- * - Keyboard handling
- *
- * @example
- * ```typescript
- * constructor(private chatModal: DsMobileChatModalService) {}
- *
- * async openChat() {
- *   await this.chatModal.open({
- *     participant: {
- *       id: '123',
- *       name: 'Ricki Meihlen',
- *       role: 'Inquiry assignee',
- *       avatarInitials: 'RM'
- *     },
- *     messages: [
- *       {
- *         id: '1',
- *         content: 'We have received your case...',
- *         senderId: '123',
- *         senderName: 'Ricki Meihlen',
- *         timestamp: '12:34',
- *         isOwnMessage: false,
- *         avatarInitials: 'RM'
- *       },
- *       {
- *         id: '2',
- *         content: 'Thank you!',
- *         senderId: '456',
- *         senderName: 'You',
- *         timestamp: '12:35',
- *         isOwnMessage: true,
- *         avatarInitials: 'JD',
- *         readStatus: true
- *       }
- *     ],
- *     currentUserId: '456',
- *     currentUserInitials: 'JD',
- *     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');
- *     }
- *   });
- * }
- * ```
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class DsMobileChatModalService extends BaseModalService {
-  constructor(modalController: ModalController) {
-    super(modalController);
-  }
-
-  /**
-   * Open the chat modal
-   *
-   * @param chatData Chat data to display
-   * @param options Optional loading and error states
-   * @returns Promise that resolves when the modal is presented
-   */
-  async open(chatData: ChatModalData, options?: { loading?: boolean; error?: string }): Promise<void> {
-    // console.log('[ChatModal] Opening with data:', chatData);
-
-    const modal = await this.createModal(
-      DsMobileChatModalComponent,
-      {
-        chatData: chatData,
-        loading: options?.loading ?? false,
-        error: options?.error,
-      },
-      {
-        keyboardClose: true, // Keep keyboard close behavior for this modal
-        cssClass: 'ds-modal-base',
-      },
-    );
-
-    // console.log('[ChatModal] Modal created, presenting...');
-    await modal.present();
-    // console.log('[ChatModal] Modal presented');
-  }
-}