@propbinder/mobile-design 0.2.15 → 0.2.16

package/fesm2022/propbinder-mobile-design.mjs

@@ -17,12 +17,12 @@ import { Camera, CameraSource, CameraResultType } from '@capacitor/camera';
 import { Subject } from 'rxjs';
 import { createAnimation } from '@ionic/core';
 import { filter } from 'rxjs/operators';
-import { Share } from '@capacitor/share';
 import Swiper from 'swiper';
+import { Pagination } from 'swiper/modules';
+import { Share } from '@capacitor/share';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Browser } from '@capacitor/browser';
 import { Capacitor } from '@capacitor/core';
-import { Pagination } from 'swiper/modules';
 import * as i1$3 from '@angular/platform-browser';
 
 const DEFAULT_CONFIG = {
@@ -9479,902 +9479,1211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 /**
- * DsMobileLightboxHeaderComponent
+ * DsMobileSwiperComponent
  *
- * Shared header component for all lightbox types (image, PDF, etc.)
- * Displays author information and close button with consistent styling.
- */
-class DsMobileLightboxHeaderComponent {
-    /**
-     * Author information to display
-     */
-    author = input(...(ngDevMode ? [undefined, { debugName: "author" }] : []));
-    /**
-     * Emitted when close button is clicked
-     */
-    closeClick = output();
-    /**
-     * Emitted when share button is clicked
-     */
-    shareClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxHeaderComponent, isStandalone: true, selector: "ds-mobile-lightbox-header", inputs: { author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick", shareClick: "shareClick" }, ngImport: i0, 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>
-  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".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,.8) 0%,rgba(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:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.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:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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:#ffffff26!important}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}@supports (padding-top: env(safe-area-inset-top)){.lightbox-header{padding-top:calc(16px + env(safe-area-inset-top))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-lightbox-header', standalone: true, imports: [CommonModule, DsIconButtonComponent, DsAvatarComponent], 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: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".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,.8) 0%,rgba(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:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.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:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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:#ffffff26!important}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}@supports (padding-top: env(safe-area-inset-top)){.lightbox-header{padding-top:calc(16px + env(safe-area-inset-top))}}\n"] }]
-        }], propDecorators: { author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }], shareClick: [{ type: i0.Output, args: ["shareClick"] }] } });
-
-/**
- * DsMobileLightboxFooterComponent
+ * A reusable swiper/carousel component with configurable child width and spacing.
  *
- * Shared footer component for all lightbox types (image, PDF, etc.)
- * Displays navigation controls (for multiple images) and action buttons.
+ * 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>
+ * ```
  */
