@masterteam/components 0.0.165 → 0.0.167

package/assets/i18n/en.json

@@ -47,6 +47,99 @@
       "select": "Select",
       "you": "Me"
     },
+    "selectPlaceholder": "Select...",
+    "drawer": {
+      "expandFullWidth": "Expand to full width",
+      "restoreSize": "Restore size"
+    },
+    "tabs": {
+      "more": "More"
+    },
+    "sidebar": {
+      "logoAlt": "Logo"
+    },
+    "topbar": {
+      "logoAlt": "Logo"
+    },
+    "iconField": {
+      "selectIcon": "Select Icon"
+    },
+    "textField": {
+      "showPassword": "Show password",
+      "hidePassword": "Hide password"
+    },
+    "pickListField": {
+      "available": "Available",
+      "selected": "Selected"
+    },
+    "uploadField": {
+      "uploadFile": "Upload File",
+      "clickOrDrop": "Click or drop a file to upload"
+    },
+    "clientPage": {
+      "expandMenu": "Expand menu",
+      "collapseMenu": "Collapse menu",
+      "expandSidebar": "Expand sidebar",
+      "collapseSidebar": "Collapse sidebar"
+    },
+    "moduleSummaryCard": {
+      "actionLabel": "Action"
+    },
+    "entitiesPreview": {
+      "filterByThis": "Click to filter by this value",
+      "clearFilter": "Click to clear filter",
+      "attachment": "Attachment"
+    },
+    "comparisonEntities": {
+      "added": "Added",
+      "updated": "Updated",
+      "removed": "Removed"
+    },
+    "entityListField": {
+      "add": "Add",
+      "edit": "Edit",
+      "delete": "Delete",
+      "readingNotAllowed": "Reading is not allowed for this field.",
+      "saveFormFirst": "Save the form first to manage related items.",
+      "noRelatedItems": "No related items.",
+      "loadFailed": "Failed to load related items"
+    },
+    "lookupMatrixField": {
+      "xAxisFallback": "X",
+      "yAxisFallback": "Y",
+      "firstValueFallback": "the first value",
+      "secondValueFallback": "the second value",
+      "selectAxesFirst": "Select {{xAxisLabel}} and {{yAxisLabel}} first.",
+      "noMatchingValue": "No matching value for the selected combination."
+    },
+    "formulaEditor": {
+      "removeFunction": "Remove function",
+      "remove": "Remove"
+    },
+    "runtimeAction": {
+      "missingArgs": "Cannot execute {{action}}. Missing: {{missing}}",
+      "confirmDefault": "Confirm {{action}} for this item.",
+      "executeFailed": "Failed to execute {{action}}",
+      "notAvailable": "Action {{action}} is not available.",
+      "noUrl": "Action {{action}} has no url.",
+      "noHttpMethod": "Action {{action}} has no http method."
+    },
+    "formulaOperators": {
+      "add": { "name": "Add", "description": "Addition" },
+      "subtract": { "name": "Subtract", "description": "Subtraction" },
+      "multiply": { "name": "Multiply", "description": "Multiplication" },
+      "divide": { "name": "Divide", "description": "Division" },
+      "modulo": { "name": "Modulo", "description": "Modulo" },
+      "equal": { "name": "Equal", "description": "Equal to" },
+      "notEqual": { "name": "Not Equal", "description": "Not equal to" },
+      "greater": { "name": "Greater", "description": "Greater than" },
+      "less": { "name": "Less", "description": "Less than" },
+      "greaterOrEqual": { "name": "Greater or Equal", "description": "Greater than or equal" },
+      "lessOrEqual": { "name": "Less or Equal", "description": "Less than or equal" },
+      "and": { "name": "And", "description": "Logical AND" },
+      "or": { "name": "Or", "description": "Logical OR" },
+      "not": { "name": "Not", "description": "Logical NOT" }
+    },
     "tree": {
       "no-data-found": "No data found",
       "search": "Search",
@@ -122,6 +215,41 @@
       "pattern": "The format is invalid",
       "fileSizeLimited": "File size exceeds the limit",
       "invalid": "Invalid field: {{key}}"
+    },
+    "clientComponents": {
+      "instancePreview": {
+        "noPreviewData": "No preview data is available for this instance.",
+        "loadFailed": "Failed to load instance preview"
+      },
+      "list": {
+        "informativeDashboard": "Informative Dashboard",
+        "cards": "Cards",
+        "table": "Table",
+        "noCardsFound": "No cards found.",
+        "noInformativeDashboard": "No informative dashboard found.",
+        "errors": {
+          "tableRowsLoadFailed": "Failed to load table rows",
+          "rowsLoadFailed": "Failed to load rows",
+          "cardsLoadFailed": "Failed to load cards",
+          "informativeLoadFailed": "Failed to load informative dashboard",
+          "missingModuleId": "Missing identifiers: moduleId is required",
+          "missingContextKey": "Missing identifiers: contextKey is required",
+          "missingContextAndInstance": "Missing identifiers: contextKey and instanceId are required"
+        }
+      },
+      "escalation": {
+        "cancel": "Cancel",
+        "escalationUp": "Escalation Up",
+        "currentUser": "Current User",
+        "escalatedBy": "Escalated By",
+        "startDate": "Start Date",
+        "reason": "Reason",
+        "reasonPlaceholder": "Describe the escalation reason",
+        "attachments": "Attachments",
+        "uploadHelp": "Upload supporting files",
+        "reasonRequired": "Reason is required.",
+        "createFailed": "Failed to create escalation."
+      }
     }
   }
 }

