@propbinder/mobile-design 0.2.50 → 0.2.52

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

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

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