-class DsMobileLightboxFooterComponent {
-    /**
-     * Whether to show navigation controls
-     */
-    showNavigation = input(false, ...(ngDevMode ? [{ debugName: "showNavigation" }] : []));
-    /**
-     * Current image index (0-based)
-     */
-    currentIndex = input(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
-    /**
-     * Total number of images
-     */
-    totalImages = input(1, ...(ngDevMode ? [{ debugName: "totalImages" }] : []));
-    /**
-     * Whether to show like & comment action buttons
-     * @default false
-     */
-    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
-    /**
-     * Whether the content is liked
-     */
-    isLiked = input(false, ...(ngDevMode ? [{ debugName: "isLiked" }] : []));
+class DsMobileSwiperComponent {
+    elementRef;
     /**
-     * Number of likes
+     * Width of each slide (e.g., '75vw', '300px', '80%')
      */
-    likeCount = input(0, ...(ngDevMode ? [{ debugName: "likeCount" }] : []));
+    slideWidth = input('75vw', ...(ngDevMode ? [{ debugName: "slideWidth" }] : []));
     /**
-     * Number of comments
+     * Gap between slides in pixels
      */
-    commentCount = input(0, ...(ngDevMode ? [{ debugName: "commentCount" }] : []));
+    gap = input(16, ...(ngDevMode ? [{ debugName: "gap" }] : []));
     /**
-     * Emitted when previous button is clicked
+     * Enable pagination dots
      */
-    prevClick = output();
+    pagination = input(false, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
     /**
-     * Emitted when next button is clicked
+     * Enable auto height - container adapts to active slide's height
      */
-    nextClick = output();
+    autoHeight = input(false, ...(ngDevMode ? [{ debugName: "autoHeight" }] : []));
     /**
-     * Emitted when like button is clicked
+     * Enable progressive opacity based on slide position
+     * Slides fade in/out smoothly as they move toward/away from center
      */
-    likeClick = output();
+    progressiveOpacity = input(false, ...(ngDevMode ? [{ debugName: "progressiveOpacity" }] : []));
     /**
-     * Emitted when comment button is clicked
+     * Enable progressive scale based on slide position
+     * Slides scale down smoothly as they move away from center
      */
-    commentClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxFooterComponent, isStandalone: true, selector: "ds-mobile-lightbox-footer", inputs: { showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null }, totalImages: { classPropertyName: "totalImages", publicName: "totalImages", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, isLiked: { classPropertyName: "isLiked", publicName: "isLiked", isSignal: true, isRequired: false, transformFunction: null }, likeCount: { classPropertyName: "likeCount", publicName: "likeCount", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", likeClick: "likeClick", commentClick: "commentClick" }, ngImport: i0, 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>
-  `, isInline: true, styles: [".lightbox-footer{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:16px 20px 20px;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none;display:flex;flex-direction:column;gap:12px}.footer-navigation{display:flex;align-items:center;justify-content:center;gap:24px;pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px;flex-shrink:0}.counter{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:100px;padding:8px 16px;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;letter-spacing:-.3px;pointer-events:auto;-webkit-user-select:none;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}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active{transform:scale(.98)}.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:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.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}.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:#f918804d!important}.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}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxFooterComponent, decorators: [{
-            type: Component,
-            args: [{ 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;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none;display:flex;flex-direction:column;gap:12px}.footer-navigation{display:flex;align-items:center;justify-content:center;gap:24px;pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px;flex-shrink:0}.counter{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:100px;padding:8px 16px;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;letter-spacing:-.3px;pointer-events:auto;-webkit-user-select:none;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}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active{transform:scale(.98)}.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:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.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}.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:#f918804d!important}.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}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"] }]
-        }], propDecorators: { showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }], totalImages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalImages", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], isLiked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLiked", required: false }] }], likeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "likeCount", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], prevClick: [{ type: i0.Output, args: ["prevClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }], likeClick: [{ type: i0.Output, args: ["likeClick"] }], commentClick: [{ type: i0.Output, args: ["commentClick"] }] } });
-
-/**
- * DsMobileLightboxImageComponent
- *
- * Full-screen image lightbox component with Swiper.js navigation and pinch-zoom.
- *
- * This component is typically not used directly - use DsMobileLightboxService instead.
- *
- * Features:
- * - Swiper.js for smooth image navigation
- * - Pinch to zoom in/out
- * - Double-tap to toggle zoom
- * - Swipe down to close (when not zoomed)
- * - Image counter and navigation controls
- *
- * @example
- * ```typescript
- * // Don't instantiate directly - use the service:
- * constructor(private lightbox: DsMobileLightboxService) {}
- *
- * openImage() {
- *   this.lightbox.openImages({
- *     images: [{ type: 'image', src: 'image.jpg', title: 'My Image' }]
- *   });
- * }
- * ```
- */
-class DsMobileLightboxImageComponent {
-    gestureCtrl;
-    // Inputs (passed from service as regular properties, not signals)
-    images;
-    author;
-    initialIndex = 0;
-    enableZoom = true;
-    showControls = true;
-    enableSwipe = true;
-    showInfo = true;
-    showActions = false;
-    animation = 'fade';
-    onCloseRequested;
-    // View children
+    progressiveScale = input(false, ...(ngDevMode ? [{ debugName: "progressiveScale" }] : []));
     swiperContainer;
-    // State
-    currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
-    scale = signal(1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
-    isZoomed = signal(false, ...(ngDevMode ? [{ debugName: "isZoomed" }] : []));
-    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
-    // Action states
-    isLiked = signal(false, ...(ngDevMode ? [{ debugName: "isLiked" }] : []));
-    likeCount = signal(0, ...(ngDevMode ? [{ debugName: "likeCount" }] : []));
-    commentCount = signal(0, ...(ngDevMode ? [{ debugName: "commentCount" }] : []));
-    // Computed
-    currentImage = computed(() => this.images[this.currentIndex()], ...(ngDevMode ? [{ debugName: "currentImage" }] : []));
-    // Swiper instance
-    swiper;
-    zoomData = new Map();
-    constructor(gestureCtrl) {
-        this.gestureCtrl = gestureCtrl;
-    }
-    ngOnInit() {
-        // Set initial index from the passed property
-        if (this.initialIndex !== undefined) {
-            this.currentIndex.set(this.initialIndex);
-        }
-        // Initialize action states from current image
-        const currentImg = this.images[this.currentIndex()];
-        if (currentImg) {
-            this.isLiked.set(currentImg.isLiked ?? false);
-            this.likeCount.set(currentImg.likeCount ?? 0);
-            this.commentCount.set(currentImg.commentCount ?? 0);
-        }
+    swiperInstance = null;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
     }
     ngAfterViewInit() {
+        // Add progressive-opacity class to host if enabled
+        if (this.progressiveOpacity()) {
+            this.elementRef.nativeElement.classList.add('progressive-opacity');
+        }
         setTimeout(() => {
             this.initializeSwiper();
-            this.initializeZoomGestures();
         }, 100);
     }
-    ngOnDestroy() {
-        // Clean up Swiper
-        if (this.swiper) {
-            this.swiper.destroy();
-            this.swiper = undefined;
-        }
-    }
-    /**
-     * Initialize Swiper for image navigation
-     */
     initializeSwiper() {
-        if (!this.swiperContainer) {
-            console.error('[Lightbox] Swiper container not found');
+        if (!this.swiperContainer)
             return;
-        }
-        const swiperOptions = {
-            initialSlide: this.initialIndex,
+        // Apply slide width to all slides
+        const slides = this.swiperContainer.nativeElement.querySelectorAll('.swiper-slide');
+        slides.forEach((slide, index) => {
+            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 = {
+            slidesPerView: 'auto',
+            spaceBetween: this.gap(),
+            centeredSlides: true,
+            centeredSlidesBounds: true,
             speed: 300,
             resistance: true,
             resistanceRatio: 0.85,
-            slidesPerView: 1,
-            spaceBetween: 0,
-            touchRatio: 1,
-            longSwipesRatio: 0.5,
-            threshold: 10,
-            on: {
-                slideChange: (swiper) => {
-                    this.currentIndex.set(swiper.activeIndex);
-                    this.updateActionStates();
-                    // Check if the image is already loaded
-                    const currentSlide = swiper.slides[swiper.activeIndex];
-                    const img = currentSlide?.querySelector('img');
-                    if (img && img.complete && img.naturalHeight !== 0) {
-                        // Image is already loaded
-                        this.isLoading.set(false);
+            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) => {
+                    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();
                     }
-                },
-                slideChangeTransitionStart: () => {
-                    // Don't show loading spinner if image is already loaded
-                    const currentSlide = this.swiper?.slides[this.swiper.activeIndex];
-                    const img = currentSlide?.querySelector('img');
-                    if (!img || !img.complete || img.naturalHeight === 0) {
-                        this.isLoading.set(true);
+                    // 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)})`;
                     }
-                }
-            }
-        };
-        this.swiper = new Swiper(this.swiperContainer.nativeElement, swiperOptions);
-        // Check if the initial image is already loaded
-        setTimeout(() => {
-            const currentSlide = this.swiper?.slides[this.currentIndex()];
-            const img = currentSlide?.querySelector('img');
-            if (img && img.complete && img.naturalHeight !== 0) {
-                this.isLoading.set(false);
-            }
-        }, 0);
-    }
-    /**
-     * Initialize pinch-zoom gestures for all slides
-     */
-    initializeZoomGestures() {
-        if (!this.enableZoom)
-            return;
-        const slides = this.swiperContainer.nativeElement.querySelectorAll('.image-zoom-container');
-        slides.forEach((slide, index) => {
-            this.initializeZoomForSlide(slide, index);
-        });
-    }
-    /**
-     * Initialize zoom gestures for a specific slide
-     */
-    initializeZoomForSlide(container, index) {
-        let initialDistance = 0;
-        let initialScale = 1;
-        let currentScale = 1;
-        let lastTap = 0;
-        // Double-tap to zoom
-        container.addEventListener('click', (event) => {
-            const now = Date.now();
-            const timeSinceLastTap = now - lastTap;
-            if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
-                event.preventDefault();
-                this.toggleZoom(container, index);
-            }
-            lastTap = now;
-        });
-        // Pinch to zoom
-        const getTouchDistance = (touches) => {
-            const dx = touches[0].clientX - touches[1].clientX;
-            const dy = touches[0].clientY - touches[1].clientY;
-            return Math.sqrt(dx * dx + dy * dy);
-        };
-        container.addEventListener('touchstart', (event) => {
-            if (event.touches.length === 2) {
-                event.preventDefault();
-                initialDistance = getTouchDistance(event.touches);
-                const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
-                initialScale = zoomData.scale;
-                // Disable Swiper when zooming
-                if (this.swiper) {
-                    this.swiper.allowTouchMove = false;
-                }
-            }
-        }, { passive: false });
-        container.addEventListener('touchmove', (event) => {
-            if (event.touches.length === 2) {
-                event.preventDefault();
-                const currentDistance = getTouchDistance(event.touches);
-                const pinchScale = currentDistance / initialDistance;
-                currentScale = Math.max(1, Math.min(initialScale * pinchScale, 4));
-                const img = container.querySelector('img');
-                if (img) {
-                    img.style.transform = `scale(${currentScale})`;
-                }
-                if (currentScale > 1) {
-                    this.isZoomed.set(true);
-                }
-                else {
-                    this.isZoomed.set(false);
-                }
-            }
-        }, { passive: false });
-        container.addEventListener('touchend', (event) => {
-            if (event.touches.length < 2) {
-                // Save zoom state
-                this.zoomData.set(index, { scale: currentScale, x: 0, y: 0 });
-                // Re-enable Swiper if not zoomed
-                if (this.swiper && currentScale <= 1) {
-                    this.swiper.allowTouchMove = true;
-                }
-            }
-        });
-    }
-    /**
-     * Toggle zoom on double-tap
-     */
-    toggleZoom(container, index) {
-        const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
-        const img = container.querySelector('img');
-        if (!img)
-            return;
-        if (zoomData.scale > 1) {
-            // Zoom out
-            img.style.transform = 'scale(1)';
-            this.zoomData.set(index, { scale: 1, x: 0, y: 0 });
-            this.isZoomed.set(false);
-            if (this.swiper) {
-                this.swiper.allowTouchMove = true;
-            }
-        }
-        else {
-            // Zoom in
-            img.style.transform = 'scale(2)';
-            this.zoomData.set(index, { scale: 2, x: 0, y: 0 });
-            this.isZoomed.set(true);
-            if (this.swiper) {
-                this.swiper.allowTouchMove = false;
-            }
-        }
-    }
-    /**
-     * Update action states (like, comments) when slide changes
-     */
-    updateActionStates() {
-        const currentImg = this.images[this.currentIndex()];
-        if (currentImg) {
-            this.isLiked.set(currentImg.isLiked ?? false);
-            this.likeCount.set(currentImg.likeCount ?? 0);
-            this.commentCount.set(currentImg.commentCount ?? 0);
-        }
-    }
-    /**
-     * Close the lightbox
-     */
-    close() {
-        if (this.onCloseRequested) {
-            this.onCloseRequested();
-        }
-    }
-    /**
-     * Handle share button click
-     */
-    async onShare() {
-        console.log('[Lightbox] Share button clicked');
-        const currentImg = this.currentImage();
-        if (!currentImg?.src) {
-            console.warn('[Lightbox] No image to share');
-            return;
-        }
-        try {
-            // Check if Web Share API is available (for browser)
-            if (navigator.share) {
-                await navigator.share({
-                    title: currentImg.title || 'Shared Image',
-                    text: currentImg.description || '',
-                    url: currentImg.src,
                 });
-                console.log('[Lightbox] Shared via Web Share API');
-            }
-            else {
-                // Fallback to Capacitor Share API (for native apps)
-                await Share.share({
-                    title: currentImg.title || 'Shared Image',
-                    url: currentImg.src,
-                    dialogTitle: 'Share Image',
+            };
+            // Also update on init
+            config.on.init = () => {
+                if (!this.swiperInstance)
+                    return;
+                this.swiperInstance.slides.forEach((slideEl) => {
+                    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)})`;
+                    }
                 });
-                console.log('[Lightbox] Shared via Capacitor Share API');
-            }
-        }
-        catch (error) {
-            // User cancellation is expected and not an error
-            if (error?.message?.includes('cancel') || error?.code === 'USER_CANCELLED') {
-                console.log('[Lightbox] Share cancelled by user');
-                return;
-            }
-            console.error('[Lightbox] Share failed:', error);
-        }
-    }
-    /**
-     * Handle like button toggle
-     */
-    onLikeToggle() {
-        console.log('[Lightbox] Like button toggled');
-        this.isLiked.update(liked => !liked);
-        if (this.isLiked()) {
-            this.likeCount.update(count => count + 1);
+            };
         }
-        else {
-            this.likeCount.update(count => Math.max(0, count - 1));
+        // 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);
     }
     /**
-     * Handle reply/comment button click
+     * Navigate to previous slide
      */
-    onReply() {
-        console.log('[Lightbox] Reply button clicked');
-        if (this.onCloseRequested) {
-            this.onCloseRequested();
-        }
+    slidePrev() {
+        this.swiperInstance?.slidePrev();
     }
     /**
-     * Navigate to the next image
+     * Navigate to next slide
      */
-    nextImage() {
-        if (this.swiper && this.currentIndex() < this.images.length - 1) {
-            this.swiper.slideNext();
-        }
+    slideNext() {
+        this.swiperInstance?.slideNext();
     }
     /**
-     * Navigate to the previous image
+     * Check if at the beginning
      */
-    previousImage() {
-        if (this.swiper && this.currentIndex() > 0) {
-            this.swiper.slidePrev();
-        }
+    isBeginning() {
+        return this.swiperInstance?.isBeginning ?? true;
     }
     /**
-     * Handle image load success
+     * Check if at the end
      */
-    onImageLoad(index) {
-        if (index === this.currentIndex()) {
-            this.isLoading.set(false);
-        }
+    isEnd() {
+        return this.swiperInstance?.isEnd ?? true;
     }
-    /**
-     * Handle image load error
-     */
-    onImageError(index) {
-        if (index === this.currentIndex()) {
-            console.error(`[Lightbox] Image ${index} failed to load`);
-            this.isLoading.set(false);
-            this.hasError.set(true);
+    ngOnDestroy() {
+        if (this.swiperInstance) {
+            this.swiperInstance.destroy();
+            this.swiperInstance = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageComponent, deps: [{ token: i1.GestureController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxImageComponent, isStandalone: true, selector: "ds-mobile-lightbox-image", viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-    <div class="lightbox-overlay" 
-      [class.zoomed]="isZoomed()">
-      
-      <div class="lightbox-wrapper">
-        <!-- Header with author info and action buttons -->
-        <ds-mobile-lightbox-header 
-          [author]="author"
-          (closeClick)="close()"
-          (shareClick)="onShare()"
-        />
-
-        <!-- Swiper container -->
-        <div class="swiper-container" #swiperContainer>
-          <div class="swiper-wrapper">
-            @for (image of images; track image.src; let i = $index) {
-              <div class="swiper-slide">
-                <div class="image-zoom-container" [attr.data-index]="i">
-                  <img 
-                    [src]="image.src"
-                    [alt]="image.alt || 'Lightbox image'"
-                    class="lightbox-image"
-                    (load)="onImageLoad(i)"
-                    (error)="onImageError(i)">
-                </div>
-              </div>
-            }
-          </div>
-        </div>
-          
-        <!-- Loading indicator -->
-        @if (isLoading()) {
-          <div class="loading-spinner">
-            <ion-spinner name="crescent"></ion-spinner>
-          </div>
-        }
-
-        <!-- Footer with navigation and actions -->
-        <ds-mobile-lightbox-footer
-          [showNavigation]="showControls && images.length > 1"
-          [showActions]="showActions"
-          [currentIndex]="currentIndex()"
-          [totalImages]="images.length"
-          [isLiked]="isLiked()"
-          [likeCount]="likeCount()"
-          [commentCount]="commentCount()"
-          (prevClick)="previousImage()"
-          (nextClick)="nextImage()"
-          (likeClick)="onLikeToggle()"
-          (commentClick)="onReply()"
-        />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSwiperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSwiperComponent, isStandalone: true, selector: "ds-mobile-swiper", inputs: { slideWidth: { classPropertyName: "slideWidth", publicName: "slideWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, progressiveOpacity: { classPropertyName: "progressiveOpacity", publicName: "progressiveOpacity", isSignal: true, isRequired: false, transformFunction: null }, progressiveScale: { classPropertyName: "progressiveScale", publicName: "progressiveScale", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: `
+    <div class="swiper-container" #swiperContainer>
+      <div class="swiper-wrapper">
+        <ng-content></ng-content>
       </div>
+      @if (pagination()) {
+        <div class="swiper-pagination"></div>
+      }
     </div>
-  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.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,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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{background:#ffffff26!important}.close-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.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:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::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}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author"], outputs: ["closeClick", "shareClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }] });
+  `, isInline: true, 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 .3s ease,transform .3s ease}:host(.progressive-opacity) ::ng-deep .swiper-slide{opacity:0}:host(.progressive-opacity) ::ng-deep .swiper-slide:first-child{opacity:1}.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:.25;transition:all .3s ease;cursor:pointer}:host ::ng-deep .swiper-pagination-bullet-active{opacity:1;background:var(--color-accent);width:20px;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSwiperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-lightbox-image', standalone: true, imports: [
-                        CommonModule,
-                        IonSpinner,
-                        DsMobileLightboxHeaderComponent,
-                        DsMobileLightboxFooterComponent
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
-    <div class="lightbox-overlay" 
-      [class.zoomed]="isZoomed()">
-      
-      <div class="lightbox-wrapper">
-        <!-- Header with author info and action buttons -->
-        <ds-mobile-lightbox-header 
-          [author]="author"
-          (closeClick)="close()"
-          (shareClick)="onShare()"
-        />
-
-        <!-- Swiper container -->
-        <div class="swiper-container" #swiperContainer>
-          <div class="swiper-wrapper">
-            @for (image of images; track image.src; let i = $index) {
-              <div class="swiper-slide">
-                <div class="image-zoom-container" [attr.data-index]="i">
-                  <img 
-                    [src]="image.src"
-                    [alt]="image.alt || 'Lightbox image'"
-                    class="lightbox-image"
-                    (load)="onImageLoad(i)"
-                    (error)="onImageError(i)">
-                </div>
-              </div>
-            }
-          </div>
-        </div>
-          
-        <!-- Loading indicator -->
-        @if (isLoading()) {
-          <div class="loading-spinner">
-            <ion-spinner name="crescent"></ion-spinner>
-          </div>
-        }
-
-        <!-- Footer with navigation and actions -->
-        <ds-mobile-lightbox-footer
-          [showNavigation]="showControls && images.length > 1"
-          [showActions]="showActions"
-          [currentIndex]="currentIndex()"
-          [totalImages]="images.length"
-          [isLiked]="isLiked()"
-          [likeCount]="likeCount()"
-          [commentCount]="commentCount()"
-          (prevClick)="previousImage()"
-          (nextClick)="nextImage()"
-          (likeClick)="onLikeToggle()"
-          (commentClick)="onReply()"
-        />
+            args: [{ 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: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.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,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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{background:#ffffff26!important}.close-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.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:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::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}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.GestureController }], propDecorators: { swiperContainer: [{
+  `, 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 .3s ease,transform .3s ease}:host(.progressive-opacity) ::ng-deep .swiper-slide{opacity:0}:host(.progressive-opacity) ::ng-deep .swiper-slide:first-child{opacity:1}.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:.25;transition:all .3s ease;cursor:pointer}:host ::ng-deep .swiper-pagination-bullet-active{opacity:1;background:var(--color-accent);width:20px;border-radius:3px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { slideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], progressiveOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressiveOpacity", required: false }] }], progressiveScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressiveScale", required: false }] }], swiperContainer: [{
                 type: ViewChild,
-                args: ['swiperContainer', { read: ElementRef }]
+                args: ['swiperContainer', { static: false }]
             }] } });
 
 /**
- * DsMobileLightboxPdfComponent
- *
- * PDF viewer component that displays PDF info and allows users to open PDFs in the native device viewer.
- * Shows a lightbox with PDF details first, then user can choose to open in native viewer.
+ * DsMobileSystemMessageBannerComponent
  *
- * This component is typically not used directly - use DsMobileLightboxService instead.
+ * Full-width centered banner component for displaying system messages in chat conversations.
+ * Uses the same text styling as message bubbles for consistency.
  *
  * Features:
- * - PDF info preview (title, size, icon)
- * - User-initiated native PDF viewing (iOS/Android)
- * - Download and cache support
- * - Share functionality
- * - Loading states
+ * - 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
- * ```typescript
- * // Don't instantiate directly - use the service:
- * constructor(private lightbox: DsMobileLightboxService) {}
+ * ```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>
  *
- * openPdf() {
- *   this.lightbox.openPdf({
- *     pdf: { type: 'pdf', src: 'document.pdf', title: 'My Document' }
- *   });
- * }
+ * <!-- 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>
  * ```
  */
