@maro-tech/card 0.2.9 → 0.2.11

package/fesm2022/maro-tech-card.mjs

@@ -6,12 +6,12 @@ import { input, inject, DestroyRef, signal, Component, computed, viewChild, view
 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 { RouterLink, ActivatedRoute, Router } from '@angular/router';
 import Panzoom from '@panzoom/panzoom';
 import { LucideDownload, LucideDynamicIcon, LucideEye, LucideFileText, LucidePlus, LucideSparkles, LucideTrash } from '@lucide/angular';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { map, shareReplay, forkJoin, switchMap, timer, of } from 'rxjs';
 import { UiTableComponent, UiPaginatorComponent } 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$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -486,6 +486,7 @@ class DetailsGridComponent {
         ...field,
         displayValue: this.formatFieldValue(field),
         imageSrc: this.getImageSrc(field),
+        linkUrl: this.getLinkUrl(field),
     })), ...(ngDevMode ? [{ debugName: "displayFields" }] : /* istanbul ignore next */ []));
     selectedImageSrc = signal(null, ...(ngDevMode ? [{ debugName: "selectedImageSrc" }] : /* istanbul ignore next */ []));
     openViewer(imageSrc) {
@@ -560,6 +561,20 @@ class DetailsGridComponent {
         }
         return raw;
     }
