@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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