@propbinder/mobile-design 0.2.50 → 0.2.53

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

@@ -1,533 +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;
-        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

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