+    getLinkUrl(field) {
+        if (field.type !== 'link' || !field.link)
+            return null;
+        const data = this.data() || {};
+        const url = field.link.replace(/\{\{([a-zA-Z0-9_.-]+)\}\}/g, (_match, key) => {
+            const value = key.split('.').reduce((current, segment) => {
+                if (current == null || typeof current !== 'object')
+                    return undefined;
+                return current[segment];
+            }, data);
+            return encodeURIComponent(String(value ?? ''));
+        }).trim();
+        return url && url !== '/' && !url.endsWith('/') ? url : null;
+    }
     getImageSrc(field) {
         if (field.type !== 'image')
             return null;
@@ -591,11 +606,11 @@ class DetailsGridComponent {
             : { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DetailsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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.24", 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 if (field.type === 'link' && field.linkUrl) {\n        <a class=\"mt-2 inline-block text-base font-semibold text-sky-800 underline\" [routerLink]=\"field.linkUrl\">{{ field.displayValue === '-' ? field.label : field.displayValue }}</a>\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"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DetailsGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-details-grid', standalone: true, imports: [CommonModule, ImagesViewerComponent], 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" }]
+            args: [{ selector: 'app-details-grid', standalone: true, imports: [CommonModule, ImagesViewerComponent, RouterLink], 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 if (field.type === 'link' && field.linkUrl) {\n        <a class=\"mt-2 inline-block text-base font-semibold text-sky-800 underline\" [routerLink]=\"field.linkUrl\">{{ field.displayValue === '-' ? field.label : field.displayValue }}</a>\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" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class ImagesComponent {
@@ -799,6 +814,7 @@ class TableComponent {
                 width: column['width'],
                 sortable: true,
                 link: column['link'],
+                action: column['action'],
                 editable: !!config,
                 editableCondition: String(config?.['condition'] || ''),
                 editor: config?.editor,
@@ -1252,7 +1268,7 @@ class DocumentsUploadModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DocumentsUploadModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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      [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: "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", "hint", "error", "placeholder", "name", "data", "dataParams", "required", "disabled", "multiple", "emptyStateLabel", "searchable", "options", "triggerClass", "panelClass", "actions"], outputs: ["actionTriggered", "valueChange", "searchChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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      [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: "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", "hint", "error", "placeholder", "icon", "name", "data", "dataParams", "required", "disabled", "multiple", "emptyStateLabel", "searchable", "options", "triggerClass", "panelClass", "actions"], outputs: ["actionTriggered", "valueChange", "searchChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DocumentsUploadModalComponent, decorators: [{
             type: Component,
@@ -1943,7 +1959,7 @@ class HistoryTabComponent {
             : operation.changes || [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HistoryTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: HistoryTabComponent, isStandalone: true, selector: "app-history-tab", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"flex h-[calc(100dvh-14rem)] min-h-[24rem] min-w-0 flex-col gap-4 overflow-hidden\">\n  <div class=\"flex shrink-0 flex-wrap items-end gap-4 rounded-3xl border border-slate-200 bg-white p-5\">\n    <div class=\"min-w-56 flex-1\">\n      <input-base label=\"\u0412\u0456\u0434\" type=\"datetime-local\" [ngModel]=\"fromDate()\" (ngModelChange)=\"onDateFilterChange('from', $event)\" />\n    </div>\n    <div class=\"min-w-56 flex-1\">\n      <input-base label=\"\u0414\u043E\" type=\"datetime-local\" [ngModel]=\"toDate()\" (ngModelChange)=\"onDateFilterChange('to', $event)\" />\n    </div>\n    <div class=\"min-w-56 flex-1\">\n      <input-select label=\"\u0414\u0456\u044F\" placeholder=\"\u0423\u0441\u0456 \u0434\u0456\u0457\" [options]=\"availableActionOptions()\" [searchable]=\"false\" [ngModel]=\"actionFilter()\" (ngModelChange)=\"onActionFilterChange($event)\" />\n    </div>\n    <div class=\"min-w-56 flex-1\">\n      <input-select label=\"\u0429\u043E \u0437\u043C\u0456\u043D\u044E\u0432\u0430\u043B\u043E\u0441\u044F\" placeholder=\"\u0423\u0441\u0456 \u0442\u0438\u043F\u0438 \u0437\u043C\u0456\u043D\" [options]=\"availableChangeTypeOptions()\" [searchable]=\"false\" [ngModel]=\"changeTypeFilter()\" (ngModelChange)=\"onChangeTypeFilterChange($event)\" />\n    </div>\n    <ui-button variant=\"ghost\" type=\"button\" (click)=\"clearFilters()\">\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u0438</ui-button>\n  </div>\n  <div class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1\">\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 (field.value.summary) { <span class=\"text-xs text-slate-500\">{{ field.value.summary }}</span> }\n                    @if (isStructuredField(field.value)) {\n                      @if (getStructuredItems(field.value.from).length) {\n                        <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                          <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0411\u0443\u043B\u043E</div>\n                          @for (item of getStructuredItems(field.value.from); track item.key) {\n                            <div class=\"rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600\">\n                              @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                            </div>\n                          }\n                        </div>\n                      } @else { <span class=\"text-slate-400\">\u041F\u043E\u0437\u0438\u0446\u0456\u0439 \u0434\u043E \u0437\u043C\u0456\u043D\u0438 \u043D\u0435 \u0431\u0443\u043B\u043E</span> }\n                    } @else 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=\"mx-1 shrink-0 text-lg font-semibold text-slate-500\">\u2192</span>\n                    @if (isStructuredField(field.value)) {\n                      @if (getStructuredItems(field.value.to).length) {\n                        <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                          <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0421\u0442\u0430\u043B\u043E</div>\n                          @for (item of getStructuredItems(field.value.to); track item.key) {\n                            <div class=\"rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600\">\n                              @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                            </div>\n                          }\n                        </div>\n                      } @else { <span class=\"text-slate-400\">\u041F\u0456\u0441\u043B\u044F \u0437\u043C\u0456\u043D\u0438 \u043F\u043E\u0437\u0438\u0446\u0456\u0439 \u043D\u0435 \u0437\u0430\u043B\u0438\u0448\u0438\u043B\u043E\u0441\u044F</span> }\n                    } @else 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, change.entityLabel) }} \u00B7 {{ getActionLabel(change.action) }}\n                      </p>\n                      @if (getChangeContextLabel(change)) {\n                        <p class=\"mb-2 text-sm font-medium text-slate-700\">{{ getChangeContextLabel(change) }}</p>\n                      }\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 (field.value.summary) { <span class=\"text-xs text-slate-500\">{{ field.value.summary }}</span> }\n                          @if (isStructuredField(field.value)) {\n                            @if (getStructuredItems(field.value.from).length) {\n                              <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                                <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0411\u0443\u043B\u043E</div>\n                                @for (item of getStructuredItems(field.value.from); track item.key) {\n                                  <div class=\"rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-600\">\n                                    @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                                  </div>\n                                }\n                              </div>\n                            } @else { <span class=\"text-slate-400\">\u041F\u043E\u0437\u0438\u0446\u0456\u0439 \u0434\u043E \u0437\u043C\u0456\u043D\u0438 \u043D\u0435 \u0431\u0443\u043B\u043E</span> }\n                          } @else 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=\"mx-1 shrink-0 text-lg font-semibold text-slate-500\">\u2192</span>\n                          @if (isStructuredField(field.value)) {\n                            @if (getStructuredItems(field.value.to).length) {\n                              <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                                <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0421\u0442\u0430\u043B\u043E</div>\n                                @for (item of getStructuredItems(field.value.to); track item.key) {\n                                  <div class=\"rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600\">\n                                    @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                                  </div>\n                                }\n                              </div>\n                            } @else { <span class=\"text-slate-400\">\u041F\u0456\u0441\u043B\u044F \u0437\u043C\u0456\u043D\u0438 \u043F\u043E\u0437\u0438\u0446\u0456\u0439 \u043D\u0435 \u0437\u0430\u043B\u0438\u0448\u0438\u043B\u043E\u0441\u044F</span> }\n                          } @else 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  </div>\n\n  <app-ui-paginator\n    class=\"block shrink-0\"\n    [pageIndex]=\"page()\"\n    [pageSize]=\"pageSize()\"\n    [total]=\"total()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    (pageChange)=\"onPageChange($event)\"\n    (pageSizeChange)=\"onPageSizeChange($event)\"\n  ></app-ui-paginator>\n</section>\n\n@if (isViewerOpen()) {\n  <app-images-viewer [urls]=\"viewerUrls()\" (closed)=\"closeImageViewer()\" />\n}\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: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }, { kind: "component", type: InputComponent, selector: "input-base", inputs: ["label", "hint", "placeholder", "name", "id", "type", "element", "rows", "required", "autocomplete", "pattern", "error", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["label", "hint", "error", "placeholder", "name", "data", "dataParams", "required", "disabled", "multiple", "emptyStateLabel", "searchable", "options", "triggerClass", "panelClass", "actions"], outputs: ["actionTriggered", "valueChange", "searchChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiPaginatorComponent, selector: "app-ui-paginator", inputs: ["pageIndex", "pageSize", "total", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }, { 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.24", type: HistoryTabComponent, isStandalone: true, selector: "app-history-tab", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"flex h-[calc(100dvh-14rem)] min-h-[24rem] min-w-0 flex-col gap-4 overflow-hidden\">\n  <div class=\"flex shrink-0 flex-wrap items-end gap-4 rounded-3xl border border-slate-200 bg-white p-5\">\n    <div class=\"min-w-56 flex-1\">\n      <input-base label=\"\u0412\u0456\u0434\" type=\"datetime-local\" [ngModel]=\"fromDate()\" (ngModelChange)=\"onDateFilterChange('from', $event)\" />\n    </div>\n    <div class=\"min-w-56 flex-1\">\n      <input-base label=\"\u0414\u043E\" type=\"datetime-local\" [ngModel]=\"toDate()\" (ngModelChange)=\"onDateFilterChange('to', $event)\" />\n    </div>\n    <div class=\"min-w-56 flex-1\">\n      <input-select label=\"\u0414\u0456\u044F\" placeholder=\"\u0423\u0441\u0456 \u0434\u0456\u0457\" [options]=\"availableActionOptions()\" [searchable]=\"false\" [ngModel]=\"actionFilter()\" (ngModelChange)=\"onActionFilterChange($event)\" />\n    </div>\n    <div class=\"min-w-56 flex-1\">\n      <input-select label=\"\u0429\u043E \u0437\u043C\u0456\u043D\u044E\u0432\u0430\u043B\u043E\u0441\u044F\" placeholder=\"\u0423\u0441\u0456 \u0442\u0438\u043F\u0438 \u0437\u043C\u0456\u043D\" [options]=\"availableChangeTypeOptions()\" [searchable]=\"false\" [ngModel]=\"changeTypeFilter()\" (ngModelChange)=\"onChangeTypeFilterChange($event)\" />\n    </div>\n    <ui-button variant=\"ghost\" type=\"button\" (click)=\"clearFilters()\">\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u0438</ui-button>\n  </div>\n  <div class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1\">\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 (field.value.summary) { <span class=\"text-xs text-slate-500\">{{ field.value.summary }}</span> }\n                    @if (isStructuredField(field.value)) {\n                      @if (getStructuredItems(field.value.from).length) {\n                        <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                          <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0411\u0443\u043B\u043E</div>\n                          @for (item of getStructuredItems(field.value.from); track item.key) {\n                            <div class=\"rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600\">\n                              @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                            </div>\n                          }\n                        </div>\n                      } @else { <span class=\"text-slate-400\">\u041F\u043E\u0437\u0438\u0446\u0456\u0439 \u0434\u043E \u0437\u043C\u0456\u043D\u0438 \u043D\u0435 \u0431\u0443\u043B\u043E</span> }\n                    } @else 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=\"mx-1 shrink-0 text-lg font-semibold text-slate-500\">\u2192</span>\n                    @if (isStructuredField(field.value)) {\n                      @if (getStructuredItems(field.value.to).length) {\n                        <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                          <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0421\u0442\u0430\u043B\u043E</div>\n                          @for (item of getStructuredItems(field.value.to); track item.key) {\n                            <div class=\"rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600\">\n                              @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                            </div>\n                          }\n                        </div>\n                      } @else { <span class=\"text-slate-400\">\u041F\u0456\u0441\u043B\u044F \u0437\u043C\u0456\u043D\u0438 \u043F\u043E\u0437\u0438\u0446\u0456\u0439 \u043D\u0435 \u0437\u0430\u043B\u0438\u0448\u0438\u043B\u043E\u0441\u044F</span> }\n                    } @else 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, change.entityLabel) }} \u00B7 {{ getActionLabel(change.action) }}\n                      </p>\n                      @if (getChangeContextLabel(change)) {\n                        <p class=\"mb-2 text-sm font-medium text-slate-700\">{{ getChangeContextLabel(change) }}</p>\n                      }\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 (field.value.summary) { <span class=\"text-xs text-slate-500\">{{ field.value.summary }}</span> }\n                          @if (isStructuredField(field.value)) {\n                            @if (getStructuredItems(field.value.from).length) {\n                              <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                                <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0411\u0443\u043B\u043E</div>\n                                @for (item of getStructuredItems(field.value.from); track item.key) {\n                                  <div class=\"rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-600\">\n                                    @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                                  </div>\n                                }\n                              </div>\n                            } @else { <span class=\"text-slate-400\">\u041F\u043E\u0437\u0438\u0446\u0456\u0439 \u0434\u043E \u0437\u043C\u0456\u043D\u0438 \u043D\u0435 \u0431\u0443\u043B\u043E</span> }\n                          } @else 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=\"mx-1 shrink-0 text-lg font-semibold text-slate-500\">\u2192</span>\n                          @if (isStructuredField(field.value)) {\n                            @if (getStructuredItems(field.value.to).length) {\n                              <div class=\"min-w-[16rem] flex-1 space-y-1\">\n                                <div class=\"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400\">\u0421\u0442\u0430\u043B\u043E</div>\n                                @for (item of getStructuredItems(field.value.to); track item.key) {\n                                  <div class=\"rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600\">\n                                    @for (itemField of item.fields; track itemField.key) {<span class=\"mr-2\"><span class=\"font-medium\">{{ itemField.label }}:</span> {{ itemField.display }}</span>}\n                                  </div>\n                                }\n                              </div>\n                            } @else { <span class=\"text-slate-400\">\u041F\u0456\u0441\u043B\u044F \u0437\u043C\u0456\u043D\u0438 \u043F\u043E\u0437\u0438\u0446\u0456\u0439 \u043D\u0435 \u0437\u0430\u043B\u0438\u0448\u0438\u043B\u043E\u0441\u044F</span> }\n                          } @else 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  </div>\n\n  <app-ui-paginator\n    class=\"block shrink-0\"\n    [pageIndex]=\"page()\"\n    [pageSize]=\"pageSize()\"\n    [total]=\"total()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    (pageChange)=\"onPageChange($event)\"\n    (pageSizeChange)=\"onPageSizeChange($event)\"\n  ></app-ui-paginator>\n</section>\n\n@if (isViewerOpen()) {\n  <app-images-viewer [urls]=\"viewerUrls()\" (closed)=\"closeImageViewer()\" />\n}\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: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }, { kind: "component", type: InputComponent, selector: "input-base", inputs: ["label", "hint", "placeholder", "icon", "name", "id", "type", "element", "rows", "required", "autocomplete", "pattern", "error", "actions"], outputs: ["actionTriggered"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["label", "hint", "error", "placeholder", "icon", "name", "data", "dataParams", "required", "disabled", "multiple", "emptyStateLabel", "searchable", "options", "triggerClass", "panelClass", "actions"], outputs: ["actionTriggered", "valueChange", "searchChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiPaginatorComponent, selector: "app-ui-paginator", inputs: ["pageIndex", "pageSize", "total", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HistoryTabComponent, decorators: [{
             type: Component,