@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/card-inline/ds-mobile-card-inline.ts

@@ -1,301 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-/**
- * DsMobileCardInlineComponent
- * 
- * A versatile, always-interactive inline card component for standalone or small-group usage.
- * Designed for tappable card-like elements such as file attachments, contact cards, etc.
- * Not intended for long scrolling lists - use ds-mobile-list-item for that purpose.
- * 
- * Features:
- * - Always interactive/tappable (unless disabled)
- * - Two layout variants: default (column) and compact (row)
- * - Flexible content projection with leading/main/trailing slots
- * - Consistent styling with rounded corners and neutral background
- * - Built-in hover and active states
- * - Accessibility features (role, tabindex, aria attributes)
- * 
- * @example
- * ```html
- * <!-- Default variant (column layout) -->
- * <ds-mobile-card-inline
- *   [variant]="'default'"
- *   (cardClick)="handleClick()">
- *   
- *   <div content-leading>
- *     <ds-avatar initials="JD" />
- *   </div>
- *   
- *   <div content-main>
- *     <div class="title">Document Title</div>
- *     <div class="subtitle">PDF · 1.2 MB</div>
- *   </div>
- *   
- *   <ds-icon content-trailing name="remixArrowRightSLine" />
- * </ds-mobile-card-inline>
- * 
- * <!-- Compact variant (row layout) -->
- * <ds-mobile-card-inline
- *   [variant]="'compact'"
- *   (cardClick)="handleClick()">
- *   
- *   <ds-avatar content-leading size="sm" />
- *   
- *   <div content-main>
- *     <span class="name">File.pdf</span>
- *     <span class="size">245 KB</span>
- *   </div>
- *   
- *   <ds-icon content-trailing name="remixArrowRightSLine" />
- * </ds-mobile-card-inline>
- * 
- * <!-- Disabled state -->
- * <ds-mobile-card-inline [disabled]="true">
- *   <div content-main>Disabled card</div>
- * </ds-mobile-card-inline>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-card-inline',
-  standalone: true,
-  imports: [CommonModule],
-  host: {
-    '[class.disabled]': 'disabled()',
-    '[class.variant-compact]': 'variant() === "compact"',
-    '[class.variant-default]': 'variant() === "default"',
-    '[attr.role]': '"button"',
-    '[attr.tabindex]': 'disabled() ? null : "0"',
-    '[attr.aria-disabled]': 'disabled() ? "true" : null',
-    '(click)': 'handleClick($event)',
-    '(keydown.enter)': 'handleKeyDown($event)',
-    '(keydown.space)': 'handleKeyDown($event)'
-  },
-  styles: [`
-    :host {
-      display: flex;
-      align-items: center;
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-      border-radius: 16px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      box-sizing: border-box;
-    }
-    
-    /* Default variant - column layout with more padding */
-    :host(.variant-default) {
-      gap: 12px;
-      padding: 10px 12px;
-    }
-    
-    /* Compact variant - row layout with less padding */
-    :host(.variant-compact) {
-      gap: 8px;
-      padding: 10px;
-    }
-    
-    /* Hover state (desktop only) */
-    @media (hover: hover) and (pointer: fine) {
-      :host(:hover):not(.disabled) {
-        background: var(--color-background-neutral-secondary-hover, #ebebeb);
-      }
-    }
-    
-    /* Active state */
-    :host(:active):not(.disabled) {
-      transform: scale(0.98);
-      background: var(--color-background-neutral-secondary-hover, #ebebeb);
-    }
-    
-    /* Focus visible for keyboard navigation */
-    :host(:focus-visible):not(.disabled) {
-      outline: 2px solid var(--color-brand-primary, #5d5fef);
-      outline-offset: 2px;
-    }
-    
-    /* Disabled state */
-    :host(.disabled) {
-      opacity: 0.5;
-      pointer-events: none;
-      cursor: not-allowed;
-    }
-    
-    /* Inner container */
-    .card-inline-inner {
-      display: flex;
-      align-items: center;
-      gap: inherit;
-      width: 100%;
-      min-width: 0;
-    }
-    
-    /* Content slots */
-    .content-leading {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .content-main {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      align-items: center;
-    }
-    
-    /* Compact variant - main content flows inline */
-    :host(.variant-compact) .content-main {
-      flex-direction: row;
-      gap: 8px;
-    }
-    
-    /* Default variant - main content flows column */
-    :host(.variant-default) .content-main {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 2px;
-    }
-    
-    .content-trailing {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-    }
-    
-    /* ============================================
-       Shared item styles for child components
-       ============================================ */
-    
-    /* Item avatar container */
-    ::ng-deep .item-avatar {
-      flex-shrink: 0;
-    }
-    
-    /* Item content wrapper - default stacks vertically */
-    ::ng-deep .item-content {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 2px;
-    }
-    
-    /* Compact layout - content flows inline */
-    :host(.variant-compact) ::ng-deep .item-content {
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 8px;
-    }
-    
-    /* Item name - primary text with truncation */
-    ::ng-deep .item-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);
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-align: left;
-    }
-    
-    /* Item meta - secondary text */
-    ::ng-deep .item-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);
-      margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 4px;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    
-    /* Item trailing icon */
-    ::ng-deep .item-trailing {
-      display: flex;
-      align-items: center;
-      color: var(--color-text-tertiary, #a3a3a3);
-      flex-shrink: 0;
-    }
-  `],
-  template: `
-    <div class="card-inline-inner">
-      <div class="content-leading">
-        <ng-content select="[content-leading]" />
-      </div>
-      
-      <div class="content-main">
-        <ng-content select="[content-main]" />
-        <ng-content />
-      </div>
-      
-      <div class="content-trailing">
-        <ng-content select="[content-trailing]" />
-      </div>
-    </div>
-  `
-})
-export class DsMobileCardInlineComponent {
-  /**
-   * Display variant
-   * - 'default' - Column layout with standard padding (gap: 12px, padding: 10px 12px)
-   * - 'compact' - Row layout with reduced padding (gap: 8px, padding: 10px)
-   */
-  variant = input<'default' | 'compact'>('default');
-  
-  /**
-   * Whether the card is disabled
-   * Disables all interactions and reduces opacity
-   */
-  disabled = input<boolean>(false);
-  
-  /**
-   * Emits when the card is clicked (if not disabled)
-   */
-  cardClick = output<void>();
-  
-  /**
-   * Handle click events
-   */
-  handleClick(event: Event): void {
-    if (this.disabled()) {
-      return;
-    }
-    
-    // Don't emit click if it came from an interactive child element
-    const target = event.target as HTMLElement;
-    const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
-    
-    // Check if the interactive element is a child, not the host itself
-    if (closestInteractive && closestInteractive !== event.currentTarget) {
-      return;
-    }
-    
-    this.cardClick.emit();
-  }
-  
-  /**
-   * Handle keyboard events (Enter/Space)
-   */
-  handleKeyDown(event: KeyboardEvent): void {
-    if (this.disabled()) {
-      return;
-    }
-    
-    event.preventDefault();
-    this.cardClick.emit();
-  }
-}
-

package/src/components/card-inline/index.ts

@@ -1,2 +0,0 @@
-export { DsMobileCardInlineComponent } from './ds-mobile-card-inline';
-

package/src/components/card-inline-banner/ds-mobile-card-inline-banner.ts

@@ -1,118 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsMobileCardInlineComponent } from '../card-inline';
-
-/**
- * DsMobileCardInlineBannerComponent
- * 
- * Specialized interactive component for displaying notification banners.
- * Used to show unread message notifications above inquiry details.
- * 
- * Features:
- * - Neutral background matching file/contact cards
- * - Avatar icon with message symbol
- * - Title and timestamp
- * - Unread count badge
- * - Chevron for navigation indication
- * 
- * @example
- * ```html
- * <ds-mobile-card-inline-banner
- *   [title]="'New messages'"
- *   [timestamp]="'2 min ago'"
- *   [unreadCount]="3"
- *   (bannerClick)="navigateToMessages()">
- * </ds-mobile-card-inline-banner>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-card-inline-banner',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent],
-  styles: [`
-    /* Component-specific styles only - shared styles come from base component */
-    
-    /* Badge for unread count - using whitelabel brand colors */
-    .unread-badge {
-      min-width: 24px;
-      height: 16px;
-      padding: 0 6px;
-      border-radius: 10px;
-      background: var(--color-accent, #6B5FF5);
-      color: var(--color-on-accent, #ffffff);
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 1;
-      margin-right: 8px;
-    }
-  `],
-  template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleBannerClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          type="icon"
-          [iconName]="'remixNotificationLine'"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ title() }}</div>
-        
-        @if (timestamp()) {
-          <div class="item-meta">
-            <span>{{ timestamp() }}</span>
-          </div>
-        }
-      </div>
-      
-      <div content-trailing class="item-trailing">
-        @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
-        }
-        <ds-icon name="remixArrowRightSLine" size="20px" />
-      </div>
-    </ds-mobile-card-inline>
-  `
-})
-export class DsMobileCardInlineBannerComponent {
-  /**
-   * Banner title (e.g., "New messages", "Unread messages")
-   */
-  title = input.required<string>();
-  
-  /**
-   * Timestamp text (e.g., "2 min ago", "Just now")
-   */
-  timestamp = input<string>('');
-  
-  /**
-   * Number of unread items (optional, shows badge if > 0)
-   */
-  unreadCount = input<number>(0);
-  
-  /**
-   * Layout variant
-   * - 'default' - Standard padding and column layout
-   * - 'compact' - Reduced padding and row layout
-   */
-  layout = input<'default' | 'compact'>('default');
-  
-  /**
-   * Emits when the banner is clicked
-   */
-  bannerClick = output<void>();
-  
-  handleBannerClick(): void {
-    this.bannerClick.emit();
-  }
-}

package/src/components/card-inline-banner/index.ts

@@ -1 +0,0 @@
-export * from './ds-mobile-card-inline-banner';

package/src/components/card-inline-contact/ds-mobile-card-inline-contact.ts

@@ -1,120 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsMobileCardInlineComponent } from '../card-inline';
-
-/**
- * DsMobileCardInlineContactComponent
- * 
- * Specialized interactive component for displaying contacts.
- * Displays contact name with avatar initials and metadata (person name + phone number).
- * Similar styling to file attachments with rounded corners and hover states.
- * 
- * @example
- * ```html
- * <ds-mobile-card-inline-contact
- *   [name]="'Mortensen & Søn ApS'"
- *   [initials]="'M'"
- *   [contactPerson]="'John Mortensen'"
- *   [phoneNumber]="'+45 12 34 56 78'"
- *   [clickable]="true"
- *   (contactClick)="openContact()">
- * </ds-mobile-card-inline-contact>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-card-inline-contact',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent],
-  styles: [`
-    /* Component-specific styles only - shared styles come from base component */
-  `],
-  template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      [disabled]="!clickable()"
-      (cardClick)="handleContactClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          [initials]="initials()"
-          type="initials"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ name() }}</div>
-        
-        @if (contactPerson() || phoneNumber()) {
-          <div class="item-meta">
-            @if (contactPerson()) {
-              <span>{{ contactPerson() }}</span>
-            }
-            @if (contactPerson() && phoneNumber()) {
-              <span>·</span>
-            }
-            @if (phoneNumber()) {
-              <span>{{ phoneNumber() }}</span>
-            }
-          </div>
-        }
-      </div>
-      
-      @if (showChevron()) {
-        <div content-trailing class="item-trailing">
-          <ds-icon name="remixArrowRightSLine" size="20px" />
-        </div>
-      }
-    </ds-mobile-card-inline>
-  `
-})
-export class DsMobileCardInlineContactComponent {
-  /**
-   * Contact/company name
-   */
-  name = input.required<string>();
-  
-  /**
-   * Avatar initials (usually 1-2 letters)
-   */
-  initials = input.required<string>();
-  
-  /**
-   * Contact person name (optional)
-   */
-  contactPerson = input<string>('');
-  
-  /**
-   * Phone number (optional)
-   */
-  phoneNumber = input<string>('');
-  
-  /**
-   * Layout variant
-   * - 'default' - Standard padding and column layout
-   * - 'compact' - Reduced padding and row layout
-   */
-  layout = input<'default' | 'compact'>('default');
-  
-  /**
-   * Whether the contact item is clickable
-   */
-  clickable = input<boolean>(true);
-  
-  /**
-   * Whether to show chevron icon
-   */
-  showChevron = input<boolean>(true);
-  
-  /**
-   * Emits when the contact item is clicked (if clickable)
-   */
-  contactClick = output<void>();
-  
-  handleContactClick(): void {
-    this.contactClick.emit();
-  }
-}
-

package/src/components/card-inline-contact/index.ts

@@ -1 +0,0 @@
-export { DsMobileCardInlineContactComponent } from './ds-mobile-card-inline-contact';

package/src/components/card-inline-file/ds-mobile-card-inline-file.ts

@@ -1,141 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsMobileCardInlineComponent } from '../card-inline';
-
-/**
- * DsMobileCardInlineFileComponent
- *
- * File attachment display for various document types.
- * Shows file info card with icon, filename, and file size.
- * Supports PDF and generic document formats.
- * Emits click event to open file in viewer.
- *
- * @example
- * ```html
- * <ds-mobile-card-inline-file
- *   [fileName]="'Document.pdf'"
- *   [fileSize]="'1.2 MB'"
- *   [variant]="'pdf'"
- *   [layout]="'compact'"
- *   (fileClick)="openFile()">
- * </ds-mobile-card-inline-file>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-card-inline-file',
-  standalone: true,
-  imports: [
-    CommonModule,
-    DsAvatarComponent,
-    DsIconComponent,
-    DsMobileCardInlineComponent,
-  ],
-  styles: [
-    `
-      /* PDF variant - red icon background */
-      .item-avatar.pdf ::ng-deep .avatar--icon {
-        background-color: #ff5757 !important;
-      }
-
-      /* Doc variant - blue icon background */
-      .item-avatar.doc ::ng-deep .avatar--icon {
-        background-color: var(--color-blue-base, #3b82f6) !important;
-      }
-    `,
-  ],
-  template: `
-    <ds-mobile-card-inline [variant]="layout()" (cardClick)="handleClick()">
-      <div
-        content-leading
-        class="item-avatar"
-        [class.pdf]="variant() === 'pdf'"
-        [class.doc]="variant() === 'doc'"
-      >
-        <ds-avatar
-          type="icon"
-          [iconName]="getIconName()"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-
-      <div content-main class="item-content">
-        <div class="item-name">{{ fileName() }}</div>
-        @if (fileSize()) {
-        <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
-        } @else {
-        <div class="item-meta">{{ getFileTypeLabel() }}</div>
-        }
-      </div>
-
-      <ds-icon
-        content-trailing
-        name="remixArrowRightSLine"
-        size="20px"
-        class="item-trailing"
-      />
-    </ds-mobile-card-inline>
-  `,
-})
-export class DsMobileCardInlineFileComponent {
-  /**
-   * File name
-   */
-  fileName = input<string>('Document');
-
-  /**
-   * File size display (e.g., '1.2 MB')
-   */
-  fileSize = input<string>('');
-
-  /**
-   * File type variant
-   * - 'pdf' - PDF document (red icon)
-   * - 'doc' - Generic document (blue icon)
-   */
-  variant = input<'pdf' | 'doc'>('doc');
-
-  /**
-   * Layout variant
-   * - 'default' - Standard padding and column layout
-   * - 'compact' - Reduced padding and row layout
-   */
-  layout = input<'default' | 'compact'>('default');
-
-  /**
-   * Optional URL to open when clicked
-   * If provided, clicking the card will open this URL in a new tab
-   */
-  fileUrl = input<string | undefined>(undefined);
-
-  /**
-   * Emits when the file attachment is clicked
-   */
-  fileClick = output<void>();
-
-  /**
-   * Get the appropriate icon name based on variant
-   */
-  getIconName(): string {
-    return this.variant() === 'pdf'
-      ? 'remixFileTextLine'
-      : 'remixAttachmentLine';
-  }
-
-  /**
-   * Get the file type label based on variant
-   */
-  getFileTypeLabel(): string {
-    return this.variant() === 'pdf' ? 'PDF' : 'DOC';
-  }
-
-  handleClick(): void {
-    const url = this.fileUrl();
-    console.log(url);
-    if (url) {
-      window.open(url, '_blank', 'noopener,noreferrer');
-    }
-    this.fileClick.emit();
-  }
-}

package/src/components/card-inline-file/index.ts

@@ -1 +0,0 @@
-export { DsMobileCardInlineFileComponent } from './ds-mobile-card-inline-file';