@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/facility-creation-modal/sheets/ds-mobile-access-sheet.ts

@@ -1,105 +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 AccessRequirementOption {
-  value: string;
-  label: string;
-}
-
-/**
- * DsMobileAccessSheetComponent
- *
- * Bottom sheet for selecting facility access requirements (multi-select with checkboxes).
- */
-@Component({
-  selector: 'ds-mobile-access-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="Adgangskrav"
-        leftButtonLabel="Tilbage"
-        rightButtonLabel="Gem"
-        (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]="selectedRestrictions().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 DsMobileAccessSheetComponent {
-  options: AccessRequirementOption[] = [
-    { value: 'digital-adgangskode', label: 'Digital adgangskode' },
-    { value: 'depositum', label: 'Depositum' },
-    { value: 'nøglekort', label: 'Nøglekort' }
-  ];
-
-  // State - no default selection
-  selectedRestrictions = signal<Set<string>>(new Set());
-
-  constructor(private modalController: ModalController) {}
-
-  /**
-   * Toggle an option on/off
-   */
-  toggleOption(value: string): void {
-    const current = new Set(this.selectedRestrictions());
-    current.has(value) ? current.delete(value) : current.add(value);
-    this.selectedRestrictions.set(current);
-  }
-
-  /**
-   * Confirm selection and dismiss with selected restrictions
-   */
-  confirmSelection(): void {
-    const selected = Array.from(this.selectedRestrictions());
-    this.modalController.dismiss({ value: selected }, 'select');
-  }
-
-  /**
-   * Dismiss without saving
-   */
-  dismiss(): void {
-    this.modalController.dismiss(null, 'cancel');
-  }
-}

package/src/components/facility-creation-modal/sheets/ds-mobile-price-sheet.ts

@@ -1,188 +0,0 @@
-import { Component, signal, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ModalController } from '@ionic/angular/standalone';
-import { DsInputComponent, 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';
-
-/**
- * DsMobilePriceSheetComponent
- *
- * Bottom sheet for setting facility booking price with toggle for free and custom price input.
- */
-@Component({
-  selector: 'ds-mobile-price-sheet',
-  standalone: true,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    CommonModule,
-    FormsModule,
-    DsInputComponent,
-    DsLabelComponent,
-    DsMobileBottomSheetWrapperComponent,
-    DsMobileBottomSheetHeaderComponent
-  ],
-  template: `
-    <ds-mobile-bottom-sheet-wrapper>
-      <!-- Header with back and done buttons -->
-      <ds-mobile-bottom-sheet-header
-        title="Pris"
-        leftButtonLabel="Annuller"
-        rightButtonLabel="Gem"
-        [rightButtonDisabled]="!isValid()"
-        (leftButtonClick)="dismiss()"
-        (rightButtonClick)="confirmSelection()">
-      </ds-mobile-bottom-sheet-header>
-
-      <div class="form-content">
-        <div class="price-toggle-container">
-          <!-- Toggle for Gratis -->
-          <div class="toggle-row" (click)="toggleFree()">
-            <ds-label size="md" className="form-section-label">Gratis</ds-label>
-            <div class="toggle-switch" [class.active]="isFree()">
-              <div class="toggle-knob"></div>
-            </div>
-          </div>
-
-          <!-- Custom price input inside same container -->
-          @if (!isFree()) {
-            <div class="price-input-row" (click)="$event.stopPropagation()">
-              <ds-label size="md" className="form-section-label">Hvad skal det koste?</ds-label>
-              <ds-input
-                type="number"
-                size="lg"
-                [(ngModel)]="customPrice"
-                placeholder="75"
-                [suffix]="'kr. per booking'"
-                class="price-input">
-              </ds-input>
-            </div>
-          }
-        </div>
-      </div>
-    </ds-mobile-bottom-sheet-wrapper>
-  `,
-  styles: [`
-    .form-content {
-      padding: 16px;
-    }
-
-    .price-toggle-container {
-      display: flex;
-      flex-direction: column;
-      background: var(--color-background-neutral-primary, #f5f5f5);
-      border: 1px solid var(--border-color-default);
-      border-radius: 12px;
-      margin-bottom: 24px;
-      overflow: hidden;
-    }
-
-    /* Toggle row */
-    .toggle-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px;
-      cursor: pointer;
-      transition: background 0.2s ease;
-    }
-
-    .toggle-row:hover {
-      background: var(--color-background-neutral-primary-hover, #ebebeb);
-    }
-
-    /* Label spacing */
-    ::ng-deep ds-label.form-section-label {
-      display: block;
-      margin-bottom: 8px;
-    }
-
-    ::ng-deep .form-section-label {
-      font-weight: 500;
-    }
-
-    .toggle-switch {
-      width: 51px;
-      height: 32px;
-      background: var(--color-background-neutral-tertiary);
-      border-radius: 16px;
-      position: relative;
-      transition: background 0.3s ease;
-      cursor: pointer;
-    }
-
-    .toggle-switch.active {
-      background: var(--color-accent);
-    }
-
-    .toggle-knob {
-      width: 27px;
-      height: 27px;
-      background: white;
-      border-radius: 50%;
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      transition: transform 0.3s ease;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .toggle-switch.active .toggle-knob {
-      transform: translateX(20px);
-    }
-
-    .price-input-row {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 16px;
-      border-top: 1px solid var(--border-color-default);
-    }
-
-    /* Increase input height to 48px */
-    ::ng-deep .price-input .ds-input__field {
-      height: 48px !important;
-      min-height: 48px !important;
-    }
-  `]
-})
-export class DsMobilePriceSheetComponent {
-  // State
-  isFree = signal(false);
-  customPrice = signal('0');
-
-  // Validation: if not free, price must be > 0
-  isValid = computed(() => {
-    if (this.isFree()) return true;
-    const price = parseFloat(this.customPrice());
-    return !isNaN(price) && price > 0;
-  });
-
-  constructor(private modalController: ModalController) {}
-
-  /**
-   * Toggle the "Gratis" (free) option
-   */
-  toggleFree(): void {
-    this.isFree.set(!this.isFree());
-    if (this.isFree()) this.customPrice.set('');
-  }
-
-  /**
-   * Confirm selection and dismiss with price value
-   */
-  confirmSelection(): void {
-    const value = this.isFree() 
-      ? 'Gratis' 
-      : `${this.customPrice()} kr. per booking`;
-    this.modalController.dismiss({ value }, 'select');
-  }
-
-  /**
-   * Dismiss without saving
-   */
-  dismiss(): void {
-    this.modalController.dismiss(null, 'cancel');
-  }
-}