@maro-tech/card 0.1.2 → 0.1.4

package/fesm2022/maro-tech-card.mjs

@@ -1,18 +1,18 @@
-import * as i1 from '@angular/common';
+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, output, effect, HostListener, Input, InjectionToken, forwardRef, Injectable, ViewChild, untracked } from '@angular/core';
+import { input, inject, DestroyRef, signal, Component, computed, 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 * as i1 from 'lucide-angular';
+import { Download, LucideAngularModule, Eye, FileText, Plus, Sparkles, Trash } from 'lucide-angular';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { map, forkJoin, shareReplay, switchMap, timer, of } from 'rxjs';
+import { map, shareReplay, forkJoin, switchMap, timer, of } from 'rxjs';
 import { UiTableComponent } from '@maro-tech/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { map as map$1, exhaustMap, catchError, takeWhile, takeUntil, finalize } from 'rxjs/operators';
-import * as i1$2 from 'lucide-angular';
-import { LucideAngularModule, Eye, FileText, Plus, Sparkles, Trash } from 'lucide-angular';
-import * as i1$1 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { InputSelectComponent } from '@maro-tech/form';
 
@@ -273,20 +273,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
         }], propDecorators: { html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }] } });
 
 class ImagesViewerComponent {
+    downloadIcon = Download;
     urls = input([], ...(ngDevMode ? [{ debugName: "urls" }] : /* istanbul ignore next */ []));
     initialIndex = input(0, ...(ngDevMode ? [{ debugName: "initialIndex" }] : /* istanbul ignore next */ []));
     currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+    isOriginalVisible = signal(false, ...(ngDevMode ? [{ debugName: "isOriginalVisible" }] : /* istanbul ignore next */ []));
+    thumbnailButtons = viewChildren('thumbnailButton', ...(ngDevMode ? [{ debugName: "thumbnailButtons" }] : /* istanbul ignore next */ []));
     closed = output();
+    touchStartX = 0;
+    touchStartY = 0;
+    lastImagesKey = '';
     constructor() {
         effect(() => {
             const urls = this.urls();
+            const imagesKey = `${this.initialIndex()}|${urls.join('|')}`;
+            if (imagesKey === this.lastImagesKey)
+                return;
+            this.lastImagesKey = imagesKey;
             if (!urls.length) {
                 this.currentIndex.set(0);
+                this.isOriginalVisible.set(false);
                 return;
             }
             const maxIndex = urls.length - 1;
             const startIndex = Math.max(0, Math.min(this.initialIndex(), maxIndex));
             this.currentIndex.set(startIndex);
+            this.isOriginalVisible.set(false);
+        });
+        effect(() => {
+            const thumbnail = this.thumbnailButtons()[this.currentIndex()];
+            thumbnail?.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
         });
     }
     onEscape() {
@@ -301,17 +317,69 @@ class ImagesViewerComponent {
     closeViewer() {
         this.closed.emit();
     }
+    onTouchStart(event) {
+        const touch = event.changedTouches[0];
+        if (!touch)
+            return;
+        this.touchStartX = touch.clientX;
+        this.touchStartY = touch.clientY;
+    }
+    onTouchEnd(event) {
+        const touch = event.changedTouches[0];
+        if (!touch)
+            return;
+        const deltaX = touch.clientX - this.touchStartX;
+        const deltaY = touch.clientY - this.touchStartY;
+        if (Math.abs(deltaX) < 50 || Math.abs(deltaX) <= Math.abs(deltaY))
+            return;
+        if (deltaX < 0) {
+            this.showNextImage();
+        }
+        else {
+            this.showPreviousImage();
+        }
+    }
     showPreviousImage() {
         const total = this.urls().length;
         if (total <= 1)
             return;
         this.currentIndex.set((this.currentIndex() - 1 + total) % total);
+        this.blurActiveElement();
     }
     showNextImage() {
         const total = this.urls().length;
         if (total <= 1)
             return;
         this.currentIndex.set((this.currentIndex() + 1) % total);
+        this.blurActiveElement();
+    }
+    toggleOriginal() {
+        this.isOriginalVisible.update((visible) => !visible);
+    }
+    selectImage(index, event) {
+        this.currentIndex.set(index);
+        event.currentTarget?.blur();
+    }
+    blurActiveElement() {
+        if (typeof document === 'undefined')
+            return;
+        document.activeElement?.blur();
+    }
+    get currentUrl() {
+        return this.urls()[this.currentIndex()] || '';
+    }
+    get currentImageUrl() {
+        return this.isOriginalVisible() ? this.currentUrl : this.getThumbnailUrl(this.currentUrl);
+    }
+    isPreloadIndex(index) {
+        const total = this.urls().length;
+        if (total <= 2)
+            return true;
+        const distance = Math.abs(index - this.currentIndex());
+        return distance <= 1 || distance >= total - 1;
+    }
+    getImageUrl(url, index) {
+        return index === this.currentIndex() || this.isOriginalVisible() ? url : this.getThumbnailUrl(url);
     }
     get imageViewerTransform() {
         return `translate3d(-${this.currentIndex() * 100}%, 0, 0)`;
@@ -324,12 +392,12 @@ class ImagesViewerComponent {
         return match ? `${match[1]}/preview?scale=25` : url;
     }
     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()" } }, 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 class=\"relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-[18px]\">\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              <img\n                [src]=\"idx === currentIndex() ? url : getThumbnailUrl(url)\"\n                [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                [attr.loading]=\"idx === currentIndex() ? 'eager' : 'lazy'\"\n                decoding=\"async\"\n                class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\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    </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 max-w-[92vw] flex-wrap justify-center gap-2 md:max-w-[80vw]\">\n          @for (url of urls(); track url; let idx = $index) {\n            <button\n              type=\"button\"\n              class=\"h-14 w-14 overflow-hidden rounded-xl border bg-white p-1 transition\"\n              [class.border-slate-900]=\"idx === currentIndex()\"\n              [class.shadow-[0_0_0_2px_rgba(15,23,42,0.16)]]=\"idx === currentIndex()\"\n              [class.border-slate-300]=\"idx !== currentIndex()\"\n              [attr.aria-label]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n              (click)=\"currentIndex.set(idx)\">\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 }] });
+    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                <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                  class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\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]=\"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], 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 class=\"relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-[18px]\">\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              <img\n                [src]=\"idx === currentIndex() ? url : getThumbnailUrl(url)\"\n                [attr.alt]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n                [attr.loading]=\"idx === currentIndex() ? 'eager' : 'lazy'\"\n                decoding=\"async\"\n                class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\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    </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 max-w-[92vw] flex-wrap justify-center gap-2 md:max-w-[80vw]\">\n          @for (url of urls(); track url; let idx = $index) {\n            <button\n              type=\"button\"\n              class=\"h-14 w-14 overflow-hidden rounded-xl border bg-white p-1 transition\"\n              [class.border-slate-900]=\"idx === currentIndex()\"\n              [class.shadow-[0_0_0_2px_rgba(15,23,42,0.16)]]=\"idx === currentIndex()\"\n              [class.border-slate-300]=\"idx !== currentIndex()\"\n              [attr.aria-label]=\"'\u0424\u043E\u0442\u043E ' + (idx + 1)\"\n              (click)=\"currentIndex.set(idx)\">\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 }] }], 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] 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                <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                  class=\"block max-h-[74vh] max-w-[96vw] object-contain md:max-h-[78vh]\">\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]=\"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: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }], onArrowLeft: [{
@@ -453,7 +521,7 @@ class DetailsGridComponent {
             : { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DetailsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DetailsGridComponent, isStandalone: true, selector: "app-details-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DetailsGridComponent, isStandalone: true, selector: "app-details-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DetailsGridComponent, decorators: [{
             type: Component,
@@ -501,14 +569,14 @@ class ImagesComponent {
             .filter(Boolean)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ImagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ImagesComponent, isStandalone: true, selector: "app-images", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (resolvedImageUrls().length === 0) {\n  <p class=\"text-sm text-slate-500\">\u0424\u043E\u0442\u043E \u0432\u0456\u0434\u0441\u0443\u0442\u043D\u0456</p>\n} @else {\n  <div\n    class=\"grid gap-3\"\n    [ngClass]=\"resolvedImageUrls().length === 1 ? 'grid-cols-1' : 'sm:grid-cols-2 lg:grid-cols-4'\"\n  >\n    @for (image of resolvedImagePreviewUrls(); track image; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"group block overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 text-left\"\n        [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 \u0444\u043E\u0442\u043E ' + (i + 1)\"\n        (click)=\"openViewer(i)\"\n      >\n        <img\n          [src]=\"image\"\n          [alt]=\"'\u0424\u043E\u0442\u043E ' + (i + 1)\"\n          loading=\"lazy\"\n          decoding=\"async\"\n          class=\"w-full object-cover transition duration-200 group-hover:scale-[1.02]\"\n          [style.max-height.px]=\"resolvedImageMaxHeight()\"\n          [ngClass]=\"resolvedImageUrls().length === 1 ? 'h-auto' : 'h-48'\"\n        />\n      </button>\n    }\n  </div>\n\n  @if (isViewerOpen()) {\n    <app-images-viewer\n      [urls]=\"resolvedImageUrls()\"\n      [initialIndex]=\"viewerStartIndex()\"\n      (closed)=\"closeViewer()\"\n    ></app-images-viewer>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ImagesComponent, isStandalone: true, selector: "app-images", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (resolvedImageUrls().length === 0) {\n  <p class=\"text-sm text-slate-500\">\u0424\u043E\u0442\u043E \u0432\u0456\u0434\u0441\u0443\u0442\u043D\u0456</p>\n} @else {\n  <div\n    class=\"grid gap-3\"\n    [ngClass]=\"resolvedImageUrls().length === 1 ? 'grid-cols-1' : 'sm:grid-cols-2 lg:grid-cols-4'\"\n  >\n    @for (image of resolvedImagePreviewUrls(); track image; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"group block overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 text-left\"\n        [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 \u0444\u043E\u0442\u043E ' + (i + 1)\"\n        (click)=\"openViewer(i)\"\n      >\n        <img\n          [src]=\"image\"\n          [alt]=\"'\u0424\u043E\u0442\u043E ' + (i + 1)\"\n          loading=\"lazy\"\n          decoding=\"async\"\n          class=\"w-full object-cover transition duration-200 group-hover:scale-[1.02]\"\n          [style.max-height.px]=\"resolvedImageMaxHeight()\"\n          [ngClass]=\"resolvedImageUrls().length === 1 ? 'h-auto' : 'h-48'\"\n        />\n      </button>\n    }\n  </div>\n\n  @if (isViewerOpen()) {\n    <app-images-viewer\n      [urls]=\"resolvedImageUrls()\"\n      [initialIndex]=\"viewerStartIndex()\"\n      (closed)=\"closeViewer()\"\n    ></app-images-viewer>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ImagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-images', standalone: true, imports: [CommonModule, ImagesViewerComponent], template: "@if (resolvedImageUrls().length === 0) {\n  <p class=\"text-sm text-slate-500\">\u0424\u043E\u0442\u043E \u0432\u0456\u0434\u0441\u0443\u0442\u043D\u0456</p>\n} @else {\n  <div\n    class=\"grid gap-3\"\n    [ngClass]=\"resolvedImageUrls().length === 1 ? 'grid-cols-1' : 'sm:grid-cols-2 lg:grid-cols-4'\"\n  >\n    @for (image of resolvedImagePreviewUrls(); track image; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"group block overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 text-left\"\n        [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 \u0444\u043E\u0442\u043E ' + (i + 1)\"\n        (click)=\"openViewer(i)\"\n      >\n        <img\n          [src]=\"image\"\n          [alt]=\"'\u0424\u043E\u0442\u043E ' + (i + 1)\"\n          loading=\"lazy\"\n          decoding=\"async\"\n          class=\"w-full object-cover transition duration-200 group-hover:scale-[1.02]\"\n          [style.max-height.px]=\"resolvedImageMaxHeight()\"\n          [ngClass]=\"resolvedImageUrls().length === 1 ? 'h-auto' : 'h-48'\"\n        />\n      </button>\n    }\n  </div>\n\n  @if (isViewerOpen()) {\n    <app-images-viewer\n      [urls]=\"resolvedImageUrls()\"\n      [initialIndex]=\"viewerStartIndex()\"\n      (closed)=\"closeViewer()\"\n    ></app-images-viewer>\n  }\n}\n" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
-class StandardTableComponent {
+class TableComponent {
     config;
     data = null;
     http = inject(HttpClient);
@@ -516,10 +584,10 @@ class StandardTableComponent {
     columnsSignal = signal([], ...(ngDevMode ? [{ debugName: "columnsSignal" }] : /* istanbul ignore next */ []));
     rowsSignal = signal([], ...(ngDevMode ? [{ debugName: "rowsSignal" }] : /* istanbul ignore next */ []));
     paginationSignal = signal({ page: 0, pageSize: 10, total: 0 }, ...(ngDevMode ? [{ debugName: "paginationSignal" }] : /* istanbul ignore next */ []));
+    pageSizeOptionsSignal = signal([10, 20, 30], ...(ngDevMode ? [{ debugName: "pageSizeOptionsSignal" }] : /* istanbul ignore next */ []));
     headerActionsSignal = signal([], ...(ngDevMode ? [{ debugName: "headerActionsSignal" }] : /* istanbul ignore next */ []));
     loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : /* istanbul ignore next */ []));
     errorSignal = signal('', ...(ngDevMode ? [{ debugName: "errorSignal" }] : /* istanbul ignore next */ []));
-    editableOptionsSignal = signal({}, ...(ngDevMode ? [{ debugName: "editableOptionsSignal" }] : /* istanbul ignore next */ []));
     columns = this.columnsSignal.asReadonly();
     rows = this.rowsSignal.asReadonly();
     headerActions = this.headerActionsSignal.asReadonly();
@@ -616,7 +684,8 @@ class StandardTableComponent {
                 this.setColumns();
                 this.headerActionsSignal.set(view.actions?.header?.custom || []);
                 this.rowsSignal.set(this.rowsFrom(view, sourceColumns));
-                this.loadEditableOptions();
+                if (view.pagination?.sizes?.length)
+                    this.pageSizeOptionsSignal.set(view.pagination.sizes);
                 this.page = view.pagination?.page ?? this.page;
                 this.pageSize = view.pagination?.size ?? this.pageSize;
                 this.paginationSignal.set({
@@ -651,31 +720,13 @@ class StandardTableComponent {
                 editableCondition: String(this.config?.props?.['editableCondition'] || config?.['condition'] || ''),
                 editor: config?.editor,
                 bindKey: config?.bindKey || key,
-                options: config?.options || this.editableOptionsSignal()[key] || [],
+                options: config?.options || [],
+                data: config?.data,
+                dataParams: config?.dataParams,
                 placeholder: config?.placeholder,
-                includeBlankOption: config?.includeBlankOption,
-                blankOptionLabel: config?.blankOptionLabel,
             };
         }));
     }
-    loadEditableOptions() {
-        const sources = this.editableColumns().filter((column) => column.data && !column.options);
-        if (!sources.length)
-            return;
-        forkJoin(sources.map((column) => this.http.get(`/api/suggest/${encodeURIComponent(column.data)}`))).subscribe({
-            next: (responses) => {
-                const options = { ...this.editableOptionsSignal() };
-                sources.forEach((column, index) => {
-                    options[column.key] = (responses[index] || []).map((item) => ({
-                        value: item?.key == null ? null : String(item.key),
-                        label: String(item?.label || item?.key || '').trim(),
-                    }));
-                });
-                this.editableOptionsSignal.set(options);
-                this.setColumns();
-            },
-        });
-    }
     rowsFrom(view, columns) {
         const configured = view.actions?.row?.custom || [];
         return (view.rows || []).map((raw) => {
@@ -688,10 +739,11 @@ class StandardTableComponent {
             row['id'] = String(row['id'] || '');
             if (!Array.isArray(row['actions'])) {
                 const actions = [...configured];
-                if (view.viewActions?.edit !== false && view.actions?.row?.edit !== false && this.editEnabled()) {
+                const actionIds = new Set(actions.map((action) => String(action.id || '').trim()).filter(Boolean));
+                if (view.viewActions?.edit !== false && view.actions?.row?.edit !== false && this.editEnabled() && !actionIds.has('edit')) {
                     actions.push({ id: 'edit', label: 'Редагувати', type: 'form', formId: this.tableName() });
                 }
-                if (view.viewActions?.delete !== false && view.actions?.row?.delete !== false) {
+                if (view.viewActions?.delete !== false && view.actions?.row?.delete !== false && !actionIds.has('delete')) {
                     actions.push({ id: 'delete', label: 'Видалити', type: 'submit', api: `/api/crud/${this.tableName()}/${row['id']}`, method: 'DELETE' });
                 }
                 if (actions.length)
@@ -745,12 +797,12 @@ class StandardTableComponent {
             return this.resolveObject(value, row);
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StandardTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StandardTableComponent, isStandalone: true, selector: "app-card-table", inputs: { config: "config", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiTableComponent, selector: "app-ui-table", inputs: ["columns", "isLoading", "data", "disablePaging", "rowClickable", "imageResolver"], outputs: ["pageChange", "rowClick", "actionClick", "cellChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TableComponent, isStandalone: true, selector: "app-card-table", inputs: { config: "config", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [pageSizeOptions]=\"pageSizeOptionsSignal()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiTableComponent, selector: "app-ui-table", inputs: ["pageSizeOptions", "columns", "isLoading", "data", "disablePaging", "rowClickable", "imageResolver"], outputs: ["pageChange", "rowClick", "actionClick", "cellChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StandardTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-table', standalone: true, imports: [CommonModule, UiTableComponent], template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n" }]
+            args: [{ selector: 'app-card-table', standalone: true, imports: [CommonModule, UiTableComponent], template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [pageSizeOptions]=\"pageSizeOptionsSignal()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -768,6 +820,7 @@ function normalizeTableResponse(response) {
             size: raw['size'] ?? source.pagination?.size,
             total: raw['total'] ?? source.pagination?.total,
             totalElements: raw['total'] ?? source.pagination?.totalElements,
+            sizes: source.pagination?.sizes,
         },
     };
 }
@@ -837,11 +890,11 @@ class UiCardPanelsLayoutComponent {
         return found.resolveInputs(tab, this.data());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardPanelsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardPanelsLayoutComponent, isStandalone: true, selector: "app-ui-card-panels-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => StandardTableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardPanelsLayoutComponent, isStandalone: true, selector: "app-ui-card-panels-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => TableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardPanelsLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ui-card-panels-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, DetailsGridComponent, ImagesComponent, StandardTableComponent], template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n" }]
+            args: [{ selector: 'app-ui-card-panels-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, DetailsGridComponent, ImagesComponent, TableComponent], template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n" }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }] } });
 
 class UiCardTabsLayoutComponent {
@@ -907,11 +960,11 @@ class UiCardTabsLayoutComponent {
         return found.resolveInputs(tab, this.data());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardTabsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardTabsLayoutComponent, isStandalone: true, selector: "app-ui-card-tabs-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => StandardTableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardTabsLayoutComponent, isStandalone: true, selector: "app-ui-card-tabs-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => TableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardTabsLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ui-card-tabs-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, ImagesComponent, DetailsGridComponent, StandardTableComponent], template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n" }]
+            args: [{ selector: 'app-ui-card-tabs-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, ImagesComponent, DetailsGridComponent, TableComponent], template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n" }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class CardComponent {
@@ -1080,7 +1133,7 @@ class DocumentsUploadModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DocumentsUploadModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DocumentsUploadModalComponent, isStandalone: true, selector: "app-documents-upload-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, viewQueries: [{ propertyName: "uploadFileInput", first: true, predicate: ["uploadFileInput"], descendants: true }], ngImport: i0, template: "<core-modal\n  title=\"\u0414\u043E\u0434\u0430\u0442\u0438 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\"\n  [isOpen]=\"isOpen()\"\n  (closed)=\"close()\"\n>\n  <div class=\"space-y-4\">\n    <input-select\n      [data]=\"'doc_type'\"\n      name=\"uploadDocumentTypeId\"\n      label=\"\u0422\u0438\u043F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\"\n      hint=\"\u041D\u0435\u043E\u0431\u043E\u0432'\u044F\u0437\u043A\u043E\u0432\u043E\"\n      [ngModel]=\"documentTypeId()\"\n      (ngModelChange)=\"onDocumentTypeChange($event)\"\n      placeholder=\"\u0422\u0438\u043F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\"\n      [fullWidth]=\"true\"\n      [searchable]=\"true\"\n    ></input-select>\n\n    <div class=\"space-y-2\">\n      <label class=\"block text-sm font-medium text-slate-700\" for=\"document-files\">\u0424\u0430\u0439\u043B\u0438</label>\n      <input\n        #uploadFileInput\n        id=\"document-files\"\n        type=\"file\"\n        class=\"block w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-900 outline-none transition file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white focus:border-slate-400 focus:ring-2 focus:ring-slate-200\"\n        multiple\n        (change)=\"onFilesSelected($event)\"\n      />\n      @if (fileNames().length) {\n        <div class=\"rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600\">\n          @for (fileName of fileNames(); track fileName) {\n            <div class=\"truncate\">{{ fileName }}</div>\n          }\n        </div>\n      } @else {\n        <p class=\"text-xs text-slate-500\">\u041C\u043E\u0436\u043D\u0430 \u043E\u0431\u0440\u0430\u0442\u0438 \u043E\u0434\u0438\u043D \u0430\u0431\u043E \u0434\u0435\u043A\u0456\u043B\u044C\u043A\u0430 \u0444\u0430\u0439\u043B\u0456\u0432.</p>\n      }\n    </div>\n  </div>\n\n  <div slot=\"footer\" class=\"flex justify-end gap-2\">\n    <ui-button variant=\"ghost\" [disabled]=\"isUploading()\" (click)=\"close()\">\u0421\u043A\u0430\u0441\u0443\u0432\u0430\u0442\u0438</ui-button>\n    <ui-button variant=\"primary\" [disabled]=\"isUploading()\" (click)=\"submitUpload()\">\n      {{ isUploading() ? '\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...' : '\u0417\u0431\u0435\u0440\u0435\u0433\u0442\u0438' }}\n    </ui-button>\n  </div>\n</core-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiModalComponent, selector: "core-modal", inputs: ["isOpen", "title", "size", "position", "closable", "closeOnBackdrop", "closeOnEscape"], outputs: ["closed"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DocumentsUploadModalComponent, isStandalone: true, selector: "app-documents-upload-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, viewQueries: [{ propertyName: "uploadFileInput", first: true, predicate: ["uploadFileInput"], descendants: true }], ngImport: i0, template: "<core-modal\n  title=\"\u0414\u043E\u0434\u0430\u0442\u0438 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\"\n  [isOpen]=\"isOpen()\"\n  (closed)=\"close()\"\n>\n  <div class=\"space-y-4\">\n    <input-select\n      [data]=\"'doc_type'\"\n      name=\"uploadDocumentTypeId\"\n      label=\"\u0422\u0438\u043F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\"\n      hint=\"\u041D\u0435\u043E\u0431\u043E\u0432'\u044F\u0437\u043A\u043E\u0432\u043E\"\n      [ngModel]=\"documentTypeId()\"\n      (ngModelChange)=\"onDocumentTypeChange($event)\"\n      placeholder=\"\u0422\u0438\u043F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\"\n      [fullWidth]=\"true\"\n      [searchable]=\"true\"\n    ></input-select>\n\n    <div class=\"space-y-2\">\n      <label class=\"block text-sm font-medium text-slate-700\" for=\"document-files\">\u0424\u0430\u0439\u043B\u0438</label>\n      <input\n        #uploadFileInput\n        id=\"document-files\"\n        type=\"file\"\n        class=\"block w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-900 outline-none transition file:mr-3 file:rounded-lg file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white focus:border-slate-400 focus:ring-2 focus:ring-slate-200\"\n        multiple\n        (change)=\"onFilesSelected($event)\"\n      />\n      @if (fileNames().length) {\n        <div class=\"rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600\">\n          @for (fileName of fileNames(); track fileName) {\n            <div class=\"truncate\">{{ fileName }}</div>\n          }\n        </div>\n      } @else {\n        <p class=\"text-xs text-slate-500\">\u041C\u043E\u0436\u043D\u0430 \u043E\u0431\u0440\u0430\u0442\u0438 \u043E\u0434\u0438\u043D \u0430\u0431\u043E \u0434\u0435\u043A\u0456\u043B\u044C\u043A\u0430 \u0444\u0430\u0439\u043B\u0456\u0432.</p>\n      }\n    </div>\n  </div>\n\n  <div slot=\"footer\" class=\"flex justify-end gap-2\">\n    <ui-button variant=\"ghost\" [disabled]=\"isUploading()\" (click)=\"close()\">\u0421\u043A\u0430\u0441\u0443\u0432\u0430\u0442\u0438</ui-button>\n    <ui-button variant=\"primary\" [disabled]=\"isUploading()\" (click)=\"submitUpload()\">\n      {{ isUploading() ? '\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...' : '\u0417\u0431\u0435\u0440\u0435\u0433\u0442\u0438' }}\n    </ui-button>\n  </div>\n</core-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiModalComponent, selector: "core-modal", inputs: ["isOpen", "title", "size", "position", "closable", "closeOnBackdrop", "closeOnEscape"], outputs: ["closed"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DocumentsUploadModalComponent, decorators: [{
             type: Component,
@@ -1428,7 +1481,7 @@ class DocumentsComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DocumentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DocumentsComponent, isStandalone: true, selector: "app-documents", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-4\">\n  <div>\n    @if (isLoading()) {\n      <div class=\"rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500\">\n        \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0456\u0432...\n      </div>\n    } @else if (documents().length === 0) {\n      <div class=\"rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500\">\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0438 \u0432\u0456\u0434\u0441\u0443\u0442\u043D\u0456\n      </div>\n    } @else {\n      <div class=\"grid gap-3\">\n        @for (document of documents(); track trackDocument($index, document)) {\n          <article class=\"flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between\">\n            @if (isImage(document)) {\n              <button\n                type=\"button\"\n                class=\"block shrink-0 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 transition hover:border-slate-300 hover:bg-slate-100 h-28 w-40\"\n                (click)=\"openImagePreview(document)\"\n              >\n                <img [src]=\"getImagePreviewUrl(document)\" [alt]=\"document.name || '\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442'\" loading=\"lazy\" decoding=\"async\" class=\"h-full w-full object-cover\">\n              </button>\n            } @else {\n              <a\n                class=\"block shrink-0 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 transition hover:border-slate-300 hover:bg-slate-100\"\n                [href]=\"document.downloadUrl\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                [class.h-28]=\"isPdf(document)\"\n                [class.w-40]=\"isPdf(document)\"\n                [class.h-20]=\"!isPdf(document)\"\n                [class.w-24]=\"!isPdf(document)\"\n              >\n                @if (isPdf(document)) {\n                  <div class=\"flex h-full w-full flex-col items-center justify-center gap-2 px-3 py-4 text-slate-700\">\n                    <div class=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-slate-900 shadow-sm\">\n                      <lucide-icon [img]=\"fileIcon\"></lucide-icon>\n                    </div>\n                    <span class=\"text-xs font-semibold uppercase tracking-[0.18em] text-slate-600\">PDF</span>\n                  </div>\n                } @else {\n                  <div class=\"flex h-full w-full flex-col items-center justify-center gap-2 px-3 py-4 text-slate-700\">\n                    <div class=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-slate-900 shadow-sm\">\n                      <lucide-icon [img]=\"fileIcon\"></lucide-icon>\n                    </div>\n                    <span class=\"text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500\">\n                      {{ getFileBadge(document) }}\n                    </span>\n                  </div>\n                }\n              </a>\n            }\n\n            <div class=\"min-w-0 flex-1\">\n              <div class=\"flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between\">\n                <div class=\"min-w-0\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <h4 class=\"truncate text-sm font-semibold text-slate-900\">\n                      {{ document.name || '\u0411\u0435\u0437 \u043D\u0430\u0437\u0432\u0438' }}\n                    </h4>\n                    @if (getDocumentTypeLabel(document)) {\n                      <span class=\"inline-flex shrink-0 items-center rounded-full border border-sky-200 bg-sky-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-700\">\n                        {{ getDocumentTypeLabel(document) }}\n                      </span>\n                    }\n                  </div>\n                  <p class=\"mt-1 text-xs text-slate-500\">\n                    {{ formatSize(document.size) }} \u00B7 {{ document.type }}\n                  </p>\n                </div>\n\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <ui-button variant=\"ghost\" size=\"sm\" (click)=\"openTextModal(document)\">\n                    <lucide-icon [img]=\"eyeIcon\"></lucide-icon>\n                    \u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434\n                  </ui-button>\n                  @if (isImage(document)) {\n                    <ui-button variant=\"ghost\" size=\"sm\" [disabled]=\"isDocumentRecognizing(document) || isRecognitionPending(document) || isRecognitionCompleted(document)\" (click)=\"recognizeText(document)\">\n                      <lucide-icon [img]=\"sparkleIcon\"></lucide-icon>\n                      {{ isDocumentRecognizing(document) ? '\u0420\u043E\u0437\u043F\u0456\u0437\u043D\u0430\u0432\u0430\u043D\u043D\u044F...' : '\u0420\u043E\u0437\u043F\u0456\u0437\u043D\u0430\u0442\u0438 \u0434\u0430\u043D\u0456' }}\n                    </ui-button>\n                  }\n                  @if (isAdmin()) {\n                    <ui-button variant=\"ghost\" size=\"sm\" [disabled]=\"deletingDocumentId() === document.id\" (click)=\"removeDocument(document)\">\n                      <lucide-icon [img]=\"deleteIcon\"></lucide-icon>\n                      {{ deletingDocumentId() === document.id ? '\u0412\u0438\u0434\u0430\u043B\u0435\u043D\u043D\u044F...' : '\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438' }}\n                    </ui-button>\n                  }\n                </div>\n              </div>\n\n              <div class=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n                <a\n                  class=\"inline-flex items-center rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50\"\n                  [href]=\"document.downloadUrl\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438\n                </a>\n                @if (isImage(document) && getRecognitionStatusLabel(document)) {\n                  <span\n                    class=\"inline-flex items-center rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em]\"\n                    [class.border-amber-200]=\"isRecognitionPending(document)\"\n                    [class.bg-amber-50]=\"isRecognitionPending(document)\"\n                    [class.text-amber-700]=\"isRecognitionPending(document)\"\n                    [class.border-rose-200]=\"document.recognitionStatus === 'FAILED'\"\n                    [class.bg-rose-50]=\"document.recognitionStatus === 'FAILED'\"\n                    [class.text-rose-700]=\"document.recognitionStatus === 'FAILED'\"\n                    [class.border-emerald-200]=\"document.recognitionStatus === 'COMPLETED'\"\n                    [class.bg-emerald-50]=\"document.recognitionStatus === 'COMPLETED'\"\n                    [class.text-emerald-700]=\"document.recognitionStatus === 'COMPLETED'\"\n                  >\n                    {{ getRecognitionStatusLabel(document) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </article>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"flex flex-col gap-3 rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-4\">\n    <div>\n      <h4 class=\"text-sm font-semibold text-slate-900\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0456\u0432 \u0443 \u0444\u0430\u0439\u043B\u043E\u0432\u0435 \u0441\u0445\u043E\u0432\u0438\u0449\u0435</h4>\n      <p class=\"mt-1 text-xs text-slate-500\">\u0414\u043E\u0434\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u0456 \u0444\u0430\u0439\u043B\u0438 \u0434\u043E \u043A\u0430\u0440\u0442\u043A\u0438 \u0431\u0435\u0437\u043F\u043E\u0441\u0435\u0440\u0435\u0434\u043D\u044C\u043E \u0442\u0443\u0442.</p>\n    </div>\n\n    <div class=\"flex w-full flex-col gap-2 sm:w-auto\">\n      <ui-button variant=\"secondary\" size=\"sm\" (click)=\"openUploadModal()\">\n        <lucide-icon [img]=\"plusIcon\"></lucide-icon>\n        \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\n      </ui-button>\n    </div>\n  </div>\n</div>\n\n<app-documents-text-modal\n  [isOpen]=\"isTextOpen()\"\n  [document]=\"textTarget()\"\n  (closed)=\"closeTextModal()\"\n  (recognizeRequested)=\"textTarget() && recognizeText(textTarget()!)\"\n></app-documents-text-modal>\n\n<app-documents-upload-modal\n  [isOpen]=\"isUploadOpen()\"\n  [entity]=\"entity()\"\n  [id]=\"id()\"\n  (closed)=\"closeUploadModal()\"\n  (saved)=\"reloadDocuments()\"\n></app-documents-upload-modal>\n\n<app-documents-image-preview-modal\n  [isOpen]=\"isImagePreviewOpen()\"\n  [document]=\"imagePreviewTarget()\"\n  (closed)=\"closeImagePreview()\"\n></app-documents-image-preview-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1$2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: DocumentsUploadModalComponent, selector: "app-documents-upload-modal", inputs: ["isOpen", "entity", "id"], outputs: ["closed", "saved"] }, { kind: "component", type: DocumentsTextModalComponent, selector: "app-documents-text-modal", inputs: ["isOpen", "document"], outputs: ["closed", "recognizeRequested"] }, { kind: "component", type: DocumentsImagePreviewModalComponent, selector: "app-documents-image-preview-modal", inputs: ["isOpen", "document"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DocumentsComponent, isStandalone: true, selector: "app-documents", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-4\">\n  <div>\n    @if (isLoading()) {\n      <div class=\"rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500\">\n        \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0456\u0432...\n      </div>\n    } @else if (documents().length === 0) {\n      <div class=\"rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500\">\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0438 \u0432\u0456\u0434\u0441\u0443\u0442\u043D\u0456\n      </div>\n    } @else {\n      <div class=\"grid gap-3\">\n        @for (document of documents(); track trackDocument($index, document)) {\n          <article class=\"flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between\">\n            @if (isImage(document)) {\n              <button\n                type=\"button\"\n                class=\"block shrink-0 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 transition hover:border-slate-300 hover:bg-slate-100 h-28 w-40\"\n                (click)=\"openImagePreview(document)\"\n              >\n                <img [src]=\"getImagePreviewUrl(document)\" [alt]=\"document.name || '\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442'\" loading=\"lazy\" decoding=\"async\" class=\"h-full w-full object-cover\">\n              </button>\n            } @else {\n              <a\n                class=\"block shrink-0 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 transition hover:border-slate-300 hover:bg-slate-100\"\n                [href]=\"document.downloadUrl\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                [class.h-28]=\"isPdf(document)\"\n                [class.w-40]=\"isPdf(document)\"\n                [class.h-20]=\"!isPdf(document)\"\n                [class.w-24]=\"!isPdf(document)\"\n              >\n                @if (isPdf(document)) {\n                  <div class=\"flex h-full w-full flex-col items-center justify-center gap-2 px-3 py-4 text-slate-700\">\n                    <div class=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-slate-900 shadow-sm\">\n                      <lucide-icon [img]=\"fileIcon\"></lucide-icon>\n                    </div>\n                    <span class=\"text-xs font-semibold uppercase tracking-[0.18em] text-slate-600\">PDF</span>\n                  </div>\n                } @else {\n                  <div class=\"flex h-full w-full flex-col items-center justify-center gap-2 px-3 py-4 text-slate-700\">\n                    <div class=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-slate-900 shadow-sm\">\n                      <lucide-icon [img]=\"fileIcon\"></lucide-icon>\n                    </div>\n                    <span class=\"text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500\">\n                      {{ getFileBadge(document) }}\n                    </span>\n                  </div>\n                }\n              </a>\n            }\n\n            <div class=\"min-w-0 flex-1\">\n              <div class=\"flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between\">\n                <div class=\"min-w-0\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <h4 class=\"truncate text-sm font-semibold text-slate-900\">\n                      {{ document.name || '\u0411\u0435\u0437 \u043D\u0430\u0437\u0432\u0438' }}\n                    </h4>\n                    @if (getDocumentTypeLabel(document)) {\n                      <span class=\"inline-flex shrink-0 items-center rounded-full border border-sky-200 bg-sky-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-700\">\n                        {{ getDocumentTypeLabel(document) }}\n                      </span>\n                    }\n                  </div>\n                  <p class=\"mt-1 text-xs text-slate-500\">\n                    {{ formatSize(document.size) }} \u00B7 {{ document.type }}\n                  </p>\n                </div>\n\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <ui-button variant=\"ghost\" size=\"sm\" (click)=\"openTextModal(document)\">\n                    <lucide-icon [img]=\"eyeIcon\"></lucide-icon>\n                    \u041F\u0435\u0440\u0435\u0433\u043B\u044F\u0434\n                  </ui-button>\n                  @if (isImage(document)) {\n                    <ui-button variant=\"ghost\" size=\"sm\" [disabled]=\"isDocumentRecognizing(document) || isRecognitionPending(document) || isRecognitionCompleted(document)\" (click)=\"recognizeText(document)\">\n                      <lucide-icon [img]=\"sparkleIcon\"></lucide-icon>\n                      {{ isDocumentRecognizing(document) ? '\u0420\u043E\u0437\u043F\u0456\u0437\u043D\u0430\u0432\u0430\u043D\u043D\u044F...' : '\u0420\u043E\u0437\u043F\u0456\u0437\u043D\u0430\u0442\u0438 \u0434\u0430\u043D\u0456' }}\n                    </ui-button>\n                  }\n                  @if (isAdmin()) {\n                    <ui-button variant=\"ghost\" size=\"sm\" [disabled]=\"deletingDocumentId() === document.id\" (click)=\"removeDocument(document)\">\n                      <lucide-icon [img]=\"deleteIcon\"></lucide-icon>\n                      {{ deletingDocumentId() === document.id ? '\u0412\u0438\u0434\u0430\u043B\u0435\u043D\u043D\u044F...' : '\u0412\u0438\u0434\u0430\u043B\u0438\u0442\u0438' }}\n                    </ui-button>\n                  }\n                </div>\n              </div>\n\n              <div class=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n                <a\n                  class=\"inline-flex items-center rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50\"\n                  [href]=\"document.downloadUrl\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438\n                </a>\n                @if (isImage(document) && getRecognitionStatusLabel(document)) {\n                  <span\n                    class=\"inline-flex items-center rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em]\"\n                    [class.border-amber-200]=\"isRecognitionPending(document)\"\n                    [class.bg-amber-50]=\"isRecognitionPending(document)\"\n                    [class.text-amber-700]=\"isRecognitionPending(document)\"\n                    [class.border-rose-200]=\"document.recognitionStatus === 'FAILED'\"\n                    [class.bg-rose-50]=\"document.recognitionStatus === 'FAILED'\"\n                    [class.text-rose-700]=\"document.recognitionStatus === 'FAILED'\"\n                    [class.border-emerald-200]=\"document.recognitionStatus === 'COMPLETED'\"\n                    [class.bg-emerald-50]=\"document.recognitionStatus === 'COMPLETED'\"\n                    [class.text-emerald-700]=\"document.recognitionStatus === 'COMPLETED'\"\n                  >\n                    {{ getRecognitionStatusLabel(document) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </article>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"flex flex-col gap-3 rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-4\">\n    <div>\n      <h4 class=\"text-sm font-semibold text-slate-900\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0456\u0432 \u0443 \u0444\u0430\u0439\u043B\u043E\u0432\u0435 \u0441\u0445\u043E\u0432\u0438\u0449\u0435</h4>\n      <p class=\"mt-1 text-xs text-slate-500\">\u0414\u043E\u0434\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u0456 \u0444\u0430\u0439\u043B\u0438 \u0434\u043E \u043A\u0430\u0440\u0442\u043A\u0438 \u0431\u0435\u0437\u043F\u043E\u0441\u0435\u0440\u0435\u0434\u043D\u044C\u043E \u0442\u0443\u0442.</p>\n    </div>\n\n    <div class=\"flex w-full flex-col gap-2 sm:w-auto\">\n      <ui-button variant=\"secondary\" size=\"sm\" (click)=\"openUploadModal()\">\n        <lucide-icon [img]=\"plusIcon\"></lucide-icon>\n        \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\n      </ui-button>\n    </div>\n  </div>\n</div>\n\n<app-documents-text-modal\n  [isOpen]=\"isTextOpen()\"\n  [document]=\"textTarget()\"\n  (closed)=\"closeTextModal()\"\n  (recognizeRequested)=\"textTarget() && recognizeText(textTarget()!)\"\n></app-documents-text-modal>\n\n<app-documents-upload-modal\n  [isOpen]=\"isUploadOpen()\"\n  [entity]=\"entity()\"\n  [id]=\"id()\"\n  (closed)=\"closeUploadModal()\"\n  (saved)=\"reloadDocuments()\"\n></app-documents-upload-modal>\n\n<app-documents-image-preview-modal\n  [isOpen]=\"isImagePreviewOpen()\"\n  [document]=\"imagePreviewTarget()\"\n  (closed)=\"closeImagePreview()\"\n></app-documents-image-preview-modal>\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"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: DocumentsUploadModalComponent, selector: "app-documents-upload-modal", inputs: ["isOpen", "entity", "id"], outputs: ["closed", "saved"] }, { kind: "component", type: DocumentsTextModalComponent, selector: "app-documents-text-modal", inputs: ["isOpen", "document"], outputs: ["closed", "recognizeRequested"] }, { kind: "component", type: DocumentsImagePreviewModalComponent, selector: "app-documents-image-preview-modal", inputs: ["isOpen", "document"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DocumentsComponent, decorators: [{
             type: Component,
@@ -1591,7 +1644,7 @@ class HistoryTabComponent {
             : operation.changes || [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: HistoryTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: HistoryTabComponent, isStandalone: true, selector: "app-history-tab", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, primaryEntity: { classPropertyName: "primaryEntity", publicName: "primaryEntity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, entityLabels: { classPropertyName: "entityLabels", publicName: "entityLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (isLoading()) {\n    <div class=\"rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500\">\n      \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0456\u0441\u0442\u043E\u0440\u0456\u0457\u2026\n    </div>\n  } @else if (hasError()) {\n    <div class=\"rounded-2xl border border-red-200 bg-red-50 p-6 text-sm text-red-700\">\n      \u041D\u0435 \u0432\u0434\u0430\u043B\u043E\u0441\u044F \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0437\u043C\u0456\u043D.\n    </div>\n  } @else if (!operations().length) {\n    <div class=\"rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500\">\n      \u0406\u0441\u0442\u043E\u0440\u0456\u044F \u0437\u043C\u0456\u043D \u043F\u043E\u043A\u0438 \u043F\u043E\u0440\u043E\u0436\u043D\u044F.\n    </div>\n  } @else {\n    <div class=\"space-y-3\">\n      @for (operation of operations(); track operation.id) {\n        <article class=\"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm\">\n          <div class=\"flex flex-wrap items-start justify-between gap-3\">\n            <div>\n              <h3 class=\"text-sm font-semibold text-slate-900\">{{ operation.description }}</h3>\n              @if (operation.actorName) {\n                <p class=\"mt-1 text-sm text-slate-500\">{{ operation.actorName }}</p>\n              }\n            </div>\n            <time class=\"text-xs text-slate-400\" [dateTime]=\"operation.createdAt\">\n              {{ operation.createdAt | date: 'dd.MM.yyyy HH:mm' }}\n            </time>\n          </div>\n\n          @if (getPrimaryChanges(operation).length) {\n            <div class=\"mt-4 space-y-2 border-t border-slate-100 pt-4\">\n              @for (change of getPrimaryChanges(operation); track change.entityId + change.entityType) {\n                @for (field of (change.changedFields | keyvalue); track field.key) {\n                  <div class=\"flex flex-wrap items-center gap-2 text-sm\">\n                    <span class=\"font-medium text-slate-700\">{{ field.value.label }}</span>\n                    @if (isImageField(field.value)) {\n                      @if (getImageUrls(field.value.from.value).length) {\n                        <div class=\"flex flex-wrap items-center gap-2\">\n                          @for (url of getImageUrls(field.value.from.value); track url; let imageIndex = $index) {\n                            <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-slate-100\" (click)=\"openImageViewer(getImageUrls(field.value.from.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u0441\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                              <img [src]=\"url\" [alt]=\"'\u0421\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isFileField(field.value)) {\n                      @if (field.value.from.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [href]=\"field.value.from.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                      } @else {\n                        <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isHtmlField(field.value)) {\n                      @if (field.value.from.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                        <div class=\"prose prose-sm max-w-none text-slate-500\" [innerHTML]=\"field.value.from.display\"></div>\n                      } @else {\n                        <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else {\n                      @if (field.value.from.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [routerLink]=\"field.value.from.url\">{{ field.value.from.display }}</a>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">{{ field.value.from.display }}</span>\n                      }\n                    }\n                    <span class=\"text-slate-400\">\u2192</span>\n                    @if (isImageField(field.value)) {\n                      @if (getImageUrls(field.value.to.value).length) {\n                        <div class=\"flex flex-wrap items-center gap-2\">\n                          @for (url of getImageUrls(field.value.to.value); track url; let imageIndex = $index) {\n                            <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-slate-100\" (click)=\"openImageViewer(getImageUrls(field.value.to.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                              <img [src]=\"url\" [alt]=\"'\u041D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isFileField(field.value)) {\n                      @if (field.value.to.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [href]=\"field.value.to.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isHtmlField(field.value)) {\n                      @if (field.value.to.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                        <div class=\"prose prose-sm max-w-none text-slate-900\" [innerHTML]=\"field.value.to.display\"></div>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else {\n                      @if (field.value.to.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [routerLink]=\"field.value.to.url\">{{ field.value.to.display }}</a>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">{{ field.value.to.display }}</span>\n                      }\n                    }\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          @if (getRelatedChanges(operation).length) {\n            <div class=\"mt-4 border-t border-slate-100 pt-4\">\n              <button\n                type=\"button\"\n                class=\"flex w-full items-center justify-between gap-3 text-left text-sm text-slate-600\"\n                [attr.aria-expanded]=\"isExpanded(operation.id)\"\n                (click)=\"toggleOperation(operation.id)\"\n              >\n                <span>\n                  \u0414\u0435\u0442\u0430\u043B\u0456 \u0437\u043C\u0456\u043D:\n                  <span class=\"font-medium text-slate-900\">{{ getAffectedSummary(operation) }}</span>\n                </span>\n                <span class=\"text-lg leading-none text-slate-400\">{{ isExpanded(operation.id) ? '\u2212' : '+' }}</span>\n              </button>\n\n              @if (isExpanded(operation.id)) {\n                <div class=\"mt-4 space-y-4\">\n                  @for (change of getRelatedChanges(operation); track change.entityId + change.entityType) {\n                    <div class=\"rounded-xl bg-slate-50 p-3\">\n                      <p class=\"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500\">\n                        {{ getEntityLabel(change.entityType) }} \u00B7 {{ getActionLabel(change.action) }}\n                      </p>\n                      @for (field of (change.changedFields | keyvalue); track field.key) {\n                        <div class=\"flex flex-wrap items-center gap-2 text-sm\">\n                          <span class=\"font-medium text-slate-700\">{{ field.value.label }}</span>\n                          @if (isImageField(field.value)) {\n                            @if (getImageUrls(field.value.from.value).length) {\n                              <div class=\"flex flex-wrap items-center gap-2\">\n                                @for (url of getImageUrls(field.value.from.value); track url; let imageIndex = $index) {\n                                  <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-white\" (click)=\"openImageViewer(getImageUrls(field.value.from.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u0441\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                                    <img [src]=\"url\" [alt]=\"'\u0421\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                                  </button>\n                                }\n                              </div>\n                            } @else {\n                              <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isFileField(field.value)) {\n                            @if (field.value.from.url) {\n                              <a class=\"text-sky-700 underline\" [href]=\"field.value.from.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                            } @else {\n                              <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isHtmlField(field.value)) {\n                            @if (field.value.from.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                              <div class=\"prose prose-sm max-w-none text-slate-500\" [innerHTML]=\"field.value.from.display\"></div>\n                            } @else {\n                              <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else {\n                            @if (field.value.from.url) {\n                              <a class=\"text-sky-700 underline\" [routerLink]=\"field.value.from.url\">{{ field.value.from.display }}</a>\n                            } @else {\n                              <span class=\"text-slate-400\">{{ field.value.from.display }}</span>\n                            }\n                          }\n                          <span class=\"text-slate-400\">\u2192</span>\n                          @if (isImageField(field.value)) {\n                            @if (getImageUrls(field.value.to.value).length) {\n                              <div class=\"flex flex-wrap items-center gap-2\">\n                                @for (url of getImageUrls(field.value.to.value); track url; let imageIndex = $index) {\n                                  <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-white\" (click)=\"openImageViewer(getImageUrls(field.value.to.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                                    <img [src]=\"url\" [alt]=\"'\u041D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                                  </button>\n                                }\n                              </div>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isFileField(field.value)) {\n                            @if (field.value.to.url) {\n                              <a class=\"font-medium text-sky-700 underline\" [href]=\"field.value.to.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isHtmlField(field.value)) {\n                            @if (field.value.to.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                              <div class=\"prose prose-sm max-w-none text-slate-900\" [innerHTML]=\"field.value.to.display\"></div>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else {\n                            @if (field.value.to.url) {\n                              <a class=\"font-medium text-sky-700 underline\" [routerLink]=\"field.value.to.url\">{{ field.value.to.display }}</a>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">{{ field.value.to.display }}</span>\n                            }\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </article>\n      }\n    </div>\n  }\n</section>\n\n@if (isViewerOpen()) {\n  <app-images-viewer [urls]=\"viewerUrls()\" (closed)=\"closeImageViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: HistoryTabComponent, isStandalone: true, selector: "app-history-tab", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, primaryEntity: { classPropertyName: "primaryEntity", publicName: "primaryEntity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, entityLabels: { classPropertyName: "entityLabels", publicName: "entityLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (isLoading()) {\n    <div class=\"rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500\">\n      \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0456\u0441\u0442\u043E\u0440\u0456\u0457\u2026\n    </div>\n  } @else if (hasError()) {\n    <div class=\"rounded-2xl border border-red-200 bg-red-50 p-6 text-sm text-red-700\">\n      \u041D\u0435 \u0432\u0434\u0430\u043B\u043E\u0441\u044F \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0437\u043C\u0456\u043D.\n    </div>\n  } @else if (!operations().length) {\n    <div class=\"rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500\">\n      \u0406\u0441\u0442\u043E\u0440\u0456\u044F \u0437\u043C\u0456\u043D \u043F\u043E\u043A\u0438 \u043F\u043E\u0440\u043E\u0436\u043D\u044F.\n    </div>\n  } @else {\n    <div class=\"space-y-3\">\n      @for (operation of operations(); track operation.id) {\n        <article class=\"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm\">\n          <div class=\"flex flex-wrap items-start justify-between gap-3\">\n            <div>\n              <h3 class=\"text-sm font-semibold text-slate-900\">{{ operation.description }}</h3>\n              @if (operation.actorName) {\n                <p class=\"mt-1 text-sm text-slate-500\">{{ operation.actorName }}</p>\n              }\n            </div>\n            <time class=\"text-xs text-slate-400\" [dateTime]=\"operation.createdAt\">\n              {{ operation.createdAt | date: 'dd.MM.yyyy HH:mm' }}\n            </time>\n          </div>\n\n          @if (getPrimaryChanges(operation).length) {\n            <div class=\"mt-4 space-y-2 border-t border-slate-100 pt-4\">\n              @for (change of getPrimaryChanges(operation); track change.entityId + change.entityType) {\n                @for (field of (change.changedFields | keyvalue); track field.key) {\n                  <div class=\"flex flex-wrap items-center gap-2 text-sm\">\n                    <span class=\"font-medium text-slate-700\">{{ field.value.label }}</span>\n                    @if (isImageField(field.value)) {\n                      @if (getImageUrls(field.value.from.value).length) {\n                        <div class=\"flex flex-wrap items-center gap-2\">\n                          @for (url of getImageUrls(field.value.from.value); track url; let imageIndex = $index) {\n                            <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-slate-100\" (click)=\"openImageViewer(getImageUrls(field.value.from.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u0441\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                              <img [src]=\"url\" [alt]=\"'\u0421\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isFileField(field.value)) {\n                      @if (field.value.from.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [href]=\"field.value.from.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                      } @else {\n                        <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isHtmlField(field.value)) {\n                      @if (field.value.from.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                        <div class=\"prose prose-sm max-w-none text-slate-500\" [innerHTML]=\"field.value.from.display\"></div>\n                      } @else {\n                        <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else {\n                      @if (field.value.from.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [routerLink]=\"field.value.from.url\">{{ field.value.from.display }}</a>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">{{ field.value.from.display }}</span>\n                      }\n                    }\n                    <span class=\"text-slate-400\">\u2192</span>\n                    @if (isImageField(field.value)) {\n                      @if (getImageUrls(field.value.to.value).length) {\n                        <div class=\"flex flex-wrap items-center gap-2\">\n                          @for (url of getImageUrls(field.value.to.value); track url; let imageIndex = $index) {\n                            <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-slate-100\" (click)=\"openImageViewer(getImageUrls(field.value.to.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                              <img [src]=\"url\" [alt]=\"'\u041D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isFileField(field.value)) {\n                      @if (field.value.to.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [href]=\"field.value.to.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else if (isHtmlField(field.value)) {\n                      @if (field.value.to.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                        <div class=\"prose prose-sm max-w-none text-slate-900\" [innerHTML]=\"field.value.to.display\"></div>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                      }\n                    } @else {\n                      @if (field.value.to.url) {\n                        <a class=\"font-medium text-sky-700 underline\" [routerLink]=\"field.value.to.url\">{{ field.value.to.display }}</a>\n                      } @else {\n                        <span class=\"font-medium text-slate-900\">{{ field.value.to.display }}</span>\n                      }\n                    }\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          @if (getRelatedChanges(operation).length) {\n            <div class=\"mt-4 border-t border-slate-100 pt-4\">\n              <button\n                type=\"button\"\n                class=\"flex w-full items-center justify-between gap-3 text-left text-sm text-slate-600\"\n                [attr.aria-expanded]=\"isExpanded(operation.id)\"\n                (click)=\"toggleOperation(operation.id)\"\n              >\n                <span>\n                  \u0414\u0435\u0442\u0430\u043B\u0456 \u0437\u043C\u0456\u043D:\n                  <span class=\"font-medium text-slate-900\">{{ getAffectedSummary(operation) }}</span>\n                </span>\n                <span class=\"text-lg leading-none text-slate-400\">{{ isExpanded(operation.id) ? '\u2212' : '+' }}</span>\n              </button>\n\n              @if (isExpanded(operation.id)) {\n                <div class=\"mt-4 space-y-4\">\n                  @for (change of getRelatedChanges(operation); track change.entityId + change.entityType) {\n                    <div class=\"rounded-xl bg-slate-50 p-3\">\n                      <p class=\"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500\">\n                        {{ getEntityLabel(change.entityType) }} \u00B7 {{ getActionLabel(change.action) }}\n                      </p>\n                      @for (field of (change.changedFields | keyvalue); track field.key) {\n                        <div class=\"flex flex-wrap items-center gap-2 text-sm\">\n                          <span class=\"font-medium text-slate-700\">{{ field.value.label }}</span>\n                          @if (isImageField(field.value)) {\n                            @if (getImageUrls(field.value.from.value).length) {\n                              <div class=\"flex flex-wrap items-center gap-2\">\n                                @for (url of getImageUrls(field.value.from.value); track url; let imageIndex = $index) {\n                                  <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-white\" (click)=\"openImageViewer(getImageUrls(field.value.from.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u0441\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                                    <img [src]=\"url\" [alt]=\"'\u0421\u0442\u0430\u0440\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                                  </button>\n                                }\n                              </div>\n                            } @else {\n                              <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isFileField(field.value)) {\n                            @if (field.value.from.url) {\n                              <a class=\"text-sky-700 underline\" [href]=\"field.value.from.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                            } @else {\n                              <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isHtmlField(field.value)) {\n                            @if (field.value.from.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                              <div class=\"prose prose-sm max-w-none text-slate-500\" [innerHTML]=\"field.value.from.display\"></div>\n                            } @else {\n                              <span class=\"text-slate-400\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else {\n                            @if (field.value.from.url) {\n                              <a class=\"text-sky-700 underline\" [routerLink]=\"field.value.from.url\">{{ field.value.from.display }}</a>\n                            } @else {\n                              <span class=\"text-slate-400\">{{ field.value.from.display }}</span>\n                            }\n                          }\n                          <span class=\"text-slate-400\">\u2192</span>\n                          @if (isImageField(field.value)) {\n                            @if (getImageUrls(field.value.to.value).length) {\n                              <div class=\"flex flex-wrap items-center gap-2\">\n                                @for (url of getImageUrls(field.value.to.value); track url; let imageIndex = $index) {\n                                  <button type=\"button\" class=\"h-14 w-14 overflow-hidden rounded-lg border border-slate-200 bg-white\" (click)=\"openImageViewer(getImageUrls(field.value.to.value))\" [attr.aria-label]=\"'\u0412\u0456\u0434\u043A\u0440\u0438\u0442\u0438 \u043D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\">\n                                    <img [src]=\"url\" [alt]=\"'\u041D\u043E\u0432\u0435 \u0444\u043E\u0442\u043E ' + (imageIndex + 1)\" class=\"h-full w-full object-cover\" />\n                                  </button>\n                                }\n                              </div>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isFileField(field.value)) {\n                            @if (field.value.to.url) {\n                              <a class=\"font-medium text-sky-700 underline\" [href]=\"field.value.to.url\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043B</a>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else if (isHtmlField(field.value)) {\n                            @if (field.value.to.display !== '\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E') {\n                              <div class=\"prose prose-sm max-w-none text-slate-900\" [innerHTML]=\"field.value.to.display\"></div>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">\u041D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E</span>\n                            }\n                          } @else {\n                            @if (field.value.to.url) {\n                              <a class=\"font-medium text-sky-700 underline\" [routerLink]=\"field.value.to.url\">{{ field.value.to.display }}</a>\n                            } @else {\n                              <span class=\"font-medium text-slate-900\">{{ field.value.to.display }}</span>\n                            }\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </article>\n      }\n    </div>\n  }\n</section>\n\n@if (isViewerOpen()) {\n  <app-images-viewer [urls]=\"viewerUrls()\" (closed)=\"closeImageViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: HistoryTabComponent, decorators: [{
             type: Component,
@@ -1602,5 +1655,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CARD_ACTION_COMPLETED, CARD_ACTION_FINISHED, CARD_ACTION_REQUESTED, CARD_ACTION_STARTED, CardComponent, CardCurrentUserService, CardDictionaryService, CardImageService, CardSectionHeaderComponent, DocumentsComponent, ENTITY_UPDATED, HistoryTabComponent, ImagesViewerComponent, StandardTableComponent, UI_CARD_API_BASE_URL, UI_CARD_TAB_REGISTRY, UI_ENTITY_CARD_HOST, UiEntityDocumentsService, cardApiParams, cardApiResourceUrl, normalizeCardConfig, resolveCardConfig };
+export { CARD_ACTION_COMPLETED, CARD_ACTION_FINISHED, CARD_ACTION_REQUESTED, CARD_ACTION_STARTED, CardComponent, CardCurrentUserService, CardDictionaryService, CardImageService, CardSectionHeaderComponent, DocumentsComponent, ENTITY_UPDATED, HistoryTabComponent, ImagesViewerComponent, TableComponent, UI_CARD_API_BASE_URL, UI_CARD_TAB_REGISTRY, UI_ENTITY_CARD_HOST, UiEntityDocumentsService, cardApiParams, cardApiResourceUrl, normalizeCardConfig, resolveCardConfig };
 //# sourceMappingURL=maro-tech-card.mjs.map