@propbinder/mobile-design 0.0.2 → 0.0.22

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

@@ -1,444 +0,0 @@
-import { Component, Input, signal, HostListener } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsMobileHandbookDetailModalService, HandbookDetailData, HandbookItem } from '../handbook-detail-modal';
-
-/**
- * DsMobileHandbookFolderComponent
- * 
- * A visually rich folder component for displaying handbook categories or sections.
- * Features a two-layer folder design with customizable colors, icon, item count, and label.
- * 
- * Design Details:
- * - Folder back: 72px height with a decorative notch
- * - Folder front: 64px height overlaying the back
- * - Item count displayed in bottom-left corner
- * - Icon displayed in bottom-right corner
- * - Label text centered below the folder
- * 
- * @example
- * ```html
- * <ds-mobile-handbook-folder
- *   [colorBase]="'#d244cf'"
- *   [colorWeak]="'#f9e6f9'"
- *   [iconName]="'remixLightbulbLine'"
- *   [itemCount]="8"
- *   [label]="'Utilities'">
- * </ds-mobile-handbook-folder>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-handbook-folder',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent],
-  styles: [`
-    :host {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 16px;
-      cursor: pointer;
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      padding: 16px;
-      border-radius: 16px;
-      background: var(--color-background-neutral-secondary, #f0f0f0);
-      transition: background 0.2s ease;
-    }
-    
-    :host:active {
-      background: var(--color-background-neutral-secondary-hover, #ebebeb);
-    }
-    
-    @media (hover: hover) {
-      :host:hover {
-        background: var(--color-background-neutral-secondary-hover, #ebebeb);
-      }
-    }
-    
-    .folder-container {
-      position: relative;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      perspective: 800px;
-      -webkit-perspective: 800px;
-      max-width: 160px;
-      /* Safari optimization: Ensure proper 3D rendering context */
-      transform-style: preserve-3d;
-      -webkit-transform-style: preserve-3d;
-    }
-    
-    .folder-container.open .page-sheet {
-      -webkit-transform: translateY(-8px);
-      transform: translateY(-8px);
-      transition-delay: 0.2s;
-    }
-    
-    .folder-container.open .page-sheet:nth-child(1) {
-      -webkit-transform: scale(1) translateY(-8px) rotateX(-45deg) translateZ(0.1px);
-      transform: scale(1) translateY(-8px) rotateX(-45deg) translateZ(0.1px);
-    }
-    
-    .folder-container.open .page-sheet:nth-child(2) {
-      -webkit-transform: scale(0.98) translateY(-12px) rotateX(-36deg) translateZ(0.1px);
-      transform: scale(0.98) translateY(-12px) rotateX(-36deg) translateZ(0.1px);
-    }
-    
-    .folder-container.open .page-sheet:nth-child(3) {
-      -webkit-transform: scale(0.96) translateY(-16px) rotateX(-27deg) translateZ(0.1px);
-      transform: scale(0.96) translateY(-16px) rotateX(-27deg) translateZ(0.1px);
-    }
-    
-    .folder-container.open .page-sheet:nth-child(4) {
-      -webkit-transform: scale(0.94) translateY(-20px) rotateX(-18deg) translateZ(0.1px);
-      transform: scale(0.94) translateY(-20px) rotateX(-18deg) translateZ(0.1px);
-    }
-    
-    .folder-container.open .page-sheet:nth-child(5) {
-      -webkit-transform: scale(0.92) translateY(-24px) rotateX(-9deg) translateZ(0.1px);
-      transform: scale(0.92) translateY(-24px) rotateX(-9deg) translateZ(0.1px);
-    }
-    
-    .folder-container.open .page-sheet:nth-child(6) {
-      -webkit-transform: scale(0.90) translateY(-28px) rotateX(0deg) translateZ(0.1px);
-      transform: scale(0.90) translateY(-28px) rotateX(0.1px);
-    }
-    
-    .folder-container.open .folder-front {
-      -webkit-transform: translate3d(0, 0, 0) rotateX(-45deg);
-      transform: translate3d(0, 0, 0) rotateX(-45deg);
-    }
-    
-    .folder-tab {
-      width: 50%;
-      height: auto;
-      display: block;
-    }
-    
-    .folder-back {
-      height: 128px;
-      border-radius: 0px 12px 12px 12px;
-      position: relative;
-      margin-top: -1px;
-      transform-style: preserve-3d;
-      -webkit-transform-style: preserve-3d;
-      backface-visibility: hidden;
-      -webkit-backface-visibility: hidden;
-      /* Safari optimization: Force GPU acceleration */
-      -webkit-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-    
-    .page-sheet {
-      position: absolute;
-      width: 80%;
-      height: 120px;
-      background: #ffffff;
-      border-radius: 8px;
-      box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
-      border: 1px solid var(--border-color-default);
-      transition: transform 0.3s ease-out;
-      -webkit-transition: -webkit-transform 0.3s ease-out;
-      left: 10%;
-      /* Safari optimization: Force hardware acceleration and proper 3D rendering */
-      -webkit-transform: translateZ(0);
-      transform: translateZ(0);
-      transform-style: preserve-3d;
-      -webkit-transform-style: preserve-3d;
-      backface-visibility: hidden;
-      -webkit-backface-visibility: hidden;
-      /* Safari optimization: Prevent subpixel rendering issues */
-      -webkit-font-smoothing: antialiased;
-      /* Safari optimization: Ensure proper layer creation */
-      will-change: transform;
-    }
-    
-    .page-sheet:nth-child(1) {
-      bottom: 2px;
-      z-index: 6;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      -webkit-transform: scale(1) translateZ(0.1px);
-      transform: scale(1) translateZ(0.1px);
-    }
-    
-    .page-sheet:nth-child(2) {
-      bottom: 8px;
-      z-index: 5;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      -webkit-transform: scale(0.98) translateZ(0.1px);
-      transform: scale(0.98) translateZ(0.1px);
-    }
-    
-    .page-sheet:nth-child(3) {
-      bottom: 14px;
-      z-index: 4;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      -webkit-transform: scale(0.96) translateZ(0.1px);
-      transform: scale(0.96) translateZ(0.1px);
-    }
-    
-    .page-sheet:nth-child(4) {
-      bottom: 20px;
-      z-index: 3;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      -webkit-transform: scale(0.94) translateZ(0.1px);
-      transform: scale(0.94) translateZ(0.1px);
-    }
-    
-    .page-sheet:nth-child(5) {
-      bottom: 26px;
-      z-index: 2;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      -webkit-transform: scale(0.92) translateZ(0.1px);
-      transform: scale(0.92) translateZ(0.1px);
-    }
-    
-    .page-sheet:nth-child(6) {
-      bottom: 32px;
-      z-index: 1;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      -webkit-transform: scale(0.90) translateZ(0.1px);
-      transform: scale(0.90) translateZ(0.1px);
-    }
-    
-    .folder-front {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 116px;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 8px;
-      z-index: 2;
-      transform-origin: bottom center;
-      -webkit-transform-origin: bottom center;
-      transform-style: preserve-3d;
-      -webkit-transform-style: preserve-3d;
-      transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
-      -webkit-transition: -webkit-transform 0.4s ease-in-out;
-      will-change: transform;
-      backface-visibility: hidden;
-      -webkit-backface-visibility: hidden;
-      -webkit-font-smoothing: antialiased;
-      /* Safari optimization: Use more specific transform to avoid render glitches */
-      -webkit-transform: rotateX(-20deg) translateZ(0.1px);
-      transform: rotateX(-20deg) translateZ(0.1px);
-      /* Safari optimization: Force layer creation for smoother animations */
-      -webkit-transform: translate3d(0, 0, 0) rotateX(-20deg);
-      transform: translate3d(0, 0, 0) rotateX(-20deg);
-      box-shadow: inset 0 64px 48px rgba(255, 255, 255, 0.2), 
-                  inset 0 2px 4px rgba(255, 255, 255, 0.3),
-                  inset 0 1px 1px rgba(255, 255, 255, 0.3);
-    }
-    
-    .item-count {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    
-    .item-count-label {
-      letter-spacing: 0.5px;
-    }
-    
-    .folder-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .folder-label-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-    }
-    
-    .folder-label {
-      text-align: center;
-    }
-  `],
-  template: `
-    <div class="folder-container" 
-         [class.open]="isOpen()">
-      <!-- Folder Tab SVG -->
-      <svg 
-        class="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="folder-back" [style.background-color]="getColorVar('strong')">
-        <!-- Page Sheets -->
-        @for (sheet of getPageSheets(); track $index) {
-          <div class="page-sheet"></div>
-        }
-        
-        <!-- Folder Front -->
-        <div 
-          class="folder-front" 
-          [style.--border-color]="getColorVar('strong')"
-          [style.background-color]="getColorVar('base')">
-          <!-- Icon (Centered) -->
-          <div class="folder-icon">
-            <ds-icon 
-              [name]="iconName" 
-              [size]="'32px'"
-              [style.color]="'white'" />
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Label and Item Count -->
-    <div class="folder-label-container">
-      <div class="folder-label ui-sm-semiBold">{{ label }}</div>
-      <div class="item-count ui-sm-regular" [style.color]="'var(--color-text-secondary, #6b7280)'">
-        <span>{{ itemCount }}</span>
-        <span class="item-count-label">emner</span>
-      </div>
-    </div>
-  `
-})
-export class DsMobileHandbookFolderComponent {
-  /**
-   * Color variant for the folder
-   * Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
-   * Example: 'pink', 'success', 'blue'
-   */
-  @Input() variant: string = 'light-purple';
-  
-  /**
-   * Icon name from the design system icon library
-   * Example: 'remixLightbulbLine', 'remixFolder3Line'
-   */
-  @Input() iconName: string = 'remixFolder3Line';
-  
-  /**
-   * Number of items in the folder
-   */
-  @Input() itemCount: number = 0;
-  
-  /**
-   * Label text displayed below the folder
-   */
-  @Input() label: string = 'Folder';
-  
-  /**
-   * Optional items data for the handbook folder
-   */
-  @Input() items?: HandbookItem[];
-  
-  /**
-   * Track open/closed state for animation
-   */
-  isOpen = signal(false);
-  
-  /**
-   * 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})`;
-  }
-  
-  /**
-   * Open folder animation
-   */
-  @HostListener('mouseenter')
-  open(): void {
-    this.isOpen.set(true);
-  }
-  
-  /**
-   * Close folder animation
-   */
-  @HostListener('mouseleave')
-  close(): void {
-    this.isOpen.set(false);
-  }
-  
-  /**
-   * Handle touch start - open animation
-   */
-  @HostListener('touchstart', ['$event'])
-  onTouchStart(event: TouchEvent): void {
-    this.isOpen.set(true);
-  }
-  
-  /**
-   * Handle touch end - close animation
-   */
-  @HostListener('touchend')
-  onTouchEnd(): void {
-    this.isOpen.set(false);
-  }
-  
-  /**
-   * Handle touch cancel - close animation
-   */
-  @HostListener('touchcancel')
-  onTouchCancel(): void {
-    this.isOpen.set(false);
-  }
-  
-  /**
-   * Handle click - open modal
-   */
-  @HostListener('click')
-  async onClick(): Promise<void> {
-    const handbookData: HandbookDetailData = {
-      title: this.label,
-      variant: this.variant,
-      iconName: this.iconName,
-      itemCount: this.itemCount,
-      items: this.items
-    };
-
-    await this.handbookModal.open(handbookData);
-  }
-  
-  /**
-   * Calculate the number of page sheets to display
-   * Max 6 sheets regardless of item count
-   */
-  getPageSheets(): number[] {
-    const count = Math.min(this.itemCount, 6);
-    return Array(count).fill(0);
-  }
-
-  constructor(
-    private handbookModal: DsMobileHandbookDetailModalService
-  ) {}
-}
-

