@maro-tech/card 0.1.1 → 0.1.3

package/fesm2022/maro-tech-card.mjs

@@ -1,20 +1,80 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, DestroyRef, signal, Component, computed, output, effect, HostListener, InjectionToken, forwardRef, Injectable, ViewChild, untracked, Input } from '@angular/core';
+import { input, inject, DestroyRef, signal, Component, computed, 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 { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { shareReplay, forkJoin, switchMap, timer, of, map as map$1 } from 'rxjs';
-import { map, exhaustMap, catchError, takeWhile, takeUntil, finalize } from 'rxjs/operators';
+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 { FormsModule } from '@angular/forms';
-import { InputSelectComponent, FormModalComponent } from '@maro-tech/form';
-import { UiTableComponent } from '@maro-tech/table';
-import JsBarcode from 'jsbarcode';
+import { InputSelectComponent } from '@maro-tech/form';
+
+function normalizeCardConfig(config) {
+    return {
+        ...config,
+        tabs: normalizeSections(config.tabs),
+        actions: normalizeActions(config.actions),
+    };
+}
+function resolveCardConfig(config, data) {
+    return {
+        ...config,
+        data,
+        actions: resolveActions(config.actions, data),
+        tabs: resolveSections(config.tabs, data),
+    };
+}
+function normalizeSections(sections) {
+    return (sections || []).map((section) => ({
+        ...section,
+        component: section.component || (section.html ? 'html' : undefined),
+        actions: normalizeActions(section.actions),
+        tabs: section.tabs?.length ? normalizeSections(section.tabs) : section.tabs,
+        panels: section.panels?.length ? normalizeSections(section.panels) : section.panels,
+    }));
+}
+function normalizeActions(actions) {
+    return (actions || []).filter(Boolean);
+}
+function resolveSections(sections, data) {
+    return (sections || []).map((section) => ({
+        ...section,
+        props: resolveValue(section.props, data),
+        actions: resolveActions(section.actions, data),
+        tabs: section.tabs?.length ? resolveSections(section.tabs, data) : section.tabs,
+        panels: section.panels?.length ? resolveSections(section.panels, data) : section.panels,
+    }));
+}
+function resolveActions(actions, data) {
+    return resolveValue(actions, data);
+}
+function resolveValue(value, data) {
+    if (typeof value === 'string') {
+        const match = value.match(/^\{\{([a-zA-Z0-9_.-]+)\}\}$/);
+        return match ? getByPath(data, match[1]) : value;
+    }
+    if (Array.isArray(value))
+        return value.map((item) => resolveValue(item, data));
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value)
+            .map(([key, item]) => [key, resolveValue(item, data)]));
+    }
+    return value;
+}
+function getByPath(source, path) {
+    return path.split('.').reduce((current, segment) => {
+        if (current == null || typeof current !== 'object')
+            return undefined;
+        return current[segment];
+    }, source);
+}
 
 const CARD_ACTION_REQUESTED = 'card.action.requested';
 const CARD_ACTION_STARTED = 'card.action.started';
@@ -26,8 +86,6 @@ class CardSectionHeaderComponent {
     variant = input('panels', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
-    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : /* istanbul ignore next */ []));
-    recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     eventBus = inject(EventBus);
     destroyRef = inject(DestroyRef);
