@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,9 +0,0 @@
-/**
- * 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/property-banner/ds-mobile-property-banner.ts

@@ -1,95 +0,0 @@
-import { Component, input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-/**
- * DsMobilePropertyBannerComponent
- * 
- * Compact banner displaying property photo and address.
- * Designed for use in page headers to show current property context.
- * 
- * @example
- * ```html
- * <ds-mobile-property-banner
- *   address="Toftegårds Allé 5A, 2. tv."
- *   photoUrl="/Assets/building.jpg">
- * </ds-mobile-property-banner>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-property-banner',
-  standalone: true,
-  imports: [CommonModule],
-  styles: [`
-    :host {
-      display: block;
-      width: 100%;
-    }
-    
-    .property-banner {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      height: 40px;
-      padding: 0 8px;
-      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.1);
-      border: none;
-      backdrop-filter: blur(10px);
-      border-radius: 12px;
-      cursor: pointer;
-      transition: background 0.2s ease;
-      -webkit-tap-highlight-color: transparent;
-    }
-    
-    .property-banner:hover {
-      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.12);
-    }
-    
-    .property-banner:active {
-      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.15);
-    }
-    
-    .property-photo {
-      width: 24px;
-      height: 24px;
-      border-radius: 6px;
-      object-fit: cover;
-      flex-shrink: 0;
-      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.1);
-    }
-    
-    .property-address {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 500;
-      color: var(--header-content-color, white);
-      line-height: 1.4;
-      flex: 1;
-      min-width: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `],
-  template: `
-    <div class="property-banner">
-      <img 
-        [src]="photoUrl()" 
-        [alt]="address()"
-        class="property-photo"
-      />
-      <span class="property-address">{{ address() }}</span>
-    </div>
-  `
-})
-export class DsMobilePropertyBannerComponent {
-  /**
-   * Property address text
-   */
-  address = input.required<string>();
-  
-  /**
-   * URL to property photo
-   */
-  photoUrl = input.required<string>();
-}
-

package/src/components/property-banner/index.ts

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

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

