@masterteam/components 0.0.165 → 0.0.167

package/fesm2022/masterteam-components-entities.mjs

@@ -9,6 +9,7 @@ import { SecureImagePipe, UploadField } from '@masterteam/components/upload-fiel
 import { Progress } from '@masterteam/components/progress';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { TranslocoService } from '@jsverse/transloco';
 import { Button } from '@masterteam/components/button';
 import { forkJoin, finalize, of, take, switchMap, EMPTY, map, catchError } from 'rxjs';
 import * as i1$1 from 'primeng/tooltip';
@@ -56,8 +57,14 @@ class EntityField {
         const justifyClass = isEntityAlignEnd(this.configuration())
             ? 'justify-end'
             : '';
-        return `flex min-w-0 items-center gap-1 text-sm text-gray-500 ${justifyClass}`.trimEnd();
+        return `flex min-w-0 max-w-full items-center gap-1 text-sm text-gray-500 ${justifyClass}`.trimEnd();
     }, ...(ngDevMode ? [{ debugName: "labelContainerClass" }] : /* istanbul ignore next */ []));
+    contentContainerClass = computed(() => {
+        const alignClass = isEntityAlignEnd(this.configuration())
+            ? 'self-end'
+            : 'self-stretch';
+        return `min-w-0 max-w-full ${alignClass}`;
+    }, ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
     containerClass = computed(() => {
         const gapClass = this.gap() === 'relaxed'
             ? 'gap-2'
@@ -73,7 +80,9 @@ class EntityField {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityField, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityField, isStandalone: true, selector: "mt-entity-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIconName: { classPropertyName: "labelIconName", publicName: "labelIconName", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0 w-full" }, ngImport: i0, template: `
     <div [class]="containerClass()">
-      <ng-content />
+      <div [class]="contentContainerClass()">
+        <ng-content />
+      </div>
       @if (!hideLabel()) {
         <div [class]="labelContainerClass()">
           @if (labelIconName(); as iconName) {
@@ -99,7 +108,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     imports: [TruncateTooltip, Icon],
                     template: `
     <div [class]="containerClass()">
-      <ng-content />
+      <div [class]="contentContainerClass()">
+        <ng-content />
+      </div>
       @if (!hideLabel()) {
         <div [class]="labelContainerClass()">
           @if (labelIconName(); as iconName) {
@@ -137,11 +148,11 @@ class EntityText {
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityText, isStandalone: true, selector: "mt-entity-text", 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: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div\r\n    class=\"min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityText, isStandalone: true, selector: "mt-entity-text", 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: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div\r\n    class=\"min-w-0 max-w-full truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityText, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-text', standalone: true, imports: [EntityField, TruncateTooltip], template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div\r\n    class=\"min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n</mt-entity-field>\r\n" }]
+            args: [{ selector: 'mt-entity-text', standalone: true, imports: [EntityField, TruncateTooltip], template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div\r\n    class=\"min-w-0 max-w-full truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n</mt-entity-field>\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 }] }] } });
 
 class EntityDate {
@@ -434,6 +445,7 @@ class EntityAttachment {
     endPoint = input('uploader', ...(ngDevMode ? [{ debugName: "endPoint" }] : /* istanbul ignore next */ []));
     context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
     httpClient = inject(HttpClient);
+    transloco = inject(TranslocoService);
     displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
@@ -497,7 +509,10 @@ class EntityAttachment {
         return (attachment.id ?? attachment.fileName ?? attachment.name ?? String(index));
     }
     attachmentTooltip(attachment) {
-        return (attachment.name ?? attachment.fileName ?? attachment.id ?? 'Attachment');
+        return (attachment.name ??
+            attachment.fileName ??
+            attachment.id ??
+            this.transloco.translate('components.entitiesPreview.attachment'));
     }
     attachmentIcon(attachment) {
         const extension = this.resolveExtension(attachment);
@@ -941,21 +956,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     }, 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 = {
+const OPERATION_BADGE_KEYS = {
     CreateRecord: {
-        label: 'Added',
+        key: 'components.comparisonEntities.added',
         classes: 'bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200',
     },
     UpdateRecord: {
-        label: 'Updated',
+        key: 'components.comparisonEntities.updated',
         classes: 'bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200',
     },
     DeleteRecord: {
-        label: 'Removed',
+        key: 'components.comparisonEntities.removed',
         classes: 'bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-200',
     },
 };
 class ComparisonEntityList {
+    transloco = inject(TranslocoService);
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     comparison = computed(() => {
         const c = this.data().comparison;
@@ -965,7 +981,11 @@ class ComparisonEntityList {
     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];
+        const config = OPERATION_BADGE_KEYS[op];
+        return {
+            label: this.transloco.translate(config.key),
+            classes: config.classes,
+        };
     }
     displayField(value, display) {
         if (display && display.trim().length > 0)
@@ -1013,6 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 const EMPTY_KEY_SET = new Set();
 class EntitiesPreview {
+    transloco = inject(TranslocoService);
     /** Array of entity data to display */
     entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
     attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : /* istanbul ignore next */ []));
@@ -1030,9 +1051,9 @@ class EntitiesPreview {
      */
     activeKeys = input(EMPTY_KEY_SET, ...(ngDevMode ? [{ debugName: "activeKeys" }] : /* istanbul ignore next */ []));
     /** Tooltip text shown on hover when an entity is clickable but not active. */
-    clickableTooltip = input('Click to filter by this value', ...(ngDevMode ? [{ debugName: "clickableTooltip" }] : /* istanbul ignore next */ []));
+    clickableTooltip = input(this.transloco.translate('components.entitiesPreview.filterByThis'), ...(ngDevMode ? [{ debugName: "clickableTooltip" }] : /* istanbul ignore next */ []));
     /** Tooltip text shown on hover when an entity is the current active filter. */
-    activeTooltip = input('Click to clear filter', ...(ngDevMode ? [{ debugName: "activeTooltip" }] : /* istanbul ignore next */ []));
+    activeTooltip = input(this.transloco.translate('components.entitiesPreview.clearFilter'), ...(ngDevMode ? [{ debugName: "activeTooltip" }] : /* istanbul ignore next */ []));
     /**
      * Emits when an individual entity slot is clicked. Only fires when the
      * entity's key is present in `clickableKeys`.