@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/interactive-list-item-message/ds-mobile-interactive-list-item-message.ts

@@ -0,0 +1,237 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsMobileListItemComponent } from '../list-item';
+import { DsAvatarWithBadgeComponent } from '../avatar-with-badge';
+
+/**
+ * DsMobileInteractiveListItemMessageComponent
+ * 
+ * Specialized interactive list item for displaying message threads.
+ * Built on top of ds-mobile-interactive-list-item base component.
+ * Displays message preview with sender info - simplified version without actions.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-interactive-list-item-message
+ *   [senderName]="'John Doe'"
+ *   [senderRole]="'Tenant'"
+ *   [timestamp]="'2h ago'"
+ *   [message]="'Hey, when is the maintenance scheduled?'"
+ *   [avatarInitials]="'JD'"
+ *   [unread]="true"
+ *   [clickable]="true"
+ *   (messageClick)="openThread()">
+ * </ds-mobile-interactive-list-item-message>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-interactive-list-item-message',
+  standalone: true,
+  imports: [CommonModule, DsAvatarWithBadgeComponent, DsMobileListItemComponent],
+  styles: [`
+    :host {
+      display: block;
+    }
+    
+    /* Hide divider on last child */
+    :host:last-child {
+      --divider-display: none;
+      --item-padding-bottom: 0;
+    }
+    
+    .message-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+    margin-bottom: 8px;
+    }
+    
+    .sender-details {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 2px;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .sender-name-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+    }
+    
+    .sender-name {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--text-color-default-primary, #202227);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+    }
+    
+    .sender-meta {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs, 12px);
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -0.26px;
+      color: var(--text-color-default-tertiary, #737373);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    
+    .meta-separator {
+      color: var(--text-color-default-tertiary, #737373);
+      opacity: 0.5;
+    }
+    
+    .unread-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--color-brand-primary, #5d5fef);
+      flex-shrink: 0;
+    }
+    
+    .message-preview {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--text-color-default-secondary, #545B66);
+      margin: 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `],
+  template: `
+    <ds-mobile-list-item
+      [leadingSize]="'32px'"
+      [align]="align()"
+      [interactive]="clickable()"
+      [enableLongPress]="false"
+      [showDesktopMoreButton]="false"
+      [moreActions]="false"
+      (itemClick)="handleMessageClick()">
+      
+      <div content-leading>
+        <ds-avatar-with-badge 
+          [initials]="avatarInitials()"
+          [type]="avatarType()"
+          [src]="avatarSrc()"
+          size="md" />
+      </div>
+      
+      <div content-main>
+        <div class="message-header">
+          <div class="sender-details">
+            <div class="sender-name-row">
+              <span class="sender-name">{{ senderName() }}</span>
+              @if (unread()) {
+                <div class="unread-indicator"></div>
+              }
+            </div>
+            <span class="sender-meta">
+              {{ senderRole() }}
+              @if (timestamp()) {
+                <span class="meta-separator">·</span>
+                <span>{{ timestamp() }}</span>
+              }
+            </span>
+          </div>
+        </div>
+        
+        <p class="message-preview">{{ message() }}</p>
+      </div>
+    </ds-mobile-list-item>
+  `
+})
+export class DsMobileInteractiveListItemMessageComponent {
+  /**
+   * Sender's display name
+   */
+  senderName = input.required<string>();
+  
+  /**
+   * Sender's role (e.g., "Tenant", "Property Manager")
+   */
+  senderRole = input.required<string>();
+  
+  /**
+   * Timestamp for the message (e.g., "2h ago", "2t siden")
+   */
+  timestamp = input<string>('');
+  
+  /**
+   * Message preview text
+   */
+  message = input.required<string>();
+  
+  /**
+   * Avatar initials (for initials type)
+   */
+  avatarInitials = input<string>('');
+  
+  /**
+   * Avatar type
+   */
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  
+  /**
+   * Avatar photo source (for photo type)
+   */
+  avatarSrc = input<string>('');
+  
+  /**
+   * Whether the message is unread
+   */
+  unread = input<boolean>(false);
+  
+  /**
+   * Whether the message item is clickable
+   */
+  clickable = input<boolean>(true);
+  
+  /**
+   * Vertical alignment of content
+   * - 'top' - Align to top (default)
+   * - 'center' - Align to center
+   * - 'bottom' - Align to bottom
+   */
+  align = input<'top' | 'center' | 'bottom'>('top');
+  
+  /**
+   * Emits when the message item is clicked
+   */
+  messageClick = output<void>();
+  
+  /**
+   * Emits when the message item is long-pressed
+   */
+  longPress = output<void>();
+  
+  handleMessageClick(): void {
+    this.messageClick.emit();
+  }
+  
+  handleLongPress(): void {
+    this.longPress.emit();
+  }
+}
+

package/src/components/interactive-list-item-message/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileInteractiveListItemMessageComponent } from './ds-mobile-interactive-list-item-message';
+