@@ -1,263 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-
-/**
- * DsMobileSectionComponent
- * 
- * Universal section component for mobile pages, modals, and content containers.
- * Provides consistent layout with optional headlines, action links, flexible padding, and borders.
- * 
- * **Features:**
- * - Optional section headline with icon support
- * - Optional action link with click handler
- * - Flexible padding control
- * - Border management (bottom border by default)
- * - Works in pages, modals, and any content container
- * 
- * **Usage Patterns:**
- * 
- * @example
- * ```html
- * <!-- Section with headline and link -->
- * <ds-mobile-section 
- *   headline="Recent Posts"
- *   linkText="See all"
- *   (linkClick)="navigate()">
- *   <div class="posts-list">...</div>
- * </ds-mobile-section>
- * 
- * <!-- Section with icon in headline -->
- * <ds-mobile-section 
- *   headline="Messages"
- *   icon="remixChat3Line"
- *   linkText="View all"
- *   (linkClick)="viewMessages()">
- *   <div class="messages">...</div>
- * </ds-mobile-section>
- * 
- * <!-- Empty state section (no headline) -->
- * <ds-mobile-section>
- *   <div class="empty-state">
- *     <ds-avatar type="icon" iconName="remixInboxLine" />
- *     <h3>No messages yet</h3>
- *   </div>
- * </ds-mobile-section>
- * 
- * <!-- Last section without border -->
- * <ds-mobile-section 
- *   headline="Contact"
- *   [showBorder]="false">
- *   <div class="contact-form">...</div>
- * </ds-mobile-section>
- * 
- * <!-- Section with custom padding -->
- * <ds-mobile-section 
- *   headline="Photos"
- *   padding="20px 0">
- *   <div class="photo-grid">...</div>
- * </ds-mobile-section>
- *
- * <!-- Full-width section in page (default behavior) -->
- * <ds-mobile-page-main title="Home">
- *   <ds-mobile-section headline="Posts">
- *     <div class="posts">...</div>
- *   </ds-mobile-section>
- * </ds-mobile-page-main>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-section',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent],
-  host: {
-    '[class.has-border]': 'showBorder()'
-  },
-  styles: [`
-    :host {
-      display: block;
-      width: 100%;
-      border-bottom: 1px solid transparent;
-      transition: border-color 0.2s ease;
-    }
-    
-    :host(.has-border) {
-      border-bottom-color: var(--border-color-default);
-    }
-    
-    /* Automatically hide border on last section */
-    :host(.has-border):last-child {
-      border-bottom-color: transparent;
-    }
-    
-    .section {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      padding: var(--section-padding, 20px);
-      gap: var(--section-gap, 12px);
-      overflow: var(--section-overflow);
-    }
-    
-    /* Increase padding on desktop breakpoints */
-    @media (min-width: 768px) {
-      .section {
-        padding: var(--section-padding, 32px);
-      }
-      
-      /* Remove horizontal padding on desktop when inside page components */
-      ds-mobile-page-main :host .section,
-      ds-mobile-page-details :host .section {
-        padding-left: 0;
-        padding-right: 0;
-      }
-    }
-    
-    .section-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      min-height: 24px;
-    }
-    
-    .section-headline {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-base);
-      font-weight: 600;
-      color: var(--text-color-default-primary);
-      margin: 0;
-      padding: 0;
-      letter-spacing: -0.2px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      line-height: 1.4;
-    }
-    
-    .section-link {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 500;
-      color: var(--color-accent, #5d5fef);
-      text-decoration: none;
-      cursor: pointer;
-      white-space: nowrap;
-      transition: opacity 0.2s ease;
-      -webkit-tap-highlight-color: transparent;
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      line-height: 1;
-      user-select: none;
-    }
-    
-    .section-link:hover {
-      opacity: 0.8;
-    }
-    
-    .section-link:active {
-      opacity: 0.6;
-    }
-    
-    .section-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--section-content-gap);
-    }
-  `],
-  template: `
-    <section class="section" [style.--section-padding]="padding()" [style.--section-gap]="gap()" [style.--section-content-gap]="contentGap()" [style.--section-overflow]="overflow()">
-      @if (headline() || linkText()) {
-        <header class="section-header">
-          @if (headline()) {
-            <h2 class="section-headline">
-              @if (icon()) {
-                <ds-icon [name]="icon()!" size="20px" />
-              }
-              {{ headline() }}
-            </h2>
-          }
-          @if (linkText()) {
-            <a class="section-link" (click)="handleLinkClick()" [attr.role]="'button'" [attr.tabindex]="0">
-              {{ linkText() }}
-              <ds-icon name="remixArrowRightSLine" size="16px" />
-            </a>
-          }
-          <ng-content select="[header-action]" />
-        </header>
-      }
-      
-      <div class="section-content">
-        <ng-content />
-      </div>
-    </section>
-  `
-})
-export class DsMobileSectionComponent {
-  /**
-   * Section headline text
-   * @default ''
-   */
-  headline = input<string>('');
-  
-  /**
-   * Optional icon to display before headline
-   * @default ''
-   */
-  icon = input<string>('');
-  
-  /**
-   * Link text (e.g., "See all", "View more")
-   * When provided, displays a clickable link in the section header
-   * @default ''
-   */
-  linkText = input<string>('');
-  
-  /**
-   * Section padding
-   * Accepts any valid CSS padding value
-   * When not set, defaults to 20px on mobile and 32px on desktop
-   * @default ''
-   */
-  padding = input<string>('');
-  
-  /**
-   * Gap between section header and content
-   * Accepts any valid CSS gap value
-   * @default '12px'
-   */
-  gap = input<string>('12px');
-  
-  /**
-   * Gap between child elements within section-content
-   * Accepts any valid CSS gap value
-   * @default '12px'
-   */
-  contentGap = input<string>('12px');
-  
-  /**
-   * Whether to show bottom border
-   * @default true
-   */
-  showBorder = input<boolean>(true);
-  
-  /**
-   * CSS overflow property for the section
-   * @default 'visible'
-   */
-  overflow = input<string>('visible');
-  
-  /**
-   * Emitted when section link is clicked
-   */
-  linkClick = output<void>();
-  
-  /**
-   * Handle link click event
-   */
-  handleLinkClick(): void {
-    this.linkClick.emit();
-  }
-}
-

package/src/components/section/index.ts

@@ -1,2 +0,0 @@
-export { DsMobileSectionComponent } from './ds-mobile-section';
-

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

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

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

@@ -1,212 +0,0 @@
-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 child elements
-    // But allow if the closest match is the host element itself (where the directive is attached)
-    const target = event.target as HTMLElement;
-    const closestExcluded = target.closest(this.excludeSelectors);
-    const hostElement = (event.currentTarget as HTMLElement);
-    
-    // Only exclude if we found an excluded element AND it's not the host itself
-    if (closestExcluded && closestExcluded !== hostElement) {
-      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

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