@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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

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

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