@maro-tech/card 0.1.2 → 0.1.3

package/fesm2022/maro-tech-card.mjs

@@ -6,7 +6,7 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { EventBus, UiButtonComponent, UiToastService, UiModalComponent, UiConfirmService } from '@maro-tech/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { map, forkJoin, shareReplay, switchMap, timer, of } from 'rxjs';
+import { map, shareReplay, forkJoin, switchMap, timer, of } from 'rxjs';
 import { UiTableComponent } from '@maro-tech/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { map as map$1, exhaustMap, catchError, takeWhile, takeUntil, finalize } from 'rxjs/operators';
@@ -508,7 +508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'app-images', standalone: true, imports: [CommonModule, ImagesViewerComponent], template: "@if (resolvedImageUrls().length === 0) {\n  <p class=\"text-sm text-slate-500\">\u0424\u043E\u0442\u043E \u0432\u0456\u0434\u0441\u0443\u0442\u043D\u0456</p>\n} @else {\n  <div\n    class=\"grid gap-3\"\n    [ngClass]=\"resolvedImageUrls().length === 1 ? 'grid-cols-1' : 'sm:grid-cols-2 lg:grid-cols-4'\"\n  >\n    @for (image of resolvedImagePreviewUrls(); track image; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"group block overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 text-left\"\n        [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 \u0444\u043E\u0442\u043E ' + (i + 1)\"\n        (click)=\"openViewer(i)\"\n      >\n        <img\n          [src]=\"image\"\n          [alt]=\"'\u0424\u043E\u0442\u043E ' + (i + 1)\"\n          loading=\"lazy\"\n          decoding=\"async\"\n          class=\"w-full object-cover transition duration-200 group-hover:scale-[1.02]\"\n          [style.max-height.px]=\"resolvedImageMaxHeight()\"\n          [ngClass]=\"resolvedImageUrls().length === 1 ? 'h-auto' : 'h-48'\"\n        />\n      </button>\n    }\n  </div>\n\n  @if (isViewerOpen()) {\n    <app-images-viewer\n      [urls]=\"resolvedImageUrls()\"\n      [initialIndex]=\"viewerStartIndex()\"\n      (closed)=\"closeViewer()\"\n    ></app-images-viewer>\n  }\n}\n" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
-class StandardTableComponent {
+class TableComponent {
     config;
     data = null;
     http = inject(HttpClient);
@@ -516,10 +516,10 @@ class StandardTableComponent {
     columnsSignal = signal([], ...(ngDevMode ? [{ debugName: "columnsSignal" }] : /* istanbul ignore next */ []));
     rowsSignal = signal([], ...(ngDevMode ? [{ debugName: "rowsSignal" }] : /* istanbul ignore next */ []));
     paginationSignal = signal({ page: 0, pageSize: 10, total: 0 }, ...(ngDevMode ? [{ debugName: "paginationSignal" }] : /* istanbul ignore next */ []));
+    pageSizeOptionsSignal = signal([10, 20, 30], ...(ngDevMode ? [{ debugName: "pageSizeOptionsSignal" }] : /* istanbul ignore next */ []));
     headerActionsSignal = signal([], ...(ngDevMode ? [{ debugName: "headerActionsSignal" }] : /* istanbul ignore next */ []));
     loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : /* istanbul ignore next */ []));
     errorSignal = signal('', ...(ngDevMode ? [{ debugName: "errorSignal" }] : /* istanbul ignore next */ []));
-    editableOptionsSignal = signal({}, ...(ngDevMode ? [{ debugName: "editableOptionsSignal" }] : /* istanbul ignore next */ []));
     columns = this.columnsSignal.asReadonly();
     rows = this.rowsSignal.asReadonly();
     headerActions = this.headerActionsSignal.asReadonly();
@@ -616,7 +616,8 @@ class StandardTableComponent {
                 this.setColumns();
                 this.headerActionsSignal.set(view.actions?.header?.custom || []);
                 this.rowsSignal.set(this.rowsFrom(view, sourceColumns));
-                this.loadEditableOptions();
+                if (view.pagination?.sizes?.length)
+                    this.pageSizeOptionsSignal.set(view.pagination.sizes);
                 this.page = view.pagination?.page ?? this.page;
                 this.pageSize = view.pagination?.size ?? this.pageSize;
                 this.paginationSignal.set({
@@ -651,31 +652,13 @@ class StandardTableComponent {
                 editableCondition: String(this.config?.props?.['editableCondition'] || config?.['condition'] || ''),
                 editor: config?.editor,
                 bindKey: config?.bindKey || key,
-                options: config?.options || this.editableOptionsSignal()[key] || [],
+                options: config?.options || [],
+                data: config?.data,
+                dataParams: config?.dataParams,
                 placeholder: config?.placeholder,
-                includeBlankOption: config?.includeBlankOption,
-                blankOptionLabel: config?.blankOptionLabel,
             };
         }));
     }
