@maro-tech/card 0.1.13 → 0.1.15

package/fesm2022/maro-tech-card.mjs

@@ -1,10 +1,11 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, DestroyRef, signal, Component, computed, viewChildren, output, effect, HostListener, Input, InjectionToken, forwardRef, Injectable, ViewChild, untracked } from '@angular/core';
+import { input, inject, DestroyRef, signal, Component, computed, viewChild, viewChildren, output, effect, HostListener, Input, InjectionToken, forwardRef, Injectable, ViewChild, untracked } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { EventBus, UiButtonComponent, UiToastService, UiModalComponent, UiConfirmService } from '@maro-tech/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import Panzoom from '@panzoom/panzoom';
 import * as i1 from 'lucide-angular';
 import { Download, LucideAngularModule, Eye, FileText, Plus, Sparkles, Trash } from 'lucide-angular';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
@@ -125,11 +126,15 @@ class CardSectionHeaderComponent {
             <ui-button
               [variant]="i === 0 ? 'primary' : 'ghost'"
               [icon]="action.icon || ''"
+              [iconOnly]="!!action.iconOnly"
+              [ariaLabel]="action.ariaLabel || action.label"
               size="sm"
               [disabled]="isActionPending(action)"
               (click)="onActionClick(action)"
             >
-              {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+              @if (!action.iconOnly) {
+                {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+              }
             </ui-button>
           }
         </div>
@@ -148,11 +153,15 @@ class CardSectionHeaderComponent {
               <ui-button
                 [variant]="i === 0 ? 'primary' : 'ghost'"
                 [icon]="action.icon || ''"
+                [iconOnly]="!!action.iconOnly"
+                [ariaLabel]="action.ariaLabel || action.label"
                 size="sm"
                 [disabled]="isActionPending(action)"
                 (click)="onActionClick(action)"
               >
-                {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+                @if (!action.iconOnly) {
+                  {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+                }
               </ui-button>
             }
           </div>
@@ -175,11 +184,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             <ui-button
               [variant]="i === 0 ? 'primary' : 'ghost'"
               [icon]="action.icon || ''"
+              [iconOnly]="!!action.iconOnly"
+              [ariaLabel]="action.ariaLabel || action.label"
               size="sm"
               [disabled]="isActionPending(action)"
               (click)="onActionClick(action)"
             >
-              {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+              @if (!action.iconOnly) {
+                {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+              }
             </ui-button>
           }
         </div>
@@ -198,11 +211,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
               <ui-button
                 [variant]="i === 0 ? 'primary' : 'ghost'"
                 [icon]="action.icon || ''"
+                [iconOnly]="!!action.iconOnly"
+                [ariaLabel]="action.ariaLabel || action.label"
                 size="sm"
                 [disabled]="isActionPending(action)"
                 (click)="onActionClick(action)"
               >
-                {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+                @if (!action.iconOnly) {
+                  {{ isActionPending(action) ? 'Зачекайте...' : action.label }}
+                }
               </ui-button>
             }
           </div>
@@ -279,11 +296,13 @@ class ImagesViewerComponent {
     currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
     isOriginalVisible = signal(false, ...(ngDevMode ? [{ debugName: "isOriginalVisible" }] : /* istanbul ignore next */ []));
     originalPreviewUnavailable = signal(false, ...(ngDevMode ? [{ debugName: "originalPreviewUnavailable" }] : /* istanbul ignore next */ []));
+    currentImage = viewChild('currentImage', ...(ngDevMode ? [{ debugName: "currentImage" }] : /* istanbul ignore next */ []));
     thumbnailButtons = viewChildren('thumbnailButton', ...(ngDevMode ? [{ debugName: "thumbnailButtons" }] : /* istanbul ignore next */ []));
     closed = output();
     touchStartX = 0;
     touchStartY = 0;
     lastImagesKey = '';
+    panzoomInstance = null;
     constructor() {
         effect(() => {
             const urls = this.urls();
@@ -307,6 +326,28 @@ class ImagesViewerComponent {
             const thumbnail = this.thumbnailButtons()[this.currentIndex()];
             thumbnail?.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
         });
+        effect((onCleanup) => {
+            const image = this.currentImage()?.nativeElement;
+            this.currentIndex();
+            this.isOriginalVisible();
+            if (!image)
+                return;
+            const panzoom = Panzoom(image, {
+                maxScale: 4,
+                minScale: 1,
+                step: 0.5,
+                panOnlyWhenZoomed: true,
+                pinchAndPan: true,
+                touchAction: 'none',
+                animate: true,
+            });
+            this.panzoomInstance = panzoom;
+            onCleanup(() => {
+                panzoom.destroy();
+                if (this.panzoomInstance === panzoom)
+                    this.panzoomInstance = null;
+            });
+        });
     }
     onEscape() {
         this.closed.emit();
@@ -331,6 +372,8 @@ class ImagesViewerComponent {
         const touch = event.changedTouches[0];
         if (!touch)
             return;
+        if (this.panzoomInstance?.getScale() && this.panzoomInstance.getScale() > 1.01)
+            return;
         const deltaX = touch.clientX - this.touchStartX;
         const deltaY = touch.clientY - this.touchStartY;
         if (Math.abs(deltaX) < 50 || Math.abs(deltaX) <= Math.abs(deltaY))
@@ -360,6 +403,38 @@ class ImagesViewerComponent {
         this.originalPreviewUnavailable.set(false);
         this.isOriginalVisible.update((visible) => !visible);
     }
+    zoomIn() {
+        this.panzoomInstance?.zoomIn({ animate: true });
+    }
+    zoomOut() {
+        this.panzoomInstance?.zoomOut({ animate: true });
+    }
+    resetZoom() {
+        this.panzoomInstance?.reset({ animate: true });
+    }
+    onWheel(event) {
+        event.preventDefault();
+        const panzoom = this.panzoomInstance;
+        if (!panzoom)
+            return;
+        const direction = event.deltaY < 0 ? 1 : -1;
+        const scale = panzoom.getScale() * Math.exp((direction * 0.5) / 3);
+        panzoom.zoomToPoint(scale, { clientX: event.clientX, clientY: event.clientY }, { animate: false });
+    }
+    onImageLoad() {
+        this.panzoomInstance?.reset({ animate: false });
+    }
+    toggleZoom() {
+        const panzoom = this.panzoomInstance;
+        if (!panzoom)
+            return;
+        if (panzoom.getScale() > 1.01) {
+            panzoom.reset({ animate: true });
+        }
+        else {
+            panzoom.zoomIn({ animate: true });
+        }
+    }
     selectImage(index, event) {
         this.currentIndex.set(index);
         this.originalPreviewUnavailable.set(false);
@@ -408,12 +483,12 @@ class ImagesViewerComponent {
         return String(url || '').replace(/\/preview(?:\?[^#]*)?$/i, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ImagesViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ImagesViewerComponent, isStandalone: true, selector: "app-images-viewer", inputs: { urls: { classPropertyName: "urls", publicName: "urls", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown.arrowleft": "onArrowLeft()", "document:keydown.arrowright": "onArrowRight()" } }, viewQueries: [{ propertyName: "thumbnailButtons", predicate: ["thumbnailButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fixed inset-0 z-[2300] flex items-center justify-center bg-black/80 p-3 md:p-4\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u0444\u043E\u0442\u043E\">\n  <button type=\"button\" class=\"absolute inset-0\" aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043F\u0435\u0440\u0435\u0433\u043B\u044F\u0434\" (click)=\"closeViewer()\"></button>\n      <div class=\"relative z-[1] flex h-full w-full max-w-[1500px] flex-col items-center justify-center gap-4\" (click)=\"$event.stopPropagation()\">\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-2 z-20 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white md:right-3 md:top-3\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438\"\n      (click)=\"closeViewer()\">\n      \u2715\n    </button>\n\n    <div\n      class=\"relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-[18px] touch-pan-y\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchend)=\"onTouchEnd($event)\">\n      <div class=\"h-full w-full overflow-hidden rounded-[18px]\">\n        <div\n          class=\"flex h-full w-full\"\n          style=\"will-change: transform; backface-visibility: hidden;\"\n          [style.transition]=\"imageViewerTransitionStyle\"\n          [style.transform]=\"imageViewerTransform\">\n          @for (url of urls(); track $index; let idx = $index) {\n            <div class=\"flex h-full w-full min-w-full shrink-0 items-center justify-center overflow-hidden\">\n              @if (isPreloadIndex(idx)) {\n                @if (idx === currentIndex() && isOriginalVisible() && originalPreviewUnavailable()) {\n                  <div class=\"max-w-md rounded-2xl bg-white/95 px-6 py-5 text-center text-sm text-slate-700 shadow-xl\">\n                    <p class=\"font-semibold text-slate-900\">\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u0443 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0438\u0439</p>\n                    <p class=\"mt-1\">\u0426\u0435\u0439 \u0444\u0430\u0439\u043B \u043C\u043E\u0436\u043D\u0430 \u043B\u0438\u0448\u0435 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438.</p>\n                  </div>\n                } @else {\n                  <img\n                    [src]=\"getImageUrl(url, idx)\"\n                    [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                    [attr.loading]=\"idx === currentIndex() ? 'eager' : 'lazy'\"\n                    decoding=\"async\"\n                    (error)=\"onImageError(idx)\"\n                    class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\n                }\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (urls().length > 1) {\n        <button type=\"button\" class=\"absolute left-0 top-0 z-10 flex h-full w-1/4 min-w-12 items-center justify-start pl-2 md:pl-3\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0454 \u0444\u043E\u0442\u043E\" (click)=\"showPreviousImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u2039</span>\n        </button>\n        <button type=\"button\" class=\"absolute right-0 top-0 z-10 flex h-full w-1/4 min-w-12 items-center justify-end pr-2 md:pr-3\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0435 \u0444\u043E\u0442\u043E\" (click)=\"showNextImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u203A</span>\n        </button>\n      }\n\n      @if (currentUrl) {\n        <div class=\"absolute bottom-3 right-3 z-20 inline-flex max-w-[calc(100%-1.5rem)] items-center gap-1.5 rounded-2xl bg-black/55 p-1.5 text-white shadow-[0_12px_28px_rgba(15,23,42,0.24)] backdrop-blur-md md:bottom-4 md:right-4\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 items-center gap-2 rounded-xl px-2.5 text-xs font-semibold transition hover:bg-white/10\"\n            [class.bg-emerald-500\\/20]=\"isOriginalVisible()\"\n            [class.text-emerald-100]=\"isOriginalVisible()\"\n            [attr.aria-pressed]=\"isOriginalVisible()\"\n            aria-label=\"\u041F\u0435\u0440\u0435\u043C\u043A\u043D\u0443\u0442\u0438 \u043C\u0456\u0436 \u043F\u0440\u0435\u0432\u2019\u044E \u0442\u0430 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u043E\u043C\"\n            (click)=\"toggleOriginal()\">\n            <span>\u041E\u0440\u0438\u0433\u0456\u043D\u0430\u043B</span>\n            <span\n              class=\"relative inline-flex h-5 w-9 items-center rounded-full border p-0.5 transition-colors\"\n              [class.bg-emerald-500]=\"isOriginalVisible()\"\n              [class.bg-white\\/15]=\"!isOriginalVisible()\"\n              [class.border-emerald-200]=\"isOriginalVisible()\"\n              [class.border-white\\/45]=\"!isOriginalVisible()\"\n              [class.ring-2]=\"isOriginalVisible()\"\n              [class.ring-emerald-300\\/70]=\"isOriginalVisible()\">\n              <span\n                class=\"h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200\"\n                [class.translate-x-4]=\"isOriginalVisible()\">\n              </span>\n            </span>\n          </button>\n          <a\n            class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl transition hover:bg-white/10\"\n            [href]=\"getOriginalUrl(currentUrl)\"\n            download\n            aria-label=\"\u0421\u043A\u0430\u0447\u0430\u0442\u0438 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B \u0444\u043E\u0442\u043E\">\n            <lucide-icon [img]=\"downloadIcon\" [size]=\"19\" [strokeWidth]=\"2.25\"></lucide-icon>\n          </a>\n        </div>\n      }\n    </div>\n\n    @if (urls().length > 1) {\n      <div class=\"flex w-full flex-col items-center gap-3 pb-1 md:pb-2\">\n        <div class=\"flex w-full max-w-[92vw] flex-nowrap justify-start gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain px-2 py-3 md:max-w-[80vw]\">\n          @for (url of urls(); track url; let idx = $index) {\n            <button\n              #thumbnailButton\n              type=\"button\"\n              class=\"h-14 w-14 shrink-0 overflow-hidden rounded-xl border-2 border-transparent bg-white p-1 transition-transform duration-200\"\n              [class.border-slate-900]=\"idx === currentIndex()\"\n              [class.mx-2]=\"idx === currentIndex()\"\n              [style.transform]=\"idx === currentIndex() ? 'scale(1.4)' : 'scale(1)'\"\n              [class.origin-center]=\"idx === currentIndex()\"\n              [class.relative]=\"idx === currentIndex()\"\n              [class.z-10]=\"idx === currentIndex()\"\n              [attr.aria-current]=\"idx === currentIndex() ? 'true' : null\"\n              [attr.aria-label]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n              (click)=\"selectImage(idx, $event)\">\n              <img class=\"block aspect-square w-full rounded-lg object-contain\" [src]=\"getThumbnailUrl(url)\" [attr.alt]=\"'\u041C\u0456\u043D\u0456\u0430\u0442\u044E\u0440\u0430 ' + (idx + 1)\" loading=\"lazy\" decoding=\"async\">\n            </button>\n          }\n        </div>\n        <div class=\"rounded-full bg-white/95 px-3 py-1.5 text-xs font-semibold text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.2)]\">\n          {{ currentIndex() + 1 }} / {{ urls().length }}\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ImagesViewerComponent, isStandalone: true, selector: "app-images-viewer", inputs: { urls: { classPropertyName: "urls", publicName: "urls", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown.arrowleft": "onArrowLeft()", "document:keydown.arrowright": "onArrowRight()" } }, viewQueries: [{ propertyName: "currentImage", first: true, predicate: ["currentImage"], descendants: true, isSignal: true }, { propertyName: "thumbnailButtons", predicate: ["thumbnailButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fixed inset-0 z-[2300] flex items-center justify-center bg-black/80 p-3 md:p-4\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u0444\u043E\u0442\u043E\">\n  <button type=\"button\" class=\"absolute inset-0\" aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043F\u0435\u0440\u0435\u0433\u043B\u044F\u0434\" (click)=\"closeViewer()\"></button>\n      <div class=\"relative z-[1] flex h-full w-full max-w-[1500px] flex-col items-center justify-center gap-4\" (click)=\"$event.stopPropagation()\">\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-2 z-20 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white md:right-3 md:top-3\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438\"\n      (click)=\"closeViewer()\">\n      \u2715\n    </button>\n\n    <div\n      class=\"relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-[18px]\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchend)=\"onTouchEnd($event)\">\n      <div class=\"h-full w-full overflow-hidden rounded-[18px]\">\n        <div\n          class=\"flex h-full w-full\"\n          style=\"will-change: transform; backface-visibility: hidden;\"\n          [style.transition]=\"imageViewerTransitionStyle\"\n          [style.transform]=\"imageViewerTransform\">\n          @for (url of urls(); track $index; let idx = $index) {\n            <div class=\"flex h-full w-full min-w-full shrink-0 items-center justify-center overflow-hidden\" (wheel)=\"onWheel($event)\">\n              @if (isPreloadIndex(idx)) {\n                @if (idx === currentIndex() && isOriginalVisible() && originalPreviewUnavailable()) {\n                  <div class=\"max-w-md rounded-2xl bg-white/95 px-6 py-5 text-center text-sm text-slate-700 shadow-xl\">\n                    <p class=\"font-semibold text-slate-900\">\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u0443 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0438\u0439</p>\n                    <p class=\"mt-1\">\u0426\u0435\u0439 \u0444\u0430\u0439\u043B \u043C\u043E\u0436\u043D\u0430 \u043B\u0438\u0448\u0435 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438.</p>\n                  </div>\n                } @else {\n                  @if (idx === currentIndex()) {\n                    <img\n                      #currentImage\n                      [src]=\"getImageUrl(url, idx)\"\n                      [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                      loading=\"eager\"\n                      decoding=\"async\"\n                      (load)=\"onImageLoad()\"\n                      (error)=\"onImageError(idx)\"\n                      (dblclick)=\"toggleZoom()\"\n                      class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\n                  } @else {\n                    <img\n                      [src]=\"getImageUrl(url, idx)\"\n                      [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                      loading=\"lazy\"\n                      decoding=\"async\"\n                      (error)=\"onImageError(idx)\"\n                      class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\n                  }\n                }\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (urls().length > 1) {\n        <button type=\"button\" class=\"absolute left-2 top-1/2 z-10 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full md:left-3\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0454 \u0444\u043E\u0442\u043E\" (click)=\"showPreviousImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u2039</span>\n        </button>\n        <button type=\"button\" class=\"absolute right-2 top-1/2 z-10 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full md:right-3\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0435 \u0444\u043E\u0442\u043E\" (click)=\"showNextImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u203A</span>\n        </button>\n      }\n\n      @if (currentUrl) {\n        <div class=\"absolute bottom-3 right-3 z-20 inline-flex max-w-[calc(100%-1.5rem)] items-center gap-1.5 rounded-2xl bg-black/55 p-1.5 text-white shadow-[0_12px_28px_rgba(15,23,42,0.24)] backdrop-blur-md md:bottom-4 md:right-4\">\n          <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl text-lg transition hover:bg-white/10\" aria-label=\"\u0417\u0431\u0456\u043B\u044C\u0448\u0438\u0442\u0438 \u0444\u043E\u0442\u043E\" (click)=\"zoomIn()\">+</button>\n          <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl text-lg transition hover:bg-white/10\" aria-label=\"\u0417\u043C\u0435\u043D\u0448\u0438\u0442\u0438 \u0444\u043E\u0442\u043E\" (click)=\"zoomOut()\">\u2212</button>\n          <button type=\"button\" class=\"inline-flex h-9 items-center justify-center rounded-xl px-2 text-xs font-semibold transition hover:bg-white/10\" aria-label=\"\u0421\u043A\u0438\u043D\u0443\u0442\u0438 \u043C\u0430\u0441\u0448\u0442\u0430\u0431\" (click)=\"resetZoom()\">100%</button>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 items-center gap-2 rounded-xl px-2.5 text-xs font-semibold transition hover:bg-white/10\"\n            [class.bg-emerald-500\\/20]=\"isOriginalVisible()\"\n            [class.text-emerald-100]=\"isOriginalVisible()\"\n            [attr.aria-pressed]=\"isOriginalVisible()\"\n            aria-label=\"\u041F\u0435\u0440\u0435\u043C\u043A\u043D\u0443\u0442\u0438 \u043C\u0456\u0436 \u043F\u0440\u0435\u0432\u2019\u044E \u0442\u0430 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u043E\u043C\"\n            (click)=\"toggleOriginal()\">\n            <span>\u041E\u0440\u0438\u0433\u0456\u043D\u0430\u043B</span>\n            <span\n              class=\"relative inline-flex h-5 w-9 items-center rounded-full border p-0.5 transition-colors\"\n              [class.bg-emerald-500]=\"isOriginalVisible()\"\n              [class.bg-white\\/15]=\"!isOriginalVisible()\"\n              [class.border-emerald-200]=\"isOriginalVisible()\"\n              [class.border-white\\/45]=\"!isOriginalVisible()\"\n              [class.ring-2]=\"isOriginalVisible()\"\n              [class.ring-emerald-300\\/70]=\"isOriginalVisible()\">\n              <span\n                class=\"h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200\"\n                [class.translate-x-4]=\"isOriginalVisible()\">\n              </span>\n            </span>\n          </button>\n          <a\n            class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl transition hover:bg-white/10\"\n            [href]=\"getOriginalUrl(currentUrl)\"\n            download\n            aria-label=\"\u0421\u043A\u0430\u0447\u0430\u0442\u0438 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B \u0444\u043E\u0442\u043E\">\n            <lucide-icon [img]=\"downloadIcon\" [size]=\"19\" [strokeWidth]=\"2.25\"></lucide-icon>\n          </a>\n        </div>\n      }\n    </div>\n\n    @if (urls().length > 1) {\n      <div class=\"flex w-full flex-col items-center gap-3 pb-1 md:pb-2\">\n        <div class=\"flex w-full max-w-[92vw] flex-nowrap justify-start gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain px-2 py-3 md:max-w-[80vw]\">\n          @for (url of urls(); track url; let idx = $index) {\n            <button\n              #thumbnailButton\n              type=\"button\"\n              class=\"h-14 w-14 shrink-0 overflow-hidden rounded-xl border-2 border-transparent bg-white p-1 transition-transform duration-200\"\n              [class.border-slate-900]=\"idx === currentIndex()\"\n              [class.mx-2]=\"idx === currentIndex()\"\n              [style.transform]=\"idx === currentIndex() ? 'scale(1.4)' : 'scale(1)'\"\n              [class.origin-center]=\"idx === currentIndex()\"\n              [class.relative]=\"idx === currentIndex()\"\n              [class.z-10]=\"idx === currentIndex()\"\n              [attr.aria-current]=\"idx === currentIndex() ? 'true' : null\"\n              [attr.aria-label]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n              (click)=\"selectImage(idx, $event)\">\n              <img class=\"block aspect-square w-full rounded-lg object-contain\" [src]=\"getThumbnailUrl(url)\" [attr.alt]=\"'\u041C\u0456\u043D\u0456\u0430\u0442\u044E\u0440\u0430 ' + (idx + 1)\" loading=\"lazy\" decoding=\"async\">\n            </button>\n          }\n        </div>\n        <div class=\"rounded-full bg-white/95 px-3 py-1.5 text-xs font-semibold text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.2)]\">\n          {{ currentIndex() + 1 }} / {{ urls().length }}\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ImagesViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-images-viewer', standalone: true, imports: [CommonModule, LucideAngularModule], template: "<div class=\"fixed inset-0 z-[2300] flex items-center justify-center bg-black/80 p-3 md:p-4\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u0444\u043E\u0442\u043E\">\n  <button type=\"button\" class=\"absolute inset-0\" aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043F\u0435\u0440\u0435\u0433\u043B\u044F\u0434\" (click)=\"closeViewer()\"></button>\n      <div class=\"relative z-[1] flex h-full w-full max-w-[1500px] flex-col items-center justify-center gap-4\" (click)=\"$event.stopPropagation()\">\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-2 z-20 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white md:right-3 md:top-3\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438\"\n      (click)=\"closeViewer()\">\n      \u2715\n    </button>\n\n    <div\n      class=\"relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-[18px] touch-pan-y\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchend)=\"onTouchEnd($event)\">\n      <div class=\"h-full w-full overflow-hidden rounded-[18px]\">\n        <div\n          class=\"flex h-full w-full\"\n          style=\"will-change: transform; backface-visibility: hidden;\"\n          [style.transition]=\"imageViewerTransitionStyle\"\n          [style.transform]=\"imageViewerTransform\">\n          @for (url of urls(); track $index; let idx = $index) {\n            <div class=\"flex h-full w-full min-w-full shrink-0 items-center justify-center overflow-hidden\">\n              @if (isPreloadIndex(idx)) {\n                @if (idx === currentIndex() && isOriginalVisible() && originalPreviewUnavailable()) {\n                  <div class=\"max-w-md rounded-2xl bg-white/95 px-6 py-5 text-center text-sm text-slate-700 shadow-xl\">\n                    <p class=\"font-semibold text-slate-900\">\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u0443 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0438\u0439</p>\n                    <p class=\"mt-1\">\u0426\u0435\u0439 \u0444\u0430\u0439\u043B \u043C\u043E\u0436\u043D\u0430 \u043B\u0438\u0448\u0435 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438.</p>\n                  </div>\n                } @else {\n                  <img\n                    [src]=\"getImageUrl(url, idx)\"\n                    [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                    [attr.loading]=\"idx === currentIndex() ? 'eager' : 'lazy'\"\n                    decoding=\"async\"\n                    (error)=\"onImageError(idx)\"\n                    class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\n                }\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (urls().length > 1) {\n        <button type=\"button\" class=\"absolute left-0 top-0 z-10 flex h-full w-1/4 min-w-12 items-center justify-start pl-2 md:pl-3\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0454 \u0444\u043E\u0442\u043E\" (click)=\"showPreviousImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u2039</span>\n        </button>\n        <button type=\"button\" class=\"absolute right-0 top-0 z-10 flex h-full w-1/4 min-w-12 items-center justify-end pr-2 md:pr-3\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0435 \u0444\u043E\u0442\u043E\" (click)=\"showNextImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u203A</span>\n        </button>\n      }\n\n      @if (currentUrl) {\n        <div class=\"absolute bottom-3 right-3 z-20 inline-flex max-w-[calc(100%-1.5rem)] items-center gap-1.5 rounded-2xl bg-black/55 p-1.5 text-white shadow-[0_12px_28px_rgba(15,23,42,0.24)] backdrop-blur-md md:bottom-4 md:right-4\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 items-center gap-2 rounded-xl px-2.5 text-xs font-semibold transition hover:bg-white/10\"\n            [class.bg-emerald-500\\/20]=\"isOriginalVisible()\"\n            [class.text-emerald-100]=\"isOriginalVisible()\"\n            [attr.aria-pressed]=\"isOriginalVisible()\"\n            aria-label=\"\u041F\u0435\u0440\u0435\u043C\u043A\u043D\u0443\u0442\u0438 \u043C\u0456\u0436 \u043F\u0440\u0435\u0432\u2019\u044E \u0442\u0430 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u043E\u043C\"\n            (click)=\"toggleOriginal()\">\n            <span>\u041E\u0440\u0438\u0433\u0456\u043D\u0430\u043B</span>\n            <span\n              class=\"relative inline-flex h-5 w-9 items-center rounded-full border p-0.5 transition-colors\"\n              [class.bg-emerald-500]=\"isOriginalVisible()\"\n              [class.bg-white\\/15]=\"!isOriginalVisible()\"\n              [class.border-emerald-200]=\"isOriginalVisible()\"\n              [class.border-white\\/45]=\"!isOriginalVisible()\"\n              [class.ring-2]=\"isOriginalVisible()\"\n              [class.ring-emerald-300\\/70]=\"isOriginalVisible()\">\n              <span\n                class=\"h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200\"\n                [class.translate-x-4]=\"isOriginalVisible()\">\n              </span>\n            </span>\n          </button>\n          <a\n            class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl transition hover:bg-white/10\"\n            [href]=\"getOriginalUrl(currentUrl)\"\n            download\n            aria-label=\"\u0421\u043A\u0430\u0447\u0430\u0442\u0438 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B \u0444\u043E\u0442\u043E\">\n            <lucide-icon [img]=\"downloadIcon\" [size]=\"19\" [strokeWidth]=\"2.25\"></lucide-icon>\n          </a>\n        </div>\n      }\n    </div>\n\n    @if (urls().length > 1) {\n      <div class=\"flex w-full flex-col items-center gap-3 pb-1 md:pb-2\">\n        <div class=\"flex w-full max-w-[92vw] flex-nowrap justify-start gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain px-2 py-3 md:max-w-[80vw]\">\n          @for (url of urls(); track url; let idx = $index) {\n            <button\n              #thumbnailButton\n              type=\"button\"\n              class=\"h-14 w-14 shrink-0 overflow-hidden rounded-xl border-2 border-transparent bg-white p-1 transition-transform duration-200\"\n              [class.border-slate-900]=\"idx === currentIndex()\"\n              [class.mx-2]=\"idx === currentIndex()\"\n              [style.transform]=\"idx === currentIndex() ? 'scale(1.4)' : 'scale(1)'\"\n              [class.origin-center]=\"idx === currentIndex()\"\n              [class.relative]=\"idx === currentIndex()\"\n              [class.z-10]=\"idx === currentIndex()\"\n              [attr.aria-current]=\"idx === currentIndex() ? 'true' : null\"\n              [attr.aria-label]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n              (click)=\"selectImage(idx, $event)\">\n              <img class=\"block aspect-square w-full rounded-lg object-contain\" [src]=\"getThumbnailUrl(url)\" [attr.alt]=\"'\u041C\u0456\u043D\u0456\u0430\u0442\u044E\u0440\u0430 ' + (idx + 1)\" loading=\"lazy\" decoding=\"async\">\n            </button>\n          }\n        </div>\n        <div class=\"rounded-full bg-white/95 px-3 py-1.5 text-xs font-semibold text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.2)]\">\n          {{ currentIndex() + 1 }} / {{ urls().length }}\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { urls: [{ type: i0.Input, args: [{ isSignal: true, alias: "urls", required: false }] }], initialIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIndex", required: false }] }], thumbnailButtons: [{ type: i0.ViewChildren, args: ['thumbnailButton', { isSignal: true }] }], closed: [{ type: i0.Output, args: ["closed"] }], onEscape: [{
+            args: [{ selector: 'app-images-viewer', standalone: true, imports: [CommonModule, LucideAngularModule], template: "<div class=\"fixed inset-0 z-[2300] flex items-center justify-center bg-black/80 p-3 md:p-4\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u0444\u043E\u0442\u043E\">\n  <button type=\"button\" class=\"absolute inset-0\" aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438 \u043F\u0435\u0440\u0435\u0433\u043B\u044F\u0434\" (click)=\"closeViewer()\"></button>\n      <div class=\"relative z-[1] flex h-full w-full max-w-[1500px] flex-col items-center justify-center gap-4\" (click)=\"$event.stopPropagation()\">\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-2 z-20 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white md:right-3 md:top-3\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u0438\u0442\u0438\"\n      (click)=\"closeViewer()\">\n      \u2715\n    </button>\n\n    <div\n      class=\"relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-[18px]\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchend)=\"onTouchEnd($event)\">\n      <div class=\"h-full w-full overflow-hidden rounded-[18px]\">\n        <div\n          class=\"flex h-full w-full\"\n          style=\"will-change: transform; backface-visibility: hidden;\"\n          [style.transition]=\"imageViewerTransitionStyle\"\n          [style.transform]=\"imageViewerTransform\">\n          @for (url of urls(); track $index; let idx = $index) {\n            <div class=\"flex h-full w-full min-w-full shrink-0 items-center justify-center overflow-hidden\" (wheel)=\"onWheel($event)\">\n              @if (isPreloadIndex(idx)) {\n                @if (idx === currentIndex() && isOriginalVisible() && originalPreviewUnavailable()) {\n                  <div class=\"max-w-md rounded-2xl bg-white/95 px-6 py-5 text-center text-sm text-slate-700 shadow-xl\">\n                    <p class=\"font-semibold text-slate-900\">\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u0443 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0438\u0439</p>\n                    <p class=\"mt-1\">\u0426\u0435\u0439 \u0444\u0430\u0439\u043B \u043C\u043E\u0436\u043D\u0430 \u043B\u0438\u0448\u0435 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438.</p>\n                  </div>\n                } @else {\n                  @if (idx === currentIndex()) {\n                    <img\n                      #currentImage\n                      [src]=\"getImageUrl(url, idx)\"\n                      [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                      loading=\"eager\"\n                      decoding=\"async\"\n                      (load)=\"onImageLoad()\"\n                      (error)=\"onImageError(idx)\"\n                      (dblclick)=\"toggleZoom()\"\n                      class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\n                  } @else {\n                    <img\n                      [src]=\"getImageUrl(url, idx)\"\n                      [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                      loading=\"lazy\"\n                      decoding=\"async\"\n                      (error)=\"onImageError(idx)\"\n                      class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\n                  }\n                }\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (urls().length > 1) {\n        <button type=\"button\" class=\"absolute left-2 top-1/2 z-10 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full md:left-3\" aria-label=\"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0454 \u0444\u043E\u0442\u043E\" (click)=\"showPreviousImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u2039</span>\n        </button>\n        <button type=\"button\" class=\"absolute right-2 top-1/2 z-10 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full md:right-3\" aria-label=\"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0435 \u0444\u043E\u0442\u043E\" (click)=\"showNextImage()\">\n          <span class=\"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.22)] transition hover:bg-white\">\u203A</span>\n        </button>\n      }\n\n      @if (currentUrl) {\n        <div class=\"absolute bottom-3 right-3 z-20 inline-flex max-w-[calc(100%-1.5rem)] items-center gap-1.5 rounded-2xl bg-black/55 p-1.5 text-white shadow-[0_12px_28px_rgba(15,23,42,0.24)] backdrop-blur-md md:bottom-4 md:right-4\">\n          <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl text-lg transition hover:bg-white/10\" aria-label=\"\u0417\u0431\u0456\u043B\u044C\u0448\u0438\u0442\u0438 \u0444\u043E\u0442\u043E\" (click)=\"zoomIn()\">+</button>\n          <button type=\"button\" class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl text-lg transition hover:bg-white/10\" aria-label=\"\u0417\u043C\u0435\u043D\u0448\u0438\u0442\u0438 \u0444\u043E\u0442\u043E\" (click)=\"zoomOut()\">\u2212</button>\n          <button type=\"button\" class=\"inline-flex h-9 items-center justify-center rounded-xl px-2 text-xs font-semibold transition hover:bg-white/10\" aria-label=\"\u0421\u043A\u0438\u043D\u0443\u0442\u0438 \u043C\u0430\u0441\u0448\u0442\u0430\u0431\" (click)=\"resetZoom()\">100%</button>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 items-center gap-2 rounded-xl px-2.5 text-xs font-semibold transition hover:bg-white/10\"\n            [class.bg-emerald-500\\/20]=\"isOriginalVisible()\"\n            [class.text-emerald-100]=\"isOriginalVisible()\"\n            [attr.aria-pressed]=\"isOriginalVisible()\"\n            aria-label=\"\u041F\u0435\u0440\u0435\u043C\u043A\u043D\u0443\u0442\u0438 \u043C\u0456\u0436 \u043F\u0440\u0435\u0432\u2019\u044E \u0442\u0430 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B\u043E\u043C\"\n            (click)=\"toggleOriginal()\">\n            <span>\u041E\u0440\u0438\u0433\u0456\u043D\u0430\u043B</span>\n            <span\n              class=\"relative inline-flex h-5 w-9 items-center rounded-full border p-0.5 transition-colors\"\n              [class.bg-emerald-500]=\"isOriginalVisible()\"\n              [class.bg-white\\/15]=\"!isOriginalVisible()\"\n              [class.border-emerald-200]=\"isOriginalVisible()\"\n              [class.border-white\\/45]=\"!isOriginalVisible()\"\n              [class.ring-2]=\"isOriginalVisible()\"\n              [class.ring-emerald-300\\/70]=\"isOriginalVisible()\">\n              <span\n                class=\"h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200\"\n                [class.translate-x-4]=\"isOriginalVisible()\">\n              </span>\n            </span>\n          </button>\n          <a\n            class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl transition hover:bg-white/10\"\n            [href]=\"getOriginalUrl(currentUrl)\"\n            download\n            aria-label=\"\u0421\u043A\u0430\u0447\u0430\u0442\u0438 \u043E\u0440\u0438\u0433\u0456\u043D\u0430\u043B \u0444\u043E\u0442\u043E\">\n            <lucide-icon [img]=\"downloadIcon\" [size]=\"19\" [strokeWidth]=\"2.25\"></lucide-icon>\n          </a>\n        </div>\n      }\n    </div>\n\n    @if (urls().length > 1) {\n      <div class=\"flex w-full flex-col items-center gap-3 pb-1 md:pb-2\">\n        <div class=\"flex w-full max-w-[92vw] flex-nowrap justify-start gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain px-2 py-3 md:max-w-[80vw]\">\n          @for (url of urls(); track url; let idx = $index) {\n            <button\n              #thumbnailButton\n              type=\"button\"\n              class=\"h-14 w-14 shrink-0 overflow-hidden rounded-xl border-2 border-transparent bg-white p-1 transition-transform duration-200\"\n              [class.border-slate-900]=\"idx === currentIndex()\"\n              [class.mx-2]=\"idx === currentIndex()\"\n              [style.transform]=\"idx === currentIndex() ? 'scale(1.4)' : 'scale(1)'\"\n              [class.origin-center]=\"idx === currentIndex()\"\n              [class.relative]=\"idx === currentIndex()\"\n              [class.z-10]=\"idx === currentIndex()\"\n              [attr.aria-current]=\"idx === currentIndex() ? 'true' : null\"\n              [attr.aria-label]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n              (click)=\"selectImage(idx, $event)\">\n              <img class=\"block aspect-square w-full rounded-lg object-contain\" [src]=\"getThumbnailUrl(url)\" [attr.alt]=\"'\u041C\u0456\u043D\u0456\u0430\u0442\u044E\u0440\u0430 ' + (idx + 1)\" loading=\"lazy\" decoding=\"async\">\n            </button>\n          }\n        </div>\n        <div class=\"rounded-full bg-white/95 px-3 py-1.5 text-xs font-semibold text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.2)]\">\n          {{ currentIndex() + 1 }} / {{ urls().length }}\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { urls: [{ type: i0.Input, args: [{ isSignal: true, alias: "urls", required: false }] }], initialIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIndex", required: false }] }], currentImage: [{ type: i0.ViewChild, args: ['currentImage', { isSignal: true }] }], thumbnailButtons: [{ type: i0.ViewChildren, args: ['thumbnailButton', { isSignal: true }] }], closed: [{ type: i0.Output, args: ["closed"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }], onArrowLeft: [{