@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/interactive-list-item-booking/ds-mobile-interactive-list-item-booking.ts

@@ -1,350 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsShapeIndicatorComponent } from '@propbinder/design-system';
-import { DsMobileListItemComponent } from '../list-item';
-
-/**
- * DsMobileInteractiveListItemBookingComponent
- * 
- * Specialized interactive list item for displaying facility bookings.
- * Built on top of ds-mobile-list-item base component.
- * Displays facility thumbnail, title, description, booking dates/times, and availability status.
- * 
- * @example
- * ```html
- * <!-- Active booking variant -->
- * <ds-mobile-interactive-list-item-booking
- *   [thumbnail]="'assets/facility.jpg'"
- *   [facilityTitle]="'Gæsteparkering'"
- *   [bookingDate]="'14. februar, 2026'"
- *   [bookingTime]="'9:00 - 17:00'"
- *   [clickable]="false">
- * </ds-mobile-interactive-list-item-booking>
- * 
- * <!-- Available facility variant -->
- * <ds-mobile-interactive-list-item-booking
- *   [thumbnail]="'assets/facility.jpg'"
- *   [facilityTitle]="'Boremaskinen'"
- *   [description]="'Book a guest parking spot to give your visitors...'"
- *   [availabilityStatus]="'available-today'"
- *   [statusLabel]="'Ledig i dag'"
- *   [clickable]="true"
- *   [enableLongPress]="false"
- *   (bookingClick)="openBooking()">
- * </ds-mobile-interactive-list-item-booking>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-interactive-list-item-booking',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent, DsShapeIndicatorComponent, DsMobileListItemComponent],
-  styles: [`
-    :host {
-      display: block;
-    }
-    
-    /* Hide divider on last child */
-    :host:last-child {
-      --divider-display: none;
-      --item-padding-bottom: 0;
-    }
-    
-    .booking-thumbnail {
-      flex-shrink: 0;
-      width: 64px;
-      height: 64px;
-      border-radius: 12px;
-      overflow: hidden;
-      background: var(--color-surface-secondary, #f5f5f5);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .booking-thumbnail img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .booking-thumbnail-placeholder {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-color-default-tertiary, #737373);
-    }
-    
-    .booking-content {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      flex: 1;
-      min-width: 0;
-    }
-    
-    .booking-title {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm, 14px);
-      font-weight: 600;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      color: var(--text-color-default-primary, #202227);
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .booking-description {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm, 14px);
-      font-weight: 400;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      color: var(--text-color-default-secondary, #545B66);
-      margin: 0;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    
-    .booking-meta {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs, 12px);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--text-color-default-secondary, #545B66);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-top: 4px;
-    }
-    
-    .booking-status {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 500;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--text-color-default-secondary, #545B66);
-    }
-    
-    .booking-status.available-today {
-      color: var(--color-accent, #5d5fef);
-    }
-    
-    .booking-status.available-from {
-      color: var(--color-warning, #f59e0b);
-    }
-    
-    .booking-status.unavailable {
-      color: var(--text-color-default-tertiary, #737373);
-    }
-    
-    .booking-datetime {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--text-color-default-secondary, #545B66);
-    }
-    
-    .booking-trailing {
-      display: flex;
-      align-items: center;
-      color: var(--color-text-tertiary, #a3a3a3);
-    }
-  `],
-  template: `
-    <ds-mobile-list-item
-      [leadingSize]="'64px'"
-      [align]="align()"
-      [variant]="variant()"
-      [interactive]="clickable()"
-      [enableLongPress]="enableLongPress()"
-      [moreActions]="moreActions()"
-      (itemClick)="handleBookingClick()"
-      (longPress)="handleLongPress()"
-      (moreButtonClick)="handleMoreButtonClick($event)">
-      
-      <div content-leading>
-        <div class="booking-thumbnail">
-          @if (thumbnail()) {
-            <img [src]="thumbnail()" [alt]="facilityTitle()" />
-          } @else {
-            <div class="booking-thumbnail-placeholder">
-              <ds-icon name="remixImageLine" size="24px" color="--text-color-default-tertiary" />
-            </div>
-          }
-        </div>
-      </div>
-      
-      <div content-main>
-        <div class="booking-content">
-          <h3 class="booking-title">{{ facilityTitle() }}</h3>
-          
-          @if (description()) {
-            <p class="booking-description">{{ description() }}</p>
-          }
-          
-          <div class="booking-meta">
-            @if (availabilityStatus()) {
-              <div class="booking-status" 
-                   [class.available-today]="availabilityStatus() === 'available-today'" 
-                   [class.available-from]="availabilityStatus() === 'available-from'"
-                   [class.unavailable]="availabilityStatus() === 'unavailable'">
-                <ds-shape-indicator 
-                  shape="circle" 
-                  [variant]="getStatusVariant()">
-                </ds-shape-indicator>
-                <span>{{ statusLabel() }}</span>
-              </div>
-            }
-            
-            @if (bookingDate()) {
-              <div class="booking-datetime">
-                <ds-icon name="remixCalendarLine" size="14px" color="--color-text-secondary" />
-                <span>{{ bookingDate() }}</span>
-              </div>
-            }
-            
-            @if (bookingTime()) {
-              <div class="booking-datetime">
-                <ds-icon name="remixTimeLine" size="14px" color="--color-text-secondary" />
-                <span>{{ bookingTime() }}</span>
-              </div>
-            }
-          </div>
-        </div>
-      </div>
-      
-      @if (showChevron()) {
-        <div content-trailing>
-          <div class="booking-trailing">
-            <ds-icon name="remixArrowRightSLine" size="20px" />
-          </div>
-        </div>
-      }
-    </ds-mobile-list-item>
-  `
-})
-export class DsMobileInteractiveListItemBookingComponent {
-  /**
-   * Facility thumbnail image URL
-   */
-  thumbnail = input<string>('');
-  
-  /**
-   * Facility title
-   */
-  facilityTitle = input.required<string>();
-  
-  /**
-   * Facility description/preview text (only for available facilities)
-   */
-  description = input<string>('');
-  
-  /**
-   * Booking date (only for active bookings, e.g., "14. februar, 2026")
-   */
-  bookingDate = input<string>('');
-  
-  /**
-   * Booking time range (only for active bookings, e.g., "9:00 - 17:00")
-   */
-  bookingTime = input<string>('');
-  
-  /**
-   * Availability status (only for available facilities)
-   */
-  availabilityStatus = input<'available-today' | 'available-from' | 'unavailable' | undefined>(undefined);
-  
-  /**
-   * Status label text (e.g., "Ledig i dag", "Ledig fra 28. februar, 2026")
-   */
-  statusLabel = input<string>('');
-  
-  /**
-   * Display variant
-   * - undefined (default) - Standard display
-   * - 'compact' - Compact display
-   */
-  variant = input<'compact' | undefined>(undefined);
-  
-  /**
-   * Vertical alignment of content
-   * - 'top' - Align to top (default)
-   * - 'center' - Align to center
-   * - 'bottom' - Align to bottom
-   */
-  align = input<'top' | 'center' | 'bottom'>('top');
-  
-  /**
-   * Whether the booking item is clickable
-   */
-  clickable = input<boolean>(true);
-  
-  /**
-   * Whether to show chevron icon
-   */
-  showChevron = input<boolean>(true);
-  
-  /**
-   * Enable long-press interaction when clickable is true
-   * Set to false to disable long-press but keep click
-   * Also controls visibility of desktop "more" button
-   * @default true
-   */
-  enableLongPress = input<boolean>(true);
-
-  /**
-   * Unified toggle for contextual actions (more button + long press).
-   * When set, takes precedence over `enableLongPress`.
-   */
-  moreActions = input<boolean | undefined>(undefined);
-
-  /**
-   * Emits when the booking item is clicked (if clickable)
-   */
-  bookingClick = output<void>();
-  
-  /**
-   * Emits when the booking item is long-pressed
-   */
-  longPress = output<void>();
-  
-  /**
-   * Get status indicator variant based on availability status
-   */
-  getStatusVariant(): 'brand' | 'warning' | 'grey' {
-    const status = this.availabilityStatus();
-    if (status === 'available-today') return 'brand';
-    if (status === 'available-from') return 'warning';
-    return 'grey';
-  }
-  
-  handleBookingClick(): void {
-    this.bookingClick.emit();
-  }
-  
-  handleLongPress(): void {
-    this.longPress.emit();
-  }
-  
-  handleMoreButtonClick(event: Event): void {
-    // Desktop more button click - trigger the same action as long press
-    this.longPress.emit();
-  }
-}

package/src/components/interactive-list-item-booking/index.ts

@@ -1 +0,0 @@
-export * from './ds-mobile-interactive-list-item-booking';

package/src/components/interactive-list-item-inquiry/ds-mobile-interactive-list-item-inquiry.ts

@@ -1,321 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsShapeIndicatorComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsMobileListItemComponent } from '../list-item';
-
-/**
- * DsMobileInteractiveListItemInquiryComponent
- * 
- * Specialized interactive list item for displaying inquiries/tickets.
- * Built on top of ds-mobile-interactive-list-item base component.
- * Displays inquiry title, description, status, and timestamp.
- * 
- * @example
- * ```html
- * <ds-mobile-interactive-list-item-inquiry
- *   [title]="'Tumble dryer is not working'"
- *   [description]="'For the past three days, I have been experiencing...'"
- *   [status]="'open'"
- *   [timestamp]="'12 days ago'"
- *   [iconName]="'remixCalendarLine'"
- *   [clickable]="true"
- *   [enableLongPress]="true"
- *   (inquiryClick)="openInquiry()">
- * </ds-mobile-interactive-list-item-inquiry>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-interactive-list-item-inquiry',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent, DsShapeIndicatorComponent, DsAvatarComponent, DsMobileListItemComponent],
-  styles: [`
-    :host {
-      display: block;
-    }
-    
-    /* Hide divider on last child */
-    :host:last-child {
-      --divider-display: none;
-      --item-padding-bottom: 0;
-    }
-    
-    .inquiry-avatar {
-      flex-shrink: 0;
-    }
-    
-    /* Default/Open inquiries: brand-primary surface with brand-primary content */
-    .inquiry-avatar:not(.closed)::ng-deep .avatar--icon {
-      background-color: var(--color-accent, #5d5fef) !important;
-    }
-    
-    .inquiry-avatar:not(.closed)::ng-deep .avatar--icon ds-icon,
-    .inquiry-avatar:not(.closed)::ng-deep .avatar--icon ds-icon::ng-deep svg {
-      color: var(--color-on-accent, #ffffff) !important;
-      fill: var(--color-on-accent, #ffffff) !important;
-    }
-    
-    /* Closed inquiries: content tertiary surface with white icon */
-    .inquiry-avatar.closed::ng-deep .avatar--icon {
-      background-color: var(--text-color-default-tertiary, #737373) !important;
-    }
-    
-    .inquiry-avatar.closed::ng-deep .avatar--icon ds-icon,
-    .inquiry-avatar.closed::ng-deep .avatar--icon ds-icon::ng-deep svg {
-      color: #ffffff !important;
-      fill: #ffffff !important;
-    }
-    
-    .inquiry-content {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      flex: 1;
-      min-width: 0;
-    }
-    
-    .inquiry-title {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm, 14px);
-      font-weight: 600;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      color: var(--text-color-default-primary, #202227);
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .inquiry-description {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm, 14px);
-      font-weight: 400;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      color: var(--text-color-default-secondary, #545B66);
-      margin: 0;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    
-    .inquiry-meta {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs, 12px);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--text-color-default-secondary, #545B66);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-top: 4px;
-    }
-    
-    .inquiry-status {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 500;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--text-color-default-secondary, #545B66);
-    }
-    
-    .inquiry-status.open {
-      color: var(--text-color-default-tertiary, #737373);
-    }
-    
-    .inquiry-status.closed {
-      color: var(--text-color-default-tertiary, #737373);
-    }
-    
-    .inquiry-timestamp {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--text-color-default-secondary, #545B66);
-    }
-    
-    .inquiry-trailing {
-      display: flex;
-      align-items: center;
-      color: var(--color-text-tertiary, #a3a3a3);
-    }
-  `],
-  template: `
-    <ds-mobile-list-item
-      [leadingSize]="'32px'"
-      [align]="align()"
-      [variant]="variant()"
-      [interactive]="clickable()"
-      [enableLongPress]="enableLongPress()"
-      [moreActions]="moreActions()"
-      (itemClick)="handleInquiryClick()"
-      (longPress)="handleLongPress()"
-      (moreButtonClick)="handleMoreButtonClick($event)">
-      
-      <div content-leading>
-        <div class="inquiry-avatar" [class.closed]="status() === 'closed'">
-          <ds-avatar
-            type="icon"
-            [iconName]="iconName()"
-            size="md"
-          />
-        </div>
-      </div>
-      
-      <div content-main>
-        <div class="inquiry-content">
-          <h3 class="inquiry-title">{{ title() }}</h3>
-          
-          @if (description()) {
-            <p class="inquiry-description">{{ description() }}</p>
-          }
-          
-          <div class="inquiry-meta">
-            <div class="inquiry-status" [class.open]="status() === 'open'" [class.closed]="status() === 'closed'">
-              <ds-shape-indicator 
-                shape="circle" 
-                [variant]="status() === 'open' ? 'brand' : 'grey'">
-              </ds-shape-indicator>
-              <span>{{ computedStatusLabel() }}</span>
-            </div>
-            
-            <div class="inquiry-timestamp">
-              <ds-icon name="remixTimeLine" size="14px" color="--color-text-secondary" />
-              <span>{{ timestamp() }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      @if (showChevron()) {
-        <div content-trailing>
-          <div class="inquiry-trailing">
-            <ds-icon name="remixArrowRightSLine" size="20px" />
-          </div>
-        </div>
-      }
-    </ds-mobile-list-item>
-  `
-})
-export class DsMobileInteractiveListItemInquiryComponent {
-  /**
-   * Inquiry title
-   */
-  title = input.required<string>();
-  
-  /**
-   * Inquiry description/preview text
-   */
-  description = input<string>('');
-  
-  /**
-   * Inquiry status
-   */
-  status = input<'open' | 'closed'>('open');
-  
-  /**
-   * Status label (defaults to capitalized status)
-   */
-  statusLabel = input<string>('');
-  
-  /**
-   * Timestamp text (e.g., "12 days ago", "2 months ago")
-   */
-  timestamp = input.required<string>();
-  
-  /**
-   * Icon name for the leading icon
-   */
-  iconName = input<string>('remixTodoLine');
-  
-  /**
-   * Icon color
-   */
-  iconColor = input<string>('secondary');
-  
-  /**
-   * Display variant
-   * - undefined (default) - Standard display
-   * - 'compact' - Compact display
-   */
-  variant = input<'compact' | undefined>(undefined);
-  
-  /**
-   * Vertical alignment of content
-   * - 'top' - Align to top (default)
-   * - 'center' - Align to center
-   * - 'bottom' - Align to bottom
-   */
-  align = input<'top' | 'center' | 'bottom'>('top');
-  
-  /**
-   * Whether the inquiry item is clickable
-   */
-  clickable = input<boolean>(true);
-  
-  /**
-   * Whether to show chevron icon
-   */
-  showChevron = input<boolean>(true);
-  
-  /**
-   * Enable long-press interaction when clickable is true
-   * Set to false to disable long-press but keep click
-   * Also controls visibility of desktop "more" button
-   * @default true
-   */
-  enableLongPress = input<boolean>(true);
-
-  /**
-   * Unified toggle for contextual actions (more button + long press).
-   * When set, takes precedence over `enableLongPress`.
-   */
-  moreActions = input<boolean | undefined>(undefined);
-
-  /**
-   * Emits when the inquiry item is clicked (if clickable)
-   */
-  inquiryClick = output<void>();
-  
-  /**
-   * Emits when the inquiry item is long-pressed
-   */
-  longPress = output<void>();
-  
-  /**
-   * Get computed status label
-   */
-  computedStatusLabel(): string {
-    if (this.statusLabel()) {
-      return this.statusLabel();
-    }
-    return this.status() === 'open' ? 'Åben' : 'Lukket';
-  }
-  
-  handleInquiryClick(): void {
-    this.inquiryClick.emit();
-  }
-  
-  handleLongPress(): void {
-    this.longPress.emit();
-  }
-  
-  handleMoreButtonClick(event: Event): void {
-    // Desktop more button click - trigger the same action as long press
-    this.longPress.emit();
-  }
-}
-

package/src/components/interactive-list-item-inquiry/index.ts

@@ -1,2 +0,0 @@
-export { DsMobileInteractiveListItemInquiryComponent } from './ds-mobile-interactive-list-item-inquiry';
-