@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/lightbox/ds-mobile-lightbox-footer.ts

@@ -1,315 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconButtonComponent } from '@propbinder/design-system';
-
-/**
- * DsMobileLightboxFooterComponent
- * 
- * Shared footer component for all lightbox types (image, PDF, etc.)
- * Displays navigation controls (for multiple images) and action buttons.
- */
-@Component({
-  selector: 'ds-mobile-lightbox-footer',
-  standalone: true,
-  imports: [CommonModule, DsIconButtonComponent],
-  template: `
-    <div class="lightbox-footer">
-      <!-- Navigation controls (only shown for multiple images) -->
-      @if (showNavigation() && totalImages() > 1) {
-        <div class="footer-navigation">
-          <button 
-            class="nav-button prev"
-            (click)="prevClick.emit()"
-            [disabled]="currentIndex() === 0"
-            aria-label="Previous image">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-              <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </button>
-          
-          <div class="counter">
-            {{ currentIndex() + 1 }} / {{ totalImages() }}
-          </div>
-          
-          <button 
-            class="nav-button next"
-            (click)="nextClick.emit()"
-            [disabled]="currentIndex() === totalImages() - 1"
-            aria-label="Next image">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-              <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </button>
-        </div>
-      }
-      
-      <!-- Action buttons -->
-      @if (showActions()) {
-        <div class="footer-actions">
-          <div class="action-buttons-left">
-            <!-- Like button -->
-            <ds-icon-button
-              [icon]="isLiked() ? 'remixHeart3Fill' : 'remixHeart3Line'"
-              variant="ghost"
-              size="md"
-              (click)="likeClick.emit()"
-              [attr.data-liked]="isLiked()"
-              class="action-button-like"
-              [ariaLabel]="'Like'">
-            </ds-icon-button>
-            
-            <!-- Comment button -->
-            <ds-icon-button
-              icon="remixChat3Line"
-              variant="ghost"
-              size="md"
-              (click)="commentClick.emit()"
-              class="action-button-comment"
-              [ariaLabel]="'Comment'">
-            </ds-icon-button>
-          </div>
-        </div>
-      }
-    </div>
-  `,
-  styles: [`
-    .lightbox-footer {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 100;
-      padding: 16px 20px 20px 20px;
-      background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
-      pointer-events: none;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    /* Navigation controls */
-    .footer-navigation {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 24px;
-      pointer-events: auto;
-    }
-
-    .nav-button {
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 50%;
-      color: white;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      padding: 0;
-    }
-
-    .nav-button:hover:not(:disabled) {
-      background: rgba(255, 255, 255, 0.2);
-      transform: scale(1.05);
-    }
-
-    .nav-button:active:not(:disabled) {
-      transform: scale(0.95);
-    }
-
-    .nav-button:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-
-    .nav-button svg {
-      width: 24px;
-      height: 24px;
-      flex-shrink: 0;
-    }
-
-    .counter {
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border-radius: 100px;
-      padding: 8px 16px;
-      color: white;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 500;
-      line-height: 1;
-      letter-spacing: -0.3px;
-      pointer-events: auto;
-      user-select: none;
-    }
-
-    .footer-actions {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      pointer-events: auto;
-    }
-
-    .action-buttons-left {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-
-    /* Style the action buttons to match the ghost/transparent look */
-    .action-button-like::ng-deep button,
-    .action-button-comment::ng-deep button {
-      background: rgba(255, 255, 255, 0.1) !important;
-      border: 1px solid rgba(255, 255, 255, 0.2) !important;
-      color: white !important;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      transition: all 0.2s ease;
-    }
-
-    .action-button-like::ng-deep button:hover,
-    .action-button-comment::ng-deep button:hover {
-      background: rgba(255, 255, 255, 0.2) !important;
-      transform: scale(1.02);
-    }
-
-    .action-button-like::ng-deep button:active,
-    .action-button-comment::ng-deep button:active {
-      transform: scale(0.98);
-    }
-
-    /* Icon and label colors */
-    .action-button-like::ng-deep button svg,
-    .action-button-comment::ng-deep button svg,
-    .action-button-like::ng-deep button .btn__icon,
-    .action-button-comment::ng-deep button .btn__icon,
-    .action-button-like::ng-deep button .btn__content,
-    .action-button-comment::ng-deep button .btn__content {
-      color: white !important;
-      fill: white !important;
-    }
-
-    /* Make sure icons are visible */
-    .action-button-like::ng-deep button .btn__icon svg,
-    .action-button-comment::ng-deep button .btn__icon svg {
-      color: white !important;
-      fill: white !important;
-      display: block !important;
-      opacity: 1 !important;
-      visibility: visible !important;
-      width: 20px !important;
-      height: 20px !important;
-    }
-
-    /* Ensure icon wrapper is visible */
-    .action-button-like::ng-deep button .btn__icon,
-    .action-button-comment::ng-deep button .btn__icon {
-      display: flex !important;
-      align-items: center !important;
-      justify-content: center !important;
-      flex-shrink: 0 !important;
-    }
-
-    /* Like button active state (pink heart) */
-    .action-button-like[data-liked="true"]::ng-deep button svg {
-      fill: #f91880 !important;
-      color: #f91880 !important;
-    }
-
-    .action-button-like[data-liked="true"]::ng-deep button {
-      border-color: rgba(249, 24, 128, 0.3) !important;
-    }
-
-    /* All action buttons should have same circular styling */
-    .action-button-like,
-    .action-button-comment {
-      flex-shrink: 0;
-      border-radius: 50%;
-    }
-
-    .action-button-like::ng-deep button,
-    .action-button-comment::ng-deep button {
-      border-radius: 50% !important;
-      width: 44px !important;
-      height: 44px !important;
-      min-width: 44px !important;
-      min-height: 44px !important;
-      padding: 0 !important;
-      display: flex !important;
-      align-items: center !important;
-      justify-content: center !important;
-    }
-
-    /* Safe area support for footer */
-    @supports (padding-bottom: env(safe-area-inset-bottom)) {
-      .lightbox-footer {
-        padding-bottom: calc(20px + env(safe-area-inset-bottom));
-      }
-    }
-  `]
-})
-export class DsMobileLightboxFooterComponent {
-  /**
-   * Whether to show navigation controls
-   */
-  showNavigation = input<boolean>(false);
-
-  /**
-   * Current image index (0-based)
-   */
-  currentIndex = input<number>(0);
-
-  /**
-   * Total number of images
-   */
-  totalImages = input<number>(1);
-
-  /**
-   * Whether to show like & comment action buttons
-   * @default false
-   */
-  showActions = input<boolean>(false);
-  
-  /**
-   * Whether the content is liked
-   */
-  isLiked = input<boolean>(false);
-  
-  /**
-   * Number of likes
-   */
-  likeCount = input<number>(0);
-  
-  /**
-   * Number of comments
-   */
-  commentCount = input<number>(0);
-
-  /**
-   * Emitted when previous button is clicked
-   */
-  prevClick = output<void>();
-
-  /**
-   * Emitted when next button is clicked
-   */
-  nextClick = output<void>();
-
-  /**
-   * Emitted when like button is clicked
-   */
-  likeClick = output<void>();
-
-  /**
-   * Emitted when comment button is clicked
-   */
-  commentClick = output<void>();
-}
-