package/fesm2022/masterteam-components-business-fields.mjs

@@ -5,6 +5,8 @@ import { input, inject, DestroyRef, signal, computed, ChangeDetectionStrategy, C
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { ControlContainer, Validators, NgControl, FormsModule } from '@angular/forms';
+import * as i2 from '@jsverse/transloco';
+import { TranslocoService, TranslocoPipe, TranslocoModule } from '@jsverse/transloco';
 import { startWith, finalize, catchError, of, take } from 'rxjs';
 import { Tooltip } from '@masterteam/components/tooltip';
 import { Icon } from '@masterteam/icons';
@@ -12,8 +14,6 @@ import { SelectField } from '@masterteam/components/select-field';
 import { MultiSelectField } from '@masterteam/components/multi-select-field';
 import { FieldValidation } from '@masterteam/components/field-validation';
 import { HttpClient } from '@angular/common/http';
-import * as i2 from '@jsverse/transloco';
-import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { Button } from '@masterteam/components/button';
 import { NumberField } from '@masterteam/components/number-field';
 import { Table } from '@masterteam/components/table';
@@ -27,6 +27,7 @@ class LookupMatrixField {
         optional: true,
     });
     destroyRef = inject(DestroyRef);
+    transloco = inject(TranslocoService);
     valueVersion = signal(0, ...(ngDevMode ? [{ debugName: "valueVersion" }] : /* istanbul ignore next */ []));
     xOptions = computed(() => this.config().xOptions ?? [], ...(ngDevMode ? [{ debugName: "xOptions" }] : /* istanbul ignore next */ []));
     yOptions = computed(() => this.config().yOptions ?? [], ...(ngDevMode ? [{ debugName: "yOptions" }] : /* istanbul ignore next */ []));
