@masterteam/components 0.0.114 → 0.0.116

package/fesm2022/masterteam-components-entities.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, inject, ElementRef, NgZone, output, signal, Directive, model } from '@angular/core';
-import { HttpContext } from '@angular/common/http';
+import { input, computed, Component, inject, signal, effect, ElementRef, NgZone, output, Directive, model } from '@angular/core';
+import { HttpContext, HttpClient } from '@angular/common/http';
 import { Avatar } from '@masterteam/components/avatar';
 import { Button } from '@masterteam/components/button';
 import { SecureImagePipe, UploadField } from '@masterteam/components/upload-field';
@@ -8,6 +8,7 @@ import { REQUEST_CONTEXT } from '@masterteam/components';
 import { Progress } from '@masterteam/components/progress';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { forkJoin, finalize, of, take, switchMap, EMPTY, map, catchError } from 'rxjs';
 import { CdkDrag, CdkDropList, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 import { DOCUMENT } from '@angular/common';
 
@@ -163,28 +164,36 @@ class EntityPercentage {
         }
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    rawNumericValue = computed(() => this.data()?.rawValue ?? this.rawValue() ?? this.value(), ...(ngDevMode ? [{ debugName: "rawNumericValue" }] : []));
+    rawNumericValue = computed(() => this.data()?.rawValue ??
+        this.rawValue() ??
+        this.value() ??
+        this.displayValue(), ...(ngDevMode ? [{ debugName: "rawNumericValue" }] : []));
     hasNumericValue = computed(() => {
-        const raw = this.rawNumericValue();
-        if (isValueMissing(raw)) {
-            return false;
-        }
-        return !Number.isNaN(parseFloat(String(raw)));
+        return this.parseNumericValue(this.rawNumericValue()) !== null;
     }, ...(ngDevMode ? [{ debugName: "hasNumericValue" }] : []));
     numericValue = computed(() => {
-        const raw = this.rawNumericValue();
-        const num = parseFloat(raw ?? '0');
-        return isNaN(num) ? 0 : Math.min(num, 100);
+        const num = this.parseNumericValue(this.rawNumericValue());
+        return num === null ? 0 : Math.min(num, 100);
     }, ...(ngDevMode ? [{ debugName: "numericValue" }] : []));
     maxValue = computed(() => {
-        const raw = this.rawNumericValue();
-        const num = parseFloat(raw ?? '0');
-        if (isNaN(num))
+        const num = this.parseNumericValue(this.rawNumericValue());
+        if (num === null)
             return 100;
         return num > 100 ? Math.ceil(num) : 100;
     }, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
     // ── Configuration-driven visibility ──
     hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
+    parseNumericValue(raw) {
+        if (isValueMissing(raw)) {
+            return null;
+        }
+        const normalizedRawValue = String(raw).replace(/%/g, '').trim();
+        if (!normalizedRawValue) {
+            return null;
+        }
+        const numericValue = Number.parseFloat(normalizedRawValue);
+        return Number.isNaN(numericValue) ? null : numericValue;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPercentage, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPercentage, isStandalone: true, selector: "mt-entity-percentage", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\r\n  <div class=\"flex items-center justify-between\">\r\n    @if (!hideName()) {\r\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n    }\r\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\r\n      displayValue()\r\n    }}</span>\r\n  </div>\r\n  @if (hasNumericValue()) {\r\n    <mt-progress\r\n      [value]=\"numericValue()\"\r\n      [showLabel]=\"false\"\r\n      [height]=\"9\"\r\n      [maxValue]=\"maxValue()\"\r\n    >\r\n    </mt-progress>\r\n  } @else {\r\n    <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }] });
 }
@@ -329,35 +338,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class EntityAttachment {
     data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
     name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    shape = input('default', ...(ngDevMode ? [{ debugName: "shape" }] : []));
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    endPoint = input('uploader', ...(ngDevMode ? [{ debugName: "endPoint" }] : []));
+    context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    httpClient = inject(HttpClient);
     displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
     hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
+    attachmentReferences = computed(() => this.normalizeAttachmentValue(this.data()?.value ?? this.value()), ...(ngDevMode ? [{ debugName: "attachmentReferences" }] : []));
     uploadValue = computed(() => {
-        const value = this.data()?.value ?? this.value();
-        if (Array.isArray(value)) {
-            return value.filter((item) => item != null);
+        const references = this.attachmentReferences().map((reference) => {
+            if (typeof reference === 'string') {
+                return reference.trim();
+            }
+            if (reference.fileName) {
+                return reference;
+            }
+            return reference.id?.trim() || reference;
+        });
+        if (!references.length) {
+            return null;
         }
-        return value ?? null;
+        return references.length === 1 ? references[0] : references;
     }, ...(ngDevMode ? [{ debugName: "uploadValue" }] : []));
-    hasAttachments = computed(() => {
-        const value = this.uploadValue();
-        return Array.isArray(value) ? value.length > 0 : !!value;
-    }, ...(ngDevMode ? [{ debugName: "hasAttachments" }] : []));
-    isMultiple = computed(() => Array.isArray(this.uploadValue()), ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
+    hasAttachments = computed(() => this.shape() === 'compact'
+        ? this.attachments().length > 0
+        : this.uploadValue() != null, ...(ngDevMode ? [{ debugName: "hasAttachments" }] : []));
+    isMultiple = computed(() => this.attachmentReferences().length > 1, ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
     empty = '-';
+    constructor() {
+        effect((onCleanup) => {
+            if (this.shape() !== 'compact') {
+                this.loading.set(false);
+                this.attachments.set([]);
+                return;
+            }
+            const references = this.attachmentReferences();
+            if (!references.length) {
+                this.loading.set(false);
+                this.attachments.set([]);
+                return;
+            }
+            const shouldFetchMetadata = references.some((reference) => this.requiresMetadataRequest(reference));
+            if (!shouldFetchMetadata) {
+                this.attachments.set(references.filter(this.isAttachmentItemValue).map((reference) => ({
+                    ...reference,
+                    name: reference.name ??
+                        reference.fileName ??
+                        reference.id ??
+                        reference.name,
+                    extension: this.resolveExtension(reference),
+                })));
+                this.loading.set(false);
+                return;
+            }
+            this.loading.set(true);
+            const sub = forkJoin(references.map((reference) => this.resolveAttachment$(reference)))
+                .pipe(finalize(() => this.loading.set(false)))
+                .subscribe((attachments) => {
+                this.attachments.set(attachments.filter((attachment) => attachment != null));
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
+    }
+    attachmentTrackBy(index, attachment) {
+        return (attachment.id ?? attachment.fileName ?? attachment.name ?? String(index));
+    }
+    attachmentTooltip(attachment) {
+        return (attachment.name ?? attachment.fileName ?? attachment.id ?? 'Attachment');
+    }
+    attachmentIcon(attachment) {
+        const extension = this.resolveExtension(attachment);
+        const contentType = attachment.contentType?.toLowerCase() ?? '';
+        if (contentType.startsWith('image/')) {
+            return 'image.image-03';
+        }
+        switch (extension) {
+            case '.pdf':
+                return 'file.file-06';
+            case '.doc':
+            case '.docx':
+            case '.txt':
+            case '.rtf':
+                return 'file.file-04';
+            case '.xls':
+            case '.xlsx':
+            case '.csv':
+                return 'file.file-03';
+            case '.ppt':
+            case '.pptx':
+                return 'file.file-05';
+            default:
+                return 'file.clipboard-attachment';
+        }
+    }
+    onCompactAttachmentClick(event, attachment) {
+        event.stopPropagation();
+        this.downloadAttachment(attachment);
+    }
+    downloadAttachment(attachment) {
+        const resolvedAttachment$ = this.requiresMetadataRequest(attachment)
+            ? this.resolveAttachment$(attachment)
+            : of(this.normalizeAttachmentItem(attachment));
+        resolvedAttachment$
+            .pipe(take(1), switchMap((resolvedAttachment) => {
+            if (!resolvedAttachment?.fileName) {
+                return EMPTY;
+            }
+            return this.httpClient
+                .get(`${this.endPoint()}/${resolvedAttachment.fileName}`, {
+                responseType: 'blob',
+                context: this.context(),
+            })
+                .pipe(take(1), map((blob) => ({
+                attachment: resolvedAttachment,
+                blob,
+            })));
+        }))
+            .subscribe(({ attachment, blob }) => {
+            const downloadBlob = new Blob([blob], {
+                type: attachment.contentType || blob.type || 'application/octet-stream',
+            });
+            const objectUrl = window.URL.createObjectURL(downloadBlob);
+            const anchor = document.createElement('a');
+            anchor.href = objectUrl;
+            anchor.download =
+                attachment.name ??
+                    attachment.fileName ??
+                    attachment.id ??
+                    'attachment';
+            anchor.click();
+            window.URL.revokeObjectURL(objectUrl);
+        });
+    }
+    resolveAttachment$(reference) {
+        const normalizedAttachment = this.normalizeAttachmentItem(reference);
+        if (!this.requiresMetadataRequest(reference)) {
+            return of(normalizedAttachment);
+        }
+        const attachmentId = typeof reference === 'string' ? reference.trim() : reference.id?.trim();
+        if (!attachmentId) {
+            return of(normalizedAttachment);
+        }
+        return this.httpClient
+            .get(`${this.endPoint()}/${attachmentId}/metaData`, {
+            context: this.context(),
+        })
+            .pipe(take(1), map((response) => this.normalizeAttachmentItem(response.data)), catchError(() => of(normalizedAttachment)));
+    }
+    normalizeAttachmentValue(value) {
+        if (value === null || value === undefined) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            return value.flatMap((item) => this.normalizeAttachmentValue(item));
+        }
+        if (typeof value === 'string') {
+            const trimmedValue = value.trim();
+            if (!trimmedValue || trimmedValue === '[]') {
+                return [];
+            }
+            if ((trimmedValue.startsWith('[') && trimmedValue.endsWith(']')) ||
+                (trimmedValue.startsWith('{') && trimmedValue.endsWith('}'))) {
+                try {
+                    return this.normalizeAttachmentValue(JSON.parse(trimmedValue));
+                }
+                catch {
+                    return [trimmedValue];
+                }
+            }
+            return [trimmedValue];
+        }
+        if (typeof value === 'object') {
+            return [value];
+        }
+        return [];
+    }
+    normalizeAttachmentItem(value) {
+        if (!value) {
+            return null;
+        }
+        if (typeof value === 'string') {
+            const trimmedValue = value.trim();
+            return trimmedValue
+                ? {
+                    id: trimmedValue,
+                    name: trimmedValue,
+                }
+                : null;
+        }
+        const normalizedAttachment = {
+            ...value,
+            name: value.name ?? value.fileName ?? value.id ?? '',
+            extension: this.resolveExtension(value),
+        };
+        return normalizedAttachment.name ||
+            normalizedAttachment.fileName ||
+            normalizedAttachment.id
+            ? normalizedAttachment
+            : null;
+    }
+    requiresMetadataRequest(reference) {
+        if (typeof reference === 'string') {
+            return reference.trim().length > 0;
+        }
+        return !!reference.id?.trim() && !reference.fileName;
+    }
+    isAttachmentItemValue(reference) {
+        return typeof reference === 'object' && reference != null;
+    }
+    resolveExtension(value) {
+        const explicitExtension = value.extension?.trim();
+        if (explicitExtension) {
+            return explicitExtension.startsWith('.')
+                ? explicitExtension.toLowerCase()
+                : `.${explicitExtension.toLowerCase()}`;
+        }
+        const fileName = value.fileName ?? value.name;
+        if (!fileName || !fileName.includes('.')) {
+            return undefined;
+        }
+        return `.${fileName.split('.').pop().toLowerCase()}`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-2\">\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n\r\n  @if (hasAttachments()) {\r\n    <mt-upload-field\r\n      class=\"w-full\"\r\n      [ngModel]=\"uploadValue()\"\r\n      [ngModelOptions]=\"{ standalone: true }\"\r\n      [shape]=\"'card'\"\r\n      [multiple]=\"isMultiple()\"\r\n      [readonly]=\"true\"\r\n    />\r\n  } @else {\r\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-2\">\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n\r\n  @if (hasAttachments()) {\r\n    @if (shape() === \"compact\") {\r\n      <div class=\"flex flex-wrap items-center gap-2\">\r\n        @for (\r\n          attachment of attachments();\r\n          track attachmentTrackBy($index, attachment)\r\n        ) {\r\n          <mt-button\r\n            iconPos=\"top\"\r\n            size=\"small\"\r\n            severity=\"secondary\"\r\n            variant=\"outlined\"\r\n            [icon]=\"attachmentIcon(attachment)\"\r\n            [tooltip]=\"attachmentTooltip(attachment)\"\r\n            styleClass=\"h-9! w-9! rounded-lg!\"\r\n            (onClick)=\"onCompactAttachmentClick($event, attachment)\"\r\n          />\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mt-upload-field\r\n        class=\"w-full\"\r\n        [ngModel]=\"uploadValue()\"\r\n        [ngModelOptions]=\"{ standalone: true }\"\r\n        [shape]=\"'card'\"\r\n        [multiple]=\"isMultiple()\"\r\n        [readonly]=\"true\"\r\n        [endPoint]=\"endPoint()\"\r\n        [context]=\"context()\"\r\n      />\r\n    }\r\n  } @else {\r\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField], template: "<div class=\"flex w-full flex-col gap-2\">\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n\r\n  @if (hasAttachments()) {\r\n    <mt-upload-field\r\n      class=\"w-full\"\r\n      [ngModel]=\"uploadValue()\"\r\n      [ngModelOptions]=\"{ standalone: true }\"\r\n      [shape]=\"'card'\"\r\n      [multiple]=\"isMultiple()\"\r\n      [readonly]=\"true\"\r\n    />\r\n  } @else {\r\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n  }\r\n</div>\r\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+            args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField, Button], template: "<div class=\"flex w-full flex-col gap-2\">\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n\r\n  @if (hasAttachments()) {\r\n    @if (shape() === \"compact\") {\r\n      <div class=\"flex flex-wrap items-center gap-2\">\r\n        @for (\r\n          attachment of attachments();\r\n          track attachmentTrackBy($index, attachment)\r\n        ) {\r\n          <mt-button\r\n            iconPos=\"top\"\r\n            size=\"small\"\r\n            severity=\"secondary\"\r\n            variant=\"outlined\"\r\n            [icon]=\"attachmentIcon(attachment)\"\r\n            [tooltip]=\"attachmentTooltip(attachment)\"\r\n            styleClass=\"h-9! w-9! rounded-lg!\"\r\n            (onClick)=\"onCompactAttachmentClick($event, attachment)\"\r\n          />\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mt-upload-field\r\n        class=\"w-full\"\r\n        [ngModel]=\"uploadValue()\"\r\n        [ngModelOptions]=\"{ standalone: true }\"\r\n        [shape]=\"'card'\"\r\n        [multiple]=\"isMultiple()\"\r\n        [readonly]=\"true\"\r\n        [endPoint]=\"endPoint()\"\r\n        [context]=\"context()\"\r\n      />\r\n    }\r\n  } @else {\r\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], endPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPoint", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 class EntityPreview {
     /** Single entity data to display */
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (data().viewType) {\r\n  @case (\"Text\") {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n  @case (\"LongText\") {\r\n    <mt-entity-long-text [data]=\"data()\" />\r\n  }\r\n  @case (\"Date\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"DateTime\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"User\") {\r\n    <mt-entity-user [data]=\"data()\" />\r\n  }\r\n  @case (\"Percentage\") {\r\n    <mt-entity-percentage [data]=\"data()\" />\r\n  }\r\n  @case (\"Currency\") {\r\n    <mt-entity-currency [data]=\"data()\" />\r\n  }\r\n  @case (\"Checkbox\") {\r\n    <mt-entity-checkbox [data]=\"data()\" />\r\n  }\r\n  @case (\"Lookup\") {\r\n    <mt-entity-lookup [data]=\"data()\" />\r\n  }\r\n  @case (\"Attachment\") {\r\n    <mt-entity-attachment [data]=\"data()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: EntityText, selector: "mt-entity-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLongText, selector: "mt-entity-long-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityDate, selector: "mt-entity-date", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityLookup, selector: "mt-entity-lookup", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityAttachment, selector: "mt-entity-attachment", inputs: ["data", "name", "value"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (data().viewType) {\r\n  @case (\"Text\") {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n  @case (\"LongText\") {\r\n    <mt-entity-long-text [data]=\"data()\" />\r\n  }\r\n  @case (\"Date\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"DateTime\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"User\") {\r\n    <mt-entity-user [data]=\"data()\" />\r\n  }\r\n  @case (\"Percentage\") {\r\n    <mt-entity-percentage [data]=\"data()\" />\r\n  }\r\n  @case (\"Currency\") {\r\n    <mt-entity-currency [data]=\"data()\" />\r\n  }\r\n  @case (\"Checkbox\") {\r\n    <mt-entity-checkbox [data]=\"data()\" />\r\n  }\r\n  @case (\"Lookup\") {\r\n    <mt-entity-lookup [data]=\"data()\" />\r\n  }\r\n  @case (\"Attachment\") {\r\n    <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: EntityText, selector: "mt-entity-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLongText, selector: "mt-entity-long-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityDate, selector: "mt-entity-date", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityLookup, selector: "mt-entity-lookup", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityAttachment, selector: "mt-entity-attachment", inputs: ["data", "name", "shape", "value", "endPoint", "context"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, decorators: [{
             type: Component,
@@ -374,12 +592,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         EntityAttachment,
                     ], host: {
                         class: 'w-full',
-                    }, template: "@switch (data().viewType) {\r\n  @case (\"Text\") {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n  @case (\"LongText\") {\r\n    <mt-entity-long-text [data]=\"data()\" />\r\n  }\r\n  @case (\"Date\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"DateTime\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"User\") {\r\n    <mt-entity-user [data]=\"data()\" />\r\n  }\r\n  @case (\"Percentage\") {\r\n    <mt-entity-percentage [data]=\"data()\" />\r\n  }\r\n  @case (\"Currency\") {\r\n    <mt-entity-currency [data]=\"data()\" />\r\n  }\r\n  @case (\"Checkbox\") {\r\n    <mt-entity-checkbox [data]=\"data()\" />\r\n  }\r\n  @case (\"Lookup\") {\r\n    <mt-entity-lookup [data]=\"data()\" />\r\n  }\r\n  @case (\"Attachment\") {\r\n    <mt-entity-attachment [data]=\"data()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+                    }, template: "@switch (data().viewType) {\r\n  @case (\"Text\") {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n  @case (\"LongText\") {\r\n    <mt-entity-long-text [data]=\"data()\" />\r\n  }\r\n  @case (\"Date\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"DateTime\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"User\") {\r\n    <mt-entity-user [data]=\"data()\" />\r\n  }\r\n  @case (\"Percentage\") {\r\n    <mt-entity-percentage [data]=\"data()\" />\r\n  }\r\n  @case (\"Currency\") {\r\n    <mt-entity-currency [data]=\"data()\" />\r\n  }\r\n  @case (\"Checkbox\") {\r\n    <mt-entity-checkbox [data]=\"data()\" />\r\n  }\r\n  @case (\"Lookup\") {\r\n    <mt-entity-lookup [data]=\"data()\" />\r\n  }\r\n  @case (\"Attachment\") {\r\n    <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
 
 class EntitiesPreview {
     /** Array of entity data to display */
     entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : []));
+    attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : []));
     /** Entities sorted by order */
     sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : []));
     /** Returns the grid-column span for a given entity size (1-24) */
@@ -388,12 +607,12 @@ class EntitiesPreview {
         return `span ${size}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-7\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview [data]=\"entity\" />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-7\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        [attachmentShape]=\"attachmentShape()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-7\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview [data]=\"entity\" />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
-        }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }] } });
+            args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-7\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        [attachmentShape]=\"attachmentShape()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
 
 /**
  * Base class that encapsulates all entity resize-via-drag logic.
@@ -557,7 +776,7 @@ class EntitiesManage extends EntitiesResizeBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"sortedEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-24 gap-x-4 gap-y-7\"\r\n>\r\n  @for (entity of sortedEntities(); track entity.order) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"sortedEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-24 gap-x-4 gap-y-7\"\r\n>\r\n  @for (entity of sortedEntities(); track entity.order) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, decorators: [{
             type: Component,