@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/components/post-detail-modal/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Mobile Post Detail Modal Module
+ * 
+ * Service and component for displaying posts in a modal
+ */
+
+export * from './ds-mobile-post-detail-modal';
+export * from './ds-mobile-post-detail-modal.service';
+

package/src/components/shared/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './long-press.directive';
+

package/src/components/shared/directives/long-press.directive.ts

@@ -0,0 +1,208 @@
+import { 
+  Directive, 
+  Output, 
+  EventEmitter, 
+  HostListener, 
+  Input,
+  OnDestroy 
+} from '@angular/core';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
+/**
+ * DsMobileLongPressDirective
+ * 
+ * A reusable directive for handling long press interactions on mobile devices.
+ * Provides haptic feedback and prevents long press when touching interactive elements.
+ * 
+ * Features:
+ * - Configurable duration and movement threshold
+ * - Automatic haptic feedback (with fallback to navigator.vibrate)
+ * - Excludes interactive elements (buttons, links, inputs)
+ * - Handles touchmove cancellation
+ * - Context menu support (right-click on desktop)
+ * 
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <div dsMobileLongPress (longPress)="handleLongPress()">
+ *   Long press me
+ * </div>
+ * 
+ * <!-- Custom duration and threshold -->
+ * <div 
+ *   dsMobileLongPress 
+ *   [longPressDuration]="800"
+ *   [moveThreshold]="15"
+ *   [excludeSelectors]="'button, a, .no-longpress'"
+ *   (longPress)="showContextMenu()">
+ *   Custom long press
+ * </div>
+ * ```
+ */
+@Directive({
+  selector: '[dsMobileLongPress]',
+  standalone: true
+})
+export class DsMobileLongPressDirective implements OnDestroy {
+  /**
+   * Duration in milliseconds to trigger long press
+   * @default 500
+   */
+  @Input() longPressDuration = 500;
+
+  /**
+   * Maximum movement in pixels before canceling long press
+   * @default 10
+   */
+  @Input() moveThreshold = 10;
+
+  /**
+   * CSS selectors to exclude from long press detection
+   * @default 'button, a, input, select, textarea, [role="button"]'
+   */
+  @Input() excludeSelectors = 'button, a, input, select, textarea, [role="button"]';
+
+  /**
+   * Haptic feedback style (Light, Medium, Heavy)
+   * @default ImpactStyle.Medium
+   */
+  @Input() hapticStyle: ImpactStyle = ImpactStyle.Medium;
+
+  /**
+   * Enable/disable haptic feedback
+   * @default true
+   */
+  @Input() enableHaptics = true;
+
+  /**
+   * Emits when long press is triggered
+   */
+  @Output() longPress = new EventEmitter<void>();
+
+  /**
+   * Emits when long press starts (timer begins)
+   */
+  @Output() longPressStart = new EventEmitter<void>();
+
+  /**
+   * Emits when long press is cancelled
+   */
+  @Output() longPressCancel = new EventEmitter<void>();
+
+  private longPressTimer: any = null;
+  private longPressTriggered = false;
+  private touchStartX = 0;
+  private touchStartY = 0;
+
+  /**
+   * Handle touch start for long press detection
+   */
+  @HostListener('touchstart', ['$event'])
+  handleTouchStart(event: TouchEvent): void {
+    // Don't start long press if touching interactive elements
+    const target = event.target as HTMLElement;
+    if (target.closest(this.excludeSelectors)) {
+      return;
+    }
+
+    this.longPressTriggered = false;
+    this.touchStartX = event.touches[0].clientX;
+    this.touchStartY = event.touches[0].clientY;
+
+    // Emit start event
+    this.longPressStart.emit();
+
+    // Start long press timer
+    this.longPressTimer = setTimeout(async () => {
+      this.longPressTriggered = true;
+      this.longPress.emit();
+
+      // Haptic feedback for long press
+      if (this.enableHaptics) {
+        await this.triggerHaptics();
+      }
+    }, this.longPressDuration);
+  }
+
+  /**
+   * Handle touch end to clear long press timer
+   */
+  @HostListener('touchend', ['$event'])
+  handleTouchEnd(event: TouchEvent): void {
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+      
+      if (!this.longPressTriggered) {
+        this.longPressCancel.emit();
+      }
+    }
+
+    // Prevent normal click if long press was triggered
+    if (this.longPressTriggered) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.longPressTriggered = false;
+    }
+  }
+
+  /**
+   * Handle touch move to cancel long press if moved too much
+   */
+  @HostListener('touchmove', ['$event'])
+  handleTouchMove(event: TouchEvent): void {
+    if (!this.longPressTimer) return;
+
+    const touch = event.touches[0];
+    const deltaX = Math.abs(touch.clientX - this.touchStartX);
+    const deltaY = Math.abs(touch.clientY - this.touchStartY);
+
+    // Cancel long press if moved too far
+    if (deltaX > this.moveThreshold || deltaY > this.moveThreshold) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+      this.longPressTriggered = false;
+      this.longPressCancel.emit();
+    }
+  }
+
+  /**
+   * Handle context menu (right-click on desktop) to trigger long press action
+   */
+  @HostListener('contextmenu', ['$event'])
+  handleContextMenu(event: Event): void {
+    event.preventDefault();
+    this.longPress.emit();
+  }
+
+  /**
+   * Trigger haptic feedback
+   */
+  private async triggerHaptics(): Promise<void> {
+    try {
+      await Haptics.impact({ style: this.hapticStyle });
+    } catch {
+      // Fallback to Web Vibration API if Capacitor Haptics is not available
+      if ('vibrate' in navigator) {
+        // Map haptic styles to vibration durations
+        const vibrationMap = {
+          [ImpactStyle.Light]: 30,
+          [ImpactStyle.Medium]: 50,
+          [ImpactStyle.Heavy]: 80
+        };
+        navigator.vibrate(vibrationMap[this.hapticStyle] || 50);
+      }
+    }
+  }
+
+  /**
+   * Cleanup on destroy
+   */
+  ngOnDestroy(): void {
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+}
+

