@masterteam/properties 0.0.16 → 0.0.18

package/fesm2022/masterteam-properties.mjs

@@ -5,17 +5,19 @@ import { Table } from '@masterteam/components/table';
 import { Router, ActivatedRoute } from '@angular/router';
 import { HttpClient, HttpContextToken } from '@angular/common/http';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
-import { of, startWith, map, distinctUntilChanged, Subscription } from 'rxjs';
+import { of, finalize as finalize$1, startWith, map, distinctUntilChanged, Subscription } from 'rxjs';
 import { tap, catchError, finalize, switchMap } from 'rxjs/operators';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Card } from '@masterteam/components/card';
 import { Avatar } from '@masterteam/components/avatar';
 import { Divider } from 'primeng/divider';
 import { Button } from '@masterteam/components/button';
+import * as i1 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { PickListFieldConfig, ValidatorConfig } from '@masterteam/components';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, ControlContainer, FormGroupDirective } from '@angular/forms';
 import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -759,49 +761,74 @@ class PropertiesList {
     facade = inject(PropertiesFacade);
     router = inject(Router);
     route = inject(ActivatedRoute);
+    transloco = inject(TranslocoService);
     defaultTab = 'all';
     tab = input(...(ngDevMode ? [undefined, { debugName: "tab" }] : []));
     tabs = signal([
-        { label: 'All', value: 'all' },
-        { label: 'System', value: 'system' },
-        { label: 'Custom', value: 'custom' },
+        {
+            label: this.transloco.translate('properties.list.tabAll'),
+            value: 'all',
+        },
+        {
+            label: this.transloco.translate('properties.list.tabSystem'),
+            value: 'system',
+        },
+        {
+            label: this.transloco.translate('properties.list.tabCustom'),
+            value: 'custom',
+        },
     ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     activeTab = linkedSignal(() => {
         return this.tab() || this.defaultTab;
     });
     tableColumns = signal([
-        { key: 'title', label: 'Name' },
-        { key: 'viewType', label: 'Type' },
-        { key: 'required', label: 'Required', type: 'boolean' },
+        {
+            key: 'title',
+            label: this.transloco.translate('properties.list.columnName'),
+        },
+        {
+            key: 'viewType',
+            label: this.transloco.translate('properties.list.columnType'),
+        },
+        {
+            key: 'required',
+            label: this.transloco.translate('properties.list.columnRequired'),
+            type: 'boolean',
+        },
     ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
     propertyTypes = signal([
         {
-            label: 'Short text',
+            label: this.transloco.translate('properties.list.typeShortText'),
             icon: 'editor.type-square',
             value: 'Text',
             color: 'pink',
         },
         {
-            label: 'Paragraph',
+            label: this.transloco.translate('properties.list.typeParagraph'),
             icon: 'editor.line-height',
             value: 'LongText',
             color: 'sky',
         },
-        { label: 'User', icon: 'user.user-01', value: 'User', color: 'yellow' },
         {
-            label: 'Number',
+            label: this.transloco.translate('properties.list.typeUser'),
+            icon: 'user.user-01',
+            value: 'User',
+            color: 'yellow',
+        },
+        {
+            label: this.transloco.translate('properties.list.typeNumber'),
             icon: 'editor.letter-spacing-01',
             value: 'Number',
             color: 'violet',
         },
         {
-            label: 'Currency',
+            label: this.transloco.translate('properties.list.typeCurrency'),
             icon: 'finance.currency-dollar',
             value: 'Currency',
             color: 'indigo',
         },
         {
-            label: 'Lookup',
+            label: this.transloco.translate('properties.list.typeLookup'),
             icon: 'custom.list-cards',
             value: 'Lookup',
             color: 'lime',
@@ -814,7 +841,7 @@ class PropertiesList {
         return [
             {
                 icon: 'general.plus',
-                label: 'Create',
+                label: this.transloco.translate('properties.list.createAction'),
                 color: 'primary',
                 action: () => {
                     this.createProperty();
@@ -822,16 +849,17 @@ class PropertiesList {
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "tableActions" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
     rowActions = signal([
         {
             icon: 'custom.pencil',
-            tooltip: 'Edit',
+            tooltip: this.transloco.translate('properties.list.editAction'),
             color: 'primary',
             action: (row) => this.editRow(row),
         },
         {
             icon: 'general.trash-01',
-            tooltip: 'Delete',
+            tooltip: this.transloco.translate('properties.list.deleteAction'),
             color: 'danger',
             variant: 'outlined',
             action: (row) => this.deleteRow(row),
@@ -840,6 +868,7 @@ class PropertiesList {
                 type: 'popup',
                 confirmationType: 'delete',
             },
+            loading: (row) => this.deletingRowIds().includes(row.id),
         },
     ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
     loading = this.facade.isLoading('getAll');
@@ -867,7 +896,13 @@ class PropertiesList {
         if (!row?.id) {
             return;
         }
-        this.facade.delete(row.id);
+        this.deletingRowIds.update((ids) => [...ids, row.id]);
+        this.facade
+            .delete(row.id)
+            .pipe(finalize$1(() => {
+            this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.id));
+        }))
+            .subscribe();
     }
     createProperty() {
         this.navigatePreservingTab(['../properties-form']);
@@ -898,16 +933,26 @@ class PropertiesList {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        All Properties\n      </h1>\n      <mt-breadcrumb\n        [items]=\"breadcrumbItems()\"\n        [styleClass]=\"'flex justify-center'\"\n      >\n      </mt-breadcrumb>\n    </div>\n  </div>\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    (onTabChange)=\"onTabChange($event)\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [loading]=\"loading()\"\n  >\n    <ng-template #empty>\n      <div headless class=\"flex-col justify-center items-center w-full p-5\">\n        <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\n          <svg\n            width=\"152\"\n            height=\"120\"\n            viewBox=\"0 0 152 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n            <g filter=\"url(#filter0_ddd_2474_28277)\">\n              <path\n                d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n                fill=\"#FAFAFA\"\n              />\n              <ellipse\n                cx=\"45.6\"\n                cy=\"54.3998\"\n                rx=\"25.6\"\n                ry=\"25.6\"\n                fill=\"url(#paint0_linear_2474_28277)\"\n              />\n              <circle\n                cx=\"77.6016\"\n                cy=\"48\"\n                r=\"32\"\n                fill=\"url(#paint1_linear_2474_28277)\"\n              />\n              <ellipse\n                cx=\"109.599\"\n                cy=\"57.6002\"\n                rx=\"22.4\"\n                ry=\"22.4\"\n                fill=\"url(#paint2_linear_2474_28277)\"\n              />\n            </g>\n            <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n            <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n            <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n              <div\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n                style=\"\n                  backdrop-filter: blur(4px);\n                  clip-path: url(#bgblur_0_2474_28277_clip_path);\n                  height: 100%;\n                  width: 100%;\n                \"\n              ></div>\n            </foreignObject>\n            <g data-figma-bg-blur-radius=\"8\">\n              <path\n                d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                fill=\"#344054\"\n                fill-opacity=\"0.4\"\n              />\n              <path\n                d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </g>\n            <defs>\n              <filter\n                id=\"filter0_ddd_2474_28277\"\n                x=\"0\"\n                y=\"16\"\n                width=\"152\"\n                height=\"104\"\n                filterUnits=\"userSpaceOnUse\"\n                color-interpolation-filters=\"sRGB\"\n              >\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"1.5\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"3\" />\n                <feGaussianBlur stdDeviation=\"1.5\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"BackgroundImageFix\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"8\" />\n                <feGaussianBlur stdDeviation=\"4\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect1_dropShadow_2474_28277\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"20\" />\n                <feGaussianBlur stdDeviation=\"12\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect2_dropShadow_2474_28277\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in=\"SourceGraphic\"\n                  in2=\"effect3_dropShadow_2474_28277\"\n                  result=\"shape\"\n                />\n              </filter>\n              <clipPath\n                id=\"bgblur_0_2474_28277_clip_path\"\n                transform=\"translate(-44 -54)\"\n              >\n                <path\n                  d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                />\n              </clipPath>\n              <linearGradient\n                id=\"paint0_linear_2474_28277\"\n                x1=\"25.9429\"\n                y1=\"37.4855\"\n                x2=\"71.2\"\n                y2=\"79.9998\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint1_linear_2474_28277\"\n                x1=\"53.0301\"\n                y1=\"26.8571\"\n                x2=\"109.602\"\n                y2=\"80\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint2_linear_2474_28277\"\n                x1=\"92.3992\"\n                y1=\"42.8002\"\n                x2=\"131.999\"\n                y2=\"80.0002\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n            </defs>\n          </svg>\n\n          <div class=\"flex flex-col gap-1\">\n            <div class=\"text-md text-surface-600\">{{ \"No data to show\" }}</div>\n          </div>\n          <div>\n            <mt-button\n              label=\"Add New Property\"\n              icon=\"general.plus\"\n              (click)=\"createProperty()\"\n            />\n          </div>\n        </div>\n        <p-divider type=\"solid\">\n          <div class=\"text-lg text-surface-600\">Create from Type Template</div>\n        </p-divider>\n        <div class=\"flex gap-3 mt-5 justify-center\">\n          @for (card of propertyTypes(); track card.label) {\n            <mt-card\n              headless\n              class=\"w-25 tailwind-4 cursor-pointer\"\n              style=\"background-color: #fafafa\"\n              (click)=\"createPropertyWithType(card.value)\"\n            >\n              <div class=\"content flex flex-col gap-3 items-center text-center\">\n                <mt-avatar\n                  [style.--p-avatar-background]=\"\n                    'var(--p-' + card.color + '-100)'\n                  \"\n                  [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n                  [icon]=\"card.icon\"\n                  shape=\"square\"\n                ></mt-avatar>\n                <div class=\"flex flex-col gap-1\">\n                  <div class=\"text-xs font-normal\">{{ card.label }}</div>\n                </div>\n              </div>\n            </mt-card>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </mt-table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        {{ \"properties.list.pageTitle\" | transloco }}\n      </h1>\n      <mt-breadcrumb\n        [items]=\"breadcrumbItems()\"\n        [styleClass]=\"'flex justify-center'\"\n      >\n      </mt-breadcrumb>\n    </div>\n  </div>\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    (onTabChange)=\"onTabChange($event)\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [loading]=\"loading()\"\n  >\n    <ng-template #empty>\n      <div headless class=\"flex-col justify-center items-center w-full p-5\">\n        <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\n          <svg\n            width=\"152\"\n            height=\"120\"\n            viewBox=\"0 0 152 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n            <g filter=\"url(#filter0_ddd_2474_28277)\">\n              <path\n                d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n                fill=\"#FAFAFA\"\n              />\n              <ellipse\n                cx=\"45.6\"\n                cy=\"54.3998\"\n                rx=\"25.6\"\n                ry=\"25.6\"\n                fill=\"url(#paint0_linear_2474_28277)\"\n              />\n              <circle\n                cx=\"77.6016\"\n                cy=\"48\"\n                r=\"32\"\n                fill=\"url(#paint1_linear_2474_28277)\"\n              />\n              <ellipse\n                cx=\"109.599\"\n                cy=\"57.6002\"\n                rx=\"22.4\"\n                ry=\"22.4\"\n                fill=\"url(#paint2_linear_2474_28277)\"\n              />\n            </g>\n            <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n            <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n            <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n              <div\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n                style=\"\n                  backdrop-filter: blur(4px);\n                  clip-path: url(#bgblur_0_2474_28277_clip_path);\n                  height: 100%;\n                  width: 100%;\n                \"\n              ></div>\n            </foreignObject>\n            <g data-figma-bg-blur-radius=\"8\">\n              <path\n                d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                fill=\"#344054\"\n                fill-opacity=\"0.4\"\n              />\n              <path\n                d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </g>\n            <defs>\n              <filter\n                id=\"filter0_ddd_2474_28277\"\n                x=\"0\"\n                y=\"16\"\n                width=\"152\"\n                height=\"104\"\n                filterUnits=\"userSpaceOnUse\"\n                color-interpolation-filters=\"sRGB\"\n              >\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"1.5\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"3\" />\n                <feGaussianBlur stdDeviation=\"1.5\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"BackgroundImageFix\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"8\" />\n                <feGaussianBlur stdDeviation=\"4\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect1_dropShadow_2474_28277\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"20\" />\n                <feGaussianBlur stdDeviation=\"12\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect2_dropShadow_2474_28277\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in=\"SourceGraphic\"\n                  in2=\"effect3_dropShadow_2474_28277\"\n                  result=\"shape\"\n                />\n              </filter>\n              <clipPath\n                id=\"bgblur_0_2474_28277_clip_path\"\n                transform=\"translate(-44 -54)\"\n              >\n                <path\n                  d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                />\n              </clipPath>\n              <linearGradient\n                id=\"paint0_linear_2474_28277\"\n                x1=\"25.9429\"\n                y1=\"37.4855\"\n                x2=\"71.2\"\n                y2=\"79.9998\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint1_linear_2474_28277\"\n                x1=\"53.0301\"\n                y1=\"26.8571\"\n                x2=\"109.602\"\n                y2=\"80\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint2_linear_2474_28277\"\n                x1=\"92.3992\"\n                y1=\"42.8002\"\n                x2=\"131.999\"\n                y2=\"80.0002\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n            </defs>\n          </svg>\n\n          <div class=\"flex flex-col gap-1\">\n            <div class=\"text-md text-surface-600\">\n              {{ \"properties.list.emptyStateNoData\" | transloco }}\n            </div>\n          </div>\n          <div>\n            <mt-button\n              [label]=\"'properties.list.addNewProperty' | transloco\"\n              icon=\"general.plus\"\n              (click)=\"createProperty()\"\n            />\n          </div>\n        </div>\n        <p-divider type=\"solid\">\n          <div class=\"text-lg text-surface-600\">\n            {{ \"properties.list.emptyStateTemplate\" | transloco }}\n          </div>\n        </p-divider>\n        <div class=\"flex gap-3 mt-5 justify-center\">\n          @for (card of propertyTypes(); track card.label) {\n            <mt-card\n              headless\n              class=\"w-25 tailwind-4 cursor-pointer\"\n              style=\"background-color: #fafafa\"\n              (click)=\"createPropertyWithType(card.value)\"\n            >\n              <div class=\"content flex flex-col gap-3 items-center text-center\">\n                <mt-avatar\n                  [style.--p-avatar-background]=\"\n                    'var(--p-' + card.color + '-100)'\n                  \"\n                  [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n                  [icon]=\"card.icon\"\n                  shape=\"square\"\n                ></mt-avatar>\n                <div class=\"flex flex-col gap-1\">\n                  <div class=\"text-xs font-normal\">{{ card.label }}</div>\n                </div>\n              </div>\n            </mt-card>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </mt-table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesList, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-properties-list', standalone: true, imports: [CommonModule, Table, Breadcrumb, Card, Avatar, Divider, Button], template: "<div class=\"space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        All Properties\n      </h1>\n      <mt-breadcrumb\n        [items]=\"breadcrumbItems()\"\n        [styleClass]=\"'flex justify-center'\"\n      >\n      </mt-breadcrumb>\n    </div>\n  </div>\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    (onTabChange)=\"onTabChange($event)\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [loading]=\"loading()\"\n  >\n    <ng-template #empty>\n      <div headless class=\"flex-col justify-center items-center w-full p-5\">\n        <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\n          <svg\n            width=\"152\"\n            height=\"120\"\n            viewBox=\"0 0 152 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n            <g filter=\"url(#filter0_ddd_2474_28277)\">\n              <path\n                d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n                fill=\"#FAFAFA\"\n              />\n              <ellipse\n                cx=\"45.6\"\n                cy=\"54.3998\"\n                rx=\"25.6\"\n                ry=\"25.6\"\n                fill=\"url(#paint0_linear_2474_28277)\"\n              />\n              <circle\n                cx=\"77.6016\"\n                cy=\"48\"\n                r=\"32\"\n                fill=\"url(#paint1_linear_2474_28277)\"\n              />\n              <ellipse\n                cx=\"109.599\"\n                cy=\"57.6002\"\n                rx=\"22.4\"\n                ry=\"22.4\"\n                fill=\"url(#paint2_linear_2474_28277)\"\n              />\n            </g>\n            <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n            <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n            <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n              <div\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n                style=\"\n                  backdrop-filter: blur(4px);\n                  clip-path: url(#bgblur_0_2474_28277_clip_path);\n                  height: 100%;\n                  width: 100%;\n                \"\n              ></div>\n            </foreignObject>\n            <g data-figma-bg-blur-radius=\"8\">\n              <path\n                d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                fill=\"#344054\"\n                fill-opacity=\"0.4\"\n              />\n              <path\n                d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </g>\n            <defs>\n              <filter\n                id=\"filter0_ddd_2474_28277\"\n                x=\"0\"\n                y=\"16\"\n                width=\"152\"\n                height=\"104\"\n                filterUnits=\"userSpaceOnUse\"\n                color-interpolation-filters=\"sRGB\"\n              >\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"1.5\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"3\" />\n                <feGaussianBlur stdDeviation=\"1.5\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"BackgroundImageFix\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"8\" />\n                <feGaussianBlur stdDeviation=\"4\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect1_dropShadow_2474_28277\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"20\" />\n                <feGaussianBlur stdDeviation=\"12\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect2_dropShadow_2474_28277\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in=\"SourceGraphic\"\n                  in2=\"effect3_dropShadow_2474_28277\"\n                  result=\"shape\"\n                />\n              </filter>\n              <clipPath\n                id=\"bgblur_0_2474_28277_clip_path\"\n                transform=\"translate(-44 -54)\"\n              >\n                <path\n                  d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                />\n              </clipPath>\n              <linearGradient\n                id=\"paint0_linear_2474_28277\"\n                x1=\"25.9429\"\n                y1=\"37.4855\"\n                x2=\"71.2\"\n                y2=\"79.9998\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint1_linear_2474_28277\"\n                x1=\"53.0301\"\n                y1=\"26.8571\"\n                x2=\"109.602\"\n                y2=\"80\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint2_linear_2474_28277\"\n                x1=\"92.3992\"\n                y1=\"42.8002\"\n                x2=\"131.999\"\n                y2=\"80.0002\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n            </defs>\n          </svg>\n\n          <div class=\"flex flex-col gap-1\">\n            <div class=\"text-md text-surface-600\">{{ \"No data to show\" }}</div>\n          </div>\n          <div>\n            <mt-button\n              label=\"Add New Property\"\n              icon=\"general.plus\"\n              (click)=\"createProperty()\"\n            />\n          </div>\n        </div>\n        <p-divider type=\"solid\">\n          <div class=\"text-lg text-surface-600\">Create from Type Template</div>\n        </p-divider>\n        <div class=\"flex gap-3 mt-5 justify-center\">\n          @for (card of propertyTypes(); track card.label) {\n            <mt-card\n              headless\n              class=\"w-25 tailwind-4 cursor-pointer\"\n              style=\"background-color: #fafafa\"\n              (click)=\"createPropertyWithType(card.value)\"\n            >\n              <div class=\"content flex flex-col gap-3 items-center text-center\">\n                <mt-avatar\n                  [style.--p-avatar-background]=\"\n                    'var(--p-' + card.color + '-100)'\n                  \"\n                  [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n                  [icon]=\"card.icon\"\n                  shape=\"square\"\n                ></mt-avatar>\n                <div class=\"flex flex-col gap-1\">\n                  <div class=\"text-xs font-normal\">{{ card.label }}</div>\n                </div>\n              </div>\n            </mt-card>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </mt-table>\n</div>\n" }]
+            args: [{ selector: 'mt-properties-list', standalone: true, imports: [
+                        CommonModule,
+                        Table,
+                        Breadcrumb,
+                        Card,
+                        Avatar,
+                        Divider,
+                        Button,
+                        TranslocoModule,
+                    ], template: "<div class=\"space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        {{ \"properties.list.pageTitle\" | transloco }}\n      </h1>\n      <mt-breadcrumb\n        [items]=\"breadcrumbItems()\"\n        [styleClass]=\"'flex justify-center'\"\n      >\n      </mt-breadcrumb>\n    </div>\n  </div>\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    (onTabChange)=\"onTabChange($event)\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [loading]=\"loading()\"\n  >\n    <ng-template #empty>\n      <div headless class=\"flex-col justify-center items-center w-full p-5\">\n        <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\n          <svg\n            width=\"152\"\n            height=\"120\"\n            viewBox=\"0 0 152 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n            <g filter=\"url(#filter0_ddd_2474_28277)\">\n              <path\n                d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n                fill=\"#FAFAFA\"\n              />\n              <ellipse\n                cx=\"45.6\"\n                cy=\"54.3998\"\n                rx=\"25.6\"\n                ry=\"25.6\"\n                fill=\"url(#paint0_linear_2474_28277)\"\n              />\n              <circle\n                cx=\"77.6016\"\n                cy=\"48\"\n                r=\"32\"\n                fill=\"url(#paint1_linear_2474_28277)\"\n              />\n              <ellipse\n                cx=\"109.599\"\n                cy=\"57.6002\"\n                rx=\"22.4\"\n                ry=\"22.4\"\n                fill=\"url(#paint2_linear_2474_28277)\"\n              />\n            </g>\n            <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n            <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n            <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n            <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n              <div\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n                style=\"\n                  backdrop-filter: blur(4px);\n                  clip-path: url(#bgblur_0_2474_28277_clip_path);\n                  height: 100%;\n                  width: 100%;\n                \"\n              ></div>\n            </foreignObject>\n            <g data-figma-bg-blur-radius=\"8\">\n              <path\n                d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                fill=\"#344054\"\n                fill-opacity=\"0.4\"\n              />\n              <path\n                d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </g>\n            <defs>\n              <filter\n                id=\"filter0_ddd_2474_28277\"\n                x=\"0\"\n                y=\"16\"\n                width=\"152\"\n                height=\"104\"\n                filterUnits=\"userSpaceOnUse\"\n                color-interpolation-filters=\"sRGB\"\n              >\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"1.5\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"3\" />\n                <feGaussianBlur stdDeviation=\"1.5\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"BackgroundImageFix\"\n                  result=\"effect1_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"8\" />\n                <feGaussianBlur stdDeviation=\"4\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect1_dropShadow_2474_28277\"\n                  result=\"effect2_dropShadow_2474_28277\"\n                />\n                <feColorMatrix\n                  in=\"SourceAlpha\"\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                  result=\"hardAlpha\"\n                />\n                <feMorphology\n                  radius=\"4\"\n                  operator=\"erode\"\n                  in=\"SourceAlpha\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feOffset dy=\"20\" />\n                <feGaussianBlur stdDeviation=\"12\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix\n                  type=\"matrix\"\n                  values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in2=\"effect2_dropShadow_2474_28277\"\n                  result=\"effect3_dropShadow_2474_28277\"\n                />\n                <feBlend\n                  mode=\"normal\"\n                  in=\"SourceGraphic\"\n                  in2=\"effect3_dropShadow_2474_28277\"\n                  result=\"shape\"\n                />\n              </filter>\n              <clipPath\n                id=\"bgblur_0_2474_28277_clip_path\"\n                transform=\"translate(-44 -54)\"\n              >\n                <path\n                  d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n                />\n              </clipPath>\n              <linearGradient\n                id=\"paint0_linear_2474_28277\"\n                x1=\"25.9429\"\n                y1=\"37.4855\"\n                x2=\"71.2\"\n                y2=\"79.9998\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint1_linear_2474_28277\"\n                x1=\"53.0301\"\n                y1=\"26.8571\"\n                x2=\"109.602\"\n                y2=\"80\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n              <linearGradient\n                id=\"paint2_linear_2474_28277\"\n                x1=\"92.3992\"\n                y1=\"42.8002\"\n                x2=\"131.999\"\n                y2=\"80.0002\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop stop-color=\"#D0D5DD\" />\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n              </linearGradient>\n            </defs>\n          </svg>\n\n          <div class=\"flex flex-col gap-1\">\n            <div class=\"text-md text-surface-600\">\n              {{ \"properties.list.emptyStateNoData\" | transloco }}\n            </div>\n          </div>\n          <div>\n            <mt-button\n              [label]=\"'properties.list.addNewProperty' | transloco\"\n              icon=\"general.plus\"\n              (click)=\"createProperty()\"\n            />\n          </div>\n        </div>\n        <p-divider type=\"solid\">\n          <div class=\"text-lg text-surface-600\">\n            {{ \"properties.list.emptyStateTemplate\" | transloco }}\n          </div>\n        </p-divider>\n        <div class=\"flex gap-3 mt-5 justify-center\">\n          @for (card of propertyTypes(); track card.label) {\n            <mt-card\n              headless\n              class=\"w-25 tailwind-4 cursor-pointer\"\n              style=\"background-color: #fafafa\"\n              (click)=\"createPropertyWithType(card.value)\"\n            >\n              <div class=\"content flex flex-col gap-3 items-center text-center\">\n                <mt-avatar\n                  [style.--p-avatar-background]=\"\n                    'var(--p-' + card.color + '-100)'\n                  \"\n                  [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n                  [icon]=\"card.icon\"\n                  shape=\"square\"\n                ></mt-avatar>\n                <div class=\"flex flex-col gap-1\">\n                  <div class=\"text-xs font-normal\">{{ card.label }}</div>\n                </div>\n              </div>\n            </mt-card>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </mt-table>\n</div>\n" }]
         }] });
 
 class ApiConfiguration {
     facade = inject(PropertiesFacade);
     destroyRef = inject(DestroyRef);
+    transloco = inject(TranslocoService);
     schema = signal(null, ...(ngDevMode ? [{ debugName: "schema" }] : []));
     isWriting = false;
     touched = false;
@@ -1063,7 +1108,7 @@ class ApiConfiguration {
                 useExisting: forwardRef(() => ApiConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n      <mt-text-field\n        formControlName=\"endpoint\"\n        label=\"Endpoint\"\n        placeholder=\"https://api.example.com/items\"\n      />\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          type=\"button\"\n          [text]=\"true\"\n          icon=\"general.plus\"\n          label=\"Add Header\"\n          (click)=\"addHeader()\"\n        />\n        <mt-button\n          type=\"button\"\n          label=\"Test API\"\n          [loading]=\"isTesting()\"\n          (click)=\"testApi()\"\n        />\n      </div>\n    </div>\n\n    @if (headers.controls.length) {\n      <div class=\"space-y-3\">\n        <div class=\"text-sm font-medium text-surface-500\">Headers</div>\n        <div class=\"space-y-3\">\n          @for (\n            headerCtrl of headers.controls;\n            track headerCtrl;\n            let i = $index\n          ) {\n            <div\n              [formGroup]=\"headerCtrl\"\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n            >\n              <mt-text-field formControlName=\"key\" label=\"Key\" />\n              <mt-text-field formControlName=\"value\" label=\"Value\" />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"general.trash-01\"\n                (click)=\"removeHeader(i)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        No headers added. Use \u201CAdd Header\u201D to include authentication or custom\n        headers.\n      </p>\n    }\n  </div>\n\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    @if (hasDetectedSchema()) {\n      <div class=\"grid gap-4 md:grid-cols-2\">\n        <mt-select-field\n          formControlName=\"key\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          label=\"Key field\"\n        />\n        <mt-select-field\n          formControlName=\"value\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          label=\"Value field\"\n        />\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        Run \u201CTest API\u201D to detect available fields.\n      </p>\n    }\n\n    <div class=\"flex items-center justify-between gap-4\">\n      <mt-toggle-field\n        formControlName=\"supportMultiSelect\"\n        label=\"Support multiple select\"\n      />\n      @if (isTesting()) {\n        <span class=\"text-xs text-surface-400\">Testing...</span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n      <mt-text-field\n        formControlName=\"endpoint\"\n        [label]=\"'properties.form.endpoint' | transloco\"\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n      />\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          type=\"button\"\n          [text]=\"true\"\n          icon=\"general.plus\"\n          [label]=\"'properties.form.addHeader' | transloco\"\n          (click)=\"addHeader()\"\n        />\n        <mt-button\n          type=\"button\"\n          [label]=\"'properties.form.testApi' | transloco\"\n          [loading]=\"isTesting()\"\n          (click)=\"testApi()\"\n        />\n      </div>\n    </div>\n\n    @if (headers.controls.length) {\n      <div class=\"space-y-3\">\n        <div class=\"text-sm font-medium text-surface-500\">\n          {{ \"properties.form.headers\" | transloco }}\n        </div>\n        <div class=\"space-y-3\">\n          @for (\n            headerCtrl of headers.controls;\n            track headerCtrl;\n            let i = $index\n          ) {\n            <div\n              [formGroup]=\"headerCtrl\"\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n            >\n              <mt-text-field\n                formControlName=\"key\"\n                [label]=\"'properties.form.headerKey' | transloco\"\n              />\n              <mt-text-field\n                formControlName=\"value\"\n                [label]=\"'properties.form.headerValue' | transloco\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"general.trash-01\"\n                (click)=\"removeHeader(i)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\n      </p>\n    }\n  </div>\n\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    @if (hasDetectedSchema()) {\n      <div class=\"grid gap-4 md:grid-cols-2\">\n        <mt-select-field\n          formControlName=\"key\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.keyField' | transloco\"\n        />\n        <mt-select-field\n          formControlName=\"value\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.valueField' | transloco\"\n        />\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n      </p>\n    }\n\n    <div class=\"flex items-center justify-between gap-4\">\n      <mt-toggle-field\n        formControlName=\"supportMultiSelect\"\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n      />\n      @if (isTesting()) {\n        <span class=\"text-xs text-surface-400\">\n          {{ \"properties.form.messageTesting\" | transloco }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ApiConfiguration, decorators: [{
             type: Component,
@@ -1074,19 +1119,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         SelectField,
                         ToggleField,
                         Button,
+                        TranslocoModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ApiConfiguration),
                             multi: true,
                         },
-                    ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n      <mt-text-field\n        formControlName=\"endpoint\"\n        label=\"Endpoint\"\n        placeholder=\"https://api.example.com/items\"\n      />\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          type=\"button\"\n          [text]=\"true\"\n          icon=\"general.plus\"\n          label=\"Add Header\"\n          (click)=\"addHeader()\"\n        />\n        <mt-button\n          type=\"button\"\n          label=\"Test API\"\n          [loading]=\"isTesting()\"\n          (click)=\"testApi()\"\n        />\n      </div>\n    </div>\n\n    @if (headers.controls.length) {\n      <div class=\"space-y-3\">\n        <div class=\"text-sm font-medium text-surface-500\">Headers</div>\n        <div class=\"space-y-3\">\n          @for (\n            headerCtrl of headers.controls;\n            track headerCtrl;\n            let i = $index\n          ) {\n            <div\n              [formGroup]=\"headerCtrl\"\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n            >\n              <mt-text-field formControlName=\"key\" label=\"Key\" />\n              <mt-text-field formControlName=\"value\" label=\"Value\" />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"general.trash-01\"\n                (click)=\"removeHeader(i)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        No headers added. Use \u201CAdd Header\u201D to include authentication or custom\n        headers.\n      </p>\n    }\n  </div>\n\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    @if (hasDetectedSchema()) {\n      <div class=\"grid gap-4 md:grid-cols-2\">\n        <mt-select-field\n          formControlName=\"key\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          label=\"Key field\"\n        />\n        <mt-select-field\n          formControlName=\"value\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          label=\"Value field\"\n        />\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        Run \u201CTest API\u201D to detect available fields.\n      </p>\n    }\n\n    <div class=\"flex items-center justify-between gap-4\">\n      <mt-toggle-field\n        formControlName=\"supportMultiSelect\"\n        label=\"Support multiple select\"\n      />\n      @if (isTesting()) {\n        <span class=\"text-xs text-surface-400\">Testing...</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n      <mt-text-field\n        formControlName=\"endpoint\"\n        [label]=\"'properties.form.endpoint' | transloco\"\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n      />\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          type=\"button\"\n          [text]=\"true\"\n          icon=\"general.plus\"\n          [label]=\"'properties.form.addHeader' | transloco\"\n          (click)=\"addHeader()\"\n        />\n        <mt-button\n          type=\"button\"\n          [label]=\"'properties.form.testApi' | transloco\"\n          [loading]=\"isTesting()\"\n          (click)=\"testApi()\"\n        />\n      </div>\n    </div>\n\n    @if (headers.controls.length) {\n      <div class=\"space-y-3\">\n        <div class=\"text-sm font-medium text-surface-500\">\n          {{ \"properties.form.headers\" | transloco }}\n        </div>\n        <div class=\"space-y-3\">\n          @for (\n            headerCtrl of headers.controls;\n            track headerCtrl;\n            let i = $index\n          ) {\n            <div\n              [formGroup]=\"headerCtrl\"\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n            >\n              <mt-text-field\n                formControlName=\"key\"\n                [label]=\"'properties.form.headerKey' | transloco\"\n              />\n              <mt-text-field\n                formControlName=\"value\"\n                [label]=\"'properties.form.headerValue' | transloco\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"general.trash-01\"\n                (click)=\"removeHeader(i)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\n      </p>\n    }\n  </div>\n\n  <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n    @if (hasDetectedSchema()) {\n      <div class=\"grid gap-4 md:grid-cols-2\">\n        <mt-select-field\n          formControlName=\"key\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.keyField' | transloco\"\n        />\n        <mt-select-field\n          formControlName=\"value\"\n          [options]=\"apiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.valueField' | transloco\"\n        />\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n      </p>\n    }\n\n    <div class=\"flex items-center justify-between gap-4\">\n      <mt-toggle-field\n        formControlName=\"supportMultiSelect\"\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n      />\n      @if (isTesting()) {\n        <span class=\"text-xs text-surface-400\">\n          {{ \"properties.form.messageTesting\" | transloco }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class CheckListFormConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
+    transloco = inject(TranslocoService);
     lookups = this.propertiesFacade.lookups;
     configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
@@ -1099,7 +1146,7 @@ class CheckListFormConfiguration {
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1109,7 +1156,7 @@ class CheckListFormConfiguration {
                     {
                         key: 'lookup',
                         type: 'select',
-                        label: 'Select Lookup',
+                        label: this.transloco.translate('properties.form.selectLookup'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         filter: true,
@@ -1118,7 +1165,7 @@ class CheckListFormConfiguration {
                     {
                         key: 'scopeId',
                         type: 'select',
-                        label: 'Select Scope',
+                        label: this.transloco.translate('properties.form.selectScope'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         options: this.scopeItems(),
@@ -1130,8 +1177,8 @@ class CheckListFormConfiguration {
                         options: this.configProperties(),
                         optionLabel: 'title',
                         optionValue: 'key',
-                        sourceHeader: 'Available Properties',
-                        targetHeader: 'Selected Properties',
+                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
+                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
                     }),
                 ],
             },
@@ -1157,7 +1204,7 @@ class CheckListFormConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckListFormConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1172,6 +1219,7 @@ class DynamicListConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
+    transloco = inject(TranslocoService);
     configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
     configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((value) => value?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
@@ -1183,7 +1231,7 @@ class DynamicListConfiguration {
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1193,7 +1241,7 @@ class DynamicListConfiguration {
                     {
                         key: 'scopeId',
                         type: 'select',
-                        label: 'Select Scope',
+                        label: this.transloco.translate('properties.form.selectScope'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         filter: true,
@@ -1205,13 +1253,13 @@ class DynamicListConfiguration {
                         options: this.configProperties(),
                         optionLabel: 'title',
                         optionValue: 'key',
-                        sourceHeader: 'Available Properties',
-                        targetHeader: 'Selected Properties',
+                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
+                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
                     }),
                     {
-                        key: 'mapToActual',
+                        key: 'mappingBehaviour',
                         type: 'toggle',
-                        label: 'Map To Actual',
+                        label: this.transloco.translate('properties.form.mapToActual'),
                         cssClass: 'md:col-span-2',
                     },
                 ],
@@ -1233,7 +1281,7 @@ class DynamicListConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DynamicListConfiguration, isStandalone: true, selector: "mt-dynamic-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DynamicListConfiguration, isStandalone: true, selector: "mt-dynamic-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1248,6 +1296,7 @@ class EditableListViewConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
+    transloco = inject(TranslocoService);
     configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
     configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((value) => value?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
@@ -1259,7 +1308,7 @@ class EditableListViewConfiguration {
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1269,7 +1318,7 @@ class EditableListViewConfiguration {
                     {
                         key: 'scopeId',
                         type: 'select',
-                        label: 'Select Scope',
+                        label: this.transloco.translate('properties.form.selectScope'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         options: this.scopeItems(),
@@ -1280,18 +1329,18 @@ class EditableListViewConfiguration {
                         options: this.configProperties(),
                         optionLabel: 'title',
                         optionValue: 'key',
-                        sourceHeader: 'Available Properties',
-                        targetHeader: 'Selected Properties',
+                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
+                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
                     }),
                     {
                         key: 'isEditable',
                         type: 'toggle',
-                        label: 'Is Editable',
+                        label: this.transloco.translate('properties.form.isEditable'),
                     },
                     {
                         key: 'preserveValue',
                         type: 'toggle',
-                        label: 'Preserve Value',
+                        label: this.transloco.translate('properties.form.preserveValue'),
                     },
                 ],
             },
@@ -1312,7 +1361,7 @@ class EditableListViewConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EditableListViewConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: EditableListViewConfiguration, isStandalone: true, selector: "mt-editable-list-view-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: EditableListViewConfiguration, isStandalone: true, selector: "mt-editable-list-view-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1329,6 +1378,7 @@ class InternalModuleConfiguration {
     levels;
     propertiesFacade = inject(PropertiesFacade);
     cc = inject(ControlContainer);
+    transloco = inject(TranslocoService);
     parentGroup = this.cc.control;
     configProperties = this.propertiesFacade.configProperties;
     configScopes = this.propertiesFacade.configScopes;
@@ -1345,7 +1395,7 @@ class InternalModuleConfiguration {
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1355,7 +1405,7 @@ class InternalModuleConfiguration {
                     {
                         key: 'type',
                         type: 'select',
-                        label: 'Type',
+                        label: this.transloco.translate('properties.form.type'),
                         optionLabel: 'scope',
                         optionValue: 'scope',
                         options: this.configScopes(),
@@ -1363,7 +1413,7 @@ class InternalModuleConfiguration {
                     {
                         key: 'scopeId',
                         type: 'select',
-                        label: 'Select Scope',
+                        label: this.transloco.translate('properties.form.selectScope'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         filter: true,
@@ -1372,7 +1422,7 @@ class InternalModuleConfiguration {
                     {
                         type: 'select',
                         key: 'property',
-                        label: 'Value Property',
+                        label: this.transloco.translate('properties.form.valueProperty'),
                         optionLabel: 'title',
                         optionValue: 'key',
                         options: this.configProperties(),
@@ -1383,14 +1433,14 @@ class InternalModuleConfiguration {
                         options: this.configProperties(),
                         optionLabel: 'title',
                         optionValue: 'key',
-                        sourceHeader: 'Available Properties',
-                        targetHeader: 'Selected Properties',
+                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
+                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
                     }),
                     {
                         cssClass: 'md:col-span-2',
                         key: 'preserveValue',
                         type: 'toggle',
-                        label: 'Preserve Value',
+                        label: this.transloco.translate('properties.form.labelPreserveValue'),
                     },
                 ],
             },
@@ -1415,7 +1465,7 @@ class InternalModuleConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InternalModuleConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: InternalModuleConfiguration, isStandalone: true, selector: "mt-internal-module-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: InternalModuleConfiguration, isStandalone: true, selector: "mt-internal-module-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1428,12 +1478,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 
 class LocationConfiguration {
     facade = inject(PropertiesFacade);
+    transloco = inject(TranslocoService);
     countries = this.facade.countries;
     formConfig = computed(() => ({
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1443,7 +1494,7 @@ class LocationConfiguration {
                     {
                         key: 'country',
                         type: 'select',
-                        label: 'Select Country',
+                        label: this.transloco.translate('properties.form.selectCountry'),
                         optionLabel: 'name',
                         optionValue: 'name',
                         options: this.countries(),
@@ -1461,7 +1512,7 @@ class LocationConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LocationConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1474,12 +1525,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 
 class LookupConfiguration {
     facade = inject(PropertiesFacade);
+    transloco = inject(TranslocoService);
     lookups = this.facade.lookups;
     formConfig = computed(() => ({
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1489,7 +1541,7 @@ class LookupConfiguration {
                     {
                         key: 'lookup',
                         type: 'select',
-                        label: 'Select Lookup',
+                        label: this.transloco.translate('properties.form.selectLookup'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         options: this.lookups(),
@@ -1507,7 +1559,7 @@ class LookupConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LookupConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1519,11 +1571,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }], ctorParameters: () => [] });
 
 class PercentageConfiguration {
+    transloco = inject(TranslocoService);
     formConfig = signal({
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1533,14 +1586,14 @@ class PercentageConfiguration {
                     {
                         key: 'color',
                         type: 'color-picker',
-                        label: 'Select Color',
+                        label: this.transloco.translate('properties.form.selectColor'),
                     },
                 ],
             },
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PercentageConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1553,12 +1606,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 
 class UserConfiguration {
     facade = inject(PropertiesFacade);
+    transloco = inject(TranslocoService);
     groups = this.facade.groups;
     formConfig = computed(() => ({
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1568,7 +1622,7 @@ class UserConfiguration {
                     {
                         key: 'group',
                         type: 'select',
-                        label: 'Select Group',
+                        label: this.transloco.translate('properties.form.selectGroup'),
                         optionLabel: 'title',
                         optionValue: 'id',
                         options: this.groups(),
@@ -1586,7 +1640,7 @@ class UserConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UserConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1708,11 +1762,12 @@ const ATTACHMENT_ACCEPT = [
     },
 ];
 class AttachmentConfiguration {
+    transloco = inject(TranslocoService);
     formConfig = signal({
         sections: [
             {
                 key: 'configuration',
-                label: 'Configuration',
+                label: this.transloco.translate('properties.form.configurationSection'),
                 cssClass: ' rounded-xl bg-white \
     shadow-sm \
    px-6 py-4',
@@ -1724,21 +1779,21 @@ class AttachmentConfiguration {
                         options: ATTACHMENT_ACCEPT,
                         optionLabel: 'name',
                         optionValue: 'key',
-                        sourceHeader: 'Available Types',
-                        targetHeader: 'Selected Types',
+                        sourceHeader: this.transloco.translate('properties.form.availableTypes'),
+                        targetHeader: this.transloco.translate('properties.form.selectedTypes'),
                         cssClass: 'md:col-span-2',
                     }),
                     {
                         key: 'IsMulitple',
                         type: 'toggle',
-                        label: 'Allow Multiple Files',
+                        label: this.transloco.translate('properties.form.allowMultiple'),
                     },
                 ],
             },
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AttachmentConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1753,9 +1808,12 @@ class PropertyForm {
     facade = inject(PropertiesFacade);
     router = inject(Router);
     route = inject(ActivatedRoute);
+    transloco = inject(TranslocoService);
     propertyId = input('', ...(ngDevMode ? [{ debugName: "propertyId" }] : []));
     propertyTypes = this.facade.propertyTypes;
-    submitLabel = computed(() => (this.propertyId() ? 'Update' : 'Create'), ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+    submitLabel = computed(() => this.propertyId()
+        ? this.transloco.translate('properties.form.updateButton')
+        : this.transloco.translate('properties.form.createButton'), ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
     isEditing = computed(() => !!this.propertyId(), ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
     // Keep your original structure: "main" is a FormControl<any>, "configuration" is FormControl<any|null>
     propertyForm = new FormGroup({
@@ -1809,18 +1867,19 @@ class PropertyForm {
                     {
                         key: 'viewType',
                         type: 'select',
-                        placeholder: 'Select Property Type',
+                        placeholder: this.transloco.translate('properties.form.selectPropertyType'),
                         optionLabel: 'label.en',
                         optionValue: 'viewType',
                         cssClass: 'w-1/2',
                         options: this.propertyTypes()?.value,
                         disabled: this.isEditing(),
                         filter: true,
+                        hasPlaceholderPrefix: false,
                     },
                     {
                         key: 'isCalculated',
                         type: 'toggle',
-                        label: 'Calculated',
+                        label: this.transloco.translate('properties.form.calculated'),
                         cssClass: 'justify-self-end',
                         relations: [
                             {
@@ -1879,26 +1938,26 @@ class PropertyForm {
             },
             {
                 key: 'default-info',
-                label: 'Default Information',
+                label: this.transloco.translate('properties.form.defaultInfoSection'),
                 type: 'header',
                 cssClass: ' rounded-xl bg-white shadow-sm p-6',
                 bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
                 fields: [
                     {
                         key: 'title.en',
-                        label: 'English Name',
-                        placeholder: 'English Name',
+                        label: this.transloco.translate('properties.form.englishName'),
+                        placeholder: this.transloco.translate('properties.form.enterEnglishName'),
                         validators: [new ValidatorConfig({ type: 'required' })],
                     },
                     {
                         key: 'title.ar',
-                        label: 'Arabic Name',
-                        placeholder: 'Arabic Name',
+                        label: this.transloco.translate('properties.form.arabicName'),
+                        placeholder: this.transloco.translate('properties.form.enterArabicName'),
                         validators: [new ValidatorConfig({ type: 'required' })],
                     },
                     {
                         key: 'description',
-                        label: 'Description',
+                        label: this.transloco.translate('properties.form.description'),
                         type: 'textarea',
                         cssClass: 'md:col-span-2',
                     },
@@ -2087,7 +2146,7 @@ class PropertyForm {
         this.destroyConfigurationComponent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{ propertyId() ? \"Edit Property\" : \"Create New Property\" }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] h-full overflow-y-auto flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <div class=\"flex justify-between items-center gap-6\">\n              <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n              <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"12rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n              <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"10rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n        } @else {\n          <mt-dynamic-form\n            [formConfig]=\"dynamicFormConfigMain()\"\n            [formControlName]=\"'main'\"\n          />\n          @if (configurationFormConfig()) {\n            <mt-dynamic-form\n              formControlName=\"configuration\"\n              [formConfig]=\"configurationFormConfig()!\"\n            />\n          } @else {\n            <ng-container #configurationHost></ng-container>\n            @if (!configurationComponentExists()) {\n              @switch (propertyType()) {\n                @case (\"User\") {\n                  <mt-user-configuration />\n                }\n                @case (\"Percentage\") {\n                  <mt-percentage-configuration />\n                }\n                @case (\"Lookup\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"LookupMultiSelect\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"InternalModule\") {\n                  <mt-internal-module-configuration />\n                }\n                @case (\"DynamicList\") {\n                  <mt-dynamic-list-configuration />\n                }\n                @case (\"API\") {\n                  <mt-api-configuration formControlName=\"configuration\" />\n                }\n                <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n                @case (\"Attachment\") {\n                  <mt-attachment-configuration />\n                }\n                <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n                @case (\"EditableListView\") {\n                  <mt-editable-list-view-configuration />\n                }\n                @case (\"LookupLog\") {\n                  <mt-check-list-form-configuration />\n                }\n                <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n                @case (\"Location\") {\n                  <mt-location-configuration />\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: DynamicListConfiguration, selector: "mt-dynamic-list-configuration" }, { kind: "component", type: EditableListViewConfiguration, selector: "mt-editable-list-view-configuration" }, { kind: "component", type: InternalModuleConfiguration, selector: "mt-internal-module-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{\n            propertyId()\n              ? (\"properties.form.editProperty\" | transloco)\n              : (\"properties.form.createNewProperty\" | transloco)\n          }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] h-full overflow-y-auto flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <div class=\"flex justify-between items-center gap-6\">\n              <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n              <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"12rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n              <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"10rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n        } @else {\n          <mt-dynamic-form\n            [formConfig]=\"dynamicFormConfigMain()\"\n            [formControlName]=\"'main'\"\n          />\n          @if (configurationFormConfig()) {\n            <mt-dynamic-form\n              formControlName=\"configuration\"\n              [formConfig]=\"configurationFormConfig()!\"\n            />\n          } @else {\n            <ng-container #configurationHost></ng-container>\n            @if (!configurationComponentExists()) {\n              @switch (propertyType()) {\n                @case (\"User\") {\n                  <mt-user-configuration />\n                }\n                @case (\"Percentage\") {\n                  <mt-percentage-configuration />\n                }\n                @case (\"Lookup\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"LookupMultiSelect\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"InternalModule\") {\n                  <mt-internal-module-configuration />\n                }\n                @case (\"DynamicList\") {\n                  <mt-dynamic-list-configuration />\n                }\n                @case (\"API\") {\n                  <mt-api-configuration formControlName=\"configuration\" />\n                }\n                <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n                @case (\"Attachment\") {\n                  <mt-attachment-configuration />\n                }\n                <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n                @case (\"EditableListView\") {\n                  <mt-editable-list-view-configuration />\n                }\n                @case (\"LookupLog\") {\n                  <mt-check-list-form-configuration />\n                }\n                <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n                @case (\"Location\") {\n                  <mt-location-configuration />\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: DynamicListConfiguration, selector: "mt-dynamic-list-configuration" }, { kind: "component", type: EditableListViewConfiguration, selector: "mt-editable-list-view-configuration" }, { kind: "component", type: InternalModuleConfiguration, selector: "mt-internal-module-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,
@@ -2108,7 +2167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         UserConfiguration,
                         AttachmentConfiguration,
                         SkeletonModule,
-                    ], template: "<mt-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{ propertyId() ? \"Edit Property\" : \"Create New Property\" }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] h-full overflow-y-auto flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <div class=\"flex justify-between items-center gap-6\">\n              <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n              <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"12rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n              <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"10rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n        } @else {\n          <mt-dynamic-form\n            [formConfig]=\"dynamicFormConfigMain()\"\n            [formControlName]=\"'main'\"\n          />\n          @if (configurationFormConfig()) {\n            <mt-dynamic-form\n              formControlName=\"configuration\"\n              [formConfig]=\"configurationFormConfig()!\"\n            />\n          } @else {\n            <ng-container #configurationHost></ng-container>\n            @if (!configurationComponentExists()) {\n              @switch (propertyType()) {\n                @case (\"User\") {\n                  <mt-user-configuration />\n                }\n                @case (\"Percentage\") {\n                  <mt-percentage-configuration />\n                }\n                @case (\"Lookup\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"LookupMultiSelect\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"InternalModule\") {\n                  <mt-internal-module-configuration />\n                }\n                @case (\"DynamicList\") {\n                  <mt-dynamic-list-configuration />\n                }\n                @case (\"API\") {\n                  <mt-api-configuration formControlName=\"configuration\" />\n                }\n                <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n                @case (\"Attachment\") {\n                  <mt-attachment-configuration />\n                }\n                <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n                @case (\"EditableListView\") {\n                  <mt-editable-list-view-configuration />\n                }\n                @case (\"LookupLog\") {\n                  <mt-check-list-form-configuration />\n                }\n                <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n                @case (\"Location\") {\n                  <mt-location-configuration />\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n" }]
+                        TranslocoModule,
+                    ], template: "<mt-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{\n            propertyId()\n              ? (\"properties.form.editProperty\" | transloco)\n              : (\"properties.form.createNewProperty\" | transloco)\n          }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] h-full overflow-y-auto flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <div class=\"flex justify-between items-center gap-6\">\n              <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n              <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"12rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n              <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"10rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n        } @else {\n          <mt-dynamic-form\n            [formConfig]=\"dynamicFormConfigMain()\"\n            [formControlName]=\"'main'\"\n          />\n          @if (configurationFormConfig()) {\n            <mt-dynamic-form\n              formControlName=\"configuration\"\n              [formConfig]=\"configurationFormConfig()!\"\n            />\n          } @else {\n            <ng-container #configurationHost></ng-container>\n            @if (!configurationComponentExists()) {\n              @switch (propertyType()) {\n                @case (\"User\") {\n                  <mt-user-configuration />\n                }\n                @case (\"Percentage\") {\n                  <mt-percentage-configuration />\n                }\n                @case (\"Lookup\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"LookupMultiSelect\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"InternalModule\") {\n                  <mt-internal-module-configuration />\n                }\n                @case (\"DynamicList\") {\n                  <mt-dynamic-list-configuration />\n                }\n                @case (\"API\") {\n                  <mt-api-configuration formControlName=\"configuration\" />\n                }\n                <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n                @case (\"Attachment\") {\n                  <mt-attachment-configuration />\n                }\n                <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n                @case (\"EditableListView\") {\n                  <mt-editable-list-view-configuration />\n                }\n                @case (\"LookupLog\") {\n                  <mt-check-list-form-configuration />\n                }\n                <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n                @case (\"Location\") {\n                  <mt-location-configuration />\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n" }]
         }], ctorParameters: () => [], propDecorators: { configurationHost: [{
                 type: ViewChild,
                 args: ['configurationHost', { read: ViewContainerRef }]