@propbinder/mobile-design 0.0.1 → 0.0.2

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

@@ -0,0 +1,197 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsMobileListItemComponent } from '../list-item';
+
+/**
+ * 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, DsAvatarComponent, 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;
+    }
+    
+    .sender-details {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .sender-name {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      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);
+      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;
+    }
+    
+    .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'"
+      [variant]="'feed'"
+      [interactive]="clickable()"
+      (itemClick)="handleMessageClick()"
+      (longPress)="handleLongPress()">
+      
+      <div content-leading>
+        <ds-avatar 
+          [initials]="avatarInitials()"
+          [type]="avatarType()"
+          [src]="avatarSrc()"
+          size="md" />
+      </div>
+      
+      <div content-main>
+        <div class="message-header">
+          <div class="sender-details">
+            <span class="sender-name">{{ senderName() }}</span>
+            <span class="sender-meta">{{ senderRole() }}</span>
+          </div>
+          
+          @if (unread()) {
+            <div class="unread-indicator"></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>();
+  
+  /**
+   * 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);
+  
+  /**
+   * 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';
+

package/src/components/interactive-list-item-post/ds-mobile-interactive-list-item-post.css

@@ -0,0 +1,70 @@
+/**
+ * Interactive List Item Post Styles
+ * Styles specific to post list items
+ */
+
+/* Author Details Container */
+:root .author-details,
+.author-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+/* Author Name */
+:root .author-name,
+.author-name {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  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;
+}
+
+/* Author Meta (role, timestamp, etc.) */
+:root .author-meta,
+.author-meta {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.26px;
+  color: var(--text-color-default-tertiary, #626B78);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:root .author-meta .separator,
+.author-meta .separator {
+  color: var(--text-color-default-tertiary, #626B78);
+}
+
+/* Variants for lightbox/overlay contexts (white text on dark bg) */
+:root .lightbox-context .author-name,
+.lightbox-context .author-name,
+:root .overlay-context .author-name,
+.overlay-context .author-name {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+:root .lightbox-context .author-meta,
+.lightbox-context .author-meta,
+:root .overlay-context .author-meta,
+.overlay-context .author-meta {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+:root .lightbox-context .author-meta .separator,
+.lightbox-context .author-meta .separator,
+:root .overlay-context .author-meta .separator,
+.overlay-context .author-meta .separator {
+  color: rgba(255, 255, 255, 0.5);
+}
+