@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/handbook-detail-modal/ds-mobile-handbook-detail-modal.ts

@@ -1,424 +0,0 @@
-import { Component, signal, Input, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ModalController } from '@ionic/angular/standalone';
-import { DsMobileHandbookFolderMiniComponent } from '../handbook-folder/ds-mobile-handbook-folder-mini';
-import { DsMobileCardInlineFileComponent } from '../card-inline-file';
-import { DsMobileCardInlineContactComponent } from '../card-inline-contact';
-import { DsMobileSwiperComponent } from '../swiper';
-import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
-import { DsMobileSectionComponent } from '../section';
-import { DsMobileActionsBottomSheetComponent, ActionGroup } from '../bottom-sheet/ds-mobile-actions-bottom-sheet';
-import { disableModalShadowPointerEvents } from '../bottom-sheet/modal-shadow-fix';
-
-/**
- * Handbook detail data interface
- *
- * Represents a handbook category/folder with its sections/items.
- * Use this interface to map your API response data to the component.
- *
- * @example
- * ```typescript
- * const handbookData: HandbookDetailData = {
- *   title: 'Access Systems',
- *   variant: 'blue',
- *   iconName: 'remixKey2Line',
- *   itemCount: 5,
- *   items: [...]
- * };
- * ```
- */
-export interface HandbookDetailData {
-  /** Category/folder title */
-  title: string;
-  /** Color variant: 'success', 'warning', 'destructive', 'blue', 'light-purple', 'pink', 'salmon-orange', 'orange', 'lime-green', 'grey' */
-  variant: string;
-  /** Optional custom hex color */
-  customColor?: string;
-  /** Icon name from design system (e.g., 'remixKey2Line', 'remixLightbulbLine') */
-  iconName: string;
-  /** Total number of items/sections in this category */
-  itemCount: number;
-  /** Array of handbook sections/items */
-  items?: HandbookItem[];
-}
-
-/**
- * Handbook section/item interface
- *
- * Represents a single section within a handbook category.
- * Each section can have a title, description, images, contacts, and attachments.
- *
- * @example
- * ```typescript
- * const item: HandbookItem = {
- *   title: 'Key Box Entrance',
- *   description: 'Key box located at main entrance...',
- *   images: ['https://api.example.com/images/keybox.jpg'],
- *   contacts: [{ name: 'Security Co', initials: 'S', phoneNumber: '+45 12345678' }],
- *   attachments: [{ name: 'Manual.pdf', type: 'pdf', url: 'https://...' }]
- * };
- * ```
- */
-export interface HandbookItem {
-  /** Section title */
-  title: string;
-  /** Optional section description */
-  description?: string;
-  /** Array of image URLs to display */
-  images?: string[];
-  /** Array of file attachments */
-  attachments?: AttachmentItem[];
-  /** Array of contact information */
-  contacts?: ContactItem[];
-}
-
-/**
- * File attachment interface
- *
- * Represents a file attachment in a handbook section.
- *
- * @example
- * ```typescript
- * const attachment: AttachmentItem = {
- *   name: 'Installation_Manual.pdf',
- *   type: 'pdf',
- *   url: 'https://api.example.com/files/manual.pdf'
- * };
- * ```
- */
-export interface AttachmentItem {
-  /** File name to display */
-  name: string;
-  /** File type: 'pdf', 'doc', etc. (used for icon display) */
-  type?: string;
-  /** Optional URL for downloading/opening the file */
-  url?: string;
-}
-
-/**
- * Contact information interface
- *
- * Represents contact information in a handbook section.
- *
- * @example
- * ```typescript
- * const contact: ContactItem = {
- *   name: 'Propbinder ApS',
- *   initials: 'P',
- *   contactPerson: 'John Doe',
- *   phoneNumber: '+45 12345678',
- *   email: 'support@propbinder.dk'
- * };
- * ```
- */
-export interface ContactItem {
-  /** Company or contact name */
-  name: string;
-  /** Initials for avatar (1-2 letters) */
-  initials: string;
-  /** Optional contact person name */
-  contactPerson?: string;
-  /** Optional phone number */
-  phoneNumber?: string;
-  /** Optional email address */
-  email?: string;
-}
-
-/**
- * DsMobileHandbookDetailModalComponent
- *
- * Modal wrapper for displaying handbook folder details.
- *
- * Features:
- * - Folder content display
- * - Items list with descriptions
- * - Images and attachments
- * - Contact information
- * - Native modal controls (close, swipe down)
- * - Safe area support
- *
- * This component is typically not used directly - use DsMobileHandbookDetailModalService instead.
- */
-@Component({
-  selector: 'ds-mobile-handbook-detail-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    DsMobileHandbookFolderMiniComponent,
-    DsMobileCardInlineFileComponent,
-    DsMobileCardInlineContactComponent,
-    DsMobileSwiperComponent,
-    DsMobileModalBaseComponent,
-    DsMobileSectionComponent,
-  ],
-  styleUrls: ['./ds-mobile-handbook-detail-modal.css'],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' emner'" closeButtonLabel="Luk">
-      <!-- Header Folder Icon -->
-      <ds-mobile-handbook-folder-mini header-leading [variant]="handbook().variant" [customColor]="handbook().customColor" [iconName]="handbook().iconName">
-      </ds-mobile-handbook-folder-mini>
-
-      <!-- Content (main content slot) -->
-      @if (handbook().items && handbook().items!.length > 0) {
-        @for (item of getDisplayItems(); track item.title + $index) {
-          <ds-mobile-section [headline]="item.title || ''" contentGap="20px">
-            @if (item.description) {
-              <div class="item-description" [innerHTML]="item.description"></div>
-            }
-
-            <!-- Images -->
-            @if (item.images && item.images.length > 0) {
-              <ds-mobile-swiper [slideWidth]="item.images.length === 1 ? '100%' : '85%'" [gap]="16">
-                @for (image of item.images; track image) {
-                  <div class="swiper-slide">
-                    <img [src]="image" [alt]="item.title" class="item-image" />
-                  </div>
-                }
-              </ds-mobile-swiper>
-            }
-
-            <!-- Contacts and Attachments (grouped) -->
-            @if ((item.contacts && item.contacts.length > 0) || (item.attachments && item.attachments.length > 0)) {
-              <div class="contacts-attachments-group">
-                @if (item.contacts && item.contacts.length > 0) {
-                  @for (contact of item.contacts; track contact.name) {
-                    <ds-mobile-card-inline-contact
-                      [name]="contact.name"
-                      [initials]="contact.initials"
-                      [contactPerson]="contact.contactPerson || ''"
-                      [phoneNumber]="contact.phoneNumber || ''"
-                      [clickable]="true"
-                      (contactClick)="handleContactClick(contact)"
-                    >
-                    </ds-mobile-card-inline-contact>
-                  }
-                }
-
-                @if (item.attachments && item.attachments.length > 0) {
-                  @for (attachment of item.attachments; track attachment.name) {
-                    <ds-mobile-card-inline-file
-                      [fileName]="attachment.name"
-                      [variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
-                      [fileUrl]="attachment.url"
-                      (fileClick)="handleAttachmentClick(attachment)"
-                    >
-                    </ds-mobile-card-inline-file>
-                  }
-                }
-              </div>
-            }
-          </ds-mobile-section>
-        }
-      } @else {
-        <!-- Empty State -->
-        <ds-mobile-section>
-          <div class="handbook-empty-state">
-            <img src="/Assets/Empty%20state-chat.png" alt="No items yet" class="empty-state-image" />
-            <h3 class="empty-state-title">No items yet</h3>
-            <p class="empty-state-description">This folder is empty</p>
-          </div>
-        </ds-mobile-section>
-      }
-    </ds-mobile-modal-base>
-  `,
-})
-export class DsMobileHandbookDetailModalComponent implements OnInit {
-  // Handbook data passed from service
-  @Input() handbookData!: HandbookDetailData;
-
-  /**
-   * Loading state - when true, shows loading indicator
-   */
-  @Input() loading: boolean = false;
-
-  /**
-   * Error state - when set, shows error message
-   */
-  @Input() error?: string;
-
-  // Signal for reactive handbook data
-  handbook = signal<HandbookDetailData>({
-    title: '',
-    variant: 'light-purple',
-    iconName: 'remixFolder3Line',
-    itemCount: 0,
-    items: [],
-  });
-
-  constructor(private modalController: ModalController) {}
-
-  ngOnInit(): void {
-    // Initialize handbook data from input
-    if (this.handbookData) {
-      this.handbook.set(this.handbookData);
-    }
-  }
-
-  /**
-   * Split handbook items to enforce content structure rules:
-   * - Never mix photos and documents (attachments) in the same section
-   * - Never mix contact persons and attachments together in the same section
-   *
-   * This method splits items that violate these rules into multiple display items.
-   * Each resulting item will have only compatible content types.
-   */
-  splitItemsByContentRules(item: HandbookItem): HandbookItem[] {
-    const displayItems: HandbookItem[] = [];
-
-    const hasImages = item.images && item.images.length > 0;
-    const hasContacts = item.contacts && item.contacts.length > 0;
-    const hasAttachments = item.attachments && item.attachments.length > 0;
-    const hasContent = hasContacts || hasAttachments;
-
-    // Case 1: Images AND other content -> Split Pictures from (Contacts + Attachments)
-    if (hasImages && hasContent) {
-      // Part 1: Images
-      displayItems.push({
-        title: item.title,
-        description: item.description,
-        images: item.images,
-      });
-
-      // Part 2: Contacts + Attachments
-      displayItems.push({
-        title: '', // No title for the continuation
-        description: undefined,
-        contacts: item.contacts,
-        attachments: item.attachments,
-      });
-
-      return displayItems;
-    }
-
-    // Case 2: No splitting needed (Images only, or No Images)
-    // This allows Contacts and Attachments to coexist in one item
-    return [item];
-  }
-
-  /**
-   * Get all display items with enforced content structure rules applied
-   */
-  getDisplayItems(): HandbookItem[] {
-    const items = this.handbook().items || [];
-    const displayItems: HandbookItem[] = [];
-
-    for (const item of items) {
-      const splitItems = this.splitItemsByContentRules(item);
-      displayItems.push(...splitItems);
-    }
-
-    return displayItems;
-  }
-
-  /**
-   * Handle contact click - shows bottom sheet with call and copy actions
-   */
-  async handleContactClick(contact: ContactItem): Promise<void> {
-    // Only show actions if there's a phone number
-    if (!contact.phoneNumber) {
-      return;
-    }
-
-    const actionGroups: ActionGroup[] = [
-      {
-        actions: [
-          {
-            action: 'call',
-            title: 'Ring',
-            icon: 'remixPhoneLine',
-          },
-          {
-            action: 'copy',
-            title: 'Kopier nummer',
-            icon: 'remixFileCopyLine',
-          },
-        ],
-      },
-    ];
-
-    const sheet = await this.modalController.create({
-      component: DsMobileActionsBottomSheetComponent,
-      componentProps: {
-        customActionGroups: actionGroups,
-      },
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
-      handle: true,
-      cssClass: ['ds-bottom-sheet', 'auto-height'],
-    });
-
-    await sheet.present();
-    disableModalShadowPointerEvents(sheet);
-
-    const result = await sheet.onWillDismiss();
-    if (result.data?.action) {
-      this.handleContactAction(result.data.action, contact);
-    }
-  }
-
-  /**
-   * Handle the selected contact action
-   */
-  private async handleContactAction(action: string, contact: ContactItem): Promise<void> {
-    switch (action) {
-      case 'call':
-        // Open phone dialer with the contact's phone number
-        if (contact.phoneNumber) {
-          window.location.href = `tel:${contact.phoneNumber}`;
-        }
-        break;
-
-      case 'copy':
-        // Copy phone number to clipboard
-        if (contact.phoneNumber) {
-          try {
-            // Try modern Clipboard API first
-            await navigator.clipboard.writeText(contact.phoneNumber);
-            console.log('Phone number copied to clipboard:', contact.phoneNumber);
-            // TODO: Show toast notification if you have a toast service
-          } catch (err) {
-            console.error('Failed to copy phone number:', err);
-            // Fallback: Try older execCommand method
-            this.fallbackCopyToClipboard(contact.phoneNumber);
-          }
-        }
-        break;
-    }
-  }
-
-  /**
-   * Fallback method for copying text to clipboard (for older browsers/webviews)
-   */
-  private fallbackCopyToClipboard(text: string): void {
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-999999px';
-    textArea.style.top = '-999999px';
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    try {
-      const successful = document.execCommand('copy');
-      if (successful) {
-        console.log('Phone number copied to clipboard (fallback):', text);
-      } else {
-        console.error('Fallback copy failed');
-      }
-    } catch (err) {
-      console.error('Fallback copy error:', err);
-    }
-
-    document.body.removeChild(textArea);
-  }
-
-  /**
-   * Handle attachment click
-   */
-  handleAttachmentClick(attachment: AttachmentItem): void {
-    console.log('Attachment clicked:', attachment);
-    // Attachment action is now handled by DsMobileCardInlineFileComponent via fileUrl input
-  }
-}

package/src/components/handbook-detail-modal/index.ts

@@ -1,3 +0,0 @@
-export * from './ds-mobile-handbook-detail-modal';
-export * from './ds-mobile-handbook-detail-modal.service';
-

package/src/components/handbook-folder/ds-mobile-handbook-folder-mini.ts

@@ -1,175 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-
-/**
- * DsMobileHandbookFolderMiniComponent
- *
- * A minimized folder icon component for use in headers and small spaces.
- * Simplified version without animations or page sheets - just folder and icon.
- *
- * @example
- * ```html
- * <ds-mobile-handbook-folder-mini
- *   [variant]="'pink'"
- *   [iconName]="'remixLightbulbLine'">
- * </ds-mobile-handbook-folder-mini>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-handbook-folder-mini',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent],
-  styles: [
-    `
-      :host {
-        display: inline-block;
-        width: 32px;
-        height: 32px;
-        flex-shrink: 0;
-
-        /* Native support for extended API colors */
-        --color-red-base: #dc3545;
-        --color-red-strong: #ae1d3b;
-        --color-green-base: #28a745;
-        --color-green-strong: #058057;
-        --color-yellow-base: #ffc107;
-        --color-yellow-strong: #e4b200;
-        --color-purple-base: #6f42c1;
-        --color-purple-strong: #4204c5;
-        --color-indigo-base: #6610f2;
-        --color-indigo-strong: #a527a2;
-        --color-lime-base: #82c91e;
-        --color-lime-strong: #58a503;
-        --color-teal-base: #20c997;
-        --color-teal-strong: #0ca678;
-        --color-cyan-base: #17a2b8;
-        --color-cyan-strong: #1098ad;
-        --color-brown-base: #795548;
-        --color-brown-strong: #5c4033;
-        --color-light-blue-base: #add8e6;
-        --color-light-blue-strong: #87ceeb;
-        --color-light-green-base: #90ee90;
-        --color-light-green-strong: #32cd32;
-        --color-coral-base: #f08080;
-        --color-coral-strong: #cd5c5c;
-        --color-salmon-base: #ffa07a;
-        --color-salmon-strong: #fa8072;
-        --color-seagreen-base: #20b2aa;
-        --color-seagreen-strong: #2e8b57;
-      }
-
-      .mini-folder-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .mini-folder-tab {
-        width: 50%;
-        height: auto;
-        display: block;
-      }
-
-      .mini-folder-back {
-        height: 28px;
-        border-radius: 0px 4px 4px 4px;
-        position: relative;
-        margin-top: -1px;
-      }
-
-      .mini-folder-front {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 24px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-        box-shadow:
-          inset 0 8px 8px rgba(255, 255, 255, 0.2),
-          inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3);
-      }
-    `,
-  ],
-  template: `
-    <div class="mini-folder-container">
-      <!-- Folder Tab SVG -->
-      <svg class="mini-folder-tab" width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z"
-          [attr.fill]="customColor || getColorVar('strong')"
-        />
-      </svg>
-
-      <!-- Folder Back -->
-      <div class="mini-folder-back" [style.background-color]="customColor || getColorVar('strong')">
-        <!-- Folder Front -->
-        <div class="mini-folder-front" [style.background-color]="customColor || getColorVar('base')">
-          <ds-icon [name]="iconName" [size]="'14px'" [style.color]="'white'" />
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class DsMobileHandbookFolderMiniComponent {
-  /**
-   * Color variant for the folder
-   * Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
-   */
-  @Input() variant: string = 'light-purple';
-
-  /**
-   * Optional custom hex color for the folder.
-   * If provided, overrides the variant color.
-   */
-  @Input() customColor?: string;
-
-  /**
-   * Icon name from the design system icon library
-   */
-  @Input() iconName: string = 'remixFolder3Line';
-
-  /**
-   * Get the CSS variable name for the color variant
-   */
-  getColorVar(suffix: 'base' | 'strong'): string {
-    const variantMap: Record<string, string> = {
-      // Core design system variants
-      success: 'success',
-      warning: 'warning',
-      destructive: 'destructive',
-      blue: 'blue',
-      'light-purple': 'light-purple',
-      pink: 'pink',
-      'salmon-orange': 'salmon-orange',
-      orange: 'orange',
-      'lime-green': 'lime-green',
-      grey: 'grey',
-
-      // Extended API colors mapping to their native exact counterparts now
-      red: 'red',
-      green: 'green',
-      yellow: 'yellow',
-      purple: 'purple',
-      indigo: 'indigo',
-      lime: 'lime',
-      teal: 'teal',
-      cyan: 'cyan',
-      brown: 'brown',
-      'light-blue': 'light-blue',
-      'light-green': 'light-green',
-      coral: 'coral',
-      salmon: 'salmon',
-      seagreen: 'seagreen',
-    };
-
-    const colorName = variantMap[this.variant] || 'light-purple';
-    return `var(--color-${colorName}-${suffix})`;
-  }
-}