@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/list-item-static/ds-mobile-list-item-static.ts

@@ -1,133 +0,0 @@
-import { Component, input, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-/**
- * DsMobileListItemStaticComponent
- * 
- * A read-only version of the interactive list item component.
- * Used for displaying static information without interaction.
- * 
- * This component has the same structure as the interactive list item but without:
- * - Padding
- * - Rounded corners
- * - Hover states
- * - Click interactions
- * - Background fill (transparent)
- * 
- * @example
- * ```html
- * <ds-mobile-list-item-static
- *   [leadingSize]="'40px'">
- *   
- *   <div content-leading>
- *     <ds-avatar initials="JD" />
- *   </div>
- *   
- *   <div content-main>
- *     <h3>Main Content</h3>
- *     <p>Supporting text goes here...</p>
- *   </div>
- *   
- *   <div content-trailing>
- *     <span>Info</span>
- *   </div>
- * </ds-mobile-list-item-static>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-list-item-static',
-  standalone: true,
-  imports: [CommonModule],
-  host: {
-    '[style.--leading-size]': 'leadingSize()'
-  },
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      background: transparent;
-      padding: 0;
-      gap: 12px;
-      position: relative;
-      --leading-size: 32px;
-    }
-    
-    :host::after {
-      content: '';
-      position: absolute;
-      bottom: -10px;
-      left: calc(var(--leading-size) + 12px);
-      right: 0;
-      height: 1px;
-      background: var(--border-color-default);
-    }
-    
-    :host:last-child::after {
-      display: none;
-    }
-    
-    .content-leading {
-      flex-shrink: 0;
-      width: var(--leading-size);
-      min-height: var(--leading-size);
-      height: auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .content-main {
-      flex: 1;
-      min-width: 0;
-      min-height: var(--leading-size);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 8px;
-    }
-    
-    .content-trailing {
-      flex-shrink: 0;
-      display: flex;
-      align-items: flex-start;
-    }
-  `],
-  template: `
-    @if (hasLeadingContent()) {
-      <div class="content-leading">
-        <ng-content select="[content-leading]" />
-      </div>
-    }
-    
-    <div class="content-main">
-      <ng-content select="[content-main]" />
-      <ng-content />
-    </div>
-    
-    @if (hasTrailingContent()) {
-      <div class="content-trailing">
-        <ng-content select="[content-trailing]" />
-      </div>
-    }
-  `
-})
-export class DsMobileListItemStaticComponent {
-  /**
-   * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
-   * Defaults to '32px' for standard list item avatars
-   */
-  leadingSize = input<string>('32px');
-  
-  /**
-   * Check if leading content slot has content
-   */
-  hasLeadingContent = computed(() => true); // Always render slot container for consistency
-  
-  /**
-   * Check if trailing content slot has content
-   */
-  hasTrailingContent = computed(() => true); // Always render slot container for consistency
-}
-

package/src/components/list-item-static/index.ts

@@ -1,2 +0,0 @@
-export * from './ds-mobile-list-item-static';
-

package/src/components/loader-overlay/ds-mobile-loader-overlay.css

