@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/swiper/ds-mobile-swiper-with-nav.ts

@@ -0,0 +1,160 @@
+import { Component, ContentChild, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { DsMobileSwiperComponent } from './ds-mobile-swiper';
+
+/**
+ * DsMobileSwiperWithNavComponent
+ * 
+ * Wrapper component that adds navigation buttons to a ds-mobile-swiper.
+ * Automatically handles button states (disabled at start/end) and mobile visibility.
+ * 
+ * Features:
+ * - Automatic prev/next navigation buttons
+ * - Auto-hide buttons when there's only one slide
+ * - Auto-disable buttons at start/end of swiper
+ * - Hidden on mobile devices (< 768px)
+ * - No pointer-events blocking using display: contents
+ * - Self-contained navigation logic
+ * 
+ * Usage:
+ * ```html
+ * <ds-mobile-swiper-with-nav>
+ *   <ds-mobile-swiper [slideWidth]="'100%'" [gap]="32">
+ *     <div class="swiper-slide">Slide 1</div>
+ *     <div class="swiper-slide">Slide 2</div>
+ *   </ds-mobile-swiper>
+ * </ds-mobile-swiper-with-nav>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-swiper-with-nav',
+  standalone: true,
+  imports: [CommonModule, DsIconButtonComponent],
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .swiper-nav-wrapper {
+      position: relative;
+    }
+
+    /* Use display: contents to avoid blocking pointer events */
+    .swiper-nav-buttons {
+      display: contents;
+    }
+
+    .swiper-nav-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+    }
+
+    .swiper-nav-button:first-child {
+      left: -48px;
+    }
+
+    .swiper-nav-button:last-child {
+      right: -48px;
+    }
+
+    /* Force buttons to be perfectly round */
+    ::ng-deep .swiper-nav-button button {
+      border-radius: 50% !important;
+      width: 48px !important;
+      height: 48px !important;
+      padding: 0 !important;
+    }
+
+    /* Hide on mobile */
+    @media (max-width: 767px) {
+      .swiper-nav-button {
+        display: none;
+      }
+    }
+  `],
+  template: `
+    <div class="swiper-nav-wrapper">
+      <ng-content></ng-content>
+      
+      @if (shouldShowNavButtons()) {
+        <div class="swiper-nav-buttons">
+          <ds-icon-button
+            class="swiper-nav-button"
+            icon="remixArrowLeftSLine"
+            variant="ghost"
+            size="sm"
+            [disabled]="isFirstSlide()"
+            (clicked)="slidePrev()"
+            aria-label="Previous"
+          />
+          <ds-icon-button
+            class="swiper-nav-button"
+            icon="remixArrowRightSLine"
+            variant="ghost"
+            size="sm"
+            [disabled]="isLastSlide()"
+            (clicked)="slideNext()"
+            aria-label="Next"
+          />
+        </div>
+      }
+    </div>
+  `
+})
+export class DsMobileSwiperWithNavComponent implements AfterContentInit {
+  @ContentChild(DsMobileSwiperComponent) swiper?: DsMobileSwiperComponent;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterContentInit(): void {
+    // Trigger change detection when swiper is initialized
+    // This ensures button states are correct on initial render
+    if (this.swiper) {
+      setTimeout(() => {
+        this.cdr.detectChanges();
+      }, 200);
+    }
+  }
+
+  /**
+   * Navigate to previous slide
+   */
+  slidePrev(): void {
+    this.swiper?.slidePrev();
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Navigate to next slide
+   */
+  slideNext(): void {
+    this.swiper?.slideNext();
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Check if at first slide
+   */
+  isFirstSlide(): boolean {
+    return this.swiper?.isBeginning() ?? true;
+  }
+
+  /**
+   * Check if at last slide
+   */
+  isLastSlide(): boolean {
+    return this.swiper?.isEnd() ?? true;
+  }
+
+  /**
+   * Check if navigation buttons should be shown
+   * Hide buttons if there's only one slide
+   */
+  shouldShowNavButtons(): boolean {
+    const slideCount = this.swiper?.getSlideCount() ?? 0;
+    return slideCount > 1;
+  }
+}

package/src/components/swiper/ds-mobile-swiper.ts

@@ -0,0 +1,327 @@
+import {
+  Component,
+  input,
+  AfterViewInit,
+  OnDestroy,
+  ElementRef,
+  ViewChild,
+  CUSTOM_ELEMENTS_SCHEMA
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import Swiper from 'swiper';
+import { Pagination } from 'swiper/modules';
+
+/**
+ * DsMobileSwiperComponent
+ * 
+ * A reusable swiper/carousel component with configurable child width and spacing.
+ * 
+ * Features:
+ * - First slide is left-aligned
+ * - Middle slides are centered when active
+ * - Last slide is right-aligned
+ * - Configurable slide width and gap
+ * - Content projection via ng-content
+ * 
+ * Usage:
+ * ```html
+ * <ds-mobile-swiper [slideWidth]="'75vw'" [gap]="16">
+ *   <div class="swiper-slide">Slide 1</div>
+ *   <div class="swiper-slide">Slide 2</div>
+ *   <div class="swiper-slide">Slide 3</div>
+ * </ds-mobile-swiper>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-swiper',
+  standalone: true,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <div class="swiper-container" #swiperContainer>
+      <div class="swiper-wrapper">
+        <ng-content></ng-content>
+      </div>
+      @if (pagination()) {
+        <div class="swiper-pagination"></div>
+      }
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .swiper-container {
+      width: 100%;
+      position: relative;
+      overflow: visible;
+    }
+
+    .swiper-wrapper {
+      display: flex;
+      box-sizing: content-box;
+    }
+
+    :host ::ng-deep .swiper-slide {
+      flex-shrink: 0;
+      height: auto;
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      transition: opacity 300ms ease, transform 300ms ease;
+    }
+
+    /* Hide all slides by default when progressive opacity is enabled */
+    :host(.progressive-opacity) ::ng-deep .swiper-slide {
+      opacity: 0;
+    }
+
+    /* Show first slide immediately */
+    :host(.progressive-opacity) ::ng-deep .swiper-slide:first-child {
+      opacity: 1;
+    }
+
+    /* Pagination styles */
+    .swiper-pagination {
+      position: relative;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: -16px;
+    }
+
+    :host ::ng-deep .swiper-pagination-bullet {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--color-accent);
+      opacity: 0.25;
+      transition: all 0.3s ease;
+      cursor: pointer;
+    }
+
+    :host ::ng-deep .swiper-pagination-bullet-active {
+      opacity: 1;
+      background: var(--color-accent);
+      width: 20px;
+      border-radius: 3px;
+    }
+  `]
+})
+export class DsMobileSwiperComponent implements AfterViewInit, OnDestroy {
+  /**
+   * Width of each slide (e.g., '75vw', '300px', '80%')
+   */
+  slideWidth = input<string>('75vw');
+
+  /**
+   * Gap between slides in pixels
+   */
+  gap = input<number>(16);
+
+  /**
+   * Enable pagination dots
+   */
+  pagination = input<boolean>(false);
+
+  /**
+   * Enable auto height - container adapts to active slide's height
+   */
+  autoHeight = input<boolean>(false);
+
+  /**
+   * Enable progressive opacity based on slide position
+   * Slides fade in/out smoothly as they move toward/away from center
+   */
+  progressiveOpacity = input<boolean>(false);
+
+  /**
+   * Enable progressive scale based on slide position
+   * Slides scale down smoothly as they move away from center
+   */
+  progressiveScale = input<boolean>(false);
+
+  @ViewChild('swiperContainer', { static: false }) swiperContainer!: ElementRef;
+
+  private swiperInstance: Swiper | null = null;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    // Add progressive-opacity class to host if enabled
+    if (this.progressiveOpacity()) {
+      this.elementRef.nativeElement.classList.add('progressive-opacity');
+    }
+    
+    setTimeout(() => {
+      this.initializeSwiper();
+    }, 100);
+  }
+
+  private initializeSwiper(): void {
+    if (!this.swiperContainer) return;
+
+    // Apply slide width to all slides
+    const slides = this.swiperContainer.nativeElement.querySelectorAll('.swiper-slide');
+    slides.forEach((slide: HTMLElement, index: number) => {
+      slide.style.width = this.slideWidth();
+      
+      // Set initial opacity BEFORE Swiper initializes to prevent flash of inactive slides
+      if (this.progressiveOpacity()) {
+        // Hide all slides except the first one (active slide)
+        slide.style.opacity = index === 0 ? '1' : '0';
+      }
+    });
+
+    const config: any = {
+      slidesPerView: 'auto',
+      spaceBetween: this.gap(),
+      centeredSlides: true,
+      centeredSlidesBounds: true,
+      speed: 300,
+      resistance: true,
+      resistanceRatio: 0.85,
+      autoHeight: this.autoHeight(),
+      watchSlidesProgress: this.progressiveOpacity() || this.progressiveScale(), // Enable progress tracking
+    };
+
+    // Configure event handlers
+    config.on = {};
+
+    // Configure autoHeight animation
+    if (this.autoHeight()) {
+      config.autoHeight = true;
+      // The height transition will use the speed value (300ms)
+      config.on.slideChangeTransitionStart = () => {
+        // Height transition happens automatically
+      };
+    }
+
+    // Configure progressive effects (opacity and/or scale)
+    if (this.progressiveOpacity() || this.progressiveScale()) {
+      config.on.setTranslate = () => {
+        if (!this.swiperInstance) return;
+        
+        this.swiperInstance.slides.forEach((slideEl: any) => {
+          const progress = slideEl.progress || 0;
+          const absProgress = Math.abs(progress);
+          
+          // Progressive opacity with sharper cutoff
+          if (this.progressiveOpacity()) {
+            // Make opacity drop off more aggressively
+            // Slides with absProgress > 0.5 will be completely hidden
+            let opacity;
+            if (absProgress > 0.5) {
+              opacity = 0;
+            } else {
+              opacity = 1 - (absProgress * 2); // 2x multiplier for faster fade
+            }
+            slideEl.style.opacity = Math.max(opacity, 0).toString();
+          }
+          
+          // Progressive scale
+          if (this.progressiveScale()) {
+            // Scale from 1 (center) to 0.9 (edges)
+            const minScale = 0.9;
+            const scale = 1 - (absProgress * (1 - minScale));
+            slideEl.style.transform = `scale(${Math.max(scale, minScale)})`;
+          }
+        });
+      };
+      
+      // Also update on init
+      config.on.init = () => {
+        if (!this.swiperInstance) return;
+        
+        this.swiperInstance.slides.forEach((slideEl: any) => {
+          const progress = slideEl.progress || 0;
+          const absProgress = Math.abs(progress);
+          
+          // Set initial opacity with sharper cutoff
+          if (this.progressiveOpacity()) {
+            let opacity;
+            if (absProgress > 0.5) {
+              opacity = 0;
+            } else {
+              opacity = 1 - (absProgress * 2);
+            }
+            slideEl.style.opacity = Math.max(opacity, 0).toString();
+          }
+          
+          // Set initial scale
+          if (this.progressiveScale()) {
+            const minScale = 0.9;
+            const scale = 1 - (absProgress * (1 - minScale));
+            slideEl.style.transform = `scale(${Math.max(scale, minScale)})`;
+          }
+        });
+      };
+    }
+
+    // Add pagination if enabled
+    if (this.pagination()) {
+      config.modules = [Pagination];
+      config.pagination = {
+        el: '.swiper-pagination',
+        clickable: true,
+        dynamicBullets: false,
+      };
+    }
+
+    this.swiperInstance = new Swiper(this.swiperContainer.nativeElement, config);
+  }
+  
+  /**
+   * Navigate to previous slide
+   */
+  slidePrev(): void {
+    this.swiperInstance?.slidePrev();
+  }
+  
+  /**
+   * Navigate to next slide
+   */
+  slideNext(): void {
+    this.swiperInstance?.slideNext();
+  }
+
+  /**
+   * Navigate to a specific slide by index
+   */
+  slideTo(index: number, speed = 300): void {
+    this.swiperInstance?.slideTo(index, speed);
+  }
+  
+  /**
+   * Check if at the beginning
+   */
+  isBeginning(): boolean {
+    return this.swiperInstance?.isBeginning ?? true;
+  }
+  
+  /**
+   * Check if at the end
+   */
+  isEnd(): boolean {
+    return this.swiperInstance?.isEnd ?? true;
+  }
+
+  /**
+   * Get the total number of slides
+   */
+  getSlideCount(): number {
+    return this.swiperInstance?.slides?.length ?? 0;
+  }
+
+  ngOnDestroy(): void {
+    if (this.swiperInstance) {
+      this.swiperInstance.destroy();
+      this.swiperInstance = null;
+    }
+  }
+}
+

package/src/components/swiper/index.ts

@@ -0,0 +1,3 @@
+export * from './ds-mobile-swiper';
+export * from './ds-mobile-swiper-with-nav';
+

package/src/components/system-message-banner/ds-mobile-system-message-banner.ts

@@ -0,0 +1,129 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * DsMobileSystemMessageBannerComponent
+ * 
+ * Full-width centered banner component for displaying system messages in chat conversations.
+ * Uses the same text styling as message bubbles for consistency.
+ * 
+ * Features:
+ * - Full-width centered layout
+ * - Subtle background with theming support
+ * - Same typography as message bubbles
+ * - Optional icon support
+ * 
+ * Common use cases:
+ * - Inquiry status updates ("Your inquiry has been assigned to...")
+ * - System notifications ("This inquiry is marked as resolved")
+ * - Auto-replies ("We aim to respond within 24 hours...")
+ * - Time/date separators
+ * 
+ * @example
+ * ```html
+ * <!-- Simple system message -->
+ * <ds-mobile-system-message-banner
+ *   [message]="'Ricki Meihlen har overtaget din henvendelse og vil kontakte dig snart.'">
+ * </ds-mobile-system-message-banner>
+ * 
+ * <!-- With icon -->
+ * <ds-mobile-system-message-banner
+ *   [message]="'Vi bestræber os på at svare inden for 24 timer på hverdage.'"
+ *   [iconName]="'remixInformationLine'">
+ * </ds-mobile-system-message-banner>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-system-message-banner',
+  standalone: true,
+  imports: [CommonModule],
+  host: {
+    '[class.after-timestamp]': 'afterTimestamp()'
+  },
+  styles: [`
+    :host {
+      display: block;
+      width: 100%;
+      padding: 12px 0;
+    }
+    
+    :host(.after-timestamp) {
+      padding-top: 0;
+    }
+    
+    .system-message-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      padding: 0 16px;
+    }
+    
+    .system-message-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 16px;
+      max-width: 85%;
+      text-align: center;
+    }
+    
+    .system-message-icon {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      color: var(--color-text-tertiary, #a0a0a0);
+    }
+    
+    .system-message-text {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--color-text-secondary, #666666);
+      margin: 0;
+    }
+  `],
+  template: `
+    <div class="system-message-container">
+      <div class="system-message-content">
+        @if (iconName()) {
+          <span class="system-message-icon">
+            <!-- Icon slot - you can add ds-icon component here if needed -->
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/>
+            </svg>
+          </span>
+        }
+        <p class="system-message-text">{{ message() }}</p>
+      </div>
+    </div>
+  `
+})
+export class DsMobileSystemMessageBannerComponent {
+  /**
+   * System message text to display
+   */
+  message = input.required<string>();
+  
+  /**
+   * Optional icon name (currently using inline SVG for info icon)
+   * Can be extended to support full icon library integration
+   */
+  iconName = input<string>('');
+  
+  /**
+   * Whether this system message appears directly after a timestamp
+   * When true, removes top padding to reduce spacing
+   */
+  afterTimestamp = input<boolean>(false);
+}
+
+
+
+
+

package/src/components/system-message-banner/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-system-message-banner';
+