@sd-angular/core 19.0.9 → 19.0.11

package/fesm2022/sd-angular-core-components-form-generic.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Optional, Injectable, Pipe, SecurityContext, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList, inject, input, ChangeDetectorRef, effect, untracked, viewChild, signal, computed } from '@angular/core';
+import { InjectionToken, inject, Injectable, Pipe, SecurityContext, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList, ChangeDetectorRef, input, effect, untracked, viewChild, signal, computed } from '@angular/core';
 import { Utilities, StringUtilities as StringUtilities$1 } from '@sdcorejs/utils/fns';
 import { DateUtilities } from '@sd-angular/core/utilities';
 import * as i3 from '@angular/cdk/drag-drop';
@@ -593,12 +593,9 @@ const ConvertToJavascriptExpression = (condition) => {
 };
 
 class FormGenericService {
-    configuration;
     #selections;
     #definitionHtmls;
-    constructor(configuration) {
-        this.configuration = configuration;
-    }
+    configuration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
     get selections() {
         return this.configuration?.form?.selections || [];
     }
@@ -744,7 +741,7 @@ class FormGenericService {
             return '';
         },
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, decorators: [{
@@ -752,12 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }, {
-                    type: Optional
-                }] }] });
+        }] });
 
 class SdFormRenderService {
     componentViewedPipe;
@@ -2297,7 +2289,6 @@ class TableComponent {
     #initTable = async () => {
         // Xử lý columns
         const columns = [];
-        //console.log( this.component?.columns)
         for (const column of this.component?.columns || []) {
             // Ghi nhận lại vào object formRenderColumn để có thể xử lý customType hoặc một vài thuộc tính khác khi render UI
             this.formRenderColumn[column.key] = column;
@@ -2450,7 +2441,6 @@ class TableComponent {
                     },
                 });
             }
