@maro-tech/card 0.2.9 → 0.2.10

package/fesm2022/maro-tech-card.mjs

@@ -6,12 +6,12 @@ import { input, inject, DestroyRef, signal, Component, computed, viewChild, view
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { EventBus, UiButtonComponent, UiToastService, UiModalComponent, UiConfirmService } from '@maro-tech/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { RouterLink, ActivatedRoute, Router } from '@angular/router';
 import Panzoom from '@panzoom/panzoom';
 import { LucideDownload, LucideDynamicIcon, LucideEye, LucideFileText, LucidePlus, LucideSparkles, LucideTrash } from '@lucide/angular';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { map, shareReplay, forkJoin, switchMap, timer, of } from 'rxjs';
 import { UiTableComponent, UiPaginatorComponent } from '@maro-tech/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { map as map$1, exhaustMap, catchError, takeWhile, takeUntil, finalize } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -486,6 +486,7 @@ class DetailsGridComponent {
         ...field,
         displayValue: this.formatFieldValue(field),
         imageSrc: this.getImageSrc(field),
+        linkUrl: this.getLinkUrl(field),
     })), ...(ngDevMode ? [{ debugName: "displayFields" }] : /* istanbul ignore next */ []));
     selectedImageSrc = signal(null, ...(ngDevMode ? [{ debugName: "selectedImageSrc" }] : /* istanbul ignore next */ []));
     openViewer(imageSrc) {
@@ -560,6 +561,20 @@ class DetailsGridComponent {
         }
         return raw;
     }
+    getLinkUrl(field) {
+        if (field.type !== 'link' || !field.link)
+            return null;
+        const data = this.data() || {};
+        const url = field.link.replace(/\{\{([a-zA-Z0-9_.-]+)\}\}/g, (_match, key) => {
+            const value = key.split('.').reduce((current, segment) => {
+                if (current == null || typeof current !== 'object')
+                    return undefined;
+                return current[segment];
+            }, data);
+            return encodeURIComponent(String(value ?? ''));
+        }).trim();
+        return url && url !== '/' && !url.endsWith('/') ? url : null;
+    }
     getImageSrc(field) {
         if (field.type !== 'image')
             return null;
@@ -591,11 +606,11 @@ class DetailsGridComponent {
             : { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DetailsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DetailsGridComponent, isStandalone: true, selector: "app-details-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DetailsGridComponent, isStandalone: true, selector: "app-details-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else if (field.type === 'link' && field.linkUrl) {\n        <a class=\"mt-2 inline-block text-base font-semibold text-sky-800 underline\" [routerLink]=\"field.linkUrl\">{{ field.displayValue === '-' ? field.label : field.displayValue }}</a>\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DetailsGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-details-grid', standalone: true, imports: [CommonModule, ImagesViewerComponent], template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n" }]
+            args: [{ selector: 'app-details-grid', standalone: true, imports: [CommonModule, ImagesViewerComponent, RouterLink], template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else if (field.type === 'link' && field.linkUrl) {\n        <a class=\"mt-2 inline-block text-base font-semibold text-sky-800 underline\" [routerLink]=\"field.linkUrl\">{{ field.displayValue === '-' ? field.label : field.displayValue }}</a>\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class ImagesComponent {