@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/dropdown/ds-mobile-dropdown.ts

@@ -0,0 +1,340 @@
+import { 
+  Component, 
+  input, 
+  output, 
+  signal, 
+  computed, 
+  ContentChild, 
+  TemplateRef,
+  ElementRef,
+  inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+  effect
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconComponent } from '@propbinder/design-system';
+import { IonPopover } from '@ionic/angular/standalone';
+
+export interface DsMobileDropdownItem {
+  id: string;
+  /** Optional leading icon */
+  leadingIcon?: string;
+  /** Optional trailing icon */
+  trailingIcon?: string;
+  /** Main label text */
+  label?: string;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  /** Optional action callback */
+  action?: () => void;
+  /** Custom data for template rendering */
+  data?: any;
+}
+
+export type DropdownPosition = 'above' | 'below';
+export type DropdownAlign = 'start' | 'end';
+
+/**
+ * DsMobileDropdownComponent
+ * 
+ * A mobile-optimized dropdown component for action menus, mention lists, and selection lists.
+ * Uses Ionic Popover for robust mobile positioning and backdrop management.
+ * 
+ * Features:
+ * - Vertical list layout with leading/main/trailing slots
+ * - Custom template support via content projection
+ * - Mobile-friendly touch interactions (mousedown events)
+ * - Ionic-powered backdrop overlay for dismissal
+ * - Configurable positioning (above/below) and alignment (start/end)
+ * - Max height with scroll support
+ * - Smooth enter/exit animations
+ * 
+ * @example
+ * Basic dropdown with default items:
+ * ```html
+ * <button (click)="toggleMenu()">Open Menu</button>
+ * <ds-mobile-dropdown 
+ *   [items]="menuItems"
+ *   [isOpen]="isMenuOpen()"
+ *   position="below"
+ *   align="start"
+ *   (itemSelected)="handleSelection($event)"
+ *   (closed)="closeMenu()">
+ * </ds-mobile-dropdown>
+ * ```
+ * 
+ * @example
+ * Custom template for mention menu with avatars:
+ * ```html
+ * <textarea (input)="handleInput($event)"></textarea>
+ * <ds-mobile-dropdown 
+ *   [items]="users"
+ *   [isOpen]="showMentions()"
+ *   position="above"
+ *   [maxHeight]="200"
+ *   (itemSelected)="selectUser($event)"
+ *   (closed)="closeMentions()">
+ *   <ng-template #itemTemplate let-item>
+ *     <ds-avatar 
+ *       [initials]="item.data.initials" 
+ *       size="sm" />
+ *     <div class="user-info">
+ *       <span>{{ item.data.name }}</span>
+ *       <span>{{ item.data.role }}</span>
+ *     </div>
+ *   </ng-template>
+ * </ds-mobile-dropdown>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-dropdown',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent, IonPopover],
+  styleUrls: ['./ds-mobile-dropdown.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ion-popover
+      [isOpen]="isOpen()"
+      [trigger]="trigger()"
+      [side]="position() === 'above' ? 'top' : 'bottom'"
+      [alignment]="'start'"
+      [showBackdrop]="true"
+      [dismissOnSelect]="false"
+      [backdropDismiss]="true"
+      [keepContentsMounted]="false"
+      [keyboardClose]="false"
+      (didDismiss)="closed.emit()"
+      [style.--offset-y]="offsetY()"
+      [style.--offset-x]="offsetX()"
+      [style.--max-width]="maxWidth()"
+      [style.--background]="'transparent'"
+      [style.--box-shadow]="'none'"
+      [style.--backdrop-opacity]="'0'">
+      
+      <ng-template>
+        @if (customContent) {
+          <!-- Fully custom popover content (e.g. picker, form) -->
+          <ng-container *ngTemplateOutlet="customContent" />
+        } @else {
+          <!-- Standard item list -->
+          <div 
+            [class]="dropdownClasses()"
+            [style.max-height.px]="maxHeight()"
+            (mousedown)="$event.stopPropagation()"
+            (click)="$event.stopPropagation()"
+            role="menu"
+            [attr.aria-label]="ariaLabel()">
+              
+            @if (customItemTemplate) {
+              <!-- Custom template for each item -->
+              @for (item of items(); track item.id) {
+                <div
+                  [class]="getItemClass(item)"
+                  [attr.data-disabled]="item.disabled ? '' : null"
+                  [attr.aria-disabled]="item.disabled"
+                  (mousedown)="handleItemClick(item, $event)"
+                  role="menuitem">
+                  <ng-container 
+                    *ngTemplateOutlet="customItemTemplate; context: { $implicit: item }" />
+                </div>
+              }
+            } @else {
+              <!-- Default three-slot template: leading - main - trailing -->
+              @for (item of items(); track item.id) {
+                <div
+                  [class]="getItemClass(item)"
+                  [attr.data-disabled]="item.disabled ? '' : null"
+                  [attr.aria-disabled]="item.disabled"
+                  (mousedown)="handleItemClick(item, $event)"
+                  role="menuitem">
+                  
+                  <!-- Leading slot -->
+                  @if (item.leadingIcon) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--leading">
+                      <ds-icon [name]="item.leadingIcon" size="16px" />
+                    </div>
+                  }
+                  
+                  <!-- Main slot -->
+                  @if (item.label) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--main">
+                      <span class="ds-mobile-dropdown__label">{{ item.label }}</span>
+                    </div>
+                  }
+                  
+                  <!-- Trailing slot -->
+                  @if (item.trailingIcon) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--trailing">
+                      <ds-icon [name]="item.trailingIcon" size="20px" />
+                    </div>
+                  }
+                </div>
+              }
+            }
+            
+            @if (items().length === 0 && emptyMessage()) {
+              <div class="ds-mobile-dropdown__empty">{{ emptyMessage() }}</div>
+            }
+          </div>
+        }
+      </ng-template>
+    </ion-popover>
+  `
+})
+export class DsMobileDropdownComponent {
+  private elementRef = inject(ElementRef);
+  
+  constructor() {
+    // Effect to refocus the keepFocusOn element when popover opens
+    effect(() => {
+      const isOpen = this.isOpen();
+      const focusElement = this.keepFocusOn();
+      
+      if (isOpen && focusElement?.nativeElement) {
+        // Wait for popover to mount, then refocus
+        setTimeout(() => {
+          focusElement.nativeElement.focus();
+        }, 100);
+      }
+    });
+  }
+  
+  /**
+   * Content projection for custom item template (per-item renderer)
+   */
+  @ContentChild('itemTemplate') customItemTemplate?: TemplateRef<any>;
+
+  /**
+   * Content projection for fully custom popover content.
+   * When provided, the item list is bypassed entirely and this template
+   * is rendered directly inside the popover — use for pickers, forms, etc.
+   */
+  @ContentChild('customContent') customContent?: TemplateRef<any>;
+  
+  /**
+   * Optional trigger element ID for Ionic Popover positioning
+   */
+  trigger = input<string>();
+  
+  /**
+   * Optional element to keep focused (prevent keyboard from dismissing)
+   * Pass ElementRef to maintain focus when popover opens
+   */
+  keepFocusOn = input<ElementRef<any>>();
+  
+  /**
+   * Array of dropdown items to display.
+   * Not required when using the #customContent slot.
+   */
+  items = input<DsMobileDropdownItem[]>([]);
+  
+  /**
+   * Whether the dropdown is open
+   */
+  isOpen = input<boolean>(false);
+  
+  /**
+   * Position relative to parent container
+   * - 'above': Appears above the anchor
+   * - 'below': Appears below the anchor
+   */
+  position = input<DropdownPosition>('above');
+  
+  /**
+   * Horizontal alignment
+   * - 'start': Left-aligned (default)
+   * - 'end': Right-aligned
+   */
+  align = input<DropdownAlign>('start');
+  
+  /**
+   * Maximum height in pixels before scrolling
+   */
+  maxHeight = input<number>(200);
+  
+  /**
+   * Message to show when items array is empty
+   */
+  emptyMessage = input<string>('No items available');
+  
+  /**
+   * ARIA label for the dropdown menu
+   */
+  ariaLabel = input<string>('Dropdown menu');
+
+  /**
+   * Maximum width of the popover.
+   * Defaults to '192px' (standard dropdown width).
+   * Override when using #customContent that requires more space (e.g. '280px' for a picker).
+   */
+  maxWidth = input<string>('192px');
+  
+  /**
+   * Emits when an item is selected
+   */
+  itemSelected = output<DsMobileDropdownItem>();
+  
+  /**
+   * Emits when the dropdown should be closed (backdrop click)
+   */
+  closed = output<void>();
+  
+  /**
+   * Computed dropdown CSS classes
+   */
+  dropdownClasses = computed(() => {
+    const classes = [
+      'ds-mobile-dropdown',
+      `ds-mobile-dropdown--${this.position()}`,
+      `ds-mobile-dropdown--align-${this.align()}`
+    ];
+    
+    return classes.join(' ');
+  });
+  
+  /**
+   * Computed offset Y for Ionic Popover
+   * Uses CSS variable for precise control
+   */
+  offsetY = computed(() => {
+    // 4px offset - works well on both web and iOS
+    return this.position() === 'above' ? '-4px' : '4px';
+  });
+  
+  /**
+   * Computed offset X for Ionic Popover
+   * Negative value to shift left by trigger position + add 20px left margin
+   */
+  offsetX = computed(() => {
+    // This will be calculated to position it 20px from the left edge
+    // The exact value depends on where the trigger is positioned
+    return '0px'; // Ionic will handle this based on alignment="start"
+  });
+  
+  /**
+   * Get CSS classes for a dropdown item
+   */
+  getItemClass(item: DsMobileDropdownItem): string {
+    const classes = ['ds-mobile-dropdown__item'];
+    if (item.disabled) classes.push('ds-mobile-dropdown__item--disabled');
+    return classes.join(' ');
+  }
+  
+  /**
+   * Handle item click with mousedown to prevent keyboard loss
+   */
+  handleItemClick(item: DsMobileDropdownItem, event: MouseEvent): void {
+    if (item.disabled) return;
+    
+    event.preventDefault();
+    event.stopPropagation();
+    
+    // Execute item action if provided
+    if (item.action) {
+      item.action();
+    }
+    
+    // Emit selection event
+    this.itemSelected.emit(item);
+  }
+}

package/src/components/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileDropdownComponent, type DsMobileDropdownItem, type DropdownPosition, type DropdownAlign } from './ds-mobile-dropdown';
+