@propbinder/mobile-design 0.2.47 → 0.2.50

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

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

@@ -0,0 +1,202 @@
+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>();
+}
+