@masterteam/components 0.0.148 → 0.0.150

package/fesm2022/masterteam-components-entities.mjs

@@ -880,20 +880,19 @@ function buildDisplayEntities(entities) {
         .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 }
 
-class EntityPreview {
-    /** Single entity data to display */
+class EntityPreviewBody {
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : /* istanbul ignore next */ []));
     previewType = computed(() => {
         const viewType = this.data().viewType;
         return viewType === 'LookupMatrix' ? 'Lookup' : viewType;
     }, ...(ngDevMode ? [{ debugName: "previewType" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 (previewType()) {\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()\" [viewType]=\"'DateTime'\" />\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 (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"Attachment\") {\r\n    <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n  }\r\n  @case (\"LeafDetails\") {\r\n    <mt-entity-leaf-details [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", "viewType"] }, { 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"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLeafDetails, selector: "mt-entity-leaf-details", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreviewBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPreviewBody, isStandalone: true, selector: "mt-entity-preview-body", 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 (previewType()) {\n  @case (\"Text\") {\n    <mt-entity-text [data]=\"data()\" />\n  }\n  @case (\"LongText\") {\n    <mt-entity-long-text [data]=\"data()\" />\n  }\n  @case (\"Date\") {\n    <mt-entity-date [data]=\"data()\" />\n  }\n  @case (\"DateTime\") {\n    <mt-entity-date [data]=\"data()\" [viewType]=\"'DateTime'\" />\n  }\n  @case (\"User\") {\n    <mt-entity-user [data]=\"data()\" />\n  }\n  @case (\"Percentage\") {\n    <mt-entity-percentage [data]=\"data()\" />\n  }\n  @case (\"Currency\") {\n    <mt-entity-currency [data]=\"data()\" />\n  }\n  @case (\"Checkbox\") {\n    <mt-entity-checkbox [data]=\"data()\" />\n  }\n  @case (\"Lookup\") {\n    <mt-entity-lookup [data]=\"data()\" />\n  }\n  @case (\"Status\") {\n    <mt-entity-status [data]=\"data()\" />\n  }\n  @case (\"Attachment\") {\n    <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\n  }\n  @case (\"LeafDetails\") {\n    <mt-entity-leaf-details [data]=\"data()\" />\n  }\n  @default {\n    <mt-entity-text [data]=\"data()\" />\n  }\n}\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", "viewType"] }, { 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"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLeafDetails, selector: "mt-entity-leaf-details", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreview, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreviewBody, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'mt-entity-preview-body', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         EntityText,
                         EntityLongText,
                         EntityDate,
@@ -907,7 +906,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         EntityLeafDetails,
                     ], host: {
                         class: 'w-full',
-                    }, template: "@switch (previewType()) {\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()\" [viewType]=\"'DateTime'\" />\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 (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"Attachment\") {\r\n    <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n  }\r\n  @case (\"LeafDetails\") {\r\n    <mt-entity-leaf-details [data]=\"data()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n" }]
+                    }, template: "@switch (previewType()) {\n  @case (\"Text\") {\n    <mt-entity-text [data]=\"data()\" />\n  }\n  @case (\"LongText\") {\n    <mt-entity-long-text [data]=\"data()\" />\n  }\n  @case (\"Date\") {\n    <mt-entity-date [data]=\"data()\" />\n  }\n  @case (\"DateTime\") {\n    <mt-entity-date [data]=\"data()\" [viewType]=\"'DateTime'\" />\n  }\n  @case (\"User\") {\n    <mt-entity-user [data]=\"data()\" />\n  }\n  @case (\"Percentage\") {\n    <mt-entity-percentage [data]=\"data()\" />\n  }\n  @case (\"Currency\") {\n    <mt-entity-currency [data]=\"data()\" />\n  }\n  @case (\"Checkbox\") {\n    <mt-entity-checkbox [data]=\"data()\" />\n  }\n  @case (\"Lookup\") {\n    <mt-entity-lookup [data]=\"data()\" />\n  }\n  @case (\"Status\") {\n    <mt-entity-status [data]=\"data()\" />\n  }\n  @case (\"Attachment\") {\n    <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\n  }\n  @case (\"LeafDetails\") {\n    <mt-entity-leaf-details [data]=\"data()\" />\n  }\n  @default {\n    <mt-entity-text [data]=\"data()\" />\n  }\n}\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 ComparisonValue {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    comparison = computed(() => {
+        const c = this.data().comparison;
+        return c?.kind === 'Value' ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "comparison" }] : /* istanbul ignore next */ []));
+    oldEntity = computed(() => this.buildSide(this.comparison()?.oldValue), ...(ngDevMode ? [{ debugName: "oldEntity" }] : /* istanbul ignore next */ []));
+    newEntity = computed(() => this.buildSide(this.comparison()?.newValue), ...(ngDevMode ? [{ debugName: "newEntity" }] : /* istanbul ignore next */ []));
+    buildSide(side) {
+        if (!side)
+            return null;
+        const base = this.data();
+        return {
+            ...base,
+            rawValue: side.raw === null || side.raw === undefined
+                ? undefined
+                : String(side.raw),
+            value: (side.display ?? side.value ?? ''),
+            comparison: undefined,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ComparisonValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ComparisonValue, isStandalone: true, selector: "mt-comparison-value", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (comparison(); as cmp) {\n  <div class=\"flex w-full min-w-0 items-stretch gap-3\">\n    <div\n      class=\"flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\n    >\n      <span class=\"text-xs font-medium uppercase tracking-wide text-muted-color\"\n        >Before</span\n      >\n      @if (oldEntity(); as old) {\n        <mt-entity-preview-body [data]=\"old\" />\n      } @else {\n        <span class=\"text-sm text-muted-color\">_</span>\n      }\n    </div>\n    <div class=\"flex shrink-0 items-center text-muted-color\" aria-hidden=\"true\">\n      &rarr;\n    </div>\n    <div\n      class=\"flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-primary-200 bg-primary-50 px-3 py-2\"\n    >\n      <span class=\"text-xs font-medium uppercase tracking-wide text-primary-600\"\n        >After</span\n      >\n      @if (newEntity(); as next) {\n        <mt-entity-preview-body [data]=\"next\" />\n      } @else {\n        <span class=\"text-sm text-muted-color\">_</span>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: EntityPreviewBody, selector: "mt-entity-preview-body", inputs: ["data", "attachmentShape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ComparisonValue, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-comparison-value', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EntityPreviewBody], host: {
+                        class: 'block w-full',
+                    }, template: "@if (comparison(); as cmp) {\n  <div class=\"flex w-full min-w-0 items-stretch gap-3\">\n    <div\n      class=\"flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\n    >\n      <span class=\"text-xs font-medium uppercase tracking-wide text-muted-color\"\n        >Before</span\n      >\n      @if (oldEntity(); as old) {\n        <mt-entity-preview-body [data]=\"old\" />\n      } @else {\n        <span class=\"text-sm text-muted-color\">_</span>\n      }\n    </div>\n    <div class=\"flex shrink-0 items-center text-muted-color\" aria-hidden=\"true\">\n      &rarr;\n    </div>\n    <div\n      class=\"flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-primary-200 bg-primary-50 px-3 py-2\"\n    >\n      <span class=\"text-xs font-medium uppercase tracking-wide text-primary-600\"\n        >After</span\n      >\n      @if (newEntity(); as next) {\n        <mt-entity-preview-body [data]=\"next\" />\n      } @else {\n        <span class=\"text-sm text-muted-color\">_</span>\n      }\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+const OPERATION_BADGES = {
+    CreateRecord: {
+        label: 'Added',
+        classes: 'bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200',
+    },
+    UpdateRecord: {
+        label: 'Updated',
+        classes: 'bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200',
+    },
+    DeleteRecord: {
+        label: 'Removed',
+        classes: 'bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-200',
+    },
+};
+class ComparisonEntityList {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    comparison = computed(() => {
+        const c = this.data().comparison;
+        return c?.kind === 'EntityList' ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "comparison" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.comparison()?.rows ?? [], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    targetModuleKey = computed(() => this.comparison()?.targetModuleKey ?? '', ...(ngDevMode ? [{ debugName: "targetModuleKey" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.data().name ?? '', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    badgeFor(op) {
+        return OPERATION_BADGES[op];
+    }
+    displayField(value, display) {
+        if (display && display.trim().length > 0)
+            return display;
+        return displayOrPlaceholder(value);
+    }
+    rowId(_i, row) {
+        return row.entityId ?? _i;
+    }
+    oldField(row, propertyKey) {
+        return row.oldValues.find((v) => v.propertyKey === propertyKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ComparisonEntityList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ComparisonEntityList, isStandalone: true, selector: "mt-comparison-entity-list", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (comparison(); as cmp) {\n  <div class=\"flex w-full min-w-0 flex-col gap-2\">\n    @if (label()) {\n      <div class=\"flex items-baseline justify-between\">\n        <span class=\"text-sm font-medium text-color\">{{ label() }}</span>\n        @if (targetModuleKey()) {\n          <span class=\"text-xs text-muted-color\">{{ targetModuleKey() }}</span>\n        }\n      </div>\n    }\n    @if (rows().length === 0) {\n      <div class=\"text-sm text-muted-color\">_</div>\n    } @else {\n      <ul class=\"flex flex-col gap-2\">\n        @for (row of rows(); track rowId($index, row)) {\n          <li\n            class=\"flex flex-col gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\n          >\n            <div class=\"flex items-center justify-between gap-2\">\n              <span\n                class=\"inline-flex items-center rounded px-2 py-0.5 text-xs font-medium\"\n                [class]=\"badgeFor(row.operation).classes\"\n              >\n                {{ badgeFor(row.operation).label }}\n              </span>\n              <span class=\"text-xs text-muted-color\">#{{ row.entityId }}</span>\n            </div>\n\n            @switch (row.operation) {\n              @case (\"CreateRecord\") {\n                <dl class=\"grid grid-cols-1 gap-1 sm:grid-cols-2\">\n                  @for (f of row.newValues; track f.propertyKey) {\n                    <div class=\"flex min-w-0 flex-col\">\n                      <dt class=\"text-xs text-muted-color\">{{ f.label }}</dt>\n                      <dd class=\"truncate text-sm text-color\">\n                        {{ displayField(f.value, f.display) }}\n                      </dd>\n                    </div>\n                  }\n                </dl>\n              }\n              @case (\"DeleteRecord\") {\n                <dl class=\"grid grid-cols-1 gap-1 sm:grid-cols-2\">\n                  @for (f of row.oldValues; track f.propertyKey) {\n                    <div class=\"flex min-w-0 flex-col\">\n                      <dt class=\"text-xs text-muted-color\">{{ f.label }}</dt>\n                      <dd class=\"truncate text-sm text-color line-through\">\n                        {{ displayField(f.value, f.display) }}\n                      </dd>\n                    </div>\n                  }\n                </dl>\n              }\n              @default {\n                <dl class=\"flex flex-col gap-1\">\n                  @for (f of row.newValues; track f.propertyKey) {\n                    <div class=\"flex min-w-0 flex-col\">\n                      <dt class=\"text-xs text-muted-color\">{{ f.label }}</dt>\n                      <dd class=\"flex min-w-0 flex-wrap items-center gap-2\">\n                        <span\n                          class=\"max-w-[40%] truncate text-sm text-muted-color line-through\"\n                        >\n                          {{\n                            displayField(\n                              $any(oldField(row, f.propertyKey))?.value,\n                              $any(oldField(row, f.propertyKey))?.display\n                            )\n                          }}\n                        </span>\n                        <span class=\"text-muted-color\" aria-hidden=\"true\"\n                          >&rarr;</span\n                        >\n                        <span class=\"max-w-[40%] truncate text-sm text-color\">\n                          {{ displayField(f.value, f.display) }}\n                        </span>\n                      </dd>\n                    </div>\n                  }\n                </dl>\n              }\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ComparisonEntityList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-comparison-entity-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], host: {
+                        class: 'block w-full',
+                    }, template: "@if (comparison(); as cmp) {\n  <div class=\"flex w-full min-w-0 flex-col gap-2\">\n    @if (label()) {\n      <div class=\"flex items-baseline justify-between\">\n        <span class=\"text-sm font-medium text-color\">{{ label() }}</span>\n        @if (targetModuleKey()) {\n          <span class=\"text-xs text-muted-color\">{{ targetModuleKey() }}</span>\n        }\n      </div>\n    }\n    @if (rows().length === 0) {\n      <div class=\"text-sm text-muted-color\">_</div>\n    } @else {\n      <ul class=\"flex flex-col gap-2\">\n        @for (row of rows(); track rowId($index, row)) {\n          <li\n            class=\"flex flex-col gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\n          >\n            <div class=\"flex items-center justify-between gap-2\">\n              <span\n                class=\"inline-flex items-center rounded px-2 py-0.5 text-xs font-medium\"\n                [class]=\"badgeFor(row.operation).classes\"\n              >\n                {{ badgeFor(row.operation).label }}\n              </span>\n              <span class=\"text-xs text-muted-color\">#{{ row.entityId }}</span>\n            </div>\n\n            @switch (row.operation) {\n              @case (\"CreateRecord\") {\n                <dl class=\"grid grid-cols-1 gap-1 sm:grid-cols-2\">\n                  @for (f of row.newValues; track f.propertyKey) {\n                    <div class=\"flex min-w-0 flex-col\">\n                      <dt class=\"text-xs text-muted-color\">{{ f.label }}</dt>\n                      <dd class=\"truncate text-sm text-color\">\n                        {{ displayField(f.value, f.display) }}\n                      </dd>\n                    </div>\n                  }\n                </dl>\n              }\n              @case (\"DeleteRecord\") {\n                <dl class=\"grid grid-cols-1 gap-1 sm:grid-cols-2\">\n                  @for (f of row.oldValues; track f.propertyKey) {\n                    <div class=\"flex min-w-0 flex-col\">\n                      <dt class=\"text-xs text-muted-color\">{{ f.label }}</dt>\n                      <dd class=\"truncate text-sm text-color line-through\">\n                        {{ displayField(f.value, f.display) }}\n                      </dd>\n                    </div>\n                  }\n                </dl>\n              }\n              @default {\n                <dl class=\"flex flex-col gap-1\">\n                  @for (f of row.newValues; track f.propertyKey) {\n                    <div class=\"flex min-w-0 flex-col\">\n                      <dt class=\"text-xs text-muted-color\">{{ f.label }}</dt>\n                      <dd class=\"flex min-w-0 flex-wrap items-center gap-2\">\n                        <span\n                          class=\"max-w-[40%] truncate text-sm text-muted-color line-through\"\n                        >\n                          {{\n                            displayField(\n                              $any(oldField(row, f.propertyKey))?.value,\n                              $any(oldField(row, f.propertyKey))?.display\n                            )\n                          }}\n                        </span>\n                        <span class=\"text-muted-color\" aria-hidden=\"true\"\n                          >&rarr;</span\n                        >\n                        <span class=\"max-w-[40%] truncate text-sm text-color\">\n                          {{ displayField(f.value, f.display) }}\n                        </span>\n                      </dd>\n                    </div>\n                  }\n                </dl>\n              }\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+class EntityPreview {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : /* istanbul ignore next */ []));
+    comparisonKind = computed(() => {
+        const c = this.data().comparison;
+        if (!c)
+            return null;
+        if (c.kind === 'Value')
+            return 'Value';
+        if (c.kind === 'EntityList')
+            return 'EntityList';
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "comparisonKind" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 (comparisonKind()) {\n  @case (\"Value\") {\n    <mt-comparison-value [data]=\"data()\" />\n  }\n  @case (\"EntityList\") {\n    <mt-comparison-entity-list [data]=\"data()\" />\n  }\n  @default {\n    <mt-entity-preview-body\n      [data]=\"data()\"\n      [attachmentShape]=\"attachmentShape()\"\n    />\n  }\n}\n", dependencies: [{ kind: "component", type: EntityPreviewBody, selector: "mt-entity-preview-body", inputs: ["data", "attachmentShape"] }, { kind: "component", type: ComparisonValue, selector: "mt-comparison-value", inputs: ["data"] }, { kind: "component", type: ComparisonEntityList, selector: "mt-comparison-entity-list", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreview, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-entity-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EntityPreviewBody, ComparisonValue, ComparisonEntityList], host: {
+                        class: 'w-full',
+                    }, template: "@switch (comparisonKind()) {\n  @case (\"Value\") {\n    <mt-comparison-value [data]=\"data()\" />\n  }\n  @case (\"EntityList\") {\n    <mt-comparison-entity-list [data]=\"data()\" />\n  }\n  @default {\n    <mt-entity-preview-body\n      [data]=\"data()\"\n      [attachmentShape]=\"attachmentShape()\"\n    />\n  }\n}\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 {
@@ -1112,5 +1212,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser, LEAF_DETAILS_KEY_SEPARATOR, buildDisplayEntities, expandLeafDetailsEntity, isLeafDetailsCatalogConfiguration, isLeafDetailsCollectionValue, isLeafDetailsRuntimeValue, isLeafDetailsSyntheticKey, isLeafDetailsValue };
+export { ComparisonEntityList, ComparisonValue, EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityPreviewBody, EntityStatus, EntityText, EntityUser, LEAF_DETAILS_KEY_SEPARATOR, buildDisplayEntities, expandLeafDetailsEntity, isLeafDetailsCatalogConfiguration, isLeafDetailsCollectionValue, isLeafDetailsRuntimeValue, isLeafDetailsSyntheticKey, isLeafDetailsValue };
 //# sourceMappingURL=masterteam-components-entities.mjs.map