@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,603 @@
+import {
+  Component,
+  input,
+  output,
+  computed,
+  signal,
+  PLATFORM_ID,
+  inject,
+  ElementRef,
+  AfterViewInit,
+} 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.no-leading-content]': '!hasLeadingContent()',
+    '[class.variant-compact]': 'variant() === "compact"',
+    '[class.align-top]': 'align() === "top"',
+    '[class.align-center]': 'align() === "center"',
+    '[class.align-bottom]': 'align() === "bottom"',
+    '[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);
+      }
+
+      /* Hide divider when no-divider class is present */
+      :host(.no-divider)::after {
+        display: none;
+      }
+
+      /* Adjust divider when no leading content */
+      :host(.no-leading-content)::after {
+        left: 0;
+      }
+
+      .list-item-inner {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: var(--content-gap);
+        position: relative;
+      }
+
+      :host(.align-center) .list-item-inner {
+        align-items: center;
+      }
+
+      :host(.align-bottom) .list-item-inner {
+        align-items: flex-end;
+      }
+
+      /* 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-neutral-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-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;
+      }
+
+      :host(.align-center) .content-leading {
+        align-items: center;
+      }
+
+      :host(.align-bottom) .content-leading {
+        align-items: flex-end;
+      }
+
+      .content-main {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        position: relative;
+        z-index: 1;
+        justify-content: flex-start;
+      }
+
+      :host(.align-center) .content-main {
+        justify-content: center;
+      }
+
+      :host(.align-bottom) .content-main {
+        justify-content: flex-end;
+      }
+
+      .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">
+      @if (hasLeadingContent()) {
+      <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() && shouldShowMoreButton()) {
+        <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 implements AfterViewInit {
+  private platformId = inject(PLATFORM_ID);
+  private elementRef = inject(ElementRef);
+
+  /**
+   * 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);
+        }
+      });
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Check if there's actual content in the leading slot
+    this.checkLeadingContent();
+  }
+
+  /**
+   * Check if leading content slot has actual content projected
+   */
+  private checkLeadingContent(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    const hostElement = this.elementRef.nativeElement;
+    const leadingElements = hostElement.querySelectorAll('[content-leading]');
+    
+    // Check if any element with content-leading attribute exists and has content
+    const hasContent = Array.from(leadingElements).some((el: any) => {
+      return el.childNodes.length > 0 || el.textContent?.trim().length > 0;
+    });
+
+    this.hasLeadingContent.set(hasContent);
+  }
+
+  /**
+   * 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
+   * - undefined (default) - Standard display
+   * - 'compact' - Compact display for nested/related items
+   */
+  variant = input<'compact' | undefined>(undefined);
+
+  /**
+   * Vertical alignment of leading and main content slots
+   * - 'top' - Align to top (default)
+   * - 'center' - Align to center
+   * - 'bottom' - Align to bottom
+   */
+  align = input<'top' | 'center' | 'bottom'>('top');
+
+  /**
+   * 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
+   * @deprecated Use `moreActions` instead. Kept for backwards compatibility.
+   * @default true
+   */
+  showDesktopMoreButton = input<boolean>(true);
+
+  /**
+   * Unified toggle for contextual actions (more button + long press).
+   * - `true`  — more button visible on **all** breakpoints, long press enabled
+   * - `false` — more button hidden, long press suppressed
+   * - `undefined` (default) — falls back to legacy `enableLongPress` + `showDesktopMoreButton` + desktop check
+   */
+  moreActions = input<boolean | undefined>(undefined);
+
+  /**
+   * Resolved visibility of the more-actions button.
+   * When `moreActions` is set it takes precedence; otherwise legacy inputs + breakpoint apply.
+   */
+  shouldShowMoreButton = computed(() => {
+    const ma = this.moreActions();
+    if (ma !== undefined) return ma;
+    return this.enableLongPress() && this.showDesktopMoreButton() && this.isDesktop();
+  });
+
+  /**
+   * 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
+   * Dynamically updated after view initialization
+   */
+  hasLeadingContent = signal<boolean>(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"]'
+    );
+
+    // Only block if the interactive element is a REAL child action (like a button in trailing slot),
+    // but NOT if it's just the host itself or something inside leading/main that shouldn't block.
+    if (closestInteractive && closestInteractive !== event.currentTarget) {
+      // If the target is inside content-leading or content-main, we generally want to allow the click
+      const isInsidePrimaryContent = !!target.closest('[content-leading], [content-main], .structured-title, .structured-subtitle');
+      
+      if (!isInsidePrimaryContent) {
+        // console.log('[ListItem] Click ignored - came from interactive child in trailing/unknown slot:', 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: Event): 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 {
+    if (this.moreActions() === false) return;
+    this.longPressTriggered = true;
+    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';
+