@propbinder/mobile-design 0.2.50 → 0.2.52

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

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

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

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

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

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

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

@@ -1,121 +0,0 @@
-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;
-}