@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/empty-state/ds-mobile-empty-state.ts

@@ -0,0 +1,120 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * DsMobileEmptyStateComponent
+ *
+ * Reusable empty state component for displaying when there's no content.
+ * Used in chat modals, comment sections, and other list-based views.
+ *
+ * Features:
+ * - Optional image display
+ * - Customizable title and description
+ * - Consistent styling across the app
+ * - Flexible image sizing
+ *
+ * @example
+ * ```html
+ * <!-- With image -->
+ * <ds-mobile-empty-state
+ *   [imageSrc]="'/Assets/empty-state-inquiry.svg'"
+ *   [imageAlt]="'No messages'"
+ *   [title]="'Ingen beskeder endnu'"
+ *   [description]="'Start samtalen ved at sende en besked'">
+ * </ds-mobile-empty-state>
+ *
+ * <!-- Without image -->
+ * <ds-mobile-empty-state
+ *   [title]="'Ingen resultater'"
+ *   [description]="'Prøv at justere dine søgekriterier'">
+ * </ds-mobile-empty-state>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-empty-state',
+  standalone: true,
+  imports: [CommonModule],
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      text-align: center;
+      gap: 24px;
+    }
+
+    .empty-state-image {
+      width: 96px;
+      height: 96px;
+      margin: 0 auto;
+    }
+
+    .empty-state-text {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .empty-state-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--color-text-primary, #1a1a1a);
+      margin: 0;
+    }
+
+    .empty-state-description {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 1.4;
+      color: var(--color-text-secondary, #737373);
+      margin: 0;
+    }
+  `],
+  template: `
+    <div class="empty-state">
+      @if (imageSrc()) {
+        <img 
+          [src]="imageSrc()" 
+          [alt]="imageAlt()" 
+          class="empty-state-image" />
+      }
+      <div class="empty-state-text">
+        <h3 class="empty-state-title">{{ title() }}</h3>
+        @if (description()) {
+          <p class="empty-state-description">{{ description() }}</p>
+        }
+      </div>
+    </div>
+  `
+})
+export class DsMobileEmptyStateComponent {
+  /**
+   * Source URL for the empty state image (optional)
+   */
+  imageSrc = input<string>('');
+
+  /**
+   * Alt text for the image
+   */
+  imageAlt = input<string>('Empty state');
+
+  /**
+   * Title text for the empty state
+   */
+  title = input.required<string>();
+
+  /**
+   * Description text for the empty state (optional)
+   */
+  description = input<string>('');
+}
+

package/src/components/empty-state/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-empty-state';
+

package/src/components/fab/ds-mobile-fab.ts

