@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,533 @@
+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;
+        width: 100%;
+        min-width: 0;
+        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);
+        }
+      }
+
+      /* Native support for extended API colors */
+      :host {
+        --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;
+      }
+
+      .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.9) translateY(-28px) rotateX(0deg) translateZ(0.1px);
+        transform: scale(0.9) 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.9) translateZ(0.1px);
+        transform: scale(0.9) 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;
+        width: 100%;
+        min-width: 0;
+      }
+
+      .folder-label {
+        text-align: center;
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .loading-indicator,
+      .error-indicator {
+        font-size: var(--font-size-xs);
+      }
+    `,
+  ],
+  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]="customColor || getColorVar('strong')"
+        />
+      </svg>
+
+      <!-- Folder Back -->
+      <div class="folder-back" [style.background-color]="customColor || getColorVar('strong')">
+        <!-- Page Sheets -->
+        @for (sheet of getPageSheets(); track $index) {
+          <div class="page-sheet"></div>
+        }
+
+        <!-- Folder Front -->
+        <div class="folder-front" [style.--border-color]="customColor || getColorVar('strong')" [style.background-color]="customColor || 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)'">
+        @if (loading) {
+          <span class="loading-indicator">Loading...</span>
+        } @else if (error) {
+          <span class="error-indicator" [style.color]="'var(--color-destructive-base)'">Error</span>
+        } @else {
+          <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';
+
+  /**
+   * Optional custom hex color for the folder.
+   * If provided, overrides the variant color completely.
+   */
+  @Input() customColor?: string;
+
+  /**
+   * Icon name from the design system icon library
+   * Example: 'remixLightbulbLine', 'remixFolder3Line'
+   */
+  @Input() iconName: string = 'remixFolder3Line';
+
+  /**
+   * Number of items in the folder
+   * This should match the length of the items array when data is loaded
+   */
+  @Input() itemCount: number = 0;
+
+  /**
+   * Label text displayed below the folder (category name)
+   */
+  @Input() label: string = 'Folder';
+
+  /**
+   * Optional items data for the handbook folder
+   * Pass the HandbookItem[] array from your API response here
+   */
+  @Input() items?: HandbookItem[];
+
+  /**
+   * Loading state - when true, shows "Loading..." indicator instead of item count
+   * Set this to true while fetching data from your API
+   */
+  @Input() loading: boolean = false;
+
+  /**
+   * Error state - when set, shows "Error" indicator instead of item count
+   * Set this to an error message string if API call fails
+   */
+  @Input() error?: string;
+
+  /**
+   * 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> = {
+      // 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})`;
+  }
+
+  /**
+   * 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
+   * Only opens modal if not in loading or error state
+   */
+  @HostListener('click')
+  async onClick(): Promise<void> {
+    // Don't open modal if loading or in error state
+    if (this.loading || this.error) {
+      return;
+    }
+
+    const handbookData: HandbookDetailData = {
+      title: this.label,
+      variant: this.variant,
+      customColor: this.customColor,
+      iconName: this.iconName,
+      itemCount: this.itemCount,
+      items: this.items,
+    };
+
+    await this.handbookModal.open(handbookData, {
+      loading: this.loading,
+      error: this.error,
+    });
+  }
+
+  /**
+   * 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

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