@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/facility-creation-modal/sheets/ds-mobile-when-can-book-sheet.ts

@@ -0,0 +1,460 @@
+import { Component, signal, computed, input, CUSTOM_ELEMENTS_SCHEMA, OnInit, PLATFORM_ID, inject } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ModalController, IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone';
+import { DsMobileDropdownComponent } from '../../dropdown';
+import { DsInputTimeComponent, DsLabelComponent } from '@propbinder/design-system';
+import { DsMobileBottomSheetWrapperComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-wrapper';
+import { DsMobileBottomSheetHeaderComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-header';
+
+export interface WhenCanBookData {
+  days: string[];
+  timeRange: { start: string; end: string };
+  duration: string;
+}
+
+/**
+ * DsMobileWhenCanBookSheetComponent
+ *
+ * Bottom sheet for selecting when a facility can be booked (days, time range, duration).
+ * "Vælg selv" opens a drum-roll IonPopover on mobile, or inline number inputs on desktop.
+ */
+@Component({
+  selector: 'ds-mobile-when-can-book-sheet',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    CommonModule,
+    FormsModule,
+    DsInputTimeComponent,
+    DsLabelComponent,
+    DsMobileBottomSheetWrapperComponent,
+    DsMobileBottomSheetHeaderComponent,
+    DsMobileDropdownComponent,
+    IonPicker,
+    IonPickerColumn,
+    IonPickerColumnOption,
+  ],
+  template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <!-- Header with back and done buttons -->
+      <ds-mobile-bottom-sheet-header
+        title="Kan bookes"
+        leftButtonLabel="Annuller"
+        rightButtonLabel="Gem"
+        [rightButtonDisabled]="!isValid()"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <div class="form-content">
+        <!-- Day chips -->
+        <div class="section">
+          <ds-label size="md" className="form-section-label">Kan bookes</ds-label>
+          <div class="day-chips">
+            @for (day of days; track day) {
+              <button 
+                type="button"
+                class="day-chip"
+                [class.active]="selectedDays().has(day)"
+                (click)="toggleDay(day)">
+                {{ day }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Time range -->
+        <div class="section">
+          <ds-label size="md" className="form-section-label">I tidsrummet</ds-label>
+          <div class="time-inputs">
+            <ds-input-time size="lg" [(ngModel)]="startTime"></ds-input-time>
+            <span class="separator">til</span>
+            <ds-input-time size="lg" [(ngModel)]="endTime"></ds-input-time>
+          </div>
+        </div>
+
+        <!-- Duration chips -->
+        <div class="section">
+          <ds-label size="md" className="form-section-label">Varighed</ds-label>
+          <div class="duration-chips">
+            @for (duration of durations; track duration.value) {
+              <button 
+                type="button"
+                class="duration-chip"
+                [id]="duration.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
+                [class.active]="selectedDuration() === duration.value"
+                (click)="selectDuration(duration.value)">
+                @if (duration.value === 'Vælg selv' && selectedDuration() === 'Vælg selv') {
+                  {{ customDurationLabel() || 'Vælg selv' }}
+                } @else {
+                  {{ duration.label }}
+                }
+              </button>
+            }
+          </div>
+
+          <!-- Desktop: inline inputs shown when "Vælg selv" is active -->
+          @if (showInlineInputs()) {
+            <div class="custom-duration-inputs">
+              <input
+                type="number"
+                class="duration-number-input"
+                min="0"
+                [ngModel]="customHours()"
+                (ngModelChange)="customHours.set(+$event)"
+                (blur)="normalize()"
+              />
+              <span class="duration-unit">timer</span>
+              <input
+                type="number"
+                class="duration-number-input"
+                min="0"
+                max="59"
+                [ngModel]="customMinutes()"
+                (ngModelChange)="customMinutes.set(+$event)"
+                (blur)="normalize()"
+              />
+              <span class="duration-unit">min</span>
+            </div>
+          }
+
+          <!-- Mobile: drum-roll popover anchored to the "Vælg selv" chip -->
+          @if (!isDesktop()) {
+            <ds-mobile-dropdown
+              trigger="vaelg-selv-chip"
+              [isOpen]="pickerOpen()"
+              maxWidth="240px"
+              position="above"
+              (closed)="onPickerDismiss()">
+              <ng-template #customContent>
+                <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
+                  <ion-picker-column
+                    [value]="customHours()"
+                    style="--padding-start: 4px; --padding-end: 4px;"
+                    (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
+                    <div slot="suffix" class="picker-suffix">t</div>
+                    @for (h of hours; track h) {
+                      <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
+                    }
+                  </ion-picker-column>
+                  <ion-picker-column
+                    [value]="customMinutes()"
+                    style="--padding-start: 4px; --padding-end: 4px;"
+                    (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
+                    <div slot="suffix" class="picker-suffix">min</div>
+                    @for (m of minuteOptions; track m) {
+                      <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
+                    }
+                  </ion-picker-column>
+                </ion-picker>
+              </ng-template>
+            </ds-mobile-dropdown>
+          }
+        </div>
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `,
+  styles: [`
+    .form-content {
+      padding: 16px;
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 24px;
+    }
+
+    .section:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Label spacing */
+    ::ng-deep ds-label.form-section-label {
+      display: block;
+      margin-bottom: 12px;
+    }
+
+    ::ng-deep .form-section-label {
+      font-weight: 500;
+    }
+
+    /* Day chips */
+    .day-chips {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .day-chip {
+      flex: none;
+      width: 64px;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color-default, #d1d5db);
+      border-radius: 8px;
+      background: transparent;
+      color: var(--color-text-primary);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      outline: none;
+    }
+
+    .day-chip:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    .day-chip.active {
+      background: var(--color-accent);
+      color: white;
+      border-color: var(--color-accent);
+    }
+
+    /* Time inputs */
+    .time-inputs {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .separator {
+      color: var(--color-text-secondary);
+      font-size: 14px;
+    }
+
+    /* Duration chips */
+    .duration-chips {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .duration-chip {
+      padding: 10px 16px;
+      border: 1px solid var(--border-color-default, #d1d5db);
+      border-radius: 8px;
+      background: transparent;
+      color: var(--color-text-primary);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      outline: none;
+    }
+
+    .duration-chip:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    .duration-chip.active {
+      background: var(--color-accent);
+      color: white;
+      border-color: var(--color-accent);
+    }
+
+    /* Desktop inline custom duration inputs */
+    .custom-duration-inputs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 12px;
+      animation: fadeSlideIn 0.15s ease;
+    }
+
+    @keyframes fadeSlideIn {
+      from { opacity: 0; transform: translateY(-4px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    .duration-number-input {
+      width: 64px;
+      padding: 8px 10px;
+      border: 1px solid var(--border-color-default, #d1d5db);
+      border-radius: 8px;
+      background: transparent;
+      color: var(--color-text-primary);
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      outline: none;
+      transition: border-color 0.2s ease;
+    }
+
+    .duration-number-input:focus {
+      border-color: var(--color-accent);
+    }
+
+    /* Remove browser spin buttons */
+    .duration-number-input::-webkit-inner-spin-button,
+    .duration-number-input::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    .duration-number-input[type=number] {
+      -moz-appearance: textfield;
+    }
+
+    .duration-unit {
+      color: var(--color-text-secondary);
+      font-size: 14px;
+    }
+
+    .picker-suffix {
+      margin-left: -24px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+  `]
+})
+export class DsMobileWhenCanBookSheetComponent implements OnInit {
+  private platformId = inject(PLATFORM_ID);
+
+  // Platform
+  isDesktop = signal<boolean>(false);
+
+  // State
+  selectedDays = signal<Set<string>>(new Set(['Fre', 'Lør', 'Søn']));
+  startTime = signal('09:00');
+  endTime = signal('17:30');
+  selectedDuration = signal('1 time');
+
+  /**
+   * Maximum number of days available in the "Vælg selv" picker/inputs.
+   * Defaults to 30 (one full month). Override via componentProps when opening the sheet.
+   */
+  maxDays = input<number>(30);
+
+  // Custom duration state
+  pickerOpen = signal<boolean>(false);
+  customDays = signal<number>(0);
+  customHours = signal<number>(1);
+  customMinutes = signal<number>(0);
+
+  customDurationLabel = computed(() => {
+    const d = this.customDays();
+    const h = this.customHours();
+    const m = this.customMinutes();
+    const parts: string[] = [];
+    if (d > 0) parts.push(`${d} dage`);
+    if (h > 0) parts.push(`${h}t`);
+    if (m > 0) parts.push(`${m}min`);
+    return parts.join(' ');
+  });
+
+  showInlineInputs = computed(() =>
+    this.selectedDuration() === 'Vælg selv' && this.isDesktop()
+  );
+
+  // Options
+  days = ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'];
+  durations = [
+    { value: '30 min', label: '30 min' },
+    { value: '1 time', label: '1 time' },
+    { value: '2 timer', label: '2 timer' },
+    { value: 'Hele dagen', label: 'Hele dagen' },
+    { value: 'Vælg selv', label: 'Vælg selv' }
+  ];
+  daysOptions = computed(() => Array.from({ length: this.maxDays() + 1 }, (_, i) => i));
+  hours = Array.from({ length: 24 }, (_, i) => i);
+  minuteOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+
+  // Validation
+  isValid = computed(() => {
+    if (this.selectedDuration() === 'Vælg selv' && this.customDurationLabel() === '') {
+      return false;
+    }
+    return this.selectedDays().size > 0 &&
+           this.startTime() &&
+           this.endTime();
+  });
+
+  constructor(private modalController: ModalController) {}
+
+  ngOnInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.isDesktop.set(window.innerWidth >= 768);
+      window.addEventListener('resize', () => {
+        this.isDesktop.set(window.innerWidth >= 768);
+      });
+    }
+  }
+
+  /**
+   * Handle duration chip selection.
+   * On mobile, opening "Vælg selv" triggers the IonPopover via its trigger id.
+   * On desktop, it shows the inline inputs.
+   */
+  selectDuration(value: string): void {
+    this.selectedDuration.set(value);
+    if (value === 'Vælg selv' && !this.isDesktop()) {
+      this.pickerOpen.set(true);
+    }
+  }
+
+  /**
+   * Normalizes days/hours/minutes so values never overflow their units.
+   * e.g. 0d 48t 0min → 2d 0t 0min; 0d 0t 75min → 0d 1t 15min.
+   * Caps days at maxDays().
+   */
+  normalize(): void {
+    const totalMinutes = this.customDays() * 24 * 60
+                       + this.customHours() * 60
+                       + this.customMinutes();
+
+    const maxTotalMinutes = this.maxDays() * 24 * 60 + 23 * 60 + 59;
+    const clamped = Math.max(0, Math.min(totalMinutes, maxTotalMinutes));
+
+    const d = Math.floor(clamped / (24 * 60));
+    const h = Math.floor((clamped % (24 * 60)) / 60);
+    const m = clamped % 60;
+
+    this.customDays.set(d);
+    this.customHours.set(h);
+    this.customMinutes.set(m);
+  }
+
+  /**
+   * Called when the mobile picker popover is dismissed — normalize and commit.
+   */
+  onPickerDismiss(): void {
+    this.normalize();
+    this.pickerOpen.set(false);
+  }
+
+  /**
+   * Toggle day selection
+   */
+  toggleDay(day: string): void {
+    const current = new Set(this.selectedDays());
+    current.has(day) ? current.delete(day) : current.add(day);
+    this.selectedDays.set(current);
+  }
+
+  /**
+   * Confirm selection and dismiss with data
+   */
+  confirmSelection(): void {
+    const duration = this.selectedDuration() === 'Vælg selv'
+      ? this.customDurationLabel()
+      : this.selectedDuration();
+
+    const data: WhenCanBookData = {
+      days: Array.from(this.selectedDays()),
+      timeRange: { start: this.startTime(), end: this.endTime() },
+      duration
+    };
+    this.modalController.dismiss({ value: data }, 'select');
+  }
+
+  /**
+   * Dismiss without saving
+   */
+  dismiss(): void {
+    this.modalController.dismiss(null, 'cancel');
+  }
+}

package/src/components/facility-creation-modal/sheets/ds-mobile-who-can-book-sheet.ts

@@ -0,0 +1,134 @@
+import { Component, signal, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsCheckboxComponent } from '@propbinder/design-system';
+import { DsMobileActionListItemComponent } from '../../action-list-item/ds-mobile-action-list-item';
+import { DsMobileBottomSheetWrapperComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-wrapper';
+import { DsMobileBottomSheetHeaderComponent } from '../../bottom-sheet/ds-mobile-bottom-sheet-header';
+
+export interface WhoCanBookOption {
+  value: string;
+  label: string;
+  isMaster?: boolean;
+}
+
+/**
+ * DsMobileWhoCanBookSheetComponent
+ *
+ * Bottom sheet for selecting who can book a facility (multi-select with checkboxes).
+ */
+@Component({
+  selector: 'ds-mobile-who-can-book-sheet',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    CommonModule,
+    DsCheckboxComponent,
+    DsMobileActionListItemComponent, 
+    DsMobileBottomSheetWrapperComponent,
+    DsMobileBottomSheetHeaderComponent
+  ],
+  template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <!-- Header with back and done buttons -->
+      <ds-mobile-bottom-sheet-header
+        title="Hvem kan booke"
+        leftButtonLabel="Tilbage"
+        rightButtonLabel="Færdig"
+        [rightButtonDisabled]="!hasSelectionChanged()"
+        (leftButtonClick)="dismiss()"
+        (rightButtonClick)="confirmSelection()">
+      </ds-mobile-bottom-sheet-header>
+
+      <!-- Options list -->
+      <div class="options-list">
+        @for (option of options; track option.value; let isLast = $last) {
+          <ds-mobile-action-list-item
+            [title]="option.label"
+            [showDivider]="!isLast"
+            (itemClick)="toggleOption(option.value)">
+            <div content-trailing>
+              <ds-checkbox
+                [checked]="selectedOptions().has(option.value)"
+                [showLabel]="false"
+                size="md"
+                (click)="$event.stopPropagation()"
+                (checkedChange)="toggleOption(option.value)">
+              </ds-checkbox>
+            </div>
+          </ds-mobile-action-list-item>
+        }
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `,
+  styles: [`
+    .options-list {
+      display: flex;
+      flex-direction: column;
+      padding: 0 16px;
+    }
+  `]
+})
+export class DsMobileWhoCanBookSheetComponent {
+  options: WhoCanBookOption[] = [
+    { value: 'alle', label: 'Alle', isMaster: true },
+    { value: 'faelleskab-a', label: 'Fælleskab A' },
+    { value: 'faelleskab-b', label: 'Fælleskab B' },
+    { value: 'faelleskab-c', label: 'Fælleskab C' }
+  ];
+
+  // Signal-based state for selected options - all selected by default
+  selectedOptions = signal<Set<string>>(new Set(['alle', 'faelleskab-a', 'faelleskab-b', 'faelleskab-c']));
+  
+  // Computed signal to check if any selection has been made
+  hasSelectionChanged = computed(() => this.selectedOptions().size > 0);
+
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Toggle an option on/off
+   * Special logic for 'alle': when toggled on, selects all options; when toggled off, deselects all
+   */
+  toggleOption(value: string): void {
+    const current = new Set(this.selectedOptions());
+    
+    if (value === 'alle') {
+      if (current.has('alle')) {
+        // Deselect all
+        current.clear();
+      } else {
+        // Select all
+        this.options.forEach(opt => current.add(opt.value));
+      }
+    } else {
+      if (current.has(value)) {
+        current.delete(value);
+        current.delete('alle'); // Uncheck "Alle" if any individual item is unchecked
+      } else {
+        current.add(value);
+        // Check if all non-master items are selected
+        const allSelected = this.options
+          .filter(o => !o.isMaster)
+          .every(o => current.has(o.value));
+        if (allSelected) current.add('alle');
+      }
+    }
+    
+    this.selectedOptions.set(current);
+  }
+
+  /**
+   * Confirm selection and dismiss with selected options
+   */
+  confirmSelection(): void {
+    const selected = Array.from(this.selectedOptions());
+    this.modalController.dismiss({ value: selected }, 'select');
+  }
+
+  /**
+   * Dismiss without saving
+   */
+  dismiss(): void {
+    this.modalController.dismiss(null, 'cancel');
+  }
+}

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

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { BaseModalService } from '../../services/base-modal.service';
+import {
+  DsMobileFacilityDetailModalComponent,
+  FacilityDetailData,
+} from './ds-mobile-facility-detail-modal';
+
+/**
+ * DsMobileFacilityDetailModalService
+ *
+ * Service for displaying facility details in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobilePostDetailModalService for consistent behavior.
+ *
+ * Features:
+ * - Full facility information display
+ * - Hero image with swiper
+ * - Rich text description support
+ * - Requirements and booking type display
+ * - Restrictions list
+ * - Fixed bottom booking button
+ * - Native modal animations
+ * - Safe area support
+ *
+ * @example
+ * ```typescript
+ * constructor(private facilityModal: DsMobileFacilityDetailModalService) {}
+ *
+ * async openFacility() {
+ *   await this.facilityModal.open({
+ *     id: 'facility-1',
+ *     facilityTitle: 'Festlokale på taget',
+ *     heroImage: '/Assets/Dummy-photos/balcony-view.jpg',
+ *     fullDescription: '<p>The rooftop terrace is designed...</p>',
+ *     requirements: ['Kræver nøglekort'],
+ *     bookingType: 'Instant booking',
+ *     expectations: '<p>The terrace is furnished...</p>',
+ *     restrictions: ['No smoking or vaping...']
+ *   });
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DsMobileFacilityDetailModalService extends BaseModalService {
+  constructor(modalController: ModalController) {
+    super(modalController);
+  }
+
+  /**
+   * Open the facility detail modal
+   *
+   * @param facilityData Facility data to display
+   * @returns Promise that resolves when the modal is presented
+   */
+  async open(facilityData: FacilityDetailData): Promise<void> {
+    const modal = await this.createModal(
+      DsMobileFacilityDetailModalComponent,
+      { facilityData },
+      {
+        keyboardClose: true, // Allow keyboard close behavior
+      }
+    );
+
+    await modal.present();
+  }
+}