@@ -50,20 +108,16 @@ class CardSectionHeaderComponent {
         return !!pendingId && !!actionId && pendingId === actionId;
     }
     onActionClick(action) {
-        const context = {
-            entity: this.entity(),
-            recordId: this.recordId() || undefined,
-            data: this.data(),
-        };
+        const context = action.context || { entity: '', data: this.data() };
         this.pendingActionIdSignal.set(String(action.id || '').trim());
         this.eventBus.emit(CARD_ACTION_REQUESTED, { action, context });
     }
     matchesContext(context) {
-        return context.entity === this.entity()
-            && (!context.recordId || context.recordId === this.recordId());
+        return this.actions().some((action) => action.context?.entity === context.entity
+            && (!context.recordId || action.context?.recordId === context.recordId));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardSectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CardSectionHeaderComponent, isStandalone: true, selector: "app-card-section-header", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CardSectionHeaderComponent, isStandalone: true, selector: "app-card-section-header", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (variant() === 'tabs') {
       <header class="mb-4 flex justify-end">
         <div class="flex flex-wrap gap-2 md:justify-end">
@@ -157,15 +211,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class CardHtmlTabComponent {
-    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : /* istanbul ignore next */ []));
-    recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
-    tab = input(null, ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
-    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    html = input('', ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
     eventBus = inject(EventBus);
-    html = computed(() => this.tab()?.html || '', ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    sanitizer = inject(DomSanitizer);
+    safeHtml = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.html()), ...(ngDevMode ? [{ debugName: "safeHtml" }] : /* istanbul ignore next */ []));
     onClick(event) {
         this.dispatchFromEvent(event);
     }
@@ -174,7 +226,7 @@ class CardHtmlTabComponent {
     }
     dispatchFromEvent(event) {
         const target = event.target;
-        const actionElement = target?.closest?.('[class*="card-action-"]');
+        const actionElement = target?.closest?.('[data-card-action]');
         if (!actionElement)
             return;
         const action = this.resolveAction(actionElement);
@@ -184,33 +236,41 @@ class CardHtmlTabComponent {
         event.stopPropagation();
         this.eventBus.emit(CARD_ACTION_REQUESTED, {
             action,
-            context: {
-                entity: this.entity(),
-                recordId: this.recordId() || undefined,
-                data: this.data(),
-            },
+            context: action.context || { entity: '', data: null },
         });
     }
     resolveAction(actionElement) {
-        const tab = this.tab();
-        const actions = Array.isArray(tab?.actions) ? tab.actions : [];
-        if (!actions.length)
+        const raw = actionElement?.getAttribute('data-card-action');
+        if (!raw)
             return null;
-        const actionId = Array.from(actionElement?.classList || [])
-            .find((className) => className.startsWith('card-action-'))
-            ?.slice('card-action-'.length)
-            .trim();
-        if (!actionId)
+        try {
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+                return null;
+            const action = parsed;
+            const id = String(action['id'] || '').trim();
+            const type = String(action['type'] || '').trim();
+            if (!id || !type)
+                return null;
+            return {
+                ...action,
+                id,
+                type,
+                label: String(action['label'] || actionElement?.textContent || id).trim(),
+                context: action['context'] || { entity: '', data: null },
+            };
+        }
+        catch {
             return null;
-        return actions.find((item) => String(item.id || '').trim() === actionId) || null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardHtmlTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: CardHtmlTabComponent, isStandalone: true, selector: "app-card-html-tab", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section\n  [attr.data-card-tab-id]=\"tab()?.id || ''\"\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onKeydown($event)\"\n  (keydown.space)=\"onKeydown($event)\"\n>\n  <div [innerHTML]=\"html()\"></div>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: CardHtmlTabComponent, isStandalone: true, selector: "app-card-html-tab", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onKeydown($event)\"\n  (keydown.space)=\"onKeydown($event)\"\n>\n  <div [innerHTML]=\"safeHtml()\"></div>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardHtmlTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-html-tab', standalone: true, imports: [CommonModule], template: "<section\n  [attr.data-card-tab-id]=\"tab()?.id || ''\"\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onKeydown($event)\"\n  (keydown.space)=\"onKeydown($event)\"\n>\n  <div [innerHTML]=\"html()\"></div>\n</section>\n" }]
-        }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+            args: [{ selector: 'app-card-html-tab', standalone: true, imports: [CommonModule], template: "<section\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onKeydown($event)\"\n  (keydown.space)=\"onKeydown($event)\"\n>\n  <div [innerHTML]=\"safeHtml()\"></div>\n</section>\n" }]
+        }], propDecorators: { html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }] } });
 
 class ImagesViewerComponent {
     urls = input([], ...(ngDevMode ? [{ debugName: "urls" }] : /* istanbul ignore next */ []));
@@ -281,7 +341,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             }] } });
 
 class DetailsGridComponent {
-    tab = input(null, ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+    config = input(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     hasExplicitColumns = computed(() => this.resolveFields().some((field) => this.isValidColumnSpan(field.col)), ...(ngDevMode ? [{ debugName: "hasExplicitColumns" }] : /* istanbul ignore next */ []));
     displayFields = computed(() => this.resolveFields().map((field) => ({
         ...field,
@@ -296,8 +357,29 @@ class DetailsGridComponent {
         this.selectedImageSrc.set(null);
     }
     resolveFields() {
-        const value = this.tab()?.props?.['fields'];
-        return Array.isArray(value) ? value : [];
+        const value = this.config()?.props?.['fields'];
+        if (!Array.isArray(value))
+            return [];
+        const data = this.data() || {};
+        return value.map((field) => ({
+            ...field,
+            type: field.type || 'text',
+            value: field.value ?? (field.id
+                ? this.toFieldValue(data[`${field.id}_data`] ?? data[field.id])
+                : undefined),
+        }));
+    }
+    toFieldValue(value) {
+        if (value == null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+            return value;
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => this.toFieldValue(item) ?? '').join(', ');
+        }
+        if (typeof value === 'object' && 'label' in value) {
+            return String(value['label'] ?? '');
+        }
+        return String(value);
     }
     getFieldColumnClass(field) {
         if (!this.isValidColumnSpan(field.col))
@@ -349,11 +431,7 @@ class DetailsGridComponent {
         const raw = String(value).trim();
         if (!raw)
             return null;
-        if (/^https?:\/\//i.test(raw) || raw.startsWith('/')) {
-            return raw;
-        }
-        const base = String(field.imageBaseUrl || '/api/files').trim().replace(/\/+$/, '');
-        return `${base}/${encodeURIComponent(raw)}`;
+        return `/api/files/${encodeURIComponent(raw)}`;
     }
     formatEnum(raw, enumMap) {
         if (enumMap?.[raw]) {
@@ -375,41 +453,29 @@ 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: { tab: { classPropertyName: "tab", publicName: "tab", 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.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,
             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" }]
-        }], propDecorators: { tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }] } });
+        }], 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 {
-    tab = input(null, ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+    config = input(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     isViewerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isViewerOpen" }] : /* istanbul ignore next */ []));
     viewerStartIndex = signal(0, ...(ngDevMode ? [{ debugName: "viewerStartIndex" }] : /* istanbul ignore next */ []));
     resolvedImageIds = computed(() => {
-        const tab = this.tab();
-        const props = tab?.props || {};
-        const explicit = this.normalizeIds(props['imageIds']);
-        if (explicit.length)
-            return explicit;
+        const props = this.config()?.props || {};
         const key = String(props['images'] || 'images').trim();
-        const value = key ? this.data()?.[key] : null;
-        return this.normalizeIds(value);
+        return this.normalizeIds(key ? this.data()?.[key] : null);
     }, ...(ngDevMode ? [{ debugName: "resolvedImageIds" }] : /* istanbul ignore next */ []));
     resolvedImageUrls = computed(() => {
-        const tab = this.tab();
-        const props = tab?.props || {};
-        const explicit = Array.isArray(props['imageUrls'])
-            ? props['imageUrls'].filter((item) => typeof item === 'string')
-            : [];
-        if (explicit.length)
-            return explicit;
-        return this.resolvedImageIds().map((id) => this.resolveImageUrl(id)).filter((item) => !!item);
+        return this.resolvedImageIds().map((id) => this.resolveImageUrl(id));
     }, ...(ngDevMode ? [{ debugName: "resolvedImageUrls" }] : /* istanbul ignore next */ []));
-    resolvedImagePreviewUrls = computed(() => this.resolvedImageUrls().map((url) => this.resolvePreviewUrl(url)), ...(ngDevMode ? [{ debugName: "resolvedImagePreviewUrls" }] : /* istanbul ignore next */ []));
+    resolvedImagePreviewUrls = computed(() => this.resolvedImageIds().map((id) => this.resolvePreviewUrl(id)), ...(ngDevMode ? [{ debugName: "resolvedImagePreviewUrls" }] : /* istanbul ignore next */ []));
     resolvedImageMaxHeight = computed(() => {
-        const value = Number(this.tab()?.props?.['maxHeight']);
+        const value = Number(this.config()?.props?.['maxHeight']);
         return Number.isFinite(value) && value > 0 ? value : 400;
     }, ...(ngDevMode ? [{ debugName: "resolvedImageMaxHeight" }] : /* istanbul ignore next */ []));
     openViewer(index) {
@@ -420,20 +486,11 @@ class ImagesComponent {
     closeViewer() {
         this.isViewerOpen.set(false);
     }
-    resolveImageUrl(imageIdOrUrl) {
-        const value = String(imageIdOrUrl || '').trim();
-        if (!value) {
-            return '';
-        }
-        if (value.startsWith('http://') || value.startsWith('https://') || value.startsWith('data:') || value.startsWith('/')) {
-            return value;
-        }
-        const base = String(this.tab()?.props?.['imageBaseUrl'] || '/api/files').trim().replace(/\/+$/, '');
-        return `${base}/${encodeURIComponent(value)}`;
+    resolveImageUrl(imageId) {
+        return `/api/files/${encodeURIComponent(imageId)}`;
     }
-    resolvePreviewUrl(url) {
-        const match = url.match(/^(.*\/api\/files\/[^/?#]+)(?:\?.*)?$/i);
-        return match ? `${match[1]}/preview?scale=25` : url;
+    resolvePreviewUrl(imageId) {
+        return `/api/files/${encodeURIComponent(imageId)}/preview?scale=25`;
     }
     normalizeIds(value) {
         if (!Array.isArray(value)) {
@@ -444,19 +501,266 @@ 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: { tab: { classPropertyName: "tab", publicName: "tab", 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.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: { tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+class TableComponent {
+    config;
+    data = null;
+    http = inject(HttpClient);
+    eventBus = inject(EventBus);
+    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 */ []));
+    columns = this.columnsSignal.asReadonly();
+    rows = this.rowsSignal.asReadonly();
+    headerActions = this.headerActionsSignal.asReadonly();
+    isLoading = this.loadingSignal.asReadonly();
+    error = this.errorSignal.asReadonly();
+    tableData = computed(() => ({
+        items: this.rowsSignal(),
+        pagination: this.paginationSignal(),
+    }), ...(ngDevMode ? [{ debugName: "tableData" }] : /* istanbul ignore next */ []));
+    page = 0;
+    pageSize = 10;
+    sortField = '';
+    sortDirection = '';
+    sourceColumns = [];
+    constructor() {
+        this.eventBus.on(ENTITY_UPDATED).subscribe((event) => {
+            if (!event.entity || event.entity === this.tableName())
+                this.load();
+        });
+    }
+    ngOnChanges(changes) {
+        if (!changes['config'] && !changes['data'])
+            return;
+        this.page = 0;
+        this.pageSize = this.numberProp('pageSize', 10);
+        this.sortField = '';
+        this.sortDirection = '';
+        this.load();
+    }
+    get disablePaging() {
+        return this.config?.props?.['disablePaging'] === true || this.config?.props?.['disablePaging'] === 'true';
+    }
+    onPageChange(event) {
+        this.page = Math.max(0, Number(event['pageIndex'] ?? this.page) || 0);
+        this.pageSize = Math.max(1, Number(event['pageSize'] ?? this.pageSize) || this.pageSize);
+        this.sortField = String(event['active'] || '').trim();
+        const direction = String(event['direction'] || '').toLowerCase();
+        this.sortDirection = direction === 'asc' || direction === 'desc' ? direction : '';
+        this.load();
+    }
+    onAction(event) {
+        this.emitAction(event.action, event.row);
+    }
+    onCellChange(event) {
+        const config = this.editableColumns().find((item) => item.key === event.column.key);
+        if (!config?.api)
+            return;
+        this.emitAction({
+            id: `edit:${config.key}`,
+            label: 'Зберегти',
+            type: 'api',
+            api: config.api,
+            method: config.method || 'PATCH',
+            payload: {
+                ...event.row,
+                ...(config.payload || {}),
+                id: event.row['id'],
+                [config.bindKey || config.key]: event.value,
+            },
+        }, event.row);
+    }
+    onHeaderAction(action) {
+        this.emitAction(action, this.data || {});
+    }
+    emitAction(action, row) {
+        const resolved = {
+            ...action,
+            id: String(action.id || '').trim() || undefined,
+            label: String(action.label || action.id || 'Дія'),
+            type: String(action.type || 'api'),
+            api: action.api ? this.resolve(action.api, row) : action.api,
+            payload: action.payload ? this.resolveObject(action.payload, row) : action.payload,
+            context: {
+                entity: this.tableName(),
+                recordId: String(row['id'] || '').trim() || undefined,
+                data: row,
+            },
+        };
+        this.eventBus.emit(CARD_ACTION_REQUESTED, {
+            action: resolved,
+            context: resolved.context,
+        });
+    }
+    load() {
+        const table = this.tableName();
+        if (!table)
+            return;
+        this.loadingSignal.set(true);
+        this.errorSignal.set('');
+        this.http.get(this.tableEndpoint(table)).pipe(map((response) => normalizeTableResponse(response))).subscribe({
+            next: (view) => {
+                const sourceColumns = view.columns || [];
+                this.sourceColumns = sourceColumns;
+                this.setColumns();
+                this.headerActionsSignal.set(view.actions?.header?.custom || []);
+                this.rowsSignal.set(this.rowsFrom(view, sourceColumns));
+                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({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    total: view.pagination?.totalElements ?? view.pagination?.total ?? this.rowsSignal().length,
+                });
+                this.loadingSignal.set(false);
+            },
+            error: (error) => {
+                this.rowsSignal.set([]);
+                this.columnsSignal.set([]);
+                this.headerActionsSignal.set([]);
+                this.errorSignal.set(error?.error?.message || 'Не вдалося завантажити таблицю');
+                this.loadingSignal.set(false);
+            },
+        });
+    }
+    setColumns() {
+        const editable = this.editableColumns();
+        this.columnsSignal.set(this.sourceColumns.filter((column) => !column['hidden']).map((column) => {
+            const key = String(column['id'] || '');
+            const config = editable.find((item) => item.key === key);
+            return {
+                key,
+                labelKey: String(column['label'] || key),
+                type: column['type'],
+                width: column['width'],
+                sortable: true,
+                link: column['link'],
+                editable: !!config,
+                editableCondition: String(this.config?.props?.['editableCondition'] || config?.['condition'] || ''),
+                editor: config?.editor,
+                bindKey: config?.bindKey || key,
+                options: config?.options || [],
+                data: config?.data,
+                dataParams: config?.dataParams,
+                placeholder: config?.placeholder,
+            };
+        }));
+    }
+    rowsFrom(view, columns) {
+        const configured = view.actions?.row?.custom || [];
+        return (view.rows || []).map((raw) => {
+            const row = Array.isArray(raw)
+                ? columns.reduce((result, column, index) => {
+                    result[String(column['id'])] = raw[index] ?? '';
+                    return result;
+                }, { id: String(raw[0] || '') })
+                : { ...(raw || {}) };
+            row['id'] = String(row['id'] || '');
+            if (!Array.isArray(row['actions'])) {
+                const actions = [...configured];
+                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 && !actionIds.has('delete')) {
+                    actions.push({ id: 'delete', label: 'Видалити', type: 'submit', api: `/api/crud/${this.tableName()}/${row['id']}`, method: 'DELETE' });
+                }
+                if (actions.length)
+                    row['actions'] = actions;
+            }
+            return row;
+        });
+    }
+    tableName() {
+        return String(this.config?.props?.['table'] || this.config?.props?.['entity'] || '').trim();
+    }
+    editableColumns() {
+        const value = this.config?.props?.['editableColumns'];
+        return Array.isArray(value)
+            ? value.filter((item) => !!item && typeof item === 'object' && !!String(item.key || '').trim())
+            : [];
+    }
+    tableEndpoint(table) {
+        const params = new URLSearchParams({
+            page: String(this.page),
+            size: String(this.pageSize),
+            sortField: this.sortField,
+            sortDirection: this.sortDirection,
+            filters: JSON.stringify(this.config?.props?.['initialFilters'] || this.config?.props?.['filter'] || {}),
+        });
+        return `/api/crud/${encodeURIComponent(table)}?${params.toString()}`;
+    }
+    editEnabled() {
+        return this.config?.props?.['edit'] !== false && this.config?.props?.['edit'] !== 'false';
+    }
+    numberProp(key, fallback) {
+        const value = Number(this.config?.props?.[key]);
+        return Number.isFinite(value) && value > 0 ? Math.trunc(value) : fallback;
+    }
+    resolveObject(value, row) {
+        return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, this.resolveValue(item, row)]));
+    }
+    resolve(value, row) {
+        return String(this.resolveValue(value, row));
+    }
+    resolveValue(value, row) {
+        if (typeof value === 'string') {
+            return value.replace(/\{\{([a-zA-Z0-9_.-]+)\}\}/g, (_match, path) => {
+                const result = String(path).split('.').reduce((current, key) => current && typeof current === 'object' ? current[key] : undefined, row);
+                return result == null ? '' : String(result);
+            });
+        }
+        if (Array.isArray(value))
+            return value.map((item) => this.resolveValue(item, row));
+        if (value && typeof value === 'object')
+            return this.resolveObject(value, row);
+        return value;
+    }
+    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: 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    [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 }]
+            }], data: [{
+                type: Input
+            }] } });
+function normalizeTableResponse(response) {
+    const raw = (response || {});
+    const source = (raw['config'] || raw);
+    return {
+        ...source,
+        rows: raw['rows'] ?? raw['items'] ?? source.rows ?? [],
+        pagination: {
+            page: raw['page'] ?? source.pagination?.page,
+            size: raw['size'] ?? source.pagination?.size,
+            total: raw['total'] ?? source.pagination?.total,
+            totalElements: raw['total'] ?? source.pagination?.totalElements,
+            sizes: source.pagination?.sizes,
+        },
+    };
+}
 
 const UI_CARD_TAB_REGISTRY = new InjectionToken('UI_CARD_TAB_REGISTRY');
 
 class UiCardPanelsLayoutComponent {
     registry = inject(UI_CARD_TAB_REGISTRY, { optional: true }) || [];
-    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : /* istanbul ignore next */ []));
-    recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []));
@@ -518,20 +822,18 @@ 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: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, 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  @if (!embedded()) {\n    <section class=\"space-y-4\">\n      <ng-container *ngTemplateOutlet=\"panelGrid\"></ng-container>\n    </section>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"panelGrid\"></ng-container>\n  }\n}\n\n<ng-template #panelGrid>\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              [entity]=\"entity()\"\n              [recordId]=\"recordId()\"\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 [entity]=\"entity()\" [recordId]=\"recordId()\" [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [entity]=\"entity()\" [recordId]=\"recordId()\" [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [tab]=\"tab\"></app-details-grid>\n        } @else if (tab.component === 'images') {\n          <app-images [tab]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [tab]=\"tab\" [entity]=\"entity()\" [recordId]=\"recordId()\" [data]=\"data()\"></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</ng-template>\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: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["entity", "recordId", "tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "entity", "recordId", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["entity", "recordId", "tab", "data"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["tab"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["tab", "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.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(() => 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], template: "@if (tabs().length) {\n  @if (!embedded()) {\n    <section class=\"space-y-4\">\n      <ng-container *ngTemplateOutlet=\"panelGrid\"></ng-container>\n    </section>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"panelGrid\"></ng-container>\n  }\n}\n\n<ng-template #panelGrid>\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              [entity]=\"entity()\"\n              [recordId]=\"recordId()\"\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 [entity]=\"entity()\" [recordId]=\"recordId()\" [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [entity]=\"entity()\" [recordId]=\"recordId()\" [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [tab]=\"tab\"></app-details-grid>\n        } @else if (tab.component === 'images') {\n          <app-images [tab]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [tab]=\"tab\" [entity]=\"entity()\" [recordId]=\"recordId()\" [data]=\"data()\"></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</ng-template>\n" }]
-        }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], 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 }] }] } });
+            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 {
     registry = inject(UI_CARD_TAB_REGISTRY, { optional: true }) || [];
     destroyRef = inject(DestroyRef);
     route = inject(ActivatedRoute);
     router = inject(Router);
-    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : /* istanbul ignore next */ []));
-    recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     activeTabId = signal('', ...(ngDevMode ? [{ debugName: "activeTabId" }] : /* istanbul ignore next */ []));
@@ -590,27 +892,25 @@ 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: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, 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            [entity]=\"entity()\"\n            [recordId]=\"recordId()\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [entity]=\"entity()\" [recordId]=\"recordId()\" [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [tab]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [tab]=\"tab\"></app-details-grid>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [tab]=\"tab\" [entity]=\"entity()\" [recordId]=\"recordId()\" [data]=\"data()\"></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: ["entity", "recordId", "tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "entity", "recordId", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["entity", "recordId", "tab", "data"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["tab", "data"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["tab"] }] });
+    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(() => 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], 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            [entity]=\"entity()\"\n            [recordId]=\"recordId()\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [entity]=\"entity()\" [recordId]=\"recordId()\" [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [tab]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [tab]=\"tab\"></app-details-grid>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [tab]=\"tab\" [entity]=\"entity()\" [recordId]=\"recordId()\" [data]=\"data()\"></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: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+            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 {
-    entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : /* istanbul ignore next */ []));
-    recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     layout = input('panels', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (layout() === 'panels') {\n  <app-ui-card-panels-layout\n    [entity]=\"entity()\"\n    [recordId]=\"recordId()\"\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n    [embedded]=\"embedded()\"\n  ></app-ui-card-panels-layout>\n} @else {\n  <app-ui-card-tabs-layout\n    [entity]=\"entity()\"\n    [recordId]=\"recordId()\"\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n  ></app-ui-card-tabs-layout>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "component", type: i0.forwardRef(() => UiCardTabsLayoutComponent), selector: "app-ui-card-tabs-layout", inputs: ["entity", "recordId", "tabs", "data"] }, { kind: "component", type: i0.forwardRef(() => UiCardPanelsLayoutComponent), selector: "app-ui-card-panels-layout", inputs: ["entity", "recordId", "tabs", "data", "embedded"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (layout() === 'panels') {\n  <app-ui-card-panels-layout\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n    [embedded]=\"embedded()\"\n  ></app-ui-card-panels-layout>\n} @else {\n  <app-ui-card-tabs-layout\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n  ></app-ui-card-tabs-layout>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "component", type: i0.forwardRef(() => UiCardTabsLayoutComponent), selector: "app-ui-card-tabs-layout", inputs: ["tabs", "data"] }, { kind: "component", type: i0.forwardRef(() => UiCardPanelsLayoutComponent), selector: "app-ui-card-panels-layout", inputs: ["tabs", "data", "embedded"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card', standalone: true, imports: [CommonModule, forwardRef(() => UiCardTabsLayoutComponent), forwardRef(() => UiCardPanelsLayoutComponent)], template: "@if (layout() === 'panels') {\n  <app-ui-card-panels-layout\n    [entity]=\"entity()\"\n    [recordId]=\"recordId()\"\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n    [embedded]=\"embedded()\"\n  ></app-ui-card-panels-layout>\n} @else {\n  <app-ui-card-tabs-layout\n    [entity]=\"entity()\"\n    [recordId]=\"recordId()\"\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n  ></app-ui-card-tabs-layout>\n}\n" }]
-        }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }] } });
+            args: [{ selector: 'app-card', standalone: true, imports: [CommonModule, forwardRef(() => UiCardTabsLayoutComponent), forwardRef(() => UiCardPanelsLayoutComponent)], template: "@if (layout() === 'panels') {\n  <app-ui-card-panels-layout\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n    [embedded]=\"embedded()\"\n  ></app-ui-card-panels-layout>\n} @else {\n  <app-ui-card-tabs-layout\n    [tabs]=\"tabs()\"\n    [data]=\"data()\"\n  ></app-ui-card-tabs-layout>\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 }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }] } });
 
 const UI_ENTITY_CARD_HOST = new InjectionToken('UI_ENTITY_CARD_HOST');
 
@@ -861,7 +1161,7 @@ class DocumentsComponent {
     plusIcon = Plus;
     sparkleIcon = Sparkles;
     deleteIcon = Trash;
-    isAdmin = toSignal(inject(CardCurrentUserService).getCurrentUser().pipe(map((user) => String(user.role || '').trim().toUpperCase() === 'ADMIN')), { initialValue: false });
+    isAdmin = toSignal(inject(CardCurrentUserService).getCurrentUser().pipe(map$1((user) => String(user.role || '').trim().toUpperCase() === 'ADMIN')), { initialValue: false });
     documentsService = inject(UiEntityDocumentsService);
     dictionaryService = inject(CardDictionaryService);
     toast = inject(UiToastService);
@@ -1103,8 +1403,8 @@ class DocumentsComponent {
             const pendingDocuments = this.documents().filter((document) => this.isRecognitionPending(document));
             if (!pendingDocuments.length)
                 return of([]);
-            return forkJoin(pendingDocuments.map((document) => this.documentsService.recognitionStatus(document.id).pipe(catchError(() => of(null))))).pipe(map((statuses) => statuses.filter((status) => !!status)));
-        }), map((statuses) => {
+            return forkJoin(pendingDocuments.map((document) => this.documentsService.recognitionStatus(document.id).pipe(catchError(() => of(null))))).pipe(map$1((statuses) => statuses.filter((status) => !!status)));
+        }), map$1((statuses) => {
             statuses.forEach((status) => this.upsertDocument(status));
             return statuses;
         }), takeWhile(() => this.documents().some((document) => this.isRecognitionPending(document)), true), takeUntilDestroyed(this.destroyRef), takeUntil(timer(RECOGNITION_POLLING_TIMEOUT_MS)), finalize(() => {
@@ -1283,1053 +1583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'app-history-tab', standalone: true, imports: [CommonModule, ImagesViewerComponent, RouterLink], 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" }]
         }], ctorParameters: () => [], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: false }] }], primaryEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryEntity", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], entityLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityLabels", required: false }] }] } });
 