package/src/components/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './mobile-page-base';
+export * from './directives';
+

package/src/components/shared/mobile-common.css

@@ -0,0 +1,94 @@
+/**
+ * Mobile Common Styles
+ * Shared CSS classes used across multiple mobile components
+ * 
+ * IMPORTANT: Import this file via styleUrls in components that use these classes.
+ */
+
+/* Author Details Container */
+.author-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+/* Author Name */
+.author-name {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--color-text-primary, #1a1a1a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Author Meta (role, timestamp, etc.) */
+.author-meta {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.26px;
+  color: var(--color-text-tertiary, #737373);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.author-meta .separator {
+  color: var(--color-text-tertiary, #a0a0a0);
+}
+
+/* Variants for lightbox/overlay contexts (white text on dark bg) */
+.lightbox-context .author-name,
+.overlay-context .author-name {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.lightbox-context .author-meta,
+.overlay-context .author-meta {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.lightbox-context .author-meta .separator,
+.overlay-context .author-meta .separator {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Section Headlines */
+.section-headline {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-color-default-primary);
+  padding: 16px 0;
+  margin: 0;
+  letter-spacing: -0.2px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Empty State Text */
+.empty-state-title {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-color-default-primary, #202227);
+  margin: 0 0 8px 0;
+}
+
+.empty-state-description {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--text-color-default-secondary, #545B66);
+  margin: 0;
+}
+

package/src/components/shared/mobile-page-base.css

@@ -0,0 +1,315 @@
+/* ============================================
+   MOBILE PAGE BASE STYLES
+   Shared styles for mobile pages
+   Import this in your page component's styleUrls
+   ============================================ */
+
+/* ============================================
+   ION-CONTENT
+   ============================================ */
+
+ion-content {
+  --background: transparent;
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+}
+
+ion-content::part(scroll) {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: none;
+}
+
+/* Desktop/Tablet adjustments */
+@media (min-width: 768px) {
+  ion-content {
+    border-radius: 16px 16px 0 0;
+  }
+}
+
+/* ============================================
+   ION-HEADER
+   ============================================ */
+
+ion-header {
+  background: transparent;
+  box-shadow: none;
+  height: 72px;
+  min-height: 72px;
+}
+
+ion-header ion-toolbar {
+  --background: transparent;
+  --border-width: 0;
+  --box-shadow: none;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --min-height: 72px;
+  height: 100%;
+  min-height: 72px;
+  padding: 0;
+}
+
+ion-header ion-toolbar::part(native) {
+  height: 100%;
+  min-height: 72px;
+  padding: 0;
+}
+
+ion-header ion-toolbar .toolbar-container {
+  height: 100%;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+}
+
+ion-header ion-toolbar .toolbar-container > * {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Hide header on desktop when using ds-mobile-tabs top bar */
+@media (min-width: 768px) {
+  ion-header {
+    display: none;
+    height: auto;
+  }
+}
+
+/* ============================================
+   REFRESHER
+   ============================================ */
+
+ion-refresher {
+  z-index: 0;
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* ============================================
+   HEADER VARIANTS
+   ============================================ */
+
+.header-home {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--color-brand-secondary);
+  position: relative;
+  height: 100%;
+}
+
+.header-home__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(-100%);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: white;
+  opacity: 0;
+  transition: transform 0.6s ease, opacity 0.6s ease;
+  margin: 0;
+  padding: 0;
+  --color: white;
+}
+
+.header-home__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logomark {
+  height: 28px;
+  width: auto;
+  flex-shrink: 0;
+}
+
+/* Condensed header - hidden by default on mobile */
+ion-header[collapse="condense"] {
+  display: none;
+}
+
+/* Show title in top header when scrolled past condensed header */
+.header-scrolled .header-home__title {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+@media (min-width: 768px) {
+  .header-home {
+    padding: 16px 24px;
+  }
+  
+  .logomark {
+    height: 32px;
+  }
+
+  /* Hide title on desktop - not needed */
+  .header-home__title {
+    display: none;
+  }
+
+  /* Hide condensed header on desktop */
+  ion-header[collapse="condense"] {
+    display: none;
+  }
+}
+
+/* ============================================
+   EXPANDABLE HEADER
+   ============================================ */
+
+.header-expandable {
+  background: var(--color-brand-secondary);
+  padding: 24px 16px;
+  color: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-expandable-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .header-expandable {
+    padding: 32px var(--content-padding-md);
+  }
+}
+
+@media (min-width: 992px) {
+  .header-expandable {
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
+  }
+}
+
+@media (min-width: 1440px) {
+  .header-expandable {
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
+  }
+}
+
+@media (min-width: 1768px) {
+  .header-expandable {
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .header-expandable {
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
+  }
+}
+
+.header-expandable__text {
+  margin-bottom: 0;
+}
+
+.header-expandable__title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  color: white;
+  margin: 0 0 8px 0;
+}
+
+@media (min-width: 768px) {
+  .header-expandable__title {
+    font-size: var(--font-size-3xl);
+  }
+}
+
+.header-expandable__subtitle {
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  color: white;
+  opacity: 0.85;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .header-expandable__subtitle {
+    font-size: var(--font-size-base);
+  }
+}
+
+/* ============================================
+   CONTENT WRAPPER
+   ============================================ */
+
+.content-wrapper {
+  position: relative;
+  z-index: 10;
+  background: var(--color-background-neutral-primary);
+  border-radius: 24px 24px 0 0;
+  padding: 0;
+}
+
+@media (min-width: 768px) {
+  .content-wrapper {
+    border-radius: 16px 16px 0 0;
+    width: 100%;
+  }
+}
+
+.content-inner {
+  padding: 20px 16px;
+}
+
+@media (min-width: 768px) {
+  .content-inner {
+    padding: 32px var(--content-padding-md);
+    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .content-inner {
+    padding: 32px var(--content-padding-lg);
+    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+  }
+}
+
+@media (min-width: 1440px) {
+  .content-inner {
+    padding: 32px var(--content-padding-lg);
+    max-width: calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));
+  }
+}
+
+@media (min-width: 1768px) {
+  .content-inner {
+    /* Keep xl max-width, only increase padding */
+    padding: 32px var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .content-inner {
+    /* Keep xl max-width, only increase padding */
+    padding: 32px var(--content-padding-3xl);
+  }
+}
+

package/src/components/shared/mobile-page-base.ts

@@ -0,0 +1,70 @@
+import { input, computed, Directive } from '@angular/core';
+
+/**
+ * Content width preset values
+ * - 'narrow' - 640px max width (reading content)
+ * - 'standard' - 1024px max width (default)
+ * - 'wide' - 1440px max width (dashboards)
+ * - 'full' - 100% width (no max)
+ */
+export type ContentWidth = 'narrow' | 'standard' | 'wide' | 'full';
+
+/**
+ * MobilePageBase
+ * 
+ * Shared base class for mobile page components (ds-mobile-page-main, ds-mobile-page-details).
+ * Provides consistent content width control across all page types.
+ * 
+ * **Padding Strategy:**
+ * - All pages use 20px horizontal padding globally
+ * - For tappable lists, use negative margins (e.g., margin: 0 -8px) to create full-width sections
+ * - This approach simplifies padding management and provides consistency
+ * 
+ * @internal This is a base class and should not be used directly.
+ */
+@Directive()
+export abstract class MobilePageBase {
+  /**
+   * Maximum content width (desktop only)
+   * 
+   * **Options:**
+   * - `'narrow'` (640px) - For reading content, forms
+   * - `'standard'` (1024px) - Default for most pages
+   * - `'wide'` (1440px) - For dashboards, tables
+   * - `'full'` - No max-width constraint
+   * 
+   * **Note:** Only applies on desktop (>= 768px). Mobile is always full width.
+   * 
+   * @default 'standard'
+   * 
+   * @example
+   * ```html
+   * <!-- Narrow reading layout -->
+   * <ds-mobile-page-main title="Article" contentWidth="narrow">
+   * 
+   * <!-- Wide dashboard -->
+   * <ds-mobile-page-main title="Dashboard" contentWidth="wide">
+   * ```
+   */
+  contentWidth = input<ContentWidth>('standard');
+
+  /**
+   * Resolved max-width value (computed)
+   * Maps preset values to pixel values
+   * 
+   * @internal
+   */
+  protected maxWidthValue = computed(() => {
+    const w = this.contentWidth();
+    
+    const widthMap: Record<ContentWidth, string> = {
+      'narrow': '640px',
+      'standard': '1024px',
+      'wide': '1440px',
+      'full': '100%'
+    };
+    
+    return widthMap[w];
+  });
+}
+