@propbinder/mobile-design 0.2.48 → 0.2.50

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/property-banner/ds-mobile-property-banner.ts

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

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

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

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

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

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,212 @@
+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

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