@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/booking-modal/ds-mobile-booking-summary.ts

@@ -0,0 +1,161 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobileBookingSummaryComponent
+ * 
+ * Displays a booking summary with facility info, thumbnail, date and time.
+ * Designed to be used within the generic confirmation sheet.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-booking-summary
+ *   [facilityTitle]="'Festlokale på taget'"
+ *   [facilityThumbnail]="'/path/to/image.jpg'"
+ *   [date]="'Tue 19 Nov'"
+ *   [time]="'14:00 - 16:00'"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-booking-summary',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent],
+  styles: [`
+    .booking-summary {
+      width: 100%;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 16px;
+      padding: 12px;
+    }
+
+    .summary-item {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .summary-thumbnail {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
+      object-fit: cover;
+      flex-shrink: 0;
+      background: var(--color-background-neutral-tertiary, #e5e5e5);
+    }
+
+    .summary-thumbnail-placeholder {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
+      flex-shrink: 0;
+      background: var(--color-background-neutral-tertiary, #e5e5e5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .summary-details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .summary-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base, 16px);
+      font-weight: 600;
+      color: var(--text-color-default-primary, #202227);
+      margin: 0;
+    }
+
+    .summary-datetime-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .summary-datetime {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .summary-datetime-text {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      font-weight: 400;
+      color: var(--text-color-default-secondary, #71727a);
+    }
+
+    .summary-datetime ds-icon {
+      flex-shrink: 0;
+    }
+  `],
+  template: `
+    <div class="booking-summary">
+      <div class="summary-item">
+        @if (facilityThumbnail) {
+          <img 
+            [src]="facilityThumbnail" 
+            [alt]="facilityTitle"
+            class="summary-thumbnail" />
+        } @else {
+          <div class="summary-thumbnail-placeholder">
+            <ds-icon name="remixImageLine" size="24px" />
+          </div>
+        }
+        
+        <div class="summary-details">
+          <h3 class="summary-title">{{ facilityTitle }}</h3>
+          
+          <div class="summary-datetime-container">
+            @if (date) {
+              <div class="summary-datetime">
+                <ds-icon 
+                  name="remixCalendarLine" 
+                  size="16px" 
+                  color="var(--text-color-default-secondary, #71727a)" />
+                <span class="summary-datetime-text">{{ date }}</span>
+              </div>
+            }
+            
+            @if (time) {
+              <div class="summary-datetime">
+                <ds-icon 
+                  name="remixTimeLine" 
+                  size="16px" 
+                  color="var(--text-color-default-secondary, #71727a)" />
+                <span class="summary-datetime-text">{{ time }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class DsMobileBookingSummaryComponent {
+  /**
+   * Facility title
+   */
+  @Input({ required: true }) facilityTitle!: string;
+
+  /**
+   * Optional facility thumbnail URL
+   */
+  @Input() facilityThumbnail?: string;
+
+  /**
+   * Formatted date string (e.g., "Tue 19 Nov")
+   */
+  @Input() date?: string;
+
+  /**
+   * Formatted time string (e.g., "14:00 - 16:00")
+   */
+  @Input() time?: string;
+}

package/src/components/booking-modal/index.ts

@@ -0,0 +1,4 @@
+export * from './ds-mobile-booking-modal';
+export * from './ds-mobile-booking-modal.service';
+export * from './ds-mobile-booking-summary';
+export * from './ds-mobile-booking-confirmation-wrapper';

package/src/components/bottom-sheet/ds-mobile-actions-bottom-sheet.ts

@@ -0,0 +1,266 @@
+import { Component, Input, computed, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsMobileActionListItemComponent } from '../action-list-item/ds-mobile-action-list-item';
+import { DsMobileBottomSheetWrapperComponent } from './ds-mobile-bottom-sheet-wrapper';
+
+export interface ActionResult {
+  action: string;
+}
+
+export interface ActionItem {
+  action: string;
+  title: string;
+  icon: string;
+  destructive?: boolean;
+  subtitle?: string; // Optional subtitle text (e.g., current language)
+  showChevron?: boolean; // Show chevron indicator for navigation
+  flagIcon?: string; // Optional flag icon path (e.g., for language selection)
+}
+
+export interface ActionGroup {
+  actions: ActionItem[];
+}
+
+/**
+ * DsMobileActionsBottomSheetComponent
+ *
+ * Generic bottom sheet for displaying action lists.
+ * Supports custom action groups or preset content actions (posts/comments).
+ * Action groups are automatically separated by full-width dividers.
+ *
+ * @example Custom actions with auto-height (recommended to avoid cropping)
+ * ```typescript
+ * const sheet = await this.modalController.create({
+ *   component: DsMobileActionsBottomSheetComponent,
+ *   componentProps: {
+ *     customActionGroups: [
+ *       {
+ *         actions: [
+ *           { action: 'profile', title: 'Min profil', icon: 'remixUser3Line' },
+ *           { action: 'settings', title: 'Indstillinger', icon: 'remixSettings3Line' }
+ *         ]
+ *       },
+ *       {
+ *         actions: [
+ *           { action: 'logout', title: 'Log ud', icon: 'remixLogoutBoxLine', destructive: true }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: 'auto-height'
+ * });
+ *
+ * const result = await sheet.onWillDismiss();
+ * if (result.data?.action) {
+ *   // Handle the action
+ * }
+ * ```
+ *
+ * @example Preset content actions
+ * ```typescript
+ * const sheet = await this.modalController.create({
+ *   component: DsMobileActionsBottomSheetComponent,
+ *   componentProps: {
+ *     isOwnContent: false
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: 'auto-height'
+ * });
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-actions-bottom-sheet',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent, DsMobileActionListItemComponent, DsMobileBottomSheetWrapperComponent],
+  template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <!-- Actions List -->
+      <div class="actions-list">
+        @for (group of actionGroups(); track $index; let isLast = $last) {
+        <!-- Action Group -->
+        <div class="action-group">
+          @for (actionItem of group.actions; track actionItem.action; let isLastInGroup = $last) {
+          <ds-mobile-action-list-item
+            [title]="actionItem.title"
+            [showDivider]="!isLastInGroup"
+            [class.destructive]="actionItem.destructive"
+            (itemClick)="selectAction(actionItem.action)"
+          >
+            <ds-icon action-icon [name]="actionItem.icon" size="20px" [class.destructive-icon]="actionItem.destructive" />
+          </ds-mobile-action-list-item>
+          }
+        </div>
+
+        <!-- Full-width divider between groups -->
+        @if (!isLast) {
+        <div class="action-group-divider"></div>
+        } }
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: auto;
+      }
+
+      /* Actions List */
+      .actions-list {
+        display: flex;
+        flex-direction: column;
+        padding-top: 16px;
+      }
+
+      /* Action Group - padding on groups instead of list */
+      .action-group {
+        display: flex;
+        flex-direction: column;
+        padding: 0 16px; /* Horizontal padding on each group */
+      }
+
+      /* Override default background color to transparent so hover state is visible */
+      /* Need ::ng-deep because ds-mobile-list-item uses :host styles internally */
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item {
+        --color-background-primary: transparent;
+        --color-background-neutral-primary-hover: var(--color-background-neutral-secondary, #f5f5f5);
+      }
+
+      /* Ensure the interactive background is visible */
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .list-item-inner::before {
+        z-index: 0 !important;
+      }
+
+      /* Ensure content is above the background */
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-leading,
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-main,
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-trailing {
+        position: relative;
+        z-index: 1;
+      }
+
+      /* Hide divider on last list item using CSS variable */
+      ds-mobile-action-list-item:last-of-type {
+        --divider-display: none;
+      }
+
+      /* Destructive action styling */
+      ds-mobile-action-list-item.destructive {
+        --text-color-default-primary: var(--color-error-base, #ef4444);
+      }
+
+      .destructive-icon {
+        color: var(--color-error-base, #ef4444);
+      }
+
+      /* Full-width divider between action groups */
+      .action-group-divider {
+        height: 1px;
+        background: var(--color-border-subtle, #e5e5e5);
+        margin: 8px 0;
+      }
+    `,
+  ],
+})
+export class DsMobileActionsBottomSheetComponent {
+  /**
+   * Custom action groups to display (overrides isOwnContent)
+   */
+  @Input() customActionGroups?: ActionGroup[];
+
+  /**
+   * Whether this content belongs to the current user (for preset content actions)
+   */
+  @Input() isOwnContent: boolean = false;
+
+  /**
+   * Computed action groups - uses custom groups if provided, otherwise falls back to preset content actions
+   */
+  actionGroups = computed<ActionGroup[]>(() => {
+    // Use custom action groups if provided
+    if (this.customActionGroups) {
+      return this.customActionGroups;
+    }
+
+    // Otherwise fall back to preset content actions
+    if (this.isOwnContent) {
+      // Own content: Group 1 (Edit, Delete) + Group 2 (Like, Reply)
+      return [
+        {
+          actions: [
+            {
+              action: 'edit',
+              title: 'Rediger',
+              icon: 'remixEditLine',
+              destructive: false,
+            },
+            {
+              action: 'delete',
+              title: 'Slet',
+              icon: 'remixDeleteBinLine',
+              destructive: true,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              action: 'like',
+              title: 'Synes om',
+              icon: 'remixHeart3Line',
+              destructive: false,
+            },
+            {
+              action: 'reply',
+              title: 'Svar',
+              icon: 'remixReplyLine',
+              destructive: false,
+            },
+          ],
+        },
+      ];
+    } else {
+      // Other users' content: Group 1 (Like, Reply)
+      return [
+        {
+          actions: [
+            {
+              action: 'like',
+              title: 'Synes om',
+              icon: 'remixHeart3Line',
+              destructive: false,
+            },
+            {
+              action: 'reply',
+              title: 'Svar',
+              icon: 'remixReplyLine',
+              destructive: false,
+            },
+          ],
+        },
+      ];
+    }
+  });
+
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Handle action selection and dismiss with result
+   */
+  selectAction(action: string): void {
+    this.modalController.dismiss({ action } as ActionResult, 'select');
+  }
+}
+
+// Legacy exports for backwards compatibility
+export { DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent };
+export { DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent };
+export type { ActionResult as PostActionResult };
+export type { ActionResult as CommentActionResult };

package/src/components/bottom-sheet/ds-mobile-bottom-sheet-header.ts

@@ -0,0 +1,146 @@
+import { Component, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonHeader, IonToolbar, IonTitle, IonButtons } from '@ionic/angular/standalone';
+import { DsButtonComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobileBottomSheetHeaderComponent
+ *
+ * Reusable header component for bottom sheets with left button, center title, and right button.
+ * Styling matches the language switcher pattern (source of truth).
+ *
+ * Usage:
+ * ```html
+ * <ds-mobile-bottom-sheet-header
+ *   title="Sheet Title"
+ *   leftButtonLabel="Tilbage"
+ *   rightButtonLabel="Færdig"
+ *   [rightButtonDisabled]="!isValid()"
+ *   (leftButtonClick)="handleCancel()"
+ *   (rightButtonClick)="handleConfirm()">
+ * </ds-mobile-bottom-sheet-header>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-bottom-sheet-header',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    CommonModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonButtons,
+    DsButtonComponent
+  ],
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ds-button 
+            variant="secondary" 
+            size="sm" 
+            (clicked)="leftButtonClick.emit()">
+            {{ leftButtonLabel }}
+          </ds-button>
+        </ion-buttons>
+        <ion-title>{{ title }}</ion-title>
+        <ion-buttons slot="end">
+          <ds-button 
+            variant="primary" 
+            size="sm" 
+            [disabled]="rightButtonDisabled"
+            (clicked)="rightButtonClick.emit()">
+            {{ rightButtonLabel }}
+          </ds-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+  `,
+  styles: [`
+    /* Styles copied 1:1 from language switcher (lines 200-249) */
+    ion-header {
+      box-shadow: none;
+    }
+
+    /* Override Ionic's default iOS header border */
+    :host ::ng-deep .header-ios ion-toolbar:last-of-type {
+      --border-width: 0 !important;
+    }
+
+    ion-toolbar {
+      --background: var(--color-background-neutral-primary, #ffffff);
+      --border-width: 0 !important;
+      --border-color: var(--color-border-default, #e5e7eb) !important;
+      --padding-top: 12px;
+      --padding-bottom: 8px;
+      --min-height: 56px;
+      border-bottom: 1px solid var(--color-border-default, #e5e7eb) !important;
+    }
+
+    /* Ensure the border is applied correctly */
+    ion-toolbar::part(native) {
+      border-bottom: 1px solid var(--color-border-default, #e5e7eb) !important;
+    }
+
+    ion-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      line-height: 22px;
+      letter-spacing: -0.4px;
+      color: var(--color-text-primary, #1a1a1a);
+    }
+
+    /* Make buttons pill-shaped - both start and end */
+    ion-buttons[slot='start'] ds-button {
+      --border-radius: 100px;
+    }
+
+    ion-buttons[slot='start'] ds-button::ng-deep button {
+      border-radius: 100px;
+    }
+
+    ion-buttons[slot='end'] ds-button {
+      --border-radius: 100px;
+    }
+
+    ion-buttons[slot='end'] ds-button::ng-deep button {
+      border-radius: 100px;
+    }
+  `]
+})
+export class DsMobileBottomSheetHeaderComponent {
+  /**
+   * Center title text
+   */
+  @Input() title!: string;
+
+  /**
+   * Left button label
+   * @default 'Tilbage'
+   */
+  @Input() leftButtonLabel: string = 'Tilbage';
+
+  /**
+   * Right button label
+   * @default 'Færdig'
+   */
+  @Input() rightButtonLabel: string = 'Færdig';
+
+  /**
+   * Disable right button
+   * @default false
+   */
+  @Input() rightButtonDisabled: boolean = false;
+
+  /**
+   * Emitted when left button is clicked
+   */
+  @Output() leftButtonClick = new EventEmitter<void>();
+
+  /**
+   * Emitted when right button is clicked
+   */
+  @Output() rightButtonClick = new EventEmitter<void>();
+}