@propbinder/mobile-design 0.0.1 → 0.0.2

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

@@ -0,0 +1,514 @@
+import {
+  Component,
+  signal,
+  Input,
+  CUSTOM_ELEMENTS_SCHEMA
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  IonContent,
+  ModalController
+} from '@ionic/angular/standalone';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { DsMobileHandbookFolderMiniComponent } from '../handbook-folder/ds-mobile-handbook-folder-mini';
+import { DsMobileFileAttachmentComponent } from '../file-attachment';
+import { DsMobileContactListItemComponent } from '../contact-list-item';
+import { DsMobileSwiperComponent } from '../swiper';
+
+/**
+ * Handbook detail data interface
+ */
+export interface HandbookDetailData {
+  title: string;
+  variant: string;
+  iconName: string;
+  itemCount: number;
+  items?: HandbookItem[];
+}
+
+export interface HandbookItem {
+  title: string;
+  description?: string;
+  images?: string[];
+  attachments?: AttachmentItem[];
+  contacts?: ContactItem[];
+}
+
+export interface AttachmentItem {
+  name: string;
+  type?: string;
+}
+
+export interface ContactItem {
+  name: string;
+  initials: string;
+  contactPerson?: string;
+  phoneNumber?: 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,
+    IonContent,
+    DsIconButtonComponent,
+    DsMobileHandbookFolderMiniComponent,
+    DsMobileFileAttachmentComponent,
+    DsMobileContactListItemComponent,
+    DsMobileSwiperComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ion-content [fullscreen]="true" [scrollY]="true" class="handbook-modal-content">
+      <div class="handbook-modal-wrapper">
+        <!-- Header -->
+        <div class="handbook-modal-header">
+          <div class="header-content">
+            <!-- Handbook folder info -->
+            <div class="handbook-folder-info">
+              <ds-mobile-handbook-folder-mini
+                [variant]="handbook().variant"
+                [iconName]="handbook().iconName">
+              </ds-mobile-handbook-folder-mini>
+              <div class="folder-details">
+                <div class="folder-name">{{ handbook().title }}</div>
+                <div class="folder-meta">
+                  <span>{{ handbook().itemCount }} emner</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Close button -->
+            <ds-icon-button
+              icon="remixCloseLine"
+              variant="secondary"
+              size="lg"
+              (click)="close()"
+              class="close-button"
+              aria-label="Luk">
+            </ds-icon-button>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="handbook-detail-container">
+          @if (handbook().items && handbook().items!.length > 0) {
+            @for (item of getDisplayItems(); track item.title + $index; let isLast = $last) {
+              <div class="handbook-item" [class.last-item]="isLast">
+                <div class="item-text-group">
+                <h2 class="item-title">{{ item.title }}</h2>
+                
+                @if (item.description) {
+                  <p class="item-description">{{ item.description }}</p>
+                }
+                </div>
+                
+                <!-- Images -->
+                @if (item.images && item.images.length > 0) {
+                  <ds-mobile-swiper [slideWidth]="item.images.length === 1 ? '100%' : '60vw'" [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 -->
+                @if (item.contacts && item.contacts.length > 0) {
+                  <div class="contacts-list">
+                    @for (contact of item.contacts; track contact.name) {
+                      <ds-mobile-contact-list-item
+                        [name]="contact.name"
+                        [initials]="contact.initials"
+                        [contactPerson]="contact.contactPerson || ''"
+                        [phoneNumber]="contact.phoneNumber || ''"
+                        [clickable]="true"
+                        (contactClick)="handleContactClick(contact)">
+                      </ds-mobile-contact-list-item>
+                    }
+                  </div>
+                }
+                
+                <!-- Attachments -->
+                @if (item.attachments && item.attachments.length > 0) {
+                  <div class="attachments-list">
+                    @for (attachment of item.attachments; track attachment.name) {
+                      <ds-mobile-file-attachment
+                        [fileName]="attachment.name"
+                        [variant]="attachment.type === 'pdf' ? 'pdf' : 'doc'"
+                        (fileClick)="handleAttachmentClick(attachment)">
+                      </ds-mobile-file-attachment>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          } @else {
+            <!-- Empty State -->
+            <div class="handbook-empty-state">
+              <img 
+                src="/Assets/Empty state-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>
+          }
+        </div>
+      </div>
+    </ion-content>
+  `,
+  styles: [`
+    .handbook-modal-content {
+      --background: var(--color-background-neutral-primary, #ffffff);
+    }
+
+    .handbook-modal-wrapper {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      min-height: 100dvh;
+      background: var(--color-background-neutral-primary, #ffffff);
+    }
+
+    .handbook-modal-header {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background: var(--color-background-neutral-primary, #ffffff);
+      border-bottom: 1px solid var(--border-color-default);
+      padding: 0 16px;
+    }
+
+    .header-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      min-height: 72px;
+    }
+
+    .handbook-folder-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .folder-details {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+    }
+
+    .folder-name {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--color-text-primary, #1a1a1a);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .folder-meta {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -0.26px;
+      color: var(--color-text-tertiary, #737373);
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .close-button {
+      flex-shrink: 0;
+      border-radius: 50%;
+    }
+    
+    .close-button::ng-deep button {
+      border-radius: 50% !important;
+      width: 36px !important;
+      height: 36px !important;
+      min-width: 36px !important;
+      min-height: 36px !important;
+      padding: 0 !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+    }
+
+    .handbook-detail-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 640px;
+      margin: 0 auto;
+      flex: 1;
+    }
+    
+    .handbook-item {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 24px 20px 24px 20px;
+      border-bottom: 1px solid var(--border-color-default);
+    }
+    
+    .handbook-item.last-item {
+      border-bottom: none;
+    }
+
+    .item-text-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .item-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      color: var(--color-text-primary, #1a1a1a);
+      margin: 0;
+    }
+
+    .item-description {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      line-height: 20px;
+      color: var(--color-text-primary, #1a1a1a);
+      margin: 0;
+    }
+
+    .item-image {
+      width: 100%;
+      height: 280px;
+      object-fit: cover;
+      border-radius: 12px;
+      display: block;
+    }
+
+    .contacts-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    
+    .contacts-list ds-mobile-contact-list-item:not(:last-child) {
+      position: relative;
+      padding-bottom: 8px;
+    }
+    
+    .contacts-list ds-mobile-contact-list-item:not(:first-child) {
+      padding-top: 8px;
+    }
+    
+    .contacts-list ds-mobile-contact-list-item:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 44px;
+      right: 0;
+      height: 1px;
+      background: var(--border-color-default);
+    }
+    
+  
+    .attachments-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    
+
+    /* Empty State */
+    .handbook-empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      text-align: center;
+    }
+    
+    .empty-state-image {
+      width: 96px;
+      height: 96px;
+    }
+    
+    .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);
+    }
+    
+    .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);
+    }
+
+    /* Safe area support */
+    @supports (padding: env(safe-area-inset-bottom)) {
+      .handbook-detail-container {
+        padding-bottom: calc(20px + env(safe-area-inset-bottom));
+      }
+    }
+  `]
+})
+export class DsMobileHandbookDetailModalComponent {
+  // Handbook data passed from service
+  @Input() handbookData!: HandbookDetailData;
+  
+  // 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;
+    
+    // Case 1: Only one type of content - keep as is
+    const contentTypeCount = [hasImages, hasContacts, hasAttachments].filter(Boolean).length;
+    if (contentTypeCount <= 1) {
+      return [item];
+    }
+    
+    // Case 2: Has images + contacts (allowed together) but no attachments
+    if (hasImages && hasContacts && !hasAttachments) {
+      return [item];
+    }
+    
+    // Case 3: Violates rules - need to split
+    
+    // First item: Text + Images (if present)
+    if (hasImages) {
+      displayItems.push({
+        title: item.title,
+        description: item.description,
+        images: item.images
+      });
+    }
+    
+    // Second item: Text + Contacts (if present and no images shown yet)
+    if (hasContacts) {
+      displayItems.push({
+        title: item.title,
+        description: hasImages ? undefined : item.description, // Only show description if not shown before
+        contacts: item.contacts
+      });
+    }
+    
+    // Third item: Text + Attachments (if present)
+    if (hasAttachments) {
+      displayItems.push({
+        title: item.title,
+        description: (!hasImages && !hasContacts) ? item.description : undefined, // Only show description if not shown before
+        attachments: item.attachments
+      });
+    }
+    
+    return displayItems;
+  }
+  
+  /**
+   * 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;
+  }
+
+  /**
+   * Close the modal
+   */
+  close(): void {
+    this.modalController.dismiss();
+  }
+  
+  /**
+   * Handle contact click
+   */
+  handleContactClick(contact: ContactItem): void {
+    console.log('Contact clicked:', contact);
+    // Implement contact action (e.g., show contact details, call, etc.)
+  }
+  
+  /**
+   * Handle attachment click
+   */
+  handleAttachmentClick(attachment: AttachmentItem): void {
+    console.log('Attachment clicked:', attachment);
+    // Implement attachment action (e.g., open file viewer, download, etc.)
+  }
+}
+

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,130 @@
+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;
+    }
+    
+    .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]="getColorVar('strong')"/>
+      </svg>
+      
+      <!-- Folder Back -->
+      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
+        <!-- Folder Front -->
+        <div 
+          class="mini-folder-front" 
+          [style.background-color]="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';
+  
+  /**
+   * 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> = {
+      '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'
+    };
+    
+    const colorName = variantMap[this.variant] || 'light-purple';
+    return `var(--color-${colorName}-${suffix})`;
+  }
+}
+