@@ -53,8 +54,10 @@ class LookupMatrixField {
     }, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
     selectionSummary = computed(() => {
         const parts = [];
-        const xAxisLabel = this.config().xAxisLabel.trim() || 'X';
-        const yAxisLabel = this.config().yAxisLabel.trim() || 'Y';
+        const xAxisLabel = this.config().xAxisLabel.trim() ||
+            this.transloco.translate('components.lookupMatrixField.xAxisFallback');
+        const yAxisLabel = this.config().yAxisLabel.trim() ||
+            this.transloco.translate('components.lookupMatrixField.yAxisFallback');
         const selectedX = this.selectedXOption();
         const selectedY = this.selectedYOption();
         if (selectedX) {
@@ -66,15 +69,17 @@ class LookupMatrixField {
         return parts.join(' / ');
     }, ...(ngDevMode ? [{ debugName: "selectionSummary" }] : /* istanbul ignore next */ []));
     pendingMessage = computed(() => {
-        const xAxisLabel = this.config().xAxisLabel.trim() || 'the first value';
-        const yAxisLabel = this.config().yAxisLabel.trim() || 'the second value';
-        return `Select ${xAxisLabel} and ${yAxisLabel} first.`;
+        const xAxisLabel = this.config().xAxisLabel.trim() ||
+            this.transloco.translate('components.lookupMatrixField.firstValueFallback');
+        const yAxisLabel = this.config().yAxisLabel.trim() ||
+            this.transloco.translate('components.lookupMatrixField.secondValueFallback');
+        return this.transloco.translate('components.lookupMatrixField.selectAxesFirst', { xAxisLabel, yAxisLabel });
     }, ...(ngDevMode ? [{ debugName: "pendingMessage" }] : /* istanbul ignore next */ []));
     missingResultMessage = computed(() => {
         if (!this.selectedXOption() || !this.selectedYOption()) {
             return this.pendingMessage();
         }
-        return 'No matching value for the selected combination.';
+        return this.transloco.translate('components.lookupMatrixField.noMatchingValue');
     }, ...(ngDevMode ? [{ debugName: "missingResultMessage" }] : /* istanbul ignore next */ []));
     constructor() {
         const control = this.controlContainer?.control;
@@ -127,13 +132,13 @@ class LookupMatrixField {
         return `var(--p-${color}-500)`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LookupMatrixField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LookupMatrixField, isStandalone: true, selector: "mt-lookup-matrix-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "grid gap-2" }, ngImport: i0, template: "@if (config().label) {\r\n  <label class=\"text-sm font-medium text-color\">\r\n    {{ config().label }}\r\n  </label>\r\n}\r\n\r\n<div\r\n  class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n  @if (activeCell(); as cell) {\r\n    <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n      <span\r\n        class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n        [ngStyle]=\"getSwatchStyle(cell.color)\"\r\n      ></span>\r\n\r\n      <div class=\"min-w-0 flex-1 py-2 flex items-center justify-between\">\r\n        <div class=\"truncate font-semibold text-gray-500\">\r\n          {{ cell.label }}\r\n        </div>\r\n\r\n        @if (selectionSummary()) {\r\n          <div class=\"font-bold text-gray-500\">\r\n            <mt-icon\r\n              [mtTooltip]=\"selectionSummary()\"\r\n              icon=\"general.info-circle\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex min-h-6 items-center text-muted-color py-2\">\r\n      {{ hasMatrix() ? missingResultMessage() : config().emptyMessage }}\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LookupMatrixField, isStandalone: true, selector: "mt-lookup-matrix-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "grid gap-2" }, ngImport: i0, template: "@if (config().label) {\r\n  <label class=\"font-medium text-color\">\r\n    {{ config().label }}\r\n  </label>\r\n}\r\n\r\n<div\r\n  class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n  @if (activeCell(); as cell) {\r\n    <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n      <span\r\n        class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n        [ngStyle]=\"getSwatchStyle(cell.color)\"\r\n      ></span>\r\n\r\n      <div class=\"min-w-0 flex-1 py-2 flex items-center justify-between\">\r\n        <div class=\"truncate font-semibold text-gray-500\">\r\n          {{ cell.label }}\r\n        </div>\r\n\r\n        @if (selectionSummary()) {\r\n          <div class=\"font-bold text-gray-500\">\r\n            <mt-icon\r\n              [mtTooltip]=\"selectionSummary()\"\r\n              icon=\"general.info-circle\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex min-h-6 items-center text-muted-color py-2\">\r\n      {{ hasMatrix() ? missingResultMessage() : config().emptyMessage }}\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LookupMatrixField, decorators: [{
             type: Component,
             args: [{ selector: 'mt-lookup-matrix-field', standalone: true, imports: [CommonModule, Tooltip, Icon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'grid gap-2',
-                    }, template: "@if (config().label) {\r\n  <label class=\"text-sm font-medium text-color\">\r\n    {{ config().label }}\r\n  </label>\r\n}\r\n\r\n<div\r\n  class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n  @if (activeCell(); as cell) {\r\n    <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n      <span\r\n        class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n        [ngStyle]=\"getSwatchStyle(cell.color)\"\r\n      ></span>\r\n\r\n      <div class=\"min-w-0 flex-1 py-2 flex items-center justify-between\">\r\n        <div class=\"truncate font-semibold text-gray-500\">\r\n          {{ cell.label }}\r\n        </div>\r\n\r\n        @if (selectionSummary()) {\r\n          <div class=\"font-bold text-gray-500\">\r\n            <mt-icon\r\n              [mtTooltip]=\"selectionSummary()\"\r\n              icon=\"general.info-circle\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex min-h-6 items-center text-muted-color py-2\">\r\n      {{ hasMatrix() ? missingResultMessage() : config().emptyMessage }}\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+                    }, template: "@if (config().label) {\r\n  <label class=\"font-medium text-color\">\r\n    {{ config().label }}\r\n  </label>\r\n}\r\n\r\n<div\r\n  class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n  @if (activeCell(); as cell) {\r\n    <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n      <span\r\n        class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n        [ngStyle]=\"getSwatchStyle(cell.color)\"\r\n      ></span>\r\n\r\n      <div class=\"min-w-0 flex-1 py-2 flex items-center justify-between\">\r\n        <div class=\"truncate font-semibold text-gray-500\">\r\n          {{ cell.label }}\r\n        </div>\r\n\r\n        @if (selectionSummary()) {\r\n          <div class=\"font-bold text-gray-500\">\r\n            <mt-icon\r\n              [mtTooltip]=\"selectionSummary()\"\r\n              icon=\"general.info-circle\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex min-h-6 items-center text-muted-color py-2\">\r\n      {{ hasMatrix() ? missingResultMessage() : config().emptyMessage }}\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class SchemaConnectionField {
@@ -352,13 +357,19 @@ class SchemaConnectionField {
         this.disabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaConnectionField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SchemaConnectionField, isStandalone: true, selector: "mt-schema-connection-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "<!-- @if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n  >\r\n    {{ label() }}\r\n  </label>\r\n} -->\r\n\r\n<div class=\"flex gap-4 w-full\">\r\n  @for (state of sourceLevelStates(); track getSourceId(state.source)) {\r\n    <div [style.width]=\"dropdownWidth()\" class=\"min-w-0\">\r\n      @if (sourceLevelStates().length > 0) {\r\n        <span class=\"text-sm text-muted-color mb-1 block truncate\">\r\n          {{\r\n            state.source.name?.en ||\r\n              state.source.levelKey ||\r\n              state.source.moduleKey\r\n          }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.source.allowManyToMany) {\r\n        <mt-multi-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"placeholder() || state.source.name?.en || 'Select...'\"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [showClear]=\"true\"\r\n          display=\"chip\"\r\n        />\r\n      } @else {\r\n        <mt-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"placeholder() || state.source.name?.en || 'Select...'\"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [loading]=\"state.loading\"\r\n          [showClear]=\"true\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SchemaConnectionField, isStandalone: true, selector: "mt-schema-connection-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "<!-- @if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n  >\r\n    {{ label() }}\r\n  </label>\r\n} -->\r\n\r\n<div class=\"flex gap-4 w-full\">\r\n  @for (state of sourceLevelStates(); track getSourceId(state.source)) {\r\n    <div [style.width]=\"dropdownWidth()\" class=\"min-w-0\">\r\n      @if (sourceLevelStates().length > 0) {\r\n        <span class=\"text-sm text-muted-color mb-1 block truncate\">\r\n          {{\r\n            state.source.name?.en ||\r\n              state.source.levelKey ||\r\n              state.source.moduleKey\r\n          }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.source.allowManyToMany) {\r\n        <mt-multi-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"\r\n            placeholder() ||\r\n            state.source.name?.en ||\r\n            ('components.selectPlaceholder' | transloco)\r\n          \"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [showClear]=\"true\"\r\n          display=\"chip\"\r\n        />\r\n      } @else {\r\n        <mt-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"\r\n            placeholder() ||\r\n            state.source.name?.en ||\r\n            ('components.selectPlaceholder' | transloco)\r\n          \"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [loading]=\"state.loading\"\r\n          [showClear]=\"true\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaConnectionField, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-schema-connection-field', standalone: true, imports: [FormsModule, SelectField, MultiSelectField, FieldValidation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'mt-schema-connection-field', standalone: true, imports: [
+                        FormsModule,
+                        SelectField,
+                        MultiSelectField,
+                        FieldValidation,
+                        TranslocoPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'grid gap-1',
-                    }, template: "<!-- @if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n  >\r\n    {{ label() }}\r\n  </label>\r\n} -->\r\n\r\n<div class=\"flex gap-4 w-full\">\r\n  @for (state of sourceLevelStates(); track getSourceId(state.source)) {\r\n    <div [style.width]=\"dropdownWidth()\" class=\"min-w-0\">\r\n      @if (sourceLevelStates().length > 0) {\r\n        <span class=\"text-sm text-muted-color mb-1 block truncate\">\r\n          {{\r\n            state.source.name?.en ||\r\n              state.source.levelKey ||\r\n              state.source.moduleKey\r\n          }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.source.allowManyToMany) {\r\n        <mt-multi-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"placeholder() || state.source.name?.en || 'Select...'\"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [showClear]=\"true\"\r\n          display=\"chip\"\r\n        />\r\n      } @else {\r\n        <mt-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"placeholder() || state.source.name?.en || 'Select...'\"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [loading]=\"state.loading\"\r\n          [showClear]=\"true\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
+                    }, template: "<!-- @if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n  >\r\n    {{ label() }}\r\n  </label>\r\n} -->\r\n\r\n<div class=\"flex gap-4 w-full\">\r\n  @for (state of sourceLevelStates(); track getSourceId(state.source)) {\r\n    <div [style.width]=\"dropdownWidth()\" class=\"min-w-0\">\r\n      @if (sourceLevelStates().length > 0) {\r\n        <span class=\"text-sm text-muted-color mb-1 block truncate\">\r\n          {{\r\n            state.source.name?.en ||\r\n              state.source.levelKey ||\r\n              state.source.moduleKey\r\n          }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.source.allowManyToMany) {\r\n        <mt-multi-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"\r\n            placeholder() ||\r\n            state.source.name?.en ||\r\n            ('components.selectPlaceholder' | transloco)\r\n          \"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [showClear]=\"true\"\r\n          display=\"chip\"\r\n        />\r\n      } @else {\r\n        <mt-select-field\r\n          [field]=\"false\"\r\n          [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n          (ngModelChange)=\"syncValue()\"\r\n          [options]=\"state.options\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          [placeholder]=\"\r\n            placeholder() ||\r\n            state.source.name?.en ||\r\n            ('components.selectPlaceholder' | transloco)\r\n          \"\r\n          [readonly]=\"disabled() || readonly()\"\r\n          [filter]=\"filter()\"\r\n          [loading]=\"state.loading\"\r\n          [showClear]=\"true\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 const PREDECESSOR_TYPE_BY_TOKEN = {
@@ -697,6 +708,7 @@ class EntityListField {
     http = inject(HttpClient);
     destroyRef = inject(DestroyRef);
     modal = inject(ModalService);
+    transloco = inject(TranslocoService);
     /**
      * Optional rich add-row dialog (provided by `@masterteam/forms` via
      * `provideEntityListAddForm()`). When available, used instead of the local
@@ -763,12 +775,12 @@ class EntityListField {
     writeRowActions = computed(() => [
         {
             icon: 'custom.pencil',
-            tooltip: 'Edit',
+            tooltip: this.transloco.translate('components.entityListField.edit'),
             action: (row) => this.openEditDialog(row),
         },
         {
             icon: 'general.trash-01',
-            tooltip: 'Delete',
+            tooltip: this.transloco.translate('components.entityListField.delete'),
             color: 'danger',
             confirmation: {
                 type: 'popup',
@@ -784,7 +796,7 @@ class EntityListField {
         if (!component)
             return;
         const ref = this.modal.openModal(component, 'dialog', {
-            header: 'Add',
+            header: this.transloco.translate('components.entityListField.add'),
             styleClass: '!w-[48rem] max-w-[96vw]',
             dismissableMask: true,
             inputValues: {
@@ -813,7 +825,7 @@ class EntityListField {
             return;
         const originalValues = row['__values'] ?? {};
         const ref = this.modal.openModal(component, 'dialog', {
-            header: 'Edit',
+            header: this.transloco.translate('components.entityListField.edit'),
             styleClass: '!w-[48rem] max-w-[96vw]',
             dismissableMask: true,
             inputValues: {
@@ -891,7 +903,7 @@ class EntityListField {
             .post('fetch/query', body, ctx ? { context: ctx } : {})
             .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.loading.set(false)), catchError((err) => {
             console.error('EntityList fetch/query failed', err);
-            this.errorMessage.set('Failed to load related items');
+            this.errorMessage.set(this.transloco.translate('components.entityListField.loadFailed'));
             return of({});
         }))
             .subscribe((response) => {
@@ -965,11 +977,19 @@ class EntityListField {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityListField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityListField, isStandalone: true, selector: "mt-entity-list-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, runtimeContext: { classPropertyName: "runtimeContext", publicName: "runtimeContext", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\r\n  @if (label()) {\r\n    <label class=\"text-sm font-medium text-color\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-red-500\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (errorMessage(); as err) {\r\n    <p-message severity=\"error\" [text]=\"err\" styleClass=\"w-full\" />\r\n  } @else if (canWrite()) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        label=\"Add\"\r\n        icon=\"general.plus\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled()\"\r\n        (onClick)=\"openAddDialog()\"\r\n      />\r\n    </div>\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"displayRows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"writeRowActions()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  } @else if (!canRead()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      Reading is not allowed for this field.\r\n    </div>\r\n  } @else if (!hasRequiredContext()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      Save the form first to manage related items.\r\n    </div>\r\n  } @else if (loading() && !hasRows()) {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n    </div>\r\n  } @else if (!hasRows()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      No related items.\r\n    </div>\r\n  } @else {\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  }\r\n\r\n  @if (ngControl?.control) {\r\n    <mt-field-validation\r\n      [control]=\"ngControl?.control!\"\r\n      [touched]=\"ngControl?.touched ?? false\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityListField, isStandalone: true, selector: "mt-entity-list-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, runtimeContext: { classPropertyName: "runtimeContext", publicName: "runtimeContext", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\r\n  @if (label()) {\r\n    <label class=\"font-medium text-color\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-red-500\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (errorMessage(); as err) {\r\n    <p-message severity=\"error\" [text]=\"err\" styleClass=\"w-full\" />\r\n  } @else if (canWrite()) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        [label]=\"'components.entityListField.add' | transloco\"\r\n        icon=\"general.plus\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled()\"\r\n        (onClick)=\"openAddDialog()\"\r\n      />\r\n    </div>\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"displayRows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"writeRowActions()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  } @else if (!canRead()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      {{ \"components.entityListField.readingNotAllowed\" | transloco }}\r\n    </div>\r\n  } @else if (!hasRequiredContext()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      {{ \"components.entityListField.saveFormFirst\" | transloco }}\r\n    </div>\r\n  } @else if (loading() && !hasRows()) {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n    </div>\r\n  } @else if (!hasRows()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      {{ \"components.entityListField.noRelatedItems\" | transloco }}\r\n    </div>\r\n  } @else {\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  }\r\n\r\n  @if (ngControl?.control) {\r\n    <mt-field-validation\r\n      [control]=\"ngControl?.control!\"\r\n      [touched]=\"ngControl?.touched ?? false\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { 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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityListField, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-list-field', standalone: true, imports: [CommonModule, FieldValidation, Skeleton, Message, Table, Button], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'grid gap-1' }, template: "<div class=\"flex flex-col gap-2\">\r\n  @if (label()) {\r\n    <label class=\"text-sm font-medium text-color\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-red-500\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (errorMessage(); as err) {\r\n    <p-message severity=\"error\" [text]=\"err\" styleClass=\"w-full\" />\r\n  } @else if (canWrite()) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        label=\"Add\"\r\n        icon=\"general.plus\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled()\"\r\n        (onClick)=\"openAddDialog()\"\r\n      />\r\n    </div>\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"displayRows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"writeRowActions()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  } @else if (!canRead()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      Reading is not allowed for this field.\r\n    </div>\r\n  } @else if (!hasRequiredContext()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      Save the form first to manage related items.\r\n    </div>\r\n  } @else if (loading() && !hasRows()) {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n    </div>\r\n  } @else if (!hasRows()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      No related items.\r\n    </div>\r\n  } @else {\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  }\r\n\r\n  @if (ngControl?.control) {\r\n    <mt-field-validation\r\n      [control]=\"ngControl?.control!\"\r\n      [touched]=\"ngControl?.touched ?? false\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'mt-entity-list-field', standalone: true, imports: [
+                        CommonModule,
+                        FieldValidation,
+                        Skeleton,
+                        Message,
+                        Table,
+                        Button,
+                        TranslocoPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'grid gap-1' }, template: "<div class=\"flex flex-col gap-2\">\r\n  @if (label()) {\r\n    <label class=\"font-medium text-color\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-red-500\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (errorMessage(); as err) {\r\n    <p-message severity=\"error\" [text]=\"err\" styleClass=\"w-full\" />\r\n  } @else if (canWrite()) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        [label]=\"'components.entityListField.add' | transloco\"\r\n        icon=\"general.plus\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled()\"\r\n        (onClick)=\"openAddDialog()\"\r\n      />\r\n    </div>\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"displayRows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"writeRowActions()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  } @else if (!canRead()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      {{ \"components.entityListField.readingNotAllowed\" | transloco }}\r\n    </div>\r\n  } @else if (!hasRequiredContext()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      {{ \"components.entityListField.saveFormFirst\" | transloco }}\r\n    </div>\r\n  } @else if (loading() && !hasRows()) {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n      <p-skeleton width=\"100%\" height=\"3rem\" />\r\n    </div>\r\n  } @else if (!hasRows()) {\r\n    <div\r\n      class=\"rounded border border-dashed border-surface-300 bg-surface-50 p-3 text-sm text-muted-color\"\r\n    >\r\n      {{ \"components.entityListField.noRelatedItems\" | transloco }}\r\n    </div>\r\n  } @else {\r\n    <mt-table\r\n      [noCard]=\"true\"\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      dataKey=\"Id\"\r\n      [loading]=\"loading()\"\r\n    />\r\n  }\r\n\r\n  @if (ngControl?.control) {\r\n    <mt-field-validation\r\n      [control]=\"ngControl?.control!\"\r\n      [touched]=\"ngControl?.touched ?? false\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], runtimeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "runtimeContext", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 /**