@propbinder/mobile-design 0.0.1 → 0.0.2

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

@@ -0,0 +1,499 @@
+import { Component, input, output, computed, signal, PLATFORM_ID, inject } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { DsMobileLongPressDirective } from '../shared/directives/long-press.directive';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobileListItemComponent
+ * 
+ * A versatile, reusable list item component for mobile applications.
+ * Supports both interactive and non-interactive modes with flexible content projection.
+ * 
+ * Features:
+ * - Interactive mode with click and long-press support
+ * - Pseudo-element background extends 8px beyond bounds (no negative margins needed)
+ * - Flexible content slots (leading, main, trailing)
+ * - Optional structured inputs for common use cases (title, subtitle)
+ * - Accessibility features (focus states, ARIA attributes)
+ * - Disabled and loading states
+ * 
+ * This component serves as the foundation for specialized list item types like posts,
+ * notifications, messages, contacts, and other list content.
+ * 
+ * @example
+ * ```html
+ * <!-- Simple structured usage -->
+ * <ds-mobile-list-item
+ *   title="Document Title"
+ *   subtitle="Supporting text"
+ *   [interactive]="true"
+ *   (itemClick)="handleClick()">
+ *   
+ *   <ds-icon content-leading name="document" />
+ * </ds-mobile-list-item>
+ * 
+ * <!-- Flexible custom usage -->
+ * <ds-mobile-list-item
+ *   [interactive]="true"
+ *   (itemClick)="handleClick()"
+ *   (longPress)="showContextMenu()">
+ *   
+ *   <div content-leading>
+ *     <ds-avatar initials="JD" />
+ *   </div>
+ *   
+ *   <div content-main>
+ *     <h3>Custom Content</h3>
+ *     <p>Full control over layout and styling</p>
+ *   </div>
+ *   
+ *   <button content-trailing (click)="handleAction($event)">
+ *     Action
+ *   </button>
+ * </ds-mobile-list-item>
+ * 
+ * <!-- Non-interactive read-only -->
+ * <ds-mobile-list-item
+ *   title="Read-only Item"
+ *   subtitle="No interaction">
+ *   <ds-icon content-leading name="info" />
+ * </ds-mobile-list-item>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-list-item',
+  standalone: true,
+  imports: [CommonModule, DsIconButtonComponent],
+  hostDirectives: [
+    {
+      directive: DsMobileLongPressDirective,
+      outputs: ['longPress']
+    }
+  ],
+  host: {
+    '[class.interactive]': 'interactive() && !disabled()',
+    '[class.disabled]': 'disabled()',
+    '[class.loading]': 'loading()',
+    '[class.no-divider]': '!showDivider()',
+    '[class.variant-feed]': 'variant() === "feed"',
+    '[class.variant-detail]': 'variant() === "detail"',
+    '[class.variant-compact]': 'variant() === "compact"',
+    '[attr.role]': 'interactive() ? "button" : null',
+    '[attr.tabindex]': 'interactive() && !disabled() ? "0" : null',
+    '[attr.aria-disabled]': 'disabled() ? "true" : null',
+    '[style.--leading-size]': 'leadingSize()',
+    '[style.--interactive-offset]': 'interactiveOffset()',
+    '[style.--divider-spacing]': 'dividerSpacing()',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleKeyDown($event)',
+    '(keydown.space)': 'handleKeyDown($event)',
+    '(longPress)': 'handleLongPress()'
+  },
+  styles: [`
+    :host {
+      display: block;
+      position: relative;
+      padding: var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;
+      box-sizing: border-box;
+      /* CSS variables defined at host level for use by children and pseudo-elements */
+      --leading-size: 32px;
+      --content-gap: 12px;
+      --interactive-offset: 8px;
+    }
+    
+    /* Divider line on host */
+    :host::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: calc(var(--leading-size) + var(--content-gap));
+      right: 0;
+      height: 1px;
+      background: var(--border-color-default, #e5e5e5);
+      z-index: 1;
+      display: var(--divider-display, block);
+    }
+    
+    .list-item-inner {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--content-gap);
+      position: relative;
+    }
+    
+    /* Pseudo-element for interactive background */
+    :host(.interactive) .list-item-inner::before {
+      content: '';
+      position: absolute;
+      top: calc(-1 * var(--interactive-offset));
+      left: calc(-1 * var(--interactive-offset));
+      right: calc(-1 * var(--interactive-offset));
+      bottom: calc(-1 * var(--interactive-offset));
+      background: var(--color-background-primary, #ffffff);
+      border-radius: 16px;
+      z-index: -1;
+      pointer-events: none;
+    }
+    
+    /* Interactive states */
+    :host(.interactive) {
+      cursor: pointer;
+    }
+    
+    /* Hover state (desktop only) */
+    @media (hover: hover) and (pointer: fine) {
+      :host(.interactive):hover .list-item-inner::before {
+        background: var(--color-background-neutral-primary-hover, #f5f5f5);
+      }
+    }
+    
+    /* Active state */
+    :host(.interactive):active .list-item-inner::before {
+      background: var(--color-background-neutral-primary-hover, #f5f5f5);
+    }
+    
+    /* Focus visible for keyboard navigation */
+    :host(.interactive):focus-visible {
+      outline: none;
+    }
+    
+    :host(.interactive):focus-visible .list-item-inner::before {
+      outline: 2px solid var(--color-brand-primary, #5d5fef);
+      outline-offset: 2px;
+    }
+    
+    /* Disabled state */
+    :host(.disabled) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    
+    /* Loading state */
+    :host(.loading) {
+      pointer-events: none;
+    }
+    
+    /* Variants */
+    :host(.variant-detail) .list-item-inner {
+      padding: 0;
+    }
+    
+    :host(.variant-compact) .list-item-inner {
+      gap: 8px;
+    }
+    
+    /* Content slots */
+    .content-leading {
+      flex-shrink: 0;
+      width: var(--leading-size);
+      height: var(--leading-size);
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      z-index: 1;
+    }
+    
+    .content-main {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      position: relative;
+      z-index: 1;
+    }
+    
+    .content-trailing {
+      flex-shrink: 0;
+      display: flex;
+      align-items: flex-start;
+      position: relative;
+      z-index: 1;
+    }
+    
+    /* Structured content styles */
+    .structured-title {
+      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);
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .structured-subtitle {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--text-color-default-secondary, #545B66);
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    /* Desktop more actions button - using ds-icon-button */
+    .desktop-more-button::ng-deep button {
+      border-radius: 50% !important;
+    }
+  `],
+  template: `
+    <div class="list-item-inner">
+      <div class="content-leading">
+        <ng-content select="[content-leading]" />
+      </div>
+      
+      <div class="content-main">
+        @if (title()) {
+          <h3 class="structured-title">{{ title() }}</h3>
+        }
+        @if (subtitle()) {
+          <p class="structured-subtitle">{{ subtitle() }}</p>
+        }
+        
+        <ng-content select="[content-main]" />
+        <ng-content />
+      </div>
+      
+      <div class="content-trailing">
+        @if (interactive() && enableLongPress() && showDesktopMoreButton() && isDesktop()) {
+          <ds-icon-button
+            class="desktop-more-button"
+            icon="remixMoreFill"
+            variant="secondary"
+            size="sm"
+            (clicked)="handleMoreButtonClick($event)"
+            aria-label="More options">
+          </ds-icon-button>
+        }
+        <ng-content select="[content-trailing]" />
+      </div>
+    </div>
+  `
+})
+export class DsMobileListItemComponent {
+  private platformId = inject(PLATFORM_ID);
+  
+  /**
+   * Detect if viewport is desktop size
+   * Use viewport width for breakpoint detection (show button on tablet and above)
+   */
+  isDesktop = signal<boolean>(false);
+  
+  constructor() {
+    if (isPlatformBrowser(this.platformId)) {
+      // Show button on tablet breakpoint and above (768px+)
+      const isDesktopViewport = window.innerWidth >= 768;
+      
+      console.log('[ListItem] Desktop detection:', {
+        innerWidth: window.innerWidth,
+        isDesktopViewport
+      });
+      
+      this.isDesktop.set(isDesktopViewport);
+      
+      // Listen for window resize to update detection
+      window.addEventListener('resize', () => {
+        const newIsDesktop = window.innerWidth >= 768;
+        if (newIsDesktop !== this.isDesktop()) {
+          console.log('[ListItem] Viewport changed, updating desktop detection:', newIsDesktop);
+          this.isDesktop.set(newIsDesktop);
+        }
+      });
+    }
+  }
+  
+  /**
+   * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
+   * Defaults to '32px' for standard list item avatars/icons
+   */
+  leadingSize = input<string>('32px');
+  
+  /**
+   * Display variant
+   * - 'feed' - Standard feed display (default)
+   * - 'detail' - Full detail view
+   * - 'compact' - Compact display for nested/related items
+   */
+  variant = input<'feed' | 'detail' | 'compact'>('feed');
+  
+  /**
+   * Whether the list item is interactive (clickable and long-pressable)
+   * When true, adds interactive background, cursor pointer, and touch handlers
+   */
+  interactive = input<boolean>(false);
+  
+  /**
+   * Whether the list item is disabled
+   * Disables all interactions and reduces opacity
+   */
+  disabled = input<boolean>(false);
+  
+  /**
+   * Whether the list item is in a loading state
+   * Disables interactions but maintains full opacity
+   */
+  loading = input<boolean>(false);
+  
+  /**
+   * Enable long-press interaction when interactive is true
+   * Set to false to disable long-press but keep click
+   */
+  enableLongPress = input<boolean>(true);
+  
+  /**
+   * Show "more actions" button on desktop for items with long-press enabled
+   * Only visible on desktop (hover: hover) and when enableLongPress is true
+   * Clicking this button triggers the same handler as long-press on mobile
+   * @default true
+   */
+  showDesktopMoreButton = input<boolean>(true);
+  
+  /**
+   * Offset distance for the interactive background pseudo-element
+   * Extends the background beyond the content bounds
+   * @default '8px'
+   */
+  interactiveOffset = input<string>('8px');
+  
+  /**
+   * Optional structured title text
+   * Provides a simple way to add title without custom markup
+   */
+  title = input<string>();
+  
+  /**
+   * Optional structured subtitle text
+   * Provides a simple way to add subtitle without custom markup
+   */
+  subtitle = input<string>();
+  
+  /**
+   * Whether to show the divider line below the list item
+   * Automatically hidden on last-child and detail variant
+   * @default true
+   */
+  showDivider = input<boolean>(true);
+  
+  /**
+   * Spacing around the divider (top and bottom padding)
+   * @default '4px'
+   */
+  dividerSpacing = input<string>('4px');
+  
+  /**
+   * Emits when the list item is clicked (if interactive and not disabled)
+   */
+  itemClick = output<void>();
+  
+  /**
+   * Emits when the desktop more actions button is clicked
+   * This is separate from longPress to give more control to parent components
+   * Typically, you can use (longPress) for both mobile and desktop actions
+   */
+  moreButtonClick = output<Event>();
+  
+  /**
+   * Track if long press was triggered to prevent click
+   */
+  private longPressTriggered = false;
+  
+  /**
+   * Check if leading content slot has content
+   * Always true to maintain consistent layout
+   */
+  hasLeadingContent = computed(() => true);
+  
+  /**
+   * Check if trailing content slot has content
+   * Always true to maintain consistent layout
+   */
+  hasTrailingContent = computed(() => true);
+  
+  /**
+   * Handle click events
+   */
+  handleClick(event: Event): void {
+    console.log('[ListItem] Click event fired', {
+      interactive: this.interactive(),
+      disabled: this.disabled(),
+      loading: this.loading(),
+      longPressTriggered: this.longPressTriggered,
+      target: event.target
+    });
+    
+    if (!this.interactive() || this.disabled() || this.loading()) {
+      console.log('[ListItem] Click ignored - not interactive or disabled/loading');
+      return;
+    }
+    
+    // Don't emit click if it came from an interactive child element
+    // (but not the host element itself)
+    const target = event.target as HTMLElement;
+    const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
+    
+    // Check if the interactive element is a child, not the host itself
+    if (closestInteractive && closestInteractive !== event.currentTarget) {
+      console.log('[ListItem] Click ignored - came from interactive child:', closestInteractive);
+      return;
+    }
+    
+    if (!this.longPressTriggered) {
+      console.log('[ListItem] Emitting itemClick');
+      this.itemClick.emit();
+    } else {
+      console.log('[ListItem] Click ignored - long press was triggered');
+    }
+    
+    this.longPressTriggered = false;
+  }
+  
+  /**
+   * Handle keyboard events (Enter/Space)
+   */
+  handleKeyDown(event: KeyboardEvent): void {
+    if (!this.interactive() || this.disabled() || this.loading()) {
+      return;
+    }
+    
+    event.preventDefault();
+    this.itemClick.emit();
+  }
+  
+  /**
+   * Handle long press events from the directive
+   * Set the flag to prevent the subsequent click event
+   */
+  handleLongPress(): void {
+    this.longPressTriggered = true;
+    // Reset the flag after a short delay to allow for the next interaction
+    setTimeout(() => {
+      this.longPressTriggered = false;
+    }, 100);
+  }
+  
+  /**
+   * Handle desktop more button click
+   * Stops propagation to prevent triggering itemClick
+   * Emits moreButtonClick for parent components to handle
+   */
+  handleMoreButtonClick(event: Event): void {
+    console.log('[ListItem] Desktop more button clicked');
+    
+    // Stop propagation to prevent triggering itemClick
+    event.stopPropagation();
+    event.preventDefault();
+    
+    // Emit the more button click event
+    this.moreButtonClick.emit(event);
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export * from './ds-mobile-list-item';
+

package/src/components/list-item-static/ds-mobile-list-item-static.ts

@@ -0,0 +1,133 @@
+import { Component, input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * DsMobileListItemStaticComponent
+ * 
+ * A read-only version of the interactive list item component.
+ * Used for displaying static information without interaction.
+ * 
+ * This component has the same structure as the interactive list item but without:
+ * - Padding
+ * - Rounded corners
+ * - Hover states
+ * - Click interactions
+ * - Background fill (transparent)
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-list-item-static
+ *   [leadingSize]="'40px'">
+ *   
+ *   <div content-leading>
+ *     <ds-avatar initials="JD" />
+ *   </div>
+ *   
+ *   <div content-main>
+ *     <h3>Main Content</h3>
+ *     <p>Supporting text goes here...</p>
+ *   </div>
+ *   
+ *   <div content-trailing>
+ *     <span>Info</span>
+ *   </div>
+ * </ds-mobile-list-item-static>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-list-item-static',
+  standalone: true,
+  imports: [CommonModule],
+  host: {
+    '[style.--leading-size]': 'leadingSize()'
+  },
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      background: transparent;
+      padding: 0;
+      gap: 12px;
+      position: relative;
+      --leading-size: 32px;
+    }
+    
+    :host::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: calc(var(--leading-size) + 12px);
+      right: 0;
+      height: 1px;
+      background: var(--border-color-default);
+    }
+    
+    :host:last-child::after {
+      display: none;
+    }
+    
+    .content-leading {
+      flex-shrink: 0;
+      width: var(--leading-size);
+      min-height: var(--leading-size);
+      height: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .content-main {
+      flex: 1;
+      min-width: 0;
+      min-height: var(--leading-size);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 8px;
+    }
+    
+    .content-trailing {
+      flex-shrink: 0;
+      display: flex;
+      align-items: flex-start;
+    }
+  `],
+  template: `
+    @if (hasLeadingContent()) {
+      <div class="content-leading">
+        <ng-content select="[content-leading]" />
+      </div>
+    }
+    
+    <div class="content-main">
+      <ng-content select="[content-main]" />
+      <ng-content />
+    </div>
+    
+    @if (hasTrailingContent()) {
+      <div class="content-trailing">
+        <ng-content select="[content-trailing]" />
+      </div>
+    }
+  `
+})
+export class DsMobileListItemStaticComponent {
+  /**
+   * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
+   * Defaults to '32px' for standard list item avatars
+   */
+  leadingSize = input<string>('32px');
+  
+  /**
+   * Check if leading content slot has content
+   */
+  hasLeadingContent = computed(() => true); // Always render slot container for consistency
+  
+  /**
+   * Check if trailing content slot has content
+   */
+  hasTrailingContent = computed(() => true); // Always render slot container for consistency
+}
+

package/src/components/list-item-static/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileListItemStaticComponent } from './ds-mobile-list-item-static';
+