package/src/components/handbook-folder/index.ts

@@ -1,4 +0,0 @@
-export { DsMobileHandbookFolderComponent } from './ds-mobile-handbook-folder';
-export { DsMobileHandbookFolderMiniComponent } from './ds-mobile-handbook-folder-mini';
-
-

package/src/components/header-content/ds-mobile-header-content.ts

@@ -1,211 +0,0 @@
-import { Component, input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-/**
- * DsMobileHeaderContentComponent
- * 
- * Container for header content tiles - displays tiles in a responsive grid.
- * Used within the expandable header section of mobile pages to show
- * summary information like property details, statistics, etc.
- * 
- * @example
- * ```html
- * <ds-mobile-header-content header-content>
- *   <ds-mobile-header-content-tile>
- *     <tile-icon>
- *       <ds-icon name="remixHome4Line" />
- *     </tile-icon>
- *     <tile-content>
- *       <tile-label>Area</tile-label>
- *       <tile-value>120 m²</tile-value>
- *     </tile-content>
- *   </ds-mobile-header-content-tile>
- * </ds-mobile-header-content>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-header-content',
-  standalone: true,
-  imports: [CommonModule],
-  styles: [`
-    :host {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 12px;
-    }
-    
-    @media (min-width: 768px) {
-      :host {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      }
-    }
-  `],
-  template: `<ng-content select="ds-mobile-header-content-tile" />`
-})
-export class DsMobileHeaderContentComponent {}
-
-/**
- * DsMobileHeaderContentTileComponent
- * 
- * Individual tile for displaying summary information in the header.
- * Styled with purple background to match the mobile header theme.
- * 
- * Must contain:
- * - `<tile-icon>` - Icon container (optional)
- * - `<tile-content>` - Label and value container
- * 
- * @example
- * ```html
- * <ds-mobile-header-content-tile>
- *   <tile-icon>
- *     <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
- *   </tile-icon>
- *   <tile-content>
- *     <tile-label>Rooms</tile-label>
- *     <tile-value>3 rooms</tile-value>
- *   </tile-content>
- * </ds-mobile-header-content-tile>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-header-content-tile',
-  standalone: true,
-  imports: [CommonModule],
-  styles: [`
-    :host {
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-  `],
-  template: `
-    <ng-content select="tile-icon" />
-    <ng-content select="tile-content" />
-  `
-})
-export class DsMobileHeaderContentTileComponent {}
-
-/**
- * TileIconComponent
- * 
- * Semantic slot for tile icon with dark purple background.
- * Use within `ds-mobile-header-content-tile`.
- */
-@Component({
-  selector: 'tile-icon',
-  standalone: true,
-  styles: [`
-    :host {
-      background: var(--color-brand-secondary);
-      border-radius: 8px;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-  `],
-  template: `<ng-content />`
-})
-export class TileIconComponent {}
-
-/**
- * TileContentComponent
- * 
- * Semantic slot for tile content containing label and value.
- * Use within `ds-mobile-header-content-tile`.
- * 
- * Contains:
- * - `<tile-label>` - Small label text
- * - `<tile-value>` - Large value text
- */
-@Component({
-  selector: 'tile-content',
-  standalone: true,
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
-    
-    ::ng-deep tile-label {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 400;
-      line-height: 20px;
-      letter-spacing: -0.56px;
-      color: rgba(255, 255, 255, 0.8);
-      display: block;
-    }
-    
-    ::ng-deep tile-value {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-lg);
-      font-weight: 600;
-      line-height: 26px;
-      letter-spacing: -0.72px;
-      color: #ffffff;
-      display: block;
-    }
-  `],
-  template: `
-    <ng-content select="tile-label" />
-    <ng-content select="tile-value" />
-  `
-})
-export class TileContentComponent {}
-
-/**
- * TileLabelComponent
- * 
- * Label text for tile content.
- * Use within `tile-content` inside `ds-mobile-header-content-tile`.
- */
-@Component({
-  selector: 'tile-label',
-  standalone: true,
-  styles: [`
-    :host {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 400;
-      line-height: 20px;
-      letter-spacing: -0.56px;
-      color: rgba(255, 255, 255, 0.8);
-      display: block;
-    }
-  `],
-  template: `<ng-content />`
-})
-export class TileLabelComponent {}
-
-/**
- * TileValueComponent
- * 
- * Value text for tile content.
- * Use within `tile-content` inside `ds-mobile-header-content-tile`.
- */
-@Component({
-  selector: 'tile-value',
-  standalone: true,
-  styles: [`
-    :host {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-lg);
-      font-weight: 600;
-      line-height: 26px;
-      letter-spacing: -0.72px;
-      color: #ffffff;
-      display: block;
-    }
-  `],
-  template: `<ng-content />`
-})
-export class TileValueComponent {}
-

package/src/components/header-content/index.ts

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

package/src/components/index.ts

@@ -1,45 +0,0 @@
-// Mobile Page Components
-export * from './page-main';
-export * from './page-details';
-
-// Mobile Content Components
-export * from './content';
-export * from './header-content';
-
-// Mobile Community Components
-export * from './post-card';
-export * from './comment';
-export * from './post-composer';
-
-// Mobile List Components
-export * from './list-item';
-export { DsMobileInteractiveListItemPostComponent, PostPdfAttachmentComponent } from './interactive-list-item-post';
-export { DsMobileInteractiveListItemInquiryComponent } from './interactive-list-item-inquiry';
-export { DsMobileInteractiveListItemMessageComponent } from './interactive-list-item-message';
-export { DsMobileContactListItemComponent } from './contact-list-item';
-
-// Mobile Layout Components
-export { DsMobileAppLayoutComponent, type HeaderVariant } from './app-layout';
-export { DsMobileTabsComponent, type TabConfig } from './tabs';
-
-// Mobile Bottom Sheet Components
-export * from './bottom-sheet';
-
-// Mobile Lightbox Components
-export * from './lightbox';
-
-// Mobile Inline Photo Component
-export * from './inline-photo';
-
-// Mobile Modal Service
-export * from './modal';
-
-// Mobile Post Detail Modal
-export * from './post-detail-modal';
-
-// Mobile Handbook Components
-export * from './handbook-folder';
-
-
-// Shared directives
-export * from './shared';