@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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

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

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