@propbinder/mobile-design 0.2.48 → 0.2.50

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

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

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

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

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

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