@propbinder/mobile-design 0.2.50 → 0.2.52

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

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

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

@@ -1,69 +0,0 @@
-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();
-  }
-}