@@ -0,0 +1,315 @@
+import { Component, input, output, ElementRef, OnInit, OnDestroy, AfterViewInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { Platform } from '@ionic/angular/standalone';
+
+/**
+ * DsMobileFabComponent
+ * 
+ * Floating Action Button component for mobile interfaces.
+ * A prominent circular button that floats above the content.
+ * 
+ * Features:
+ * - Configurable positioning (bottom-right, bottom-left, bottom-center)
+ * - Uses design system theming variables
+ * - Dynamically calculates position above tab bar (including safe areas)
+ * - Maintains consistent 20px gap from tab bar
+ * - Handles iOS safe areas
+ * - Accessible with ARIA labels
+ * - Smooth entrance animation
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-fab
+ *   icon="remixAddLine"
+ *   [position]="'bottom-right'"
+ *   (fabClick)="handleAddClick()"
+ *   ariaLabel="Add new inquiry">
+ * </ds-mobile-fab>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-fab',
+  standalone: true,
+  imports: [CommonModule, DsIconButtonComponent],
+  host: {
+    '[class.fab-bottom-right]': 'position() === "bottom-right"',
+    '[class.fab-bottom-left]': 'position() === "bottom-left"',
+    '[class.fab-bottom-center]': 'position() === "bottom-center"'
+  },
+  template: `
+    <div class="fab-container">
+      <ds-icon-button
+        [icon]="icon()"
+        variant="primary"
+        [size]="size()"
+        [ariaLabel]="ariaLabel()"
+        [disabled]="disabled()"
+        (clicked)="handleClick()"
+        class="fab-button">
+      </ds-icon-button>
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      position: fixed;
+      z-index: 1000;
+      pointer-events: none;
+    }
+
+    .fab-container {
+      position: relative;
+      pointer-events: none;
+      animation: fabEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+
+    @keyframes fabEnter {
+      from {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    /* Position variants - now applied to :host */
+    
+    /* MOBILE: Use dynamically calculated position based on actual tab bar height */
+    /* The JavaScript calculates the actual tab bar height (including padding) and sets --fab-calculated-bottom */
+    /* Fallback to 84px (64px base + 20px gap) if calculation hasn't run yet */
+    :host(.fab-bottom-right) {
+      bottom: var(--fab-calculated-bottom, 84px);
+      right: 20px;
+    }
+
+    :host(.fab-bottom-left) {
+      bottom: var(--fab-calculated-bottom, 84px);
+      left: 20px;
+    }
+
+    :host(.fab-bottom-center) {
+      bottom: var(--fab-calculated-bottom, 84px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Horizontal safe area support (all platforms) */
+    @supports (padding-right: env(safe-area-inset-right)) {
+      :host(.fab-bottom-right) {
+        right: calc(20px + env(safe-area-inset-right));
+      }
+    }
+
+    @supports (padding-left: env(safe-area-inset-left)) {
+      :host(.fab-bottom-left) {
+        left: calc(20px + env(safe-area-inset-left));
+      }
+    }
+
+    /* DESKTOP: Larger spacing for desktop screens */
+    @media (min-width: 768px) {
+      :host-context(.plt-desktop).fab-bottom-right {
+        bottom: 40px;
+        right: 40px;
+      }
+
+      :host-context(.plt-desktop).fab-bottom-left {
+        bottom: 40px;
+        left: 40px;
+      }
+
+      :host-context(.plt-desktop).fab-bottom-center {
+        bottom: 40px;
+      }
+      
+      @supports (padding-right: env(safe-area-inset-right)) {
+        :host-context(.plt-desktop).fab-bottom-right {
+          right: calc(40px + env(safe-area-inset-right));
+        }
+      }
+
+      @supports (padding-left: env(safe-area-inset-left)) {
+        :host-context(.plt-desktop).fab-bottom-left {
+          left: calc(40px + env(safe-area-inset-left));
+        }
+      }
+    }
+
+    /* FAB Button Styling */
+    .fab-button {
+      pointer-events: auto;
+      display: block;
+    }
+
+    /* Override icon button to be circular and use brand colors */
+    .fab-button::ng-deep button {
+      width: 56px !important;
+      height: 56px !important;
+      min-width: 56px !important;
+      min-height: 56px !important;
+      border-radius: 50% !important;
+      padding: 0 !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      
+      /* Use whitelabel theming variables */
+      background: var(--color-accent) !important;
+      color: var(--color-on-accent) !important;
+      border: none !important;
+      
+      /* Elevation shadow for prominence */
+      box-shadow: 
+        0 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0 6px 10px 0 rgba(0, 0, 0, 0.14),
+        0 1px 18px 0 rgba(0, 0, 0, 0.12);
+      
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Hover state */
+    .fab-button::ng-deep button:hover:not(:disabled) {
+      background: var(--color-accent-hover) !important;
+      box-shadow: 
+        0 5px 7px -2px rgba(0, 0, 0, 0.2),
+        0 8px 14px 0 rgba(0, 0, 0, 0.14),
+        0 2px 22px 0 rgba(0, 0, 0, 0.12);
+      transform: scale(1.05);
+    }
+
+    /* Active state */
+    .fab-button::ng-deep button:active:not(:disabled) {
+      background: var(--color-accent-active) !important;
+      box-shadow: 
+        0 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0 4px 8px 0 rgba(0, 0, 0, 0.14),
+        0 1px 14px 0 rgba(0, 0, 0, 0.12);
+      transform: scale(0.95);
+    }
+
+    /* Disabled state */
+    .fab-button::ng-deep button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      box-shadow: 
+        0 2px 4px -1px rgba(0, 0, 0, 0.1),
+        0 4px 8px 0 rgba(0, 0, 0, 0.08),
+        0 1px 14px 0 rgba(0, 0, 0, 0.06);
+    }
+
+    /* Icon styling */
+    .fab-button::ng-deep button .btn__icon,
+    .fab-button::ng-deep button .btn__icon svg {
+      color: var(--color-on-accent) !important;
+      fill: var(--color-on-accent) !important;
+    }
+
+    /* Ensure icon is centered and sized properly */
+    .fab-button::ng-deep button .btn__icon {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex-shrink: 0 !important;
+    }
+
+    .fab-button::ng-deep button .btn__icon svg {
+      width: 24px !important;
+      height: 24px !important;
+    }
+  `]
+})
+export class DsMobileFabComponent implements AfterViewInit, OnDestroy {
+  private elementRef = inject(ElementRef);
+  private platform = inject(Platform);
+  private resizeObserver?: ResizeObserver;
+  
+  /**
+   * Icon name from the design system icon library
+   * @default 'remixAddLine'
+   */
+  icon = input<string>('remixAddLine');
+
+  /**
+   * Position of the FAB on the screen
+   * @default 'bottom-right'
+   */
+  position = input<'bottom-right' | 'bottom-left' | 'bottom-center'>('bottom-right');
+
+  /**
+   * Size of the FAB button
+   * Note: FAB is always 56px circular, but this affects the icon size
+   * @default 'md'
+   */
+  size = input<'sm' | 'md' | 'lg'>('md');
+
+  /**
+   * ARIA label for accessibility
+   * @required - Always provide a descriptive label
+   */
+  ariaLabel = input.required<string>();
+
+  /**
+   * Whether the FAB is disabled
+   * @default false
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Emitted when the FAB is clicked
+   */
+  clicked = output<void>();
+
+  ngAfterViewInit(): void {
+    // Only calculate position on mobile (not desktop)
+    if (!this.platform.is('desktop')) {
+      this.calculatePosition();
+      this.setupResizeObserver();
+    }
+  }
+
+  /**
+   * Calculate the FAB position dynamically based on actual tab bar height
+   */
+  private calculatePosition(): void {
+    const tabBar = document.querySelector('ion-tab-bar[slot="bottom"]');
+    if (tabBar) {
+      const rect = tabBar.getBoundingClientRect();
+      const actualHeight = rect.height;
+      const gap = 20;
+      const bottom = actualHeight + gap;
+      
+      const host = this.elementRef.nativeElement as HTMLElement;
+      host.style.setProperty('--fab-calculated-bottom', `${bottom}px`);
+    }
+  }
+
+  /**
+   * Setup ResizeObserver to recalculate position when tab bar size changes
+   * (e.g., when device rotates or safe area changes)
+   */
+  private setupResizeObserver(): void {
+    const tabBar = document.querySelector('ion-tab-bar[slot="bottom"]');
+    if (tabBar && 'ResizeObserver' in window) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.calculatePosition();
+      });
+      this.resizeObserver.observe(tabBar);
+    }
+  }
+
+  /**
+   * Handle button click
+   */
+  handleClick(): void {
+    if (!this.disabled()) {
+      this.clicked.emit();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+}

package/src/components/fab/index.ts

@@ -0,0 +1 @@
+export { DsMobileFabComponent } from './ds-mobile-fab';

package/src/components/facility-creation-modal/ds-mobile-facility-creation-confirmation-wrapper.ts

@@ -0,0 +1,121 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsMobileConfirmationSheetComponent } from '../bottom-sheet/ds-mobile-confirmation-sheet';
+import { DsIconComponent } from '@propbinder/design-system';
+import { NewFacilityData } from './ds-mobile-facility-creation-modal';
+
+/**
+ * DsMobileFacilityCreationConfirmationWrapperComponent
+ * 
+ * Wrapper component that uses the generic confirmation sheet
+ * specifically for facility creation confirmations.
+ * 
+ * This component displays a summary of the created facility.
+ */
+@Component({
+  selector: 'ds-mobile-facility-creation-confirmation-wrapper',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DsMobileConfirmationSheetComponent,
+    DsIconComponent
+  ],
+  template: `
+    <ds-mobile-confirmation-sheet
+      [title]="'Facilitet oprettet'"
+      [message]="'Din nye facilitet er nu oprettet og klar til booking.'"
+      [buttonText]="'Luk'"
+      [illustrationVariant]="'confirmation'">
+      <ng-template #summary>
+        <div class="facility-summary">
+          <div class="summary-item">
+            <div class="summary-details">
+              <h3 class="summary-title">{{ facilityData.title }}</h3>
+              <p class="summary-description">{{ facilityData.description }}</p>
+              
+              <div class="summary-info-list">
+                <div class="info-row">
+                  <ds-icon name="remixGroupLine" size="16px" color="tertiary" />
+                  <span class="info-label">{{ facilityData.whoCanBook }}</span>
+                </div>
+                <div class="info-row">
+                  <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                  <span class="info-label">{{ facilityData.whenCanBook }}</span>
+                </div>
+                <div class="info-row">
+                  <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                  <span class="info-label">{{ facilityData.price }}</span>
+                </div>
+                <div class="info-row">
+                  <ds-icon name="remixKeyLine" size="16px" color="tertiary" />
+                  <span class="info-label">{{ facilityData.accessRequirements }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </ds-mobile-confirmation-sheet>
+  `,
+  styles: [`
+    .facility-summary {
+      width: 100%;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 16px;
+      padding: 16px;
+    }
+
+    .summary-item {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .summary-details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .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-description {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      font-weight: 400;
+      line-height: 1.5;
+      color: var(--text-color-default-secondary, #545b66);
+      margin: 0;
+    }
+
+    .summary-info-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 4px;
+    }
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .info-label {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm, 14px);
+      font-weight: 400;
+      color: var(--text-color-default-secondary, #545b66);
+    }
+  `]
+})
+export class DsMobileFacilityCreationConfirmationWrapperComponent {
+  @Input() facilityData!: NewFacilityData;
+}