@propbinder/mobile-design 0.0.2 → 0.0.22

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

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

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

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

@@ -1,70 +0,0 @@
-/**
- * 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);
-}
-