@propbinder/mobile-design 0.2.50 → 0.2.52

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

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

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

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

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

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

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