-class DsMobileLightboxPdfComponent {
-    // Inputs (passed from service as regular properties)
-    pdf;
-    author;
-    onCloseRequested;
-    // State
-    isLoading = false;
-    hasError = false;
-    errorMessage = '';
-    cachedFilePath;
-    constructor() { }
-    ngOnInit() {
-        console.log('[PDF Lightbox] Initializing with PDF:', this.pdf);
-        // Don't automatically open - let user click the "Open" button
-        // this.openPdfInNativeViewer();
-    }
+class DsMobileSystemMessageBannerComponent {
     /**
-     * Open the PDF in the native device viewer
+     * System message text to display
      */
-    async openPdfInNativeViewer() {
-        if (!this.pdf?.src) {
-            console.error('[PDF Lightbox] No PDF source provided');
-            this.hasError = true;
-            this.errorMessage = 'No PDF file provided';
-            return;
-        }
-        this.isLoading = true;
-        this.hasError = false;
-        this.errorMessage = '';
-        try {
-            console.log('[PDF Lightbox] Opening PDF:', this.pdf.src);
-            // Check if it's already a full URL
-            let pdfUrl;
-            if (this.pdf.src.startsWith('http://') || this.pdf.src.startsWith('https://')) {
-                // Already a full URL
-                pdfUrl = this.pdf.src;
-            }
-            else {
-                // Relative path - construct full URL
-                // Use current origin (which includes the dev server URL in Capacitor)
-                // Remove leading slash if present to avoid double slashes
-                const cleanPath = this.pdf.src.startsWith('/') ? this.pdf.src.slice(1) : this.pdf.src;
-                pdfUrl = `${window.location.origin}/${cleanPath}`;
-            }
-            console.log('[PDF Lightbox] Opening PDF at URL:', pdfUrl);
-            // Use Browser to open the PDF
-            await Browser.open({
-                url: pdfUrl,
-                presentationStyle: 'fullscreen'
-            });
-            this.isLoading = false;
-            // Close the modal after opening browser
-            setTimeout(() => {
-                this.close();
-            }, 500);
-        }
-        catch (error) {
-            console.error('[PDF Lightbox] Error opening PDF:', error);
-            this.isLoading = false;
-            this.hasError = true;
-            this.errorMessage = error?.message || 'Failed to open PDF';
-        }
-    }
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
     /**
-     * Download a remote PDF and open it
+     * Optional icon name (currently using inline SVG for info icon)
+     * Can be extended to support full icon library integration
      */
-    async downloadAndOpenPdf() {
-        try {
-            console.log('[PDF Lightbox] Downloading PDF from:', this.pdf.src);
-            // Fetch the PDF
-            const response = await fetch(this.pdf.src);
-            if (!response.ok) {
-                throw new Error(`Failed to download PDF: ${response.statusText}`);
-            }
-            const blob = await response.blob();
-            const base64Data = await this.blobToBase64(blob);
-            // Generate a filename
-            const fileName = this.pdf.title
-                ? `${this.pdf.title.replace(/[^a-z0-9]/gi, '_')}.pdf`
-                : 'document.pdf';
-            // Save to cache directory
-            const result = await Filesystem.writeFile({
-                path: fileName,
-                data: base64Data,
-                directory: Directory.Cache
-            });
-            console.log('[PDF Lightbox] PDF saved to cache:', result.uri);
-            this.cachedFilePath = result.uri;
-            // Open using Browser
+    iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    /**
+     * Whether this system message appears directly after a timestamp
+     * When true, removes top padding to reduce spacing
+     */
+    afterTimestamp = input(false, ...(ngDevMode ? [{ debugName: "afterTimestamp" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSystemMessageBannerComponent, isStandalone: true, selector: "ds-mobile-system-message-banner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, afterTimestamp: { classPropertyName: "afterTimestamp", publicName: "afterTimestamp", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.after-timestamp": "afterTimestamp()" } }, ngImport: i0, 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>
+  `, isInline: true, 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:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-system-message-banner', standalone: true, imports: [CommonModule], host: {
+                        '[class.after-timestamp]': 'afterTimestamp()'
+                    }, 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>
+  `, 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:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], afterTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterTimestamp", required: false }] }] } });
+
+/**
+ * DsMobileLightboxHeaderComponent
+ *
+ * Shared header component for all lightbox types (image, PDF, etc.)
+ * Displays author information and close button with consistent styling.
+ */
+class DsMobileLightboxHeaderComponent {
+    /**
+     * Author information to display
+     */
+    author = input(...(ngDevMode ? [undefined, { debugName: "author" }] : []));
+    /**
+     * Emitted when close button is clicked
+     */
+    closeClick = output();
+    /**
+     * Emitted when share button is clicked
+     */
+    shareClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxHeaderComponent, isStandalone: true, selector: "ds-mobile-lightbox-header", inputs: { author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick", shareClick: "shareClick" }, ngImport: i0, 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>
+  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".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,.8) 0%,rgba(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:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.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:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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:#ffffff26!important}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}@supports (padding-top: env(safe-area-inset-top)){.lightbox-header{padding-top:calc(16px + env(safe-area-inset-top))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-lightbox-header', standalone: true, imports: [CommonModule, DsIconButtonComponent, DsAvatarComponent], 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: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".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,.8) 0%,rgba(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:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.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:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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:#ffffff26!important}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}@supports (padding-top: env(safe-area-inset-top)){.lightbox-header{padding-top:calc(16px + env(safe-area-inset-top))}}\n"] }]
+        }], propDecorators: { author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }], shareClick: [{ type: i0.Output, args: ["shareClick"] }] } });
+
+/**
+ * DsMobileLightboxFooterComponent
+ *
+ * Shared footer component for all lightbox types (image, PDF, etc.)
+ * Displays navigation controls (for multiple images) and action buttons.
+ */
+class DsMobileLightboxFooterComponent {
+    /**
+     * Whether to show navigation controls
+     */
+    showNavigation = input(false, ...(ngDevMode ? [{ debugName: "showNavigation" }] : []));
+    /**
+     * Current image index (0-based)
+     */
+    currentIndex = input(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    /**
+     * Total number of images
+     */
+    totalImages = input(1, ...(ngDevMode ? [{ debugName: "totalImages" }] : []));
+    /**
+     * Whether to show like & comment action buttons
+     * @default false
+     */
+    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+    /**
+     * Whether the content is liked
+     */
+    isLiked = input(false, ...(ngDevMode ? [{ debugName: "isLiked" }] : []));
+    /**
+     * Number of likes
+     */
+    likeCount = input(0, ...(ngDevMode ? [{ debugName: "likeCount" }] : []));
+    /**
+     * Number of comments
+     */
+    commentCount = input(0, ...(ngDevMode ? [{ debugName: "commentCount" }] : []));
+    /**
+     * Emitted when previous button is clicked
+     */
+    prevClick = output();
+    /**
+     * Emitted when next button is clicked
+     */
+    nextClick = output();
+    /**
+     * Emitted when like button is clicked
+     */
+    likeClick = output();
+    /**
+     * Emitted when comment button is clicked
+     */
+    commentClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxFooterComponent, isStandalone: true, selector: "ds-mobile-lightbox-footer", inputs: { showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null }, totalImages: { classPropertyName: "totalImages", publicName: "totalImages", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, isLiked: { classPropertyName: "isLiked", publicName: "isLiked", isSignal: true, isRequired: false, transformFunction: null }, likeCount: { classPropertyName: "likeCount", publicName: "likeCount", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", likeClick: "likeClick", commentClick: "commentClick" }, ngImport: i0, 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>
+  `, isInline: true, styles: [".lightbox-footer{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:16px 20px 20px;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none;display:flex;flex-direction:column;gap:12px}.footer-navigation{display:flex;align-items:center;justify-content:center;gap:24px;pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px;flex-shrink:0}.counter{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:100px;padding:8px 16px;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;letter-spacing:-.3px;pointer-events:auto;-webkit-user-select:none;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}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active{transform:scale(.98)}.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:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.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}.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:#f918804d!important}.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}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxFooterComponent, decorators: [{
+            type: Component,
+            args: [{ 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;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none;display:flex;flex-direction:column;gap:12px}.footer-navigation{display:flex;align-items:center;justify-content:center;gap:24px;pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px;flex-shrink:0}.counter{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:100px;padding:8px 16px;color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;letter-spacing:-.3px;pointer-events:auto;-webkit-user-select:none;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}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active{transform:scale(.98)}.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:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.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}.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:#f918804d!important}.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}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"] }]
+        }], propDecorators: { showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }], totalImages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalImages", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], isLiked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLiked", required: false }] }], likeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "likeCount", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], prevClick: [{ type: i0.Output, args: ["prevClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }], likeClick: [{ type: i0.Output, args: ["likeClick"] }], commentClick: [{ type: i0.Output, args: ["commentClick"] }] } });
+
+/**
+ * DsMobileLightboxImageComponent
+ *
+ * Full-screen image lightbox component with Swiper.js navigation and pinch-zoom.
+ *
+ * This component is typically not used directly - use DsMobileLightboxService instead.
+ *
+ * Features:
+ * - Swiper.js for smooth image navigation
+ * - Pinch to zoom in/out
+ * - Double-tap to toggle zoom
+ * - Swipe down to close (when not zoomed)
+ * - Image counter and navigation controls
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ *
+ * openImage() {
+ *   this.lightbox.openImages({
+ *     images: [{ type: 'image', src: 'image.jpg', title: 'My Image' }]
+ *   });
+ * }
+ * ```
+ */
+class DsMobileLightboxImageComponent {
+    gestureCtrl;
+    // Inputs (passed from service as regular properties, not signals)
+    images;
+    author;
+    initialIndex = 0;
+    enableZoom = true;
+    showControls = true;
+    enableSwipe = true;
+    showInfo = true;
+    showActions = false;
+    animation = 'fade';
+    onCloseRequested;
+    // View children
+    swiperContainer;
+    // State
+    currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    scale = signal(1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
+    isZoomed = signal(false, ...(ngDevMode ? [{ debugName: "isZoomed" }] : []));
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    // Action states
+    isLiked = signal(false, ...(ngDevMode ? [{ debugName: "isLiked" }] : []));
+    likeCount = signal(0, ...(ngDevMode ? [{ debugName: "likeCount" }] : []));
+    commentCount = signal(0, ...(ngDevMode ? [{ debugName: "commentCount" }] : []));
+    // Computed
+    currentImage = computed(() => this.images[this.currentIndex()], ...(ngDevMode ? [{ debugName: "currentImage" }] : []));
+    // Swiper instance
+    swiper;
+    zoomData = new Map();
+    constructor(gestureCtrl) {
+        this.gestureCtrl = gestureCtrl;
+    }
+    ngOnInit() {
+        // Set initial index from the passed property
+        if (this.initialIndex !== undefined) {
+            this.currentIndex.set(this.initialIndex);
+        }
+        // Initialize action states from current image
+        const currentImg = this.images[this.currentIndex()];
+        if (currentImg) {
+            this.isLiked.set(currentImg.isLiked ?? false);
+            this.likeCount.set(currentImg.likeCount ?? 0);
+            this.commentCount.set(currentImg.commentCount ?? 0);
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.initializeSwiper();
+            this.initializeZoomGestures();
+        }, 100);
+    }
+    ngOnDestroy() {
+        // Clean up Swiper
+        if (this.swiper) {
+            this.swiper.destroy();
+            this.swiper = undefined;
+        }
+    }
+    /**
+     * Initialize Swiper for image navigation
+     */
+    initializeSwiper() {
+        if (!this.swiperContainer) {
+            console.error('[Lightbox] Swiper container not found');
+            return;
+        }
+        const swiperOptions = {
+            initialSlide: this.initialIndex,
+            speed: 300,
+            resistance: true,
+            resistanceRatio: 0.85,
+            slidesPerView: 1,
+            spaceBetween: 0,
+            touchRatio: 1,
+            longSwipesRatio: 0.5,
+            threshold: 10,
+            on: {
+                slideChange: (swiper) => {
+                    this.currentIndex.set(swiper.activeIndex);
+                    this.updateActionStates();
+                    // Check if the image is already loaded
+                    const currentSlide = swiper.slides[swiper.activeIndex];
+                    const img = currentSlide?.querySelector('img');
+                    if (img && img.complete && img.naturalHeight !== 0) {
+                        // Image is already loaded
+                        this.isLoading.set(false);
+                    }
+                },
+                slideChangeTransitionStart: () => {
+                    // Don't show loading spinner if image is already loaded
+                    const currentSlide = this.swiper?.slides[this.swiper.activeIndex];
+                    const img = currentSlide?.querySelector('img');
+                    if (!img || !img.complete || img.naturalHeight === 0) {
+                        this.isLoading.set(true);
+                    }
+                }
+            }
+        };
+        this.swiper = new Swiper(this.swiperContainer.nativeElement, swiperOptions);
+        // Check if the initial image is already loaded
+        setTimeout(() => {
+            const currentSlide = this.swiper?.slides[this.currentIndex()];
+            const img = currentSlide?.querySelector('img');
+            if (img && img.complete && img.naturalHeight !== 0) {
+                this.isLoading.set(false);
+            }
+        }, 0);
+    }
+    /**
+     * Initialize pinch-zoom gestures for all slides
+     */
+    initializeZoomGestures() {
+        if (!this.enableZoom)
+            return;
+        const slides = this.swiperContainer.nativeElement.querySelectorAll('.image-zoom-container');
+        slides.forEach((slide, index) => {
+            this.initializeZoomForSlide(slide, index);
+        });
+    }
+    /**
+     * Initialize zoom gestures for a specific slide
+     */
+    initializeZoomForSlide(container, index) {
+        let initialDistance = 0;
+        let initialScale = 1;
+        let currentScale = 1;
+        let lastTap = 0;
+        // Double-tap to zoom
+        container.addEventListener('click', (event) => {
+            const now = Date.now();
+            const timeSinceLastTap = now - lastTap;
+            if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
+                event.preventDefault();
+                this.toggleZoom(container, index);
+            }
+            lastTap = now;
+        });
+        // Pinch to zoom
+        const getTouchDistance = (touches) => {
+            const dx = touches[0].clientX - touches[1].clientX;
+            const dy = touches[0].clientY - touches[1].clientY;
+            return Math.sqrt(dx * dx + dy * dy);
+        };
+        container.addEventListener('touchstart', (event) => {
+            if (event.touches.length === 2) {
+                event.preventDefault();
+                initialDistance = getTouchDistance(event.touches);
+                const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
+                initialScale = zoomData.scale;
+                // Disable Swiper when zooming
+                if (this.swiper) {
+                    this.swiper.allowTouchMove = false;
+                }
+            }
+        }, { passive: false });
+        container.addEventListener('touchmove', (event) => {
+            if (event.touches.length === 2) {
+                event.preventDefault();
+                const currentDistance = getTouchDistance(event.touches);
+                const pinchScale = currentDistance / initialDistance;
+                currentScale = Math.max(1, Math.min(initialScale * pinchScale, 4));
+                const img = container.querySelector('img');
+                if (img) {
+                    img.style.transform = `scale(${currentScale})`;
+                }
+                if (currentScale > 1) {
+                    this.isZoomed.set(true);
+                }
+                else {
+                    this.isZoomed.set(false);
+                }
+            }
+        }, { passive: false });
+        container.addEventListener('touchend', (event) => {
+            if (event.touches.length < 2) {
+                // Save zoom state
+                this.zoomData.set(index, { scale: currentScale, x: 0, y: 0 });
+                // Re-enable Swiper if not zoomed
+                if (this.swiper && currentScale <= 1) {
+                    this.swiper.allowTouchMove = true;
+                }
+            }
+        });
+    }
+    /**
+     * Toggle zoom on double-tap
+     */
+    toggleZoom(container, index) {
+        const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
+        const img = container.querySelector('img');
+        if (!img)
+            return;
+        if (zoomData.scale > 1) {
+            // Zoom out
+            img.style.transform = 'scale(1)';
+            this.zoomData.set(index, { scale: 1, x: 0, y: 0 });
+            this.isZoomed.set(false);
+            if (this.swiper) {
+                this.swiper.allowTouchMove = true;
+            }
+        }
+        else {
+            // Zoom in
+            img.style.transform = 'scale(2)';
+            this.zoomData.set(index, { scale: 2, x: 0, y: 0 });
+            this.isZoomed.set(true);
+            if (this.swiper) {
+                this.swiper.allowTouchMove = false;
+            }
+        }
+    }
+    /**
+     * Update action states (like, comments) when slide changes
+     */
+    updateActionStates() {
+        const currentImg = this.images[this.currentIndex()];
+        if (currentImg) {
+            this.isLiked.set(currentImg.isLiked ?? false);
+            this.likeCount.set(currentImg.likeCount ?? 0);
+            this.commentCount.set(currentImg.commentCount ?? 0);
+        }
+    }
+    /**
+     * Close the lightbox
+     */
+    close() {
+        if (this.onCloseRequested) {
+            this.onCloseRequested();
+        }
+    }
+    /**
+     * Handle share button click
+     */
+    async onShare() {
+        console.log('[Lightbox] Share button clicked');
+        const currentImg = this.currentImage();
+        if (!currentImg?.src) {
+            console.warn('[Lightbox] No image to share');
+            return;
+        }
+        try {
+            // Check if Web Share API is available (for browser)
+            if (navigator.share) {
+                await navigator.share({
+                    title: currentImg.title || 'Shared Image',
+                    text: currentImg.description || '',
+                    url: currentImg.src,
+                });
+                console.log('[Lightbox] Shared via Web Share API');
+            }
+            else {
+                // Fallback to Capacitor Share API (for native apps)
+                await Share.share({
+                    title: currentImg.title || 'Shared Image',
+                    url: currentImg.src,
+                    dialogTitle: 'Share Image',
+                });
+                console.log('[Lightbox] Shared via Capacitor Share API');
+            }
+        }
+        catch (error) {
+            // User cancellation is expected and not an error
+            if (error?.message?.includes('cancel') || error?.code === 'USER_CANCELLED') {
+                console.log('[Lightbox] Share cancelled by user');
+                return;
+            }
+            console.error('[Lightbox] Share failed:', error);
+        }
+    }
+    /**
+     * Handle like button toggle
+     */
+    onLikeToggle() {
+        console.log('[Lightbox] Like button toggled');
+        this.isLiked.update(liked => !liked);
+        if (this.isLiked()) {
+            this.likeCount.update(count => count + 1);
+        }
+        else {
+            this.likeCount.update(count => Math.max(0, count - 1));
+        }
+    }
+    /**
+     * Handle reply/comment button click
+     */
+    onReply() {
+        console.log('[Lightbox] Reply button clicked');
+        if (this.onCloseRequested) {
+            this.onCloseRequested();
+        }
+    }
+    /**
+     * Navigate to the next image
+     */
+    nextImage() {
+        if (this.swiper && this.currentIndex() < this.images.length - 1) {
+            this.swiper.slideNext();
+        }
+    }
+    /**
+     * Navigate to the previous image
+     */
+    previousImage() {
+        if (this.swiper && this.currentIndex() > 0) {
+            this.swiper.slidePrev();
+        }
+    }
+    /**
+     * Handle image load success
+     */
+    onImageLoad(index) {
+        if (index === this.currentIndex()) {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Handle image load error
+     */
+    onImageError(index) {
+        if (index === this.currentIndex()) {
+            console.error(`[Lightbox] Image ${index} failed to load`);
+            this.isLoading.set(false);
+            this.hasError.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageComponent, deps: [{ token: i1.GestureController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxImageComponent, isStandalone: true, selector: "ds-mobile-lightbox-image", viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    <div class="lightbox-overlay" 
+      [class.zoomed]="isZoomed()">
+      
+      <div class="lightbox-wrapper">
+        <!-- Header with author info and action buttons -->
+        <ds-mobile-lightbox-header 
+          [author]="author"
+          (closeClick)="close()"
+          (shareClick)="onShare()"
+        />
+
+        <!-- Swiper container -->
+        <div class="swiper-container" #swiperContainer>
+          <div class="swiper-wrapper">
+            @for (image of images; track image.src; let i = $index) {
+              <div class="swiper-slide">
+                <div class="image-zoom-container" [attr.data-index]="i">
+                  <img 
+                    [src]="image.src"
+                    [alt]="image.alt || 'Lightbox image'"
+                    class="lightbox-image"
+                    (load)="onImageLoad(i)"
+                    (error)="onImageError(i)">
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+          
+        <!-- Loading indicator -->
+        @if (isLoading()) {
+          <div class="loading-spinner">
+            <ion-spinner name="crescent"></ion-spinner>
+          </div>
+        }
+
+        <!-- Footer with navigation and actions -->
+        <ds-mobile-lightbox-footer
+          [showNavigation]="showControls && images.length > 1"
+          [showActions]="showActions"
+          [currentIndex]="currentIndex()"
+          [totalImages]="images.length"
+          [isLiked]="isLiked()"
+          [likeCount]="likeCount()"
+          [commentCount]="commentCount()"
+          (prevClick)="previousImage()"
+          (nextClick)="nextImage()"
+          (likeClick)="onLikeToggle()"
+          (commentClick)="onReply()"
+        />
+      </div>
+    </div>
+  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.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,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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{background:#ffffff26!important}.close-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.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:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::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}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author"], outputs: ["closeClick", "shareClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-lightbox-image', standalone: true, imports: [
+                        CommonModule,
+                        IonSpinner,
+                        DsMobileLightboxHeaderComponent,
+                        DsMobileLightboxFooterComponent
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <div class="lightbox-overlay" 
+      [class.zoomed]="isZoomed()">
+      
+      <div class="lightbox-wrapper">
+        <!-- Header with author info and action buttons -->
+        <ds-mobile-lightbox-header 
+          [author]="author"
+          (closeClick)="close()"
+          (shareClick)="onShare()"
+        />
+
+        <!-- Swiper container -->
+        <div class="swiper-container" #swiperContainer>
+          <div class="swiper-wrapper">
+            @for (image of images; track image.src; let i = $index) {
+              <div class="swiper-slide">
+                <div class="image-zoom-container" [attr.data-index]="i">
+                  <img 
+                    [src]="image.src"
+                    [alt]="image.alt || 'Lightbox image'"
+                    class="lightbox-image"
+                    (load)="onImageLoad(i)"
+                    (error)="onImageError(i)">
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+          
+        <!-- Loading indicator -->
+        @if (isLoading()) {
+          <div class="loading-spinner">
+            <ion-spinner name="crescent"></ion-spinner>
+          </div>
+        }
+
+        <!-- Footer with navigation and actions -->
+        <ds-mobile-lightbox-footer
+          [showNavigation]="showControls && images.length > 1"
+          [showActions]="showActions"
+          [currentIndex]="currentIndex()"
+          [totalImages]="images.length"
+          [isLiked]="isLiked()"
+          [likeCount]="likeCount()"
+          [commentCount]="commentCount()"
+          (prevClick)="previousImage()"
+          (nextClick)="nextImage()"
+          (likeClick)="onLikeToggle()"
+          (commentClick)="onReply()"
+        />
+      </div>
+    </div>
+  `, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.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,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border-radius:50%;transition:background .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{background:#ffffff26!important}.close-button::ng-deep button:active{background:#ffffff26!important}.close-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.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:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::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}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GestureController }], propDecorators: { swiperContainer: [{
+                type: ViewChild,
+                args: ['swiperContainer', { read: ElementRef }]
+            }] } });
+
+/**
+ * DsMobileLightboxPdfComponent
+ *
+ * PDF viewer component that displays PDF info and allows users to open PDFs in the native device viewer.
+ * Shows a lightbox with PDF details first, then user can choose to open in native viewer.
+ *
+ * This component is typically not used directly - use DsMobileLightboxService instead.
+ *
+ * Features:
+ * - PDF info preview (title, size, icon)
+ * - User-initiated native PDF viewing (iOS/Android)
+ * - Download and cache support
+ * - Share functionality
+ * - Loading states
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ *
+ * openPdf() {
+ *   this.lightbox.openPdf({
+ *     pdf: { type: 'pdf', src: 'document.pdf', title: 'My Document' }
+ *   });
+ * }
+ * ```
+ */
+class DsMobileLightboxPdfComponent {
+    // Inputs (passed from service as regular properties)
+    pdf;
+    author;
+    onCloseRequested;
+    // State
+    isLoading = false;
+    hasError = false;
+    errorMessage = '';
+    cachedFilePath;
+    constructor() { }
+    ngOnInit() {
+        console.log('[PDF Lightbox] Initializing with PDF:', this.pdf);
+        // Don't automatically open - let user click the "Open" button
+        // this.openPdfInNativeViewer();
+    }
+    /**
+     * Open the PDF in the native device viewer
+     */
+    async openPdfInNativeViewer() {
+        if (!this.pdf?.src) {
+            console.error('[PDF Lightbox] No PDF source provided');
+            this.hasError = true;
+            this.errorMessage = 'No PDF file provided';
+            return;
+        }
+        this.isLoading = true;
+        this.hasError = false;
+        this.errorMessage = '';
+        try {
+            console.log('[PDF Lightbox] Opening PDF:', this.pdf.src);
+            // Check if it's already a full URL
+            let pdfUrl;
+            if (this.pdf.src.startsWith('http://') || this.pdf.src.startsWith('https://')) {
+                // Already a full URL
+                pdfUrl = this.pdf.src;
+            }
+            else {
+                // Relative path - construct full URL
+                // Use current origin (which includes the dev server URL in Capacitor)
+                // Remove leading slash if present to avoid double slashes
+                const cleanPath = this.pdf.src.startsWith('/') ? this.pdf.src.slice(1) : this.pdf.src;
+                pdfUrl = `${window.location.origin}/${cleanPath}`;
+            }
+            console.log('[PDF Lightbox] Opening PDF at URL:', pdfUrl);
+            // Use Browser to open the PDF
+            await Browser.open({
+                url: pdfUrl,
+                presentationStyle: 'fullscreen'
+            });
+            this.isLoading = false;
+            // Close the modal after opening browser
+            setTimeout(() => {
+                this.close();
+            }, 500);
+        }
+        catch (error) {
+            console.error('[PDF Lightbox] Error opening PDF:', error);
+            this.isLoading = false;
+            this.hasError = true;
+            this.errorMessage = error?.message || 'Failed to open PDF';
+        }
+    }
+    /**
+     * Download a remote PDF and open it
+     */
+    async downloadAndOpenPdf() {
+        try {
+            console.log('[PDF Lightbox] Downloading PDF from:', this.pdf.src);
+            // Fetch the PDF
+            const response = await fetch(this.pdf.src);
+            if (!response.ok) {
+                throw new Error(`Failed to download PDF: ${response.statusText}`);
+            }
+            const blob = await response.blob();
+            const base64Data = await this.blobToBase64(blob);
+            // Generate a filename
+            const fileName = this.pdf.title
+                ? `${this.pdf.title.replace(/[^a-z0-9]/gi, '_')}.pdf`
+                : 'document.pdf';
+            // Save to cache directory
+            const result = await Filesystem.writeFile({
+                path: fileName,
+                data: base64Data,
+                directory: Directory.Cache
+            });
+            console.log('[PDF Lightbox] PDF saved to cache:', result.uri);
+            this.cachedFilePath = result.uri;
+            // Open using Browser
             await Browser.open({
                 url: result.uri,
                 presentationStyle: 'fullscreen'
@@ -13496,98 +13805,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
       <ds-icon
         content-trailing
-        name="remixArrowRightSLine"
-        size="20px"
-        class="item-trailing"
-      />
-    </ds-mobile-card-inline>
-  `, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3b82f6)!important}\n"] }]
-        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fileUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUrl", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
-
-/**
- * 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>
- * ```
- */
-class DsMobileSystemMessageBannerComponent {
-    /**
-     * System message text to display
-     */
-    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
-    /**
-     * Optional icon name (currently using inline SVG for info icon)
-     * Can be extended to support full icon library integration
-     */
-    iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
-    /**
-     * Whether this system message appears directly after a timestamp
-     * When true, removes top padding to reduce spacing
-     */
-    afterTimestamp = input(false, ...(ngDevMode ? [{ debugName: "afterTimestamp" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSystemMessageBannerComponent, isStandalone: true, selector: "ds-mobile-system-message-banner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, afterTimestamp: { classPropertyName: "afterTimestamp", publicName: "afterTimestamp", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.after-timestamp": "afterTimestamp()" } }, ngImport: i0, 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>
-  `, isInline: true, 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:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-system-message-banner', standalone: true, imports: [CommonModule], host: {
-                        '[class.after-timestamp]': 'afterTimestamp()'
-                    }, 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>
-  `, 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:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"] }]
-        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], afterTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterTimestamp", required: false }] }] } });
+        name="remixArrowRightSLine"
+        size="20px"
+        class="item-trailing"
+      />
+    </ds-mobile-card-inline>
+  `, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3b82f6)!important}\n"] }]
+        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fileUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUrl", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
 
 /**
  * DsMobileChatModalComponent
@@ -14934,487 +15158,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           [rows]="1"
           placeholder="Tell us what this inquiry is about..."
           class="inquiry-description-input ghost-input-clean"
-          (valueChange)="validateForm()"
-        />
-      </ds-mobile-section>
-
-      <!-- Fixed Bottom Container (Slides with keyboard) -->
-      <div footer class="fixed-bottom-container">
-        <!-- Attachment Previews (if any) -->
-        @if (attachments().length > 0) {
-          <div class="attachment-previews-section">
-            <div class="image-previews">
-              @for (attachment of attachments(); track attachment.id) {
-                <ds-mobile-attachment-preview
-                  [attachment]="attachment"
-                  (remove)="removeAttachment($event)"
-                />
-              }
-            </div>
-          </div>
-        }
-
-        <!-- Submit Actions Container -->
-        <div class="submit-container">
-          <div class="submit-content">
-            <!-- Upload Actions (Left) -->
-            <div class="upload-actions">
-              <ds-icon-button
-                icon="remixImageLine"
-                variant="secondary"
-                size="md"
-                (clicked)="addPhoto()"
-                [disabled]="attachments().length >= 6"
-                aria-label="Add photo">
-              </ds-icon-button>
-              <ds-icon-button
-                icon="remixAttachmentLine"
-                variant="secondary"
-                size="md"
-                (clicked)="handleAddAttachment()"
-                [disabled]="attachments().length >= 6"
-                aria-label="Add attachment">
-              </ds-icon-button>
-              
-              <!-- Hidden file input for file selection -->
-              <input
-                #fileInput
-                type="file"
-                accept="*/*"
-                multiple
-                (change)="handleFileSelect($event)"
-                style="display: none;"
-                aria-hidden="true"
-              />
-            </div>
-
-            <!-- Submit Button (Right) -->
-            <ds-button
-              variant="primary"
-              size="lg"
-              [disabled]="!isFormValid() || isSubmitting()"
-              (clicked)="handleSubmit()">
-              Submit
-            </ds-button>
-          </div>
-        </div>
-      </div>
-    </ds-mobile-modal-base>
-  `, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".inquiry-title-input{flex:0 0 auto}.inquiry-title-input ::ng-deep textarea{font-size:var(--font-size-2xl);font-weight:400;line-height:1.2;max-height:200px;overflow-y:auto;resize:none;box-sizing:border-box;padding-right:52px}.fixed-bottom-container{background:var(--color-background-neutral-primary);border-top:1px solid var(--border-color-default)}.attachment-previews-section{padding:16px 20px;border-bottom:1px solid var(--border-color-default)}.image-previews{display:flex;flex-wrap:wrap;gap:8px}.submit-container{padding:16px 20px}.submit-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.upload-actions{display:flex;align-items:center;gap:8px}.upload-actions ds-icon-button::ng-deep button{width:44px;height:44px;border-radius:50%}.submit-content ds-button::ng-deep button{border-radius:100px}.inquiry-description-input{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep .textarea-container{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep textarea{flex:1;min-height:200px;resize:none}@media (min-width: 768px){.submit-container{padding:20px 32px}}\n"] }]
-        }], propDecorators: { titleInputRef: [{
-                type: ViewChild,
-                args: ['titleInput', { read: ElementRef }]
-            }], titleInput: [{
-                type: ViewChild,
-                args: ['titleInput']
-            }], fileInput: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }], loading: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], onSubmit: [{
-                type: Input
-            }] } });
-
-/**
- * DsMobileNewInquiryModalService
- *
- * Service for displaying the new inquiry creation modal.
- * Built on Ionic's modal system with native gestures and animations.
- *
- * Features:
- * - Full-screen modal with form
- * - Title and description inputs
- * - Photo upload with camera/gallery
- * - Form validation
- * - Submit handling
- * - Loading and error states
- *
- * @example
- * ```typescript
- * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
- *
- * async createNewInquiry() {
- *   await this.inquiryModal.open({
- *     onSubmit: async (data) => {
- *       console.log('Creating inquiry:', data);
- *       // Call your API to create the inquiry
- *       await this.apiService.createInquiry(data);
- *       // Close the modal
- *       await this.inquiryModal.close();
- *     }
- *   });
- * }
- * ```
- */
-class DsMobileNewInquiryModalService extends BaseModalService {
-    constructor(modalController) {
-        super(modalController);
-    }
-    /**
-     * Open the new inquiry modal
-     *
-     * @param options Modal options including onSubmit callback
-     * @returns Promise that resolves when the modal is presented
-     */
-    async open(options) {
-        // console.log('[NewInquiryModal] Opening modal with options:', options);
-        const modal = await this.createModal(DsMobileNewInquiryModalComponent, {
-            onSubmit: options?.onSubmit,
-            loading: options?.loading ?? false,
-            error: options?.error,
-        }, {
-            keyboardClose: false, // Don't close on keyboard hide for this modal
-        });
-        // console.log('[NewInquiryModal] Modal created, presenting...');
-        await modal.present();
-        // console.log('[NewInquiryModal] Modal presented');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.ModalController }] });
-
-/**
- * DsMobileHandbookFolderMiniComponent
- *
- * A minimized folder icon component for use in headers and small spaces.
- * Simplified version without animations or page sheets - just folder and icon.
- *
- * @example
- * ```html
- * <ds-mobile-handbook-folder-mini
- *   [variant]="'pink'"
- *   [iconName]="'remixLightbulbLine'">
- * </ds-mobile-handbook-folder-mini>
- * ```
- */
-class DsMobileHandbookFolderMiniComponent {
-    /**
-     * Color variant for the folder
-     * Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
-     */
-    variant = 'light-purple';
-    /**
-     * Icon name from the design system icon library
-     */
-    iconName = 'remixFolder3Line';
-    /**
-     * Get the CSS variable name for the color variant
-     */
-    getColorVar(suffix) {
-        const variantMap = {
-            'success': 'success',
-            'warning': 'warning',
-            'destructive': 'destructive',
-            'blue': 'blue',
-            'light-purple': 'light-purple',
-            'pink': 'pink',
-            'salmon-orange': 'salmon-orange',
-            'orange': 'orange',
-            'lime-green': 'lime-green',
-            'grey': 'grey'
-        };
-        const colorName = variantMap[this.variant] || 'light-purple';
-        return `var(--color-${colorName}-${suffix})`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileHandbookFolderMiniComponent, isStandalone: true, selector: "ds-mobile-handbook-folder-mini", inputs: { variant: "variant", iconName: "iconName" }, ngImport: i0, template: `
-    <div class="mini-folder-container">
-      <!-- Folder Tab SVG -->
-      <svg 
-        class="mini-folder-tab" 
-        width="101" 
-        height="24" 
-        viewBox="0 0 101 24" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg">
-        <path 
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
-          [attr.fill]="getColorVar('strong')"/>
-      </svg>
-      
-      <!-- Folder Back -->
-      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
-        <!-- Folder Front -->
-        <div 
-          class="mini-folder-front" 
-          [style.background-color]="getColorVar('base')">
-          <ds-icon 
-            [name]="iconName" 
-            [size]="'14px'"
-            [style.color]="'white'" />
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-handbook-folder-mini', standalone: true, imports: [CommonModule, DsIconComponent], template: `
-    <div class="mini-folder-container">
-      <!-- Folder Tab SVG -->
-      <svg 
-        class="mini-folder-tab" 
-        width="101" 
-        height="24" 
-        viewBox="0 0 101 24" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg">
-        <path 
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
-          [attr.fill]="getColorVar('strong')"/>
-      </svg>
-      
-      <!-- Folder Back -->
-      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
-        <!-- Folder Front -->
-        <div 
-          class="mini-folder-front" 
-          [style.background-color]="getColorVar('base')">
-          <ds-icon 
-            [name]="iconName" 
-            [size]="'14px'"
-            [style.color]="'white'" />
+          (valueChange)="validateForm()"
+        />
+      </ds-mobile-section>
+
+      <!-- Fixed Bottom Container (Slides with keyboard) -->
+      <div footer class="fixed-bottom-container">
+        <!-- Attachment Previews (if any) -->
+        @if (attachments().length > 0) {
+          <div class="attachment-previews-section">
+            <div class="image-previews">
+              @for (attachment of attachments(); track attachment.id) {
+                <ds-mobile-attachment-preview
+                  [attachment]="attachment"
+                  (remove)="removeAttachment($event)"
+                />
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Submit Actions Container -->
+        <div class="submit-container">
+          <div class="submit-content">
+            <!-- Upload Actions (Left) -->
+            <div class="upload-actions">
+              <ds-icon-button
+                icon="remixImageLine"
+                variant="secondary"
+                size="md"
+                (clicked)="addPhoto()"
+                [disabled]="attachments().length >= 6"
+                aria-label="Add photo">
+              </ds-icon-button>
+              <ds-icon-button
+                icon="remixAttachmentLine"
+                variant="secondary"
+                size="md"
+                (clicked)="handleAddAttachment()"
+                [disabled]="attachments().length >= 6"
+                aria-label="Add attachment">
+              </ds-icon-button>
+              
+              <!-- Hidden file input for file selection -->
+              <input
+                #fileInput
+                type="file"
+                accept="*/*"
+                multiple
+                (change)="handleFileSelect($event)"
+                style="display: none;"
+                aria-hidden="true"
+              />
+            </div>
+
+            <!-- Submit Button (Right) -->
+            <ds-button
+              variant="primary"
+              size="lg"
+              [disabled]="!isFormValid() || isSubmitting()"
+              (clicked)="handleSubmit()">
+              Submit
+            </ds-button>
+          </div>
         </div>
       </div>
-    </div>
-  `, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"] }]
-        }], propDecorators: { variant: [{
+    </ds-mobile-modal-base>
+  `, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".inquiry-title-input{flex:0 0 auto}.inquiry-title-input ::ng-deep textarea{font-size:var(--font-size-2xl);font-weight:400;line-height:1.2;max-height:200px;overflow-y:auto;resize:none;box-sizing:border-box;padding-right:52px}.fixed-bottom-container{background:var(--color-background-neutral-primary);border-top:1px solid var(--border-color-default)}.attachment-previews-section{padding:16px 20px;border-bottom:1px solid var(--border-color-default)}.image-previews{display:flex;flex-wrap:wrap;gap:8px}.submit-container{padding:16px 20px}.submit-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.upload-actions{display:flex;align-items:center;gap:8px}.upload-actions ds-icon-button::ng-deep button{width:44px;height:44px;border-radius:50%}.submit-content ds-button::ng-deep button{border-radius:100px}.inquiry-description-input{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep .textarea-container{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep textarea{flex:1;min-height:200px;resize:none}@media (min-width: 768px){.submit-container{padding:20px 32px}}\n"] }]
+        }], propDecorators: { titleInputRef: [{
+                type: ViewChild,
+                args: ['titleInput', { read: ElementRef }]
+            }], titleInput: [{
+                type: ViewChild,
+                args: ['titleInput']
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], loading: [{
                 type: Input
-            }], iconName: [{
+            }], error: [{
+                type: Input
+            }], onSubmit: [{
                 type: Input
             }] } });
 
 /**
- * DsMobileSwiperComponent
+ * DsMobileNewInquiryModalService
  *
- * A reusable swiper/carousel component with configurable child width and spacing.
+ * Service for displaying the new inquiry creation modal.
+ * Built on Ionic's modal system with native gestures and animations.
  *
  * 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
+ * - Full-screen modal with form
+ * - Title and description inputs
+ * - Photo upload with camera/gallery
+ * - Form validation
+ * - Submit handling
+ * - Loading and error states
  *
- * 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>
- * ```
- */
-class DsMobileSwiperComponent {
-    elementRef;
-    /**
-     * Width of each slide (e.g., '75vw', '300px', '80%')
-     */
-    slideWidth = input('75vw', ...(ngDevMode ? [{ debugName: "slideWidth" }] : []));
-    /**
-     * Gap between slides in pixels
-     */
-    gap = input(16, ...(ngDevMode ? [{ debugName: "gap" }] : []));
-    /**
-     * Enable pagination dots
-     */
-    pagination = input(false, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
-    /**
-     * Enable auto height - container adapts to active slide's height
-     */
-    autoHeight = input(false, ...(ngDevMode ? [{ debugName: "autoHeight" }] : []));
-    /**
-     * Enable progressive opacity based on slide position
-     * Slides fade in/out smoothly as they move toward/away from center
-     */
-    progressiveOpacity = input(false, ...(ngDevMode ? [{ debugName: "progressiveOpacity" }] : []));
-    /**
-     * Enable progressive scale based on slide position
-     * Slides scale down smoothly as they move away from center
-     */
-    progressiveScale = input(false, ...(ngDevMode ? [{ debugName: "progressiveScale" }] : []));
-    swiperContainer;
-    swiperInstance = null;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngAfterViewInit() {
-        // Add progressive-opacity class to host if enabled
-        if (this.progressiveOpacity()) {
-            this.elementRef.nativeElement.classList.add('progressive-opacity');
-        }
-        setTimeout(() => {
-            this.initializeSwiper();
-        }, 100);
-    }
-    initializeSwiper() {
-        if (!this.swiperContainer)
-            return;
-        // Apply slide width to all slides
-        const slides = this.swiperContainer.nativeElement.querySelectorAll('.swiper-slide');
-        slides.forEach((slide, index) => {
-            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 = {
-            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) => {
-                    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) => {
-                    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);
+ * @example
+ * ```typescript
+ * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
+ *
+ * async createNewInquiry() {
+ *   await this.inquiryModal.open({
+ *     onSubmit: async (data) => {
+ *       console.log('Creating inquiry:', data);
+ *       // Call your API to create the inquiry
+ *       await this.apiService.createInquiry(data);
+ *       // Close the modal
+ *       await this.inquiryModal.close();
+ *     }
+ *   });
+ * }
+ * ```
+ */
+class DsMobileNewInquiryModalService extends BaseModalService {
+    constructor(modalController) {
+        super(modalController);
     }
     /**
-     * Navigate to previous slide
+     * Open the new inquiry modal
+     *
+     * @param options Modal options including onSubmit callback
+     * @returns Promise that resolves when the modal is presented
      */
-    slidePrev() {
-        this.swiperInstance?.slidePrev();
+    async open(options) {
+        // console.log('[NewInquiryModal] Opening modal with options:', options);
+        const modal = await this.createModal(DsMobileNewInquiryModalComponent, {
+            onSubmit: options?.onSubmit,
+            loading: options?.loading ?? false,
+            error: options?.error,
+        }, {
+            keyboardClose: false, // Don't close on keyboard hide for this modal
+        });
+        // console.log('[NewInquiryModal] Modal created, presenting...');
+        await modal.present();
+        // console.log('[NewInquiryModal] Modal presented');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
+
+/**
+ * DsMobileHandbookFolderMiniComponent
+ *
+ * A minimized folder icon component for use in headers and small spaces.
+ * Simplified version without animations or page sheets - just folder and icon.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-handbook-folder-mini
+ *   [variant]="'pink'"
+ *   [iconName]="'remixLightbulbLine'">
+ * </ds-mobile-handbook-folder-mini>
+ * ```
+ */
+class DsMobileHandbookFolderMiniComponent {
     /**
-     * Navigate to next slide
+     * Color variant for the folder
+     * Available variants: success, warning, destructive, blue, light-purple, pink, salmon-orange, orange, lime-green, grey
      */
-    slideNext() {
-        this.swiperInstance?.slideNext();
-    }
+    variant = 'light-purple';
     /**
-     * Check if at the beginning
+     * Icon name from the design system icon library
      */
-    isBeginning() {
-        return this.swiperInstance?.isBeginning ?? true;
-    }
+    iconName = 'remixFolder3Line';
     /**
-     * Check if at the end
+     * Get the CSS variable name for the color variant
      */
-    isEnd() {
-        return this.swiperInstance?.isEnd ?? true;
-    }
-    ngOnDestroy() {
-        if (this.swiperInstance) {
-            this.swiperInstance.destroy();
-            this.swiperInstance = null;
-        }
+    getColorVar(suffix) {
+        const variantMap = {
+            'success': 'success',
+            'warning': 'warning',
+            'destructive': 'destructive',
+            'blue': 'blue',
+            'light-purple': 'light-purple',
+            'pink': 'pink',
+            'salmon-orange': 'salmon-orange',
+            'orange': 'orange',
+            'lime-green': 'lime-green',
+            'grey': 'grey'
+        };
+        const colorName = variantMap[this.variant] || 'light-purple';
+        return `var(--color-${colorName}-${suffix})`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSwiperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSwiperComponent, isStandalone: true, selector: "ds-mobile-swiper", inputs: { slideWidth: { classPropertyName: "slideWidth", publicName: "slideWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, progressiveOpacity: { classPropertyName: "progressiveOpacity", publicName: "progressiveOpacity", isSignal: true, isRequired: false, transformFunction: null }, progressiveScale: { classPropertyName: "progressiveScale", publicName: "progressiveScale", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: `
-    <div class="swiper-container" #swiperContainer>
-      <div class="swiper-wrapper">
-        <ng-content></ng-content>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileHandbookFolderMiniComponent, isStandalone: true, selector: "ds-mobile-handbook-folder-mini", inputs: { variant: "variant", iconName: "iconName" }, ngImport: i0, template: `
+    <div class="mini-folder-container">
+      <!-- Folder Tab SVG -->
+      <svg 
+        class="mini-folder-tab" 
+        width="101" 
+        height="24" 
+        viewBox="0 0 101 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <path 
+          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
+          [attr.fill]="getColorVar('strong')"/>
+      </svg>
+      
+      <!-- Folder Back -->
+      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
+        <!-- Folder Front -->
+        <div 
+          class="mini-folder-front" 
+          [style.background-color]="getColorVar('base')">
+          <ds-icon 
+            [name]="iconName" 
+            [size]="'14px'"
+            [style.color]="'white'" />
+        </div>
       </div>
-      @if (pagination()) {
-        <div class="swiper-pagination"></div>
-      }
     </div>
-  `, isInline: true, 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 .3s ease,transform .3s ease}:host(.progressive-opacity) ::ng-deep .swiper-slide{opacity:0}:host(.progressive-opacity) ::ng-deep .swiper-slide:first-child{opacity:1}.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:.25;transition:all .3s ease;cursor:pointer}:host ::ng-deep .swiper-pagination-bullet-active{opacity:1;background:var(--color-accent);width:20px;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSwiperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, decorators: [{
             type: Component,
-            args: [{ 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>
+            args: [{ selector: 'ds-mobile-handbook-folder-mini', standalone: true, imports: [CommonModule, DsIconComponent], template: `
+    <div class="mini-folder-container">
+      <!-- Folder Tab SVG -->
+      <svg 
+        class="mini-folder-tab" 
+        width="101" 
+        height="24" 
+        viewBox="0 0 101 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <path 
+          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
+          [attr.fill]="getColorVar('strong')"/>
+      </svg>
+      
+      <!-- Folder Back -->
+      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
+        <!-- Folder Front -->
+        <div 
+          class="mini-folder-front" 
+          [style.background-color]="getColorVar('base')">
+          <ds-icon 
+            [name]="iconName" 
+            [size]="'14px'"
+            [style.color]="'white'" />
+        </div>
       </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 .3s ease,transform .3s ease}:host(.progressive-opacity) ::ng-deep .swiper-slide{opacity:0}:host(.progressive-opacity) ::ng-deep .swiper-slide:first-child{opacity:1}.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:.25;transition:all .3s ease;cursor:pointer}:host ::ng-deep .swiper-pagination-bullet-active{opacity:1;background:var(--color-accent);width:20px;border-radius:3px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { slideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], progressiveOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressiveOpacity", required: false }] }], progressiveScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressiveScale", required: false }] }], swiperContainer: [{
-                type: ViewChild,
-                args: ['swiperContainer', { static: false }]
+  `, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], iconName: [{
+                type: Input
             }] } });
 
 /**
@@ -16351,6 +16351,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;width:100%}.text-input-wrapper{position:relative;width:100%}.text-input{width:100%;height:48px;padding:0 16px;box-sizing:border-box;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);font-weight:400;line-height:1.4;color:var(--text-color-default-primary);background-color:var(--color-background-neutral-primary);border:1px solid var(--border-color-default);border-radius:8px;transition:border-color var(--transition-duration-fast) var(--ease-smooth),background-color var(--transition-duration-fast) var(--ease-smooth),box-shadow var(--transition-duration-fast) var(--ease-smooth);outline:none;-webkit-appearance:none;appearance:none}.text-input::placeholder{color:var(--text-color-default-tertiary)}.text-input:hover:not(:disabled):not(:focus){border-color:var(--border-color-default);background-color:var(--color-background-neutral-primary-hover)}.text-input:focus{border-color:var(--color-accent);background-color:var(--color-background-neutral-primary);box-shadow:0 0 0 3px var(--outline-color-default)}.text-input.error{border-color:var(--color-destructive-base)}.text-input.error:focus{border-color:var(--color-destructive-base);box-shadow:0 0 0 3px #dc26261a}.text-input:disabled{background-color:var(--color-background-neutral-disabled);border-color:var(--border-color-default);color:var(--text-color-default-disabled);cursor:not-allowed}.text-input:disabled::placeholder{color:var(--text-color-default-disabled)}.error-message{margin-top:8px;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-destructive-base)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autoClearError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClearError", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], errorCleared: [{ type: i0.Output, args: ["errorCleared"] }] } });
 
+/**
+ * DsMobileFileAttachmentComponent
+ *
+ * File attachment display for various document types.
+ * Shows file info card with icon, filename, and file size.
+ * Supports PDF and generic document formats.
+ * Emits click event to open file in viewer.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-file-attachment
+ *   [fileName]="'Document.pdf'"
+ *   [fileSize]="'1.2 MB'"
+ *   [variant]="'pdf'"
+ *   (fileClick)="openFile()">
+ * </ds-mobile-file-attachment>
+ * ```
+ */
+class DsMobileFileAttachmentComponent {
+    /**
+     * File name
+     */
+    fileName = input('Document', ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+    /**
+     * File size display (e.g., "1.2 MB")
+     */
+    fileSize = input('', ...(ngDevMode ? [{ debugName: "fileSize" }] : []));
+    /**
+     * File type variant
+     * - 'pdf' - PDF document (red icon)
+     * - 'doc' - Generic document (blue icon)
+     */
+    variant = input('doc', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Emits when the file attachment is clicked
+     */
+    fileClick = output();
+    /**
+     * Get the appropriate icon name based on variant
+     */
+    getIconName() {
+        return this.variant() === 'pdf' ? 'remixFileTextLine' : 'remixAttachmentLine';
+    }
+    /**
+     * Get the file type label based on variant
+     */
+    getFileTypeLabel() {
+        return this.variant() === 'pdf' ? 'PDF' : 'DOC';
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        this.fileClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFileAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileFileAttachmentComponent, isStandalone: true, selector: "ds-mobile-file-attachment", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileClick: "fileClick" }, host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0, template: `
+    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+      <ds-avatar
+        type="icon"
+        [iconName]="getIconName()"
+        size="lg"
+      />
+    </div>
+    
+    <div class="file-info">
+      <div class="file-name">{{ fileName() }}</div>
+      @if (fileSize()) {
+        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+      } @else {
+        <div class="file-meta">{{ getFileTypeLabel() }}</div>
+      }
+    </div>
+    
+    <ds-icon 
+      name="remixArrowRightSLine" 
+      size="20px"
+      class="open-icon"
+    />
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease}:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host:active{transform:scale(.98)}.file-avatar{flex-shrink:0}.file-avatar.pdf::ng-deep .avatar--icon{background-color:#ff5757!important}.file-avatar.doc::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373)}.open-icon{color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFileAttachmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-file-attachment', standalone: true, imports: [CommonModule, DsAvatarComponent, DsIconComponent], host: {
+                        '(click)': 'handleClick($event)'
+                    }, template: `
+    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+      <ds-avatar
+        type="icon"
+        [iconName]="getIconName()"
+        size="lg"
+      />
+    </div>
+    
+    <div class="file-info">
+      <div class="file-name">{{ fileName() }}</div>
+      @if (fileSize()) {
+        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+      } @else {
+        <div class="file-meta">{{ getFileTypeLabel() }}</div>
+      }
+    </div>
+    
+    <ds-icon 
+      name="remixArrowRightSLine" 
+      size="20px"
+      class="open-icon"
+    />
+  `, styles: [":host{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease}:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host:active{transform:scale(.98)}.file-avatar{flex-shrink:0}.file-avatar.pdf::ng-deep .avatar--icon{background-color:#ff5757!important}.file-avatar.doc::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373)}.open-icon{color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"] }]
+        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
+
 /**
  * DsMobileFabComponent
  *
@@ -20606,5 +20715,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFileAttachmentComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileSwiperComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map