@@ -1,49 +0,0 @@
-/* ============================================
-   LOADER OVERLAY COMPONENT
-   ============================================ */
-
-:host {
-  display: contents;
-}
-
-/* ============================================
-   OVERLAY CONTAINER
-   ============================================ */
-
-.loader-overlay {
-  position: absolute;
-  inset: 0;
-  background: var(--color-background-neutral-primary, #ffffff);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-}
-
-/* ============================================
-   SPINNER
-   ============================================ */
-
-.spinner {
-  border: 2px solid var(--color-border-neutral-secondary, #E5E5E5);
-  border-top-color: var(--color-accent, #6B5FF5);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to { 
-    transform: rotate(360deg); 
-  }
-}
-
-/* ============================================
-   DARK MODE SUPPORT (Optional)
-   ============================================ */
-
-@media (prefers-color-scheme: dark) {
-  .spinner {
-    border-color: rgba(255, 255, 255, 0.2);
-    border-top-color: var(--color-accent, #6B5FF5);
-  }
-}

package/src/components/loader-overlay/ds-mobile-loader-overlay.ts

@@ -1,77 +0,0 @@
-import { Component, input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-/**
- * DsMobileLoaderOverlayComponent
- * 
- * Reusable loader overlay component that displays a spinner centered over its container.
- * Designed to overlay images or other content during loading states.
- * 
- * Features:
- * - Semi-transparent white background overlay
- * - Centered animated spinner
- * - Customizable spinner size
- * - Absolute positioning to cover parent
- * - Accessible with proper z-index stacking
- * 
- * @example
- * ```html
- * <!-- Basic usage -->
- * <div style="position: relative;">
- *   <img src="image.jpg" alt="Content" />
- *   @if (isLoading) {
- *     <ds-mobile-loader-overlay />
- *   }
- * </div>
- * 
- * <!-- With custom spinner size -->
- * <div style="position: relative;">
- *   <div class="content">Loading content...</div>
- *   <ds-mobile-loader-overlay [spinnerSize]="32" />
- * </div>
- * 
- * <!-- Over an image with rounded corners -->
- * <div style="position: relative; border-radius: 12px; overflow: hidden;">
- *   <img src="photo.jpg" />
- *   <ds-mobile-loader-overlay [borderRadius]="12" />
- * </div>
- * ```
- * 
- * @notes
- * - Parent container must have position: relative for the overlay to work correctly
- * - The overlay covers the entire parent element using inset: 0
- * - Spinner animation runs continuously at 0.6s per rotation
- */
-@Component({
-  selector: 'ds-mobile-loader-overlay',
-  standalone: true,
-  imports: [CommonModule],
-  styleUrls: ['./ds-mobile-loader-overlay.css'],
-  template: `
-    <div 
-      class="loader-overlay" 
-      [style.border-radius.px]="borderRadius()"
-      role="status"
-      aria-live="polite"
-      aria-label="Loading">
-      <div 
-        class="spinner" 
-        [style.width.px]="spinnerSize()"
-        [style.height.px]="spinnerSize()">
-      </div>
-    </div>
-  `
-})
-export class DsMobileLoaderOverlayComponent {
-  /**
-   * Size of the spinner in pixels
-   * @default 24
-   */
-  spinnerSize = input<number>(24);
-  
-  /**
-   * Border radius of the overlay in pixels (should match parent's border radius)
-   * @default 0
-   */
-  borderRadius = input<number>(0);
-}

package/src/components/loader-overlay/index.ts

@@ -1 +0,0 @@
-export * from './ds-mobile-loader-overlay';

package/src/components/logo/ds-logo.ts

@@ -1,95 +0,0 @@
-import { Component, Input, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { WhitelabelService } from '../../services/whitelabel.service';
-
-export type LogoVariant = 'full' | 'mark';
-export type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
-
-/**
- * DsLogoComponent
- * 
- * Displays the whitelabeled logo or logomark based on current configuration.
- * Automatically pulls logo assets from WhitelabelService.
- * 
- * @example
- * Full logo in header:
- * ```html
- * <ds-logo variant="full" size="md" />
- * ```
- * 
- * Logomark for compact spaces:
- * ```html
- * <ds-logo variant="mark" size="sm" />
- * ```
- */
-@Component({
-  selector: 'ds-logo',
-  standalone: true,
-  imports: [CommonModule],
-  styles: [`
-    :host {
-      display: flex;
-      justify-content: flex-start;
-      line-height: 0;
-    }
-    
-    .logo {
-      display: block;
-      object-fit: contain;
-      width: auto;
-      /* Base height is set via inline style, desktop adds +4px */
-      height: var(--logo-height-mobile);
-    }
-    
-    /* Desktop breakpoint: add 4px to logo height */
-    @media (min-width: 768px) {
-      .logo {
-        height: var(--logo-height-desktop);
-      }
-    }
-  `],
-  template: `
-    <img 
-      [src]="logoSrc"
-      [alt]="logoAlt"
-      class="logo"
-      [style.--logo-height-mobile.px]="effectiveHeight"
-      [style.--logo-height-desktop.px]="effectiveHeight + 4"
-      [style.width]="customWidth ? customWidth + 'px' : 'auto'"
-    />
-  `
-})
-export class DsLogoComponent {
-  whitelabelService = inject(WhitelabelService);
-  
-  @Input() variant: LogoVariant = 'full';
-  @Input() size: LogoSize = 'md';
-  @Input() customHeight?: number;
-  @Input() customWidth?: number;
-  
-  get logoSrc(): string {
-    const logoUrl = this.whitelabelService.logoUrl();
-    const logoMarkUrl = this.whitelabelService.logoMarkUrl();
-    
-    if (this.variant === 'full') {
-      // Use logo, fall back to logomark if logo doesn't exist
-      return logoUrl || logoMarkUrl;
-    } else {
-      // Use logomark, fall back to logo if logomark doesn't exist
-      return logoMarkUrl || logoUrl;
-    }
-  }
-  
-  get logoAlt(): string {
-    const alt = this.whitelabelService.logoAlt();
-    return this.variant === 'full' ? alt : `${alt} logo`;
-  }
-  
-  /** 
-   * Priority: customHeight input > whitelabel config logoHeight > default 32px
-   */
-  get effectiveHeight(): number {
-    return this.customHeight ?? this.whitelabelService.logoHeight();
-  }
-}
-

package/src/components/logo/index.ts

@@ -1,2 +0,0 @@
-export * from './ds-logo';
-