@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/facility-detail-modal/ds-mobile-facility-detail-modal.ts

@@ -0,0 +1,379 @@
+import { Component, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsButtonComponent } from '@propbinder/design-system';
+import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
+import { DsMobileSectionComponent } from '../section';
+import { DsMobileSwiperComponent } from '../swiper/ds-mobile-swiper';
+import { DsMobileBookingModalService } from '../booking-modal';
+
+/**
+ * Facility data interface for the modal
+ *
+ * Represents a facility with its content, images, requirements, and restrictions.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const facilityData: FacilityDetailData = {
+ *   id: 'facility-1',
+ *   facilityTitle: 'Festlokale på taget',
+ *   heroImage: '/Assets/Dummy-photos/balcony-view.jpg',
+ *   fullDescription: '<p>The rooftop terrace...</p>',
+ *   requirements: ['Kræver nøglekort'],
+ *   bookingType: 'Instant booking',
+ *   expectations: '<p>The terrace is furnished...</p>',
+ *   restrictions: ['No smoking...']
+ * };
+ * ```
+ */
+export interface FacilityDetailData {
+  /** Unique facility identifier */
+  id: string;
+  /** Facility title/name */
+  facilityTitle: string;
+  /** Hero image URL for the top of the modal */
+  heroImage?: string;
+  /** Full description of the facility (HTML rich text) */
+  fullDescription: string;
+  /** List of requirements (e.g., "Kræver nøglekort") */
+  requirements?: string[];
+  /** Booking type (e.g., "Instant booking") */
+  bookingType?: string;
+  /** Expectations section content (HTML rich text) */
+  expectations?: string;
+  /** List of restrictions */
+  restrictions?: string[];
+  /** Availability status for display */
+  availabilityStatus?: string;
+  /** Status label text */
+  statusLabel?: string;
+  /** Booking date (for active bookings) */
+  bookingDate?: string;
+  /** Booking time range (for active bookings) */
+  bookingTime?: string;
+}
+
+/**
+ * DsMobileFacilityDetailModalComponent
+ *
+ * Modal wrapper for displaying facility details with rich content.
+ * Follows the same pattern as the post detail modal for consistent behavior.
+ *
+ * Features:
+ * - Hero image with swiper support
+ * - Requirements and booking type display
+ * - Rich text description
+ * - Expectations section
+ * - Restrictions list
+ * - Fixed bottom booking button
+ * - Native modal controls (close, swipe down)
+ * - Safe area support
+ *
+ * This component is typically not used directly - use DsMobileFacilityDetailModalService instead.
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private facilityModal: DsMobileFacilityDetailModalService) {}
+ *
+ * openFacility() {
+ *   this.facilityModal.open({
+ *     id: 'facility-1',
+ *     facilityTitle: 'Festlokale på taget',
+ *     fullDescription: '<p>Description...</p>'
+ *   });
+ * }
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-facility-detail-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DsButtonComponent,
+    DsMobileModalBaseComponent,
+    DsMobileSectionComponent,
+    DsMobileSwiperComponent,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  styles: [`
+    :host {
+      display: block;
+    }
+    
+    /* Hero image styling */
+    .facility-image {
+      width: 100%;
+      max-width: 100%;
+      height: 280px;
+      object-fit: cover;
+      display: block;
+      border-radius: 12px;
+    }
+    
+    /* Info items (requirements, booking type) */
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 0;
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      color: var(--text-color-default-primary, #202227);
+    }
+    
+    /* Rich text content */
+    .facility-description,
+    .facility-expectations {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      line-height: 1.6;
+      color: var(--text-color-default-primary, #202227);
+    }
+    
+    .facility-description p,
+    .facility-expectations p {
+      margin: 0 0 12px 0;
+    }
+    
+    .facility-description p:last-child,
+    .facility-expectations p:last-child {
+      margin-bottom: 0;
+    }
+    
+    /* Headings within description - use ::ng-deep to penetrate innerHTML */
+    ::ng-deep .facility-description h3,
+    ::ng-deep .facility-description headline,
+    ::ng-deep .facility-description .section-headline {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base, 16px);
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0 !important;
+      padding: 0 !important;
+      padding-top: 24px !important;
+      padding-bottom: 8px !important;
+      display: block;
+    }
+
+     /* Headings within description */
+     .section-headline {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base, 16px);
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0 !important;
+      padding-top: 24px !important;
+      padding-bottom: 8px !important;
+      display: block;
+    }
+    
+    
+    ::ng-deep .facility-description h3:first-child,
+    ::ng-deep .facility-description headline:first-child,
+    ::ng-deep .facility-description .section-headline:first-child,
+    ::ng-deep .facility-description > *:first-child h3:first-child,
+    ::ng-deep .facility-description > *:first-child headline:first-child {
+      padding-top: 0 !important;
+    }
+    
+    /* Expectations section headings */
+    ::ng-deep .facility-expectations headline,
+    ::ng-deep .facility-expectations h3 {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base, 16px);
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0 !important;
+      padding: 0 !important;
+      padding-top: 24px !important;
+      padding-bottom: 8px !important;
+      display: block;
+    }
+    
+    ::ng-deep .facility-expectations headline:first-child,
+    ::ng-deep .facility-expectations h3:first-child {
+      padding-top: 0 !important;
+    }
+    
+    /* Standalone section headline (used for "Ting, du skal vide") */
+    h2.section-headline {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base, 16px);
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0;
+      padding-top: 16px !important;
+      padding-bottom: 8px;
+    }
+    
+    /* Lists within description */
+    .facility-description ul {
+      list-style: disc;
+      padding-left: 20px;
+      margin: 0 0 12px 0;
+    }
+    
+    .facility-description ul li {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      line-height: 1.6;
+      color: var(--text-color-default-primary, #202227);
+      margin-bottom: 8px;
+    }
+    
+    .facility-description ul li:last-child {
+      margin-bottom: 0;
+    }
+    
+    /* Restrictions within the same section */
+    .facility-restrictions {
+      margin-top: 20px;
+    }
+    
+    .restrictions-heading {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base, 16px);
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0 0 12px 0;
+    }
+    
+    /* Restrictions list */
+    .restrictions-list {
+      list-style: disc;
+      padding-left: 20px;
+      margin: 0;
+    }
+    
+    .restrictions-list li {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      line-height: 1.6;
+      color: var(--text-color-default-primary, #202227);
+      margin-bottom: 8px;
+    }
+    
+    .restrictions-list li:last-child {
+      margin-bottom: 0;
+    }
+    
+    /* Info items container */
+    .info-items-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    
+    /* Fixed bottom button */
+    .booking-action {
+      padding: 16px 20px;
+      background: var(--color-surface-primary, #ffffff);
+      border-top: 1px solid var(--color-border, #e5e5e5);
+    }
+    
+    .booking-action ds-button {
+      display: block;
+      width: 100%;
+    }
+    
+    .booking-action ::ng-deep ds-button button {
+      width: 100%;
+      border-radius: 100px;
+      height: 44px;
+      min-height: 44px;
+      max-height: 44px;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  `],
+  template: `
+    <ds-mobile-modal-base
+      [headerTitle]="facilityData.facilityTitle"
+      [hasFixedBottom]="true"
+      [keyboardContentBehavior]="'overlay'">
+      
+      <!-- Hero Image Section -->
+      <!-- Hero Image and Things to Know Section -->
+      @if (facilityData.heroImage) {
+        <ds-mobile-section contentGap="20px">
+          <ds-mobile-swiper
+            [slideWidth]="'100%'"
+            [gap]="16">
+            <div class="swiper-slide">
+              <img [src]="facilityData.heroImage" [alt]="facilityData.facilityTitle" class="facility-image" />
+            </div>
+          </ds-mobile-swiper>
+        
+        </ds-mobile-section>
+      }
+      
+      <!-- Full Description Section -->
+      <ds-mobile-section>
+        <div class="facility-description" [innerHTML]="facilityData.fullDescription"></div>
+        
+        @if (facilityData.expectations) {
+          <div class="facility-expectations" [innerHTML]="facilityData.expectations"></div>
+        }
+        
+        @if (facilityData.restrictions?.length) {
+          <div class="facility-restrictions">
+            <h3 class="restrictions-heading">Restriktioner</h3>
+            <ul class="restrictions-list">
+              @for (restriction of facilityData.restrictions; track restriction) {
+                <li>{{ restriction }}</li>
+              }
+            </ul>
+          </div>
+        }
+      </ds-mobile-section>
+      
+      <!-- Fixed Bottom Button -->
+      <div fixed-bottom class="booking-action">
+        <ds-button
+          size="md"
+          variant="primary"
+          [fullWidth]="true"
+          (clicked)="handleBookNow()">
+          Book nu
+        </ds-button>
+      </div>
+    </ds-mobile-modal-base>
+  `
+})
+export class DsMobileFacilityDetailModalComponent {
+  /**
+   * Facility data to display in the modal
+   */
+  @Input() facilityData!: FacilityDetailData;
+  
+  constructor(
+    private modalController: ModalController,
+    private bookingModalService: DsMobileBookingModalService
+  ) {}
+  
+  /**
+   * Handle booking button click
+   * Opens the booking modal for date/time selection
+   */
+  async handleBookNow(): Promise<void> {
+    await this.bookingModalService.open({
+      facilityId: this.facilityData.id,
+      facilityTitle: this.facilityData.facilityTitle,
+      facilityThumbnail: this.facilityData.heroImage
+    });
+  }
+  
+  /**
+   * Close the modal
+   */
+  close(): void {
+    this.modalController.dismiss();
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './ds-mobile-facility-detail-modal';
+export * from './ds-mobile-facility-detail-modal.service';

package/src/components/file-attachment/ds-mobile-file-attachment.ts

@@ -0,0 +1,164 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsIconComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobileFileAttachmentComponent
+ * 
+ * File attachment display for various document types.
+ * Shows file info card with icon, filename, and file size.
+ * Supports PDF and generic document formats.
+ * Emits click event to open file in viewer.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-file-attachment
+ *   [fileName]="'Document.pdf'"
+ *   [fileSize]="'1.2 MB'"
+ *   [variant]="'pdf'"
+ *   (fileClick)="openFile()">
+ * </ds-mobile-file-attachment>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-file-attachment',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent, DsIconComponent],
+  host: {
+    '(click)': 'handleClick($event)'
+  },
+  styles: [`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 16px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    
+    :host:hover {
+      background: var(--color-background-neutral-secondary-hover, #ebebeb);
+    }
+    
+    :host:active {
+      transform: scale(0.98);
+    }
+    
+    .file-avatar {
+      flex-shrink: 0;
+    }
+    
+    .file-avatar.pdf::ng-deep .avatar--icon {
+      background-color: #ff5757 !important;
+    }
+    
+    .file-avatar.doc::ng-deep .avatar--icon {
+      background-color: var(--color-blue-base, #3B82F6) !important;
+    }
+    
+    .file-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    
+    .file-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;
+    }
+    
+    .file-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);
+    }
+    
+    .open-icon {
+      color: var(--color-text-tertiary, #a3a3a3);
+      flex-shrink: 0;
+    }
+  `],
+  template: `
+    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+      <ds-avatar
+        type="icon"
+        [iconName]="getIconName()"
+        size="lg"
+      />
+    </div>
+    
+    <div class="file-info">
+      <div class="file-name">{{ fileName() }}</div>
+      @if (fileSize()) {
+        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+      } @else {
+        <div class="file-meta">{{ getFileTypeLabel() }}</div>
+      }
+    </div>
+    
+    <ds-icon 
+      name="remixArrowRightSLine" 
+      size="20px"
+      class="open-icon"
+    />
+  `
+})
+export class DsMobileFileAttachmentComponent {
+  /**
+   * File name
+   */
+  fileName = input<string>('Document');
+  
+  /**
+   * File size display (e.g., "1.2 MB")
+   */
+  fileSize = input<string>('');
+  
+  /**
+   * File type variant
+   * - 'pdf' - PDF document (red icon)
+   * - 'doc' - Generic document (blue icon)
+   */
+  variant = input<'pdf' | 'doc'>('doc');
+  
+  /**
+   * Emits when the file attachment is clicked
+   */
+  fileClick = output<void>();
+  
+  /**
+   * Get the appropriate icon name based on variant
+   */
+  getIconName(): string {
+    return this.variant() === 'pdf' ? 'remixFileTextLine' : 'remixAttachmentLine';
+  }
+  
+  /**
+   * Get the file type label based on variant
+   */
+  getFileTypeLabel(): string {
+    return this.variant() === 'pdf' ? 'PDF' : 'DOC';
+  }
+  
+  handleClick(event: Event): void {
+    event.stopPropagation();
+    this.fileClick.emit();
+  }
+}
+

package/src/components/file-attachment/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileFileAttachmentComponent } from './ds-mobile-file-attachment';
+