@propbinder/mobile-design 0.2.47 → 0.2.50

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

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

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