@propbinder/mobile-design 0.0.2 → 0.0.21

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

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

@@ -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,130 +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;
-    }
-    
-    .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})`;
-  }
-}
-