package/src/components/lightbox/ds-mobile-lightbox-header.ts

@@ -1,202 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconButtonComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import type { LightboxAuthor } from './ds-mobile-lightbox.service';
-
-/**
- * DsMobileLightboxHeaderComponent
- * 
- * Shared header component for all lightbox types (image, PDF, etc.)
- * Displays author information and close button with consistent styling.
- */
-@Component({
-  selector: 'ds-mobile-lightbox-header',
-  standalone: true,
-  imports: [CommonModule, DsIconButtonComponent, DsAvatarComponent],
-  styleUrls: ['../shared/mobile-common.css'],
-  template: `
-    <div class="lightbox-header lightbox-context">
-      <div class="header-content">
-        <!-- Post author info -->
-        @if (author()) {
-          <div class="post-author-info">
-            <ds-avatar
-              [initials]="author()!.avatarInitials ?? ''"
-              [type]="author()!.avatarType ?? 'initials'"
-              [src]="author()!.avatarSrc ?? ''"
-              size="md"
-            />
-            <div class="author-details">
-              <div class="author-name">{{ author()!.name }}</div>
-              <div class="author-meta">
-                @if (author()!.role) {
-                  <span>{{ author()!.role }}</span>
-                }
-                @if (author()!.role && author()!.timestamp) {
-                  <span class="separator">·</span>
-                }
-                @if (author()!.timestamp) {
-                  <span>{{ author()!.timestamp }}</span>
-                }
-              </div>
-            </div>
-          </div>
-        }
-        
-        <!-- Action buttons - always visible -->
-        <div class="header-actions">
-          <ds-icon-button
-            icon="remixShare2Line"
-            variant="ghost"
-            size="md"
-            (clicked)="shareClick.emit()"
-            class="share-button"
-            [ariaLabel]="'Share'">
-          </ds-icon-button>
-          
-          <ds-icon-button
-            icon="remixCloseLine"
-            variant="ghost"
-            size="md"
-            (clicked)="closeClick.emit()"
-            class="close-button"
-            [ariaLabel]="'Close'">
-          </ds-icon-button>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .lightbox-header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1000;
-      padding: 0 16px;
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 80%, transparent 100%);
-      pointer-events: none;
-    }
-
-    .header-content {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 12px;
-      pointer-events: auto;
-    }
-
-    .post-author-info {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      flex: 1;
-      min-width: 0;
-      margin-right: auto;
-    }
-
-    .author-details {
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      flex: 1;
-    }
-
-    .author-name {
-      color: white;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 600;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-    }
-
-    .author-meta {
-      color: rgba(255, 255, 255, 0.7);
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .author-meta .separator {
-      color: rgba(255, 255, 255, 0.5);
-    }
-
-    .header-actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-
-    .close-button,
-    .share-button {
-      pointer-events: auto;
-      flex-shrink: 0;
-      border-radius: 50%;
-    }
-
-    .close-button::ng-deep button,
-    .share-button::ng-deep button {
-      color: white !important;
-      background: rgba(255, 255, 255, 0.1) !important;
-      border-radius: 50%;
-      transition: background 0.2s ease;
-      border: none;
-      width: 36px !important;
-      height: 36px !important;
-      min-width: 36px !important;
-      min-height: 36px !important;
-      padding: 0 !important;
-      display: flex !important;
-      align-items: center !important;
-      justify-content: center !important;
-    }
-
-    .close-button::ng-deep button:hover,
-    .share-button::ng-deep button:hover {
-      background: rgba(255, 255, 255, 0.15) !important;
-    }
-
-    .close-button::ng-deep button:active,
-    .share-button::ng-deep button:active {
-      background: rgba(255, 255, 255, 0.15) !important;
-    }
-
-    .close-button::ng-deep svg,
-    .share-button::ng-deep svg {
-      color: white !important;
-      fill: white !important;
-    }
-
-    /* Safe area support for notched devices */
-    @supports (padding-top: env(safe-area-inset-top)) {
-      .lightbox-header {
-        padding-top: calc(16px + env(safe-area-inset-top));
-      }
-    }
-  `]
-})
-export class DsMobileLightboxHeaderComponent {
-  /**
-   * Author information to display
-   */
-  author = input<LightboxAuthor>();
-
-  /**
-   * Emitted when close button is clicked
-   */
-  closeClick = output<void>();
-  
-  /**
-   * Emitted when share button is clicked
-   */
-  shareClick = output<void>();
-}
-