@masterteam/form-builder 0.0.48 → 0.0.49

package/fesm2022/masterteam-form-builder.mjs

@@ -1956,6 +1956,10 @@ class FBSection {
         };
         return typeMap[field.type] ?? 'text';
     }
+    /** True when the field previews as a connection (`mt-schema-connection-field`). */
+    isConnectionField(field) {
+        return this.getFieldType(field) === 'schema-connection';
+    }
     getFieldConfig(field, languageLabel) {
         const type = this.getFieldType(field);
         const base = {
@@ -1970,7 +1974,7 @@ class FBSection {
         return base;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBSection, isStandalone: true, selector: "mt-fb-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, connectedDropLists: { classPropertyName: "connectedDropLists", publicName: "connectedDropLists", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFieldDrop: "onFieldDrop" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n  <div class=\"flex flex-col\">\n    <div\n      cdkDragHandle\n      [class]=\"\n        'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\n        (isManageProperties() ? '' : ' cursor-grab active:cursor-grabbing')\n      \"\n    >\n      <div class=\"flex min-w-0 items-center gap-3\">\n        <mt-icon\n          class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\n          [class.rotate-180]=\"expanded()\"\n          icon=\"arrow.chevron-down\"\n          (click)=\"toggleExpanded()\"\n        ></mt-icon>\n\n        <span class=\"truncate font-semibold\">\n          {{ sectionName() }}\n        </span>\n        @if (!isManageProperties()) {\n          <mt-icon\n            class=\"text-lg cursor-pointer\"\n            icon=\"general.edit-02\"\n            (click)=\"editSection($event)\"\n            [mtTooltip]=\"t('edit-section')\"\n          ></mt-icon>\n        }\n      </div>\n      <span></span>\n    </div>\n    @if (expanded()) {\n      <div\n        cdkDropList\n        [id]=\"section().id\"\n        cdkDropListOrientation=\"mixed\"\n        [cdkDropListData]=\"displayFields()\"\n        [cdkDropListConnectedTo]=\"connectedDropLists()\"\n        [cdkDropListDisabled]=\"isManageProperties()\"\n        [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n        class=\"grid grid-cols-12 gap-4 relative py-2\"\n        [class.min-h-27]=\"displayFields().length === 0\"\n      >\n        @for (field of displayFields(); track field.id) {\n          <div\n            cdkDrag\n            [cdkDragData]=\"field\"\n            [cdkDragDisabled]=\"\n              isManageProperties() || field._pending || field._deleting\n            \"\n            [class]=\"\n              getFieldColSpan(field) +\n              (isManageProperties()\n                ? ''\n                : ' cursor-grab active:cursor-grabbing')\n            \"\n          >\n            <div\n              *cdkDragPlaceholder\n              [class]=\"\n                'h-full min-h-27 bg-black/10 rounded-lg ' +\n                getFieldColSpan(field)\n              \"\n            ></div>\n            @if (field._pending) {\n              <!-- Skeleton for pending field -->\n              <mt-card class=\"h-full animate-pulse\">\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\n                  <div class=\"flex-1 space-y-3\">\n                    <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\n                    <div class=\"h-10 bg-surface-200 rounded\"></div>\n                  </div>\n                  <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n                  </div>\n                </div>\n              </mt-card>\n            } @else {\n              <mt-card\n                class=\"h-full relative transition-all duration-200\"\n                [class.opacity-50]=\"field._deleting\"\n              >\n                @if (field._deleting) {\n                  <div\n                    class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\n                  >\n                    <div\n                      class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\n                    ></div>\n                  </div>\n                }\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\n                  <div class=\"min-w-0 flex-1\">\n                    <form [formGroup]=\"getFormGroup(field)\">\n                      <div\n                        class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\n                      >\n                        <div class=\"min-w-0 break-words font-semibold\">\n                          {{ field.name }}\n                        </div>\n                        @if (isManageProperties()) {\n                          <div\n                            class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\n                          >\n                            @if (field.isRead === false) {\n                              <span\n                                class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\n                              >\n                                {{ t(\"hidden\") }}\n                              </span>\n                            } @else if (field.isWrite === false) {\n                              <span\n                                class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\n                              >\n                                {{ t(\"read-only\") }}\n                              </span>\n                            }\n                          </div>\n                        }\n                      </div>\n\n                      <div\n                        class=\"transition-all duration-200\"\n                        [class.opacity-40]=\"\n                          isManageProperties() && field.isRead === false\n                        \"\n                        [class.blur-[1px]]=\"\n                          isManageProperties() && field.isRead === false\n                        \"\n                      >\n                        @if (isTranslatableTextField(field)) {\n                          <div class=\"grid grid-cols-12 gap-3\">\n                            @for (\n                              control of getTranslatableFieldControls(field);\n                              track control.key\n                            ) {\n                              <div\n                                [class]=\"\n                                  getTranslatableFieldControlColSpan(field)\n                                \"\n                              >\n                                <mt-dynamic-field\n                                  [fieldName]=\"control.key\"\n                                  [fieldConfig]=\"control.config\"\n                                />\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          <mt-dynamic-field\n                            [fieldName]=\"field.name\"\n                            [fieldConfig]=\"getFieldConfig(field)\"\n                          />\n                        }\n                      </div>\n                    </form>\n                  </div>\n                  <div\n                    class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\n                  >\n                    <mt-button\n                      size=\"small\"\n                      icon=\"general.settings-01\"\n                      [tooltip]=\"t('edit-field')\"\n                      [variant]=\"'outlined'\"\n                      [disabled]=\"field._deleting\"\n                      (onClick)=\"editField(field)\"\n                    ></mt-button>\n                    @if (!isManageProperties()) {\n                      <mt-button\n                        size=\"small\"\n                        icon=\"general.trash-01\"\n                        severity=\"danger\"\n                        [variant]=\"'outlined'\"\n                        [tooltip]=\"t('remove-field')\"\n                        [disabled]=\"field._deleting\"\n                        (onClick)=\"removeField($event, field)\"\n                      ></mt-button>\n                    }\n                  </div>\n                </div>\n              </mt-card>\n            }\n          </div>\n        } @empty {\n          <mt-card class=\"absolute inset-0 top-4\" paddingless>\n            <div class=\"size-full p-4\">\n              <div\n                class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\n              >\n                <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\n                <span>{{ t(\"drag-from-the-side\") }}</span>\n              </div>\n            </div>\n          </mt-card>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicField, selector: "mt-dynamic-field", inputs: ["fieldConfig", "fieldName"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: Tooltip, selector: "[mtTooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBSection, isStandalone: true, selector: "mt-fb-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, connectedDropLists: { classPropertyName: "connectedDropLists", publicName: "connectedDropLists", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFieldDrop: "onFieldDrop" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex flex-col\">\r\n    <div\r\n      cdkDragHandle\r\n      [class]=\"\r\n        'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\r\n        (isManageProperties() ? '' : ' cursor-grab active:cursor-grabbing')\r\n      \"\r\n    >\r\n      <div class=\"flex min-w-0 items-center gap-3\">\r\n        <mt-icon\r\n          class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          icon=\"arrow.chevron-down\"\r\n          (click)=\"toggleExpanded()\"\r\n        ></mt-icon>\r\n\r\n        <span class=\"truncate font-semibold\">\r\n          {{ sectionName() }}\r\n        </span>\r\n        @if (!isManageProperties()) {\r\n          <mt-icon\r\n            class=\"text-lg cursor-pointer\"\r\n            icon=\"general.edit-02\"\r\n            (click)=\"editSection($event)\"\r\n            [mtTooltip]=\"t('edit-section')\"\r\n          ></mt-icon>\r\n        }\r\n      </div>\r\n      <span></span>\r\n    </div>\r\n    @if (expanded()) {\r\n      <div\r\n        cdkDropList\r\n        [id]=\"section().id\"\r\n        cdkDropListOrientation=\"mixed\"\r\n        [cdkDropListData]=\"displayFields()\"\r\n        [cdkDropListConnectedTo]=\"connectedDropLists()\"\r\n        [cdkDropListDisabled]=\"isManageProperties()\"\r\n        [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\r\n        (cdkDropListDropped)=\"onDrop($event)\"\r\n        class=\"grid grid-cols-12 gap-4 relative py-2\"\r\n        [class.min-h-27]=\"displayFields().length === 0\"\r\n      >\r\n        @for (field of displayFields(); track field.id) {\r\n          <div\r\n            cdkDrag\r\n            [cdkDragData]=\"field\"\r\n            [cdkDragDisabled]=\"\r\n              isManageProperties() || field._pending || field._deleting\r\n            \"\r\n            [class]=\"\r\n              getFieldColSpan(field) +\r\n              (isManageProperties()\r\n                ? ''\r\n                : ' cursor-grab active:cursor-grabbing')\r\n            \"\r\n          >\r\n            <div\r\n              *cdkDragPlaceholder\r\n              [class]=\"\r\n                'h-full min-h-27 bg-black/10 rounded-lg ' +\r\n                getFieldColSpan(field)\r\n              \"\r\n            ></div>\r\n            @if (field._pending) {\r\n              <!-- Skeleton for pending field -->\r\n              <mt-card class=\"h-full animate-pulse\">\r\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n                  <div class=\"flex-1 space-y-3\">\r\n                    <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\r\n                    <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                  <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            } @else {\r\n              <mt-card\r\n                class=\"h-full relative transition-all duration-200\"\r\n                [class.opacity-50]=\"field._deleting\"\r\n              >\r\n                @if (field._deleting) {\r\n                  <div\r\n                    class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\r\n                  >\r\n                    <div\r\n                      class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\r\n                    ></div>\r\n                  </div>\r\n                }\r\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n                  <div class=\"min-w-0 flex-1\">\r\n                    <form [formGroup]=\"getFormGroup(field)\">\r\n                      <!--\r\n                        Connection fields label every source dropdown with its\r\n                        own name, so the field name here would just repeat the\r\n                        connection's label above them.\r\n                      -->\r\n                      @if (!isConnectionField(field) || isManageProperties()) {\r\n                        <div\r\n                          class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\r\n                        >\r\n                          @if (!isConnectionField(field)) {\r\n                            <div class=\"min-w-0 break-words font-semibold\">\r\n                              {{ field.name }}\r\n                            </div>\r\n                          }\r\n                          @if (isManageProperties()) {\r\n                            <div\r\n                              class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\r\n                            >\r\n                              @if (field.isRead === false) {\r\n                                <span\r\n                                  class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\r\n                                >\r\n                                  {{ t(\"hidden\") }}\r\n                                </span>\r\n                              } @else if (field.isWrite === false) {\r\n                                <span\r\n                                  class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\r\n                                >\r\n                                  {{ t(\"read-only\") }}\r\n                                </span>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        </div>\r\n                      }\r\n\r\n                      <div\r\n                        class=\"transition-all duration-200\"\r\n                        [class.opacity-40]=\"\r\n                          isManageProperties() && field.isRead === false\r\n                        \"\r\n                        [class.blur-[1px]]=\"\r\n                          isManageProperties() && field.isRead === false\r\n                        \"\r\n                      >\r\n                        @if (isTranslatableTextField(field)) {\r\n                          <div class=\"grid grid-cols-12 gap-3\">\r\n                            @for (\r\n                              control of getTranslatableFieldControls(field);\r\n                              track control.key\r\n                            ) {\r\n                              <div\r\n                                [class]=\"\r\n                                  getTranslatableFieldControlColSpan(field)\r\n                                \"\r\n                              >\r\n                                <mt-dynamic-field\r\n                                  [fieldName]=\"control.key\"\r\n                                  [fieldConfig]=\"control.config\"\r\n                                />\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <mt-dynamic-field\r\n                            [fieldName]=\"field.name\"\r\n                            [fieldConfig]=\"getFieldConfig(field)\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    </form>\r\n                  </div>\r\n                  <div\r\n                    class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\r\n                  >\r\n                    <mt-button\r\n                      size=\"small\"\r\n                      icon=\"general.settings-01\"\r\n                      [tooltip]=\"t('edit-field')\"\r\n                      [variant]=\"'outlined'\"\r\n                      [disabled]=\"field._deleting\"\r\n                      (onClick)=\"editField(field)\"\r\n                    ></mt-button>\r\n                    @if (!isManageProperties()) {\r\n                      <mt-button\r\n                        size=\"small\"\r\n                        icon=\"general.trash-01\"\r\n                        severity=\"danger\"\r\n                        [variant]=\"'outlined'\"\r\n                        [tooltip]=\"t('remove-field')\"\r\n                        [disabled]=\"field._deleting\"\r\n                        (onClick)=\"removeField($event, field)\"\r\n                      ></mt-button>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <mt-card class=\"absolute inset-0 top-4\" paddingless>\r\n            <div class=\"size-full p-4\">\r\n              <div\r\n                class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\r\n              >\r\n                <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\r\n                <span>{{ t(\"drag-from-the-side\") }}</span>\r\n              </div>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicField, selector: "mt-dynamic-field", inputs: ["fieldConfig", "fieldName"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: Tooltip, selector: "[mtTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSection, decorators: [{
             type: Component,
@@ -1986,7 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         DynamicField,
                         ReactiveFormsModule,
                         Tooltip,
-                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n  <div class=\"flex flex-col\">\n    <div\n      cdkDragHandle\n      [class]=\"\n        'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\n        (isManageProperties() ? '' : ' cursor-grab active:cursor-grabbing')\n      \"\n    >\n      <div class=\"flex min-w-0 items-center gap-3\">\n        <mt-icon\n          class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\n          [class.rotate-180]=\"expanded()\"\n          icon=\"arrow.chevron-down\"\n          (click)=\"toggleExpanded()\"\n        ></mt-icon>\n\n        <span class=\"truncate font-semibold\">\n          {{ sectionName() }}\n        </span>\n        @if (!isManageProperties()) {\n          <mt-icon\n            class=\"text-lg cursor-pointer\"\n            icon=\"general.edit-02\"\n            (click)=\"editSection($event)\"\n            [mtTooltip]=\"t('edit-section')\"\n          ></mt-icon>\n        }\n      </div>\n      <span></span>\n    </div>\n    @if (expanded()) {\n      <div\n        cdkDropList\n        [id]=\"section().id\"\n        cdkDropListOrientation=\"mixed\"\n        [cdkDropListData]=\"displayFields()\"\n        [cdkDropListConnectedTo]=\"connectedDropLists()\"\n        [cdkDropListDisabled]=\"isManageProperties()\"\n        [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n        class=\"grid grid-cols-12 gap-4 relative py-2\"\n        [class.min-h-27]=\"displayFields().length === 0\"\n      >\n        @for (field of displayFields(); track field.id) {\n          <div\n            cdkDrag\n            [cdkDragData]=\"field\"\n            [cdkDragDisabled]=\"\n              isManageProperties() || field._pending || field._deleting\n            \"\n            [class]=\"\n              getFieldColSpan(field) +\n              (isManageProperties()\n                ? ''\n                : ' cursor-grab active:cursor-grabbing')\n            \"\n          >\n            <div\n              *cdkDragPlaceholder\n              [class]=\"\n                'h-full min-h-27 bg-black/10 rounded-lg ' +\n                getFieldColSpan(field)\n              \"\n            ></div>\n            @if (field._pending) {\n              <!-- Skeleton for pending field -->\n              <mt-card class=\"h-full animate-pulse\">\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\n                  <div class=\"flex-1 space-y-3\">\n                    <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\n                    <div class=\"h-10 bg-surface-200 rounded\"></div>\n                  </div>\n                  <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n                  </div>\n                </div>\n              </mt-card>\n            } @else {\n              <mt-card\n                class=\"h-full relative transition-all duration-200\"\n                [class.opacity-50]=\"field._deleting\"\n              >\n                @if (field._deleting) {\n                  <div\n                    class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\n                  >\n                    <div\n                      class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\n                    ></div>\n                  </div>\n                }\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\n                  <div class=\"min-w-0 flex-1\">\n                    <form [formGroup]=\"getFormGroup(field)\">\n                      <div\n                        class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\n                      >\n                        <div class=\"min-w-0 break-words font-semibold\">\n                          {{ field.name }}\n                        </div>\n                        @if (isManageProperties()) {\n                          <div\n                            class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\n                          >\n                            @if (field.isRead === false) {\n                              <span\n                                class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\n                              >\n                                {{ t(\"hidden\") }}\n                              </span>\n                            } @else if (field.isWrite === false) {\n                              <span\n                                class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\n                              >\n                                {{ t(\"read-only\") }}\n                              </span>\n                            }\n                          </div>\n                        }\n                      </div>\n\n                      <div\n                        class=\"transition-all duration-200\"\n                        [class.opacity-40]=\"\n                          isManageProperties() && field.isRead === false\n                        \"\n                        [class.blur-[1px]]=\"\n                          isManageProperties() && field.isRead === false\n                        \"\n                      >\n                        @if (isTranslatableTextField(field)) {\n                          <div class=\"grid grid-cols-12 gap-3\">\n                            @for (\n                              control of getTranslatableFieldControls(field);\n                              track control.key\n                            ) {\n                              <div\n                                [class]=\"\n                                  getTranslatableFieldControlColSpan(field)\n                                \"\n                              >\n                                <mt-dynamic-field\n                                  [fieldName]=\"control.key\"\n                                  [fieldConfig]=\"control.config\"\n                                />\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          <mt-dynamic-field\n                            [fieldName]=\"field.name\"\n                            [fieldConfig]=\"getFieldConfig(field)\"\n                          />\n                        }\n                      </div>\n                    </form>\n                  </div>\n                  <div\n                    class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\n                  >\n                    <mt-button\n                      size=\"small\"\n                      icon=\"general.settings-01\"\n                      [tooltip]=\"t('edit-field')\"\n                      [variant]=\"'outlined'\"\n                      [disabled]=\"field._deleting\"\n                      (onClick)=\"editField(field)\"\n                    ></mt-button>\n                    @if (!isManageProperties()) {\n                      <mt-button\n                        size=\"small\"\n                        icon=\"general.trash-01\"\n                        severity=\"danger\"\n                        [variant]=\"'outlined'\"\n                        [tooltip]=\"t('remove-field')\"\n                        [disabled]=\"field._deleting\"\n                        (onClick)=\"removeField($event, field)\"\n                      ></mt-button>\n                    }\n                  </div>\n                </div>\n              </mt-card>\n            }\n          </div>\n        } @empty {\n          <mt-card class=\"absolute inset-0 top-4\" paddingless>\n            <div class=\"size-full p-4\">\n              <div\n                class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\n              >\n                <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\n                <span>{{ t(\"drag-from-the-side\") }}</span>\n              </div>\n            </div>\n          </mt-card>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n" }]
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex flex-col\">\r\n    <div\r\n      cdkDragHandle\r\n      [class]=\"\r\n        'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\r\n        (isManageProperties() ? '' : ' cursor-grab active:cursor-grabbing')\r\n      \"\r\n    >\r\n      <div class=\"flex min-w-0 items-center gap-3\">\r\n        <mt-icon\r\n          class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          icon=\"arrow.chevron-down\"\r\n          (click)=\"toggleExpanded()\"\r\n        ></mt-icon>\r\n\r\n        <span class=\"truncate font-semibold\">\r\n          {{ sectionName() }}\r\n        </span>\r\n        @if (!isManageProperties()) {\r\n          <mt-icon\r\n            class=\"text-lg cursor-pointer\"\r\n            icon=\"general.edit-02\"\r\n            (click)=\"editSection($event)\"\r\n            [mtTooltip]=\"t('edit-section')\"\r\n          ></mt-icon>\r\n        }\r\n      </div>\r\n      <span></span>\r\n    </div>\r\n    @if (expanded()) {\r\n      <div\r\n        cdkDropList\r\n        [id]=\"section().id\"\r\n        cdkDropListOrientation=\"mixed\"\r\n        [cdkDropListData]=\"displayFields()\"\r\n        [cdkDropListConnectedTo]=\"connectedDropLists()\"\r\n        [cdkDropListDisabled]=\"isManageProperties()\"\r\n        [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\r\n        (cdkDropListDropped)=\"onDrop($event)\"\r\n        class=\"grid grid-cols-12 gap-4 relative py-2\"\r\n        [class.min-h-27]=\"displayFields().length === 0\"\r\n      >\r\n        @for (field of displayFields(); track field.id) {\r\n          <div\r\n            cdkDrag\r\n            [cdkDragData]=\"field\"\r\n            [cdkDragDisabled]=\"\r\n              isManageProperties() || field._pending || field._deleting\r\n            \"\r\n            [class]=\"\r\n              getFieldColSpan(field) +\r\n              (isManageProperties()\r\n                ? ''\r\n                : ' cursor-grab active:cursor-grabbing')\r\n            \"\r\n          >\r\n            <div\r\n              *cdkDragPlaceholder\r\n              [class]=\"\r\n                'h-full min-h-27 bg-black/10 rounded-lg ' +\r\n                getFieldColSpan(field)\r\n              \"\r\n            ></div>\r\n            @if (field._pending) {\r\n              <!-- Skeleton for pending field -->\r\n              <mt-card class=\"h-full animate-pulse\">\r\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n                  <div class=\"flex-1 space-y-3\">\r\n                    <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\r\n                    <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                  <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            } @else {\r\n              <mt-card\r\n                class=\"h-full relative transition-all duration-200\"\r\n                [class.opacity-50]=\"field._deleting\"\r\n              >\r\n                @if (field._deleting) {\r\n                  <div\r\n                    class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\r\n                  >\r\n                    <div\r\n                      class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\r\n                    ></div>\r\n                  </div>\r\n                }\r\n                <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n                  <div class=\"min-w-0 flex-1\">\r\n                    <form [formGroup]=\"getFormGroup(field)\">\r\n                      <!--\r\n                        Connection fields label every source dropdown with its\r\n                        own name, so the field name here would just repeat the\r\n                        connection's label above them.\r\n                      -->\r\n                      @if (!isConnectionField(field) || isManageProperties()) {\r\n                        <div\r\n                          class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\r\n                        >\r\n                          @if (!isConnectionField(field)) {\r\n                            <div class=\"min-w-0 break-words font-semibold\">\r\n                              {{ field.name }}\r\n                            </div>\r\n                          }\r\n                          @if (isManageProperties()) {\r\n                            <div\r\n                              class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\r\n                            >\r\n                              @if (field.isRead === false) {\r\n                                <span\r\n                                  class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\r\n                                >\r\n                                  {{ t(\"hidden\") }}\r\n                                </span>\r\n                              } @else if (field.isWrite === false) {\r\n                                <span\r\n                                  class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\r\n                                >\r\n                                  {{ t(\"read-only\") }}\r\n                                </span>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        </div>\r\n                      }\r\n\r\n                      <div\r\n                        class=\"transition-all duration-200\"\r\n                        [class.opacity-40]=\"\r\n                          isManageProperties() && field.isRead === false\r\n                        \"\r\n                        [class.blur-[1px]]=\"\r\n                          isManageProperties() && field.isRead === false\r\n                        \"\r\n                      >\r\n                        @if (isTranslatableTextField(field)) {\r\n                          <div class=\"grid grid-cols-12 gap-3\">\r\n                            @for (\r\n                              control of getTranslatableFieldControls(field);\r\n                              track control.key\r\n                            ) {\r\n                              <div\r\n                                [class]=\"\r\n                                  getTranslatableFieldControlColSpan(field)\r\n                                \"\r\n                              >\r\n                                <mt-dynamic-field\r\n                                  [fieldName]=\"control.key\"\r\n                                  [fieldConfig]=\"control.config\"\r\n                                />\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <mt-dynamic-field\r\n                            [fieldName]=\"field.name\"\r\n                            [fieldConfig]=\"getFieldConfig(field)\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    </form>\r\n                  </div>\r\n                  <div\r\n                    class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\r\n                  >\r\n                    <mt-button\r\n                      size=\"small\"\r\n                      icon=\"general.settings-01\"\r\n                      [tooltip]=\"t('edit-field')\"\r\n                      [variant]=\"'outlined'\"\r\n                      [disabled]=\"field._deleting\"\r\n                      (onClick)=\"editField(field)\"\r\n                    ></mt-button>\r\n                    @if (!isManageProperties()) {\r\n                      <mt-button\r\n                        size=\"small\"\r\n                        icon=\"general.trash-01\"\r\n                        severity=\"danger\"\r\n                        [variant]=\"'outlined'\"\r\n                        [tooltip]=\"t('remove-field')\"\r\n                        [disabled]=\"field._deleting\"\r\n                        (onClick)=\"removeField($event, field)\"\r\n                      ></mt-button>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <mt-card class=\"absolute inset-0 top-4\" paddingless>\r\n            <div class=\"size-full p-4\">\r\n              <div\r\n                class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\r\n              >\r\n                <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\r\n                <span>{{ t(\"drag-from-the-side\") }}</span>\r\n              </div>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], sectionsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsCount", required: false }] }], allSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSections", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], connectedDropLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedDropLists", required: false }] }], onFieldDrop: [{ type: i0.Output, args: ["onFieldDrop"] }] } });
 
 class FBPreviewForm {
@@ -2055,7 +2059,7 @@ class FBPreviewForm {
         this.ref.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div\r\n    [class]=\"[\r\n      modalService.contentClass,\r\n      'min-w-0',\r\n      'p-4',\r\n      'overflow-y-hidden!',\r\n      'max-[640px]:p-3',\r\n    ]\"\r\n  >\r\n    <div class=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\r\n      @if (moduleKey() && operationKey()) {\r\n        <mt-client-form\r\n          [moduleKey]=\"moduleKey()\"\r\n          [operationKey]=\"operationKey()\"\r\n          [moduleId]=\"previewModuleId()\"\r\n          [levelId]=\"previewLevelId()\"\r\n          [levelDataId]=\"previewInfo()?.levelDataId\"\r\n          [moduleDataId]=\"previewInfo()?.moduleDataId\"\r\n          [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\r\n          [autoLoad]=\"true\"\r\n          [renderMode]=\"renderMode()\"\r\n          [forceOriginalForm]=\"true\"\r\n        />\r\n      } @else {\r\n        <div\r\n          class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\r\n        >\r\n          {{ t(\"no-fields-visible\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div\r\n    [class]=\"[\r\n      modalService.contentClass,\r\n      'min-w-0',\r\n      'p-4',\r\n      'overflow-y-hidden!',\r\n      'max-[640px]:p-3',\r\n    ]\"\r\n  >\r\n    <div class=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\r\n      @if (moduleKey() && operationKey()) {\r\n        <mt-client-form\r\n          [moduleKey]=\"moduleKey()\"\r\n          [operationKey]=\"operationKey()\"\r\n          [moduleId]=\"previewModuleId()\"\r\n          [levelId]=\"previewLevelId()\"\r\n          [levelDataId]=\"previewInfo()?.levelDataId\"\r\n          [moduleDataId]=\"previewInfo()?.moduleDataId\"\r\n          [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\r\n          [autoLoad]=\"true\"\r\n          [renderMode]=\"renderMode()\"\r\n          [forceOriginalForm]=\"true\"\r\n        />\r\n      } @else {\r\n        <div\r\n          class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\r\n        >\r\n          {{ t(\"no-fields-visible\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "silentMessages", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, decorators: [{
             type: Component,
@@ -2442,7 +2446,7 @@ class FBValidationRules {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBValidationRules, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FBValidationRules, isStandalone: true, selector: "mt-fb-validation-rules", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div\r\n    [class]=\"[\r\n      modalService.contentClass,\r\n      'min-w-0',\r\n      'p-4',\r\n      'overflow-y-auto',\r\n      'max-[640px]:p-3',\r\n    ]\"\r\n  >\r\n    <div class=\"flex justify-end pb-4 max-[640px]:justify-stretch\">\r\n      <mt-button\r\n        [label]=\"t('add-validation-rule')\"\r\n        severity=\"primary\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"openCreate()\"\r\n      ></mt-button>\r\n    </div>\r\n    <mt-table\r\n      noCard\r\n      [data]=\"tableRows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      storageKey=\"fb-validation-rules-table\"\r\n      (cellChange)=\"onCellChange($event)\"\r\n    ></mt-table>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FBValidationRules, isStandalone: true, selector: "mt-fb-validation-rules", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div\r\n    [class]=\"[\r\n      modalService.contentClass,\r\n      'min-w-0',\r\n      'p-4',\r\n      'overflow-y-auto',\r\n      'max-[640px]:p-3',\r\n    ]\"\r\n  >\r\n    <div class=\"flex justify-end pb-4 max-[640px]:justify-stretch\">\r\n      <mt-button\r\n        [label]=\"t('add-validation-rule')\"\r\n        severity=\"primary\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"openCreate()\"\r\n      ></mt-button>\r\n    </div>\r\n    <mt-table\r\n      noCard\r\n      [data]=\"tableRows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      storageKey=\"fb-validation-rules-table\"\r\n      (cellChange)=\"onCellChange($event)\"\r\n    ></mt-table>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBValidationRules, decorators: [{
             type: Component,