-            //console.log( this.imageKeys ,this.fileKeys )
         }
         // await this.#onLoaded();
         this.tableOption = {
@@ -2938,8 +2928,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdFormRender {
-    ref;
-    formGenericConfiguration;
     formRenderItems = new QueryList();
     form = new FormGroup({});
     configuration;
@@ -2972,22 +2960,22 @@ class SdFormRender {
     #configurationChanges = new Subject();
     #defaultEntityChanges = new Subject();
     #entityChanges = new Subject();
+    #renderScheduled = false;
+    #destroyed = false;
     loadCompleted = false;
     hashedValues;
     formValue = {};
     // Các component item của form-render sẽ lắng nghe thay đổi
     setVariables = new Subject();
-    constructor(ref, formGenericConfiguration) {
-        this.ref = ref;
-        this.formGenericConfiguration = formGenericConfiguration;
-    }
+    ref = inject(ChangeDetectorRef);
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
     ngAfterViewInit() {
         this.#subscription.add(combineLatest([this.#configurationChanges, this.#entityChanges])
             .pipe(startWith$1([]))
             .subscribe(async () => {
             if (this.entity && this.configuration?.components?.length) {
                 this.loadCompleted = true;
-                this.ref.markForCheck(); // Vì loadCompleted ko phải là @Input nên component sẽ ko load lại
+                this.#scheduleRender();
                 if (this.configuration?.onLoaded) {
                     try {
                         this.configuration.onLoaded();
@@ -3018,11 +3006,12 @@ class SdFormRender {
                 this.hashedValues = hashedValues;
                 // Ở trạng thái view thì không có FormControl nên phải binding entity mới có dữ liệu cho formValue
                 this.formValue = { ...this.entity, ...values };
-                this.ref.markForCheck();
+                this.#scheduleRender();
             }
         }));
     }
     ngOnDestroy() {
+        this.#destroyed = true;
         this.#subscription.unsubscribe();
     }
     // Hàm này sẽ đi qua các components và các columns trong table để xử lý upload file
@@ -3062,18 +3051,25 @@ class SdFormRender {
         }
         return messages;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormRender, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    #scheduleRender() {
+        if (this.#renderScheduled || this.#destroyed) {
+            return;
+        }
+        this.#renderScheduled = true;
+        queueMicrotask(() => {
+            this.#renderScheduled = false;
+            if (!this.#destroyed) {
+                this.ref.detectChanges();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormRender, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdFormRender, isStandalone: true, selector: "sd-form-render", inputs: { form: "form", _configuration: ["configuration", "_configuration"], _default: ["defaultEntity", "_default"], _entity: ["entity", "_entity"], _properties: ["properties", "_properties"], _viewed: ["viewed", "_viewed"] }, viewQueries: [{ propertyName: "formRenderItems", predicate: LibItemComponent, descendants: true }], ngImport: i0, template: "@if (form && loadCompleted && hashedValues) {\r\n  <div class=\"row mx-0\">\r\n    @for (component of configuration.components; track component.id) {\r\n      @let expression = hashedValues | whenExpression: component : formValue;\r\n      @if (!expression.hidden) {\r\n        @if (component.type === 'group') {\r\n          @if (!!component.components.length) {\r\n            <div class=\"col-12 mt-16\">\r\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\r\n                <div class=\"row mx-0\">\r\n                  @for (childComponent of component.components; track childComponent.id) {\r\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\r\n                    @if (!childExpression.hidden) {\r\n                      <lib-item\r\n                        [setVariables]=\"setVariables\"\r\n                        [form]=\"form\"\r\n                        [entity]=\"entity\"\r\n                        [component]=\"childComponent\"\r\n                        [required]=\"childExpression.required\"\r\n                        [disabled]=\"childExpression.disabled\"\r\n                        [viewed]=\"viewed\"></lib-item>\r\n                    }\r\n                  }\r\n                </div>\r\n              </sd-section>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <lib-item\r\n            [setVariables]=\"setVariables\"\r\n            [form]=\"form\"\r\n            [entity]=\"entity\"\r\n            [component]=\"component\"\r\n            [required]=\"expression.required\"\r\n            [disabled]=\"expression.disabled\"\r\n            [viewed]=\"viewed\"></lib-item>\r\n        }\r\n      }\r\n    }\r\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsible", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: LibItemComponent, selector: "lib-item", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "pipe", type: WhenExpressionPipe, name: "whenExpression" }, { kind: "component", type: VariableComponent, selector: "variable", inputs: ["variables", "setVariables", "form", "entity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormRender, decorators: [{
             type: Component,
             args: [{ selector: 'sd-form-render', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, LibItemComponent, WhenExpressionPipe, VariableComponent], template: "@if (form && loadCompleted && hashedValues) {\r\n  <div class=\"row mx-0\">\r\n    @for (component of configuration.components; track component.id) {\r\n      @let expression = hashedValues | whenExpression: component : formValue;\r\n      @if (!expression.hidden) {\r\n        @if (component.type === 'group') {\r\n          @if (!!component.components.length) {\r\n            <div class=\"col-12 mt-16\">\r\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\r\n                <div class=\"row mx-0\">\r\n                  @for (childComponent of component.components; track childComponent.id) {\r\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\r\n                    @if (!childExpression.hidden) {\r\n                      <lib-item\r\n                        [setVariables]=\"setVariables\"\r\n                        [form]=\"form\"\r\n                        [entity]=\"entity\"\r\n                        [component]=\"childComponent\"\r\n                        [required]=\"childExpression.required\"\r\n                        [disabled]=\"childExpression.disabled\"\r\n                        [viewed]=\"viewed\"></lib-item>\r\n                    }\r\n                  }\r\n                </div>\r\n              </sd-section>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <lib-item\r\n            [setVariables]=\"setVariables\"\r\n            [form]=\"form\"\r\n            [entity]=\"entity\"\r\n            [component]=\"component\"\r\n            [required]=\"expression.required\"\r\n            [disabled]=\"expression.disabled\"\r\n            [viewed]=\"viewed\"></lib-item>\r\n        }\r\n      }\r\n    }\r\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { formRenderItems: [{
+        }], propDecorators: { formRenderItems: [{
                 type: ViewChildren,
                 args: [LibItemComponent]
             }], form: [{
@@ -3512,7 +3508,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 // Template là các mẫu do Portal định nghĩa sẵn (key, label ....) để người dùng chọn nhanh
 // Khi thực hiện sao chép 1 template chúng ta sẽ CLONE để tránh ảnh hưởng template gốc
 class AttributeTemplate {
-    formGenericConfiguration;
     templates = [];
     component;
     set _component(component) {
@@ -3520,9 +3515,7 @@ class AttributeTemplate {
         this.templates = this.formGenericConfiguration?.form?.templates?.filter(e => e.component?.type === this.component?.type) || [];
     }
     sdChange = new EventEmitter();
-    constructor(formGenericConfiguration) {
-        this.formGenericConfiguration = formGenericConfiguration;
-    }
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
     onChange = (value) => {
         if (typeof value === 'string') {
             const template = this.templates?.find(e => e.value === value);
@@ -3531,18 +3524,13 @@ class AttributeTemplate {
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeTemplate, isStandalone: true, selector: "attribute-template", inputs: { _component: ["component", "_component"] }, outputs: { sdChange: "sdChange" }, ngImport: i0, template: "@if (templates.length) {\r\n  <!-- <div class=\"d-flex align-items-center py-4\">\r\n    <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u m\u1EABu</div>\r\n    <sd-autocomplete\r\n      style=\"width: 200px\"\r\n      size=\"sm\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n  </div> -->\r\n  <sd-autocomplete\r\n      class=\"py-8\"\r\n      size=\"sm\"\r\n      [label]=\"'core.component.form-builder.template-data' | translate\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n}\r\n", dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'attribute-template', imports: [SdAutocomplete$1, TranslatePipe], template: "@if (templates.length) {\r\n  <!-- <div class=\"d-flex align-items-center py-4\">\r\n    <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u m\u1EABu</div>\r\n    <sd-autocomplete\r\n      style=\"width: 200px\"\r\n      size=\"sm\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n  </div> -->\r\n  <sd-autocomplete\r\n      class=\"py-8\"\r\n      size=\"sm\"\r\n      [label]=\"'core.component.form-builder.template-data' | translate\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n}\r\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { _component: [{
+        }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
             }], sdChange: [{
@@ -5352,7 +5340,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 // Template là các mẫu do Portal định nghĩa sẵn (key, label ....) để người dùng chọn nhanh
 // Khi thực hiện sao chép 1 template chúng ta sẽ CLONE để tránh ảnh hưởng template gốc
 class AttributeTable {
-    formGenericConfiguration;
     modal;
     form = new FormGroup({});
     components;
@@ -5365,7 +5352,8 @@ class AttributeTable {
         }
     }
     columnsKeyChange = new EventEmitter();
-    tables = [];
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
+    tables = this.formGenericConfiguration?.form?.tables || [];
     // Columns
     types = TableColumnTypes;
     columns = [];
@@ -5376,10 +5364,6 @@ class AttributeTable {
     }
     columnsChange = new EventEmitter();
     column;
-    constructor(formGenericConfiguration) {
-        this.formGenericConfiguration = formGenericConfiguration;
-        this.tables = this.formGenericConfiguration?.form?.tables || [];
-    }
     onChangeColumnsKey = (value) => {
         this.columnsKeyChange.emit(value);
         const table = this.tables.find(e => e.value === value);
@@ -5445,7 +5429,7 @@ class AttributeTable {
         }
         this.modal?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTable, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeTable, isStandalone: true, selector: "attribute-table", inputs: { components: "components", variables: "variables", _columnsKey: ["columnsKey", "_columnsKey"], _columns: ["columns", "_columns"] }, outputs: { columnsKeyChange: "columnsKeyChange", columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<details class=\"fb-section\" open>\r\n  <summary class=\"fb-section__head\">\r\n    <span class=\"msi\">view_column</span>\r\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.column-list' | translate }}</span>\r\n    <span class=\"msi chev\">chevron_right</span>\r\n  </summary>\r\n  <div class=\"fb-section__body\">\r\n    @if (tables.length) {\r\n      <sd-autocomplete\r\n          class=\"py-8\"\r\n          [label]=\"'core.component.form-builder.column-data' | translate\"\r\n          [(model)]=\"columnsKey\"\r\n          [items]=\"tables\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          (sdChange)=\"onChangeColumnsKey($event)\"\r\n          hideInlineError></sd-autocomplete>\r\n    }\r\n    @if (!columnsKey) {\r\n      <div class=\"fb-columns-list\">\r\n        @for (item of columns; track item.key; let idx = $index) {\r\n          <div class=\"fb-column-row\" [class.is-active]=\"idx === selectedIdx\">\r\n            <span class=\"fb-column-row__type-icon\"><span class=\"msi\">{{ columnTypeSymbol(item.type) }}</span></span>\r\n            <div class=\"fb-column-row__meta\">\r\n              <div class=\"fb-column-row__label\">\r\n                {{ item.label }}\r\n                @if (item.validate?.required) {\r\n                  <span class=\"fb-column-row__req\">*</span>\r\n                }\r\n              </div>\r\n              <div class=\"fb-column-row__sub mono\">{{ item.key }} \u00B7 {{ item.type }}</div>\r\n            </div>\r\n            <button type=\"button\" class=\"fb-icon-btn\" [attr.aria-label]=\"'core.component.form-builder.column-config' | translate\" (click)=\"editColumn(idx)\">\r\n              <span class=\"msi\">edit</span>\r\n            </button>\r\n            <button type=\"button\" class=\"fb-icon-btn danger\" [attr.aria-label]=\"'core.component.form-builder.delete' | translate\" (click)=\"removeColumn(idx)\">\r\n              <span class=\"msi\">delete</span>\r\n            </button>\r\n          </div>\r\n        }\r\n        <a class=\"fb-add-link\" (click)=\"addColumn()\">\r\n          <span class=\"msi\">add</span>\r\n          {{ 'core.component.form-builder.add-column' | translate }}\r\n        </a>\r\n      </div>\r\n    }\r\n  </div>\r\n</details>\r\n\r\n<sd-modal [title]=\"'core.component.form-builder.column-config' | translate\" width=\"600px\">\r\n  @if (column) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">info</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"column.key\"></attribute-input>\r\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.column-name' | translate\" [(model)]=\"column.label\"></attribute-input>\r\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.width' | translate\" [(model)]=\"column.width\"></attribute-input>\r\n        <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"column.validate!.required\"></attribute-switch>\r\n        <attribute-select [form]=\"form\" [label]=\"'core.component.form-builder.data-type' | translate\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\r\n      </div>\r\n    </details>\r\n    @if (column.type === 'boolean') {\r\n      <details class=\"fb-section\" open>\r\n        <summary class=\"fb-section__head\">\r\n          <span class=\"msi\">visibility</span>\r\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\r\n          <span class=\"msi chev\">chevron_right</span>\r\n        </summary>\r\n        <div class=\"fb-section__body\">\r\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-true' | translate\" [(model)]=\"column.displayOnTrue\"></attribute-input>\r\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-false' | translate\" [(model)]=\"column.displayOnFalse\"></attribute-input>\r\n        </div>\r\n      </details>\r\n    } @else if (column.type === 'values') {\r\n      <attribute-selection\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [component]=\"column\"\r\n        [(valuesKey)]=\"column.valuesKey\"\r\n        [(values)]=\"column.values\"></attribute-selection>\r\n    } @else if (column.type === 'file' || column.type === 'image') {\r\n      <details class=\"fb-section\" open>\r\n        <summary class=\"fb-section__head\">\r\n          <span class=\"msi\">settings</span>\r\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.parameter' | translate }}</span>\r\n          <span class=\"msi chev\">chevron_right</span>\r\n        </summary>\r\n        <div class=\"fb-section__body\">\r\n          <attribute-parameter [label]=\"'core.component.form-builder.assign-parameter' | translate\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\r\n        </div>\r\n      </details>\r\n    }\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTable, decorators: [{
@@ -5463,12 +5447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         AttributeSwitch,
                         AttributeParameter, TranslatePipe
                     ], template: "<details class=\"fb-section\" open>\r\n  <summary class=\"fb-section__head\">\r\n    <span class=\"msi\">view_column</span>\r\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.column-list' | translate }}</span>\r\n    <span class=\"msi chev\">chevron_right</span>\r\n  </summary>\r\n  <div class=\"fb-section__body\">\r\n    @if (tables.length) {\r\n      <sd-autocomplete\r\n          class=\"py-8\"\r\n          [label]=\"'core.component.form-builder.column-data' | translate\"\r\n          [(model)]=\"columnsKey\"\r\n          [items]=\"tables\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          (sdChange)=\"onChangeColumnsKey($event)\"\r\n          hideInlineError></sd-autocomplete>\r\n    }\r\n    @if (!columnsKey) {\r\n      <div class=\"fb-columns-list\">\r\n        @for (item of columns; track item.key; let idx = $index) {\r\n          <div class=\"fb-column-row\" [class.is-active]=\"idx === selectedIdx\">\r\n            <span class=\"fb-column-row__type-icon\"><span class=\"msi\">{{ columnTypeSymbol(item.type) }}</span></span>\r\n            <div class=\"fb-column-row__meta\">\r\n              <div class=\"fb-column-row__label\">\r\n                {{ item.label }}\r\n                @if (item.validate?.required) {\r\n                  <span class=\"fb-column-row__req\">*</span>\r\n                }\r\n              </div>\r\n              <div class=\"fb-column-row__sub mono\">{{ item.key }} \u00B7 {{ item.type }}</div>\r\n            </div>\r\n            <button type=\"button\" class=\"fb-icon-btn\" [attr.aria-label]=\"'core.component.form-builder.column-config' | translate\" (click)=\"editColumn(idx)\">\r\n              <span class=\"msi\">edit</span>\r\n            </button>\r\n            <button type=\"button\" class=\"fb-icon-btn danger\" [attr.aria-label]=\"'core.component.form-builder.delete' | translate\" (click)=\"removeColumn(idx)\">\r\n              <span class=\"msi\">delete</span>\r\n            </button>\r\n          </div>\r\n        }\r\n        <a class=\"fb-add-link\" (click)=\"addColumn()\">\r\n          <span class=\"msi\">add</span>\r\n          {{ 'core.component.form-builder.add-column' | translate }}\r\n        </a>\r\n      </div>\r\n    }\r\n  </div>\r\n</details>\r\n\r\n<sd-modal [title]=\"'core.component.form-builder.column-config' | translate\" width=\"600px\">\r\n  @if (column) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">info</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"column.key\"></attribute-input>\r\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.column-name' | translate\" [(model)]=\"column.label\"></attribute-input>\r\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.width' | translate\" [(model)]=\"column.width\"></attribute-input>\r\n        <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"column.validate!.required\"></attribute-switch>\r\n        <attribute-select [form]=\"form\" [label]=\"'core.component.form-builder.data-type' | translate\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\r\n      </div>\r\n    </details>\r\n    @if (column.type === 'boolean') {\r\n      <details class=\"fb-section\" open>\r\n        <summary class=\"fb-section__head\">\r\n          <span class=\"msi\">visibility</span>\r\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\r\n          <span class=\"msi chev\">chevron_right</span>\r\n        </summary>\r\n        <div class=\"fb-section__body\">\r\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-true' | translate\" [(model)]=\"column.displayOnTrue\"></attribute-input>\r\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-false' | translate\" [(model)]=\"column.displayOnFalse\"></attribute-input>\r\n        </div>\r\n      </details>\r\n    } @else if (column.type === 'values') {\r\n      <attribute-selection\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [component]=\"column\"\r\n        [(valuesKey)]=\"column.valuesKey\"\r\n        [(values)]=\"column.values\"></attribute-selection>\r\n    } @else if (column.type === 'file' || column.type === 'image') {\r\n      <details class=\"fb-section\" open>\r\n        <summary class=\"fb-section__head\">\r\n          <span class=\"msi\">settings</span>\r\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.parameter' | translate }}</span>\r\n          <span class=\"msi chev\">chevron_right</span>\r\n        </summary>\r\n        <div class=\"fb-section__body\">\r\n          <attribute-parameter [label]=\"'core.component.form-builder.assign-parameter' | translate\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\r\n        </div>\r\n      </details>\r\n    }\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { modal: [{
+        }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
             }], components: [{
@@ -5622,11 +5601,11 @@ class TableControl {
         return rowIndex === 1 ? 'Sample value' : '—';
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableControl, isStandalone: true, selector: "table-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\n  <div class=\"fb-table-control__label\">\n    {{ component.label }}\n    @if (component.validate?.required) {\n      <span>*</span>\n    }\n  </div>\n\n  @if (component.columns?.length) {\n    <div class=\"fb-table-control__frame\">\n      <div class=\"fb-table-control__header\">\n        @for (column of component.columns; track column.key) {\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\n            <span>{{ column.label }}</span>\n            @if (column.validate?.required) {\n              <span class=\"fb-table-control__required\">*</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"fb-table-control__body\">\n        @for (row of sampleRows(); track row) {\n          <div class=\"fb-table-control__row\">\n            @for (column of component.columns; track column.key) {\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n                {{ cellPreview(column, row) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <button type=\"button\" class=\"fb-table-control__add\">\n      <span>+</span>\n      Add row\n    </button>\n  }\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-size:16px;line-height:1;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"GRAD\" 0,\"opsz\" 20}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableControl, isStandalone: true, selector: "table-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\r\n  <div class=\"fb-table-control__label\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span>*</span>\r\n    }\r\n  </div>\r\n\r\n  @if (component.columns?.length) {\r\n    <div class=\"fb-table-control__frame\">\r\n      <div class=\"fb-table-control__header\">\r\n        @for (column of component.columns; track column.key) {\r\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\r\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\r\n            <span>{{ column.label }}</span>\r\n            @if (column.validate?.required) {\r\n              <span class=\"fb-table-control__required\">*</span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-table-control__body\">\r\n        @for (row of sampleRows(); track row) {\r\n          <div class=\"fb-table-control__row\">\r\n            @for (column of component.columns; track column.key) {\r\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\r\n                {{ cellPreview(column, row) }}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"fb-table-control__add\">\r\n      <span>+</span>\r\n      Add row\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-size:16px;line-height:1;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"GRAD\" 0,\"opsz\" 20}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableControl, decorators: [{
             type: Component,
-            args: [{ selector: 'table-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\n  <div class=\"fb-table-control__label\">\n    {{ component.label }}\n    @if (component.validate?.required) {\n      <span>*</span>\n    }\n  </div>\n\n  @if (component.columns?.length) {\n    <div class=\"fb-table-control__frame\">\n      <div class=\"fb-table-control__header\">\n        @for (column of component.columns; track column.key) {\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\n            <span>{{ column.label }}</span>\n            @if (column.validate?.required) {\n              <span class=\"fb-table-control__required\">*</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"fb-table-control__body\">\n        @for (row of sampleRows(); track row) {\n          <div class=\"fb-table-control__row\">\n            @for (column of component.columns; track column.key) {\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n                {{ cellPreview(column, row) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <button type=\"button\" class=\"fb-table-control__add\">\n      <span>+</span>\n      Add row\n    </button>\n  }\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-size:16px;line-height:1;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"GRAD\" 0,\"opsz\" 20}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"] }]
+            args: [{ selector: 'table-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\r\n  <div class=\"fb-table-control__label\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span>*</span>\r\n    }\r\n  </div>\r\n\r\n  @if (component.columns?.length) {\r\n    <div class=\"fb-table-control__frame\">\r\n      <div class=\"fb-table-control__header\">\r\n        @for (column of component.columns; track column.key) {\r\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\r\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\r\n            <span>{{ column.label }}</span>\r\n            @if (column.validate?.required) {\r\n              <span class=\"fb-table-control__required\">*</span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-table-control__body\">\r\n        @for (row of sampleRows(); track row) {\r\n          <div class=\"fb-table-control__row\">\r\n            @for (column of component.columns; track column.key) {\r\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\r\n                {{ cellPreview(column, row) }}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"fb-table-control__add\">\r\n      <span>+</span>\r\n      Add row\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-size:16px;line-height:1;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"GRAD\" 0,\"opsz\" 20}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -5696,8 +5675,6 @@ const ValidationAlerts = [
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class ConfigureValidationComponent {
-    ref;
-    formGenericConfiguration;
     modal;
     form = new FormGroup({});
     attributes = [];
@@ -5705,9 +5682,9 @@ class ConfigureValidationComponent {
     functions = [];
     alerts = ValidationAlerts;
     accept = new EventEmitter();
-    constructor(ref, formGenericConfiguration) {
-        this.ref = ref;
-        this.formGenericConfiguration = formGenericConfiguration;
+    ref = inject(ChangeDetectorRef);
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
+    constructor() {
         this.functions = this.formGenericConfiguration?.form?.validation?.functions || [];
     }
     ngAfterViewInit() {
@@ -5765,18 +5742,13 @@ class ConfigureValidationComponent {
         this.accept.emit(this.validations);
         this.modal?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigureValidationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigureValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigureValidationComponent, isStandalone: true, selector: "configure-validation", outputs: { accept: "accept" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal [title]=\"'core.component.form-builder.config-validation-error-warning' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (validation of validations; track $index; let idx = $index) {\r\n    <div class=\"mat-elevation-z2 position-relative p-8 mb-16\" style=\"border-radius: 8px;\">\r\n      <div class=\"row mx-0\">\r\n        <sd-select\r\n          class=\"col-3\"\r\n          [label]=\"'core.component.form-builder.message-type' | translate\"\r\n          [(model)]=\"validation.alert\"\r\n          [items]=\"alerts\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          required></sd-select>\r\n        @if (validation.type === 'expression') {\r\n          <sd-input class=\"col-9\" [form]=\"form\" [label]=\"'core.component.form-builder.message-display' | translate\" [(model)]=\"validation.message\" required></sd-input>\r\n          <expression-builder class=\"col-12\" [label]=\"'core.component.form-builder.condition-expression' | translate\" [(model)]=\"validation.expression\" [attributes]=\"attributes\"></expression-builder>\r\n        } @else if (validation.type === 'function') {\r\n          <sd-select\r\n            class=\"col-9\"\r\n            [form]=\"form\"\r\n            [(model)]=\"validation.code\"\r\n            [items]=\"functions\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required></sd-select>\r\n        }\r\n        <mat-icon class=\"c-close-icon\" (click)=\"removaValidation(idx)\">delete</mat-icon>\r\n        <!-- <sd-button\r\n          \r\n          prefixIcon=\"delete\"\r\n          (click)=\"removaValidation(idx)\"\r\n          color=\"error\"\r\n          type=\"link\"></sd-button> -->\r\n      </div>\r\n    </div>\r\n  }\r\n  <sd-button [title]=\"'core.component.form-builder.add-validation' | translate\" [matMenuTriggerFor]=\"menu\" prefixIcon=\"add\" color=\"primary\" type=\"link\"></sd-button>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <button (click)=\"addValidation('expression')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"warning\"></mat-icon> -->\r\n      <span>{{ 'core.component.form-builder.expression' | translate }}</span>\r\n    </button>\r\n    <button (click)=\"addValidation('function')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"error\"></mat-icon> -->\r\n      <span>{{ 'core.component.form-builder.available-methods' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateValidations()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-close-icon{margin-left:auto;font-size:16px;width:16px;height:16px;cursor:pointer;border-radius:50%;color:var(--sd-error);top:4px;right:4px;position:absolute}.c-close-icon:hover{background-color:var(--sd-black200)}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: ExpressionBuilderComponent, selector: "expression-builder", inputs: ["label", "attributes", "model"], outputs: ["modelChange", "sdChange", "edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigureValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configure-validation', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, SdModal, SdButton, SdInput, SdSelect, ExpressionBuilderComponent, MatIconModule, TranslatePipe], template: "<sd-modal [title]=\"'core.component.form-builder.config-validation-error-warning' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (validation of validations; track $index; let idx = $index) {\r\n    <div class=\"mat-elevation-z2 position-relative p-8 mb-16\" style=\"border-radius: 8px;\">\r\n      <div class=\"row mx-0\">\r\n        <sd-select\r\n          class=\"col-3\"\r\n          [label]=\"'core.component.form-builder.message-type' | translate\"\r\n          [(model)]=\"validation.alert\"\r\n          [items]=\"alerts\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          required></sd-select>\r\n        @if (validation.type === 'expression') {\r\n          <sd-input class=\"col-9\" [form]=\"form\" [label]=\"'core.component.form-builder.message-display' | translate\" [(model)]=\"validation.message\" required></sd-input>\r\n          <expression-builder class=\"col-12\" [label]=\"'core.component.form-builder.condition-expression' | translate\" [(model)]=\"validation.expression\" [attributes]=\"attributes\"></expression-builder>\r\n        } @else if (validation.type === 'function') {\r\n          <sd-select\r\n            class=\"col-9\"\r\n            [form]=\"form\"\r\n            [(model)]=\"validation.code\"\r\n            [items]=\"functions\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required></sd-select>\r\n        }\r\n        <mat-icon class=\"c-close-icon\" (click)=\"removaValidation(idx)\">delete</mat-icon>\r\n        <!-- <sd-button\r\n          \r\n          prefixIcon=\"delete\"\r\n          (click)=\"removaValidation(idx)\"\r\n          color=\"error\"\r\n          type=\"link\"></sd-button> -->\r\n      </div>\r\n    </div>\r\n  }\r\n  <sd-button [title]=\"'core.component.form-builder.add-validation' | translate\" [matMenuTriggerFor]=\"menu\" prefixIcon=\"add\" color=\"primary\" type=\"link\"></sd-button>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <button (click)=\"addValidation('expression')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"warning\"></mat-icon> -->\r\n      <span>{{ 'core.component.form-builder.expression' | translate }}</span>\r\n    </button>\r\n    <button (click)=\"addValidation('function')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"error\"></mat-icon> -->\r\n      <span>{{ 'core.component.form-builder.available-methods' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateValidations()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-close-icon{margin-left:auto;font-size:16px;width:16px;height:16px;cursor:pointer;border-radius:50%;color:var(--sd-error);top:4px;right:4px;position:absolute}.c-close-icon:hover{background-color:var(--sd-black200)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { modal: [{
+        }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
             }], accept: [{
@@ -6143,7 +6115,6 @@ class SdFormBuilder {
     };
     // Mouseover thì phải có Focus không thì thẻ sẽ báo lỗi
     onFocus = (event) => {
-        //console.log(event);
     };
     xuLyKeoCheo = (dragItem) => {
         if (dragItem) {