-    loadEditableOptions() {
-        const sources = this.editableColumns().filter((column) => column.data && !column.options);
-        if (!sources.length)
-            return;
-        forkJoin(sources.map((column) => this.http.get(`/api/suggest/${encodeURIComponent(column.data)}`))).subscribe({
-            next: (responses) => {
-                const options = { ...this.editableOptionsSignal() };
-                sources.forEach((column, index) => {
-                    options[column.key] = (responses[index] || []).map((item) => ({
-                        value: item?.key == null ? null : String(item.key),
-                        label: String(item?.label || item?.key || '').trim(),
-                    }));
-                });
-                this.editableOptionsSignal.set(options);
-                this.setColumns();
-            },
-        });
-    }
     rowsFrom(view, columns) {
         const configured = view.actions?.row?.custom || [];
         return (view.rows || []).map((raw) => {
@@ -688,10 +671,11 @@ class StandardTableComponent {
             row['id'] = String(row['id'] || '');
             if (!Array.isArray(row['actions'])) {
                 const actions = [...configured];
-                if (view.viewActions?.edit !== false && view.actions?.row?.edit !== false && this.editEnabled()) {
+                const actionIds = new Set(actions.map((action) => String(action.id || '').trim()).filter(Boolean));
+                if (view.viewActions?.edit !== false && view.actions?.row?.edit !== false && this.editEnabled() && !actionIds.has('edit')) {
                     actions.push({ id: 'edit', label: 'Редагувати', type: 'form', formId: this.tableName() });
                 }
-                if (view.viewActions?.delete !== false && view.actions?.row?.delete !== false) {
+                if (view.viewActions?.delete !== false && view.actions?.row?.delete !== false && !actionIds.has('delete')) {
                     actions.push({ id: 'delete', label: 'Видалити', type: 'submit', api: `/api/crud/${this.tableName()}/${row['id']}`, method: 'DELETE' });
                 }
                 if (actions.length)
@@ -745,12 +729,12 @@ class StandardTableComponent {
             return this.resolveObject(value, row);
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StandardTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StandardTableComponent, isStandalone: true, selector: "app-card-table", inputs: { config: "config", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiTableComponent, selector: "app-ui-table", inputs: ["columns", "isLoading", "data", "disablePaging", "rowClickable", "imageResolver"], outputs: ["pageChange", "rowClick", "actionClick", "cellChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TableComponent, isStandalone: true, selector: "app-card-table", inputs: { config: "config", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [pageSizeOptions]=\"pageSizeOptionsSignal()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiTableComponent, selector: "app-ui-table", inputs: ["pageSizeOptions", "columns", "isLoading", "data", "disablePaging", "rowClickable", "imageResolver"], outputs: ["pageChange", "rowClick", "actionClick", "cellChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StandardTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-table', standalone: true, imports: [CommonModule, UiTableComponent], template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n" }]
+            args: [{ selector: 'app-card-table', standalone: true, imports: [CommonModule, UiTableComponent], template: "<section class=\"space-y-4\">\n  @if (headerActions().length) {\n    <div class=\"flex justify-end gap-2\">\n      @for (action of headerActions(); track action.id) {\n        <button type=\"button\" class=\"rounded-lg border border-slate-200 px-3 py-1.5 text-sm\" (click)=\"onHeaderAction(action)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  <app-ui-table\n    [data]=\"tableData()\"\n    [columns]=\"columns()\"\n    [pageSizeOptions]=\"pageSizeOptionsSignal()\"\n    [isLoading]=\"isLoading()\"\n    [disablePaging]=\"disablePaging\"\n    (pageChange)=\"onPageChange($event)\"\n    (actionClick)=\"onAction($event)\"\n    (cellChange)=\"onCellChange($event)\"\n  ></app-ui-table>\n</section>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -768,6 +752,7 @@ function normalizeTableResponse(response) {
             size: raw['size'] ?? source.pagination?.size,
             total: raw['total'] ?? source.pagination?.total,
             totalElements: raw['total'] ?? source.pagination?.totalElements,
+            sizes: source.pagination?.sizes,
         },
     };
 }
@@ -837,11 +822,11 @@ class UiCardPanelsLayoutComponent {
         return found.resolveInputs(tab, this.data());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardPanelsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardPanelsLayoutComponent, isStandalone: true, selector: "app-ui-card-panels-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => StandardTableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardPanelsLayoutComponent, isStandalone: true, selector: "app-ui-card-panels-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.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, StandardTableComponent], template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n" }]
+            args: [{ selector: 'app-ui-card-panels-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, DetailsGridComponent, ImagesComponent, TableComponent], template: "@if (tabs().length) {\n  <div class=\"grid grid-cols-1 gap-4 md:grid-cols-12\">\n      @for (tab of tabs(); track tab.id) {\n        <section\n          [class.rounded-3xl]=\"!embedded()\"\n          [class.border]=\"!embedded()\"\n          [class.border-slate-200]=\"!embedded()\"\n          [class.bg-white]=\"!embedded()\"\n          [class.p-6]=\"!embedded()\"\n          [class.min-w-0]=\"embedded()\"\n          [ngClass]=\"getColSpanClass(tab)\"\n          [attr.data-card-panel-id]=\"tab.id\"\n        >\n          @if (shouldShowPanelHeader(tab)) {\n            <app-card-section-header\n              [data]=\"data()\"\n              [title]=\"tab.title\"\n              [actions]=\"getVisibleActions(tab)\"\n            ></app-card-section-header>\n          }\n\n          @if (getNestedCardConfig(tab); as nestedCard) {\n            <app-card [tabs]=\"nestedCard.tabs\" [data]=\"data()\" [layout]=\"nestedCard.layout\"></app-card>\n          } @else if (getNestedPanels(tab); as nestedPanels) {\n            <app-card [tabs]=\"nestedPanels\" [data]=\"data()\" layout=\"panels\" [embedded]=\"true\"></app-card>\n          } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'images') {\n          <app-images [config]=\"tab\" [data]=\"data()\"></app-images>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n        </section>\n      }\n  </div>\n}\n" }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }] } });
 
 class UiCardTabsLayoutComponent {
@@ -907,11 +892,11 @@ class UiCardTabsLayoutComponent {
         return found.resolveInputs(tab, this.data());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardTabsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardTabsLayoutComponent, isStandalone: true, selector: "app-ui-card-tabs-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => StandardTableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiCardTabsLayoutComponent, isStandalone: true, selector: "app-ui-card-tabs-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i0.forwardRef(() => CardComponent), selector: "app-card", inputs: ["tabs", "data", "layout", "embedded"] }, { kind: "component", type: i0.forwardRef(() => CardSectionHeaderComponent), selector: "app-card-section-header", inputs: ["variant", "title", "actions", "data"] }, { kind: "component", type: i0.forwardRef(() => CardHtmlTabComponent), selector: "app-card-html-tab", inputs: ["html"] }, { kind: "component", type: i0.forwardRef(() => ImagesComponent), selector: "app-images", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => DetailsGridComponent), selector: "app-details-grid", inputs: ["config", "data"] }, { kind: "component", type: i0.forwardRef(() => TableComponent), selector: "app-card-table", inputs: ["config", "data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiCardTabsLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ui-card-tabs-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, ImagesComponent, DetailsGridComponent, StandardTableComponent], template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n" }]
+            args: [{ selector: 'app-ui-card-tabs-layout', standalone: true, imports: [CommonModule, forwardRef(() => CardComponent), CardSectionHeaderComponent, CardHtmlTabComponent, ImagesComponent, DetailsGridComponent, TableComponent], template: "@if (tabs().length) {\n  <section class=\"space-y-4\">\n    <nav class=\"flex flex-wrap gap-2\" aria-label=\"Card tabs\">\n      @for (tab of tabs(); track tab.id) {\n        <button\n          type=\"button\"\n          class=\"rounded-xl border px-4 py-2 text-sm font-medium transition\"\n          [class.border-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.bg-slate-900]=\"activeTab()?.id === tab.id\"\n          [class.text-white]=\"activeTab()?.id === tab.id\"\n          [class.border-slate-200]=\"activeTab()?.id !== tab.id\"\n          [class.bg-white]=\"activeTab()?.id !== tab.id\"\n          [class.text-slate-700]=\"activeTab()?.id !== tab.id\"\n          (click)=\"setActiveTab(tab.id)\"\n        >\n          {{ tab.title }}\n        </button>\n      }\n    </nav>\n\n    @if (activeTab(); as tab) {\n      <section\n        [attr.data-card-tab-id]=\"tab.id\"\n      >\n        @if (getVisibleActions(tab).length) {\n          <app-card-section-header\n            variant=\"tabs\"\n            [data]=\"data()\"\n            [actions]=\"getVisibleActions(tab)\"\n          ></app-card-section-header>\n        }\n\n        @if (tab.tabs?.length) {\n          <app-card [tabs]=\"tab.tabs || []\" [data]=\"data()\" [layout]=\"tab.layout || 'panels'\"></app-card>\n        } @else if (tab.component === 'images') {\n          <app-images\n            [config]=\"tab\"\n            [data]=\"data()\"\n          ></app-images>\n        } @else if (tab.component === 'detailsGrid') {\n          <app-details-grid [config]=\"tab\" [data]=\"data()\"></app-details-grid>\n        } @else if (tab.component === 'table') {\n          <app-card-table [config]=\"tab\" [data]=\"data()\"></app-card-table>\n        } @else if (tab.component === 'html') {\n          <app-card-html-tab [html]=\"tab.html || ''\"></app-card-html-tab>\n        } @else if (getRegisteredComponent(tab); as customComponent) {\n          <ng-container *ngComponentOutlet=\"customComponent; inputs: getRegisteredInputs(tab)\"></ng-container>\n        }\n      </section>\n    }\n  </section>\n}\n" }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class CardComponent {
@@ -1602,5 +1587,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CARD_ACTION_COMPLETED, CARD_ACTION_FINISHED, CARD_ACTION_REQUESTED, CARD_ACTION_STARTED, CardComponent, CardCurrentUserService, CardDictionaryService, CardImageService, CardSectionHeaderComponent, DocumentsComponent, ENTITY_UPDATED, HistoryTabComponent, ImagesViewerComponent, StandardTableComponent, UI_CARD_API_BASE_URL, UI_CARD_TAB_REGISTRY, UI_ENTITY_CARD_HOST, UiEntityDocumentsService, cardApiParams, cardApiResourceUrl, normalizeCardConfig, resolveCardConfig };
+export { CARD_ACTION_COMPLETED, CARD_ACTION_FINISHED, CARD_ACTION_REQUESTED, CARD_ACTION_STARTED, CardComponent, CardCurrentUserService, CardDictionaryService, CardImageService, CardSectionHeaderComponent, DocumentsComponent, ENTITY_UPDATED, HistoryTabComponent, ImagesViewerComponent, TableComponent, UI_CARD_API_BASE_URL, UI_CARD_TAB_REGISTRY, UI_ENTITY_CARD_HOST, UiEntityDocumentsService, cardApiParams, cardApiResourceUrl, normalizeCardConfig, resolveCardConfig };
 //# sourceMappingURL=maro-tech-card.mjs.map