@propbinder/mobile-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,133 @@
+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

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

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

@@ -0,0 +1,49 @@
+/* ============================================
+   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

@@ -0,0 +1,77 @@
+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

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

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

@@ -0,0 +1,95 @@
+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

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