@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,237 +0,0 @@
-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

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