@masterteam/properties 0.0.46 → 0.0.47

package/assets/i18n/ar.json

@@ -25,6 +25,7 @@
       "typeLookup": "قائمة"
     },
     "form": {
+      "cancelButton": "إلغاء",
       "createNewProperty": "إنشاء خاصية جديدة",
       "editProperty": "تعديل الخاصية",
       "createButton": "إنشاء",

package/assets/i18n/en.json

@@ -27,6 +27,7 @@
     "form": {
       "createNewProperty": "Create New Property",
       "editProperty": "Edit Property",
+      "cancelButton": "Cancel",
       "createButton": "Create",
       "updateButton": "Update",
       "defaultInfoSection": "Default Information",

package/fesm2022/masterteam-properties.mjs

@@ -15,7 +15,7 @@ import { Button } from '@masterteam/components/button';
 import * as i2 from '@jsverse/transloco';
 import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { Icon } from '@masterteam/icons';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Page } from '@masterteam/components/page';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import * as i1 from '@angular/forms';
@@ -1216,7 +1216,7 @@ class PropertiesList {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "isCalculatedTpl", first: true, predicate: ["isCalculatedTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"space-y-3\">\r\n  <div class=\"flex items-center justify-between\">\r\n    <div class=\"space-y-1\">\r\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\r\n        {{ \"properties.list.pageTitle\" | transloco }}\r\n      </h1>\r\n      <mt-breadcrumb\r\n        [items]=\"breadcrumbItems()\"\r\n        [styleClass]=\"'flex justify-center'\"\r\n      >\r\n      </mt-breadcrumb>\r\n    </div>\r\n  </div>\r\n  <mt-table\r\n    [tabs]=\"tabs()\"\r\n    [(activeTab)]=\"activeTab\"\r\n    (onTabChange)=\"onTabChange($event)\"\r\n    [data]=\"tableData()\"\r\n    [actions]=\"tableActions()\"\r\n    [columns]=\"tableColumns()\"\r\n    dataKey=\"id\"\r\n    storageKey=\"properties-list-table\"\r\n    [rowActions]=\"rowActions()\"\r\n    [generalSearch]=\"true\"\r\n    [showFilters]=\"true\"\r\n    [loading]=\"loading()\"\r\n  >\r\n    <ng-template #isCalculatedTpl let-row>\r\n      @if (row.isCalculated) {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-blue-50 dark:bg-blue-900/30 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"education.calculator\"\r\n            class=\"text-blue-600 dark:text-blue-300 text-sm\"\r\n          />\r\n          <span class=\"text-blue-700 dark:text-blue-200 text-xs font-medium\">\r\n            {{ \"properties.list.calculated\" | transloco }}\r\n          </span>\r\n        </span>\r\n      } @else {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-800/50 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"general.minus-circle\"\r\n            class=\"text-slate-500 dark:text-slate-400 text-sm\"\r\n          />\r\n          <span class=\"text-slate-600 dark:text-slate-300 text-xs font-medium\">\r\n            {{ \"properties.list.uncalculated\" | transloco }}\r\n          </span>\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #empty>\r\n      <div headless class=\"flex-col justify-center items-center w-full p-5\">\r\n        <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\r\n          <svg\r\n            width=\"152\"\r\n            height=\"120\"\r\n            viewBox=\"0 0 152 120\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\r\n            <g filter=\"url(#filter0_ddd_2474_28277)\">\r\n              <path\r\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\"\r\n                fill=\"#FAFAFA\"\r\n              />\r\n              <ellipse\r\n                cx=\"45.6\"\r\n                cy=\"54.3998\"\r\n                rx=\"25.6\"\r\n                ry=\"25.6\"\r\n                fill=\"url(#paint0_linear_2474_28277)\"\r\n              />\r\n              <circle\r\n                cx=\"77.6016\"\r\n                cy=\"48\"\r\n                r=\"32\"\r\n                fill=\"url(#paint1_linear_2474_28277)\"\r\n              />\r\n              <ellipse\r\n                cx=\"109.599\"\r\n                cy=\"57.6002\"\r\n                rx=\"22.4\"\r\n                ry=\"22.4\"\r\n                fill=\"url(#paint2_linear_2474_28277)\"\r\n              />\r\n            </g>\r\n            <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\r\n            <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\r\n            <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\r\n            <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\r\n            <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\r\n              <div\r\n                xmlns=\"http://www.w3.org/1999/xhtml\"\r\n                style=\"\r\n                  backdrop-filter: blur(4px);\r\n                  clip-path: url(#bgblur_0_2474_28277_clip_path);\r\n                  height: 100%;\r\n                  width: 100%;\r\n                \"\r\n              ></div>\r\n            </foreignObject>\r\n            <g data-figma-bg-blur-radius=\"8\">\r\n              <path\r\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\"\r\n                fill=\"#344054\"\r\n                fill-opacity=\"0.4\"\r\n              />\r\n              <path\r\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\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </g>\r\n            <defs>\r\n              <filter\r\n                id=\"filter0_ddd_2474_28277\"\r\n                x=\"0\"\r\n                y=\"16\"\r\n                width=\"152\"\r\n                height=\"104\"\r\n                filterUnits=\"userSpaceOnUse\"\r\n                color-interpolation-filters=\"sRGB\"\r\n              >\r\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                <feColorMatrix\r\n                  in=\"SourceAlpha\"\r\n                  type=\"matrix\"\r\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                  result=\"hardAlpha\"\r\n                />\r\n                <feMorphology\r\n                  radius=\"1.5\"\r\n                  operator=\"erode\"\r\n                  in=\"SourceAlpha\"\r\n                  result=\"effect1_dropShadow_2474_28277\"\r\n                />\r\n                <feOffset dy=\"3\" />\r\n                <feGaussianBlur stdDeviation=\"1.5\" />\r\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                <feColorMatrix\r\n                  type=\"matrix\"\r\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\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in2=\"BackgroundImageFix\"\r\n                  result=\"effect1_dropShadow_2474_28277\"\r\n                />\r\n                <feColorMatrix\r\n                  in=\"SourceAlpha\"\r\n                  type=\"matrix\"\r\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                  result=\"hardAlpha\"\r\n                />\r\n                <feMorphology\r\n                  radius=\"4\"\r\n                  operator=\"erode\"\r\n                  in=\"SourceAlpha\"\r\n                  result=\"effect2_dropShadow_2474_28277\"\r\n                />\r\n                <feOffset dy=\"8\" />\r\n                <feGaussianBlur stdDeviation=\"4\" />\r\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                <feColorMatrix\r\n                  type=\"matrix\"\r\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\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in2=\"effect1_dropShadow_2474_28277\"\r\n                  result=\"effect2_dropShadow_2474_28277\"\r\n                />\r\n                <feColorMatrix\r\n                  in=\"SourceAlpha\"\r\n                  type=\"matrix\"\r\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                  result=\"hardAlpha\"\r\n                />\r\n                <feMorphology\r\n                  radius=\"4\"\r\n                  operator=\"erode\"\r\n                  in=\"SourceAlpha\"\r\n                  result=\"effect3_dropShadow_2474_28277\"\r\n                />\r\n                <feOffset dy=\"20\" />\r\n                <feGaussianBlur stdDeviation=\"12\" />\r\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                <feColorMatrix\r\n                  type=\"matrix\"\r\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\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in2=\"effect2_dropShadow_2474_28277\"\r\n                  result=\"effect3_dropShadow_2474_28277\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in=\"SourceGraphic\"\r\n                  in2=\"effect3_dropShadow_2474_28277\"\r\n                  result=\"shape\"\r\n                />\r\n              </filter>\r\n              <clipPath\r\n                id=\"bgblur_0_2474_28277_clip_path\"\r\n                transform=\"translate(-44 -54)\"\r\n              >\r\n                <path\r\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\"\r\n                />\r\n              </clipPath>\r\n              <linearGradient\r\n                id=\"paint0_linear_2474_28277\"\r\n                x1=\"25.9429\"\r\n                y1=\"37.4855\"\r\n                x2=\"71.2\"\r\n                y2=\"79.9998\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stop-color=\"#D0D5DD\" />\r\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n              </linearGradient>\r\n              <linearGradient\r\n                id=\"paint1_linear_2474_28277\"\r\n                x1=\"53.0301\"\r\n                y1=\"26.8571\"\r\n                x2=\"109.602\"\r\n                y2=\"80\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stop-color=\"#D0D5DD\" />\r\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n              </linearGradient>\r\n              <linearGradient\r\n                id=\"paint2_linear_2474_28277\"\r\n                x1=\"92.3992\"\r\n                y1=\"42.8002\"\r\n                x2=\"131.999\"\r\n                y2=\"80.0002\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stop-color=\"#D0D5DD\" />\r\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n              </linearGradient>\r\n            </defs>\r\n          </svg>\r\n\r\n          <div class=\"flex flex-col gap-1\">\r\n            <div class=\"text-md text-surface-600\">\r\n              {{ \"properties.list.emptyStateNoData\" | transloco }}\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <mt-button\r\n              [label]=\"'properties.list.addNewProperty' | transloco\"\r\n              icon=\"general.plus\"\r\n              (click)=\"createProperty()\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <p-divider type=\"solid\">\r\n          <div class=\"text-lg text-surface-600\">\r\n            {{ \"properties.list.emptyStateTemplate\" | transloco }}\r\n          </div>\r\n        </p-divider>\r\n        <div class=\"flex gap-3 mt-5 justify-center\">\r\n          @for (card of propertyTypes(); track card.label) {\r\n            <mt-card\r\n              headless\r\n              class=\"w-25 tailwind-4 cursor-pointer\"\r\n              style=\"background-color: #fafafa\"\r\n              (click)=\"createPropertyWithType(card.value)\"\r\n            >\r\n              <div class=\"content flex flex-col gap-3 items-center text-center\">\r\n                <mt-avatar\r\n                  [style.--p-avatar-background]=\"\r\n                    'var(--p-' + card.color + '-100)'\r\n                  \"\r\n                  [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\r\n                  [icon]=\"card.icon\"\r\n                  shape=\"square\"\r\n                ></mt-avatar>\r\n                <div class=\"flex flex-col gap-1\">\r\n                  <div class=\"text-xs font-normal\">{{ card.label }}</div>\r\n                </div>\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </mt-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { 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: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "isCalculatedTpl", first: true, predicate: ["isCalculatedTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"space-y-3\">\r\n  <div class=\"flex items-center justify-between\">\r\n    <div class=\"space-y-1\">\r\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\r\n        {{ \"properties.list.pageTitle\" | transloco }}\r\n      </h1>\r\n      <mt-breadcrumb\r\n        [items]=\"breadcrumbItems()\"\r\n        [styleClass]=\"'flex justify-center'\"\r\n      >\r\n      </mt-breadcrumb>\r\n    </div>\r\n  </div>\r\n  <mt-table\r\n    [tabs]=\"tabs()\"\r\n    [(activeTab)]=\"activeTab\"\r\n    (onTabChange)=\"onTabChange($event)\"\r\n    [data]=\"tableData()\"\r\n    [actions]=\"tableActions()\"\r\n    [columns]=\"tableColumns()\"\r\n    dataKey=\"id\"\r\n    storageKey=\"properties-list-table\"\r\n    [rowActions]=\"rowActions()\"\r\n    [generalSearch]=\"true\"\r\n    [showFilters]=\"true\"\r\n    [loading]=\"loading()\"\r\n  >\r\n    <ng-template #isCalculatedTpl let-row>\r\n      @if (row.isCalculated) {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-blue-50 dark:bg-blue-900/30 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"education.calculator\"\r\n            class=\"text-blue-600 dark:text-blue-300 text-sm\"\r\n          />\r\n          <span class=\"text-blue-700 dark:text-blue-200 text-xs font-medium\">\r\n            {{ \"properties.list.calculated\" | transloco }}\r\n          </span>\r\n        </span>\r\n      } @else {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-800/50 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"general.minus-circle\"\r\n            class=\"text-slate-500 dark:text-slate-400 text-sm\"\r\n          />\r\n          <span class=\"text-slate-600 dark:text-slate-300 text-xs font-medium\">\r\n            {{ \"properties.list.uncalculated\" | transloco }}\r\n          </span>\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #empty>\r\n      <div headless class=\"flex-col justify-center items-center w-full p-5\">\r\n        <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\r\n          <svg\r\n            width=\"152\"\r\n            height=\"120\"\r\n            viewBox=\"0 0 152 120\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\r\n            <g filter=\"url(#filter0_ddd_2474_28277)\">\r\n              <path\r\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\"\r\n                fill=\"#FAFAFA\"\r\n              />\r\n              <ellipse\r\n                cx=\"45.6\"\r\n                cy=\"54.3998\"\r\n                rx=\"25.6\"\r\n                ry=\"25.6\"\r\n                fill=\"url(#paint0_linear_2474_28277)\"\r\n              />\r\n              <circle\r\n                cx=\"77.6016\"\r\n                cy=\"48\"\r\n                r=\"32\"\r\n                fill=\"url(#paint1_linear_2474_28277)\"\r\n              />\r\n              <ellipse\r\n                cx=\"109.599\"\r\n                cy=\"57.6002\"\r\n                rx=\"22.4\"\r\n                ry=\"22.4\"\r\n                fill=\"url(#paint2_linear_2474_28277)\"\r\n              />\r\n            </g>\r\n            <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\r\n            <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\r\n            <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\r\n            <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\r\n            <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\r\n              <div\r\n                xmlns=\"http://www.w3.org/1999/xhtml\"\r\n                style=\"\r\n                  backdrop-filter: blur(4px);\r\n                  clip-path: url(#bgblur_0_2474_28277_clip_path);\r\n                  height: 100%;\r\n                  width: 100%;\r\n                \"\r\n              ></div>\r\n            </foreignObject>\r\n            <g data-figma-bg-blur-radius=\"8\">\r\n              <path\r\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\"\r\n                fill=\"#344054\"\r\n                fill-opacity=\"0.4\"\r\n              />\r\n              <path\r\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\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </g>\r\n            <defs>\r\n              <filter\r\n                id=\"filter0_ddd_2474_28277\"\r\n                x=\"0\"\r\n                y=\"16\"\r\n                width=\"152\"\r\n                height=\"104\"\r\n                filterUnits=\"userSpaceOnUse\"\r\n                color-interpolation-filters=\"sRGB\"\r\n              >\r\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                <feColorMatrix\r\n                  in=\"SourceAlpha\"\r\n                  type=\"matrix\"\r\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                  result=\"hardAlpha\"\r\n                />\r\n                <feMorphology\r\n                  radius=\"1.5\"\r\n                  operator=\"erode\"\r\n                  in=\"SourceAlpha\"\r\n                  result=\"effect1_dropShadow_2474_28277\"\r\n                />\r\n                <feOffset dy=\"3\" />\r\n                <feGaussianBlur stdDeviation=\"1.5\" />\r\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                <feColorMatrix\r\n                  type=\"matrix\"\r\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\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in2=\"BackgroundImageFix\"\r\n                  result=\"effect1_dropShadow_2474_28277\"\r\n                />\r\n                <feColorMatrix\r\n                  in=\"SourceAlpha\"\r\n                  type=\"matrix\"\r\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                  result=\"hardAlpha\"\r\n                />\r\n                <feMorphology\r\n                  radius=\"4\"\r\n                  operator=\"erode\"\r\n                  in=\"SourceAlpha\"\r\n                  result=\"effect2_dropShadow_2474_28277\"\r\n                />\r\n                <feOffset dy=\"8\" />\r\n                <feGaussianBlur stdDeviation=\"4\" />\r\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                <feColorMatrix\r\n                  type=\"matrix\"\r\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\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in2=\"effect1_dropShadow_2474_28277\"\r\n                  result=\"effect2_dropShadow_2474_28277\"\r\n                />\r\n                <feColorMatrix\r\n                  in=\"SourceAlpha\"\r\n                  type=\"matrix\"\r\n                  values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                  result=\"hardAlpha\"\r\n                />\r\n                <feMorphology\r\n                  radius=\"4\"\r\n                  operator=\"erode\"\r\n                  in=\"SourceAlpha\"\r\n                  result=\"effect3_dropShadow_2474_28277\"\r\n                />\r\n                <feOffset dy=\"20\" />\r\n                <feGaussianBlur stdDeviation=\"12\" />\r\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                <feColorMatrix\r\n                  type=\"matrix\"\r\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\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in2=\"effect2_dropShadow_2474_28277\"\r\n                  result=\"effect3_dropShadow_2474_28277\"\r\n                />\r\n                <feBlend\r\n                  mode=\"normal\"\r\n                  in=\"SourceGraphic\"\r\n                  in2=\"effect3_dropShadow_2474_28277\"\r\n                  result=\"shape\"\r\n                />\r\n              </filter>\r\n              <clipPath\r\n                id=\"bgblur_0_2474_28277_clip_path\"\r\n                transform=\"translate(-44 -54)\"\r\n              >\r\n                <path\r\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\"\r\n                />\r\n              </clipPath>\r\n              <linearGradient\r\n                id=\"paint0_linear_2474_28277\"\r\n                x1=\"25.9429\"\r\n                y1=\"37.4855\"\r\n                x2=\"71.2\"\r\n                y2=\"79.9998\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stop-color=\"#D0D5DD\" />\r\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n              </linearGradient>\r\n              <linearGradient\r\n                id=\"paint1_linear_2474_28277\"\r\n                x1=\"53.0301\"\r\n                y1=\"26.8571\"\r\n                x2=\"109.602\"\r\n                y2=\"80\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stop-color=\"#D0D5DD\" />\r\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n              </linearGradient>\r\n              <linearGradient\r\n                id=\"paint2_linear_2474_28277\"\r\n                x1=\"92.3992\"\r\n                y1=\"42.8002\"\r\n                x2=\"131.999\"\r\n                y2=\"80.0002\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stop-color=\"#D0D5DD\" />\r\n                <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n              </linearGradient>\r\n            </defs>\r\n          </svg>\r\n\r\n          <div class=\"flex flex-col gap-1\">\r\n            <div class=\"text-md text-surface-600\">\r\n              {{ \"properties.list.emptyStateNoData\" | transloco }}\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <mt-button\r\n              [label]=\"'properties.list.addNewProperty' | transloco\"\r\n              icon=\"general.plus\"\r\n              (click)=\"createProperty()\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <p-divider type=\"solid\">\r\n          <div class=\"text-lg text-surface-600\">\r\n            {{ \"properties.list.emptyStateTemplate\" | transloco }}\r\n          </div>\r\n        </p-divider>\r\n        <div class=\"flex gap-3 mt-5 justify-center\">\r\n          @for (card of propertyTypes(); track card.label) {\r\n            <mt-card\r\n              headless\r\n              class=\"w-25 tailwind-4 cursor-pointer\"\r\n              style=\"background-color: #fafafa\"\r\n              (click)=\"createPropertyWithType(card.value)\"\r\n            >\r\n              <div class=\"content flex flex-col gap-3 items-center text-center\">\r\n                <mt-avatar\r\n                  [style.--p-avatar-background]=\"\r\n                    'var(--p-' + card.color + '-100)'\r\n                  \"\r\n                  [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\r\n                  [icon]=\"card.icon\"\r\n                  shape=\"square\"\r\n                ></mt-avatar>\r\n                <div class=\"flex flex-col gap-1\">\r\n                  <div class=\"text-xs font-normal\">{{ card.label }}</div>\r\n                </div>\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </mt-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: 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: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesList, decorators: [{
             type: Component,
@@ -1448,7 +1448,7 @@ class ApiConfiguration {
                 useExisting: forwardRef(() => ApiConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"resolvedApiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"resolvedApiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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],[formArray],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", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], 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: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"resolvedApiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"resolvedApiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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],[formArray],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", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], 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: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ApiConfiguration, decorators: [{
             type: Component,
@@ -1577,17 +1577,25 @@ class EntityListConfiguration {
         const scope = this.configScopes()[0];
         return scope?.items ?? [];
     }, ...(ngDevMode ? [{ debugName: "moduleItems" }] : /* istanbul ignore next */ []));
-    accessOptions = [
-        { label: 'Auto', value: 'Auto' },
-        { label: 'Read', value: 'Read' },
-        { label: 'Write', value: 'Write' },
-        { label: 'ReadWrite', value: 'ReadWrite' },
-        { label: 'None', value: 'None' },
-    ];
-    snapshotModeOptions = [
-        { label: 'Snapshot', value: 'Snapshot' },
-        { label: 'Realtime', value: 'Realtime' },
+    accessModeOptions = [
+        {
+            label: 'Get a module list, with the ability to add, edit, and delete records',
+            value: 'ReadWrite',
+        },
+        {
+            label: 'View a list of module data',
+            value: 'Read',
+        },
+        {
+            label: 'Write to some fields using useful module data',
+            value: 'Write',
+        },
     ];
+    ACCESS_SNAPSHOT_MAP = {
+        ReadWrite: 'Realtime',
+        Read: 'Realtime',
+        Write: null,
+    };
     formConfig = linkedSignal(() => ({
         sections: [
             {
@@ -1615,17 +1623,9 @@ class EntityListConfiguration {
                         label: 'Access',
                         optionLabel: 'label',
                         optionValue: 'value',
-                        options: this.accessOptions,
+                        options: this.accessModeOptions,
                         validators: [ValidatorConfig.required()],
                     },
-                    {
-                        key: 'snapshotMode',
-                        type: 'select',
-                        label: 'Snapshot Mode',
-                        optionLabel: 'label',
-                        optionValue: 'value',
-                        options: this.snapshotModeOptions,
-                    },
                     new PickListFieldConfig({
                         key: 'readFields',
                         cssClass: 'md:col-span-2',
@@ -1648,7 +1648,6 @@ class EntityListConfiguration {
                         relations: [
                             { action: 'show', key: 'access', value: 'Write' },
                             { action: 'show', key: 'access', value: 'ReadWrite' },
-                            { action: 'show', key: 'access', value: 'Auto' },
                         ],
                     }),
                 ],
@@ -1658,6 +1657,7 @@ class EntityListConfiguration {
     constructor() {
         this.applyEntityListDefaults();
         this.loadModuleProperties();
+        this.syncSnapshotMode();
     }
     applyEntityListDefaults() {
         const config = this.configurationControl.value;
@@ -1665,8 +1665,8 @@ class EntityListConfiguration {
             return;
         this.configurationControl.setValue({
             moduleId: 0,
-            access: 'Auto',
-            snapshotMode: 'Snapshot',
+            access: 'ReadWrite',
+            snapshotMode: 'Realtime',
             readFields: [],
             writeFields: [],
         }, { emitEvent: true });
@@ -1686,6 +1686,19 @@ class EntityListConfiguration {
             this.propertiesFacade.loadPropertiesForConfigType(scopeType, moduleId);
         });
     }
+    syncSnapshotMode() {
+        this.configurationControl.valueChanges
+            .pipe(map((v) => v?.['access']), distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe((access) => {
+            if (!access)
+                return;
+            const snapshotMode = this.ACCESS_SNAPSHOT_MAP[access] ?? null;
+            const current = (this.configurationControl.value ?? {})['snapshotMode'] ?? null;
+            if (snapshotMode === current)
+                return;
+            this.configurationControl.patchValue({ ...(this.configurationControl.value ?? {}), snapshotMode }, { emitEvent: false, emitModelToViewChange: false });
+        });
+    }
     ngOnDestroy() {
         this.propertiesFacade.resetConfigProperties();
     }
@@ -1847,6 +1860,7 @@ class StatusItemForm {
     buttonLabel = computed(() => this.editMode()
         ? this.transloco.translate('properties.form.statusUpdateButton')
         : this.transloco.translate('properties.form.statusCreateButton'), ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = computed(() => this.transloco.translate('properties.form.cancelButton'), ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
     statusFormConfig = linkedSignal(() => ({
         sections: [
             {
@@ -1999,7 +2013,7 @@ class StatusItemForm {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusItemForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StatusItemForm, isStandalone: true, selector: "mt-status-item-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: true, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, statusData: { classPropertyName: "statusData", publicName: "statusData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  [class]=\"\r\n    'flex max-h-[75vh] flex-col gap-4 overflow-y-auto p-4 my-4 ' +\r\n    modal.contentClass\r\n  \"\r\n>\r\n  <form class=\"space-y-6\">\r\n    <mt-dynamic-form\r\n      class=\"block\"\r\n      [formConfig]=\"statusFormConfig()\"\r\n      [formControl]=\"statusFormControl\"\r\n    />\r\n\r\n    @if (showFormula()) {\r\n      <div class=\"rounded-xl border border-surface-200 bg-content px-4 py-4\">\r\n        <div class=\"mb-3 text-sm font-medium text-surface-700\">\r\n          {{ \"properties.form.statusFormula\" | transloco }}\r\n        </div>\r\n\r\n        <mt-formula-builder\r\n          [formControl]=\"formulaControl\"\r\n          [levelSchemaId]=\"levelSchemaId()\"\r\n          [moduleId]=\"moduleId()\"\r\n        />\r\n      </div>\r\n    }\r\n  </form>\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n  <mt-button\r\n    [label]=\"buttonLabel()\"\r\n    (click)=\"onSubmit()\"\r\n    [loading]=\"isSubmitting()\"\r\n    [disabled]=\"\r\n      statusFormControl.invalid ||\r\n      (showFormula() && formulaControl.invalid) ||\r\n      isSubmitting()\r\n    \"\r\n  />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StatusItemForm, isStandalone: true, selector: "mt-status-item-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: true, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, statusData: { classPropertyName: "statusData", publicName: "statusData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  [class]=\"\r\n    'flex max-h-[75vh] flex-col gap-4 overflow-y-auto p-4 my-4 ' +\r\n    modal.contentClass\r\n  \"\r\n>\r\n  <form class=\"space-y-6\">\r\n    <mt-dynamic-form\r\n      class=\"block\"\r\n      [formConfig]=\"statusFormConfig()\"\r\n      [formControl]=\"statusFormControl\"\r\n    />\r\n\r\n    @if (showFormula()) {\r\n      <div class=\"rounded-xl border border-surface-200 bg-content px-4 py-4\">\r\n        <div class=\"mb-3 text-sm font-medium text-surface-700\">\r\n          {{ \"properties.form.statusFormula\" | transloco }}\r\n        </div>\r\n\r\n        <mt-formula-builder\r\n          [formControl]=\"formulaControl\"\r\n          [levelSchemaId]=\"levelSchemaId()\"\r\n          [moduleId]=\"moduleId()\"\r\n        />\r\n      </div>\r\n    }\r\n  </form>\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n  <mt-button [label]=\"cancelLabel()\" variant=\"outlined\" (click)=\"ref.close()\" />\r\n  <mt-button\r\n    [label]=\"buttonLabel()\"\r\n    (click)=\"onSubmit()\"\r\n    [loading]=\"isSubmitting()\"\r\n    [disabled]=\"\r\n      statusFormControl.invalid ||\r\n      (showFormula() && formulaControl.invalid) ||\r\n      isSubmitting()\r\n    \"\r\n  />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusItemForm, decorators: [{
             type: Component,
@@ -2010,7 +2024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         FormulaBuilder,
                         ReactiveFormsModule,
                         TranslocoModule,
-                    ], template: "<div\r\n  [class]=\"\r\n    'flex max-h-[75vh] flex-col gap-4 overflow-y-auto p-4 my-4 ' +\r\n    modal.contentClass\r\n  \"\r\n>\r\n  <form class=\"space-y-6\">\r\n    <mt-dynamic-form\r\n      class=\"block\"\r\n      [formConfig]=\"statusFormConfig()\"\r\n      [formControl]=\"statusFormControl\"\r\n    />\r\n\r\n    @if (showFormula()) {\r\n      <div class=\"rounded-xl border border-surface-200 bg-content px-4 py-4\">\r\n        <div class=\"mb-3 text-sm font-medium text-surface-700\">\r\n          {{ \"properties.form.statusFormula\" | transloco }}\r\n        </div>\r\n\r\n        <mt-formula-builder\r\n          [formControl]=\"formulaControl\"\r\n          [levelSchemaId]=\"levelSchemaId()\"\r\n          [moduleId]=\"moduleId()\"\r\n        />\r\n      </div>\r\n    }\r\n  </form>\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n  <mt-button\r\n    [label]=\"buttonLabel()\"\r\n    (click)=\"onSubmit()\"\r\n    [loading]=\"isSubmitting()\"\r\n    [disabled]=\"\r\n      statusFormControl.invalid ||\r\n      (showFormula() && formulaControl.invalid) ||\r\n      isSubmitting()\r\n    \"\r\n  />\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  [class]=\"\r\n    'flex max-h-[75vh] flex-col gap-4 overflow-y-auto p-4 my-4 ' +\r\n    modal.contentClass\r\n  \"\r\n>\r\n  <form class=\"space-y-6\">\r\n    <mt-dynamic-form\r\n      class=\"block\"\r\n      [formConfig]=\"statusFormConfig()\"\r\n      [formControl]=\"statusFormControl\"\r\n    />\r\n\r\n    @if (showFormula()) {\r\n      <div class=\"rounded-xl border border-surface-200 bg-content px-4 py-4\">\r\n        <div class=\"mb-3 text-sm font-medium text-surface-700\">\r\n          {{ \"properties.form.statusFormula\" | transloco }}\r\n        </div>\r\n\r\n        <mt-formula-builder\r\n          [formControl]=\"formulaControl\"\r\n          [levelSchemaId]=\"levelSchemaId()\"\r\n          [moduleId]=\"moduleId()\"\r\n        />\r\n      </div>\r\n    }\r\n  </form>\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n  <mt-button [label]=\"cancelLabel()\" variant=\"outlined\" (click)=\"ref.close()\" />\r\n  <mt-button\r\n    [label]=\"buttonLabel()\"\r\n    (click)=\"onSubmit()\"\r\n    [loading]=\"isSubmitting()\"\r\n    [disabled]=\"\r\n      statusFormControl.invalid ||\r\n      (showFormula() && formulaControl.invalid) ||\r\n      isSubmitting()\r\n    \"\r\n  />\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: true }] }], levelSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelSchemaId", required: false }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], statusData: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusData", required: false }] }] } });
 
 class StatusConfiguration {
@@ -2165,7 +2179,7 @@ class StatusConfiguration {
         return Number.isFinite(parsed) ? parsed : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StatusConfiguration, isStandalone: true, selector: "mt-status-configuration", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-card [title]=\"'properties.form.statusesSection' | transloco\">\r\n  @if (canManageStatuses()) {\r\n    <mt-table\r\n      [data]=\"statuses()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [loading]=\"loading()\"\r\n      [updating]=\"reordering()\"\r\n      [reorderableRows]=\"true\"\r\n      dataKey=\"id\"\r\n      storageKey=\"properties-status-configuration-table\"\r\n      (rowReorder)=\"onRowReorder($event)\"\r\n    />\r\n  } @else {\r\n    <div\r\n      class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-6 text-sm text-surface-600\"\r\n    >\r\n      {{ \"properties.form.statusesSavePrompt\" | transloco }}\r\n    </div>\r\n  }\r\n</mt-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StatusConfiguration, isStandalone: true, selector: "mt-status-configuration", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-card [title]=\"'properties.form.statusesSection' | transloco\">\r\n  @if (canManageStatuses()) {\r\n    <mt-table\r\n      [data]=\"statuses()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [loading]=\"loading()\"\r\n      [updating]=\"reordering()\"\r\n      [reorderableRows]=\"true\"\r\n      dataKey=\"id\"\r\n      storageKey=\"properties-status-configuration-table\"\r\n      (rowReorder)=\"onRowReorder($event)\"\r\n    />\r\n  } @else {\r\n    <div\r\n      class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-6 text-sm text-surface-600\"\r\n    >\r\n      {{ \"properties.form.statusesSavePrompt\" | transloco }}\r\n    </div>\r\n  }\r\n</mt-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusConfiguration, decorators: [{
             type: Component,