-const ACTION_API = 'ACTION_API';
-const ACTION_FORM = 'ACTION_FORM';
-const ACTION_PRINT = 'ACTION_PRINT';
-const normalizeActionType = (value) => {
-    const raw = String(value || '').trim().toLowerCase();
-    if (raw === 'api' || raw === ACTION_API.toLowerCase())
-        return ACTION_API;
-    if (raw === 'form' || raw === ACTION_FORM.toLowerCase())
-        return ACTION_FORM;
-    if (raw === 'print' || raw === ACTION_PRINT.toLowerCase())
-        return ACTION_PRINT;
-    return raw ? raw.toUpperCase() : null;
-};
-class CardTableDataService {
-    http = inject(HttpClient);
-    baseUrl = inject(UI_CARD_API_BASE_URL);
-    getTableView(code, options) {
-        let params = new HttpParams();
-        for (const [key, value] of Object.entries(options)) {
-            if (value !== undefined && value !== null && value !== '')
-                params = params.set(key, typeof value === 'object' ? JSON.stringify(value) : String(value));
-        }
-        return this.http.get(cardApiResourceUrl(this.baseUrl, `/api/crud/${encodeURIComponent(code)}`), { params }).pipe(map$1((response) => ({
-            ...(response.config || response),
-            rows: response.rows ?? response.items ?? [],
-            pagination: {
-                page: response.page,
-                size: response.size,
-                totalElements: response.total,
-                totalPages: response.totalPages,
-            },
-        })));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableDataService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableDataService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class CardTableWarehouseService {
-    http = inject(HttpClient);
-    baseUrl = inject(UI_CARD_API_BASE_URL);
-    getWarehouses() {
-        return this.http.get(cardApiResourceUrl(this.baseUrl, '/api/warehouses')).pipe(map$1((items) => ({ items: items || [] })));
-    }
-    getWarehouseItems(id) {
-        return this.http.get(cardApiResourceUrl(this.baseUrl, `/api/warehouses/${encodeURIComponent(id)}/items`));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableWarehouseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableWarehouseService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableWarehouseService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class CardTableBarcodeService {
-    printBarcode(options) {
-        const barcode = String(options.barcode || '').trim();
-        if (!barcode || typeof window === 'undefined')
-            return;
-        const printWindow = window.open('', '_blank', 'width=860,height=920');
-        if (!printWindow)
-            return;
-        const barcodeSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        try {
-            JsBarcode(barcodeSvg, barcode, { format: 'CODE128', displayValue: false, margin: 0, width: 2.1, height: 88, lineColor: '#0f172a', background: '#ffffff' });
-        }
-        catch {
-            printWindow.close();
-            return;
-        }
-        printWindow.document.write(`<!doctype html><html><head><title>${this.escape(options.title)}</title><style>body{font-family:Arial;text-align:center;padding:10mm}.barcode{width:58mm;margin:auto}.barcode svg{width:100%;height:18mm}</style></head><body><h2>${this.escape(options.title)}</h2><div class="barcode">${barcodeSvg.outerHTML}</div></body></html>`);
-        printWindow.document.close();
-        printWindow.focus();
-        printWindow.print();
-    }
-    escape(value) { return value.replace(/[&<>'"]/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[char] || char)); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableBarcodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableBarcodeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableBarcodeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class CardTablePrintService {
-    openPrintWindow() { return typeof window === 'undefined' ? null : window.open('', '_blank', 'width=860,height=920'); }
-    print(config) {
-        const printWindow = this.openPrintWindow();
-        return printWindow ? this.printInWindow(printWindow, config) : false;
-    }
-    printInWindow(printWindow, config) {
-        printWindow.document.write(`<!doctype html><html><head><title>${config.title || 'Друк'}</title></head><body>${config.html}</body></html>`);
-        printWindow.document.close();
-        printWindow.focus();
-        printWindow.print();
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTablePrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTablePrintService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTablePrintService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-const getConditionPathValue = (source, pathRaw) => {
-    const path = String(pathRaw || '').trim();
-    if (!path)
-        return undefined;
-    const parts = path.split('.');
-    let current = source;
-    for (const part of parts) {
-        if (current == null || typeof current !== 'object')
-            return undefined;
-        current = current[part];
-    }
-    return current;
-};
-const evaluateCondition = (conditionRaw, context) => {
-    const condition = String(conditionRaw || '').trim();
-    if (!condition)
-        return true;
-    const tokens = [];
-    let index = 0;
-    const pushOperator = (value) => {
-        tokens.push({ type: 'operator', value });
-    };
-    while (index < condition.length) {
-        const char = condition[index];
-        if (/\s/.test(char)) {
-            index += 1;
-            continue;
-        }
-        const nextThree = condition.slice(index, index + 3);
-        const nextTwo = condition.slice(index, index + 2);
-        if (nextThree === '===') {
-            pushOperator('===');
-            index += 3;
-            continue;
-        }
-        if (nextThree === '!==') {
-            pushOperator('!==');
-            index += 3;
-            continue;
-        }
-        if (nextTwo === '==') {
-            pushOperator('==');
-            index += 2;
-            continue;
-        }
-        if (nextTwo === '!=') {
-            pushOperator('!=');
-            index += 2;
-            continue;
-        }
-        if (nextTwo === '&&') {
-            pushOperator('&&');
-            index += 2;
-            continue;
-        }
-        if (nextTwo === '||') {
-            pushOperator('||');
-            index += 2;
-            continue;
-        }
-        if (char === '!' || char === '(' || char === ')') {
-            pushOperator(char);
-            index += 1;
-            continue;
-        }
-        if (char === '"' || char === "'") {
-            const quote = char;
-            index += 1;
-            let value = '';
-            let escaped = false;
-            let closed = false;
-            while (index < condition.length) {
-                const current = condition[index];
-                index += 1;
-                if (escaped) {
-                    value += current;
-                    escaped = false;
-                    continue;
-                }
-                if (current === '\\') {
-                    escaped = true;
-                    continue;
-                }
-                if (current === quote) {
-                    closed = true;
-                    break;
-                }
-                value += current;
-            }
-            if (!closed)
-                return true;
-            tokens.push({ type: 'string', value });
-            continue;
-        }
-        if (/[0-9.-]/.test(char)) {
-            const match = condition.slice(index).match(/^-?\d+(?:\.\d+)?/);
-            if (match) {
-                tokens.push({ type: 'number', value: Number(match[0]) });
-                index += match[0].length;
-                continue;
-            }
-        }
-        if (/[A-Za-z_$]/.test(char)) {
-            const match = condition.slice(index).match(/^[A-Za-z_$][A-Za-z0-9_.$-]*/);
-            if (match) {
-                const raw = match[0];
-                const normalized = raw.toLowerCase();
-                if (normalized === 'true' || normalized === 'false') {
-                    tokens.push({ type: 'boolean', value: normalized === 'true' });
-                }
-                else if (normalized === 'null') {
-                    tokens.push({ type: 'null', value: null });
-                }
-                else {
-                    tokens.push({ type: 'identifier', value: raw });
-                }
-                index += raw.length;
-                continue;
-            }
-        }
-        return true;
-    }
-    let tokenIndex = 0;
-    const peek = () => tokens[tokenIndex];
-    const consume = () => {
-        const token = tokens[tokenIndex];
-        tokenIndex += 1;
-        return token;
-    };
-    const matchOperator = (...values) => {
-        const token = peek();
-        if (token?.type !== 'operator')
-            return false;
-        if (!values.includes(token.value))
-            return false;
-        tokenIndex += 1;
-        return true;
-    };
-    const toBoolean = (value) => {
-        if (typeof value === 'string')
-            return value.trim().length > 0;
-        return Boolean(value);
-    };
-    const getValue = (identifierRaw) => {
-        const identifier = String(identifierRaw || '').trim();
-        if (!identifier)
-            return undefined;
-        if (identifier === 'data')
-            return context;
-        if (identifier.startsWith('data.'))
-            return getConditionPathValue(context, identifier.slice(5));
-        return getConditionPathValue(context, identifier);
-    };
-    const parseExpression = () => parseOr();
-    const parseOr = () => {
-        let left = parseAnd();
-        while (matchOperator('||')) {
-            const right = parseAnd();
-            left = toBoolean(left) || toBoolean(right);
-        }
-        return left;
-    };
-    const parseAnd = () => {
-        let left = parseEquality();
-        while (matchOperator('&&')) {
-            const right = parseEquality();
-            left = toBoolean(left) && toBoolean(right);
-        }
-        return left;
-    };
-    const parseEquality = () => {
-        let left = parseUnary();
-        while (true) {
-            if (matchOperator('==')) {
-                left = left == parseUnary();
-                continue;
-            }
-            if (matchOperator('!=')) {
-                left = left != parseUnary();
-                continue;
-            }
-            if (matchOperator('===')) {
-                left = left === parseUnary();
-                continue;
-            }
-            if (matchOperator('!==')) {
-                left = left !== parseUnary();
-                continue;
-            }
-            break;
-        }
-        return left;
-    };
-    const parseUnary = () => {
-        if (matchOperator('!')) {
-            return !toBoolean(parseUnary());
-        }
-        return parsePrimary();
-    };
-    const parsePrimary = () => {
-        const token = consume();
-        if (!token)
-            return undefined;
-        if (token.type === 'operator' && token.value === '(') {
-            const value = parseExpression();
-            matchOperator(')');
-            return value;
-        }
-        if (token.type === 'identifier')
-            return getValue(token.value);
-        return token.value;
-    };
-    return toBoolean(parseExpression());
-};
-class CardTableComponent {
-    tab;
-    data = null;
-    tableViewsService = inject(CardTableDataService);
-    warehouseService = inject(CardTableWarehouseService);
-    barcodePrintService = inject(CardTableBarcodeService);
-    eventBus = inject(EventBus);
-    host = inject(UI_ENTITY_CARD_HOST, { optional: true });
-    actionBus = inject(CardTablePrintService);
-    tableColumnsSignal = signal([], ...(ngDevMode ? [{ debugName: "tableColumnsSignal" }] : /* istanbul ignore next */ []));
-    tableRowsSignal = signal([], ...(ngDevMode ? [{ debugName: "tableRowsSignal" }] : /* istanbul ignore next */ []));
-    tablePaginationSignal = signal({ page: 0, pageSize: 10, total: 0 }, ...(ngDevMode ? [{ debugName: "tablePaginationSignal" }] : /* istanbul ignore next */ []));
-    tableHeaderActionsSignal = signal([], ...(ngDevMode ? [{ debugName: "tableHeaderActionsSignal" }] : /* istanbul ignore next */ []));
-    editableColumnOptionsSignal = signal({}, ...(ngDevMode ? [{ debugName: "editableColumnOptionsSignal" }] : /* istanbul ignore next */ []));
-    isTableLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "isTableLoadingSignal" }] : /* istanbul ignore next */ []));
-    isTableActionRunningSignal = signal(false, ...(ngDevMode ? [{ debugName: "isTableActionRunningSignal" }] : /* istanbul ignore next */ []));
-    activeEditableCellSignal = signal(null, ...(ngDevMode ? [{ debugName: "activeEditableCellSignal" }] : /* istanbul ignore next */ []));
-    activeFormTargetSignal = signal(null, ...(ngDevMode ? [{ debugName: "activeFormTargetSignal" }] : /* istanbul ignore next */ []));
-    activeFormTarget = computed(() => this.activeFormTargetSignal(), ...(ngDevMode ? [{ debugName: "activeFormTarget" }] : /* istanbul ignore next */ []));
-    tableData = computed(() => ({
-        items: this.tableRowsSignal(),
-        pagination: this.tablePaginationSignal(),
-    }), ...(ngDevMode ? [{ debugName: "tableData" }] : /* istanbul ignore next */ []));
-    pageIndex = 0;
-    pageSize = 10;
-    sortField = '';
-    sortDirection = '';
-    tableViewColumns = [];
-    editableColumnsLoaded = false;
-    refreshAfterFormCompleted = false;
-    ngOnChanges() {
-        this.pageIndex = 0;
-        this.pageSize = this.resolvePageSize();
-        this.sortField = '';
-        this.sortDirection = '';
-        this.editableColumnsLoaded = false;
-        this.activeEditableCellSignal.set(null);
-        this.editableColumnOptionsSignal.set({});
-        this.loadTable();
-    }
-    get disablePaging() {
-        const value = this.tab?.props?.['disablePaging'];
-        return value === true || value === 'true';
-    }
-    get tableColumns() {
-        return this.tableColumnsSignal();
-    }
-    get tableHeaderActions() {
-        return this.tableHeaderActionsSignal();
-    }
-    get tableActions() {
-        const blockActions = Array.isArray(this.tab?.actions) ? this.tab.actions : [];
-        return [
-            ...blockActions.map((action, index) => {
-                const rawAction = action;
-                return {
-                    ...action,
-                    variant: rawAction.variant || (index === 0 ? 'primary' : 'ghost'),
-                };
-            }),
-            ...this.tableHeaderActions.map((action) => ({
-                ...action,
-                variant: 'ghost',
-            })),
-        ];
-    }
-    get isTableLoading() {
-        return this.isTableLoadingSignal();
-    }
-    get isTableActionRunning() {
-        return this.isTableActionRunningSignal();
-    }
-    get rowClickable() {
-        return this.isEditEnabled();
-    }
-    onTablePageChange(event) {
-        this.pageIndex = Math.max(0, Number(event['pageIndex'] ?? this.pageIndex) || 0);
-        this.pageSize = Math.max(1, Number(event['pageSize'] ?? this.pageSize) || this.pageSize);
-        const active = String(event['active'] ?? '').trim();
-        this.sortField = this.tableViewColumns.find((column) => column.id === active)?.id || '';
-        const direction = String(event['direction'] ?? '').toLowerCase();
-        this.sortDirection = direction === 'asc' || direction === 'desc' ? direction : '';
-        this.loadTable();
-    }
-    onTableAction(event) {
-        if (normalizeActionType(event.action.type) === ACTION_PRINT || event.action.component === 'warehouseBarcodePrint' || event.action.template || event.action.id === 'print-certificate') {
-            this.runPrintAction(event.action, event.row);
-            return;
-        }
-        if (normalizeActionType(event.action.type) === ACTION_FORM && String(event.action.formId || '').trim()) {
-            this.runFormAction(event.action, event.row);
-            return;
-        }
-        if (!event.action.api) {
-            return;
-        }
-        const payload = this.resolveTemplatePayload(event.action.payload || {}, event.row);
-        this.runApiAction({
-            api: this.resolveTemplateString(event.action.api, {
-                ...event.row,
-                ...payload,
-            }),
-            method: event.action.method || 'POST',
-            payload,
-            title: event.action.title,
-            text: event.action.text,
-            submit: event.action.submit,
-            danger: event.action.danger,
-            successMessage: event.action.id === 'issue'
-                ? 'Матеріали списано зі складу'
-                : event.action.id === 'delete'
-                    ? 'Позицію видалено'
-                    : 'Дію виконано',
-            errorMessage: 'Не вдалося виконати дію',
-        });
-    }
-    onHeaderAction(action) {
-        if (!action?.formId) {
-            if (action?.api) {
-                this.runApiAction({
-                    api: action.api,
-                    method: action.method || 'POST',
-                    payload: this.resolveTemplatePayload(action.payload || {}, this.data || {}),
-                    title: action.title,
-                    text: action.text,
-                    submit: action.submit,
-                    danger: action.variant === 'danger',
-                    successMessage: 'Дію виконано',
-                    errorMessage: 'Не вдалося виконати дію',
-                });
-            }
-            return;
-        }
-        this.runHeaderFormAction(action);
-    }
-    onTableRowClick(row) {
-        if (!this.isEditEnabled()) {
-            return;
-        }
-        this.runRowEditAction(row);
-    }
-    onTableCellChange(event) {
-        const editableConfig = this.resolveEditableColumnsConfig().find((column) => column.key === event.column.key);
-        if (!editableConfig) {
-            return;
-        }
-        const rowId = String(event.row['id'] ?? '').trim();
-        if (!rowId) {
-            return;
-        }
-        const nextValue = String(event.value ?? '').trim();
-        const nextRow = {
-            ...event.row,
-            [event.column.bindKey || event.column.key]: nextValue,
-        };
-        if (editableConfig.editor === 'select') {
-            nextRow[event.column.key] =
-                this.resolveEditableColumnOptions(event.column.key).find((option) => String(option.value ?? '').trim() === nextValue)?.label ?? '';
-        }
-        this.tableRowsSignal.update((rows) => rows.map((row) => (String(row['id'] ?? '').trim() === rowId ? nextRow : row)));
-        if (editableConfig.api) {
-            this.saveEditableColumnChange(editableConfig, nextRow);
-        }
-    }
-    onEditableCellActivate(row, columnKey, event) {
-        event.stopPropagation();
-        const rowId = String(row['id'] ?? '').trim();
-        const key = String(columnKey || '').trim();
-        if (!rowId || !key) {
-            return;
-        }
-        this.activeEditableCellSignal.set({ rowId, columnKey: key });
-    }
-    isEditableCellActive(row, columnKey) {
-        const active = this.activeEditableCellSignal();
-        return !!active && active.rowId === String(row['id'] ?? '').trim() && active.columnKey === String(columnKey || '').trim();
-    }
-    resolveEditableDisplayValue(row, column) {
-        const rawValue = this.getCellValue(row, column.bindKey || column.key);
-        if (rawValue === null || rawValue === undefined || rawValue === '') {
-            return '—';
-        }
-        if (column.editor === 'select') {
-            const value = String(rawValue).trim();
-            const option = this.resolveEditableColumnOptions(column.key).find((item) => String(item.value ?? '').trim() === value);
-            return String(option?.label || rawValue).trim() || '—';
-        }
-        return String(rawValue);
-    }
-    getCellValue(row, column) {
-        return row?.[column];
-    }
-    runPrintAction(action, row) {
-        const template = String(action.template || (action.id === 'print-certificate' ? 'print-certificate' : '')).trim();
-        const recordId = String(row['id'] || '').trim();
-        if (template && recordId) {
-            const printWindow = this.actionBus.openPrintWindow();
-            const entity = encodeURIComponent(this.resolveTableSource());
-            const id = encodeURIComponent(recordId);
-            const actionId = encodeURIComponent(template);
-            this.host?.callApi({
-                api: `/api/crud/${entity}/${id}/action/${actionId}`,
-                method: 'GET',
-            }).subscribe({
-                next: (response) => {
-                    const html = String(response?.data?.html || '').trim();
-                    const title = String(response?.data?.title || action.label || 'Друк');
-                    if (!html) {
-                        printWindow?.close();
-                        this.notify('Шаблон друку порожній', 'error');
-                        return;
-                    }
-                    const config = { html, title };
-                    if (printWindow)
-                        this.actionBus.printInWindow(printWindow, config);
-                    else
-                        this.actionBus.print(config);
-                },
-                error: (error) => {
-                    printWindow?.close();
-                    this.notify(error?.error?.message || 'Не вдалося завантажити сертифікат', 'error');
-                },
-            });
-            return;
-        }
-        const payload = this.resolveTemplatePayload(action.payload || {}, row);
-        const barcode = String(payload['barcode'] ?? row['barcode'] ?? '').trim();
-        if (!barcode) {
-            this.notify('У рядку немає штрихкоду', 'warning');
-            return;
-        }
-        const title = String(payload['title'] ?? row['name'] ?? this.tab?.title ?? 'Штрихкод').trim() || 'Штрихкод';
-        this.barcodePrintService.printBarcode({ barcode, title });
-    }
-    closeFormAction() {
-        this.activeFormTargetSignal.set(null);
-    }
-    refreshTable() {
-        this.loadTable();
-    }
-    onFormCompleted(response) {
-        this.refreshAfterFormCompleted = true;
-        this.applyFormResultToRow(response);
-        this.editableColumnsLoaded = false;
-        this.editableColumnOptionsSignal.set({});
-        this.loadEditableColumnOptions(true);
-    }
-    onFormClosed() {
-        this.activeFormTargetSignal.set(null);
-        this.activeEditableCellSignal.set(null);
-        if (!this.refreshAfterFormCompleted)
-            return;
-        this.refreshAfterFormCompleted = false;
-        this.loadTable();
-    }
-    applyFormResultToRow(response) {
-        const target = this.activeFormTargetSignal();
-        if (!target || !response || typeof response !== 'object')
-            return;
-        const responseData = response.data;
-        if (!responseData || typeof responseData !== 'object')
-            return;
-        const data = responseData;
-        const warehouse = data['warehouse'];
-        const warehouseData = warehouse && typeof warehouse === 'object'
-            ? warehouse
-            : null;
-        const warehouseId = String(warehouseData?.['id'] ?? data['warehouseId'] ?? '').trim();
-        const warehouseItemId = String(data['id'] ?? '').trim();
-        if (!warehouseId || !warehouseItemId)
-            return;
-        this.tableRowsSignal.update((rows) => rows.map((row) => {
-            if (String(row['id'] ?? '').trim() !== target.recordId)
-                return row;
-            return {
-                ...row,
-                warehouse_id: warehouseId,
-                warehouse_item_id: warehouseItemId,
-                warehouse_position: String(warehouseData?.['name'] ?? data['name'] ?? '').trim(),
-            };
-        }));
-    }
-    loadTable() {
-        const table = this.resolveTableSource();
-        this.isTableLoadingSignal.set(true);
-        this.tableRowsSignal.set([]);
-        this.tablePaginationSignal.set({ page: this.pageIndex, pageSize: this.pageSize, total: 0 });
-        if (!table) {
-            this.tableColumnsSignal.set([]);
-            this.isTableLoadingSignal.set(false);
-            return;
-        }
-        this.tableViewsService.getTableView(table, {
-            page: this.pageIndex,
-            size: this.pageSize,
-            sortField: this.sortField,
-            sortDirection: this.sortDirection,
-            filters: this.resolveTableFilters(),
-        }).subscribe({
-            next: (view) => {
-                const rows = this.normalizeTableRows(view);
-                this.tableViewColumns = view.columns || [];
-                this.tableHeaderActionsSignal.set(view.actions?.header?.custom || []);
-                this.tableColumnsSignal.set(this.normalizeTableColumns(this.tableViewColumns));
-                this.tableRowsSignal.set(rows);
-                this.activeEditableCellSignal.set(null);
-                this.loadEditableColumnOptions();
-                this.pageIndex = view.pagination?.page ?? this.pageIndex;
-                this.pageSize = view.pagination?.size ?? this.pageSize;
-                this.tablePaginationSignal.set({
-                    page: this.pageIndex,
-                    pageSize: this.pageSize,
-                    total: view.pagination?.totalElements ?? rows.length,
-                });
-                this.isTableLoadingSignal.set(false);
-            },
-            error: (error) => {
-                this.tableRowsSignal.set([]);
-                this.tableHeaderActionsSignal.set([]);
-                this.tablePaginationSignal.set({ page: this.pageIndex, pageSize: this.pageSize, total: 0 });
-                this.activeEditableCellSignal.set(null);
-                this.isTableLoadingSignal.set(false);
-                this.notify(error?.error?.message || 'Не вдалося завантажити таблицю', 'error');
-            },
-        });
-    }
-    runApiAction(config) {
-        const api = String(config.api || '').trim();
-        if (!api) {
-            return;
-        }
-        this.isTableActionRunningSignal.set(true);
-        this.host?.callApi({
-            api,
-            method: config.method || 'POST',
-            title: config.title,
-            text: config.text,
-            submit: typeof config.submit === 'string' ? config.submit : undefined,
-            danger: config.danger,
-            payload: config.payload,
-        }).subscribe({
-            next: () => {
-                this.notify(config.successMessage, 'success');
-                this.isTableActionRunningSignal.set(false);
-                this.loadTable();
-                this.eventBus.emit(ENTITY_UPDATED, {
-                    source: 'card-table.row-action',
-                });
-            },
-            error: (error) => {
-                this.isTableActionRunningSignal.set(false);
-                this.notify(error?.error?.message || config.errorMessage, 'error');
-            },
-        });
-    }
-    runFormAction(action, row) {
-        const formId = String(action.formId || '').trim();
-        const recordId = String(row['id'] || '').trim();
-        if (!formId || !recordId) {
-            this.notify('Не вдалося відкрити форму редагування', 'warning');
-            return;
-        }
-        const actionPayload = this.resolveTemplatePayload(action.payload || {}, row);
-        this.activeFormTargetSignal.set({
-            formId,
-            recordId,
-            initialValue: { ...row, ...actionPayload },
-        });
-    }
-    runRowEditAction(row) {
-        const recordId = String(row['id'] || '').trim();
-        const formId = this.resolveTableSource();
-        if (!recordId || !formId) {
-            return;
-        }
-        this.activeFormTargetSignal.set({
-            formId,
-            recordId,
-            initialValue: { ...row },
-        });
-    }
-    runHeaderFormAction(action) {
-        const formId = String(action.formId || '').trim();
-        if (!formId) {
-            return;
-        }
-        this.activeFormTargetSignal.set({
-            formId,
-            recordId: '',
-            initialValue: this.resolveTemplatePayload(action.payload || {}, this.data || {}),
-        });
-    }
-    normalizeTableColumns(columns) {
-        const editableColumns = this.resolveEditableColumnsConfig();
-        return (columns || [])
-            .filter((column) => !column.hidden)
-            .map((column) => {
-            const editableConfig = editableColumns.find((item) => item.key === column.id);
-            if (!editableConfig) {
-                return {
-                    key: column.id,
-                    labelKey: column.label,
-                    sortable: true,
-                    type: column.type,
-                    width: column.width,
-                    link: column.link,
-                };
-            }
-            return {
-                key: column.id,
-                labelKey: column.label,
-                sortable: true,
-                type: column.type,
-                width: column.width,
-                link: column.link,
-                editable: true,
-                editableCondition: this.resolveEditableCondition(),
-                bindKey: editableConfig.bindKey || column.sourceColumn || column.dataKey || column.id,
-                editor: editableConfig.editor,
-                options: this.resolveEditableColumnOptions(column.id),
-                includeBlankOption: editableConfig.includeBlankOption,
-                blankOptionLabel: editableConfig.blankOptionLabel,
-                placeholder: editableConfig.placeholder,
-                inputType: editableConfig.inputType,
-            };
-        });
-    }
-    normalizeTableRows(view) {
-        const columns = view.columns || [];
-        const hiddenRowActions = new Set(Array.isArray(this.tab?.props?.['hiddenRowActions'])
-            ? this.tab.props['hiddenRowActions'].map((id) => String(id || '').trim()).filter(Boolean)
-            : []);
-        const rowActions = (view.actions?.row?.custom || []).filter((action) => !hiddenRowActions.has(action.id));
-        const configuredRowActions = view.actions?.row || {};
-        const defaultRowActions = {
-            edit: view.viewActions?.edit !== false && configuredRowActions.edit !== false,
-            editCondition: configuredRowActions.edit && typeof configuredRowActions.edit === 'object'
-                ? configuredRowActions.edit.condition
-                : undefined,
-            delete: view.viewActions?.delete !== false && configuredRowActions.delete !== false,
-            deleteCondition: configuredRowActions.delete && typeof configuredRowActions.delete === 'object'
-                ? configuredRowActions.delete.condition
-                : undefined,
-        };
-        return (view.rows || []).map((row) => this.toTableRowData(row, columns, rowActions, defaultRowActions));
-    }
-    toTableRowData(row, columns, rowActions = [], configuredActions = {}) {
-        const baseRow = Array.isArray(row)
-            ? columns.reduce((acc, column, index) => {
-                acc[column.id] = row[index] ?? '';
-                return acc;
-            }, { id: String(row[0] ?? '') })
-            : {
-                ...row,
-                id: String(row['id'] ?? ''),
-            };
-        if (this.resolveTableSource() === 'invoice-lines' && String(baseRow['line_id'] || '').trim()) {
-            baseRow['id'] = String(baseRow['line_id']).trim();
-        }
-        if (!Array.isArray(baseRow['actions']) && rowActions.length) {
-            baseRow['actions'] = rowActions.map((action) => ({ ...action }));
-        }
-        if (!Array.isArray(baseRow['actions'])) {
-            const actions = [];
-            const editAllowed = configuredActions.edit !== false
-                && (this.isEditEnabled() || evaluateCondition(configuredActions.editCondition, baseRow));
-            if (editAllowed) {
-                actions.push({
-                    id: 'edit',
-                    label: 'Редагувати',
-                    type: ACTION_FORM,
-                    formId: this.resolveTableSource(),
-                });
-            }
-            const deleteAllowed = configuredActions.delete !== false
-                && (this.isDeleteEnabled(baseRow) || evaluateCondition(configuredActions.deleteCondition, baseRow));
-            if (deleteAllowed) {
-                actions.push({
-                    id: 'delete',
-                    label: 'Видалити',
-                    type: ACTION_API,
-                    api: `/api/${this.resolveTableSource()}/{{id}}`,
-                    method: 'DELETE',
-                    danger: true,
-                    payload: { id: '{{id}}' },
-                });
-            }
-            if (actions.length)
-                baseRow['actions'] = actions;
-        }
-        return baseRow;
-    }
-    saveEditableColumnChange(editableConfig, row) {
-        const api = String(editableConfig.api || '').trim();
-        if (!api) {
-            return;
-        }
-        const payload = this.resolveEditableColumnPayload(editableConfig, row);
-        if (!payload) {
-            return;
-        }
-        this.isTableActionRunningSignal.set(true);
-        this.host?.callApi({
-            api,
-            method: editableConfig.method || 'PATCH',
-            payload,
-        }).subscribe({
-            next: () => {
-                this.isTableActionRunningSignal.set(false);
-                this.notify(editableConfig.successMessage || 'Збережено', 'success');
-                this.loadTable();
-                this.eventBus.emit(ENTITY_UPDATED, {
-                    source: 'card-table.editable-cell',
-                });
-            },
-            error: (error) => {
-                this.isTableActionRunningSignal.set(false);
-                this.notify(error?.error?.message || editableConfig.errorMessage || 'Не вдалося зберегти зміни', 'error');
-            },
-        });
-    }
-    loadEditableColumnOptions(force = false) {
-        if (this.editableColumnsLoaded && !force) {
-            return;
-        }
-        const editableColumns = this.resolveEditableColumnsConfig();
-        const columnsNeedingOptions = editableColumns.filter((column) => column.optionsSource === 'warehouses' || column.optionsSource === 'warehouse-items');
-        if (!columnsNeedingOptions.length) {
-            this.editableColumnsLoaded = true;
-            return;
-        }
-        this.editableColumnsLoaded = true;
-        this.warehouseService.getWarehouses().subscribe({
-            next: (response) => {
-                const warehouses = response.items ?? [];
-                const warehouseOptions = warehouses
-                    .map((warehouse) => ({
-                    value: warehouse.id ? String(warehouse.id) : null,
-                    label: String(warehouse.name || warehouse.labelName || warehouse.id || 'Склад').trim() || 'Склад',
-                }))
-                    .filter((option) => !!option.value);
-                const loadWarehouseItemOptions = (done) => {
-                    if (!warehouses.length) {
-                        done([]);
-                        return;
-                    }
-                    const options = [];
-                    let remaining = warehouses.length;
-                    for (const warehouse of warehouses) {
-                        const warehouseId = String(warehouse.id || '').trim();
-                        if (!warehouseId) {
-                            remaining -= 1;
-                            continue;
-                        }
-                        this.warehouseService.getWarehouseItems(warehouseId).subscribe({
-                            next: (items) => {
-                                for (const item of items ?? []) {
-                                    options.push({
-                                        value: item.id ? String(item.id) : null,
-                                        label: [
-                                            String(warehouse.labelName || warehouse.name || warehouse.id || '').trim(),
-                                            String(item.name || item.id || '').trim(),
-                                        ]
-                                            .filter(Boolean)
-                                            .join(' / '),
-                                    });
-                                }
-                                remaining -= 1;
-                                if (remaining <= 0) {
-                                    done(options.filter((option) => !!option.value));
-                                }
-                            },
-                            error: () => {
-                                remaining -= 1;
-                                if (remaining <= 0) {
-                                    done(options.filter((option) => !!option.value));
-                                }
-                            },
-                        });
-                    }
-                };
-                const applyOptions = (warehouseItemOptions = []) => {
-                    this.editableColumnOptionsSignal.set(columnsNeedingOptions.reduce((acc, column) => {
-                        acc[column.key] = column.optionsSource === 'warehouses' ? warehouseOptions : warehouseItemOptions;
-                        return acc;
-                    }, {}));
-                    this.tableColumnsSignal.set(this.normalizeTableColumns(this.tableViewColumns));
-                };
-                if (!columnsNeedingOptions.some((column) => column.optionsSource === 'warehouse-items')) {
-                    applyOptions();
-                    return;
-                }
-                loadWarehouseItemOptions(applyOptions);
-            },
-            error: () => {
-                this.editableColumnOptionsSignal.set({});
-                this.tableColumnsSignal.set(this.normalizeTableColumns(this.tableViewColumns));
-            },
-        });
-    }
-    resolveEditableColumnsConfig() {
-        const value = this.tab?.props?.['editableColumns'];
-        return Array.isArray(value)
-            ? value.filter((item) => !!item && typeof item === 'object' && typeof item.key === 'string')
-            : [];
-    }
-    resolveEditableColumnPayload(editableConfig, row) {
-        const baseRow = {
-            ...row,
-            id: String(row['id'] ?? '').trim(),
-        };
-        const payloadConfig = editableConfig.payload && typeof editableConfig.payload === 'object' ? editableConfig.payload : {};
-        const payload = this.resolveTemplatePayload(payloadConfig, {
-            ...this.data,
-            ...baseRow,
-        });
-        if (!Object.keys(payload).length) {
-            return baseRow;
-        }
-        return {
-            ...baseRow,
-            ...payload,
-        };
-    }
-    resolveEditableColumnOptions(columnKey) {
-        return this.editableColumnOptionsSignal()[columnKey] || [];
-    }
-    isEditEnabled() {
-        const value = this.tab?.props?.['edit'];
-        const enabled = value === true || String(value).trim().toLowerCase() === 'true';
-        if (!enabled) {
-            return false;
-        }
-        return evaluateCondition(String(this.tab?.props?.['editCondition'] || '').trim(), this.data || {});
-    }
-    isDeleteEnabled(row) {
-        const value = this.tab?.props?.['delete'];
-        const enabled = value === true || String(value).trim().toLowerCase() === 'true';
-        if (!enabled)
-            return false;
-        return evaluateCondition(String(this.tab?.props?.['deleteCondition'] || '').trim(), row);
-    }
-    resolveTableSource() {
-        return this.resolveTemplateString(String(this.tab?.props?.['table'] || '').trim(), this.data || {});
-    }
-    resolveTableFilters() {
-        return {
-            ...this.resolveFiltersObject(this.tab?.props?.['initialFilters']),
-            ...this.resolveFiltersObject(this.tab?.props?.['filter']),
-        };
-    }
-    resolveFiltersObject(filter) {
-        if (!filter || typeof filter !== 'object' || Array.isArray(filter)) {
-            return {};
-        }
-        return this.resolveTemplatePayload(filter, this.data || {});
-    }
-    resolveTemplatePayload(payload, source) {
-        return Object.entries(payload || {}).reduce((acc, [key, value]) => {
-            const next = this.resolveTemplateValue(value, source);
-            if (next !== null && next !== undefined && next !== '') {
-                acc[key] = next;
-            }
-            return acc;
-        }, {});
-    }
-    resolveTemplateString(value, source) {
-        return String(value || '').replace(/\{\{([a-zA-Z_][a-zA-Z0-9_.]*)\}\}/g, (_match, key) => {
-            const next = String(key).split('.').reduce((current, part) => {
-                if (current == null || typeof current !== 'object')
-                    return undefined;
-                return current[part];
-            }, source);
-            return next == null || next === '' ? '' : encodeURIComponent(String(next));
-        });
-    }
-    resolveTemplateValue(value, source) {
-        if (typeof value !== 'string') {
-            return value;
-        }
-        const raw = value.trim();
-        const match = raw.match(/^\{\{([a-zA-Z_][a-zA-Z0-9_.]*)\}\}$/);
-        if (match) {
-            return String(match[1]).split('.').reduce((current, part) => {
-                if (current == null || typeof current !== 'object')
-                    return undefined;
-                return current[part];
-            }, source) ?? '';
-        }
-        return value;
-    }
-    resolvePageSize() {
-        const value = Number(this.tab?.props?.['pageSize'] ?? 10);
-        return Number.isFinite(value) && value > 0 ? Math.floor(value) : 10;
-    }
-    resolveEditCondition() {
-        const condition = String(this.tab?.props?.['editCondition'] || '').trim();
-        return condition || undefined;
-    }
-    resolveEditableCondition() {
-        const condition = String(this.tab?.props?.['editableCondition'] || '').trim();
-        return condition || this.resolveEditCondition();
-    }
-    notify(message, variant) {
-        this.host?.notify(message, variant, 2800);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CardTableComponent, isStandalone: true, selector: "app-card-table", inputs: { tab: "tab", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (tableHeaderActions.length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of tableHeaderActions; track action.id) {\n        <ui-button\n          [variant]=\"action.variant || 'ghost'\"\n          [icon]=\"action.icon || ''\"\n          size=\"sm\"\n          type=\"button\"\n          (click)=\"onHeaderAction(action)\"\n        >\n          {{ action.label }}\n        </ui-button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"tableColumns\"\n    [isLoading]=\"isTableLoading\"\n    [disablePaging]=\"disablePaging\"\n    [rowClickable]=\"rowClickable\"\n    (pageChange)=\"onTablePageChange($event)\"\n    (actionClick)=\"onTableAction($event)\"\n    (rowClick)=\"onTableRowClick($event)\"\n    (cellChange)=\"onTableCellChange($event)\"\n  ></app-ui-table>\n\n  @if (activeFormTarget(); as target) {\n    <form-modal\n      [isOpen]=\"true\"\n      [formId]=\"target.formId\"\n      [recordId]=\"target.recordId\"\n      [initialValue]=\"target.initialValue\"\n      (closed)=\"onFormClosed()\"\n      (completed)=\"onFormCompleted($event)\"\n    ></form-modal>\n  }\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"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: FormModalComponent, selector: "form-modal", inputs: ["formId", "recordId", "size", "isOpen", "cancelLabel", "initialValue"], outputs: ["closed", "completed"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CardTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-card-table', standalone: true, imports: [
-                        CommonModule,
-                        UiTableComponent,
-                        UiButtonComponent,
-                        FormModalComponent,
-                    ], template: "<section class=\"space-y-4\">\n  @if (tableHeaderActions.length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of tableHeaderActions; track action.id) {\n        <ui-button\n          [variant]=\"action.variant || 'ghost'\"\n          [icon]=\"action.icon || ''\"\n          size=\"sm\"\n          type=\"button\"\n          (click)=\"onHeaderAction(action)\"\n        >\n          {{ action.label }}\n        </ui-button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"tableColumns\"\n    [isLoading]=\"isTableLoading\"\n    [disablePaging]=\"disablePaging\"\n    [rowClickable]=\"rowClickable\"\n    (pageChange)=\"onTablePageChange($event)\"\n    (actionClick)=\"onTableAction($event)\"\n    (rowClick)=\"onTableRowClick($event)\"\n    (cellChange)=\"onTableCellChange($event)\"\n  ></app-ui-table>\n\n  @if (activeFormTarget(); as target) {\n    <form-modal\n      [isOpen]=\"true\"\n      [formId]=\"target.formId\"\n      [recordId]=\"target.recordId\"\n      [initialValue]=\"target.initialValue\"\n      (closed)=\"onFormClosed()\"\n      (completed)=\"onFormCompleted($event)\"\n    ></form-modal>\n  }\n</section>\n" }]
-        }], propDecorators: { tab: [{
-                type: Input,
-                args: [{ required: true }]
-            }], data: [{
-                type: Input
-            }] } });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_API, ACTION_FORM, ACTION_PRINT, CARD_ACTION_COMPLETED, CARD_ACTION_FINISHED, CARD_ACTION_REQUESTED, CARD_ACTION_STARTED, CardComponent, CardCurrentUserService, CardDictionaryService, CardImageService, CardSectionHeaderComponent, CardTableBarcodeService, CardTableComponent, CardTableDataService, CardTablePrintService, CardTableWarehouseService, DocumentsComponent, ENTITY_UPDATED, HistoryTabComponent, ImagesViewerComponent, UI_CARD_API_BASE_URL, UI_CARD_TAB_REGISTRY, UI_ENTITY_CARD_HOST, UiEntityDocumentsService, cardApiParams, cardApiResourceUrl, normalizeActionType };
+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