@propbinder/mobile-design 0.2.47 → 0.2.50

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

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

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

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