@masterteam/properties 0.0.77 → 0.0.79

package/fesm2022/masterteam-properties.mjs

@@ -1307,7 +1307,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 }, { propertyName: "viewTypeTpl", first: true, predicate: ["viewTypeTpl"], 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 #viewTypeTpl let-row>\r\n      <span class=\"text-sm text-slate-700 dark:text-slate-200\">\r\n        {{ row.viewTypeLabel || row.viewType }}\r\n      </span>\r\n    </ng-template>\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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { 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", "ariaLabel"], 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 }, { propertyName: "viewTypeTpl", first: true, predicate: ["viewTypeTpl"], 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 #viewTypeTpl let-row>\r\n      <span class=\"text-sm text-slate-700 dark:text-slate-200\">\r\n        {{ row.viewTypeLabel || row.viewType }}\r\n      </span>\r\n    </ng-template>\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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { 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", "ariaLabel"], 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,
@@ -1643,7 +1643,7 @@ class CheckListFormConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckListFormConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: "21.2.8", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1794,7 +1794,7 @@ class EntityListConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: EntityListConfiguration, isStandalone: true, selector: "mt-entity-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: "21.2.8", type: EntityListConfiguration, isStandalone: true, selector: "mt-entity-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1845,7 +1845,7 @@ class LocationConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LocationConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: "21.2.8", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1893,7 +1893,7 @@ class LookupConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LookupConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: "21.2.8", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1920,9 +1920,9 @@ const PERCENTAGE_MAX_VALUE = 100;
  */
 const PERCENTAGE_DEFAULT_COLOR_RULES = [
     { minValue: 0, maxValue: 25, color: '#ed2517' },
-    { minValue: 25, maxValue: 50, color: '#FFB300' },
-    { minValue: 50, maxValue: 75, color: '#0A5EBE' },
-    { minValue: 75, maxValue: 100, color: '#4caf50' },
+    { minValue: 26, maxValue: 50, color: '#FFB300' },
+    { minValue: 51, maxValue: 75, color: '#0A5EBE' },
+    { minValue: 76, maxValue: 100, color: '#4caf50' },
 ];
 const HEX_COLOR_PATTERN = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
 function toFiniteNumber(value) {
@@ -2007,47 +2007,45 @@ function serializePercentageConfiguration(draft) {
         ? { colorRules: rules, defaultColor }
         : { color: defaultColor };
 }
-function isEmptyBand(band) {
-    if (band.from > band.to) {
-        return true;
-    }
-    return band.from === band.to && (band.fromOpen || band.toOpen);
+/**
+ * The whole percents a rule's closed `[min, max]` range claims, or `null` when
+ * the range falls strictly between two of them.
+ */
+function toWholePercentRange(min, max) {
+    const from = Math.max(Math.ceil(min), PERCENTAGE_MIN_VALUE);
+    const to = Math.min(Math.floor(max), PERCENTAGE_MAX_VALUE);
+    return from <= to ? { from, to } : null;
 }
-/** The part of `band` the closed rule range `[min, max]` claims. */
-function intersectRule(band, min, max) {
-    return {
-        from: Math.max(band.from, min),
-        to: Math.min(band.to, max),
-        // The rule range is closed on both ends, so only the band can contribute
-        // an open boundary — and only where the band's own edge is the tighter one.
-        fromOpen: min <= band.from && band.fromOpen,
-        toOpen: max >= band.to && band.toOpen,
-    };
+function overlaps(range, claimed) {
+    return claimed.from <= range.to && claimed.to >= range.from;
 }
-/** `band` with everything inside `[min, max]` removed — 0, 1, or 2 pieces. */
-function subtractRule(band, min, max) {
-    if (isEmptyBand(intersectRule(band, min, max))) {
-        return [band];
-    }
-    const remainder = [
-        { from: band.from, to: min, fromOpen: band.fromOpen, toOpen: true },
-        { from: max, to: band.to, fromOpen: true, toOpen: band.toOpen },
-    ];
-    return remainder.filter((piece) => !isEmptyBand(piece));
+/** `range` minus the whole percents `claimed` covers — 0, 1, or 2 pieces. */
+function subtractRange(range, claimed) {
+    if (!overlaps(range, claimed)) {
+        return [range];
+    }
+    const remainder = [];
+    if (range.from < claimed.from) {
+        remainder.push({ from: range.from, to: claimed.from - 1 });
+    }
+    if (claimed.to < range.to) {
+        remainder.push({ from: claimed.to + 1, to: range.to });
+    }
+    return remainder;
 }
 /**
  * What the rule list actually covers, given that they are evaluated in order
  * and the first match wins. Both answers are advisory: a shadowed rule is dead
  * configuration, and a gap silently falls through to the default colour.
+ *
+ * Coverage is measured in whole percents, which is the scale these bands are
+ * authored on. Consecutive rules are written either sharing a boundary (0–25,
+ * 25–50) or stepping over it (0–25, 26–50); both cover every percent, so
+ * neither is reported — only a range that really skips a percent is.
  */
 function analysePercentageRuleCoverage(rules) {
     let remaining = [
-        {
-            from: PERCENTAGE_MIN_VALUE,
-            to: PERCENTAGE_MAX_VALUE,
-            fromOpen: false,
-            toOpen: false,
-        },
+        { from: PERCENTAGE_MIN_VALUE, to: PERCENTAGE_MAX_VALUE },
     ];
     const unreachableRuleIndexes = [];
     rules.forEach((rule, index) => {
@@ -2058,21 +2056,28 @@ function analysePercentageRuleCoverage(rules) {
             // validation error — don't pile a second warning on top of it.
             return;
         }
-        const claimsSomething = remaining.some((band) => !isEmptyBand(intersectRule(band, min, max)));
+        const claimed = toWholePercentRange(min, max);
+        if (!claimed) {
+            // A range too narrow to hold a percent — it neither covers anything nor
+            // is worth calling out.
+            return;
+        }
+        const claimsSomething = remaining.some((range) => overlaps(range, claimed));
         if (!claimsSomething) {
             unreachableRuleIndexes.push(index);
             return;
         }
-        remaining = remaining.flatMap((band) => subtractRule(band, min, max));
+        remaining = remaining.flatMap((range) => subtractRange(range, claimed));
     });
-    return {
-        unreachableRuleIndexes,
-        gaps: remaining.map(({ from, to }) => ({ from, to })),
-    };
+    return { unreachableRuleIndexes, gaps: remaining };
 }
 
-/** How finely the preview strip samples the 0–100 scale. */
-const PREVIEW_STEP = 0.5;
+/**
+ * How finely the preview strip samples the 0–100 scale. Rules are authored in
+ * whole percents, so sampling on that same step keeps adjacent bands touching
+ * instead of painting a default-coloured sliver between 25 and 26.
+ */
+const PREVIEW_STEP = 1;
 class PercentageConfiguration {
     transloco = inject(TranslocoService);
     minValue = PERCENTAGE_MIN_VALUE;
@@ -2143,10 +2148,12 @@ class PercentageConfiguration {
             ...unreachableRuleIndexes.map((index) => this.transloco.translate('properties.form.percentageWarningUnreachable', {
                 index: index + 1,
             })),
-            ...gaps.map((gap) => this.transloco.translate('properties.form.percentageWarningGap', {
-                from: gap.from,
-                to: gap.to,
-            })),
+            ...gaps.map((gap) => gap.from === gap.to
+                ? this.transloco.translate('properties.form.percentageWarningGapSingle', { value: gap.from })
+                : this.transloco.translate('properties.form.percentageWarningGap', {
+                    from: gap.from,
+                    to: gap.to,
+                })),
         ];
     }, ...(ngDevMode ? [{ debugName: "warnings" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -2335,7 +2342,7 @@ class PercentageConfiguration {
                 useExisting: forwardRef(() => PercentageConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\"\n>\n  <div class=\"flex flex-wrap items-start justify-between gap-3\">\n    <div class=\"space-y-1\">\n      <h3 class=\"text-base font-semibold\">\n        {{ \"properties.form.percentageColorsSection\" | transloco }}\n      </h3>\n      <p class=\"max-w-prose text-xs text-surface-500\">\n        {{ \"properties.form.percentageColorsHint\" | transloco }}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 items-center gap-2\">\n      <mt-button\n        type=\"button\"\n        [text]=\"true\"\n        icon=\"arrow.refresh-ccw-01\"\n        [label]=\"'properties.form.percentageRestoreDefaults' | transloco\"\n        (click)=\"restoreDefaults()\"\n      />\n      <mt-button\n        type=\"button\"\n        icon=\"general.plus\"\n        [label]=\"'properties.form.percentageAddRule' | transloco\"\n        (click)=\"addRule()\"\n      />\n    </div>\n  </div>\n\n  @if (ruleControls.length) {\n    <div class=\"space-y-2\">\n      @for (ruleCtrl of ruleControls; track ruleCtrl; let i = $index) {\n        <div\n          [formGroup]=\"ruleCtrl\"\n          class=\"rounded-lg border border-surface-200 px-3 py-2\"\n        >\n          <div\n            class=\"grid items-start gap-3 md:grid-cols-[auto_minmax(0,7rem)_minmax(0,7rem)_minmax(0,1fr)_auto]\"\n          >\n            <span\n              class=\"mt-2 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-surface-100 text-xs font-semibold text-surface-600\"\n              [title]=\"'properties.form.percentageRuleOrderHint' | transloco\"\n            >\n              {{ i + 1 }}\n            </span>\n            <mt-number-field\n              formControlName=\"minValue\"\n              [min]=\"minValue\"\n              [max]=\"maxValue\"\n              [label]=\"'properties.form.percentageRuleFrom' | transloco\"\n            />\n            <mt-number-field\n              formControlName=\"maxValue\"\n              [min]=\"minValue\"\n              [max]=\"maxValue\"\n              [label]=\"'properties.form.percentageRuleTo' | transloco\"\n            />\n            <mt-color-picker-field\n              formControlName=\"color\"\n              [label]=\"'properties.form.percentageRuleColor' | transloco\"\n            />\n            <div class=\"flex items-center gap-1 md:mt-6\">\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"arrow.chevron-up\"\n                [disabled]=\"i === 0\"\n                [tooltip]=\"'properties.form.percentageMoveUp' | transloco\"\n                (click)=\"moveRule(i, -1)\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"arrow.chevron-down\"\n                [disabled]=\"i === ruleControls.length - 1\"\n                [tooltip]=\"'properties.form.percentageMoveDown' | transloco\"\n                (click)=\"moveRule(i, 1)\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                severity=\"danger\"\n                icon=\"general.trash-01\"\n                [tooltip]=\"'properties.form.percentageRemoveRule' | transloco\"\n                (click)=\"removeRule(i)\"\n              />\n            </div>\n          </div>\n          @if (\n            ruleCtrl.touched && ruleCtrl.errors?.[\"boundsOrder\"];\n            as boundsOrder\n          ) {\n            <p class=\"text-xs text-red-500\">{{ boundsOrder.message }}</p>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <p\n      class=\"rounded-lg border border-dashed border-surface-300 px-4 py-3 text-xs text-surface-500\"\n    >\n      {{ \"properties.form.percentageNoRules\" | transloco }}\n    </p>\n  }\n\n  <div class=\"grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\n    <div class=\"space-y-1\">\n      <mt-color-picker-field\n        formControlName=\"defaultColor\"\n        [label]=\"'properties.form.percentageDefaultColor' | transloco\"\n      />\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.percentageDefaultColorHint\" | transloco }}\n      </p>\n    </div>\n\n    <div class=\"space-y-2\">\n      <span class=\"text-xs font-medium text-surface-500\">\n        {{ \"properties.form.percentagePreview\" | transloco }}\n      </span>\n      <div class=\"flex h-3 overflow-hidden rounded-full\">\n        @for (segment of previewSegments(); track $index) {\n          <span\n            class=\"block h-full\"\n            [style.flex-grow]=\"segment.weight\"\n            [style.background-color]=\"segment.color\"\n          ></span>\n        }\n      </div>\n      <div class=\"flex justify-between text-[10px] text-surface-400\">\n        <span>{{ minValue }}%</span>\n        <span>{{ maxValue }}%</span>\n      </div>\n      <div class=\"grid items-center gap-3 md:grid-cols-[minmax(0,1fr)_9rem]\">\n        <mt-slider-field\n          [formControl]=\"previewControl\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [label]=\"'properties.form.percentagePreviewValue' | transloco\"\n        />\n        <mt-progress\n          [value]=\"previewControl.value\"\n          [color]=\"previewColor()\"\n          [height]=\"9\"\n          [showLabel]=\"false\"\n        />\n      </div>\n    </div>\n  </div>\n\n  @if (warnings().length) {\n    <ul class=\"space-y-1 text-xs text-amber-600\">\n      @for (warning of warnings(); track warning) {\n        <li>{{ warning }}</li>\n      }\n    </ul>\n  }\n</div>\n", styles: [""], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "ngmodule", type: TranslocoModule }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div\r\n  [formGroup]=\"form\"\r\n  class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\"\r\n>\r\n  <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n    <div class=\"space-y-1\">\r\n      <h3 class=\"text-base font-semibold\">\r\n        {{ \"properties.form.percentageColorsSection\" | transloco }}\r\n      </h3>\r\n      <p class=\"max-w-prose text-xs text-surface-500\">\r\n        {{ \"properties.form.percentageColorsHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <mt-button\r\n        type=\"button\"\r\n        [text]=\"true\"\r\n        icon=\"arrow.refresh-ccw-01\"\r\n        [label]=\"'properties.form.percentageRestoreDefaults' | transloco\"\r\n        (click)=\"restoreDefaults()\"\r\n      />\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.plus\"\r\n        [label]=\"'properties.form.percentageAddRule' | transloco\"\r\n        (click)=\"addRule()\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (ruleControls.length) {\r\n    <div class=\"space-y-2\">\r\n      @for (ruleCtrl of ruleControls; track ruleCtrl; let i = $index) {\r\n        <div\r\n          [formGroup]=\"ruleCtrl\"\r\n          class=\"rounded-lg border border-surface-200 px-3 py-2\"\r\n        >\r\n          <div\r\n            class=\"grid items-start gap-3 md:grid-cols-[auto_minmax(0,7rem)_minmax(0,7rem)_minmax(0,1fr)_auto]\"\r\n          >\r\n            <span\r\n              class=\"mt-2 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-surface-100 text-xs font-semibold text-surface-600\"\r\n              [title]=\"'properties.form.percentageRuleOrderHint' | transloco\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <mt-number-field\r\n              formControlName=\"minValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleFrom' | transloco\"\r\n            />\r\n            <mt-number-field\r\n              formControlName=\"maxValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleTo' | transloco\"\r\n            />\r\n            <mt-color-picker-field\r\n              formControlName=\"color\"\r\n              [label]=\"'properties.form.percentageRuleColor' | transloco\"\r\n            />\r\n            <div class=\"flex items-center gap-1 md:mt-6\">\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-up\"\r\n                [disabled]=\"i === 0\"\r\n                [tooltip]=\"'properties.form.percentageMoveUp' | transloco\"\r\n                (click)=\"moveRule(i, -1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-down\"\r\n                [disabled]=\"i === ruleControls.length - 1\"\r\n                [tooltip]=\"'properties.form.percentageMoveDown' | transloco\"\r\n                (click)=\"moveRule(i, 1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                severity=\"danger\"\r\n                icon=\"general.trash-01\"\r\n                [tooltip]=\"'properties.form.percentageRemoveRule' | transloco\"\r\n                (click)=\"removeRule(i)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          @if (\r\n            ruleCtrl.touched && ruleCtrl.errors?.[\"boundsOrder\"];\r\n            as boundsOrder\r\n          ) {\r\n            <p class=\"text-xs text-red-500\">{{ boundsOrder.message }}</p>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <p\r\n      class=\"rounded-lg border border-dashed border-surface-300 px-4 py-3 text-xs text-surface-500\"\r\n    >\r\n      {{ \"properties.form.percentageNoRules\" | transloco }}\r\n    </p>\r\n  }\r\n\r\n  <div class=\"grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\r\n    <div class=\"space-y-1\">\r\n      <mt-color-picker-field\r\n        formControlName=\"defaultColor\"\r\n        [label]=\"'properties.form.percentageDefaultColor' | transloco\"\r\n      />\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.percentageDefaultColorHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"space-y-2\">\r\n      <span class=\"text-xs font-medium text-surface-500\">\r\n        {{ \"properties.form.percentagePreview\" | transloco }}\r\n      </span>\r\n      <div class=\"flex h-3 overflow-hidden rounded-full\">\r\n        @for (segment of previewSegments(); track $index) {\r\n          <span\r\n            class=\"block h-full\"\r\n            [style.flex-grow]=\"segment.weight\"\r\n            [style.background-color]=\"segment.color\"\r\n          ></span>\r\n        }\r\n      </div>\r\n      <div class=\"flex justify-between text-[10px] text-surface-400\">\r\n        <span>{{ minValue }}%</span>\r\n        <span>{{ maxValue }}%</span>\r\n      </div>\r\n      <div class=\"grid items-center gap-3 md:grid-cols-[minmax(0,1fr)_9rem]\">\r\n        <mt-slider-field\r\n          [formControl]=\"previewControl\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [label]=\"'properties.form.percentagePreviewValue' | transloco\"\r\n        />\r\n        <mt-progress\r\n          [value]=\"previewControl.value\"\r\n          [color]=\"previewColor()\"\r\n          [height]=\"9\"\r\n          [showLabel]=\"false\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (warnings().length) {\r\n    <ul class=\"space-y-1 text-xs text-amber-600\">\r\n      @for (warning of warnings(); track warning) {\r\n        <li>{{ warning }}</li>\r\n      }\r\n    </ul>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "ngmodule", type: TranslocoModule }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PercentageConfiguration, decorators: [{
             type: Component,
@@ -2358,7 +2365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             useExisting: forwardRef(() => PercentageConfiguration),
                             multi: true,
                         },
-                    ], template: "<div\n  [formGroup]=\"form\"\n  class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\"\n>\n  <div class=\"flex flex-wrap items-start justify-between gap-3\">\n    <div class=\"space-y-1\">\n      <h3 class=\"text-base font-semibold\">\n        {{ \"properties.form.percentageColorsSection\" | transloco }}\n      </h3>\n      <p class=\"max-w-prose text-xs text-surface-500\">\n        {{ \"properties.form.percentageColorsHint\" | transloco }}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 items-center gap-2\">\n      <mt-button\n        type=\"button\"\n        [text]=\"true\"\n        icon=\"arrow.refresh-ccw-01\"\n        [label]=\"'properties.form.percentageRestoreDefaults' | transloco\"\n        (click)=\"restoreDefaults()\"\n      />\n      <mt-button\n        type=\"button\"\n        icon=\"general.plus\"\n        [label]=\"'properties.form.percentageAddRule' | transloco\"\n        (click)=\"addRule()\"\n      />\n    </div>\n  </div>\n\n  @if (ruleControls.length) {\n    <div class=\"space-y-2\">\n      @for (ruleCtrl of ruleControls; track ruleCtrl; let i = $index) {\n        <div\n          [formGroup]=\"ruleCtrl\"\n          class=\"rounded-lg border border-surface-200 px-3 py-2\"\n        >\n          <div\n            class=\"grid items-start gap-3 md:grid-cols-[auto_minmax(0,7rem)_minmax(0,7rem)_minmax(0,1fr)_auto]\"\n          >\n            <span\n              class=\"mt-2 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-surface-100 text-xs font-semibold text-surface-600\"\n              [title]=\"'properties.form.percentageRuleOrderHint' | transloco\"\n            >\n              {{ i + 1 }}\n            </span>\n            <mt-number-field\n              formControlName=\"minValue\"\n              [min]=\"minValue\"\n              [max]=\"maxValue\"\n              [label]=\"'properties.form.percentageRuleFrom' | transloco\"\n            />\n            <mt-number-field\n              formControlName=\"maxValue\"\n              [min]=\"minValue\"\n              [max]=\"maxValue\"\n              [label]=\"'properties.form.percentageRuleTo' | transloco\"\n            />\n            <mt-color-picker-field\n              formControlName=\"color\"\n              [label]=\"'properties.form.percentageRuleColor' | transloco\"\n            />\n            <div class=\"flex items-center gap-1 md:mt-6\">\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"arrow.chevron-up\"\n                [disabled]=\"i === 0\"\n                [tooltip]=\"'properties.form.percentageMoveUp' | transloco\"\n                (click)=\"moveRule(i, -1)\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"arrow.chevron-down\"\n                [disabled]=\"i === ruleControls.length - 1\"\n                [tooltip]=\"'properties.form.percentageMoveDown' | transloco\"\n                (click)=\"moveRule(i, 1)\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                severity=\"danger\"\n                icon=\"general.trash-01\"\n                [tooltip]=\"'properties.form.percentageRemoveRule' | transloco\"\n                (click)=\"removeRule(i)\"\n              />\n            </div>\n          </div>\n          @if (\n            ruleCtrl.touched && ruleCtrl.errors?.[\"boundsOrder\"];\n            as boundsOrder\n          ) {\n            <p class=\"text-xs text-red-500\">{{ boundsOrder.message }}</p>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <p\n      class=\"rounded-lg border border-dashed border-surface-300 px-4 py-3 text-xs text-surface-500\"\n    >\n      {{ \"properties.form.percentageNoRules\" | transloco }}\n    </p>\n  }\n\n  <div class=\"grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\n    <div class=\"space-y-1\">\n      <mt-color-picker-field\n        formControlName=\"defaultColor\"\n        [label]=\"'properties.form.percentageDefaultColor' | transloco\"\n      />\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.percentageDefaultColorHint\" | transloco }}\n      </p>\n    </div>\n\n    <div class=\"space-y-2\">\n      <span class=\"text-xs font-medium text-surface-500\">\n        {{ \"properties.form.percentagePreview\" | transloco }}\n      </span>\n      <div class=\"flex h-3 overflow-hidden rounded-full\">\n        @for (segment of previewSegments(); track $index) {\n          <span\n            class=\"block h-full\"\n            [style.flex-grow]=\"segment.weight\"\n            [style.background-color]=\"segment.color\"\n          ></span>\n        }\n      </div>\n      <div class=\"flex justify-between text-[10px] text-surface-400\">\n        <span>{{ minValue }}%</span>\n        <span>{{ maxValue }}%</span>\n      </div>\n      <div class=\"grid items-center gap-3 md:grid-cols-[minmax(0,1fr)_9rem]\">\n        <mt-slider-field\n          [formControl]=\"previewControl\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [label]=\"'properties.form.percentagePreviewValue' | transloco\"\n        />\n        <mt-progress\n          [value]=\"previewControl.value\"\n          [color]=\"previewColor()\"\n          [height]=\"9\"\n          [showLabel]=\"false\"\n        />\n      </div>\n    </div>\n  </div>\n\n  @if (warnings().length) {\n    <ul class=\"space-y-1 text-xs text-amber-600\">\n      @for (warning of warnings(); track warning) {\n        <li>{{ warning }}</li>\n      }\n    </ul>\n  }\n</div>\n" }]
+                    ], template: "<div\r\n  [formGroup]=\"form\"\r\n  class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\"\r\n>\r\n  <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n    <div class=\"space-y-1\">\r\n      <h3 class=\"text-base font-semibold\">\r\n        {{ \"properties.form.percentageColorsSection\" | transloco }}\r\n      </h3>\r\n      <p class=\"max-w-prose text-xs text-surface-500\">\r\n        {{ \"properties.form.percentageColorsHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <mt-button\r\n        type=\"button\"\r\n        [text]=\"true\"\r\n        icon=\"arrow.refresh-ccw-01\"\r\n        [label]=\"'properties.form.percentageRestoreDefaults' | transloco\"\r\n        (click)=\"restoreDefaults()\"\r\n      />\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.plus\"\r\n        [label]=\"'properties.form.percentageAddRule' | transloco\"\r\n        (click)=\"addRule()\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (ruleControls.length) {\r\n    <div class=\"space-y-2\">\r\n      @for (ruleCtrl of ruleControls; track ruleCtrl; let i = $index) {\r\n        <div\r\n          [formGroup]=\"ruleCtrl\"\r\n          class=\"rounded-lg border border-surface-200 px-3 py-2\"\r\n        >\r\n          <div\r\n            class=\"grid items-start gap-3 md:grid-cols-[auto_minmax(0,7rem)_minmax(0,7rem)_minmax(0,1fr)_auto]\"\r\n          >\r\n            <span\r\n              class=\"mt-2 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-surface-100 text-xs font-semibold text-surface-600\"\r\n              [title]=\"'properties.form.percentageRuleOrderHint' | transloco\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <mt-number-field\r\n              formControlName=\"minValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleFrom' | transloco\"\r\n            />\r\n            <mt-number-field\r\n              formControlName=\"maxValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleTo' | transloco\"\r\n            />\r\n            <mt-color-picker-field\r\n              formControlName=\"color\"\r\n              [label]=\"'properties.form.percentageRuleColor' | transloco\"\r\n            />\r\n            <div class=\"flex items-center gap-1 md:mt-6\">\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-up\"\r\n                [disabled]=\"i === 0\"\r\n                [tooltip]=\"'properties.form.percentageMoveUp' | transloco\"\r\n                (click)=\"moveRule(i, -1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-down\"\r\n                [disabled]=\"i === ruleControls.length - 1\"\r\n                [tooltip]=\"'properties.form.percentageMoveDown' | transloco\"\r\n                (click)=\"moveRule(i, 1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                severity=\"danger\"\r\n                icon=\"general.trash-01\"\r\n                [tooltip]=\"'properties.form.percentageRemoveRule' | transloco\"\r\n                (click)=\"removeRule(i)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          @if (\r\n            ruleCtrl.touched && ruleCtrl.errors?.[\"boundsOrder\"];\r\n            as boundsOrder\r\n          ) {\r\n            <p class=\"text-xs text-red-500\">{{ boundsOrder.message }}</p>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <p\r\n      class=\"rounded-lg border border-dashed border-surface-300 px-4 py-3 text-xs text-surface-500\"\r\n    >\r\n      {{ \"properties.form.percentageNoRules\" | transloco }}\r\n    </p>\r\n  }\r\n\r\n  <div class=\"grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\r\n    <div class=\"space-y-1\">\r\n      <mt-color-picker-field\r\n        formControlName=\"defaultColor\"\r\n        [label]=\"'properties.form.percentageDefaultColor' | transloco\"\r\n      />\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.percentageDefaultColorHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"space-y-2\">\r\n      <span class=\"text-xs font-medium text-surface-500\">\r\n        {{ \"properties.form.percentagePreview\" | transloco }}\r\n      </span>\r\n      <div class=\"flex h-3 overflow-hidden rounded-full\">\r\n        @for (segment of previewSegments(); track $index) {\r\n          <span\r\n            class=\"block h-full\"\r\n            [style.flex-grow]=\"segment.weight\"\r\n            [style.background-color]=\"segment.color\"\r\n          ></span>\r\n        }\r\n      </div>\r\n      <div class=\"flex justify-between text-[10px] text-surface-400\">\r\n        <span>{{ minValue }}%</span>\r\n        <span>{{ maxValue }}%</span>\r\n      </div>\r\n      <div class=\"grid items-center gap-3 md:grid-cols-[minmax(0,1fr)_9rem]\">\r\n        <mt-slider-field\r\n          [formControl]=\"previewControl\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [label]=\"'properties.form.percentagePreviewValue' | transloco\"\r\n        />\r\n        <mt-progress\r\n          [value]=\"previewControl.value\"\r\n          [color]=\"previewColor()\"\r\n          [height]=\"9\"\r\n          [showLabel]=\"false\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (warnings().length) {\r\n    <ul class=\"space-y-1 text-xs text-amber-600\">\r\n      @for (warning of warnings(); track warning) {\r\n        <li>{{ warning }}</li>\r\n      }\r\n    </ul>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
 class StatusItemForm {
@@ -2528,7 +2535,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 }, contextKey: { classPropertyName: "contextKey", publicName: "contextKey", 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 }, 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 font-medium text-surface-700\">\r\n          {{ \"properties.form.statusFormula\" | transloco }}\r\n          <span class=\"text-red-500 dark:text-red-600\" aria-hidden=\"true\"\r\n            >*</span\r\n          >\r\n        </div>\r\n\r\n        <mt-formula-builder\r\n          [formControl]=\"formulaControl\"\r\n          [contextKey]=\"contextKey()\"\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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "builderOnly", "valueMode", "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 }, contextKey: { classPropertyName: "contextKey", publicName: "contextKey", 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 }, 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 font-medium text-surface-700\">\r\n          {{ \"properties.form.statusFormula\" | transloco }}\r\n          <span class=\"text-red-500 dark:text-red-600\" aria-hidden=\"true\"\r\n            >*</span\r\n          >\r\n        </div>\r\n\r\n        <mt-formula-builder\r\n          [formControl]=\"formulaControl\"\r\n          [contextKey]=\"contextKey()\"\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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "invalidWhenEmpty", "toolbarTabs", "functionCategories", "operators", "codeOnly", "builderOnly", "valueMode", "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,
@@ -2691,7 +2698,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 }, contextKey: { classPropertyName: "contextKey", publicName: "contextKey", 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 } }, viewQueries: [{ propertyName: "colorTpl", first: true, predicate: ["colorTpl"], descendants: true, isSignal: true }], 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      <ng-template #colorTpl let-row>\r\n        @if (row.color) {\r\n          <span\r\n            class=\"inline-block h-5 w-5 rounded-full border border-surface-300\"\r\n            [style.background-color]=\"row.color\"\r\n            [title]=\"row.color\"\r\n          ></span>\r\n        } @else {\r\n          <span class=\"text-surface-400\">\u2014</span>\r\n        }\r\n      </ng-template>\r\n    </mt-table>\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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { 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 }, contextKey: { classPropertyName: "contextKey", publicName: "contextKey", 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 } }, viewQueries: [{ propertyName: "colorTpl", first: true, predicate: ["colorTpl"], descendants: true, isSignal: true }], 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      <ng-template #colorTpl let-row>\r\n        @if (row.color) {\r\n          <span\r\n            class=\"inline-block h-5 w-5 rounded-full border border-surface-300\"\r\n            [style.background-color]=\"row.color\"\r\n            [title]=\"row.color\"\r\n          ></span>\r\n        } @else {\r\n          <span class=\"text-surface-400\">\u2014</span>\r\n        }\r\n      </ng-template>\r\n    </mt-table>\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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { 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,
@@ -2769,7 +2776,7 @@ class UserConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: "21.2.8", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -2908,7 +2915,7 @@ class AttachmentConfiguration {
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AttachmentConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: "21.2.8", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -3535,7 +3542,7 @@ class PropertyForm {
         this.subscriptions.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusConfigurationSection", first: true, predicate: ["statusConfigurationSection"], descendants: true, isSignal: true }, { propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty($event)\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [forcedDisabledFieldKeys]=\"lockedMainFieldKeys()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"EntityList\") {\r\n                <mt-entity-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Status\") {\r\n                <section #statusConfigurationSection>\r\n                  <mt-status-configuration\r\n                    [propertyId]=\"statusPropertyId()\"\r\n                    [contextKey]=\"formulaContextKey()\"\r\n                    [levelSchemaId]=\"formulaSchemaId()\"\r\n                    [moduleId]=\"formulaModuleId()\"\r\n                  />\r\n                </section>\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated() && !hideFormulaBuilder()) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex items-center justify-between px-4 py-5 border-b border-surface\"\r\n              >\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ \"properties.form.formula\" | transloco }}\r\n                  <span class=\"text-red-500\">*</span>\r\n                </h3>\r\n              </div>\r\n              <div class=\"flex-1 min-h-0 p-4\">\r\n                <mt-formula-builder\r\n                  formControlName=\"formula\"\r\n                  [contextKey]=\"formulaContextKey()\"\r\n                  [levelSchemaId]=\"formulaSchemaId()\"\r\n                  [moduleId]=\"formulaModuleId()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { 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: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "builderOnly", "valueMode", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-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: StatusConfiguration, selector: "mt-status-configuration", inputs: ["propertyId", "contextKey", "levelSchemaId", "moduleId"] }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusConfigurationSection", first: true, predicate: ["statusConfigurationSection"], descendants: true, isSignal: true }, { propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty($event)\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [forcedDisabledFieldKeys]=\"lockedMainFieldKeys()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"EntityList\") {\r\n                <mt-entity-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Status\") {\r\n                <section #statusConfigurationSection>\r\n                  <mt-status-configuration\r\n                    [propertyId]=\"statusPropertyId()\"\r\n                    [contextKey]=\"formulaContextKey()\"\r\n                    [levelSchemaId]=\"formulaSchemaId()\"\r\n                    [moduleId]=\"formulaModuleId()\"\r\n                  />\r\n                </section>\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated() && !hideFormulaBuilder()) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex items-center justify-between px-4 py-5 border-b border-surface\"\r\n              >\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ \"properties.form.formula\" | transloco }}\r\n                  <span class=\"text-red-500\">*</span>\r\n                </h3>\r\n              </div>\r\n              <div class=\"flex-1 min-h-0 p-4\">\r\n                <mt-formula-builder\r\n                  formControlName=\"formula\"\r\n                  [contextKey]=\"formulaContextKey()\"\r\n                  [levelSchemaId]=\"formulaSchemaId()\"\r\n                  [moduleId]=\"formulaModuleId()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "invalidWhenEmpty", "toolbarTabs", "functionCategories", "operators", "codeOnly", "builderOnly", "valueMode", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-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: StatusConfiguration, selector: "mt-status-configuration", inputs: ["propertyId", "contextKey", "levelSchemaId", "moduleId"] }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,