@sd-angular/core 19.0.0-beta.93 → 19.0.0-beta.95

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

@@ -1,27 +1,27 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Optional, Injectable, Pipe, SecurityContext, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList } 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 { SdUtilities, DateUtilities as DateUtilities$1, StringUtilities, ArrayUtilities, NumberUtilities } from '@sd-angular/core/utilities/extensions';
 import { DateUtilities, SdUtilities as SdUtilities$1, StringUtilities as StringUtilities$1 } from '@sd-angular/core/utilities';
-import * as i5 from '@angular/cdk/drag-drop';
+import * as i3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormControl } from '@angular/forms';
-import * as i1$4 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdButton } from '@sd-angular/core/components/button';
 import { SdModal } from '@sd-angular/core/components/modal';
 import { SdInput as SdInput$1 } from '@sd-angular/core/forms/input';
 import { SdTextarea } from '@sd-angular/core/forms/textarea';
-import * as i1 from '@sd-angular/core/pipes';
-import { SdSafeHtmlPipe } from '@sd-angular/core/pipes';
+import { SdNotifyService, SdConfirmService } from '@sd-angular/core/services';
 import { Subscription, Subject, filter, debounceTime, startWith, combineLatest } from 'rxjs';
 import { SdSection } from '@sd-angular/core/components/section';
 import { startWith as startWith$1, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import { SD_EMPTY_STR } from '@sd-angular/core/utilities/models';
+import * as i1 from '@sd-angular/core/pipes';
 import * as i1$1 from '@angular/platform-browser';
 import { SdInput, SdChip, SdChipCalendar, SdSelect, SdAutocomplete, SdRadio, SdInputNumber as SdInputNumber$1 } from '@sd-angular/core/forms';
 import { SdInputNumber } from '@sd-angular/core/forms/input-number';
@@ -31,14 +31,14 @@ import * as i1$3 from '@angular/router';
 import { SdUploadFile } from '@sd-angular/core/components/upload-file';
 import { SdSideDrawer } from '@sd-angular/core/components/side-drawer';
 import { SdTable, SdTabelCellDefDirective } from '@sd-angular/core/components/table';
+import { TranslatePipe, I18nService } from '@sd-angular/core/i18n';
 import { SdAutocomplete as SdAutocomplete$1 } from '@sd-angular/core/forms/autocomplete';
 import { SdSelect as SdSelect$1 } from '@sd-angular/core/forms/select';
 import { SdSuffixDefDirective } from '@sd-angular/core/forms/directives';
 import { MatDividerModule } from '@angular/material/divider';
 import { SdLabel } from '@sd-angular/core/forms/label';
-import * as i1$5 from '@angular/material/menu';
+import * as i1$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$6 from '@sd-angular/core/services';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const SD_FORM_GENERIC_CONFIGURATION = new InjectionToken('sd.form-generic.configuration');
@@ -155,67 +155,27 @@ const TableColumnTypes = [
     },
 ];
 const FormBuilderComponents = [
-    {
-        type: 'textfield',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"></path></svg>',
-        name: 'Text field',
-    },
-    {
-        type: 'textarea',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1m-1.136 15.5.849.849-6.364 6.364-.849-.849zm.264 3.5.849.849-2.828 2.828-.849-.849zM13 19v10h-2V19z"></path></svg>',
-        name: 'Text area',
-    },
-    {
-        type: 'chip-string',
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-240q-33 0-56.5-23.5T80-320v-320q0-33 23.5-56.5T160-720h640q33 0 56.5 23.5T880-640v320q0 33-23.5 56.5T800-240H160Zm0-80h640v-320H160v320Zm130-40h60v-90h90v-60h-90v-90h-60v90h-90v60h90v90Zm-130 40v-320 320Z"/></svg>',
-        name: 'Chip string',
-    },
-    {
-        type: 'chip-calendar',
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-240q-33 0-56.5-23.5T80-320v-320q0-33 23.5-56.5T160-720h640q33 0 56.5 23.5T880-640v320q0 33-23.5 56.5T800-240H160Zm0-80h640v-320H160v320Zm130-40h60v-90h90v-60h-90v-90h-60v90h-90v60h90v90Zm-130 40v-320 320Z"/></svg>',
-        name: 'Chip calendar',
-    },
-    {
-        type: 'number',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1M35 28.444h7l-3.5 4zM35 26h7l-3.5-4z"></path></svg>',
-        name: 'Number',
-    },
-    {
-        type: 'datetime',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06"></path><path d="m35.13 37.603 1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984Z"></path><path fill-rule="evenodd" d="M23.08 36.962a9.678 9.678 0 1 0 17.883-7.408 9.678 9.678 0 0 0-17.882 7.408Zm4.54-10.292a7.924 7.924 0 1 1 8.805 13.177A7.924 7.924 0 0 1 27.62 26.67"></path></svg>',
-        name: 'Date',
-    },
-    {
-        type: 'select',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"></path></svg>',
-        name: 'Select',
-    },
-    {
-        type: 'radio',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10m0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16"></path></svg>',
-        name: 'Radio',
-    },
-    {
-        type: 'checkbox',
-        icon: '<svg class="svg" fill="currentcolor" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2m-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23z"></path></svg>',
-        name: 'Check box',
-    },
-    {
-        type: 'html',
-        icon: '<span style="font-size:32px" class="material-icons">code</span>',
-        name: 'HTML',
-    },
-    {
-        type: 'upload',
-        icon: '<svg class="svg" fill="currentcolor" class="fjs-palette-field-icon" viewBox="0 0 54 54"><path fill-rule="evenodd" d="M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754a.975.975 0 00.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z" clip-rule="evenodd"></path></svg>',
-        name: 'Upload',
-    },
-    {
-        type: 'table',
-        icon: '<span style="font-size:32px" class="material-icons">table_chart</span>',
-        name: 'Table',
-    },
+    // ── Basic ───────────────────────────────────────────────────
+    { type: 'textfield', symbol: 'text_fields', group: 'basic', name: 'Text field' },
+    { type: 'textarea', symbol: 'notes', group: 'basic', name: 'Text area' },
+    { type: 'number', symbol: '123', group: 'basic', name: 'Number' },
+    { type: 'datetime', symbol: 'calendar_month', group: 'basic', name: 'Date' },
+    // ── Choice ──────────────────────────────────────────────────
+    { type: 'select', symbol: 'arrow_drop_down_circle', group: 'choice', name: 'Select' },
+    { type: 'radio', symbol: 'radio_button_checked', group: 'choice', name: 'Radio' },
+    { type: 'checkbox', symbol: 'check_box', group: 'choice', name: 'Check box' },
+    // ── Advanced ────────────────────────────────────────────────
+    { type: 'chip-string', symbol: 'label', group: 'advanced', name: 'Chip string' },
+    { type: 'chip-calendar', symbol: 'event_note', group: 'advanced', name: 'Chip calendar' },
+    { type: 'upload', symbol: 'upload_file', group: 'advanced', name: 'Upload' },
+    { type: 'table', symbol: 'table_rows', group: 'advanced', name: 'Table' },
+    // ── Layout ──────────────────────────────────────────────────
+    // Break KHÔNG có trong palette — thêm qua per-row "+ Break" quick-add button.
+    { type: 'group', symbol: 'category', group: 'layout', name: 'Group' },
+    { type: 'html', symbol: 'code_blocks', group: 'layout', name: 'HTML' },
 ];
+/** Lookup: component type → Material Symbol + label, used by attribute panel header. */
+const COMPONENT_ICONS = FormBuilderComponents.reduce((acc, c) => ({ ...acc, [c.type]: { symbol: c.symbol, label: c.name } }), {});
 const GetComponentAttributes = (components) => {
     const attributes = [];
     if (components.length) {
@@ -970,7 +930,8 @@ class WhenExpressionPipe {
     };
     transform(hashed, component, entity) {
         // Group và html chỉ xử lý ẩn/hiện
-        if (component.type === 'group' || component.type === 'html') {
+        if (component.type === 'group' || component.type === 'html' || component.type === 'break') {
+            // Break/html/group: chỉ tính hidden (validate/disabled không áp dụng).
             return {
                 hidden: this.#hidden(component, entity),
                 disabled: false,
@@ -2227,7 +2188,7 @@ class UploadComponent {
         return await this.sdUploadFile?.upload();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UploadComponent, isStandalone: true, selector: "lib-upload", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, viewQueries: [{ propertyName: "sdUploadFile", first: true, predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [model]=\"entity[component.key!]\"\r\n      align=\"left\"\r\n      [args]=\"component.properties?.args\"\r\n      disabled\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  } @else {\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [max]=\"component.properties?.max\"\r\n      [maxSize]=\"component.properties?.maxSize\"\r\n      [extensions]=\"component.properties?.extensions\"\r\n      [args]=\"component.properties?.args\"\r\n      align=\"left\"\r\n      [required]=\"component.validate?.required || required\"\r\n      [disabled]=\"disabled\"\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["args", "label", "key", "description", "previewWidth", "previewHeight", "align", "upload", "details", "download", "imageValidator", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "form", "name", "required", "type", "helperText", "max", "maxOfImage", "extensions", "disabled", "model"], outputs: ["loaded", "filesChanged", "modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UploadComponent, isStandalone: true, selector: "lib-upload", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, viewQueries: [{ propertyName: "sdUploadFile", first: true, predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [model]=\"entity[component.key!]\"\r\n      align=\"left\"\r\n      [args]=\"component.properties?.args\"\r\n      disabled\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  } @else {\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [max]=\"component.properties?.max\"\r\n      [maxSize]=\"component.properties?.maxSize\"\r\n      [extensions]=\"component.properties?.extensions\"\r\n      [args]=\"component.properties?.args\"\r\n      align=\"left\"\r\n      [required]=\"component.validate?.required || required\"\r\n      [disabled]=\"disabled\"\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["autoId", "args", "label", "key", "description", "previewWidth", "previewHeight", "align", "upload", "details", "download", "imageValidator", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "form", "name", "required", "type", "helperText", "max", "maxOfImage", "extensions", "disabled", "model"], outputs: ["loaded", "filesChanged", "modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
@@ -2608,7 +2569,9 @@ class TableComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { setVariables: "setVariables", form: "form", _component: ["component", "_component"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: SdTable, descendants: true }, { propertyName: "sideDrawer", first: true, predicate: SdSideDrawer, descendants: true }, { propertyName: "uploadFiles", predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if(component && tableOption) {\r\n  <div style=\"width: 100%\">\r\n    <sd-table [option]=\"tableOption\">\r\n      @for(key of imageKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n            type=\"image\"\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n      @for(key of fileKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n    </sd-table>\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-button\r\n      prefixIcon=\"add\"\r\n      color=\"primary\"\r\n      (click)=\"onDetail()\"\r\n      [title]=\"component.properties?.titleButtonCreate || 'Th\u00EAm m\u1EDBi'\"></sd-button>\r\n    }\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-side-drawer title=\"Chi ti\u1EBFt\" width=\"500px\">\r\n        <div sdTitle>\r\n          <span>T\u1EA1o m\u1EDBi/c\u1EADp nh\u1EADt</span>\r\n        </div>\r\n        <div sdBody class=\"c-table-create-update\">\r\n          @if(!!component.columns?.length) {\r\n            <div class=\"row mx-0\">\r\n              @for(column of component.columns;track column.key) {\r\n                @let validate = formRenderColumn[column.key].validate;\r\n                <div class=\"col-12 px-0 mt-16\">\r\n                  @if(column.type === 'string') {\r\n                    <sd-input\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [pattern]=\"column.validate?.pattern\"\r\n                    [patternErrorMessage]=\"column.validate?.patternErrorMessage\"></sd-input>\r\n                  }@else if(column.type === 'number') {\r\n                    <sd-input-number\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [min]=\"column.validate?.min\"></sd-input-number>\r\n                  }@else if(column.type === 'radio') {\r\n                    <sd-radio\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [name]=\"column.key\"\r\n                    [items]=\"column.values\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [required]=\"validate?.required\"></sd-radio>\r\n                  }@else if(column.type === 'values') {\r\n                    <sd-autocomplete\r\n                      [form]=\"form\"\r\n                      [label]=\"column.label\"\r\n                      [(model)]=\"row[column.key]\"\r\n                      [items]=\"columnValues[column.key]\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [required]=\"validate?.required\"></sd-autocomplete>\r\n                  }@else if(column.type === 'date') {\r\n                    <sd-date\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-date>\r\n                  }@else if(column.type === 'datetime') {\r\n                    <sd-datetime\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-datetime>\r\n                  }@else if(column.type === 'image') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"image\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }@else if (column.type === 'file') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"file\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n        <div sdFooter class=\"text-right pr-16\">\r\n          <sd-button title=\"L\u01B0u\" prefixIcon=\"save\" color=\"primary\" type=\"fill\" (click)=\"onAccept()\"></sd-button>\r\n        </div>\r\n      </sd-side-drawer>\r\n    }\r\n  </div>\r\n}\r\n\r\n", styles: [":host{display:contents}.c-table-create-update{background:#fff;margin:-16px;padding:16px;height:calc(100vh - 97px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber$1, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["args", "label", "key", "description", "previewWidth", "previewHeight", "align", "upload", "details", "download", "imageValidator", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "form", "name", "required", "type", "helperText", "max", "maxOfImage", "extensions", "disabled", "model"], outputs: ["loaded", "filesChanged", "modelChange"] }, { kind: "component", type: SdTable, selector: "sd-table", inputs: ["autoId", "option"] }, { kind: "directive", type: SdTabelCellDefDirective, selector: "[sdTableCellDef]", inputs: ["sdTableCellDef"] }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass"], 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: SdRadio, selector: "sd-radio", inputs: ["autoId", "name", "form", "label", "placeholder", "display", "model", "items", "valueField", "displayField", "required", "inlineError", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { setVariables: "setVariables", form: "form", _component: ["component", "_component"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: SdTable, descendants: true }, { propertyName: "sideDrawer", first: true, predicate: SdSideDrawer, descendants: true }, { propertyName: "uploadFiles", predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if(component && tableOption) {\r\n  <div style=\"width: 100%\">\r\n    <sd-table [option]=\"tableOption\">\r\n      @for(key of imageKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n            type=\"image\"\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n      @for(key of fileKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n    </sd-table>\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-button\r\n      prefixIcon=\"add\"\r\n      color=\"primary\"\r\n      (click)=\"onDetail()\"\r\n      [title]=\"component.properties?.titleButtonCreate || ('core.component.form-builder.add-new' | translate)\"></sd-button>\r\n    }\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-side-drawer [title]=\"'core.component.form-builder.detail' | translate\" width=\"500px\">\r\n        <div sdTitle>\r\n          <span>{{ 'core.component.form-builder.create-update' | translate }}</span>\r\n        </div>\r\n        <div sdBody class=\"c-table-create-update\">\r\n          @if(!!component.columns?.length) {\r\n            <div class=\"row mx-0\">\r\n              @for(column of component.columns;track column.key) {\r\n                @let validate = formRenderColumn[column.key].validate;\r\n                <div class=\"col-12 px-0 mt-16\">\r\n                  @if(column.type === 'string') {\r\n                    <sd-input\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [pattern]=\"column.validate?.pattern\"\r\n                    [patternErrorMessage]=\"column.validate?.patternErrorMessage\"></sd-input>\r\n                  }@else if(column.type === 'number') {\r\n                    <sd-input-number\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [min]=\"column.validate?.min\"></sd-input-number>\r\n                  }@else if(column.type === 'radio') {\r\n                    <sd-radio\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [name]=\"column.key\"\r\n                    [items]=\"column.values\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [required]=\"validate?.required\"></sd-radio>\r\n                  }@else if(column.type === 'values') {\r\n                    <sd-autocomplete\r\n                      [form]=\"form\"\r\n                      [label]=\"column.label\"\r\n                      [(model)]=\"row[column.key]\"\r\n                      [items]=\"columnValues[column.key]\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [required]=\"validate?.required\"></sd-autocomplete>\r\n                  }@else if(column.type === 'date') {\r\n                    <sd-date\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-date>\r\n                  }@else if(column.type === 'datetime') {\r\n                    <sd-datetime\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-datetime>\r\n                  }@else if(column.type === 'image') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"image\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }@else if (column.type === 'file') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"file\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n        <div sdFooter class=\"text-right pr-16\">\r\n          <sd-button [title]=\"'core.component.form-builder.save' | translate\" prefixIcon=\"save\" color=\"primary\" type=\"fill\" (click)=\"onAccept()\"></sd-button>\r\n        </div>\r\n      </sd-side-drawer>\r\n    }\r\n  </div>\r\n}\r\n\r\n", styles: [":host{display:contents}.c-table-create-update{background:#fff;margin:-16px;padding:16px;height:calc(100vh - 97px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber$1, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["autoId", "args", "label", "key", "description", "previewWidth", "previewHeight", "align", "upload", "details", "download", "imageValidator", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "form", "name", "required", "type", "helperText", "max", "maxOfImage", "extensions", "disabled", "model"], outputs: ["loaded", "filesChanged", "modelChange"] }, { kind: "component", type: SdTable, selector: "sd-table", inputs: ["autoId", "option"] }, { kind: "directive", type: SdTabelCellDefDirective, selector: "[sdTableCellDef]", inputs: ["sdTableCellDef"] }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass"], 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: SdRadio, selector: "sd-radio", inputs: ["autoId", "name", "form", "label", "placeholder", "display", "model", "items", "valueField", "displayField", "required", "inlineError", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "pipe", type: 
+                // Pipe cho phần viewed
+                TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2627,7 +2590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdDate,
                         SdDatetime,
                         // Pipe cho phần viewed
-                    ], template: "@if(component && tableOption) {\r\n  <div style=\"width: 100%\">\r\n    <sd-table [option]=\"tableOption\">\r\n      @for(key of imageKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n            type=\"image\"\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n      @for(key of fileKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n    </sd-table>\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-button\r\n      prefixIcon=\"add\"\r\n      color=\"primary\"\r\n      (click)=\"onDetail()\"\r\n      [title]=\"component.properties?.titleButtonCreate || 'Th\u00EAm m\u1EDBi'\"></sd-button>\r\n    }\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-side-drawer title=\"Chi ti\u1EBFt\" width=\"500px\">\r\n        <div sdTitle>\r\n          <span>T\u1EA1o m\u1EDBi/c\u1EADp nh\u1EADt</span>\r\n        </div>\r\n        <div sdBody class=\"c-table-create-update\">\r\n          @if(!!component.columns?.length) {\r\n            <div class=\"row mx-0\">\r\n              @for(column of component.columns;track column.key) {\r\n                @let validate = formRenderColumn[column.key].validate;\r\n                <div class=\"col-12 px-0 mt-16\">\r\n                  @if(column.type === 'string') {\r\n                    <sd-input\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [pattern]=\"column.validate?.pattern\"\r\n                    [patternErrorMessage]=\"column.validate?.patternErrorMessage\"></sd-input>\r\n                  }@else if(column.type === 'number') {\r\n                    <sd-input-number\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [min]=\"column.validate?.min\"></sd-input-number>\r\n                  }@else if(column.type === 'radio') {\r\n                    <sd-radio\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [name]=\"column.key\"\r\n                    [items]=\"column.values\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [required]=\"validate?.required\"></sd-radio>\r\n                  }@else if(column.type === 'values') {\r\n                    <sd-autocomplete\r\n                      [form]=\"form\"\r\n                      [label]=\"column.label\"\r\n                      [(model)]=\"row[column.key]\"\r\n                      [items]=\"columnValues[column.key]\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [required]=\"validate?.required\"></sd-autocomplete>\r\n                  }@else if(column.type === 'date') {\r\n                    <sd-date\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-date>\r\n                  }@else if(column.type === 'datetime') {\r\n                    <sd-datetime\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-datetime>\r\n                  }@else if(column.type === 'image') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"image\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }@else if (column.type === 'file') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"file\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n        <div sdFooter class=\"text-right pr-16\">\r\n          <sd-button title=\"L\u01B0u\" prefixIcon=\"save\" color=\"primary\" type=\"fill\" (click)=\"onAccept()\"></sd-button>\r\n        </div>\r\n      </sd-side-drawer>\r\n    }\r\n  </div>\r\n}\r\n\r\n", styles: [":host{display:contents}.c-table-create-update{background:#fff;margin:-16px;padding:16px;height:calc(100vh - 97px)}\n"] }]
+                        TranslatePipe,
+                    ], template: "@if(component && tableOption) {\r\n  <div style=\"width: 100%\">\r\n    <sd-table [option]=\"tableOption\">\r\n      @for(key of imageKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n            type=\"image\"\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n      @for(key of fileKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n    </sd-table>\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-button\r\n      prefixIcon=\"add\"\r\n      color=\"primary\"\r\n      (click)=\"onDetail()\"\r\n      [title]=\"component.properties?.titleButtonCreate || ('core.component.form-builder.add-new' | translate)\"></sd-button>\r\n    }\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-side-drawer [title]=\"'core.component.form-builder.detail' | translate\" width=\"500px\">\r\n        <div sdTitle>\r\n          <span>{{ 'core.component.form-builder.create-update' | translate }}</span>\r\n        </div>\r\n        <div sdBody class=\"c-table-create-update\">\r\n          @if(!!component.columns?.length) {\r\n            <div class=\"row mx-0\">\r\n              @for(column of component.columns;track column.key) {\r\n                @let validate = formRenderColumn[column.key].validate;\r\n                <div class=\"col-12 px-0 mt-16\">\r\n                  @if(column.type === 'string') {\r\n                    <sd-input\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [pattern]=\"column.validate?.pattern\"\r\n                    [patternErrorMessage]=\"column.validate?.patternErrorMessage\"></sd-input>\r\n                  }@else if(column.type === 'number') {\r\n                    <sd-input-number\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [min]=\"column.validate?.min\"></sd-input-number>\r\n                  }@else if(column.type === 'radio') {\r\n                    <sd-radio\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [name]=\"column.key\"\r\n                    [items]=\"column.values\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [required]=\"validate?.required\"></sd-radio>\r\n                  }@else if(column.type === 'values') {\r\n                    <sd-autocomplete\r\n                      [form]=\"form\"\r\n                      [label]=\"column.label\"\r\n                      [(model)]=\"row[column.key]\"\r\n                      [items]=\"columnValues[column.key]\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [required]=\"validate?.required\"></sd-autocomplete>\r\n                  }@else if(column.type === 'date') {\r\n                    <sd-date\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-date>\r\n                  }@else if(column.type === 'datetime') {\r\n                    <sd-datetime\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-datetime>\r\n                  }@else if(column.type === 'image') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"image\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }@else if (column.type === 'file') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"file\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n        <div sdFooter class=\"text-right pr-16\">\r\n          <sd-button [title]=\"'core.component.form-builder.save' | translate\" prefixIcon=\"save\" color=\"primary\" type=\"fill\" (click)=\"onAccept()\"></sd-button>\r\n        </div>\r\n      </sd-side-drawer>\r\n    }\r\n  </div>\r\n}\r\n\r\n", styles: [":host{display:contents}.c-table-create-update{background:#fff;margin:-16px;padding:16px;height:calc(100vh - 97px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { uploadFiles: [{
                 type: ViewChildren,
                 args: [SdUploadFile]
@@ -2859,7 +2823,7 @@ class LibItemComponent {
         await this.itemTable?.upload?.();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LibItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LibItemComponent, isStandalone: true, selector: "lib-item", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, viewQueries: [{ propertyName: "itemUpload", first: true, predicate: UploadComponent, descendants: true }, { propertyName: "itemTable", first: true, predicate: TableComponent, descendants: true }], ngImport: i0, template: "@if (entity && component) {\r\n  @if (component.type === 'textfield') {\r\n    <div [class]=\"col\">\r\n      <lib-textfield\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [validator]=\"validator\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textfield>\r\n    </div>\r\n  } @else if (component.type === 'textarea') {\r\n    <div [class]=\"col\">\r\n      <lib-textarea\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textarea>\r\n    </div>\r\n  } @else if (component.type === 'chip-string') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-string\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-string>\r\n    </div>\r\n  } @else if (component.type === 'chip-calendar') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-calendar\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-calendar>\r\n    </div>\r\n  } @else if (component.type === 'number') {\r\n    <div [class]=\"col\">\r\n      <lib-number\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-number>\r\n    </div>\r\n  }\r\n  @if (component.type === 'select') {\r\n    <div [class]=\"col\">\r\n      <lib-select\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\"></lib-select>\r\n    </div>\r\n  } @else if (component.type === 'radio') {\r\n    <div [class]=\"col\">\r\n      <lib-radio\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-radio>\r\n    </div>\r\n  } @else if (component.type === 'datetime') {\r\n    <div [class]=\"col\">\r\n      <lib-datetime\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-datetime>\r\n    </div>\r\n  } @else if (component.type === 'upload') {\r\n    <div [class]=\"col\">\r\n      <lib-upload\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\">\r\n      </lib-upload>\r\n    </div>\r\n  } @else if (component.type === 'table') {\r\n    <div [class]=\"col\">\r\n      <lib-table [setVariables]=\"setVariables\" [component]=\"component\" [(model)]=\"entity[component.key!]\" [viewed]=\"viewed\"></lib-table>\r\n    </div>\r\n  } @else if (component.type === 'html') {\r\n    <div [class]=\"col\">\r\n      <lib-html [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" [component]=\"component\" [viewed]=\"viewed\"> </lib-html>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TextfieldComponent, selector: "lib-textfield", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: ChipStringComponent, selector: "lib-chip-string", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: ChipCalendarComponent, selector: "lib-chip-calendar", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: NumberComponent, selector: "lib-number", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: DatetimeComponent, selector: "lib-datetime", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["setVariables", "form", "component", "required", "viewed", "model"], outputs: ["modelChange"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: HtmlComponent, selector: "lib-html", inputs: ["setVariables", "form", "entity", "hashedValues", "component", "viewed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LibItemComponent, isStandalone: true, selector: "lib-item", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, viewQueries: [{ propertyName: "itemUpload", first: true, predicate: UploadComponent, descendants: true }, { propertyName: "itemTable", first: true, predicate: TableComponent, descendants: true }], ngImport: i0, template: "@if (entity && component) {\r\n  @if (component.type === 'textfield') {\r\n    <div [class]=\"col\">\r\n      <lib-textfield\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [validator]=\"validator\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textfield>\r\n    </div>\r\n  } @else if (component.type === 'textarea') {\r\n    <div [class]=\"col\">\r\n      <lib-textarea\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textarea>\r\n    </div>\r\n  } @else if (component.type === 'chip-string') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-string\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-string>\r\n    </div>\r\n  } @else if (component.type === 'chip-calendar') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-calendar\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-calendar>\r\n    </div>\r\n  } @else if (component.type === 'number') {\r\n    <div [class]=\"col\">\r\n      <lib-number\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-number>\r\n    </div>\r\n  }\r\n  @if (component.type === 'select') {\r\n    <div [class]=\"col\">\r\n      <lib-select\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\"></lib-select>\r\n    </div>\r\n  } @else if (component.type === 'radio') {\r\n    <div [class]=\"col\">\r\n      <lib-radio\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-radio>\r\n    </div>\r\n  } @else if (component.type === 'datetime') {\r\n    <div [class]=\"col\">\r\n      <lib-datetime\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-datetime>\r\n    </div>\r\n  } @else if (component.type === 'upload') {\r\n    <div [class]=\"col\">\r\n      <lib-upload\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\">\r\n      </lib-upload>\r\n    </div>\r\n  } @else if (component.type === 'table') {\r\n    <div [class]=\"col\">\r\n      <lib-table [setVariables]=\"setVariables\" [component]=\"component\" [(model)]=\"entity[component.key!]\" [viewed]=\"viewed\"></lib-table>\r\n    </div>\r\n  } @else if (component.type === 'html') {\r\n    <div [class]=\"col\">\r\n      <lib-html [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" [component]=\"component\" [viewed]=\"viewed\"> </lib-html>\r\n    </div>\r\n  } @else if (component.type === 'break') {\r\n    <!-- Break: empty 12-col placeholder \u00E9p xu\u1ED1ng d\u00F2ng. Kh\u00F4ng render g\u00EC runtime. -->\r\n    <div class=\"col-12\" style=\"height: 0;\"></div>\r\n  }\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TextfieldComponent, selector: "lib-textfield", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: ChipStringComponent, selector: "lib-chip-string", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: ChipCalendarComponent, selector: "lib-chip-calendar", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: NumberComponent, selector: "lib-number", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: DatetimeComponent, selector: "lib-datetime", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["setVariables", "form", "component", "required", "viewed", "model"], outputs: ["modelChange"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: HtmlComponent, selector: "lib-html", inputs: ["setVariables", "form", "entity", "hashedValues", "component", "viewed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LibItemComponent, decorators: [{
             type: Component,
@@ -2875,7 +2839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         TableComponent,
                         UploadComponent,
                         HtmlComponent
-                    ], template: "@if (entity && component) {\r\n  @if (component.type === 'textfield') {\r\n    <div [class]=\"col\">\r\n      <lib-textfield\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [validator]=\"validator\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textfield>\r\n    </div>\r\n  } @else if (component.type === 'textarea') {\r\n    <div [class]=\"col\">\r\n      <lib-textarea\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textarea>\r\n    </div>\r\n  } @else if (component.type === 'chip-string') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-string\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-string>\r\n    </div>\r\n  } @else if (component.type === 'chip-calendar') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-calendar\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-calendar>\r\n    </div>\r\n  } @else if (component.type === 'number') {\r\n    <div [class]=\"col\">\r\n      <lib-number\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-number>\r\n    </div>\r\n  }\r\n  @if (component.type === 'select') {\r\n    <div [class]=\"col\">\r\n      <lib-select\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\"></lib-select>\r\n    </div>\r\n  } @else if (component.type === 'radio') {\r\n    <div [class]=\"col\">\r\n      <lib-radio\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-radio>\r\n    </div>\r\n  } @else if (component.type === 'datetime') {\r\n    <div [class]=\"col\">\r\n      <lib-datetime\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-datetime>\r\n    </div>\r\n  } @else if (component.type === 'upload') {\r\n    <div [class]=\"col\">\r\n      <lib-upload\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\">\r\n      </lib-upload>\r\n    </div>\r\n  } @else if (component.type === 'table') {\r\n    <div [class]=\"col\">\r\n      <lib-table [setVariables]=\"setVariables\" [component]=\"component\" [(model)]=\"entity[component.key!]\" [viewed]=\"viewed\"></lib-table>\r\n    </div>\r\n  } @else if (component.type === 'html') {\r\n    <div [class]=\"col\">\r\n      <lib-html [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" [component]=\"component\" [viewed]=\"viewed\"> </lib-html>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (entity && component) {\r\n  @if (component.type === 'textfield') {\r\n    <div [class]=\"col\">\r\n      <lib-textfield\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [validator]=\"validator\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textfield>\r\n    </div>\r\n  } @else if (component.type === 'textarea') {\r\n    <div [class]=\"col\">\r\n      <lib-textarea\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-textarea>\r\n    </div>\r\n  } @else if (component.type === 'chip-string') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-string\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-string>\r\n    </div>\r\n  } @else if (component.type === 'chip-calendar') {\r\n    <div [class]=\"col\">\r\n      <lib-chip-calendar\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-chip-calendar>\r\n    </div>\r\n  } @else if (component.type === 'number') {\r\n    <div [class]=\"col\">\r\n      <lib-number\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-number>\r\n    </div>\r\n  }\r\n  @if (component.type === 'select') {\r\n    <div [class]=\"col\">\r\n      <lib-select\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\"></lib-select>\r\n    </div>\r\n  } @else if (component.type === 'radio') {\r\n    <div [class]=\"col\">\r\n      <lib-radio\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-radio>\r\n    </div>\r\n  } @else if (component.type === 'datetime') {\r\n    <div [class]=\"col\">\r\n      <lib-datetime\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [entity]=\"entity\"\r\n        [component]=\"component\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [viewed]=\"viewed\"></lib-datetime>\r\n    </div>\r\n  } @else if (component.type === 'upload') {\r\n    <div [class]=\"col\">\r\n      <lib-upload\r\n        [setVariables]=\"setVariables\"\r\n        [form]=\"form\"\r\n        [component]=\"component\"\r\n        [entity]=\"entity\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [validator]=\"validator\"\r\n        [viewed]=\"viewed\">\r\n      </lib-upload>\r\n    </div>\r\n  } @else if (component.type === 'table') {\r\n    <div [class]=\"col\">\r\n      <lib-table [setVariables]=\"setVariables\" [component]=\"component\" [(model)]=\"entity[component.key!]\" [viewed]=\"viewed\"></lib-table>\r\n    </div>\r\n  } @else if (component.type === 'html') {\r\n    <div [class]=\"col\">\r\n      <lib-html [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" [component]=\"component\" [viewed]=\"viewed\"> </lib-html>\r\n    </div>\r\n  } @else if (component.type === 'break') {\r\n    <!-- Break: empty 12-col placeholder \u00E9p xu\u1ED1ng d\u00F2ng. Kh\u00F4ng render g\u00EC runtime. -->\r\n    <div class=\"col-12\" style=\"height: 0;\"></div>\r\n  }\r\n}\r\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { itemUpload: [{
                 type: ViewChild,
                 args: [UploadComponent]
@@ -3099,13 +3063,15 @@ class SdFormRender extends SdBaseSecureComponent {
         }
         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 }], target: i0.ɵɵFactoryTarget.Component });
+    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 });
     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 }], usesInheritance: 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", "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: [{
@@ -3253,7 +3219,7 @@ class ExpressionBuilderComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExpressionBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExpressionBuilderComponent, isStandalone: true, selector: "expression-builder", inputs: { label: "label", _attributes: ["attributes", "_attributes"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange", edit: "edit" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<!-- <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ (model | expressionQuery) || '--' }}</a> -->\r\n<sd-input [label]=\"label\" style=\"width: 100%;\" [model]=\"(model | expressionQuery) || '--'\" disabled hideInlineError>\r\n  <ng-template sdSuffixDef>\r\n    <sd-button\r\n      prefixIcon=\"edit\"\r\n      color=\"primary\"\r\n      (click)=\"onEdit()\"\r\n      type=\"link\"></sd-button>\r\n  </ng-template>\r\n</sd-input>\r\n@if (expression) {\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button\r\n          prefixIcon=\"calculate\"\r\n          class=\"mr-4\"\r\n          title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n        <sd-button\r\n          prefixIcon=\"add\"\r\n          title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCondition(expression.conditions)\"\r\n          type=\"fill\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n          <div class=\"c-condition\">\r\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n            @if (idxLv1 === 0) {\r\n              <div class=\"c-where\">WHERE</div>\r\n            }\r\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n            @if (idxLv1 === 1) {\r\n              <div class=\"c-select\">\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [(model)]=\"expression.combinator\"\r\n                  [items]=\"[\r\n                    { value: '&&', display: 'AND' },\r\n                    { value: '||', display: 'OR' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError=\"\"></sd-select>\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 200px\"\r\n              [(model)]=\"conditionLv1.field\"\r\n              [items]=\"attributes\"\r\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              required\r\n              hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 100px\"\r\n              [(model)]=\"conditionLv1.operator\"\r\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              [disabled]=\"!fieldAttribute?.type\"\r\n              required\r\n              hideInlineError></sd-select>\r\n            @if (\r\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\r\n            ) {\r\n              @if (fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if (fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"numberAttributes\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  hideInlineError></sd-autocomplete>\r\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                  [form]=\"form\"\r\n                  style=\"width: 150px\"\r\n                  [items]=\"types\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"conditionLv1.dayInfo.type\"\r\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                  required\r\n                  hideInlineError>\r\n                </sd-select>\r\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\r\n                  <sd-input-number\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"width: 80px\"\r\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    [min]=\"1\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-input-number>\r\n                  <sd-select\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [items]=\"previouses\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [(model)]=\"conditionLv1.dayInfo.related\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\r\n                  <sd-datetime\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-datetime>\r\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\r\n                  <sd-autocomplete\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    [items]=\"dateAttributes\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    hideInlineError></sd-autocomplete>\r\n                }\r\n              } @else if (fieldAttribute.type === 'boolean') {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"[\r\n                    { value: true, display: fieldAttribute.displayOnTrue },\r\n                    { value: false, display: fieldAttribute.displayOnFalse }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-select>\r\n              } @else if (fieldAttribute.type === 'values') {\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"fieldAttribute.values\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n          } @else if (conditionLv1.type === 'combinator') {\r\n            <div class=\"c-builder\">\r\n              <div class=\"d-flex justify-content-end\">\r\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n                <sd-button\r\n                  prefixIcon=\"add\"\r\n                  title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n                  size=\"sm\"\r\n                  color=\"primary\"\r\n                  (click)=\"addCondition(conditionLv1.conditions)\"\r\n                  type=\"fill\"></sd-button>\r\n              </div>\r\n              <!-- C\u1EA5p 2 -->\r\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n                  <div class=\"c-condition\">\r\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                    @if (idxLv2 === 0) {\r\n                      <div class=\"c-where\">WHERE</div>\r\n                    }\r\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                    @if (idxLv2 === 1) {\r\n                      <div class=\"c-select\">\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [(model)]=\"conditionLv1.combinator\"\r\n                          [items]=\"[\r\n                            { value: '&&', display: 'AND' },\r\n                            { value: '||', display: 'OR' }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError=\"\"></sd-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                  @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 200px\"\r\n                      [(model)]=\"conditionLv2.field\"\r\n                      [items]=\"attributes\"\r\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      required\r\n                      hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 100px\"\r\n                      [(model)]=\"conditionLv2.operator\"\r\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [disabled]=\"!fieldAttribute?.type\"\r\n                      required\r\n                      hideInlineError></sd-select>\r\n                    @if (\r\n                      !!fieldAttribute?.type &&\r\n                      conditionLv2.operator &&\r\n                      conditionLv2.operator !== 'NULL' &&\r\n                      conditionLv2.operator !== 'NOT_NULL'\r\n                    ) {\r\n                      @if (fieldAttribute.type === 'string') {\r\n                        <sd-input\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          required\r\n                          hideInlineError></sd-input>\r\n                      } @else if (fieldAttribute.type === 'number') {\r\n                        <sd-input-number\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          hideInlineError></sd-input-number>\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"numberAttributes\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          hideInlineError></sd-autocomplete>\r\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                          style=\"width: 150px\"\r\n                          [items]=\"types\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          [(model)]=\"conditionLv2.dayInfo.type\"\r\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                          required\r\n                          hideInlineError>\r\n                        </sd-select>\r\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\r\n                          <sd-input-number\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"width: 80px\"\r\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            [min]=\"1\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-input-number>\r\n                          <sd-select\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [items]=\"previouses\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            [(model)]=\"conditionLv2.dayInfo.related\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-select>\r\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\r\n                          <sd-datetime\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-datetime>\r\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\r\n                          <sd-autocomplete\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            [items]=\"dateAttributes\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            hideInlineError></sd-autocomplete>\r\n                        }\r\n                      } @else if (fieldAttribute.type === 'boolean') {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"[\r\n                            { value: true, display: fieldAttribute.displayOnTrue },\r\n                            { value: false, display: fieldAttribute.displayOnFalse }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-select>\r\n                      } @else if (fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"fieldAttribute.values\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { 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", "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: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "pipe", type: ExpressionQueryPipe, name: "expressionQuery" }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExpressionBuilderComponent, isStandalone: true, selector: "expression-builder", inputs: { label: "label", _attributes: ["attributes", "_attributes"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange", edit: "edit" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<!--\r\n  FEEL-style expression trigger pill (M3 redesign).\r\n  B\u1EA5m v\u00E0o pill m\u1EDF modal builder hi\u1EC7n t\u1EA1i (onEdit).\r\n-->\r\n<div class=\"fb-field\">\r\n  @if (label) {\r\n    <div class=\"fb-field__label\">{{ label }}</div>\r\n  }\r\n  @let exprText = model | expressionQuery;\r\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\">\r\n    <span class=\"fb-expr__badge\">FEEL</span>\r\n    @if (exprText) {\r\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\r\n    } @else {\r\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\r\n    }\r\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\r\n      <span class=\"msi\">functions</span>\r\n    </button>\r\n  </div>\r\n</div>\r\n@if (expression) {\r\n  <sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button\r\n          prefixIcon=\"calculate\"\r\n          class=\"mr-4\"\r\n          [title]=\"'core.component.form-builder.condition-group' | translate\"\r\n          color=\"primary\"\r\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n        <sd-button\r\n          prefixIcon=\"add\"\r\n          [title]=\"'core.component.form-builder.condition' | translate\"\r\n          color=\"primary\"\r\n          (click)=\"addCondition(expression.conditions)\"\r\n          type=\"fill\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n          <div class=\"c-condition\">\r\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n            @if (idxLv1 === 0) {\r\n              <div class=\"c-where\">WHERE</div>\r\n            }\r\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n            @if (idxLv1 === 1) {\r\n              <div class=\"c-select\">\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [(model)]=\"expression.combinator\"\r\n                  [items]=\"[\r\n                    { value: '&&', display: 'AND' },\r\n                    { value: '||', display: 'OR' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError=\"\"></sd-select>\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 200px\"\r\n              [(model)]=\"conditionLv1.field\"\r\n              [items]=\"attributes\"\r\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              required\r\n              hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 100px\"\r\n              [(model)]=\"conditionLv1.operator\"\r\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              [disabled]=\"!fieldAttribute?.type\"\r\n              required\r\n              hideInlineError></sd-select>\r\n            @if (\r\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\r\n            ) {\r\n              @if (fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if (fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"numberAttributes\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  hideInlineError></sd-autocomplete>\r\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [placeholder]=\"'core.component.form-builder.time' | translate\"\r\n                  [form]=\"form\"\r\n                  style=\"width: 150px\"\r\n                  [items]=\"types\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"conditionLv1.dayInfo.type\"\r\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                  required\r\n                  hideInlineError>\r\n                </sd-select>\r\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\r\n                  <sd-input-number\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"width: 80px\"\r\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    [min]=\"1\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-input-number>\r\n                  <sd-select\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [items]=\"previouses\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [(model)]=\"conditionLv1.dayInfo.related\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\r\n                  <sd-datetime\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-datetime>\r\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\r\n                  <sd-autocomplete\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    [items]=\"dateAttributes\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    hideInlineError></sd-autocomplete>\r\n                }\r\n              } @else if (fieldAttribute.type === 'boolean') {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"[\r\n                    { value: true, display: fieldAttribute.displayOnTrue },\r\n                    { value: false, display: fieldAttribute.displayOnFalse }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-select>\r\n              } @else if (fieldAttribute.type === 'values') {\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"fieldAttribute.values\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n          } @else if (conditionLv1.type === 'combinator') {\r\n            <div class=\"c-builder\">\r\n              <div class=\"d-flex justify-content-end\">\r\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n                <sd-button\r\n                  prefixIcon=\"add\"\r\n                  [title]=\"'core.component.form-builder.condition' | translate\"\r\n                  size=\"sm\"\r\n                  color=\"primary\"\r\n                  (click)=\"addCondition(conditionLv1.conditions)\"\r\n                  type=\"fill\"></sd-button>\r\n              </div>\r\n              <!-- C\u1EA5p 2 -->\r\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n                  <div class=\"c-condition\">\r\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                    @if (idxLv2 === 0) {\r\n                      <div class=\"c-where\">WHERE</div>\r\n                    }\r\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                    @if (idxLv2 === 1) {\r\n                      <div class=\"c-select\">\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [(model)]=\"conditionLv1.combinator\"\r\n                          [items]=\"[\r\n                            { value: '&&', display: 'AND' },\r\n                            { value: '||', display: 'OR' }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError=\"\"></sd-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                  @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 200px\"\r\n                      [(model)]=\"conditionLv2.field\"\r\n                      [items]=\"attributes\"\r\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      required\r\n                      hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 100px\"\r\n                      [(model)]=\"conditionLv2.operator\"\r\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [disabled]=\"!fieldAttribute?.type\"\r\n                      required\r\n                      hideInlineError></sd-select>\r\n                    @if (\r\n                      !!fieldAttribute?.type &&\r\n                      conditionLv2.operator &&\r\n                      conditionLv2.operator !== 'NULL' &&\r\n                      conditionLv2.operator !== 'NOT_NULL'\r\n                    ) {\r\n                      @if (fieldAttribute.type === 'string') {\r\n                        <sd-input\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          required\r\n                          hideInlineError></sd-input>\r\n                      } @else if (fieldAttribute.type === 'number') {\r\n                        <sd-input-number\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          hideInlineError></sd-input-number>\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"numberAttributes\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          hideInlineError></sd-autocomplete>\r\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          [placeholder]=\"'core.component.form-builder.time' | translate\"\r\n                          style=\"width: 150px\"\r\n                          [items]=\"types\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          [(model)]=\"conditionLv2.dayInfo.type\"\r\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                          required\r\n                          hideInlineError>\r\n                        </sd-select>\r\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\r\n                          <sd-input-number\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"width: 80px\"\r\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            [min]=\"1\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-input-number>\r\n                          <sd-select\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [items]=\"previouses\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            [(model)]=\"conditionLv2.dayInfo.related\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-select>\r\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\r\n                          <sd-datetime\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-datetime>\r\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\r\n                          <sd-autocomplete\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            [items]=\"dateAttributes\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            hideInlineError></sd-autocomplete>\r\n                        }\r\n                      } @else if (fieldAttribute.type === 'boolean') {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"[\r\n                            { value: true, display: fieldAttribute.displayOnTrue },\r\n                            { value: false, display: fieldAttribute.displayOnFalse }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-select>\r\n                      } @else if (fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"fieldAttribute.values\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { 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", "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: "pipe", type: ExpressionQueryPipe, name: "expressionQuery" }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExpressionBuilderComponent, decorators: [{
             type: Component,
@@ -3268,8 +3234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         ExpressionQueryPipe,
                         SdDatetime,
                         SdSuffixDefDirective,
-                        MatIconModule
-                    ], template: "<!-- <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ (model | expressionQuery) || '--' }}</a> -->\r\n<sd-input [label]=\"label\" style=\"width: 100%;\" [model]=\"(model | expressionQuery) || '--'\" disabled hideInlineError>\r\n  <ng-template sdSuffixDef>\r\n    <sd-button\r\n      prefixIcon=\"edit\"\r\n      color=\"primary\"\r\n      (click)=\"onEdit()\"\r\n      type=\"link\"></sd-button>\r\n  </ng-template>\r\n</sd-input>\r\n@if (expression) {\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button\r\n          prefixIcon=\"calculate\"\r\n          class=\"mr-4\"\r\n          title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n        <sd-button\r\n          prefixIcon=\"add\"\r\n          title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCondition(expression.conditions)\"\r\n          type=\"fill\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n          <div class=\"c-condition\">\r\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n            @if (idxLv1 === 0) {\r\n              <div class=\"c-where\">WHERE</div>\r\n            }\r\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n            @if (idxLv1 === 1) {\r\n              <div class=\"c-select\">\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [(model)]=\"expression.combinator\"\r\n                  [items]=\"[\r\n                    { value: '&&', display: 'AND' },\r\n                    { value: '||', display: 'OR' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError=\"\"></sd-select>\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 200px\"\r\n              [(model)]=\"conditionLv1.field\"\r\n              [items]=\"attributes\"\r\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              required\r\n              hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 100px\"\r\n              [(model)]=\"conditionLv1.operator\"\r\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              [disabled]=\"!fieldAttribute?.type\"\r\n              required\r\n              hideInlineError></sd-select>\r\n            @if (\r\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\r\n            ) {\r\n              @if (fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if (fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"numberAttributes\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  hideInlineError></sd-autocomplete>\r\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                  [form]=\"form\"\r\n                  style=\"width: 150px\"\r\n                  [items]=\"types\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"conditionLv1.dayInfo.type\"\r\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                  required\r\n                  hideInlineError>\r\n                </sd-select>\r\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\r\n                  <sd-input-number\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"width: 80px\"\r\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    [min]=\"1\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-input-number>\r\n                  <sd-select\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [items]=\"previouses\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [(model)]=\"conditionLv1.dayInfo.related\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\r\n                  <sd-datetime\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-datetime>\r\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\r\n                  <sd-autocomplete\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    [items]=\"dateAttributes\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    hideInlineError></sd-autocomplete>\r\n                }\r\n              } @else if (fieldAttribute.type === 'boolean') {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"[\r\n                    { value: true, display: fieldAttribute.displayOnTrue },\r\n                    { value: false, display: fieldAttribute.displayOnFalse }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-select>\r\n              } @else if (fieldAttribute.type === 'values') {\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"fieldAttribute.values\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n          } @else if (conditionLv1.type === 'combinator') {\r\n            <div class=\"c-builder\">\r\n              <div class=\"d-flex justify-content-end\">\r\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n                <sd-button\r\n                  prefixIcon=\"add\"\r\n                  title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n                  size=\"sm\"\r\n                  color=\"primary\"\r\n                  (click)=\"addCondition(conditionLv1.conditions)\"\r\n                  type=\"fill\"></sd-button>\r\n              </div>\r\n              <!-- C\u1EA5p 2 -->\r\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n                  <div class=\"c-condition\">\r\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                    @if (idxLv2 === 0) {\r\n                      <div class=\"c-where\">WHERE</div>\r\n                    }\r\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                    @if (idxLv2 === 1) {\r\n                      <div class=\"c-select\">\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [(model)]=\"conditionLv1.combinator\"\r\n                          [items]=\"[\r\n                            { value: '&&', display: 'AND' },\r\n                            { value: '||', display: 'OR' }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError=\"\"></sd-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                  @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 200px\"\r\n                      [(model)]=\"conditionLv2.field\"\r\n                      [items]=\"attributes\"\r\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      required\r\n                      hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 100px\"\r\n                      [(model)]=\"conditionLv2.operator\"\r\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [disabled]=\"!fieldAttribute?.type\"\r\n                      required\r\n                      hideInlineError></sd-select>\r\n                    @if (\r\n                      !!fieldAttribute?.type &&\r\n                      conditionLv2.operator &&\r\n                      conditionLv2.operator !== 'NULL' &&\r\n                      conditionLv2.operator !== 'NOT_NULL'\r\n                    ) {\r\n                      @if (fieldAttribute.type === 'string') {\r\n                        <sd-input\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          required\r\n                          hideInlineError></sd-input>\r\n                      } @else if (fieldAttribute.type === 'number') {\r\n                        <sd-input-number\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          hideInlineError></sd-input-number>\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"numberAttributes\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          hideInlineError></sd-autocomplete>\r\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                          style=\"width: 150px\"\r\n                          [items]=\"types\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          [(model)]=\"conditionLv2.dayInfo.type\"\r\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                          required\r\n                          hideInlineError>\r\n                        </sd-select>\r\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\r\n                          <sd-input-number\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"width: 80px\"\r\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            [min]=\"1\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-input-number>\r\n                          <sd-select\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [items]=\"previouses\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            [(model)]=\"conditionLv2.dayInfo.related\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-select>\r\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\r\n                          <sd-datetime\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-datetime>\r\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\r\n                          <sd-autocomplete\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            [items]=\"dateAttributes\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            hideInlineError></sd-autocomplete>\r\n                        }\r\n                      } @else if (fieldAttribute.type === 'boolean') {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"[\r\n                            { value: true, display: fieldAttribute.displayOnTrue },\r\n                            { value: false, display: fieldAttribute.displayOnFalse }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-select>\r\n                      } @else if (fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"fieldAttribute.values\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
+                        MatIconModule, TranslatePipe
+                    ], template: "<!--\r\n  FEEL-style expression trigger pill (M3 redesign).\r\n  B\u1EA5m v\u00E0o pill m\u1EDF modal builder hi\u1EC7n t\u1EA1i (onEdit).\r\n-->\r\n<div class=\"fb-field\">\r\n  @if (label) {\r\n    <div class=\"fb-field__label\">{{ label }}</div>\r\n  }\r\n  @let exprText = model | expressionQuery;\r\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\">\r\n    <span class=\"fb-expr__badge\">FEEL</span>\r\n    @if (exprText) {\r\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\r\n    } @else {\r\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\r\n    }\r\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\r\n      <span class=\"msi\">functions</span>\r\n    </button>\r\n  </div>\r\n</div>\r\n@if (expression) {\r\n  <sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button\r\n          prefixIcon=\"calculate\"\r\n          class=\"mr-4\"\r\n          [title]=\"'core.component.form-builder.condition-group' | translate\"\r\n          color=\"primary\"\r\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n        <sd-button\r\n          prefixIcon=\"add\"\r\n          [title]=\"'core.component.form-builder.condition' | translate\"\r\n          color=\"primary\"\r\n          (click)=\"addCondition(expression.conditions)\"\r\n          type=\"fill\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n          <div class=\"c-condition\">\r\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n            @if (idxLv1 === 0) {\r\n              <div class=\"c-where\">WHERE</div>\r\n            }\r\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n            @if (idxLv1 === 1) {\r\n              <div class=\"c-select\">\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [(model)]=\"expression.combinator\"\r\n                  [items]=\"[\r\n                    { value: '&&', display: 'AND' },\r\n                    { value: '||', display: 'OR' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError=\"\"></sd-select>\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 200px\"\r\n              [(model)]=\"conditionLv1.field\"\r\n              [items]=\"attributes\"\r\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              required\r\n              hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 100px\"\r\n              [(model)]=\"conditionLv1.operator\"\r\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              [disabled]=\"!fieldAttribute?.type\"\r\n              required\r\n              hideInlineError></sd-select>\r\n            @if (\r\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\r\n            ) {\r\n              @if (fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if (fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"numberAttributes\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  hideInlineError></sd-autocomplete>\r\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [placeholder]=\"'core.component.form-builder.time' | translate\"\r\n                  [form]=\"form\"\r\n                  style=\"width: 150px\"\r\n                  [items]=\"types\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"conditionLv1.dayInfo.type\"\r\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                  required\r\n                  hideInlineError>\r\n                </sd-select>\r\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\r\n                  <sd-input-number\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"width: 80px\"\r\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    [min]=\"1\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-input-number>\r\n                  <sd-select\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [items]=\"previouses\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [(model)]=\"conditionLv1.dayInfo.related\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\r\n                  <sd-datetime\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-datetime>\r\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\r\n                  <sd-autocomplete\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    [items]=\"dateAttributes\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    hideInlineError></sd-autocomplete>\r\n                }\r\n              } @else if (fieldAttribute.type === 'boolean') {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"[\r\n                    { value: true, display: fieldAttribute.displayOnTrue },\r\n                    { value: false, display: fieldAttribute.displayOnFalse }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-select>\r\n              } @else if (fieldAttribute.type === 'values') {\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"fieldAttribute.values\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n          } @else if (conditionLv1.type === 'combinator') {\r\n            <div class=\"c-builder\">\r\n              <div class=\"d-flex justify-content-end\">\r\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n                <sd-button\r\n                  prefixIcon=\"add\"\r\n                  [title]=\"'core.component.form-builder.condition' | translate\"\r\n                  size=\"sm\"\r\n                  color=\"primary\"\r\n                  (click)=\"addCondition(conditionLv1.conditions)\"\r\n                  type=\"fill\"></sd-button>\r\n              </div>\r\n              <!-- C\u1EA5p 2 -->\r\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n                  <div class=\"c-condition\">\r\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                    @if (idxLv2 === 0) {\r\n                      <div class=\"c-where\">WHERE</div>\r\n                    }\r\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                    @if (idxLv2 === 1) {\r\n                      <div class=\"c-select\">\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [(model)]=\"conditionLv1.combinator\"\r\n                          [items]=\"[\r\n                            { value: '&&', display: 'AND' },\r\n                            { value: '||', display: 'OR' }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError=\"\"></sd-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                  @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 200px\"\r\n                      [(model)]=\"conditionLv2.field\"\r\n                      [items]=\"attributes\"\r\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      required\r\n                      hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 100px\"\r\n                      [(model)]=\"conditionLv2.operator\"\r\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [disabled]=\"!fieldAttribute?.type\"\r\n                      required\r\n                      hideInlineError></sd-select>\r\n                    @if (\r\n                      !!fieldAttribute?.type &&\r\n                      conditionLv2.operator &&\r\n                      conditionLv2.operator !== 'NULL' &&\r\n                      conditionLv2.operator !== 'NOT_NULL'\r\n                    ) {\r\n                      @if (fieldAttribute.type === 'string') {\r\n                        <sd-input\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          required\r\n                          hideInlineError></sd-input>\r\n                      } @else if (fieldAttribute.type === 'number') {\r\n                        <sd-input-number\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          hideInlineError></sd-input-number>\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"numberAttributes\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          hideInlineError></sd-autocomplete>\r\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          [placeholder]=\"'core.component.form-builder.time' | translate\"\r\n                          style=\"width: 150px\"\r\n                          [items]=\"types\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          [(model)]=\"conditionLv2.dayInfo.type\"\r\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                          required\r\n                          hideInlineError>\r\n                        </sd-select>\r\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\r\n                          <sd-input-number\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"width: 80px\"\r\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            [min]=\"1\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-input-number>\r\n                          <sd-select\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [items]=\"previouses\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            [(model)]=\"conditionLv2.dayInfo.related\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-select>\r\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\r\n                          <sd-datetime\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-datetime>\r\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\r\n                          <sd-autocomplete\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            [items]=\"dateAttributes\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            hideInlineError></sd-autocomplete>\r\n                        }\r\n                      } @else if (fieldAttribute.type === 'boolean') {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"[\r\n                            { value: true, display: fieldAttribute.displayOnTrue },\r\n                            { value: false, display: fieldAttribute.displayOnFalse }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-select>\r\n                      } @else if (fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"fieldAttribute.values\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
@@ -3444,11 +3410,11 @@ class AttributeInputNumber {
         this.modelChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeInputNumber, isStandalone: true, selector: "attribute-input-number", inputs: { _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input-number\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n</div> -->\r\n<sd-input-number\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n", dependencies: [{ kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeInputNumber, isStandalone: true, selector: "attribute-input-number", inputs: { _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input-number\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n</div> -->\r\n<sd-input-number\r\n    class=\"py-8\"\r\n    size=\"sm\"\r\n    [label]=\"label!\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n", dependencies: [{ kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeInputNumber, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-input-number', imports: [SdInputNumber], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input-number\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n</div> -->\r\n<sd-input-number\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n" }]
+            args: [{ selector: 'attribute-input-number', imports: [SdInputNumber], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input-number\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n</div> -->\r\n<sd-input-number\r\n    class=\"py-8\"\r\n    size=\"sm\"\r\n    [label]=\"label!\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n" }]
         }], propDecorators: { _label: [{
                 type: Input,
                 args: ['label']
@@ -3486,11 +3452,11 @@ class AttributeInput {
         this.sdChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeInput, isStandalone: true, selector: "attribute-input", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input style=\"width: 200px\" size=\"sm\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n</div> -->\r\n<sd-input class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n", dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeInput, isStandalone: true, selector: "attribute-input", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input style=\"width: 200px\" size=\"sm\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n</div> -->\r\n<sd-input class=\"py-8\" size=\"sm\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n", dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeInput, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-input', imports: [SdInput$1], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input style=\"width: 200px\" size=\"sm\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n</div> -->\r\n<sd-input class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n" }]
+            args: [{ selector: 'attribute-input', imports: [SdInput$1], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input style=\"width: 200px\" size=\"sm\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n</div> -->\r\n<sd-input class=\"py-8\" size=\"sm\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], _label: [{
@@ -3527,11 +3493,11 @@ class AttributeSwitch {
         this.modelChange.emit(!!value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeSwitch, isStandalone: true, selector: "attribute-switch", inputs: { form: "form", _label: ["label", "_label"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-switch size=\"sm\" [form]=\"form\" [(model)]=\"model\" (sdChange)=\"onChange($event)\" hideInlineError></sd-switch>\r\n</div> -->\r\n<sd-select\r\n  class=\"py-8\"\r\n  [label]=\"label!\"\r\n  [form]=\"form\"\r\n  [(model)]=\"model\"\r\n  valueField=\"value\"\r\n  displayField=\"display\"\r\n  [items]=\"[\r\n    { value: true, display: 'C\u00F3' },\r\n    { value: false, display: 'Kh\u00F4ng' }\r\n  ]\"\r\n  (sdChange)=\"onChange($event)\"\r\n  hideInlineError></sd-select>\r\n", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeSwitch, isStandalone: true, selector: "attribute-switch", inputs: { form: "form", _label: ["label", "_label"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-switch size=\"sm\" [form]=\"form\" [(model)]=\"model\" (sdChange)=\"onChange($event)\" hideInlineError></sd-switch>\r\n</div> -->\r\n<sd-select\r\n  class=\"py-8\"\r\n  size=\"sm\"\r\n  [label]=\"label!\"\r\n  [form]=\"form\"\r\n  [(model)]=\"model\"\r\n  valueField=\"value\"\r\n  displayField=\"display\"\r\n  [items]=\"[\r\n    { value: true, display: ('core.confirm.yes-short' | translate) },\r\n    { value: false, display: ('core.confirm.no-short' | translate) }\r\n  ]\"\r\n  (sdChange)=\"onChange($event)\"\r\n  hideInlineError></sd-select>\r\n", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeSwitch, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-switch', imports: [SdSelect$1], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-switch size=\"sm\" [form]=\"form\" [(model)]=\"model\" (sdChange)=\"onChange($event)\" hideInlineError></sd-switch>\r\n</div> -->\r\n<sd-select\r\n  class=\"py-8\"\r\n  [label]=\"label!\"\r\n  [form]=\"form\"\r\n  [(model)]=\"model\"\r\n  valueField=\"value\"\r\n  displayField=\"display\"\r\n  [items]=\"[\r\n    { value: true, display: 'C\u00F3' },\r\n    { value: false, display: 'Kh\u00F4ng' }\r\n  ]\"\r\n  (sdChange)=\"onChange($event)\"\r\n  hideInlineError></sd-select>\r\n" }]
+            args: [{ selector: 'attribute-switch', imports: [SdSelect$1, TranslatePipe], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-switch size=\"sm\" [form]=\"form\" [(model)]=\"model\" (sdChange)=\"onChange($event)\" hideInlineError></sd-switch>\r\n</div> -->\r\n<sd-select\r\n  class=\"py-8\"\r\n  size=\"sm\"\r\n  [label]=\"label!\"\r\n  [form]=\"form\"\r\n  [(model)]=\"model\"\r\n  valueField=\"value\"\r\n  displayField=\"display\"\r\n  [items]=\"[\r\n    { value: true, display: ('core.confirm.yes-short' | translate) },\r\n    { value: false, display: ('core.confirm.no-short' | translate) }\r\n  ]\"\r\n  (sdChange)=\"onChange($event)\"\r\n  hideInlineError></sd-select>\r\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], _label: [{
@@ -3566,13 +3532,15 @@ class AttributeTemplate {
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION }], 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      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\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", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }] });
+    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 ɵ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", "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], 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      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\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" }]
+            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: [{
@@ -3606,11 +3574,11 @@ class AttributeTextarea {
         this.sdChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeTextarea, isStandalone: true, selector: "attribute-textarea", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-textarea class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-textarea>", dependencies: [{ kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "rows", "hideInlineError", "required", "disabled", "viewed", "autoHeight", "maxlength", "pattern", "validator", "inlineError", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeTextarea, isStandalone: true, selector: "attribute-textarea", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-textarea class=\"py-8\" size=\"sm\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-textarea>", dependencies: [{ kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "rows", "hideInlineError", "required", "disabled", "viewed", "autoHeight", "maxlength", "pattern", "validator", "inlineError", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-textarea', imports: [SdTextarea], template: "<sd-textarea class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-textarea>" }]
+            args: [{ selector: 'attribute-textarea', imports: [SdTextarea], template: "<sd-textarea class=\"py-8\" size=\"sm\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-textarea>" }]
         }], propDecorators: { form: [{
                 type: Input
             }], _label: [{
@@ -3698,11 +3666,11 @@ class TextfieldAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextfieldAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextfieldAttribute, isStandalone: true, selector: "textfield-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  <attribute-input [form]=\"form\" label=\"Gi\u00E1 tr\u1ECB m\u1EB7c \u0111\u1ECBnh\" [(model)]=\"component.defaultValue\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\r\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextfieldAttribute, isStandalone: true, selector: "textfield-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.default-value' | translate\" [(model)]=\"component.defaultValue\"></attribute-input>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\r\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextfieldAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'textfield-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeExpression, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeTextarea], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  <attribute-input [form]=\"form\" label=\"Gi\u00E1 tr\u1ECB m\u1EB7c \u0111\u1ECBnh\" [(model)]=\"component.defaultValue\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\r\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'textfield-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeExpression, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeTextarea, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.default-value' | translate\" [(model)]=\"component.defaultValue\"></attribute-input>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\r\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3742,11 +3710,11 @@ class TextFieldControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextFieldControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextFieldControl, isStandalone: true, selector: "textfield-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">\r\n    Your input text\r\n  </div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">{{component.defaultValue}}</div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative;padding:0 8px;color:#bfbfbf}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextFieldControl, isStandalone: true, selector: "textfield-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">\r\n    Your input text\r\n  </div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">{{component.defaultValue}}</div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative;padding:0 8px;color:#bfbfbf}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextFieldControl, decorators: [{
             type: Component,
-            args: [{ selector: 'textfield-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">\r\n    Your input text\r\n  </div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">{{component.defaultValue}}</div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative;padding:0 8px;color:#bfbfbf}\n"] }]
+            args: [{ selector: 'textfield-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">\r\n    Your input text\r\n  </div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">{{component.defaultValue}}</div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative;padding:0 8px;color:#bfbfbf}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -3798,11 +3766,11 @@ class TextareaAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextareaAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextareaAttribute, isStandalone: true, selector: "textarea-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextareaAttribute, isStandalone: true, selector: "textarea-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextareaAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'textarea-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeExpression, AttributeTextarea], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'textarea-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeExpression, AttributeTextarea, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3843,11 +3811,11 @@ class TextareaControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextareaControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextareaControl, isStandalone: true, selector: "textarea-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your input text</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-textarea\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-textarea{width:100%;background:#fff;height:100px;border:1px solid #d3d3d3;border-radius:4px;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TextareaControl, isStandalone: true, selector: "textarea-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your input text</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-textarea\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-textarea{width:100%;background:#fff;height:100px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TextareaControl, decorators: [{
             type: Component,
-            args: [{ selector: 'textarea-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your input text</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-textarea\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-textarea{width:100%;background:#fff;height:100px;border:1px solid #d3d3d3;border-radius:4px;position:relative}\n"] }]
+            args: [{ selector: 'textarea-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your input text</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-textarea\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-textarea{width:100%;background:#fff;height:100px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -3883,11 +3851,11 @@ class ChipStringControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipStringControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipStringControl, isStandalone: true, selector: "chip-string-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipStringControl, isStandalone: true, selector: "chip-string-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipStringControl, decorators: [{
             type: Component,
-            args: [{ selector: 'chip-string-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"] }]
+            args: [{ selector: 'chip-string-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -3946,11 +3914,11 @@ class ChipStringAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipStringAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipStringAttribute, isStandalone: true, selector: "chip-string-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipStringAttribute, isStandalone: true, selector: "chip-string-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  @if (!component.properties!.viewed) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">verified</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n      <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          [label]=\"'core.component.form-builder.required-when' | translate\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipStringAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'chip-string-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeSwitch, AttributeExpression], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n" }]
+            args: [{ selector: 'chip-string-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeSwitch, AttributeExpression, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  @if (!component.properties!.viewed) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">verified</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n      <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          [label]=\"'core.component.form-builder.required-when' | translate\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3992,11 +3960,11 @@ class ChipCalendarControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipCalendarControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipCalendarControl, isStandalone: true, selector: "chip-calendar-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipCalendarControl, isStandalone: true, selector: "chip-calendar-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipCalendarControl, decorators: [{
             type: Component,
-            args: [{ selector: 'chip-calendar-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"] }]
+            args: [{ selector: 'chip-calendar-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">One, Two, Three</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <span class=\"c-chip\">One</span>\r\n      <span class=\"c-chip\">Two</span>\r\n      <span class=\"c-chip\">Three</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}.c-chip{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:16px;font-size:13px;line-height:20px;margin:2px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -4055,11 +4023,11 @@ class ChipCalendarAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipCalendarAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipCalendarAttribute, isStandalone: true, selector: "chip-calendar-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ChipCalendarAttribute, isStandalone: true, selector: "chip-calendar-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  @if (!component.properties!.viewed) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">verified</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n      <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          [label]=\"'core.component.form-builder.required-when' | translate\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChipCalendarAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'chip-calendar-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeSwitch, AttributeExpression], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n" }]
+            args: [{ selector: 'chip-calendar-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeSwitch, AttributeExpression, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  @if (!component.properties!.viewed) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">verified</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n      <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          [label]=\"'core.component.form-builder.required-when' | translate\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4121,11 +4089,11 @@ class NumberAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NumberAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NumberAttribute, isStandalone: true, selector: "number-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB nh\u1ECF nh\u1EA5t\" [(model)]=\"component.validate!.min\"></attribute-input-number>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB l\u1EDBn nh\u1EA5t\" [(model)]=\"component.validate!.max\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NumberAttribute, isStandalone: true, selector: "number-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  </div>\r\n</details>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.min' | translate\" [(model)]=\"component.validate!.min\"></attribute-input-number>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.max' | translate\" [(model)]=\"component.validate!.max\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NumberAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'number-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeExpression, AttributeTextarea], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB nh\u1ECF nh\u1EA5t\" [(model)]=\"component.validate!.min\"></attribute-input-number>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB l\u1EDBn nh\u1EA5t\" [(model)]=\"component.validate!.max\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'number-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeExpression, AttributeTextarea, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  </div>\r\n</details>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.min' | translate\" [(model)]=\"component.validate!.min\"></attribute-input-number>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.max' | translate\" [(model)]=\"component.validate!.max\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4168,11 +4136,11 @@ class NumberControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NumberControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NumberControl, isStandalone: true, selector: "number-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{number}}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NumberControl, isStandalone: true, selector: "number-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{number}}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NumberControl, decorators: [{
             type: Component,
-            args: [{ selector: 'number-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{number}}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}\n"] }]
+            args: [{ selector: 'number-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{number}}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\"></div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -4206,11 +4174,11 @@ class DatetimeControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DatetimeControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DatetimeControl, isStandalone: true, selector: "datetime-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{ component.subtype === 'datetime' ? datetime : date }}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n          d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;position:relative;border-radius:4px}.c-input svg{position:absolute;top:2px;right:3px;color:#999}.label{font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DatetimeControl, isStandalone: true, selector: "datetime-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{ component.subtype === 'datetime' ? datetime : date }}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n          d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);position:relative;border-radius:4px}.c-input svg{position:absolute;top:2px;right:3px;color:#999}.label{font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DatetimeControl, decorators: [{
             type: Component,
-            args: [{ selector: 'datetime-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{ component.subtype === 'datetime' ? datetime : date }}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n          d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;position:relative;border-radius:4px}.c-input svg{position:absolute;top:2px;right:3px;color:#999}.label{font-weight:500}\n"] }]
+            args: [{ selector: 'datetime-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{ component.subtype === 'datetime' ? datetime : date }}</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input\">\r\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n          d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);position:relative;border-radius:4px}.c-input svg{position:absolute;top:2px;right:3px;color:#999}.label{font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -4254,11 +4222,11 @@ class AttributeSelect {
         this.sdChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeSelect, isStandalone: true, selector: "attribute-select", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _multiple: ["multiple", "_multiple"], _items: ["items", "_items"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-select\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>\r\n</div> -->\r\n<sd-select\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeSelect, isStandalone: true, selector: "attribute-select", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _multiple: ["multiple", "_multiple"], _items: ["items", "_items"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-select\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>\r\n</div> -->\r\n<sd-select\r\n    class=\"py-8\"\r\n    size=\"sm\"\r\n    [label]=\"label!\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-select', imports: [SdSelect$1], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-select\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>\r\n</div> -->\r\n<sd-select\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>" }]
+            args: [{ selector: 'attribute-select', imports: [SdSelect$1], template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-select\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>\r\n</div> -->\r\n<sd-select\r\n    class=\"py-8\"\r\n    size=\"sm\"\r\n    [label]=\"label!\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>" }]
         }], propDecorators: { form: [{
                 type: Input
             }], _label: [{
@@ -4328,11 +4296,11 @@ class DatetimeAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DatetimeAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DatetimeAttribute, isStandalone: true, selector: "datetime-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"\u0110\u1ECBnh d\u1EA1ng\"\r\n    [(model)]=\"component.subtype\"\r\n    [items]=\"[\r\n      { value: 'date', display: 'dd/MM/yyyy' },\r\n      { value: 'datetime', display: 'dd/MM/yyyy HH:mm' }\r\n    ]\"></attribute-select>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch [form]=\"form\" label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DatetimeAttribute, isStandalone: true, selector: "datetime-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    [label]=\"'core.component.form-builder.format' | translate\"\r\n    [(model)]=\"component.subtype\"\r\n    [items]=\"[\r\n      { value: 'date', display: 'dd/MM/yyyy' },\r\n      { value: 'datetime', display: 'dd/MM/yyyy HH:mm' }\r\n    ]\"></attribute-select>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  </div>\r\n</details>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [form]=\"form\" [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DatetimeAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'datetime-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeSwitch, AttributeSelect, AttributeExpression, AttributeTextarea], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"\u0110\u1ECBnh d\u1EA1ng\"\r\n    [(model)]=\"component.subtype\"\r\n    [items]=\"[\r\n      { value: 'date', display: 'dd/MM/yyyy' },\r\n      { value: 'datetime', display: 'dd/MM/yyyy HH:mm' }\r\n    ]\"></attribute-select>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch [form]=\"form\" label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'datetime-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeSwitch, AttributeSelect, AttributeExpression, AttributeTextarea, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    [label]=\"'core.component.form-builder.format' | translate\"\r\n    [(model)]=\"component.subtype\"\r\n    [items]=\"[\r\n      { value: 'date', display: 'dd/MM/yyyy' },\r\n      { value: 'datetime', display: 'dd/MM/yyyy HH:mm' }\r\n    ]\"></attribute-select>\r\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  </div>\r\n</details>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [form]=\"form\" [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4410,11 +4378,11 @@ let BuildQueries$1 = class BuildQueries {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BuildQueries, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.queries?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div style=\"width: 150px\">\r\n            <div class=\"text-secondary\">{{ property.value }}</div>\r\n            <div class=\"T16M\">{{ property.display }}</div>\r\n          </div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\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", "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: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.queries?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal [title]=\"'core.component.form-builder.set-query-value' | translate\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div style=\"width: 150px\">\r\n            <div class=\"text-secondary\">{{ property.value }}</div>\r\n            <div class=\"T16M\">{{ property.display }}</div>\r\n          </div>\r\n          <sd-autocomplete\r\n            [label]=\"'core.component.form-builder.value-source-field' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\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", "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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BuildQueries$1, decorators: [{
             type: Component,
-            args: [{ selector: 'build-queries', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdAutocomplete$1, SdButton, SdModal], template: "@if (!!selection?.queries?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div style=\"width: 150px\">\r\n            <div class=\"text-secondary\">{{ property.value }}</div>\r\n            <div class=\"T16M\">{{ property.display }}</div>\r\n          </div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
+            args: [{ selector: 'build-queries', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdAutocomplete$1, SdButton, SdModal, TranslatePipe], template: "@if (!!selection?.queries?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal [title]=\"'core.component.form-builder.set-query-value' | translate\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div style=\"width: 150px\">\r\n            <div class=\"text-secondary\">{{ property.value }}</div>\r\n            <div class=\"T16M\">{{ property.display }}</div>\r\n          </div>\r\n          <sd-autocomplete\r\n            [label]=\"'core.component.form-builder.value-source-field' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
@@ -4525,11 +4493,11 @@ class BuildVariables {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BuildVariables, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BuildVariables, isStandalone: true, selector: "build-variables", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.variables?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp g\u00E1n gi\u00E1 tr\u1ECB khi thay \u0111\u1ED5i\" width=\"500px\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (item of items; track item.id; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng mu\u1ED1n g\u00E1n gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.key\"\r\n            [items]=\"leftProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n          <sd-autocomplete\r\n             label=\"Gi\u00E1 tr\u1ECB mu\u1ED1n g\u00E1n\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.value\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\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", "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: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BuildVariables, isStandalone: true, selector: "build-variables", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.variables?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal [title]=\"'core.component.form-builder.set-on-change-assign' | translate\" width=\"500px\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-field' | translate\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (item of items; track item.id; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <sd-autocomplete\r\n            [label]=\"'core.component.form-builder.target-field' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.key\"\r\n            [items]=\"leftProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n          <sd-autocomplete\r\n             [label]=\"'core.component.form-builder.target-value' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.value\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\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", "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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BuildVariables, decorators: [{
             type: Component,
-            args: [{ selector: 'build-variables', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdAutocomplete$1, SdButton, SdModal], template: "@if (!!selection?.variables?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp g\u00E1n gi\u00E1 tr\u1ECB khi thay \u0111\u1ED5i\" width=\"500px\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (item of items; track item.id; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng mu\u1ED1n g\u00E1n gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.key\"\r\n            [items]=\"leftProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n          <sd-autocomplete\r\n             label=\"Gi\u00E1 tr\u1ECB mu\u1ED1n g\u00E1n\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.value\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
+            args: [{ selector: 'build-variables', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdAutocomplete$1, SdButton, SdModal, TranslatePipe], template: "@if (!!selection?.variables?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal [title]=\"'core.component.form-builder.set-on-change-assign' | translate\" width=\"500px\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-field' | translate\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (item of items; track item.id; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <sd-autocomplete\r\n            [label]=\"'core.component.form-builder.target-field' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.key\"\r\n            [items]=\"leftProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n          <sd-autocomplete\r\n             [label]=\"'core.component.form-builder.target-value' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.value\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
@@ -4623,11 +4591,11 @@ class AttributeSelection {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeSelection, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeSelection, isStandalone: true, selector: "attribute-selection", inputs: { components: "components", variables: "variables", component: "component", _valuesKey: ["valuesKey", "_valuesKey"], _values: ["values", "_values"] }, outputs: { valuesKeyChange: "valuesKeyChange", valuesChange: "valuesChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (selections.length) {\r\n    <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u API</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"valuesKey\"\r\n        [items]=\"selections\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeValuesKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div>\r\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\r\n\r\n    @if (component.type === 'select' && !!valuesKey) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n      <build-variables\r\n        label=\"G\u00E1n gi\u00E1 tr\u1ECB\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\r\n      <!-- <div class=\"d-flex align-items-center py-4\">\r\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\r\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\r\n      </div> -->\r\n    }\r\n  }\r\n  @if (!valuesKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">D\u1EEF li\u1EC7u t\u0129nh</div>\r\n      @for (item of values; track item.value; let idx = $index) {\r\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm d\u1EEF li\u1EC7u\" (click)=\"addItem()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n", dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { 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", "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: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: BuildQueries$1, selector: "build-queries", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "component", type: BuildVariables, selector: "build-variables", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeSelection, isStandalone: true, selector: "attribute-selection", inputs: { components: "components", variables: "variables", component: "component", _valuesKey: ["valuesKey", "_valuesKey"], _values: ["values", "_values"] }, outputs: { valuesKeyChange: "valuesKeyChange", valuesChange: "valuesChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-section class=\"mt-8\" [title]=\"'core.component.form-builder.data' | translate\" icon=\"format_list_bulleted\">\r\n  @if (selections.length) {\r\n    <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">{{ 'core.component.form-builder.data-api' | translate }}</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"valuesKey\"\r\n        [items]=\"selections\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeValuesKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div>\r\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\r\n\r\n    @if (component.type === 'select' && !!valuesKey) {\r\n      <build-queries\r\n        [label]=\"'core.component.form-builder.query-condition' | translate\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n      <build-variables\r\n        [label]=\"'core.component.form-builder.assign-value' | translate\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\r\n      <!-- <div class=\"d-flex align-items-center py-4\">\r\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\r\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\r\n      </div> -->\r\n    }\r\n  }\r\n  @if (!valuesKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">{{ 'core.component.form-builder.data-static' | translate }}</div>\r\n      @for (item of values; track item.value; let idx = $index) {\r\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-data' | translate\" (click)=\"addItem()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n", dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { 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", "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: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: BuildQueries$1, selector: "build-queries", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "component", type: BuildVariables, selector: "build-variables", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeSelection, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-selection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdInput$1, SdAutocomplete$1, SdButton, SdSection, BuildQueries$1, BuildVariables], template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (selections.length) {\r\n    <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u API</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"valuesKey\"\r\n        [items]=\"selections\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeValuesKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div>\r\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\r\n\r\n    @if (component.type === 'select' && !!valuesKey) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n      <build-variables\r\n        label=\"G\u00E1n gi\u00E1 tr\u1ECB\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\r\n      <!-- <div class=\"d-flex align-items-center py-4\">\r\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\r\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\r\n      </div> -->\r\n    }\r\n  }\r\n  @if (!valuesKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">D\u1EEF li\u1EC7u t\u0129nh</div>\r\n      @for (item of values; track item.value; let idx = $index) {\r\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm d\u1EEF li\u1EC7u\" (click)=\"addItem()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n" }]
+            args: [{ selector: 'attribute-selection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdInput$1, SdAutocomplete$1, SdButton, SdSection, BuildQueries$1, BuildVariables, TranslatePipe], template: "<sd-section class=\"mt-8\" [title]=\"'core.component.form-builder.data' | translate\" icon=\"format_list_bulleted\">\r\n  @if (selections.length) {\r\n    <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">{{ 'core.component.form-builder.data-api' | translate }}</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"valuesKey\"\r\n        [items]=\"selections\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeValuesKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div>\r\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\r\n\r\n    @if (component.type === 'select' && !!valuesKey) {\r\n      <build-queries\r\n        [label]=\"'core.component.form-builder.query-condition' | translate\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n      <build-variables\r\n        [label]=\"'core.component.form-builder.assign-value' | translate\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\r\n      <!-- <div class=\"d-flex align-items-center py-4\">\r\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\r\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\r\n      </div> -->\r\n    }\r\n  }\r\n  @if (!valuesKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">{{ 'core.component.form-builder.data-static' | translate }}</div>\r\n      @for (item of values; track item.value; let idx = $index) {\r\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-data' | translate\" (click)=\"addItem()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4704,11 +4672,11 @@ class SelectAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectAttribute, isStandalone: true, selector: "select-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-switch label=\"Ch\u1ECDn nhi\u1EC1u\" [(model)]=\"component.properties!.multiple\"></attribute-switch>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n      <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [component]=\"component\"\r\n    [variables]=\"variables\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { 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: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectAttribute, isStandalone: true, selector: "select-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-switch [label]=\"'core.component.form-builder.multiple' | translate\" [(model)]=\"component.properties!.multiple\"></attribute-switch>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n      <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [component]=\"component\"\r\n    [variables]=\"variables\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { 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: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'select-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeSelection, AttributeInput, AttributeSwitch, AttributeExpression], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-switch label=\"Ch\u1ECDn nhi\u1EC1u\" [(model)]=\"component.properties!.multiple\"></attribute-switch>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n      <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [component]=\"component\"\r\n    [variables]=\"variables\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n" }]
+            args: [{ selector: 'select-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeSelection, AttributeInput, AttributeSwitch, AttributeExpression, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-switch [label]=\"'core.component.form-builder.multiple' | translate\" [(model)]=\"component.properties!.multiple\"></attribute-switch>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n      <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [component]=\"component\"\r\n    [variables]=\"variables\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4749,11 +4717,11 @@ class SelectControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectControl, isStandalone: true, selector: "select-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your dropdown selection</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input c-select\">\r\n      <svg width=\"8\" height=\"8\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          fill=\"currentColor\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\".5\"\r\n          d=\"M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}.c-select svg{position:absolute;right:10px;top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectControl, isStandalone: true, selector: "select-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your dropdown selection</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input c-select\">\r\n      <svg width=\"8\" height=\"8\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          fill=\"currentColor\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\".5\"\r\n          d=\"M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}.c-select svg{position:absolute;right:10px;top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectControl, decorators: [{
             type: Component,
-            args: [{ selector: 'select-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your dropdown selection</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input c-select\">\r\n      <svg width=\"8\" height=\"8\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          fill=\"currentColor\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\".5\"\r\n          d=\"M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;border-radius:4px;position:relative}.c-select svg{position:absolute;right:10px;top:10px}\n"] }]
+            args: [{ selector: 'select-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">Your dropdown selection</div>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"d-flex align-items-center\">\r\n    <div class=\"c-input c-select\">\r\n      <svg width=\"8\" height=\"8\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          fill=\"currentColor\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\".5\"\r\n          d=\"M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0\"></path>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".c-input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);border-radius:4px;position:relative}.c-select svg{position:absolute;right:10px;top:10px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -4852,11 +4820,11 @@ class RadioAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RadioAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: RadioAttribute, isStandalone: true, selector: "radio-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-select\r\n      [form]=\"form\"\r\n      label=\"B\u1ED1 c\u1EE5c\"\r\n      [(model)]=\"component.properties!.direction\"\r\n      [items]=\"[\r\n        { value: 'row', display: 'Ngang' },\r\n        { value: 'column', display: 'D\u1ECDc' }\r\n      ]\"></attribute-select>\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [component]=\"component\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { 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: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: RadioAttribute, isStandalone: true, selector: "radio-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-select\r\n      [form]=\"form\"\r\n      [label]=\"'core.component.form-builder.layout' | translate\"\r\n      [(model)]=\"component.properties!.direction\"\r\n      [items]=\"[\r\n        { value: 'row', display: 'Ngang' },\r\n        { value: 'column', display: ('core.component.form-builder.vertical' | translate) }\r\n      ]\"></attribute-select>\r\n    </div>\r\n  </details>\r\n  @if (!component.properties!.viewed) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">verified</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n      <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          [label]=\"'core.component.form-builder.required-when' | translate\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [component]=\"component\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { 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: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RadioAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'radio-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeSelection, AttributeInput, AttributeSwitch, AttributeSelect, AttributeExpression], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-select\r\n      [form]=\"form\"\r\n      label=\"B\u1ED1 c\u1EE5c\"\r\n      [(model)]=\"component.properties!.direction\"\r\n      [items]=\"[\r\n        { value: 'row', display: 'Ngang' },\r\n        { value: 'column', display: 'D\u1ECDc' }\r\n      ]\"></attribute-select>\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [component]=\"component\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n" }]
+            args: [{ selector: 'radio-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeSelection, AttributeInput, AttributeSwitch, AttributeSelect, AttributeExpression, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-select\r\n      [form]=\"form\"\r\n      [label]=\"'core.component.form-builder.layout' | translate\"\r\n      [(model)]=\"component.properties!.direction\"\r\n      [items]=\"[\r\n        { value: 'row', display: 'Ngang' },\r\n        { value: 'column', display: ('core.component.form-builder.vertical' | translate) }\r\n      ]\"></attribute-select>\r\n    </div>\r\n  </details>\r\n  @if (!component.properties!.viewed) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">verified</span>\r\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n        <span class=\"msi chev\">chevron_right</span>\r\n      </summary>\r\n      <div class=\"fb-section__body\">\r\n      <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          [label]=\"'core.component.form-builder.required-when' | translate\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [component]=\"component\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4875,11 +4843,11 @@ class CheckboxControl {
         this.component = component;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CheckboxControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: CheckboxControl, isStandalone: true, selector: "checkbox-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">C\u00F3/Kh\u00F4ng</div>\r\n} @else {\r\n  <div class=\"c-checkbox\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"c-box mr-4\"></div>\r\n      <div class=\"T14R\">{{ component.label }}</div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;position:relative}.c-checkbox .c-box{border:2px solid #828282;width:16px;height:16px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: CheckboxControl, isStandalone: true, selector: "checkbox-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{ 'core.component.form-builder.yes-no' | translate }}</div>\r\n} @else {\r\n  <div class=\"c-checkbox\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"c-box mr-4\"></div>\r\n      <div class=\"T14R\">{{ component.label }}</div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);position:relative}.c-checkbox .c-box{border:2px solid #828282;width:16px;height:16px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CheckboxControl, decorators: [{
             type: Component,
-            args: [{ selector: 'checkbox-control', imports: [CommonModule], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">C\u00F3/Kh\u00F4ng</div>\r\n} @else {\r\n  <div class=\"c-checkbox\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"c-box mr-4\"></div>\r\n      <div class=\"T14R\">{{ component.label }}</div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.input{width:100%;background:#fff;height:30px;border:1px solid #d3d3d3;position:relative}.c-checkbox .c-box{border:2px solid #828282;width:16px;height:16px;border-radius:2px}\n"] }]
+            args: [{ selector: 'checkbox-control', imports: [CommonModule, TranslatePipe], template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <div class=\"T14M\">{{ 'core.component.form-builder.yes-no' | translate }}</div>\r\n} @else {\r\n  <div class=\"c-checkbox\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"c-box mr-4\"></div>\r\n      <div class=\"T14R\">{{ component.label }}</div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.input{width:100%;background:#fff;height:30px;border:1px solid var(--md-sys-color-outline-variant);position:relative}.c-checkbox .c-box{border:2px solid #828282;width:16px;height:16px;border-radius:2px}\n"] }]
         }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -4931,11 +4899,11 @@ class CheckboxAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CheckboxAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: CheckboxAttribute, isStandalone: true, selector: "checkbox-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: CheckboxAttribute, isStandalone: true, selector: "checkbox-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  </div>\r\n</details>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CheckboxAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'checkbox-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeSwitch, AttributeExpression], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'checkbox-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeSwitch, AttributeExpression, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  </div>\r\n</details>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5004,11 +4972,11 @@ class BuildQueries {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BuildQueries, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { label: "label", _queries: ["queries", "_queries"], components: "components", variables: "variables", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!leftProperties?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div class=\"T14M\" style=\"width: 150px\">{{ property.display }}</div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\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", "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: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { label: "label", _queries: ["queries", "_queries"], components: "components", variables: "variables", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!leftProperties?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal [title]=\"'core.component.form-builder.set-query-value' | translate\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div class=\"T14M\" style=\"width: 150px\">{{ property.display }}</div>\r\n          <sd-autocomplete\r\n            [label]=\"'core.component.form-builder.value-source-field' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\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", "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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BuildQueries, decorators: [{
             type: Component,
-            args: [{ selector: 'build-queries', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdAutocomplete$1, SdButton, SdModal], template: "@if (!!leftProperties?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div class=\"T14M\" style=\"width: 150px\">{{ property.display }}</div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
+            args: [{ selector: 'build-queries', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdAutocomplete$1, SdButton, SdModal, TranslatePipe], template: "@if (!!leftProperties?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal [title]=\"'core.component.form-builder.set-query-value' | translate\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div class=\"T14M\" style=\"width: 150px\">{{ property.display }}</div>\r\n          <sd-autocomplete\r\n            [label]=\"'core.component.form-builder.value-source-field' | translate\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
@@ -5105,11 +5073,11 @@ class HtmlAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HtmlAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HtmlAttribute, isStandalone: true, selector: "html-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, outputs: { attributeChanges: "attributeChanges" }, ngImport: i0, template: "@if (!component.properties!.hidden) {\r\n  <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n    <attribute-select\r\n      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"definitionHtmls\"\r\n      (sdChange)=\"onChangeDefinition($event)\"></attribute-select>\r\n    <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\"></attribute-input>\r\n    <attribute-textarea [form]=\"form\" label=\"N\u1ED9i dung\" [(model)]=\"component.content\"></attribute-textarea>\r\n    @if (component.properties?.queries?.length) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [queries]=\"component.properties?.queries\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\" \r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n    }\r\n  </sd-section>\r\n  @if (component.properties?.variables?.length) {\r\n    <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"format_list_bulleted\">\r\n      @for (variable of component.properties?.variables; track variable.key) {\r\n        <attribute-input [form]=\"form\" [label]=\"variable.label\" [(model)]=\"variable.value\"></attribute-input>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { 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: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: BuildQueries, selector: "build-queries", inputs: ["label", "queries", "components", "variables", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HtmlAttribute, isStandalone: true, selector: "html-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, outputs: { attributeChanges: "attributeChanges" }, ngImport: i0, template: "@if (!component.properties!.hidden) {\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-select\r\n      [label]=\"'core.component.form-builder.template-data' | translate\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"definitionHtmls\"\r\n      (sdChange)=\"onChangeDefinition($event)\"></attribute-select>\r\n    <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\"></attribute-input>\r\n    <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.content' | translate\" [(model)]=\"component.content\"></attribute-textarea>\r\n    @if (component.properties?.queries?.length) {\r\n      <build-queries\r\n        [label]=\"'core.component.form-builder.query-condition' | translate\"\r\n        [queries]=\"component.properties?.queries\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n    }\r\n    </div>\r\n  </details>\r\n  @if (component.properties?.variables?.length) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">format_list_bulleted</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      @for (variable of component.properties?.variables; track variable.key) {\r\n        <attribute-input [form]=\"form\" [label]=\"variable.label\" [(model)]=\"variable.value\"></attribute-input>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\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-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ 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: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: BuildQueries, selector: "build-queries", inputs: ["label", "queries", "components", "variables", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HtmlAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'html-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeInput, AttributeSelect, AttributeExpression, AttributeTextarea, BuildQueries], template: "@if (!component.properties!.hidden) {\r\n  <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n    <attribute-select\r\n      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"definitionHtmls\"\r\n      (sdChange)=\"onChangeDefinition($event)\"></attribute-select>\r\n    <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\"></attribute-input>\r\n    <attribute-textarea [form]=\"form\" label=\"N\u1ED9i dung\" [(model)]=\"component.content\"></attribute-textarea>\r\n    @if (component.properties?.queries?.length) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [queries]=\"component.properties?.queries\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\" \r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n    }\r\n  </sd-section>\r\n  @if (component.properties?.variables?.length) {\r\n    <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"format_list_bulleted\">\r\n      @for (variable of component.properties?.variables; track variable.key) {\r\n        <attribute-input [form]=\"form\" [label]=\"variable.label\" [(model)]=\"variable.value\"></attribute-input>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'html-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeInput, AttributeSelect, AttributeExpression, AttributeTextarea, BuildQueries, TranslatePipe], template: "@if (!component.properties!.hidden) {\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-select\r\n      [label]=\"'core.component.form-builder.template-data' | translate\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"definitionHtmls\"\r\n      (sdChange)=\"onChangeDefinition($event)\"></attribute-select>\r\n    <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\"></attribute-input>\r\n    <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.content' | translate\" [(model)]=\"component.content\"></attribute-textarea>\r\n    @if (component.properties?.queries?.length) {\r\n      <build-queries\r\n        [label]=\"'core.component.form-builder.query-condition' | translate\"\r\n        [queries]=\"component.properties?.queries\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n    }\r\n    </div>\r\n  </details>\r\n  @if (component.properties?.variables?.length) {\r\n    <details class=\"fb-section\" open>\r\n      <summary class=\"fb-section__head\">\r\n        <span class=\"msi\">format_list_bulleted</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      @for (variable of component.properties?.variables; track variable.key) {\r\n        <attribute-input [form]=\"form\" [label]=\"variable.label\" [(model)]=\"variable.value\"></attribute-input>\r\n      }\r\n      </div>\r\n    </details>\r\n  }\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-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormGenericService }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5166,11 +5134,11 @@ class HtmlControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HtmlControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HtmlControl, isStandalone: true, selector: "html-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (!content) {\r\n  <div class=\"c-html d-flex align-items-center justify-content-center\">\r\n    <span class=\"material-icons\"> html </span>\r\n  </div>\r\n} @else {\r\n  <div [innerHTML]=\"hashed | htmlPipe: content: component\"></div>\r\n}\r\n", styles: [".c-html{height:70px;border:1px solid #d3d3d3;padding:10px;background-color:#f4f4f4}.c-html .material-icons{font-size:48px}\n"], dependencies: [{ kind: "pipe", type: HtmlPipe, name: "htmlPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: HtmlControl, isStandalone: true, selector: "html-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (!content) {\r\n  <div class=\"c-html d-flex align-items-center justify-content-center\">\r\n    <span class=\"material-icons\"> html </span>\r\n  </div>\r\n} @else {\r\n  <div [innerHTML]=\"hashed | htmlPipe: content: component\"></div>\r\n}\r\n", styles: [".c-html{height:70px;border:1px solid var(--md-sys-color-outline-variant);padding:10px;background-color:#f4f4f4}.c-html .material-icons{font-size:48px}\n"], dependencies: [{ kind: "pipe", type: HtmlPipe, name: "htmlPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HtmlControl, decorators: [{
             type: Component,
-            args: [{ selector: 'html-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HtmlPipe], template: "@if (!content) {\r\n  <div class=\"c-html d-flex align-items-center justify-content-center\">\r\n    <span class=\"material-icons\"> html </span>\r\n  </div>\r\n} @else {\r\n  <div [innerHTML]=\"hashed | htmlPipe: content: component\"></div>\r\n}\r\n", styles: [".c-html{height:70px;border:1px solid #d3d3d3;padding:10px;background-color:#f4f4f4}.c-html .material-icons{font-size:48px}\n"] }]
+            args: [{ selector: 'html-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HtmlPipe], template: "@if (!content) {\r\n  <div class=\"c-html d-flex align-items-center justify-content-center\">\r\n    <span class=\"material-icons\"> html </span>\r\n  </div>\r\n} @else {\r\n  <div [innerHTML]=\"hashed | htmlPipe: content: component\"></div>\r\n}\r\n", styles: [".c-html{height:70px;border:1px solid var(--md-sys-color-outline-variant);padding:10px;background-color:#f4f4f4}.c-html .material-icons{font-size:48px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }, { type: FormGenericService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -5237,11 +5205,11 @@ class AttributeParameter {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeParameter, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeParameter, isStandalone: true, selector: "attribute-parameter", inputs: { components: "components", label: "label", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n    <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n  </div>\r\n</div>\r\n<sd-modal title=\"G\u00E1n gi\u00E1 tr\u1ECB Tham s\u1ED1\" width=\"500px\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (item of items; track item.id; let idx = $index) {\r\n      <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n        <sd-input label=\"T\u00EAn tham s\u1ED1\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.key\" required hideInlineError></sd-input>\r\n        <sd-input label=\"Gi\u00E1 tr\u1ECB t\u01B0\u01A1ng \u1EE9ng\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.value\" required hideInlineError></sd-input>\r\n        <div style=\"width: 32px; min-width: 32px\">\r\n            <sd-button\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(idx)\"\r\n              size=\"sm\"\r\n              class=\"p-0\"\r\n            ></sd-button>\r\n          </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ 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: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeParameter, isStandalone: true, selector: "attribute-parameter", inputs: { components: "components", label: "label", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n    <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n  </div>\r\n</div>\r\n<sd-modal [title]=\"'core.component.form-builder.assign-parameter-value' | translate\" width=\"500px\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-field' | translate\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (item of items; track item.id; let idx = $index) {\r\n      <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n        <sd-input [label]=\"'core.component.form-builder.parameter-name' | translate\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.key\" required hideInlineError></sd-input>\r\n        <sd-input [label]=\"'core.component.form-builder.parameter-value' | translate\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.value\" required hideInlineError></sd-input>\r\n        <div style=\"width: 32px; min-width: 32px\">\r\n            <sd-button\r\n              prefixIcon=\"delete\"\r\n              [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n              (click)=\"remove(idx)\"\r\n              size=\"sm\"\r\n              class=\"p-0\"\r\n            ></sd-button>\r\n          </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ 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: 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeParameter, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-parameter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdButton, SdModal, SdInput], template: "<div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n    <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n  </div>\r\n</div>\r\n<sd-modal title=\"G\u00E1n gi\u00E1 tr\u1ECB Tham s\u1ED1\" width=\"500px\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (item of items; track item.id; let idx = $index) {\r\n      <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n        <sd-input label=\"T\u00EAn tham s\u1ED1\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.key\" required hideInlineError></sd-input>\r\n        <sd-input label=\"Gi\u00E1 tr\u1ECB t\u01B0\u01A1ng \u1EE9ng\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.value\" required hideInlineError></sd-input>\r\n        <div style=\"width: 32px; min-width: 32px\">\r\n            <sd-button\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(idx)\"\r\n              size=\"sm\"\r\n              class=\"p-0\"\r\n            ></sd-button>\r\n          </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
+            args: [{ selector: 'attribute-parameter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdButton, SdModal, SdInput, TranslatePipe], template: "<div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n    <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n  </div>\r\n</div>\r\n<sd-modal [title]=\"'core.component.form-builder.assign-parameter-value' | translate\" width=\"500px\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-field' | translate\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (item of items; track item.id; let idx = $index) {\r\n      <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n        <sd-input [label]=\"'core.component.form-builder.parameter-name' | translate\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.key\" required hideInlineError></sd-input>\r\n        <sd-input [label]=\"'core.component.form-builder.parameter-value' | translate\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.value\" required hideInlineError></sd-input>\r\n        <div style=\"width: 32px; min-width: 32px\">\r\n            <sd-button\r\n              prefixIcon=\"delete\"\r\n              [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n              (click)=\"remove(idx)\"\r\n              size=\"sm\"\r\n              class=\"p-0\"\r\n            ></sd-button>\r\n          </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
@@ -5272,15 +5240,17 @@ class UploadAttribute {
         this.extension = this.component.properties.extensions?.join(',') || '';
     }
     #subscription = new Subscription();
+    #i18n = inject(I18nService);
+    // Dropdown nguồn upload (mobile); display dịch qua i18n để hỗ trợ EN
     sources = [{
             value: 'ALL',
-            display: 'Tất cả'
+            display: this.#i18n.t('core.component.form-builder.upload-source.all')
         }, {
             value: 'PHOTO_LIBRARY',
-            display: 'Chọn từ thư viện'
+            display: this.#i18n.t('core.component.form-builder.upload-source.photo-library')
         }, {
             value: 'CAPTURE',
-            display: 'Chụp ảnh'
+            display: this.#i18n.t('core.component.form-builder.upload-source.capture')
         }];
     constructor(ref, builderService) {
         this.ref = ref;
@@ -5324,11 +5294,11 @@ class UploadAttribute {
                 ?.filter(val => !!val) || [];
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UploadAttribute, isStandalone: true, selector: "upload-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"Lo\u1EA1i\"\r\n    [(model)]=\"component.properties!.type\"\r\n    [items]=\"[\r\n      { value: 'file', display: 'T\u1EC7p' },\r\n      { value: 'image', display: '\u1EA2nh' }\r\n    ]\"></attribute-select>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input-number label=\"SL t\u1EC7p/\u1EA3nh t\u1ED1i \u0111a\" [(model)]=\"component.properties!.max\"></attribute-input-number>\r\n    <attribute-input-number label=\"Dung l\u01B0\u1EE3ng (Mb)\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\r\n    @if (component.properties!.type === 'file') {\r\n      <attribute-input label=\"\u0110\u1ECBnh d\u1EA1ng (VD: png,jpg ...)\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\r\n    }\r\n    @if (component.properties!.type === 'image') {\r\n      <attribute-select label=\"Ngu\u1ED3n (mobile)\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n    <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"component.properties!.args\"></attribute-parameter>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UploadAttribute, isStandalone: true, selector: "upload-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    [label]=\"'core.component.form-builder.type' | translate\"\r\n    [(model)]=\"component.properties!.type\"\r\n    [items]=\"[\r\n      { value: 'file', display: ('core.component.form-builder.file' | translate) },\r\n      { value: 'image', display: ('core.component.form-builder.image' | translate) }\r\n    ]\"></attribute-select>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input-number [label]=\"'core.component.form-builder.max-files' | translate\" [(model)]=\"component.properties!.max\"></attribute-input-number>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.size-mb' | translate\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\r\n    @if (component.properties!.type === 'file') {\r\n      <attribute-input [label]=\"'core.component.form-builder.format-example' | translate\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\r\n    }\r\n    @if (component.properties!.type === 'image') {\r\n      <attribute-select [label]=\"'core.component.form-builder.source-mobile' | translate\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\r\n    }\r\n    </div>\r\n  </details>\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)]=\"component.properties!.args\"></attribute-parameter>\r\n    </div>\r\n  </details>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'upload-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeSelect, AttributeExpression, AttributeParameter], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"Lo\u1EA1i\"\r\n    [(model)]=\"component.properties!.type\"\r\n    [items]=\"[\r\n      { value: 'file', display: 'T\u1EC7p' },\r\n      { value: 'image', display: '\u1EA2nh' }\r\n    ]\"></attribute-select>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input-number label=\"SL t\u1EC7p/\u1EA3nh t\u1ED1i \u0111a\" [(model)]=\"component.properties!.max\"></attribute-input-number>\r\n    <attribute-input-number label=\"Dung l\u01B0\u1EE3ng (Mb)\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\r\n    @if (component.properties!.type === 'file') {\r\n      <attribute-input label=\"\u0110\u1ECBnh d\u1EA1ng (VD: png,jpg ...)\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\r\n    }\r\n    @if (component.properties!.type === 'image') {\r\n      <attribute-select label=\"Ngu\u1ED3n (mobile)\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n    <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"component.properties!.args\"></attribute-parameter>\r\n  </sd-section>\r\n}\r\n" }]
+            args: [{ selector: 'upload-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeSelect, AttributeExpression, AttributeParameter, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    [label]=\"'core.component.form-builder.type' | translate\"\r\n    [(model)]=\"component.properties!.type\"\r\n    [items]=\"[\r\n      { value: 'file', display: ('core.component.form-builder.file' | translate) },\r\n      { value: 'image', display: ('core.component.form-builder.image' | translate) }\r\n    ]\"></attribute-select>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input-number [label]=\"'core.component.form-builder.max-files' | translate\" [(model)]=\"component.properties!.max\"></attribute-input-number>\r\n    <attribute-input-number [label]=\"'core.component.form-builder.size-mb' | translate\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\r\n    @if (component.properties!.type === 'file') {\r\n      <attribute-input [label]=\"'core.component.form-builder.format-example' | translate\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\r\n    }\r\n    @if (component.properties!.type === 'image') {\r\n      <attribute-select [label]=\"'core.component.form-builder.source-mobile' | translate\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\r\n    }\r\n    </div>\r\n  </details>\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)]=\"component.properties!.args\"></attribute-parameter>\r\n    </div>\r\n  </details>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5368,11 +5338,11 @@ class UploadControl {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UploadControl, isStandalone: true, selector: "upload-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <svg\r\n    width=\"64\"\r\n    height=\"64\"\r\n    viewBox=\"0 0 1280 1280\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    fill-rule=\"evenodd\"\r\n    clip-rule=\"evenodd\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-miterlimit=\"2\"\r\n    alt=\"This is an image placeholder\">\r\n    <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n    <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n    <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n    <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n  </svg>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"c-upload-file d-flex align-items-center justify-content-between\">\r\n    <svg\r\n      width=\"64\"\r\n      height=\"64\"\r\n      viewBox=\"0 0 1280 1280\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      fill-rule=\"evenodd\"\r\n      clip-rule=\"evenodd\"\r\n      stroke-linejoin=\"round\"\r\n      stroke-miterlimit=\"2\"\r\n      alt=\"This is an image placeholder\">\r\n      <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n      <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n      <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n      <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n    </svg>\r\n  </div>\r\n}\r\n", styles: [".c-upload-file{border:1px solid #d3d3d3;padding:5px;color:#afafaf}.c-upload-file .material-icons{font-size:20px!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UploadControl, isStandalone: true, selector: "upload-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <svg\r\n    width=\"64\"\r\n    height=\"64\"\r\n    viewBox=\"0 0 1280 1280\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    fill-rule=\"evenodd\"\r\n    clip-rule=\"evenodd\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-miterlimit=\"2\"\r\n    alt=\"This is an image placeholder\">\r\n    <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n    <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n    <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n    <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n  </svg>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"c-upload-file d-flex align-items-center justify-content-between\">\r\n    <svg\r\n      width=\"64\"\r\n      height=\"64\"\r\n      viewBox=\"0 0 1280 1280\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      fill-rule=\"evenodd\"\r\n      clip-rule=\"evenodd\"\r\n      stroke-linejoin=\"round\"\r\n      stroke-miterlimit=\"2\"\r\n      alt=\"This is an image placeholder\">\r\n      <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n      <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n      <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n      <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n    </svg>\r\n  </div>\r\n}\r\n", styles: [".c-upload-file{border:1px solid var(--md-sys-color-outline-variant);padding:5px;color:#afafaf}.c-upload-file .material-icons{font-size:20px!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadControl, decorators: [{
             type: Component,
-            args: [{ selector: 'upload-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <svg\r\n    width=\"64\"\r\n    height=\"64\"\r\n    viewBox=\"0 0 1280 1280\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    fill-rule=\"evenodd\"\r\n    clip-rule=\"evenodd\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-miterlimit=\"2\"\r\n    alt=\"This is an image placeholder\">\r\n    <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n    <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n    <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n    <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n  </svg>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"c-upload-file d-flex align-items-center justify-content-between\">\r\n    <svg\r\n      width=\"64\"\r\n      height=\"64\"\r\n      viewBox=\"0 0 1280 1280\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      fill-rule=\"evenodd\"\r\n      clip-rule=\"evenodd\"\r\n      stroke-linejoin=\"round\"\r\n      stroke-miterlimit=\"2\"\r\n      alt=\"This is an image placeholder\">\r\n      <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n      <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n      <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n      <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n    </svg>\r\n  </div>\r\n}\r\n", styles: [".c-upload-file{border:1px solid #d3d3d3;padding:5px;color:#afafaf}.c-upload-file .material-icons{font-size:20px!important}\n"] }]
+            args: [{ selector: 'upload-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (component.properties?.viewed) {\r\n  <div class=\"d-block T12R text-secondary\">\r\n    {{ component.label }}\r\n  </div>\r\n  <svg\r\n    width=\"64\"\r\n    height=\"64\"\r\n    viewBox=\"0 0 1280 1280\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    fill-rule=\"evenodd\"\r\n    clip-rule=\"evenodd\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-miterlimit=\"2\"\r\n    alt=\"This is an image placeholder\">\r\n    <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n    <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n    <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n    <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n  </svg>\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  <div class=\"c-upload-file d-flex align-items-center justify-content-between\">\r\n    <svg\r\n      width=\"64\"\r\n      height=\"64\"\r\n      viewBox=\"0 0 1280 1280\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      fill-rule=\"evenodd\"\r\n      clip-rule=\"evenodd\"\r\n      stroke-linejoin=\"round\"\r\n      stroke-miterlimit=\"2\"\r\n      alt=\"This is an image placeholder\">\r\n      <path fill=\"#e5e9ed\" d=\"M0 0h1280v1280H0z\"></path>\r\n      <path d=\"M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z\" fill=\"#cad3db\"></path>\r\n      <path d=\"M810 770H480v-60l100-170 130 170 100-65v125z\" fill=\"#cad3db\"></path>\r\n      <circle cx=\"750\" cy=\"550\" r=\"50\" fill=\"#cad3db\" transform=\"translate(10 10)\"></circle>\r\n    </svg>\r\n  </div>\r\n}\r\n", styles: [".c-upload-file{border:1px solid var(--md-sys-color-outline-variant);padding:5px;color:#afafaf}.c-upload-file .material-icons{font-size:20px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
@@ -5433,6 +5403,20 @@ class AttributeTable {
         };
         this.modal?.open();
     };
+    // Map column type → Material Symbol icon (per design handoff form-builder redesign).
+    columnTypeIcons = {
+        string: 'text_fields',
+        number: '123',
+        boolean: 'check_box',
+        bool: 'check_box',
+        date: 'event',
+        datetime: 'calendar_month',
+        radio: 'radio_button_checked',
+        values: 'arrow_drop_down_circle',
+        image: 'image',
+        file: 'attach_file',
+    };
+    columnTypeSymbol = (type) => this.columnTypeIcons[type || 'string'] ?? 'text_fields';
     selectedIdx = 0;
     editColumn = (idx) => {
         if (this.columns[idx]) {
@@ -5462,8 +5446,8 @@ 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 }], 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: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (tables.length) {\r\n    <!-- <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u c\u1ED9t</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\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    </div> -->\r\n    <sd-autocomplete\r\n        class=\"py-8\"\r\n        label=\"D\u1EEF li\u1EC7u c\u1ED9t\"\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=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">Danh s\u00E1ch c\u1ED9t</div>\r\n      @for (item of columns; track item.key; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-4\" style=\"gap: 4px; justify-content: space-between\">\r\n          <div class=\"d-flex flex-column\">\r\n            <sd-label [label]=\"item.label\" [required]=\"item.validate?.required\"></sd-label>\r\n            <div class=\"T12R text-secondary\">{{ item.key }}</div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px\">\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'edit'\" (click)=\"editColumn(idx)\"></mat-icon>\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'cancel'\" (click)=\"removeColumn(idx)\"></mat-icon>\r\n          </div>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm c\u1ED9t\" (click)=\"addColumn()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh c\u1ED9t\" width=\"600px\">\r\n  @if (column) {\r\n    <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n      <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"column.key\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"T\u00EAn c\u1ED9t\" [(model)]=\"column.label\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"Chi\u1EC1u r\u1ED9ng\" [(model)]=\"column.width\"></attribute-input>\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"column.validate!.required\"></attribute-switch>\r\n      <attribute-select [form]=\"form\" label=\"Lo\u1EA1i d\u1EEF li\u1EC7u\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\r\n    </sd-section>\r\n    @if (column.type === 'boolean') {\r\n      <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"info\">\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi TRUE\" [(model)]=\"column.displayOnTrue\"></attribute-input>\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi FALSE\" [(model)]=\"column.displayOnFalse\"></attribute-input>\r\n      </sd-section>\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      <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n        <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\r\n      </sd-section>\r\n    }\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"L\u01B0u\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { 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", "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: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["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"] }] });
+    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 ɵ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", "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: [{
             type: Component,
@@ -5473,15 +5457,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdLabel,
                         SdAutocomplete$1,
                         SdButton,
-                        SdSection,
                         SdModal,
                         AttributeSelection,
                         AttributeInput,
                         AttributeSelect,
                         AttributeSwitch,
-                        AttributeParameter
-                    ], template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (tables.length) {\r\n    <!-- <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u c\u1ED9t</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\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    </div> -->\r\n    <sd-autocomplete\r\n        class=\"py-8\"\r\n        label=\"D\u1EEF li\u1EC7u c\u1ED9t\"\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=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">Danh s\u00E1ch c\u1ED9t</div>\r\n      @for (item of columns; track item.key; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-4\" style=\"gap: 4px; justify-content: space-between\">\r\n          <div class=\"d-flex flex-column\">\r\n            <sd-label [label]=\"item.label\" [required]=\"item.validate?.required\"></sd-label>\r\n            <div class=\"T12R text-secondary\">{{ item.key }}</div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px\">\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'edit'\" (click)=\"editColumn(idx)\"></mat-icon>\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'cancel'\" (click)=\"removeColumn(idx)\"></mat-icon>\r\n          </div>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm c\u1ED9t\" (click)=\"addColumn()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh c\u1ED9t\" width=\"600px\">\r\n  @if (column) {\r\n    <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n      <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"column.key\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"T\u00EAn c\u1ED9t\" [(model)]=\"column.label\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"Chi\u1EC1u r\u1ED9ng\" [(model)]=\"column.width\"></attribute-input>\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"column.validate!.required\"></attribute-switch>\r\n      <attribute-select [form]=\"form\" label=\"Lo\u1EA1i d\u1EEF li\u1EC7u\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\r\n    </sd-section>\r\n    @if (column.type === 'boolean') {\r\n      <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"info\">\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi TRUE\" [(model)]=\"column.displayOnTrue\"></attribute-input>\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi FALSE\" [(model)]=\"column.displayOnFalse\"></attribute-input>\r\n      </sd-section>\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      <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n        <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\r\n      </sd-section>\r\n    }\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"L\u01B0u\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n" }]
+                        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: [{
@@ -5558,11 +5543,11 @@ class TableAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableAttribute, isStandalone: true, selector: "table-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-table\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [(columnsKey)]=\"component.columnsKey\"\r\n    [(columns)]=\"component.columns\"\r\n    (columnsKeyChange)=\"onChanges()\"\r\n    (columnsChange)=\"onChanges()\"></attribute-table>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTable, selector: "attribute-table", inputs: ["components", "variables", "columnsKey", "columns"], outputs: ["columnsKeyChange", "columnsChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableAttribute, isStandalone: true, selector: "table-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <attribute-table\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [(columnsKey)]=\"component.columnsKey\"\r\n    [(columns)]=\"component.columns\"\r\n    (columnsKeyChange)=\"onChanges()\"\r\n    (columnsChange)=\"onChanges()\"></attribute-table>\r\n}\r\n", dependencies: [{ kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTable, selector: "attribute-table", inputs: ["components", "variables", "columnsKey", "columns"], outputs: ["columnsKeyChange", "columnsChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableAttribute, decorators: [{
             type: Component,
-            args: [{ selector: 'table-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, AttributeTemplate, AttributeInput, AttributeSwitch, AttributeTable, AttributeExpression], template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-table\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [(columnsKey)]=\"component.columnsKey\"\r\n    [(columns)]=\"component.columns\"\r\n    (columnsKeyChange)=\"onChanges()\"\r\n    (columnsChange)=\"onChanges()\"></attribute-table>\r\n}\r\n" }]
+            args: [{ selector: 'table-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeTemplate, AttributeInput, AttributeSwitch, AttributeTable, AttributeExpression, TranslatePipe], template: "<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-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\r\n  </div>\r\n</details>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\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-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <details class=\"fb-section\" open>\r\n    <summary class=\"fb-section__head\">\r\n      <span class=\"msi\">verified</span>\r\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\r\n      <span class=\"msi chev\">chevron_right</span>\r\n    </summary>\r\n    <div class=\"fb-section__body\">\r\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        [label]=\"'core.component.form-builder.required-when' | translate\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    </div>\r\n  </details>\r\n  <attribute-table\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [(columnsKey)]=\"component.columnsKey\"\r\n    [(columns)]=\"component.columns\"\r\n    (columnsKeyChange)=\"onChanges()\"\r\n    (columnsChange)=\"onChanges()\"></attribute-table>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5602,17 +5587,103 @@ class TableControl {
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
+    columnIcon = (type) => {
+        switch (type) {
+            case 'number':
+                return '123';
+            case 'date':
+            case 'datetime':
+                return 'calendar_month';
+            case 'boolean':
+                return 'check_box';
+            case 'file':
+                return 'attach_file';
+            case 'image':
+                return 'image';
+            case 'values':
+            case 'radio':
+                return 'radio_button_checked';
+            case 'string':
+            default:
+                return 'text_fields';
+        }
+    };
+    sampleRows = () => [0, 1, 2];
+    cellPreview = (column, rowIndex) => {
+        if (rowIndex === 0)
+            return column.key || column.label || '-';
+        if (column.type === 'number')
+            return rowIndex + 1;
+        if (column.type === 'boolean')
+            return rowIndex === 1 ? '✓' : '—';
+        if (column.type === 'date' || column.type === 'datetime')
+            return '12/06/2026';
+        if (column.type === 'file')
+            return '—';
+        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: "@if (component.properties?.viewed) {\r\n  @if (component.columns?.length) {\r\n    <div class=\"c-table\">\r\n      <div class=\"c-header d-flex align-items-center bg-secondary-light\">\r\n        @for (column of component.columns; track column.key) {\r\n          <div class=\"c-item\" [style.width]=\"column.width\">\r\n            {{ column.label }}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"c-content\">\r\n        <div class=\"row-table d-flex align-items-center\">\r\n          @for (column of component.columns; track column.key) {\r\n            <div class=\"c-item text-secondary\" [style.width]=\"column.width\">{{ column.key }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  @if (component.columns?.length) {\r\n    <div class=\"c-table\">\r\n      <div class=\"c-header d-flex align-items-center bg-primary-light\">\r\n        @for (column of component.columns; track column.key) {\r\n          <div class=\"c-item\" [style.width]=\"column.width\">\r\n            {{ column.label }}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"c-content\">\r\n        <div class=\"row-table d-flex align-items-center\">\r\n          @for (column of component.columns; track column.key) {\r\n            <div class=\"c-item text-secondary\" [style.width]=\"column.width\">{{ column.key }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".c-table{border:1px solid #ddd}.c-table .c-header{border:1px solid #ddd;border-bottom:0!important}.c-table .c-header .c-item{font-weight:500}.c-table .c-content{border:1px solid #ddd}.c-table .c-item{border:1px solid #ddd;padding:8px 10px;width:-webkit-fill-available;min-width:75px}.c-table .c-item h .spc{color:#ddd}\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\">\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: [".fb-table-control{display:flex;flex-direction:column;gap:8px;min-width:0;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%;min-width:0;overflow:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff}.fb-table-control__header,.fb-table-control__row{display:flex;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{flex:1 0 136px;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: "@if (component.properties?.viewed) {\r\n  @if (component.columns?.length) {\r\n    <div class=\"c-table\">\r\n      <div class=\"c-header d-flex align-items-center bg-secondary-light\">\r\n        @for (column of component.columns; track column.key) {\r\n          <div class=\"c-item\" [style.width]=\"column.width\">\r\n            {{ column.label }}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"c-content\">\r\n        <div class=\"row-table d-flex align-items-center\">\r\n          @for (column of component.columns; track column.key) {\r\n            <div class=\"c-item text-secondary\" [style.width]=\"column.width\">{{ column.key }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"d-block mb-0 T14M\">\r\n    {{ component.label }}\r\n    @if (component.validate?.required) {\r\n      <span class=\"text-error mb-2\">*</span>\r\n    }\r\n  </div>\r\n  @if (component.columns?.length) {\r\n    <div class=\"c-table\">\r\n      <div class=\"c-header d-flex align-items-center bg-primary-light\">\r\n        @for (column of component.columns; track column.key) {\r\n          <div class=\"c-item\" [style.width]=\"column.width\">\r\n            {{ column.label }}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"c-content\">\r\n        <div class=\"row-table d-flex align-items-center\">\r\n          @for (column of component.columns; track column.key) {\r\n            <div class=\"c-item text-secondary\" [style.width]=\"column.width\">{{ column.key }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".c-table{border:1px solid #ddd}.c-table .c-header{border:1px solid #ddd;border-bottom:0!important}.c-table .c-header .c-item{font-weight:500}.c-table .c-content{border:1px solid #ddd}.c-table .c-item{border:1px solid #ddd;padding:8px 10px;width:-webkit-fill-available;min-width:75px}.c-table .c-item h .spc{color:#ddd}\n"] }]
+            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: [".fb-table-control{display:flex;flex-direction:column;gap:8px;min-width:0;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%;min-width:0;overflow:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff}.fb-table-control__header,.fb-table-control__row{display:flex;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{flex:1 0 136px;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 }]
             }] } });
 
+const ICON_PRESETS = ['category', 'folder', 'inventory_2', 'group_work', 'workspaces', 'view_quilt'];
+const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'error'];
+class GroupAttribute {
+    // ── constants ────────────────────────────────────────────────────────
+    iconPresets = ICON_PRESETS;
+    colorPresets = COLOR_PRESETS;
+    componentIcons = COMPONENT_ICONS;
+    form = new FormGroup({});
+    // ── signal input ─────────────────────────────────────────────────────
+    /** Required group reference. Mutated in place khi user pick icon/color/expression. */
+    group = input.required();
+    // ── injected services ────────────────────────────────────────────────
+    #builderService = inject(BuilderService);
+    #ref = inject(ChangeDetectorRef);
+    constructor() {
+        // Bảo đảm group có properties + defaults khi input ref thay đổi.
+        // untracked() vì ta mutate group (không phải read signal) — tránh tạo cycle.
+        effect(() => {
+            const g = this.group();
+            untracked(() => {
+                if (!g.properties) {
+                    g.properties = { icon: 'category', color: 'primary' };
+                }
+                else {
+                    g.properties.icon = g.properties.icon || 'category';
+                    g.properties.color = g.properties.color || 'primary';
+                }
+            });
+        });
+    }
+    pickIcon = (icon) => {
+        this.group().properties.icon = icon;
+        this.#builderService.componentEmitters.next(this.group());
+        this.#ref.markForCheck();
+    };
+    pickColor = (color) => {
+        this.group().properties.color = color;
+        this.#builderService.componentEmitters.next(this.group());
+        this.#ref.markForCheck();
+    };
+    symbolForChild = (c) => {
+        return this.componentIcons[c.type]?.symbol ?? 'help';
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GroupAttribute, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GroupAttribute, isStandalone: true, selector: "group-attribute", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let g = group();\r\n\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\" [(model)]=\"g.label\" [label]=\"'core.component.form-builder.label' | translate\"></attribute-input>\r\n\r\n    <div class=\"fb-field\">\r\n      <div class=\"fb-field__label\">{{ 'core.component.form-builder.group-icon' | translate }}</div>\r\n      <div class=\"fb-icon-picker\">\r\n        @for (icon of iconPresets; track icon) {\r\n          <button type=\"button\" class=\"fb-icon-picker__btn\"\r\n                  [class.is-active]=\"g.properties.icon === icon\"\r\n                  (click)=\"pickIcon(icon)\">\r\n            <span class=\"msi\">{{ icon }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-field\">\r\n      <div class=\"fb-field__label\">{{ 'core.component.form-builder.group-accent-color' | translate }}</div>\r\n      <div class=\"fb-color-swatches\">\r\n        @for (color of colorPresets; track color) {\r\n          <span class=\"fb-color-swatch\"\r\n                [class]=\"color\"\r\n                [class.is-active]=\"g.properties.color === color\"\r\n                (click)=\"pickColor(color)\"\r\n                [attr.aria-label]=\"color\"></span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</details>\r\n\r\n<details class=\"fb-section\" open>\r\n  <summary class=\"fb-section__head\">\r\n    <span class=\"msi\">account_tree</span>\r\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.group-children' | translate }}</span>\r\n    <span class=\"msi chev\">chevron_right</span>\r\n  </summary>\r\n  <div class=\"fb-section__body\">\r\n    @if (!g.components?.length) {\r\n      <div class=\"fb-children-empty\">{{ 'core.component.form-builder.group-no-children' | translate }}</div>\r\n    } @else {\r\n      <div class=\"fb-children-list\">\r\n        @for (child of g.components; track child.id) {\r\n          <div class=\"fb-child-row\">\r\n            <span class=\"fb-child-row__icon\"><span class=\"msi\">{{ symbolForChild(child) }}</span></span>\r\n            <span class=\"fb-child-row__label\">{{ child.label }}</span>\r\n            <span class=\"fb-child-row__key\">{{ child.key }}</span>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</details>\r\n\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-expression\r\n      [components]=\"[]\"\r\n      [variables]=\"[]\"\r\n      [(model)]=\"g.properties.visibleWhenExpression\"\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\">\r\n    </attribute-expression>\r\n    <attribute-expression\r\n      [components]=\"[]\"\r\n      [variables]=\"[]\"\r\n      [(model)]=\"g.properties.hiddenWhenExpression\"\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\">\r\n    </attribute-expression>\r\n  </div>\r\n</details>\r\n", styles: [":host{display:block}.fb-children-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-style:italic;padding:8px 0}\n"], dependencies: [{ kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GroupAttribute, decorators: [{
+            type: Component,
+            args: [{ selector: 'group-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttributeInput, AttributeExpression, TranslatePipe], template: "@let g = group();\r\n\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\" [(model)]=\"g.label\" [label]=\"'core.component.form-builder.label' | translate\"></attribute-input>\r\n\r\n    <div class=\"fb-field\">\r\n      <div class=\"fb-field__label\">{{ 'core.component.form-builder.group-icon' | translate }}</div>\r\n      <div class=\"fb-icon-picker\">\r\n        @for (icon of iconPresets; track icon) {\r\n          <button type=\"button\" class=\"fb-icon-picker__btn\"\r\n                  [class.is-active]=\"g.properties.icon === icon\"\r\n                  (click)=\"pickIcon(icon)\">\r\n            <span class=\"msi\">{{ icon }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-field\">\r\n      <div class=\"fb-field__label\">{{ 'core.component.form-builder.group-accent-color' | translate }}</div>\r\n      <div class=\"fb-color-swatches\">\r\n        @for (color of colorPresets; track color) {\r\n          <span class=\"fb-color-swatch\"\r\n                [class]=\"color\"\r\n                [class.is-active]=\"g.properties.color === color\"\r\n                (click)=\"pickColor(color)\"\r\n                [attr.aria-label]=\"color\"></span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</details>\r\n\r\n<details class=\"fb-section\" open>\r\n  <summary class=\"fb-section__head\">\r\n    <span class=\"msi\">account_tree</span>\r\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.group-children' | translate }}</span>\r\n    <span class=\"msi chev\">chevron_right</span>\r\n  </summary>\r\n  <div class=\"fb-section__body\">\r\n    @if (!g.components?.length) {\r\n      <div class=\"fb-children-empty\">{{ 'core.component.form-builder.group-no-children' | translate }}</div>\r\n    } @else {\r\n      <div class=\"fb-children-list\">\r\n        @for (child of g.components; track child.id) {\r\n          <div class=\"fb-child-row\">\r\n            <span class=\"fb-child-row__icon\"><span class=\"msi\">{{ symbolForChild(child) }}</span></span>\r\n            <span class=\"fb-child-row__label\">{{ child.label }}</span>\r\n            <span class=\"fb-child-row__key\">{{ child.key }}</span>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</details>\r\n\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-expression\r\n      [components]=\"[]\"\r\n      [variables]=\"[]\"\r\n      [(model)]=\"g.properties.visibleWhenExpression\"\r\n      [label]=\"'core.component.form-builder.visible-when' | translate\">\r\n    </attribute-expression>\r\n    <attribute-expression\r\n      [components]=\"[]\"\r\n      [variables]=\"[]\"\r\n      [(model)]=\"g.properties.hiddenWhenExpression\"\r\n      [label]=\"'core.component.form-builder.hidden-when' | translate\">\r\n    </attribute-expression>\r\n  </div>\r\n</details>\r\n", styles: [":host{display:block}.fb-children-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-style:italic;padding:8px 0}\n"] }]
+        }], ctorParameters: () => [] });
+
 const ValidationAlerts = [
     {
         value: 'error',
@@ -5695,13 +5766,15 @@ 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 }], 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=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c l\u1ED7i/c\u1EA3nh b\u00E1o\" 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=\"Lo\u1EA1i th\u00F4ng b\u00E1o\"\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=\"Th\u00F4ng b\u00E1o hi\u1EC3n th\u1ECB\" [(model)]=\"validation.message\" required></sd-input>\r\n          <expression-builder class=\"col-12\" label=\"Bi\u1EC3u th\u1EE9c \u0111i\u1EC1u ki\u1EC7n\" [(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=\"Th\u00EAm x\u00E1c th\u1EF1c\" [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>Bi\u1EC3u th\u1EE9c</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>Ph\u01B0\u01A1ng th\u1EE9c s\u1EB5n c\u00F3</span>\r\n    </button>\r\n  </mat-menu>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (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$5.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$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$5.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: ["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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "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", "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: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 ɵ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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "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", "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], template: "<sd-modal title=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c l\u1ED7i/c\u1EA3nh b\u00E1o\" 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=\"Lo\u1EA1i th\u00F4ng b\u00E1o\"\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=\"Th\u00F4ng b\u00E1o hi\u1EC3n th\u1ECB\" [(model)]=\"validation.message\" required></sd-input>\r\n          <expression-builder class=\"col-12\" label=\"Bi\u1EC3u th\u1EE9c \u0111i\u1EC1u ki\u1EC7n\" [(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=\"Th\u00EAm x\u00E1c th\u1EF1c\" [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>Bi\u1EC3u th\u1EE9c</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>Ph\u01B0\u01A1ng th\u1EE9c s\u1EB5n c\u00F3</span>\r\n    </button>\r\n  </mat-menu>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (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"] }]
+            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: [{
@@ -5715,96 +5788,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 class SdFormBuilder extends SdBaseSecureComponent {
-    ref;
-    notifyService;
-    confirmService;
-    builderService;
-    popupViewJSON;
-    popupConfigureVariables;
-    configureValidation;
-    formRender;
+    // ── viewChild signals (Angular 17+) ────────────────────────────────────
+    popupViewJSON = viewChild('popupViewJSON');
+    popupConfigureVariables = viewChild('popupConfigureVariables');
+    configureValidation = viewChild(ConfigureValidationComponent);
+    formRender = viewChild(SdFormRender);
+    // ── injected services ──────────────────────────────────────────────────
+    #ref = inject(ChangeDetectorRef);
+    #notifyService = inject(SdNotifyService);
+    #confirmService = inject(SdConfirmService);
+    #builderService = inject(BuilderService);
+    #i18n = inject(I18nService);
     form = new FormGroup({});
-    constructor(ref, notifyService, confirmService, builderService) {
-        super();
-        this.ref = ref;
-        this.notifyService = notifyService;
-        this.confirmService = confirmService;
-        this.builderService = builderService;
-    }
+    // ── signal inputs ──────────────────────────────────────────────────────
+    /** Input chính: schema form. Mỗi lần ref thay đổi → effect sẽ clone về local arrays. */
+    formGeneric = input(undefined);
+    // ── component registry (immutable) ─────────────────────────────────────
+    formBuilderComponents = FormBuilderComponents;
+    componentIcons = COMPONENT_ICONS;
+    // ── palette state (signal + computed group buckets) ────────────────────
+    paletteSearch = signal('');
+    paletteGroups = computed(() => {
+        const term = this.paletteSearch().trim().toLowerCase();
+        const match = (c) => !term || c.name.toLowerCase().includes(term) || c.type.toLowerCase().includes(term);
+        const buckets = { basic: [], choice: [], advanced: [], layout: [] };
+        for (const c of this.formBuilderComponents) {
+            if (match(c))
+                buckets[c.group].push(c);
+        }
+        return [
+            { key: 'basic', label: 'Basic', items: buckets.basic },
+            { key: 'choice', label: 'Choice', items: buckets.choice },
+            { key: 'advanced', label: 'Advanced', items: buckets.advanced },
+            { key: 'layout', label: 'Layout', items: buckets.layout },
+        ].filter(g => g.items.length > 0);
+    });
+    // ── local mutable state ────────────────────────────────────────────────
+    // Components/variables/validations giữ là plain arrays vì code hiện tại
+    // mutate in-place rất nhiều chỗ (push, splice, forEach …). Đổi sang signal
+    // tốn rủi ro với rất ít lợi ích — chỉ markForCheck() khi cần.
     components = [];
     variables = [];
     validations = [];
-    // @Input('components') set _components(components: (SdFormGenericComponent | SdFormGenericGroup)[] | undefined | null) {
-    //   // Luôn clone components để tránh ảnh hưởng đến tham số truyền vào
-    //   if (Array.isArray(components)) {
-    //     this.components = JSON.parse(JSON.stringify(components));
-    //   } else {
-    //     this.components = [];
-    //   }
-    //   this.#componentsChanges.next();
-    // }
-    // Mỗi lần mở popup thì sử dụng clone variables vào clonedVariables, khi nào bấm ok thì mới gán ngược lại clonedVariables vào variables
+    /** Cloned variables — dùng cho modal "Configure variables" (huỷ thì discard, ok thì gán ngược). */
     clonedVariables = [];
-    // @Input('variables') set _variables(variables: SdFormGenericVariable[] | undefined | null) {
-    //   // Luôn clone components để tránh ảnh hưởng đến tham số truyền vào
-    //   if (Array.isArray(variables)) {
-    //     this.variables = JSON.parse(JSON.stringify(variables));
-    //   } else {
-    //     this.variables = [];
-    //   }
-    //   this.#variablesChanges.next();
-    // }
-    set _formGeneric(formGeneric) {
-        // Luôn clone (JSONS stringfy) để tránh ảnh hưởng đến tham số truyền vào
-        // Xử lý gán components
-        if (Array.isArray(formGeneric?.components)) {
-            this.components = JSON.parse(JSON.stringify(formGeneric?.components));
-        }
-        else {
-            this.components = [];
-        }
-        this.#componentsChanges.next();
-        // Xử lý gán variables
-        if (Array.isArray(formGeneric?.variables)) {
-            this.variables = JSON.parse(JSON.stringify(formGeneric?.variables));
-        }
-        else {
-            this.variables = [];
-        }
-        this.#variablesChanges.next();
-        // Xử lý gán validations
-        if (Array.isArray(formGeneric?.validations)) {
-            this.validations = JSON.parse(JSON.stringify(formGeneric?.validations));
-        }
-        else {
-            this.validations = [];
-        }
-        this.#validationsChanges.next();
-    }
-    formBuilderComponents = FormBuilderComponents;
-    selectedComponent;
+    selectedComponent = signal(undefined);
+    isPreview = signal(false);
+    /** Signal toàn cục: TRUE khi BẤT KỲ cdkDrag nào đang active (palette, canvas, group, resize).
+     *  Trigger class `.fb-shell--dragging` để ẩn hover/actions/resize toàn diện, không phụ thuộc :has(). */
+    isAnyDragging = signal(false);
     expand = true;
     dragDropRows = [];
     isDragging = false;
     targetItem = undefined;
+    lastDragPointer;
+    /** Handler chung cho mọi cdkDragStarted — set signal global true. */
+    onAnyDragStarted = () => {
+        this.isAnyDragging.set(true);
+    };
+    onAnyDragMoved = (event) => {
+        this.lastDragPointer = event.pointerPosition;
+        const rowEl = document
+            .elementFromPoint(event.pointerPosition.x, event.pointerPosition.y)
+            ?.closest('.fb-row');
+        const rowIndex = rowEl?.id?.startsWith('row_') ? Number(rowEl.id.replace('row_', '')) : NaN;
+        const row = Number.isNaN(rowIndex) ? undefined : this.dragDropRows.find(t => t.rowIndex === rowIndex);
+        if (row && this.targetItem !== row) {
+            this.targetItem = row;
+            this.#ref.markForCheck();
+        }
+    };
+    /** Handler chung cho mọi cdkDragEnded — set signal global false (dùng setTimeout 0
+     *  để chờ CDK xử lý xong drop event trước khi UI re-enable). */
+    onAnyDragEnded = () => {
+        setTimeout(() => {
+            this.isAnyDragging.set(false);
+            this.lastDragPointer = undefined;
+            this.targetItem = undefined;
+            this.#ref.markForCheck();
+        }, 0);
+    };
     #componentsChanges = new Subject();
     #variablesChanges = new Subject();
     #validationsChanges = new Subject();
     #subscription = new Subscription();
-    isPreview = false;
+    constructor() {
+        super();
+        // Khi input `formGeneric` ref thay đổi: clone components/variables/validations
+        // sang local arrays và bắn subject tương ứng cho stream debounced (syncRows).
+        // untracked() bao bọc các mutation để không tạo cycle (effect chỉ tracks formGeneric()).
+        effect(() => {
+            const fg = this.formGeneric();
+            untracked(() => {
+                this.components = Array.isArray(fg?.components) ? JSON.parse(JSON.stringify(fg.components)) : [];
+                this.variables = Array.isArray(fg?.variables) ? JSON.parse(JSON.stringify(fg.variables)) : [];
+                this.validations = Array.isArray(fg?.validations) ? JSON.parse(JSON.stringify(fg.validations)) : [];
+                this.#componentsChanges.next();
+                this.#variablesChanges.next();
+                this.#validationsChanges.next();
+            });
+        });
+    }
     ngOnInit() {
         this.#subscription.add(this.#componentsChanges.pipe(debounceTime(200), startWith('')).subscribe(() => {
-            // Khi component thay đổi thì sync lại
             this.#syncComponentsToRows();
-            this.ref.markForCheck();
+            this.#ref.markForCheck();
         }));
         this.#subscription.add(this.#variablesChanges.pipe(debounceTime(200), startWith('')).subscribe(() => {
-            // Khi component thay đổi thì sync lại
-            this.ref.markForCheck();
+            this.#ref.markForCheck();
         }));
         this.#subscription.add(this.#validationsChanges.pipe(debounceTime(200), startWith('')).subscribe(() => {
-            // Khi component thay đổi thì sync lại
-            this.ref.markForCheck();
+            this.#ref.markForCheck();
         }));
     }
     ngOnDestroy() {
@@ -5812,52 +5906,177 @@ class SdFormBuilder extends SdBaseSecureComponent {
     }
     addComponent = (item, index) => {
         const id = GenerateId();
-        const key = GenerateKey();
-        const formRenderComponent = {
-            id,
-            key,
-            type: item.type,
-            label: item.type,
-            layout: {
-                columns: '12',
-            },
-            validate: {
-                required: false,
-            },
-            disabled: false,
-            properties: {},
-        };
+        let newComponent;
+        if (item.type === 'group') {
+            // Group là layout container, không có key/validate; có nested components[] + properties{icon,color}.
+            newComponent = {
+                id,
+                type: 'group',
+                label: 'Group',
+                layout: { columns: '12' },
+                components: [],
+                properties: {
+                    icon: item.symbol || 'category',
+                    color: 'primary',
+                },
+            };
+        }
+        else if (item.type === 'break') {
+            // Break: 12-col luôn, đóng vai trò row separator cố định. Extend base nên có key
+            // (auto-gen cho stability) nhưng không hiển thị trong attribute panel.
+            newComponent = {
+                id,
+                key: GenerateKey(),
+                type: 'break',
+                label: 'Break',
+                layout: { columns: '12' },
+                validate: {},
+                disabled: false,
+                properties: {},
+            };
+        }
+        else {
+            newComponent = {
+                id,
+                key: GenerateKey(),
+                type: item.type,
+                label: item.type,
+                layout: { columns: '12' },
+                validate: { required: false },
+                disabled: false,
+                properties: {},
+            };
+        }
         if (index !== undefined) {
-            this.components.splice(index, 0, formRenderComponent);
+            this.components.splice(index, 0, newComponent);
         }
         else {
-            this.components.push(formRenderComponent);
+            this.components.push(newComponent);
         }
         this.#recountTabIndex();
-        this.selectedComponent = this.components?.find(component => component.id === id);
-        this.selectComponent(this.selectedComponent);
-        this.ref.markForCheck();
+        const created = this.components?.find(component => component.id === id);
+        this.selectedComponent.set(created);
+        this.selectComponent(created);
+        this.#ref.markForCheck();
+    };
+    // ── Helpers cho UI mới ────────────────────────────────────────
+    /** Symbol Material để render trên canvas item / attribute header. */
+    symbolFor = (item) => {
+        if (item.type === 'group')
+            return item.properties?.icon || 'category';
+        return this.componentIcons[item.type]?.symbol ?? 'help';
+    };
+    /** Human-readable type label (e.g. "Text field", "Date"). */
+    typeLabelFor = (item) => {
+        return this.componentIcons[item.type]?.label ?? item.type;
+    };
+    /** True nếu component có expression điều kiện — drives the "conditional" status chip. */
+    hasConditional = (item) => {
+        const p = item.properties || {};
+        return !!(p.visibleWhenExpression || p.hiddenWhenExpression || p.disabledWhenExpression || p.requiredWhenExpression);
+    };
+    /** Map SdColor preset → 2 CSS var names cho header-bg và header-fg của group card. */
+    groupColorVars = (color) => {
+        switch (color) {
+            case 'secondary':
+                return { bg: 'var(--md-sys-color-secondary-container)', fg: 'var(--md-sys-color-on-secondary-container)' };
+            case 'success':
+                return { bg: 'var(--md-sys-color-success-container)', fg: 'var(--md-sys-color-success)' };
+            case 'warning':
+                return { bg: 'var(--md-sys-color-warning-container)', fg: 'var(--md-sys-color-warning)' };
+            case 'error':
+                return { bg: 'var(--md-sys-color-error-container)', fg: 'var(--md-sys-color-error)' };
+            case 'primary':
+            default:
+                return { bg: 'var(--md-sys-color-primary-container)', fg: 'var(--md-sys-color-primary)' };
+        }
+    };
+    /** Segmented Design/Preview toggle (replaces play_circle/stop_circle). */
+    setMode = (preview) => {
+        this.isPreview.set(preview);
+    };
+    /** Nested drop handler — when dragging a palette item or canvas item INTO a group body. */
+    dropInGroup = (event, group) => {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            return;
+        }
+        const dropped = event.previousContainer.data[event.previousIndex];
+        if (dropped && 'symbol' in dropped) {
+            // Palette → group: tạo component mới rồi push vào group.components.
+            const item = dropped;
+            if (item.type === 'group') {
+                this.#notifyService.warning('Group lồng group chưa được hỗ trợ.');
+                return;
+            }
+            const newComponent = this.#createComponentFromPalette(item);
+            group.components.splice(event.currentIndex, 0, newComponent);
+            this.selectedComponent.set(newComponent);
+            this.#ref.markForCheck();
+        }
+        else {
+            // Canvas → group: chuyển instance hiện có.
+            const component = dropped;
+            if (component.type === 'group') {
+                this.#notifyService.warning('Group lồng group chưa được hỗ trợ.');
+                return;
+            }
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            this.#syncRowsToComponents();
+        }
+    };
+    /** Quick-add break sau row chỉ định.
+     *  Tính component index cuối cùng của row đó trong this.components, splice break vào sau.
+     *  Không qua palette — chỉ là utility action bám theo row trên canvas.
+     */
+    insertBreakAfter = (row) => {
+        const lastItemId = row.items[row.items.length - 1]?.id;
+        const insertAfter = lastItemId ? this.components.findIndex(c => c.id === lastItemId) : this.components.length - 1;
+        const newBreak = {
+            id: GenerateId(),
+            key: GenerateKey(),
+            type: 'break',
+            label: 'Break',
+            layout: { columns: '12' },
+            validate: {},
+            disabled: false,
+            properties: {},
+        };
+        this.components.splice(insertAfter + 1, 0, newBreak);
+        this.#recountTabIndex();
+        this.#ref.markForCheck();
+    };
+    /** Remove a child component from a group's nested list. */
+    removeFromGroup = (group, id) => {
+        group.components = group.components.filter(c => c.id !== id);
+        if (this.selectedComponent()?.id === id)
+            this.selectedComponent.set(undefined);
+        this.#ref.markForCheck();
     };
     removeComponent = (id) => {
         this.components = this.components.filter((t) => t.id !== id);
         this.#recountTabIndex();
     };
     selectComponent = (item) => {
-        this.selectedComponent = item;
-        this.ref.markForCheck();
+        this.selectedComponent.set(item);
+        this.#ref.markForCheck();
     };
     onClickedOutside = (e) => {
         const classList = e.target.classList;
         if (!classList.length || classList.contains('components') || classList.contains('cdk-drop-list')) {
-            this.selectedComponent = undefined;
+            this.selectedComponent.set(undefined);
         }
     };
     clickFormContentEmpty = () => {
         if (!this.dragDropRows?.length) {
-            this.selectedComponent = undefined;
+            this.selectedComponent.set(undefined);
         }
     };
     drop = (event) => {
+        if (this.#dropIntoGroupAtPointer(event)) {
+            this.#recountTabIndex();
+            return;
+        }
         if (event.previousContainer === event.container) {
             moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
             this.#syncRowsToComponents();
@@ -5872,7 +6091,7 @@ class SdFormBuilder extends SdBaseSecureComponent {
         }
         else {
             const drop = event.previousContainer.data[0];
-            if ('icon' in drop) {
+            if (drop && 'symbol' in drop) {
                 // transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
                 const droppedItem = event.previousContainer.data[event.previousIndex];
                 const rowIndex = event.currentIndex;
@@ -5898,8 +6117,9 @@ class SdFormBuilder extends SdBaseSecureComponent {
         this.isDragging = false;
     };
     onMouseover = (event, rowItem) => {
-        if (this.isDragging) {
+        if (this.isDragging && this.targetItem !== rowItem) {
             this.targetItem = rowItem;
+            this.#ref.markForCheck();
         }
     };
     // Mouseover thì phải có Focus không thì thẻ sẽ báo lỗi
@@ -5923,7 +6143,7 @@ class SdFormBuilder extends SdBaseSecureComponent {
                     this.#syncRowsToComponents();
                 }
                 else {
-                    this.notifyService.warning('Không thể di chuyển tới dòng này vì tổng kích thước vượt quá 12 cột');
+                    this.#notifyService.warning(this.#i18n.t('core.component.form-builder.row-overflow'));
                 }
             }
         }
@@ -5946,8 +6166,9 @@ class SdFormBuilder extends SdBaseSecureComponent {
                 };
             }
         });
-        if (this.selectedComponent && this.selectedComponent?.layout?.row) {
-            this.selectedComponent.layout.row = this.components.find(t => t.id === this.selectedComponent?.id)?.layout?.row;
+        const sel = this.selectedComponent();
+        if (sel && sel?.layout?.row) {
+            sel.layout.row = this.components.find(t => t.id === sel.id)?.layout?.row;
         }
         this.#syncComponentsToRows();
     };
@@ -5982,6 +6203,94 @@ class SdFormBuilder extends SdBaseSecureComponent {
         // rải data ma trận droplist => schema.components
         this.components = this.dragDropRows?.map(e => e.items)?.reduce((current, next) => [...current, ...next], []) || [];
     };
+    #createComponentFromPalette = (item) => {
+        const id = GenerateId();
+        if (item.type === 'group') {
+            return {
+                id,
+                type: 'group',
+                label: 'Group',
+                layout: { columns: '12' },
+                components: [],
+                properties: {
+                    icon: item.symbol || 'category',
+                    color: 'primary',
+                },
+            };
+        }
+        if (item.type === 'break') {
+            return {
+                id,
+                key: GenerateKey(),
+                type: 'break',
+                label: 'Break',
+                layout: { columns: '12' },
+                validate: {},
+                disabled: false,
+                properties: {},
+            };
+        }
+        return {
+            id,
+            key: GenerateKey(),
+            type: item.type,
+            label: item.type,
+            layout: { columns: '12' },
+            validate: { required: false },
+            disabled: false,
+            properties: {},
+        };
+    };
+    #dropIntoGroupAtPointer = (event) => {
+        const dropPoint = event.dropPoint || this.lastDragPointer;
+        if (!dropPoint)
+            return false;
+        const bodyEl = document.elementFromPoint(dropPoint.x, dropPoint.y)?.closest('.fb-group__body');
+        const groupEl = bodyEl?.closest('.fb-group');
+        const group = groupEl?.id ? this.#findGroupById(groupEl.id) : undefined;
+        if (!group || event.container.data === group.components)
+            return false;
+        const dropped = event.previousContainer.data[event.previousIndex];
+        if (!dropped)
+            return false;
+        if ('symbol' in dropped) {
+            const paletteItem = dropped;
+            if (paletteItem.type === 'group') {
+                this.#notifyService.warning('Group lồng group chưa được hỗ trợ.');
+                return true;
+            }
+            const created = this.#createComponentFromPalette(paletteItem);
+            group.components.push(created);
+            this.selectedComponent.set(created);
+        }
+        else {
+            if (!('type' in dropped))
+                return false;
+            const component = dropped;
+            if (component.type === 'group') {
+                this.#notifyService.warning('Group lồng group chưa được hỗ trợ.');
+                return true;
+            }
+            transferArrayItem(event.previousContainer.data, group.components, event.previousIndex, group.components.length);
+            this.#syncRowsToComponents();
+            this.selectedComponent.set(component);
+        }
+        this.#ref.markForCheck();
+        return true;
+    };
+    #findGroupById = (id, items = this.components) => {
+        for (const item of items) {
+            if (item.type === 'group') {
+                const group = item;
+                if (group.id === id)
+                    return group;
+                const nested = this.#findGroupById(id, group.components || []);
+                if (nested)
+                    return nested;
+            }
+        }
+        return undefined;
+    };
     changeSizeControl = async (event, item, items, currentIndex) => {
         // const totalColumnInRow = items.map(k => k.layout.columns).reduce((acc, curr) => acc + parseInt(curr, 0), 0);
         const totalColumnBeforeItem = items
@@ -5997,14 +6306,10 @@ class SdFormBuilder extends SdBaseSecureComponent {
         const right = rect.right - left;
         const mouse = event.pointerPosition.x - left;
         const t = Math.round(12 / (100 / ((100 * mouse) / right))) - totalColumnBeforeItem;
-        if (t > 12) {
-            item.layout.columns = '12';
-        }
-        else if (t < 2) {
-            item.layout.columns = '2';
-        }
-        else {
-            item.layout.columns = `${t}`;
+        // Clamp + skip-if-unchanged để tránh re-render mỗi pixel mouse di chuyển.
+        const newCols = t > 12 ? '12' : t < 2 ? '2' : `${t}`;
+        if (item.layout.columns !== newCols) {
+            item.layout.columns = newCols;
         }
         //     document.getElementById('test').innerHTML = `<pre>
         // left: ${left}
@@ -6019,15 +6324,44 @@ class SdFormBuilder extends SdBaseSecureComponent {
     dragEndChangeSizeControl = (event) => {
         this.#recountTabIndex();
     };
+    /** Resize a child item INSIDE a group.
+     *  Math: lấy bounding của chính item, tính (mouse.x - item.left) / colWidth = newCols.
+     *  Cách này đúng cho cả flex-wrap (item ở wrap row 2+) vì dùng item-relative,
+     *  không phải sum-of-all-preceding-cols (sai khi item wrap xuống row mới).
+     */
+    changeSizeChildInGroup = (event, child, group) => {
+        const groupEl = document.getElementById(group.id);
+        const bodyEl = groupEl?.querySelector('.fb-group__body');
+        const childEl = document.getElementById(child.id);
+        if (!bodyEl || !childEl)
+            return;
+        const bodyRect = bodyEl.getBoundingClientRect();
+        const childRect = childEl.getBoundingClientRect();
+        // Width của 1 col trong group body (loại trừ padding nếu có).
+        const bodyStyle = getComputedStyle(bodyEl);
+        const padL = parseFloat(bodyStyle.paddingLeft) || 0;
+        const padR = parseFloat(bodyStyle.paddingRight) || 0;
+        const colWidth = (bodyRect.width - padL - padR) / 12;
+        if (colWidth <= 0)
+            return;
+        // Mới: new right edge = mouse.x; new width = mouse.x - child.left
+        const newWidth = event.pointerPosition.x - childRect.left;
+        let newCols = Math.round(newWidth / colWidth);
+        if (newCols < 2)
+            newCols = 2;
+        if (newCols > 12)
+            newCols = 12;
+        child.layout.columns = `${newCols}`;
+    };
     onChangeViewed = (component) => {
         component.properties.viewed = !component.properties.viewed;
         // Emit khi có sự thay đổi để control và attribute lắng nghe và render lại
-        this.builderService.componentEmitters.next(component);
+        this.#builderService.componentEmitters.next(component);
     };
     onChangeHidden = (component) => {
         component.properties.hidden = !component.properties.hidden;
         // Emit khi có sự thay đổi để control và attribute lắng nghe và render lại
-        this.builderService.componentEmitters.next(component);
+        this.#builderService.componentEmitters.next(component);
     };
     // Duplicate component nhưng sẽ clear id và key để tránh trùng lặp
     onDuplicate = (component) => {
@@ -6036,16 +6370,17 @@ class SdFormBuilder extends SdBaseSecureComponent {
         clonedComponent.key = GenerateKey();
         this.components.push(clonedComponent);
         this.#recountTabIndex();
-        this.selectedComponent = this.components?.find(t => t.id === clonedComponent.id);
-        this.selectComponent(this.selectedComponent);
-        this.ref.markForCheck();
+        const created = this.components?.find(t => t.id === clonedComponent.id);
+        this.selectedComponent.set(created);
+        this.selectComponent(created);
+        this.#ref.markForCheck();
     };
     // Copy form hiện tại
     jsonString;
     viewJSON = () => {
         this.jsonString = JSON.stringify({ components: this.components });
-        this.popupViewJSON?.open();
-        this.ref.markForCheck();
+        this.popupViewJSON()?.open();
+        this.#ref.markForCheck();
     };
     updateJSON = () => {
         try {
@@ -6053,9 +6388,9 @@ class SdFormBuilder extends SdBaseSecureComponent {
                 const json = JSON.parse(this.jsonString);
                 if ('components' in json) {
                     this.components = json['components'];
-                    this.popupViewJSON?.close();
+                    this.popupViewJSON()?.close();
                     this.#syncComponentsToRows();
-                    this.ref.markForCheck();
+                    this.#ref.markForCheck();
                 }
                 else {
                     throw new Error('Invalid JSON');
@@ -6064,13 +6399,13 @@ class SdFormBuilder extends SdBaseSecureComponent {
         }
         catch (err) {
             console.error(err);
-            this.notifyService.warning(err?.message);
+            this.#notifyService.warning(err?.message);
         }
     };
     configureVariables = () => {
         this.clonedVariables = JSON.parse(JSON.stringify(this.variables || []));
-        this.popupConfigureVariables?.open();
-        this.ref.markForCheck();
+        this.popupConfigureVariables()?.open();
+        this.#ref.markForCheck();
     };
     addVariables = () => {
         this.clonedVariables.push({
@@ -6086,12 +6421,12 @@ class SdFormBuilder extends SdBaseSecureComponent {
     updateVariables = () => {
         if (this.form.invalid) {
             this.form.markAllAsTouched();
-            this.ref.markForCheck();
+            this.#ref.markForCheck();
             return;
         }
         this.variables = this.clonedVariables;
-        this.popupConfigureVariables?.close();
-        this.ref.markForCheck();
+        this.popupConfigureVariables()?.close();
+        this.#ref.markForCheck();
     };
     // Chìa ra cho bên ngoài lấy components hiện tại
     getComponents = () => {
@@ -6113,33 +6448,31 @@ class SdFormBuilder extends SdBaseSecureComponent {
         };
     };
     openConfigureValidation = () => {
-        this.configureValidation?.open(this.getForm());
+        this.configureValidation()?.open(this.getForm());
     };
     onUpdateValidations = (validations) => {
         this.validations = validations;
     };
     onValidate = async () => {
-        const errorMessages = await this.formRender?.getValidationMessages('error');
+        const errorMessages = await this.formRender()?.getValidationMessages('error');
         if (errorMessages?.length) {
-            this.notifyService.error(errorMessages);
+            this.#notifyService.error(errorMessages);
             return;
         }
-        const warningMessages = await this.formRender?.getValidationMessages('warning');
+        const warningMessages = await this.formRender()?.getValidationMessages('warning');
         if (warningMessages?.length) {
-            this.confirmService.confirm(warningMessages.join(', ')).then(() => {
-                this.notifyService.success('Submit success');
+            this.#confirmService.confirm(warningMessages.join(', ')).then(() => {
+                this.#notifyService.success('Submit success');
             });
         }
         else {
-            this.notifyService.success('Submit success');
+            this.#notifyService.success('Submit success');
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormBuilder, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$6.SdNotifyService }, { token: i1$6.SdConfirmService }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdFormBuilder, isStandalone: true, selector: "sd-form-builder", inputs: { _formGeneric: ["formGeneric", "_formGeneric"] }, viewQueries: [{ propertyName: "popupViewJSON", first: true, predicate: ["popupViewJSON"], descendants: true }, { propertyName: "popupConfigureVariables", first: true, predicate: ["popupConfigureVariables"], descendants: true }, { propertyName: "configureValidation", first: true, predicate: ConfigureValidationComponent, descendants: true }, { propertyName: "formRender", first: true, predicate: SdFormRender, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex form-editor\">\r\n  <div class=\"d-flex flex-column form-menu\">\r\n    <div class=\"c-header\">Components</div>\r\n    <div class=\"component-container\" style=\"flex: 1\">\r\n      <div class=\"form-editor-group\" cdkDropList [cdkDropListData]=\"formBuilderComponents\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n        @for (formBuilderComponent of formBuilderComponents; track formBuilderComponent.type) {\r\n          <div cdkDrag class=\"form-item\" (click)=\"addComponent(formBuilderComponent)\" aria-hidden=\"true\">\r\n            <div class=\"c-form-item\">\r\n              <span [innerHtml]=\"formBuilderComponent.icon | sdSafeHtml\"></span>\r\n              <div class=\"title\">\r\n                {{ formBuilderComponent.name }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-content\">\r\n    <div class=\"c-header d-flex align-items-center justify-content-between\">\r\n      <div>B\u1ED1 c\u1EE5c</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n        <mat-icon matTooltip=\"Xem JSON\" fontIcon=\"code\" (click)=\"viewJSON()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" fontIcon=\"scatter_plot\" (click)=\"configureVariables()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c c\u1EA3nh b\u00E1o/l\u1ED7i\" fontIcon=\"error\" (click)=\"openConfigureValidation()\"></mat-icon>\r\n        <mat-icon\r\n          [matTooltip]=\"isPreview ? 'Tr\u1EDF v\u1EC1 thi\u1EBFt k\u1EBF' : 'Xem th\u1EED'\"\r\n          [fontIcon]=\"isPreview ? 'stop_circle' : 'play_circle'\"\r\n          (click)=\"isPreview = !isPreview\"></mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"p-12 components\" style=\"flex: 1; overflow-y: auto\" id=\"frmComponent\">\r\n      @if (isPreview) {\r\n        <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n        <sd-button title=\"Validate\" (click)=\"onValidate()\"></sd-button>\r\n      } @else {\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          class=\"listY\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\r\n              id=\"row_{{ row.rowIndex }}\"\r\n              class=\"row-item\"\r\n              aria-hidden=\"true\">\r\n              <div class=\"btn-drag-row-item\"><mat-icon matTooltip=\"K\u00E9o l\u00EAn / xu\u1ED1ng\">drag_indicator</mat-icon></div>\r\n              <div\r\n                class=\"c-row-item\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <div\r\n                    cdkDrag\r\n                    [id]=\"item.id\"\r\n                    class=\"component-item column-{{ item.layout?.columns || 12 }}\"\r\n                    [class.active]=\"item.id === selectedComponent?.id\"\r\n                    (click)=\"selectComponent(item)\"\r\n                    (clickOutside)=\"onClickedOutside($event)\"\r\n                    (cdkDragStarted)=\"dragStartComponentItem($event)\"\r\n                    (cdkDragEnded)=\"dragEndComponentItem($event)\"\r\n                    aria-hidden=\"true\">\r\n                    <div class=\"c-component-item\" [class.c-hidden]=\"item.properties?.hidden\">\r\n                      <div class=\"c-actions\">\r\n                        @if (item.type !== 'group') {\r\n                          <mat-icon\r\n                            [matTooltip]=\"item.properties?.viewed ? 'B\u1ECF ch\u1EC9 xem' : 'Ch\u1EC9 xem'\"\r\n                            (click)=\"onChangeViewed(item)\"\r\n                            fontSet=\"material-icons-outlined\"\r\n                            style=\"font-size: 16px; cursor: pointer\"\r\n                            [class.text-warning]=\"item.properties?.viewed\">\r\n                            edit_off\r\n                          </mat-icon>\r\n                        }\r\n                        <mat-icon\r\n                          matTooltip=\"Nh\u00E2n b\u1EA3n\"\r\n                          (click)=\"onDuplicate(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\">\r\n                          content_copy\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          [matTooltip]=\"item.properties?.hidden ? 'Hi\u1EC7n' : '\u1EA8n'\"\r\n                          (click)=\"onChangeHidden(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          [class.text-warning]=\"item.properties?.hidden\">\r\n                          visibility_off\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          matTooltip=\"X\u00F3a\"\r\n                          (click)=\"removeComponent(item.id)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          class=\"text-error\">\r\n                          delete\r\n                        </mat-icon>\r\n                      </div>\r\n                      @if (item.type === 'textfield') {\r\n                        <textfield-control [component]=\"item\"></textfield-control>\r\n                      } @else if (item.type === 'textarea') {\r\n                        <textarea-control [component]=\"item\"></textarea-control>\r\n                      } @else if (item.type === 'chip-string') {\r\n                        <chip-string-control [component]=\"item\"></chip-string-control>\r\n                      } @else if (item.type === 'chip-calendar') {\r\n                        <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n                      } @else if (item.type === 'number') {\r\n                        <number-control [component]=\"item\"></number-control>\r\n                      } @else if (item.type === 'datetime') {\r\n                        <datetime-control [component]=\"item\"></datetime-control>\r\n                      } @else if (item.type === 'select') {\r\n                        <select-control [component]=\"item\"></select-control>\r\n                      } @else if (item.type === 'radio') {\r\n                        <radio-control [component]=\"item\"></radio-control>\r\n                      } @else if (item.type === 'checkbox') {\r\n                        <checkbox-control [component]=\"item\"></checkbox-control>\r\n                      } @else if (item.type === 'html') {\r\n                        <html-control [component]=\"item\" #html></html-control>\r\n                      } @else if (item.type === 'upload') {\r\n                        <upload-control [component]=\"item\"></upload-control>\r\n                      } @else if (item.type === 'table') {\r\n                        <table-control [component]=\"item\"></table-control>\r\n                      }\r\n                      <div class=\"c-item-backdrop\"></div>\r\n                    </div>\r\n                    <div cdkDropList cdkDropListOrientation=\"horizontal\">\r\n                      <div\r\n                        cdkDrag\r\n                        (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                        (cdkDragEnded)=\"dragEndChangeSizeControl($event)\"\r\n                        class=\"c-bar-resize-right\"\r\n                        matTooltip=\"Co d\u00E3n\"></div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-attributes\">\r\n    <div class=\"c-header\">Thu\u1ED9c t\u00EDnh</div>\r\n    @if (selectedComponent) {\r\n      <div class=\"attributes\" style=\"flex: 1\" aria-hidden=\"true\">\r\n        @if (selectedComponent.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textfield-attribute>\r\n        } @else if (selectedComponent.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textarea-attribute>\r\n        } @else if (selectedComponent.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></chip-string-attribute>\r\n        } @else if (selectedComponent.type === 'chip-calendar') {\r\n          <chip-calendar-attribute\r\n            [components]=\"components\"\r\n            [variables]=\"variables\"\r\n            [component]=\"selectedComponent\"></chip-calendar-attribute>\r\n        } @else if (selectedComponent.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></number-attribute>\r\n        } @else if (selectedComponent.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></datetime-attribute>\r\n        } @else if (selectedComponent.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></select-attribute>\r\n        } @else if (selectedComponent.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></radio-attribute>\r\n        } @else if (selectedComponent.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></checkbox-attribute>\r\n        } @else if (selectedComponent.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></html-attribute>\r\n        } @else if (selectedComponent.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></upload-attribute>\r\n        } @else if (selectedComponent.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></table-attribute>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" label=\"Nh\u00E3n hi\u1EC3n th\u1ECB\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">Th\u00EAm bi\u1EBFn</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host::ng-deep .svg{width:40px}:host::ng-deep .mat-form-field.sd-sm.mat-form-field-appearance-outline .mat-form-field-infix input.mat-input-element{margin-top:7px!important}::ng-deep .component-item.cdk-drag-preview .c-component-item{display:none}::ng-deep .component-item.cdk-drag-dragging,::ng-deep .row-item.cdk-drag-dragging{box-shadow:0 4px 8px #0003;border:2px #0e7cfa dashed}::ng-deep .row-item.cdk-drag-preview .c-row-item,::ng-deep .row-item.cdk-drag-preview .btn-drag-row-item{display:none}::ng-deep .form-item.cdk-drag-preview{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item .svg{width:40px}.form-editor{width:100%;height:100%}.form-editor .material-icons{color:#5f6368!important}.form-editor .material-icons:hover{color:#2626b4!important;cursor:pointer!important}.form-editor .c-header{font-weight:500;padding:5px 10px;background-color:#ebebeb;border-bottom:1px solid #d3d3d3;text-transform:uppercase}.form-editor .c-header:last-child{border-right:0!important}.form-editor .c-header a{font-size:12px}.form-editor .form-menu{width:120px}.form-editor .form-menu .component-container{overflow-y:hidden;background:#f6f8fc}.form-editor .form-menu .component-container:hover{overflow-y:auto!important}.form-editor .form-menu .form-editor-group{padding:5px 10px;display:flex;align-items:center;flex-wrap:wrap}.form-editor .form-menu .form-editor-group .form-item{height:68px;display:flex;align-items:center;justify-content:center;font-size:11px;-webkit-user-select:none;user-select:none;color:#333;background:#fff;border:1px solid transparent;width:100px;margin:6px}.form-editor .form-menu .form-editor-group .form-item:hover{background-color:#e7e7e7;border-color:#878b8f;cursor:pointer}.form-editor .form-menu .form-editor-group .form-item .c-form-item{text-align:center}.form-editor .form-menu .form-editor-group .form-item .c-form-item>div.title,.form-editor .form-menu .form-editor-group .form-item .c-form-item>span{text-align:center;white-space:nowrap;font-weight:500}.form-editor .form-content{flex:1;border-right:1px solid #d3d3d3;border-left:1px solid #d3d3d3}.form-editor .form-content .components{background:#fff}.form-editor .form-content .components .row-item{position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.form-editor .form-content .components .row-item:hover{outline:1px dashed #bbb;border-radius:8px}.form-editor .form-content .components .row-item:hover .btn-drag-row-item{display:grid}.form-editor .form-content .components .row-item .btn-drag-row-item{display:none;position:absolute;top:0;left:-12px;height:100%;z-index:2;place-items:center;cursor:grab}.form-editor .form-content .components .row-item .btn-drag-row-item mat-icon{font-size:24px;height:24px;width:24px;box-shadow:0 1px 2px #0000001a;background:#fff}.form-editor .form-content .components .component-item{padding:4px 8px;border:2px dashed transparent;position:relative;min-height:28px;cursor:grab;transition:transform .2s ease,box-shadow .2s ease;display:inline-block;margin:4px;border-radius:8px;vertical-align:bottom}.form-editor .form-content .components .component-item:active{cursor:grabbing;box-shadow:0 4px 8px #0003}.form-editor .form-content .components .component-item:hover{border:2px #0e7cfa dashed}.form-editor .form-content .components .component-item:hover .c-actions{display:flex;flex-direction:row;gap:4px}.form-editor .form-content .components .component-item:hover .c-bar-resize-right{display:block;cursor:w-resize}.form-editor .form-content .components .component-item:hover .c-bar-resize-right.disabled{display:none}.form-editor .form-content .components .component-item .c-component-item{overflow:hidden}.form-editor .form-content .components .component-item .c-actions{display:none;position:absolute;right:4px;z-index:2}.form-editor .form-content .components .component-item .c-bar-resize-right{display:none;width:8px;height:80%;position:absolute;top:10%;right:-5px;outline:2px #0e7cfa solid;border-radius:4px;color:#fff;background:#fff;z-index:2}.form-editor .form-content .components .component-item .c-item-backdrop{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}.form-editor .form-content .components .active{border:2px #0e7cfa solid;outline:1px #0e7cfa solid}.form-editor .form-content .components .column-2{width:calc(16.6666666667% - 8px)}.form-editor .form-content .components .column-3{width:calc(25% - 8px)}.form-editor .form-content .components .column-4{width:calc(33.3333333333% - 8px)}.form-editor .form-content .components .column-5{width:calc(41.6666666667% - 8px)}.form-editor .form-content .components .column-6{width:calc(50% - 8px)}.form-editor .form-content .components .column-7{width:calc(58.3333333333% - 8px)}.form-editor .form-content .components .column-8{width:calc(66.6666666667% - 8px)}.form-editor .form-content .components .column-9{width:calc(75% - 8px)}.form-editor .form-content .components .column-10{width:calc(83.3333333333% - 8px)}.form-editor .form-content .components .column-11{width:calc(91.6666666667% - 8px)}.form-editor .form-content .components .column-12{width:calc(100% - 8px)}.form-editor .form-attributes{width:300px}.form-editor .form-attributes .attributes{overflow-y:auto!important;padding:0 10px;background:#f6f8fc}.form-editor .form-attributes .attributes .group-attribute .title-group{font-weight:500;padding:5px 0;position:relative;cursor:pointer;margin-top:8px}.form-editor .form-attributes .attributes .group-attribute .title-group span{vertical-align:middle;display:inline-block}.form-editor .form-attributes .attributes .group-attribute .title-group mat-icon{vertical-align:middle;position:absolute;right:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute{display:grid;margin-bottom:10px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute label{font-size:12px;font-weight:400;margin:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute input,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute select,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute textarea{border:1px solid #d3d3d3;height:30px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options{padding:5px 0;border-bottom:1px solid #d3d3d3}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options input{width:100%;margin-bottom:5px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options .material-icons{padding-top:22px}.preview-container{margin:0 -24px;position:relative}.preview-container .header-preview{border-bottom:1px solid #eee;padding:10px;font-size:14px;font-weight:500;position:sticky;top:0;background-color:#fff;z-index:9999}.preview-container .header-preview .material-icons:hover{color:#5f6368;cursor:pointer}.preview-container .content{padding:10px}.c-hidden{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.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: "pipe", type: 
-                // Core Pipes
-                SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "component", type: 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdFormBuilder, isStandalone: true, selector: "sd-form-builder", inputs: { formGeneric: { classPropertyName: "formGeneric", publicName: "formGeneric", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popupViewJSON", first: true, predicate: ["popupViewJSON"], descendants: true, isSignal: true }, { propertyName: "popupConfigureVariables", first: true, predicate: ["popupConfigureVariables"], descendants: true, isSignal: true }, { propertyName: "configureValidation", first: true, predicate: ConfigureValidationComponent, descendants: true, isSignal: true }, { propertyName: "formRender", first: true, predicate: SdFormRender, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- cdkDropListGroup: auto-connect t\u1EA5t c\u1EA3 cdkDropList trong palette, canvas rows, group bodies.\r\n     [class.fb-shell--dragging]: JS-driven flag \u0111\u1EC3 \u1EA9n hover/actions/resize to\u00E0n di\u1EC7n\r\n     trong l\u00FAc drag (CSS :has() kh\u00F4ng b\u1EAFt 100% tr\u01B0\u1EDDng h\u1EE3p v\u1EDBi CDK preview clone). -->\r\n<div class=\"fb-shell\" cdkDropListGroup [class.fb-shell--dragging]=\"isAnyDragging()\">\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LEFT PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <aside class=\"fb-palette\">\r\n    <div class=\"fb-panel-header\">\r\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.components' | translate }}</div>\r\n    </div>\r\n\r\n    <!-- Search pill -->\r\n    <div class=\"fb-palette__search\">\r\n      <span class=\"msi\" aria-hidden=\"true\">search</span>\r\n      <input\r\n        type=\"text\"\r\n        [placeholder]=\"'core.component.form-builder.search-components' | translate\"\r\n        [value]=\"paletteSearch()\"\r\n        (input)=\"paletteSearch.set($any($event.target).value)\" />\r\n      <span class=\"kbd\">\u2318K</span>\r\n    </div>\r\n\r\n    <div class=\"fb-palette__scroll\">\r\n      @for (group of paletteGroups(); track group.key) {\r\n        <div class=\"fb-palette__group-label\">{{ group.label }}</div>\r\n        <div\r\n          class=\"fb-palette__list\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.items\"\r\n          [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n          @for (formBuilderComponent of group.items; track formBuilderComponent.type) {\r\n            <div\r\n              cdkDrag\r\n              class=\"fb-palette-item\"\r\n              [matTooltip]=\"formBuilderComponent.name\"\r\n              matTooltipPosition=\"right\"\n              (click)=\"addComponent(formBuilderComponent)\"\n              (cdkDragStarted)=\"onAnyDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              aria-hidden=\"true\">\n              <span class=\"fb-palette-item__icon\"><span class=\"msi\">{{ formBuilderComponent.symbol }}</span></span>\r\n              <span class=\"fb-palette-item__name\">{{ formBuilderComponent.name }}</span>\r\n              <span class=\"fb-palette-item__drag\"><span class=\"msi\">drag_indicator</span></span>\r\n              <!-- Generic drag preview: ch\u1EC9 icon (puck), label \u1EA9n -->\r\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CENTER CANVAS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"fb-canvas\">\r\n    <header class=\"fb-canvas__header\">\r\n      <div class=\"fb-canvas__title\">\r\n        <span>{{ 'core.component.form-builder.layout' | translate }}</span>\r\n      </div>\r\n      <div class=\"fb-canvas__actions\">\r\n        <!-- Toolbar cluster: view JSON / variables / validation -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-icon-btn\"\r\n          [matTooltip]=\"'core.component.form-builder.view-json' | translate\"\r\n          (click)=\"viewJSON()\">\r\n          <span class=\"msi\">data_object</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-icon-btn\"\r\n          [matTooltip]=\"'core.component.form-builder.config-variable' | translate\"\r\n          (click)=\"configureVariables()\">\r\n          <span class=\"msi\">data_array</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-icon-btn\"\r\n          [matTooltip]=\"'core.component.form-builder.config-validation-warning-error' | translate\"\r\n          (click)=\"openConfigureValidation()\">\r\n          <span class=\"msi\">rule</span>\r\n        </button>\r\n\r\n        <span class=\"fb-divider\"></span>\r\n\r\n        <!-- M3 segmented Design/Preview toggle -->\r\n        <div class=\"fb-mode-toggle\" role=\"tablist\">\r\n          <button\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            [class.is-active]=\"!isPreview()\"\r\n            (click)=\"setMode(false)\">\r\n            <span class=\"msi\">edit</span>\r\n            <span>{{ 'core.component.form-builder.design' | translate }}</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            [class.is-active]=\"isPreview()\"\r\n            (click)=\"setMode(true)\">\r\n            <span class=\"msi\">visibility</span>\r\n            <span>{{ 'core.component.form-builder.preview' | translate }}</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </header>\r\n\r\n    <div\r\n      class=\"fb-canvas__body\"\r\n      [class.is-preview]=\"isPreview()\"\r\n      id=\"frmComponent\">\r\n      @if (isPreview()) {\r\n        <!-- \u2500\u2500 Preview mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n        <div class=\"fb-preview-card\">\r\n          <div class=\"fb-preview-card__chip\">\r\n            <span class=\"msi\">visibility</span>\r\n            {{ 'core.component.form-builder.preview-runtime' | translate }}\r\n          </div>\r\n          <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n          <div class=\"fb-preview-card__footer\">\r\n            <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"setMode(false)\"></sd-button>\r\n            <sd-button type=\"fill\" color=\"primary\" [title]=\"'core.component.form-builder.submit' | translate\" (click)=\"onValidate()\"></sd-button>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <!-- \u2500\u2500 Design mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n        @if (!dragDropRows.length) {\r\n          <div class=\"fb-empty\">\r\n            <div class=\"fb-empty__art\"><span class=\"msi\">dashboard_customize</span></div>\r\n            <div class=\"fb-empty__title\">{{ 'core.component.form-builder.empty-title' | translate }}</div>\r\n            <div class=\"fb-empty__hint\">\r\n              {{ 'core.component.form-builder.empty-hint' | translate }}\r\n              <span class=\"fb-empty__kbd\"><span class=\"msi\">keyboard</span>\u2318 K</span>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              class=\"fb-row\"\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\n              (cdkDragStarted)=\"onAnyDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              [class.is-drag-target]=\"targetItem === row\"\n              [id]=\"'row_' + row.rowIndex\"\n              aria-hidden=\"true\">\r\n              <div class=\"fb-row__drag\" [matTooltip]=\"'core.component.form-builder.drag-vertically' | translate\" cdkDragHandle>\r\n                <span class=\"msi\">drag_indicator</span>\r\n              </div>\r\n              <!-- Generic puck preview -->\r\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n              <!-- Quick-add break button \u2014 show on row hover, insert break after this row -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"fb-row-break-btn\"\r\n                [matTooltip]=\"'core.component.form-builder.break' | translate\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"insertBreakAfter(row); $event.stopPropagation()\">\r\n                <span class=\"msi\">horizontal_rule</span>\r\n              </button>\r\n\r\n              <div\r\n                class=\"fb-row__items\"\r\n                style=\"display: flex; flex: 1; gap: var(--gap-2);\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <!-- Group component renders as outlined card with colored header bar -->\r\n                  @if (item.type === 'group') {\r\n                    @let g = $any(item);\r\n                    @let cv = groupColorVars(g.properties?.color);\r\n                    <div\r\n                      cdkDrag\r\n                      [id]=\"item.id\"\r\n                      class=\"fb-group column-{{ item.layout?.columns || 12 }}\"\r\n                      [class.fb-item]=\"false\"\r\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\r\n                      [class.is-hidden]=\"item.properties?.hidden\"\r\n                      [style.flex]=\"'0 0 calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\r\n                      [style.maxWidth]=\"'calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\r\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event); onAnyDragStarted()\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <!-- Generic puck preview -->\r\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                      <!-- cdkDragHandle: ch\u1EC9 cho ph\u00E9p k\u00E9o group qua header \u2014 body free cho click v\u00E0o child. -->\r\n                      <div class=\"fb-group__header\" cdkDragHandle [style.background]=\"cv.bg\" [style.color]=\"cv.fg\">\r\n                        <span class=\"fb-group__icon\"><span class=\"msi\">{{ g.properties?.icon || 'category' }}</span></span>\r\n                        <span class=\"fb-group__label\">{{ item.label }}</span>\r\n                        @if (hasConditional(item)) {\r\n                          <span class=\"fb-group__conditional-chip\">\r\n                            <span class=\"msi\" style=\"font-size: 12px;\">bolt</span>\r\n                            {{ 'core.component.form-builder.conditional' | translate }}\r\n                          </span>\r\n                        }\r\n                        <span class=\"fb-group__count\">{{ g.components?.length || 0 }} fields</span>\r\n                      </div>\r\n                      <!-- Floating action toolbar -->\r\n                      <div class=\"fb-actions\">\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\r\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">content_copy</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.hidden\"\r\n                                [class.on]=\"item.properties?.hidden\"\r\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\r\n                          <span class=\"msi\">delete</span>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <div\n                        class=\"fb-group__body\"\n                        cdkDropList\n                        cdkDropListOrientation=\"horizontal\"\n                        [cdkDropListData]=\"g.components\"\n                        (cdkDropListDropped)=\"dropInGroup($event, g)\">\n                        @if (!g.components?.length) {\r\n                          <div class=\"fb-group__empty\">\r\n                            <span class=\"msi\" style=\"font-size: 16px; margin-right: 6px;\">south</span>\r\n                            {{ 'core.component.form-builder.group-drop-here' | translate }}\r\n                          </div>\r\n                        }\r\n                        @for (child of g.components; track child.id; let ci = $index) {\r\n                          <div\r\n                            cdkDrag\r\n                            [id]=\"child.id\"\r\n                            class=\"fb-item is-child column-{{ child.layout?.columns || 12 }}\"\r\n                            [class.is-selected]=\"child.id === selectedComponent()?.id\"\r\n                            [class.is-hidden]=\"child.properties?.hidden\"\r\n                            [class.is-readonly]=\"child.properties?.viewed\"\r\n                            (click)=\"selectComponent(child); $event.stopPropagation()\"\n                            (cdkDragStarted)=\"onAnyDragStarted()\"\n                            (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                            (cdkDragEnded)=\"onAnyDragEnded()\">\n                            <!-- Generic puck preview -->\r\n                            <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                            <ng-container\r\n                              *ngTemplateOutlet=\"controlTemplate; context: { $implicit: child }\">\r\n                            </ng-container>\r\n                            <!-- Resize handle cho group child \u2014 chia 12-col ngay trong group body.\r\n                                 Wrapping cdkDropList c\u00F3 enterPredicate=false \u0111\u1EC3 KH\u00D4NG nh\u1EADn drop\r\n                                 (ch\u1EC9 d\u00F9ng l\u00E0m context cho cdkDrag), tr\u00E1nh xung \u0111\u1ED9t v\u1EDBi group__body drop list. -->\r\n                            <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n                              <div\r\n                                cdkDrag\r\n                                cdkDragLockAxis=\"x\"\r\n                                class=\"fb-resize\"\r\n                                (cdkDragStarted)=\"onAnyDragStarted()\"\r\n                                (cdkDragMoved)=\"changeSizeChildInGroup($event, child, g)\"\r\n                                (cdkDragEnded)=\"dragEndChangeSizeControl($event); onAnyDragEnded()\"\r\n                                [matTooltip]=\"'core.component.form-builder.flex' | translate\"\r\n                                aria-label=\"resize\"></div>\r\n                            </div>\r\n                            <!-- Inline status chips for nested children -->\r\n                            @if (child.properties?.hidden) {\r\n                              <span class=\"fb-status-chip hidden\">\r\n                                <span class=\"msi\">visibility_off</span>\r\n                                {{ 'core.component.form-builder.hidden' | translate }}\r\n                              </span>\r\n                            } @else if (child.properties?.viewed) {\r\n                              <span class=\"fb-status-chip readonly\">\r\n                                <span class=\"msi\">edit_off</span>\r\n                                {{ 'core.component.form-builder.read-only' | translate }}\r\n                              </span>\r\n                            } @else if (hasConditional(child)) {\r\n                              <span class=\"fb-status-chip conditional\">\r\n                                <span class=\"msi\">bolt</span>\r\n                                {{ 'core.component.form-builder.conditional' | translate }}\r\n                              </span>\r\n                            }\r\n                            <div class=\"fb-actions\">\r\n                              <button type=\"button\" class=\"fb-icon-btn\"\r\n                                      [class.warning]=\"child.properties?.viewed\"\r\n                                      [class.on]=\"child.properties?.viewed\"\r\n                                      [matTooltip]=\"child.properties?.viewed ? ('core.component.form-builder.unset-readonly' | translate) : ('core.component.form-builder.set-readonly' | translate)\"\r\n                                      (click)=\"onChangeViewed(child); $event.stopPropagation()\">\r\n                                <span class=\"msi\">edit_off</span>\r\n                              </button>\r\n                              <button type=\"button\" class=\"fb-icon-btn\"\r\n                                      [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\r\n                                      (click)=\"onDuplicate(child); $event.stopPropagation()\">\r\n                                <span class=\"msi\">content_copy</span>\r\n                              </button>\r\n                              <button type=\"button\" class=\"fb-icon-btn\"\r\n                                      [class.warning]=\"child.properties?.hidden\"\r\n                                      [class.on]=\"child.properties?.hidden\"\r\n                                      [matTooltip]=\"child.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                      (click)=\"onChangeHidden(child); $event.stopPropagation()\">\r\n                                <span class=\"msi\">{{ child.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                              </button>\r\n                              <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                      [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                      (click)=\"removeFromGroup(g, child.id); $event.stopPropagation()\">\r\n                                <span class=\"msi\">delete</span>\r\n                              </button>\r\n                            </div>\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  } @else if (item.type === 'break') {\r\n                    <!-- Break: row separator c\u1ED1 \u0111\u1ECBnh. Render 12-col line, kh\u00F4ng c\u00F3 resize/edit attribute. -->\r\n                    <div\r\n                      cdkDrag\r\n                      [id]=\"item.id\"\r\n                      class=\"fb-item is-break column-12\"\r\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\r\n                      [class.is-hidden]=\"item.properties?.hidden\"\r\n                     (click)=\"selectComponent(item); $event.stopPropagation()\"\n                     (cdkDragStarted)=\"dragStartComponentItem($event); onAnyDragStarted()\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                     (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                     aria-hidden=\"true\">\n                      <!-- Generic puck preview -->\r\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                      <div class=\"fb-break-line\">\r\n                        <span class=\"msi\">horizontal_rule</span>\r\n                        <span class=\"fb-break-label\">{{ 'core.component.form-builder.break' | translate }}</span>\r\n                      </div>\r\n                      <div class=\"fb-actions\">\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.hidden\"\r\n                                [class.on]=\"item.properties?.hidden\"\r\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\r\n                          <span class=\"msi\">delete</span>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <!-- Regular form component -->\r\n                    <div\r\n                      cdkDrag\r\n                      [id]=\"item.id\"\r\n                      class=\"fb-item column-{{ item.layout?.columns || 12 }}\"\r\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\r\n                      [class.is-hidden]=\"item.properties?.hidden\"\r\n                      [class.is-readonly]=\"item.properties?.viewed\"\r\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event); onAnyDragStarted()\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <!-- Generic puck preview -->\r\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n\r\n                      <!-- Status chip (mutually exclusive priority: hidden > readonly > conditional) -->\r\n                      @if (item.properties?.hidden) {\r\n                        <span class=\"fb-status-chip hidden\">\r\n                          <span class=\"msi\">visibility_off</span>\r\n                          {{ 'core.component.form-builder.hidden' | translate }}\r\n                        </span>\r\n                      } @else if (item.properties?.viewed) {\r\n                        <span class=\"fb-status-chip readonly\">\r\n                          <span class=\"msi\">edit_off</span>\r\n                          {{ 'core.component.form-builder.read-only' | translate }}\r\n                        </span>\r\n                      } @else if (hasConditional(item)) {\r\n                        <span class=\"fb-status-chip conditional\">\r\n                          <span class=\"msi\">bolt</span>\r\n                          {{ 'core.component.form-builder.conditional' | translate }}\r\n                        </span>\r\n                      }\r\n\r\n                      <!-- Floating action toolbar pill -->\r\n                      <div class=\"fb-actions\">\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.viewed\"\r\n                                [class.on]=\"item.properties?.viewed\"\r\n                                [matTooltip]=\"item.properties?.viewed ? ('core.component.form-builder.unset-readonly' | translate) : ('core.component.form-builder.set-readonly' | translate)\"\r\n                                (click)=\"onChangeViewed(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">edit_off</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\r\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">content_copy</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.hidden\"\r\n                                [class.on]=\"item.properties?.hidden\"\r\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\r\n                          <span class=\"msi\">delete</span>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"controlTemplate; context: { $implicit: item }\">\r\n                      </ng-container>\r\n\r\n                      <!-- Resize handle (pill) \u2014 cdkDragLockAxis=\"x\" \u0111\u1EC3 ch\u1EC9 k\u00E9o ngang.\r\n                           Wrapping cdkDropList c\u00F3 enterPredicate=false, kh\u00F4ng nh\u1EADn drop. -->\r\n                      <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n                        <div\r\n                          cdkDrag\r\n                          cdkDragLockAxis=\"x\"\r\n                          class=\"fb-resize\"\r\n                          (cdkDragStarted)=\"onAnyDragStarted()\"\r\n                          (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                          (cdkDragEnded)=\"dragEndChangeSizeControl($event); onAnyDragEnded()\"\r\n                          [matTooltip]=\"'core.component.form-builder.flex' | translate\"\r\n                          aria-label=\"resize\"></div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RIGHT ATTRIBUTES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <aside class=\"fb-attrs\">\r\n    <div class=\"fb-panel-header\">\r\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.attribute' | translate }}</div>\r\n    </div>\r\n\r\n    @let sel = selectedComponent();\r\n    @if (sel) {\r\n      <!-- Selection header: type icon + name + key/type -->\r\n      <div class=\"fb-attrs__selection\">\r\n        <span class=\"fb-attrs__sel-icon\"><span class=\"msi\">{{ symbolFor(sel) }}</span></span>\r\n        <div class=\"fb-attrs__sel-meta\">\r\n          <div class=\"fb-attrs__sel-name\">{{ $any(sel).label || ('core.component.form-builder.untitled' | translate) }}</div>\r\n          <div class=\"fb-attrs__sel-key\">\r\n            @if ($any(sel).key) {\r\n              {{ $any(sel).key }} \u00B7 {{ typeLabelFor(sel) }}\r\n            } @else {\r\n              {{ typeLabelFor(sel) }}\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"fb-attrs__body\" aria-hidden=\"true\">\r\n        @if (sel.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></textfield-attribute>\r\n        } @else if (sel.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></textarea-attribute>\r\n        } @else if (sel.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></chip-string-attribute>\r\n        } @else if (sel.type === 'chip-calendar') {\r\n          <chip-calendar-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></chip-calendar-attribute>\r\n        } @else if (sel.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></number-attribute>\r\n        } @else if (sel.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></datetime-attribute>\r\n        } @else if (sel.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></select-attribute>\r\n        } @else if (sel.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></radio-attribute>\r\n        } @else if (sel.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></checkbox-attribute>\r\n        } @else if (sel.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></html-attribute>\r\n        } @else if (sel.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></upload-attribute>\r\n        } @else if (sel.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></table-attribute>\r\n        } @else if (sel.type === 'group') {\r\n          <group-attribute [group]=\"$any(sel)\"></group-attribute>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"fb-attrs__placeholder\">\r\n        <span class=\"msi\">ads_click</span>\r\n        <div class=\"title\">{{ 'core.component.form-builder.no-selection-title' | translate }}</div>\r\n        <div class=\"hint\">{{ 'core.component.form-builder.no-selection-hint' | translate }}</div>\r\n      </div>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Reusable control template \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<ng-template #controlTemplate let-item>\r\n  @if (item.type === 'textfield') {\r\n    <textfield-control [component]=\"item\"></textfield-control>\r\n  } @else if (item.type === 'textarea') {\r\n    <textarea-control [component]=\"item\"></textarea-control>\r\n  } @else if (item.type === 'chip-string') {\r\n    <chip-string-control [component]=\"item\"></chip-string-control>\r\n  } @else if (item.type === 'chip-calendar') {\r\n    <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n  } @else if (item.type === 'number') {\r\n    <number-control [component]=\"item\"></number-control>\r\n  } @else if (item.type === 'datetime') {\r\n    <datetime-control [component]=\"item\"></datetime-control>\r\n  } @else if (item.type === 'select') {\r\n    <select-control [component]=\"item\"></select-control>\r\n  } @else if (item.type === 'radio') {\r\n    <radio-control [component]=\"item\"></radio-control>\r\n  } @else if (item.type === 'checkbox') {\r\n    <checkbox-control [component]=\"item\"></checkbox-control>\r\n  } @else if (item.type === 'html') {\r\n    <html-control [component]=\"item\"></html-control>\r\n  } @else if (item.type === 'upload') {\r\n    <upload-control [component]=\"item\"></upload-control>\r\n  } @else if (item.type === 'table') {\r\n    <table-control [component]=\"item\"></table-control>\r\n  }\r\n</ng-template>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JSON / variables modals \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal [title]=\"'core.component.form-builder.config-variable' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.display-label' | translate\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">{{ 'core.component.form-builder.add-variable' | translate }}</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host{--md-sys-color-primary: var(--sd-primary, #2A66F4);--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: var(--sd-primary-light, #EAF1FF);--md-sys-color-on-primary-container: var(--sd-primary, #2A66F4);--md-sys-color-info: var(--sd-info, #2962FF);--md-sys-color-info-container: var(--sd-info-light, #E7E9FF);--md-sys-color-secondary: #625b71;--md-sys-color-secondary-container: #e8def8;--md-sys-color-on-secondary-container: #1d192b;--md-sys-color-surface: #fbfafc;--md-sys-color-surface-container-lowest: #ffffff;--md-sys-color-surface-container-low: #f6f4f8;--md-sys-color-surface-container: #f1eef3;--md-sys-color-surface-container-high: #ebe8ee;--md-sys-color-surface-container-highest: #e6e2ea;--md-sys-color-on-surface: #1c1b1f;--md-sys-color-on-surface-variant: #49454e;--md-sys-color-outline: #79747e;--md-sys-color-outline-variant: #d6d2da;--md-sys-color-error: #b3261e;--md-sys-color-error-container: #f9dedc;--md-sys-color-warning: #8a5400;--md-sys-color-warning-container: #ffddb1;--md-sys-color-success: #1f6f43;--md-sys-color-success-container: #b7f0cb;--h-row: 28px;--h-field: 32px;--h-palette: 36px;--h-header: 36px;--h-section: 28px;--h-action-btn: 24px;--gap-1: 4px;--gap-2: 8px;--gap-3: 12px;--gap-4: 16px;--gap-5: 24px;--r-xs: 4px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 28px;--r-pill: 999px;--elev-1: 0 1px 2px 0 rgba(0, 0, 0, .06);--elev-2: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .04);--elev-3: 0 6px 14px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);display:block;width:100%;height:100%;font-family:Roboto,system-ui,sans-serif;font-size:13px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface)}:host ::ng-deep .msi{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"wght\" 300,\"opsz\" 24,\"GRAD\" 0,\"FILL\" 0}:host ::ng-deep .msi.filled{font-variation-settings:\"wght\" 300,\"opsz\" 24,\"GRAD\" 0,\"FILL\" 1}:host ::ng-deep .mono{font-family:Roboto Mono,ui-monospace,monospace}:host ::ng-deep .fb-icon-btn{width:28px;height:28px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--md-sys-color-on-surface-variant);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s ease,color .12s ease}:host ::ng-deep .fb-icon-btn:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent);color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-icon-btn.is-active{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}:host ::ng-deep .fb-icon-btn.danger:hover{color:var(--md-sys-color-error);background:var(--md-sys-color-error-container)}:host ::ng-deep .fb-icon-btn.warning.on{color:var(--md-sys-color-warning);background:var(--md-sys-color-warning-container)}:host ::ng-deep .fb-icon-btn .msi{font-size:18px}:host ::ng-deep .fb-field{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .fb-field__label{font-size:11px;font-weight:500;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-field__input{height:var(--h-row);padding:0 10px;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px;display:flex;align-items:center;justify-content:space-between;color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-field__input.placeholder{color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-field__input:focus-within,:host ::ng-deep .fb-field__input.focused{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent)}:host ::ng-deep .fb-field__input .msi{font-size:16px;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-field-row{display:flex;align-items:center;gap:var(--gap-2);justify-content:space-between}:host ::ng-deep .fb-switch{display:inline-flex;width:34px;height:18px;border-radius:999px;background:var(--md-sys-color-surface-container-highest);border:1.5px solid var(--md-sys-color-outline);padding:1px;align-items:center;cursor:pointer;position:relative;flex-shrink:0}:host ::ng-deep .fb-switch .fb-switch__thumb{width:12px;height:12px;border-radius:50%;background:var(--md-sys-color-outline)}:host ::ng-deep .fb-switch.on{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);justify-content:flex-end}:host ::ng-deep .fb-switch.on .fb-switch__thumb{background:var(--md-sys-color-on-primary);width:14px;height:14px}:host ::ng-deep .fb-expr{display:flex;align-items:center;gap:6px;height:var(--h-row);padding:0 6px 0 0;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-expr__badge{height:100%;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);font-family:Roboto Mono,monospace;font-size:10px;font-weight:500;border-radius:var(--r-xs) 0 0 var(--r-xs)}:host ::ng-deep .fb-expr__code{font-family:Roboto Mono,monospace;flex:1;font-size:11px;color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-expr__code .var{color:var(--md-sys-color-primary);font-weight:500}:host ::ng-deep .fb-expr__code .op{color:var(--md-sys-color-error)}:host ::ng-deep .fb-expr__code .lit{color:var(--md-sys-color-success)}:host ::ng-deep .fb-expr .empty{color:var(--md-sys-color-on-surface-variant);font-style:italic;padding-left:6px;flex:1}:host ::ng-deep details.fb-section{border-bottom:1px solid var(--md-sys-color-outline-variant);margin:0;padding:0;background:transparent}:host ::ng-deep details.fb-section>summary{list-style:none}:host ::ng-deep details.fb-section>summary::-webkit-details-marker{display:none}:host ::ng-deep .fb-section__head{height:var(--h-section);padding:0 var(--gap-4);display:flex;align-items:center;gap:var(--gap-2);cursor:pointer;font-size:12px;font-weight:500;color:var(--md-sys-color-on-surface);-webkit-user-select:none;user-select:none}:host ::ng-deep .fb-section__head .msi{font-size:16px;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-section__head .fb-section__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .fb-section__head .chev{margin-left:auto;transition:transform .16s ease}:host ::ng-deep details.fb-section[open] .fb-section__head .chev{transform:rotate(90deg)}:host ::ng-deep .fb-section__body{padding:4px var(--gap-4) var(--gap-3);display:flex;flex-direction:column;gap:var(--gap-2)}:host ::ng-deep .fb-columns-list{display:flex;flex-direction:column;gap:var(--gap-1);padding-top:var(--gap-1)}:host ::ng-deep .fb-column-row{display:flex;align-items:center;gap:var(--gap-2);height:40px;padding:6px 10px;border-radius:var(--r-sm);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px;cursor:pointer;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}:host ::ng-deep .fb-column-row:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-primary) 30%,transparent)}:host ::ng-deep .fb-column-row.is-active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 30%,transparent)}:host ::ng-deep .fb-column-row .fb-column-row__type-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}:host ::ng-deep .fb-column-row .fb-column-row__type-icon .msi{font-size:16px}:host ::ng-deep .fb-column-row .fb-column-row__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}:host ::ng-deep .fb-column-row .fb-column-row__meta .fb-column-row__label{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-column-row .fb-column-row__meta .fb-column-row__req{color:var(--md-sys-color-error);margin-left:2px;font-weight:600}:host ::ng-deep .fb-column-row .fb-column-row__meta .fb-column-row__sub{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:Roboto Mono,ui-monospace,monospace;letter-spacing:.02em}:host ::ng-deep .cdk-drag-preview.fb-drag-preview,:host ::ng-deep .fb-drag-preview{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;box-sizing:border-box;border-radius:50%;background:var(--md-sys-color-primary, #6750a4);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 24px #00000042,0 3px 8px #00000024;border:3px solid var(--md-sys-color-on-primary, #ffffff);cursor:grabbing;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.96;overflow:hidden;z-index:10000}:host ::ng-deep .cdk-drag-preview.fb-drag-preview:after,:host ::ng-deep .fb-drag-preview:after{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-on-primary, #ffffff);opacity:.9}@keyframes fb-drop-pulse{0%,to{box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-info) 16%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--md-sys-color-info) 24%,transparent)}}:host ::ng-deep .cdk-drag-placeholder{background:transparent!important;border:none!important;border-radius:999px!important;padding:0!important;transform:none!important;transition:none!important;pointer-events:none;overflow:hidden;animation:none!important;opacity:0!important}:host ::ng-deep .cdk-drag-placeholder>*{visibility:hidden!important;pointer-events:none!important}:host ::ng-deep .fb-palette__list>.cdk-drag-placeholder{display:none!important}:host ::ng-deep .fb-row__items>.cdk-drag-placeholder,:host ::ng-deep .fb-group__body>.cdk-drag-placeholder{width:0!important;min-width:0!important;max-width:0!important;height:auto!important;min-height:0!important;align-self:stretch;flex:0 0 0!important;margin:0!important}:host ::ng-deep [cdkDropListOrientation=vertical]>.cdk-drag-placeholder{width:auto!important;height:0!important;min-height:0!important;max-height:0!important;flex:0 0 0!important;margin:0!important;align-self:stretch}:host ::ng-deep .cdk-drop-list-receiving{background:color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent);transition:background .16s ease}:host ::ng-deep .fb-group__body.cdk-drop-list-receiving,:host ::ng-deep .fb-group__body.cdk-drop-list-dragging{background:color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent)!important;outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 78%,transparent);outline-offset:-6px;border-radius:var(--r-sm)}:host ::ng-deep .fb-resize.cdk-drag-preview{display:none!important}:host ::ng-deep .fb-shell--dragging .fb-item:hover,:host ::ng-deep .fb-shell--dragging .fb-group:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-item:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group:hover{border-color:transparent!important;background:transparent!important}:host ::ng-deep .fb-shell--dragging .fb-row:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row:hover{outline-color:transparent!important;background:transparent!important}:host ::ng-deep .fb-shell--dragging .fb-row:hover .fb-row__drag,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row:hover .fb-row__drag{opacity:0!important}:host ::ng-deep .fb-shell--dragging .fb-row.is-drag-target,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row.is-drag-target{outline-color:color-mix(in srgb,var(--md-sys-color-info) 44%,transparent)!important;background:color-mix(in srgb,var(--md-sys-color-info) 4%,transparent)!important}:host ::ng-deep .fb-shell--dragging .fb-row__drag,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row__drag{opacity:0!important}:host ::ng-deep .fb-shell--dragging .fb-actions,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-actions{opacity:0!important;pointer-events:none!important;transform:translateY(-2px)!important}:host ::ng-deep .fb-shell--dragging .fb-resize,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-resize{opacity:0!important;pointer-events:none!important}:host ::ng-deep .fb-shell--dragging .fb-row-break-btn,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row-break-btn{opacity:0!important;pointer-events:none!important}:host ::ng-deep .fb-shell--dragging .fb-palette-item:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-palette-item:hover{background:transparent!important}:host ::ng-deep .fb-shell--dragging .fb-palette-item:hover .fb-palette-item__drag,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-palette-item:hover .fb-palette-item__drag{opacity:0!important}:host ::ng-deep .fb-shell--dragging .fb-group__body,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__body{min-height:80px!important;background:color-mix(in srgb,var(--md-sys-color-primary) 5%,transparent)!important;outline:2px dashed color-mix(in srgb,var(--md-sys-color-primary) 50%,transparent)!important;outline-offset:-6px;border-radius:var(--r-sm);transition:background .16s ease,outline .16s ease,min-height .16s ease}:host ::ng-deep .fb-shell--dragging .fb-group__empty,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__empty{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary) 7%,transparent);color:var(--md-sys-color-primary)}:host ::ng-deep .fb-shell--dragging .fb-group__body.cdk-drop-list-receiving,:host ::ng-deep .fb-shell--dragging .fb-group__body.cdk-drop-list-dragging,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__body.cdk-drop-list-receiving,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__body.cdk-drop-list-dragging{background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)!important;outline:2px solid var(--md-sys-color-primary)!important}:host ::ng-deep .cdk-drag-animating{transition:transform .22s cubic-bezier(.2,0,0,1)!important}:host ::ng-deep .cdk-drag-dragging{transition:none!important}:host ::ng-deep .fb-item:not(.cdk-drag-dragging){transition:flex .12s cubic-bezier(.2,0,0,1),max-width .12s cubic-bezier(.2,0,0,1),border-color .12s,background .12s}.fb-shell{width:100%;height:100%;display:flex;background:var(--md-sys-color-surface);overflow:hidden;min-height:0}.fb-panel-header{height:var(--h-header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gap-3);border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);flex-shrink:0}.fb-panel-header__title{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.fb-panel-header__actions{display:flex;align-items:center;gap:2px}.fb-palette{width:220px;flex-shrink:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-right:1px solid var(--md-sys-color-outline-variant)}.fb-palette__scroll{flex:1;overflow-y:auto;padding-bottom:var(--gap-3)}.fb-palette__search{margin:var(--gap-3);height:32px;display:flex;align-items:center;gap:var(--gap-2);padding:0 var(--gap-3);border-radius:var(--r-pill);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:13px;flex-shrink:0}.fb-palette__search .msi{font-size:18px}.fb-palette__search input{flex:1;border:none;outline:none;background:transparent;color:var(--md-sys-color-on-surface);font-size:13px;font-family:inherit}.fb-palette__search input::placeholder{color:var(--md-sys-color-on-surface-variant)}.fb-palette__search .kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 6px;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant)}.fb-palette__group-label{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--md-sys-color-on-surface-variant);padding:var(--gap-3) var(--gap-4) var(--gap-1);text-transform:uppercase}.fb-palette__list{display:flex;flex-direction:column;padding:0 var(--gap-2)}.fb-palette-item{height:var(--h-palette);display:flex;align-items:center;gap:var(--gap-3);padding:0 var(--gap-3);border-radius:var(--r-sm);cursor:grab;color:var(--md-sys-color-on-surface);position:relative;-webkit-user-select:none;user-select:none}.fb-palette-item:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}.fb-palette-item .fb-palette-item__icon{width:24px;height:24px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);flex-shrink:0}.fb-palette-item .fb-palette-item__icon .msi{font-size:16px}.fb-palette-item .fb-palette-item__name{font-size:13px;font-weight:400}.fb-palette-item .fb-palette-item__drag{margin-left:auto;color:var(--md-sys-color-outline);opacity:0;transition:opacity .12s ease}.fb-palette-item .fb-palette-item__drag .msi{font-size:16px}.fb-palette-item:hover .fb-palette-item__drag{opacity:1}.fb-canvas{flex:1 1 0;min-width:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface);overflow:hidden}.fb-canvas__header{height:var(--h-header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gap-4);border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);gap:var(--gap-3);flex-shrink:0}.fb-canvas__title{display:flex;align-items:center;gap:var(--gap-2);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.fb-canvas__title .breadcrumb-sep{color:var(--md-sys-color-outline)}.fb-canvas__actions{display:flex;align-items:center;gap:var(--gap-2)}.fb-divider{width:1px;height:18px;background:var(--md-sys-color-outline-variant)}.fb-canvas__body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding:var(--gap-4);position:relative;background:var(--md-sys-color-surface);min-width:0}.fb-canvas__body.is-preview{background:var(--md-sys-color-surface-container-low);padding:32px}.fb-mode-toggle{display:inline-flex;height:28px;border:1px solid var(--md-sys-color-outline);border-radius:var(--r-pill);overflow:hidden;flex-shrink:0}.fb-mode-toggle button{border:0;background:transparent;padding:0 var(--gap-3);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant);cursor:pointer}.fb-mode-toggle button .msi{font-size:16px}.fb-mode-toggle button.is-active{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.fb-row{position:relative;display:flex;gap:var(--gap-2);padding:6px var(--gap-2);border-radius:var(--r-sm);margin-bottom:6px;min-width:0;transition:outline .12s ease,background .12s ease;outline:1px dashed transparent;outline-offset:-1px}.fb-row:hover{outline-color:var(--md-sys-color-outline-variant);background:color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent)}.fb-row:hover .fb-row__drag{opacity:1}.fb-row.is-drag-target{outline-color:color-mix(in srgb,var(--md-sys-color-info) 44%,transparent);background:color-mix(in srgb,var(--md-sys-color-info) 4%,transparent)}.fb-row.is-drag-target:after{content:\"\";position:absolute;left:10px;right:10px;bottom:-3px;height:4px;border-radius:999px;background:var(--md-sys-color-info);box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-info) 18%,transparent);pointer-events:none;animation:fb-drop-pulse .9s ease-in-out infinite;z-index:3}.fb-row__drag{position:absolute;left:-22px;top:50%;transform:translateY(-50%);width:18px;height:22px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-high);opacity:0;cursor:grab;z-index:2}.fb-row__drag .msi{font-size:14px}.fb-row-break-btn{position:absolute;right:-28px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;opacity:0;z-index:2;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-row-break-btn .msi{font-size:14px}.fb-row-break-btn:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);border-color:transparent}.fb-row:hover .fb-row-break-btn{opacity:1}.fb-item{position:relative;border:1.5px dashed transparent;border-radius:var(--r-md);padding:var(--gap-2) var(--gap-3);min-height:56px;min-width:0;transition:border-color .12s ease,background .12s ease;background:transparent;cursor:grab;display:flex;flex-direction:column;gap:6px}.fb-item:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 60%,transparent)}.fb-item.is-selected{border:1.5px solid var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent)}.fb-item.is-hidden{opacity:.45}.fb-item.is-readonly:after{content:\"\";position:absolute;inset:0;border-radius:var(--r-md);background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--md-sys-color-on-surface) 4%,transparent) 6px 7px);pointer-events:none}.fb-item.column-2{flex:0 0 calc(16.6666666667% - var(--gap-2));max-width:calc(16.6666666667% - var(--gap-2))}.fb-item.column-3{flex:0 0 calc(25% - var(--gap-2));max-width:calc(25% - var(--gap-2))}.fb-item.column-4{flex:0 0 calc(33.3333333333% - var(--gap-2));max-width:calc(33.3333333333% - var(--gap-2))}.fb-item.column-5{flex:0 0 calc(41.6666666667% - var(--gap-2));max-width:calc(41.6666666667% - var(--gap-2))}.fb-item.column-6{flex:0 0 calc(50% - var(--gap-2));max-width:calc(50% - var(--gap-2))}.fb-item.column-7{flex:0 0 calc(58.3333333333% - var(--gap-2));max-width:calc(58.3333333333% - var(--gap-2))}.fb-item.column-8{flex:0 0 calc(66.6666666667% - var(--gap-2));max-width:calc(66.6666666667% - var(--gap-2))}.fb-item.column-9{flex:0 0 calc(75% - var(--gap-2));max-width:calc(75% - var(--gap-2))}.fb-item.column-10{flex:0 0 calc(83.3333333333% - var(--gap-2));max-width:calc(83.3333333333% - var(--gap-2))}.fb-item.column-11{flex:0 0 calc(91.6666666667% - var(--gap-2));max-width:calc(91.6666666667% - var(--gap-2))}.fb-item.column-12{flex:1 1 100%;max-width:100%}.fb-actions{position:absolute;top:-14px;right:8px;display:flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--md-sys-color-surface-container-lowest);box-shadow:var(--elev-2);border:1px solid var(--md-sys-color-outline-variant);z-index:4;opacity:0;transform:translateY(-2px);pointer-events:none;transition:opacity .12s ease,transform .12s ease}.fb-actions .fb-icon-btn{width:24px;height:24px}.fb-actions .fb-icon-btn .msi{font-size:16px}.fb-item:hover .fb-actions,.fb-item.is-selected .fb-actions{opacity:1;transform:translateY(0);pointer-events:auto}.fb-group>.fb-actions{top:6px;right:8px}.fb-group:hover>.fb-actions,.fb-group.is-selected>.fb-actions{opacity:1;transform:translateY(0);pointer-events:auto}.fb-status-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;height:18px;border-radius:var(--r-pill);font-size:10px;font-weight:500;letter-spacing:.02em;position:absolute;top:-9px;left:12px;z-index:3;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface-variant)}.fb-status-chip .msi{font-size:12px}.fb-status-chip.readonly{color:var(--md-sys-color-warning);background:var(--md-sys-color-warning-container);border-color:transparent}.fb-status-chip.hidden{color:var(--md-sys-color-on-surface-variant)}.fb-status-chip.conditional{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);border-color:transparent}.fb-resize{position:absolute;top:8px;bottom:8px;right:-5px;width:6px;border-radius:999px;background:var(--md-sys-color-primary);display:flex;align-items:center;justify-content:center;cursor:col-resize;opacity:0;transition:opacity .12s ease;z-index:3}.fb-resize:before{content:\"\";width:2px;height:18px;background:var(--md-sys-color-on-primary);border-radius:999px}.fb-item:hover .fb-resize{opacity:1}.fb-item.is-break{min-height:28px;padding:8px var(--gap-3);justify-content:center}.fb-break-line{display:flex;align-items:center;gap:var(--gap-2);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.fb-break-line:before,.fb-break-line:after{content:\"\";flex:1;height:1px;background:var(--md-sys-color-outline-variant)}.fb-break-line .msi{display:none}.fb-break-line .fb-break-label{color:var(--md-sys-color-on-surface-variant)}.fb-drop-hint{height:36px;border-radius:var(--r-sm);border:1.5px dashed var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent);color:var(--md-sys-color-primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;gap:6px;margin:4px 0}.fb-drop-hint .msi{font-size:16px}.fb-group{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--r-lg);border:1.5px dashed transparent;transition:border-color .12s ease,background .12s ease;position:relative;display:flex;flex-direction:column;overflow:visible;cursor:default}.fb-group:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 60%,transparent)}.fb-group.is-selected{border:1.5px solid var(--md-sys-color-primary)}.fb-group.is-hidden{opacity:.55}.fb-group__header{display:flex;align-items:center;gap:var(--gap-2);padding:8px 12px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:grab}.fb-group__header:active{cursor:grabbing}.fb-group__header .fb-group__icon .msi{font-size:18px}.fb-group__header .fb-group__label{font-size:13px;font-weight:500}.fb-group__header .fb-group__count{margin-left:auto;font-size:10px;opacity:.75}.fb-group__conditional-chip{display:inline-flex;align-items:center;gap:4px;font-family:Roboto Mono,monospace;font-size:10px;padding:2px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,currentColor 12%,transparent)}.fb-group__body{padding:12px;display:flex;flex-wrap:wrap;gap:var(--gap-2);min-height:60px;position:relative}.fb-group__empty{display:flex;align-items:center;justify-content:center;height:56px;border-radius:var(--r-sm);border:1.5px dashed var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-style:italic}.fb-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-3);color:var(--md-sys-color-on-surface-variant);text-align:center;padding:24px;pointer-events:none}.fb-empty__art{width:96px;height:96px;border-radius:var(--r-xl);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center}.fb-empty__art .msi{font-size:44px}.fb-empty__title{font-size:16px;font-weight:500;color:var(--md-sys-color-on-surface)}.fb-empty__hint{font-size:13px;max-width:320px;line-height:1.5}.fb-empty__kbd{display:inline-flex;align-items:center;gap:6px;font-family:Roboto Mono,monospace;font-size:11px;padding:4px 8px;border-radius:var(--r-xs);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.fb-empty__kbd .msi{font-size:12px}.fb-attrs{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-left:1px solid var(--md-sys-color-outline-variant)}.fb-attrs__selection{padding:var(--gap-3) var(--gap-4);display:flex;align-items:center;gap:var(--gap-2);border-bottom:1px solid var(--md-sys-color-outline-variant)}.fb-attrs__sel-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.fb-attrs__sel-icon .msi{font-size:18px}.fb-attrs__sel-meta{display:flex;flex-direction:column;min-width:0}.fb-attrs__sel-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-attrs__sel-key{font-family:Roboto Mono,monospace;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.fb-attrs__body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;min-width:0}.fb-attrs__placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-2);padding:32px;color:var(--md-sys-color-on-surface-variant);text-align:center}.fb-attrs__placeholder .msi{font-size:32px;color:var(--md-sys-color-outline)}.fb-attrs__placeholder .title{font-size:13px;font-weight:500;color:var(--md-sys-color-on-surface)}.fb-attrs__placeholder .hint{font-size:12px;max-width:220px;line-height:1.5}.fb-preview-card{max-width:760px;margin:0 auto;background:var(--md-sys-color-surface-container-lowest);border-radius:var(--r-lg);padding:32px;box-shadow:var(--elev-1)}.fb-preview-card__chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;height:22px;border-radius:var(--r-pill);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--gap-3)}.fb-preview-card__title{font-size:20px;font-weight:500;margin:0 0 var(--gap-4);color:var(--md-sys-color-on-surface)}.fb-preview-card__footer{display:flex;justify-content:flex-end;gap:var(--gap-2);margin-top:var(--gap-4);padding-top:var(--gap-4);border-top:1px solid var(--md-sys-color-outline-variant)}.fb-icon-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:4px}.fb-icon-picker .fb-icon-picker__btn{height:28px;border-radius:var(--r-xs);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface-variant);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.fb-icon-picker .fb-icon-picker__btn .msi{font-size:16px}.fb-icon-picker .fb-icon-picker__btn.is-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary)}.fb-icon-picker .fb-icon-picker__btn:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}.fb-color-swatches{display:flex;gap:var(--gap-2);margin-top:4px}.fb-color-swatches .fb-color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent}.fb-color-swatches .fb-color-swatch.is-active{border-color:var(--md-sys-color-on-surface)}.fb-color-swatches .fb-color-swatch.primary{background:var(--md-sys-color-primary)}.fb-color-swatches .fb-color-swatch.secondary{background:var(--md-sys-color-secondary)}.fb-color-swatches .fb-color-swatch.success{background:var(--md-sys-color-success)}.fb-color-swatches .fb-color-swatch.warning{background:var(--md-sys-color-warning)}.fb-color-swatches .fb-color-swatch.error{background:var(--md-sys-color-error)}.fb-children-list{display:flex;flex-direction:column;gap:4px}.fb-child-row{display:flex;align-items:center;gap:var(--gap-2);height:30px;padding:0 8px;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px}.fb-child-row .fb-child-row__icon{width:22px;height:22px;border-radius:var(--r-xs);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.fb-child-row .fb-child-row__icon .msi{font-size:14px}.fb-child-row .fb-child-row__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-child-row .fb-child-row__key{font-family:Roboto Mono,monospace;font-size:10px;color:var(--md-sys-color-on-surface-variant)}.fb-child-row:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent)}.fb-add-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--md-sys-color-primary);cursor:pointer;padding:4px 0;text-decoration:none}.fb-add-link .msi{font-size:14px}.fb-add-link:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: 
                 // Controls
-                TextFieldControl, selector: "textfield-control", inputs: ["component"] }, { kind: "component", type: TextfieldAttribute, selector: "textfield-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TextareaControl, selector: "textarea-control", inputs: ["component"] }, { kind: "component", type: TextareaAttribute, selector: "textarea-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipStringControl, selector: "chip-string-control", inputs: ["component"] }, { kind: "component", type: ChipStringAttribute, selector: "chip-string-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipCalendarControl, selector: "chip-calendar-control", inputs: ["component"] }, { kind: "component", type: ChipCalendarAttribute, selector: "chip-calendar-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: NumberControl, selector: "number-control", inputs: ["component"] }, { kind: "component", type: NumberAttribute, selector: "number-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SelectControl, selector: "select-control", inputs: ["component"] }, { kind: "component", type: SelectAttribute, selector: "select-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: DatetimeControl, selector: "datetime-control", inputs: ["component"] }, { kind: "component", type: DatetimeAttribute, selector: "datetime-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: RadioControl, selector: "radio-control", inputs: ["component"] }, { kind: "component", type: RadioAttribute, selector: "radio-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: CheckboxControl, selector: "checkbox-control", inputs: ["component"] }, { kind: "component", type: CheckboxAttribute, selector: "checkbox-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: HtmlControl, selector: "html-control", inputs: ["component"] }, { kind: "component", type: HtmlAttribute, selector: "html-attribute", inputs: ["components", "variables", "component"], outputs: ["attributeChanges"] }, { kind: "component", type: UploadControl, selector: "upload-control", inputs: ["component"] }, { kind: "component", type: UploadAttribute, selector: "upload-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TableControl, selector: "table-control", inputs: ["component"] }, { kind: "component", type: TableAttribute, selector: "table-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "rows", "hideInlineError", "required", "disabled", "viewed", "autoHeight", "maxlength", "pattern", "validator", "inlineError", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange"] }, { 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: SdFormRender, selector: "sd-form-render", inputs: ["form", "configuration", "defaultEntity", "entity", "properties", "viewed"] }, { kind: "component", type: ConfigureValidationComponent, selector: "configure-validation", outputs: ["accept"] }] });
+                TextFieldControl, selector: "textfield-control", inputs: ["component"] }, { kind: "component", type: TextfieldAttribute, selector: "textfield-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TextareaControl, selector: "textarea-control", inputs: ["component"] }, { kind: "component", type: TextareaAttribute, selector: "textarea-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipStringControl, selector: "chip-string-control", inputs: ["component"] }, { kind: "component", type: ChipStringAttribute, selector: "chip-string-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipCalendarControl, selector: "chip-calendar-control", inputs: ["component"] }, { kind: "component", type: ChipCalendarAttribute, selector: "chip-calendar-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: NumberControl, selector: "number-control", inputs: ["component"] }, { kind: "component", type: NumberAttribute, selector: "number-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SelectControl, selector: "select-control", inputs: ["component"] }, { kind: "component", type: SelectAttribute, selector: "select-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: DatetimeControl, selector: "datetime-control", inputs: ["component"] }, { kind: "component", type: DatetimeAttribute, selector: "datetime-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: RadioControl, selector: "radio-control", inputs: ["component"] }, { kind: "component", type: RadioAttribute, selector: "radio-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: CheckboxControl, selector: "checkbox-control", inputs: ["component"] }, { kind: "component", type: CheckboxAttribute, selector: "checkbox-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: HtmlControl, selector: "html-control", inputs: ["component"] }, { kind: "component", type: HtmlAttribute, selector: "html-attribute", inputs: ["components", "variables", "component"], outputs: ["attributeChanges"] }, { kind: "component", type: UploadControl, selector: "upload-control", inputs: ["component"] }, { kind: "component", type: UploadAttribute, selector: "upload-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TableControl, selector: "table-control", inputs: ["component"] }, { kind: "component", type: TableAttribute, selector: "table-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: GroupAttribute, selector: "group-attribute", inputs: ["group"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "rows", "hideInlineError", "required", "disabled", "viewed", "autoHeight", "maxlength", "pattern", "validator", "inlineError", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange"] }, { 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: SdFormRender, selector: "sd-form-render", inputs: ["form", "configuration", "defaultEntity", "entity", "properties", "viewed"] }, { kind: "component", type: ConfigureValidationComponent, selector: "configure-validation", outputs: ["accept"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormBuilder, decorators: [{
             type: Component,
@@ -6148,8 +6481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatIconModule,
                         MatTooltipModule,
                         DragDropModule,
-                        // Core Pipes
-                        SdSafeHtmlPipe,
                         // Controls
                         TextFieldControl,
                         TextfieldAttribute,
@@ -6175,29 +6506,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         UploadAttribute,
                         TableControl,
                         TableAttribute,
+                        GroupAttribute,
                         SdModal,
                         SdInput$1,
                         SdTextarea,
                         SdButton,
                         SdFormRender,
-                        ConfigureValidationComponent,
-                    ], template: "<div class=\"d-flex form-editor\">\r\n  <div class=\"d-flex flex-column form-menu\">\r\n    <div class=\"c-header\">Components</div>\r\n    <div class=\"component-container\" style=\"flex: 1\">\r\n      <div class=\"form-editor-group\" cdkDropList [cdkDropListData]=\"formBuilderComponents\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n        @for (formBuilderComponent of formBuilderComponents; track formBuilderComponent.type) {\r\n          <div cdkDrag class=\"form-item\" (click)=\"addComponent(formBuilderComponent)\" aria-hidden=\"true\">\r\n            <div class=\"c-form-item\">\r\n              <span [innerHtml]=\"formBuilderComponent.icon | sdSafeHtml\"></span>\r\n              <div class=\"title\">\r\n                {{ formBuilderComponent.name }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-content\">\r\n    <div class=\"c-header d-flex align-items-center justify-content-between\">\r\n      <div>B\u1ED1 c\u1EE5c</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n        <mat-icon matTooltip=\"Xem JSON\" fontIcon=\"code\" (click)=\"viewJSON()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" fontIcon=\"scatter_plot\" (click)=\"configureVariables()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c c\u1EA3nh b\u00E1o/l\u1ED7i\" fontIcon=\"error\" (click)=\"openConfigureValidation()\"></mat-icon>\r\n        <mat-icon\r\n          [matTooltip]=\"isPreview ? 'Tr\u1EDF v\u1EC1 thi\u1EBFt k\u1EBF' : 'Xem th\u1EED'\"\r\n          [fontIcon]=\"isPreview ? 'stop_circle' : 'play_circle'\"\r\n          (click)=\"isPreview = !isPreview\"></mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"p-12 components\" style=\"flex: 1; overflow-y: auto\" id=\"frmComponent\">\r\n      @if (isPreview) {\r\n        <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n        <sd-button title=\"Validate\" (click)=\"onValidate()\"></sd-button>\r\n      } @else {\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          class=\"listY\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\r\n              id=\"row_{{ row.rowIndex }}\"\r\n              class=\"row-item\"\r\n              aria-hidden=\"true\">\r\n              <div class=\"btn-drag-row-item\"><mat-icon matTooltip=\"K\u00E9o l\u00EAn / xu\u1ED1ng\">drag_indicator</mat-icon></div>\r\n              <div\r\n                class=\"c-row-item\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <div\r\n                    cdkDrag\r\n                    [id]=\"item.id\"\r\n                    class=\"component-item column-{{ item.layout?.columns || 12 }}\"\r\n                    [class.active]=\"item.id === selectedComponent?.id\"\r\n                    (click)=\"selectComponent(item)\"\r\n                    (clickOutside)=\"onClickedOutside($event)\"\r\n                    (cdkDragStarted)=\"dragStartComponentItem($event)\"\r\n                    (cdkDragEnded)=\"dragEndComponentItem($event)\"\r\n                    aria-hidden=\"true\">\r\n                    <div class=\"c-component-item\" [class.c-hidden]=\"item.properties?.hidden\">\r\n                      <div class=\"c-actions\">\r\n                        @if (item.type !== 'group') {\r\n                          <mat-icon\r\n                            [matTooltip]=\"item.properties?.viewed ? 'B\u1ECF ch\u1EC9 xem' : 'Ch\u1EC9 xem'\"\r\n                            (click)=\"onChangeViewed(item)\"\r\n                            fontSet=\"material-icons-outlined\"\r\n                            style=\"font-size: 16px; cursor: pointer\"\r\n                            [class.text-warning]=\"item.properties?.viewed\">\r\n                            edit_off\r\n                          </mat-icon>\r\n                        }\r\n                        <mat-icon\r\n                          matTooltip=\"Nh\u00E2n b\u1EA3n\"\r\n                          (click)=\"onDuplicate(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\">\r\n                          content_copy\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          [matTooltip]=\"item.properties?.hidden ? 'Hi\u1EC7n' : '\u1EA8n'\"\r\n                          (click)=\"onChangeHidden(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          [class.text-warning]=\"item.properties?.hidden\">\r\n                          visibility_off\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          matTooltip=\"X\u00F3a\"\r\n                          (click)=\"removeComponent(item.id)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          class=\"text-error\">\r\n                          delete\r\n                        </mat-icon>\r\n                      </div>\r\n                      @if (item.type === 'textfield') {\r\n                        <textfield-control [component]=\"item\"></textfield-control>\r\n                      } @else if (item.type === 'textarea') {\r\n                        <textarea-control [component]=\"item\"></textarea-control>\r\n                      } @else if (item.type === 'chip-string') {\r\n                        <chip-string-control [component]=\"item\"></chip-string-control>\r\n                      } @else if (item.type === 'chip-calendar') {\r\n                        <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n                      } @else if (item.type === 'number') {\r\n                        <number-control [component]=\"item\"></number-control>\r\n                      } @else if (item.type === 'datetime') {\r\n                        <datetime-control [component]=\"item\"></datetime-control>\r\n                      } @else if (item.type === 'select') {\r\n                        <select-control [component]=\"item\"></select-control>\r\n                      } @else if (item.type === 'radio') {\r\n                        <radio-control [component]=\"item\"></radio-control>\r\n                      } @else if (item.type === 'checkbox') {\r\n                        <checkbox-control [component]=\"item\"></checkbox-control>\r\n                      } @else if (item.type === 'html') {\r\n                        <html-control [component]=\"item\" #html></html-control>\r\n                      } @else if (item.type === 'upload') {\r\n                        <upload-control [component]=\"item\"></upload-control>\r\n                      } @else if (item.type === 'table') {\r\n                        <table-control [component]=\"item\"></table-control>\r\n                      }\r\n                      <div class=\"c-item-backdrop\"></div>\r\n                    </div>\r\n                    <div cdkDropList cdkDropListOrientation=\"horizontal\">\r\n                      <div\r\n                        cdkDrag\r\n                        (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                        (cdkDragEnded)=\"dragEndChangeSizeControl($event)\"\r\n                        class=\"c-bar-resize-right\"\r\n                        matTooltip=\"Co d\u00E3n\"></div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-attributes\">\r\n    <div class=\"c-header\">Thu\u1ED9c t\u00EDnh</div>\r\n    @if (selectedComponent) {\r\n      <div class=\"attributes\" style=\"flex: 1\" aria-hidden=\"true\">\r\n        @if (selectedComponent.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textfield-attribute>\r\n        } @else if (selectedComponent.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textarea-attribute>\r\n        } @else if (selectedComponent.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></chip-string-attribute>\r\n        } @else if (selectedComponent.type === 'chip-calendar') {\r\n          <chip-calendar-attribute\r\n            [components]=\"components\"\r\n            [variables]=\"variables\"\r\n            [component]=\"selectedComponent\"></chip-calendar-attribute>\r\n        } @else if (selectedComponent.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></number-attribute>\r\n        } @else if (selectedComponent.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></datetime-attribute>\r\n        } @else if (selectedComponent.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></select-attribute>\r\n        } @else if (selectedComponent.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></radio-attribute>\r\n        } @else if (selectedComponent.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></checkbox-attribute>\r\n        } @else if (selectedComponent.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></html-attribute>\r\n        } @else if (selectedComponent.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></upload-attribute>\r\n        } @else if (selectedComponent.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></table-attribute>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" label=\"Nh\u00E3n hi\u1EC3n th\u1ECB\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">Th\u00EAm bi\u1EBFn</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host::ng-deep .svg{width:40px}:host::ng-deep .mat-form-field.sd-sm.mat-form-field-appearance-outline .mat-form-field-infix input.mat-input-element{margin-top:7px!important}::ng-deep .component-item.cdk-drag-preview .c-component-item{display:none}::ng-deep .component-item.cdk-drag-dragging,::ng-deep .row-item.cdk-drag-dragging{box-shadow:0 4px 8px #0003;border:2px #0e7cfa dashed}::ng-deep .row-item.cdk-drag-preview .c-row-item,::ng-deep .row-item.cdk-drag-preview .btn-drag-row-item{display:none}::ng-deep .form-item.cdk-drag-preview{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item .svg{width:40px}.form-editor{width:100%;height:100%}.form-editor .material-icons{color:#5f6368!important}.form-editor .material-icons:hover{color:#2626b4!important;cursor:pointer!important}.form-editor .c-header{font-weight:500;padding:5px 10px;background-color:#ebebeb;border-bottom:1px solid #d3d3d3;text-transform:uppercase}.form-editor .c-header:last-child{border-right:0!important}.form-editor .c-header a{font-size:12px}.form-editor .form-menu{width:120px}.form-editor .form-menu .component-container{overflow-y:hidden;background:#f6f8fc}.form-editor .form-menu .component-container:hover{overflow-y:auto!important}.form-editor .form-menu .form-editor-group{padding:5px 10px;display:flex;align-items:center;flex-wrap:wrap}.form-editor .form-menu .form-editor-group .form-item{height:68px;display:flex;align-items:center;justify-content:center;font-size:11px;-webkit-user-select:none;user-select:none;color:#333;background:#fff;border:1px solid transparent;width:100px;margin:6px}.form-editor .form-menu .form-editor-group .form-item:hover{background-color:#e7e7e7;border-color:#878b8f;cursor:pointer}.form-editor .form-menu .form-editor-group .form-item .c-form-item{text-align:center}.form-editor .form-menu .form-editor-group .form-item .c-form-item>div.title,.form-editor .form-menu .form-editor-group .form-item .c-form-item>span{text-align:center;white-space:nowrap;font-weight:500}.form-editor .form-content{flex:1;border-right:1px solid #d3d3d3;border-left:1px solid #d3d3d3}.form-editor .form-content .components{background:#fff}.form-editor .form-content .components .row-item{position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.form-editor .form-content .components .row-item:hover{outline:1px dashed #bbb;border-radius:8px}.form-editor .form-content .components .row-item:hover .btn-drag-row-item{display:grid}.form-editor .form-content .components .row-item .btn-drag-row-item{display:none;position:absolute;top:0;left:-12px;height:100%;z-index:2;place-items:center;cursor:grab}.form-editor .form-content .components .row-item .btn-drag-row-item mat-icon{font-size:24px;height:24px;width:24px;box-shadow:0 1px 2px #0000001a;background:#fff}.form-editor .form-content .components .component-item{padding:4px 8px;border:2px dashed transparent;position:relative;min-height:28px;cursor:grab;transition:transform .2s ease,box-shadow .2s ease;display:inline-block;margin:4px;border-radius:8px;vertical-align:bottom}.form-editor .form-content .components .component-item:active{cursor:grabbing;box-shadow:0 4px 8px #0003}.form-editor .form-content .components .component-item:hover{border:2px #0e7cfa dashed}.form-editor .form-content .components .component-item:hover .c-actions{display:flex;flex-direction:row;gap:4px}.form-editor .form-content .components .component-item:hover .c-bar-resize-right{display:block;cursor:w-resize}.form-editor .form-content .components .component-item:hover .c-bar-resize-right.disabled{display:none}.form-editor .form-content .components .component-item .c-component-item{overflow:hidden}.form-editor .form-content .components .component-item .c-actions{display:none;position:absolute;right:4px;z-index:2}.form-editor .form-content .components .component-item .c-bar-resize-right{display:none;width:8px;height:80%;position:absolute;top:10%;right:-5px;outline:2px #0e7cfa solid;border-radius:4px;color:#fff;background:#fff;z-index:2}.form-editor .form-content .components .component-item .c-item-backdrop{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}.form-editor .form-content .components .active{border:2px #0e7cfa solid;outline:1px #0e7cfa solid}.form-editor .form-content .components .column-2{width:calc(16.6666666667% - 8px)}.form-editor .form-content .components .column-3{width:calc(25% - 8px)}.form-editor .form-content .components .column-4{width:calc(33.3333333333% - 8px)}.form-editor .form-content .components .column-5{width:calc(41.6666666667% - 8px)}.form-editor .form-content .components .column-6{width:calc(50% - 8px)}.form-editor .form-content .components .column-7{width:calc(58.3333333333% - 8px)}.form-editor .form-content .components .column-8{width:calc(66.6666666667% - 8px)}.form-editor .form-content .components .column-9{width:calc(75% - 8px)}.form-editor .form-content .components .column-10{width:calc(83.3333333333% - 8px)}.form-editor .form-content .components .column-11{width:calc(91.6666666667% - 8px)}.form-editor .form-content .components .column-12{width:calc(100% - 8px)}.form-editor .form-attributes{width:300px}.form-editor .form-attributes .attributes{overflow-y:auto!important;padding:0 10px;background:#f6f8fc}.form-editor .form-attributes .attributes .group-attribute .title-group{font-weight:500;padding:5px 0;position:relative;cursor:pointer;margin-top:8px}.form-editor .form-attributes .attributes .group-attribute .title-group span{vertical-align:middle;display:inline-block}.form-editor .form-attributes .attributes .group-attribute .title-group mat-icon{vertical-align:middle;position:absolute;right:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute{display:grid;margin-bottom:10px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute label{font-size:12px;font-weight:400;margin:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute input,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute select,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute textarea{border:1px solid #d3d3d3;height:30px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options{padding:5px 0;border-bottom:1px solid #d3d3d3}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options input{width:100%;margin-bottom:5px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options .material-icons{padding-top:22px}.preview-container{margin:0 -24px;position:relative}.preview-container .header-preview{border-bottom:1px solid #eee;padding:10px;font-size:14px;font-weight:500;position:sticky;top:0;background-color:#fff;z-index:9999}.preview-container .header-preview .material-icons:hover{color:#5f6368;cursor:pointer}.preview-container .content{padding:10px}.c-hidden{opacity:.5}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$6.SdNotifyService }, { type: i1$6.SdConfirmService }, { type: BuilderService }], propDecorators: { popupViewJSON: [{
-                type: ViewChild,
-                args: ['popupViewJSON']
-            }], popupConfigureVariables: [{
-                type: ViewChild,
-                args: ['popupConfigureVariables']
-            }], configureValidation: [{
-                type: ViewChild,
-                args: [ConfigureValidationComponent]
-            }], formRender: [{
-                type: ViewChild,
-                args: [SdFormRender]
-            }], _formGeneric: [{
-                type: Input,
-                args: ['formGeneric']
-            }] } });
+                        ConfigureValidationComponent, TranslatePipe
+                    ], template: "<!-- cdkDropListGroup: auto-connect t\u1EA5t c\u1EA3 cdkDropList trong palette, canvas rows, group bodies.\r\n     [class.fb-shell--dragging]: JS-driven flag \u0111\u1EC3 \u1EA9n hover/actions/resize to\u00E0n di\u1EC7n\r\n     trong l\u00FAc drag (CSS :has() kh\u00F4ng b\u1EAFt 100% tr\u01B0\u1EDDng h\u1EE3p v\u1EDBi CDK preview clone). -->\r\n<div class=\"fb-shell\" cdkDropListGroup [class.fb-shell--dragging]=\"isAnyDragging()\">\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LEFT PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <aside class=\"fb-palette\">\r\n    <div class=\"fb-panel-header\">\r\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.components' | translate }}</div>\r\n    </div>\r\n\r\n    <!-- Search pill -->\r\n    <div class=\"fb-palette__search\">\r\n      <span class=\"msi\" aria-hidden=\"true\">search</span>\r\n      <input\r\n        type=\"text\"\r\n        [placeholder]=\"'core.component.form-builder.search-components' | translate\"\r\n        [value]=\"paletteSearch()\"\r\n        (input)=\"paletteSearch.set($any($event.target).value)\" />\r\n      <span class=\"kbd\">\u2318K</span>\r\n    </div>\r\n\r\n    <div class=\"fb-palette__scroll\">\r\n      @for (group of paletteGroups(); track group.key) {\r\n        <div class=\"fb-palette__group-label\">{{ group.label }}</div>\r\n        <div\r\n          class=\"fb-palette__list\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.items\"\r\n          [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n          @for (formBuilderComponent of group.items; track formBuilderComponent.type) {\r\n            <div\r\n              cdkDrag\r\n              class=\"fb-palette-item\"\r\n              [matTooltip]=\"formBuilderComponent.name\"\r\n              matTooltipPosition=\"right\"\n              (click)=\"addComponent(formBuilderComponent)\"\n              (cdkDragStarted)=\"onAnyDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              aria-hidden=\"true\">\n              <span class=\"fb-palette-item__icon\"><span class=\"msi\">{{ formBuilderComponent.symbol }}</span></span>\r\n              <span class=\"fb-palette-item__name\">{{ formBuilderComponent.name }}</span>\r\n              <span class=\"fb-palette-item__drag\"><span class=\"msi\">drag_indicator</span></span>\r\n              <!-- Generic drag preview: ch\u1EC9 icon (puck), label \u1EA9n -->\r\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CENTER CANVAS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"fb-canvas\">\r\n    <header class=\"fb-canvas__header\">\r\n      <div class=\"fb-canvas__title\">\r\n        <span>{{ 'core.component.form-builder.layout' | translate }}</span>\r\n      </div>\r\n      <div class=\"fb-canvas__actions\">\r\n        <!-- Toolbar cluster: view JSON / variables / validation -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-icon-btn\"\r\n          [matTooltip]=\"'core.component.form-builder.view-json' | translate\"\r\n          (click)=\"viewJSON()\">\r\n          <span class=\"msi\">data_object</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-icon-btn\"\r\n          [matTooltip]=\"'core.component.form-builder.config-variable' | translate\"\r\n          (click)=\"configureVariables()\">\r\n          <span class=\"msi\">data_array</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-icon-btn\"\r\n          [matTooltip]=\"'core.component.form-builder.config-validation-warning-error' | translate\"\r\n          (click)=\"openConfigureValidation()\">\r\n          <span class=\"msi\">rule</span>\r\n        </button>\r\n\r\n        <span class=\"fb-divider\"></span>\r\n\r\n        <!-- M3 segmented Design/Preview toggle -->\r\n        <div class=\"fb-mode-toggle\" role=\"tablist\">\r\n          <button\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            [class.is-active]=\"!isPreview()\"\r\n            (click)=\"setMode(false)\">\r\n            <span class=\"msi\">edit</span>\r\n            <span>{{ 'core.component.form-builder.design' | translate }}</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            [class.is-active]=\"isPreview()\"\r\n            (click)=\"setMode(true)\">\r\n            <span class=\"msi\">visibility</span>\r\n            <span>{{ 'core.component.form-builder.preview' | translate }}</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </header>\r\n\r\n    <div\r\n      class=\"fb-canvas__body\"\r\n      [class.is-preview]=\"isPreview()\"\r\n      id=\"frmComponent\">\r\n      @if (isPreview()) {\r\n        <!-- \u2500\u2500 Preview mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n        <div class=\"fb-preview-card\">\r\n          <div class=\"fb-preview-card__chip\">\r\n            <span class=\"msi\">visibility</span>\r\n            {{ 'core.component.form-builder.preview-runtime' | translate }}\r\n          </div>\r\n          <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n          <div class=\"fb-preview-card__footer\">\r\n            <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"setMode(false)\"></sd-button>\r\n            <sd-button type=\"fill\" color=\"primary\" [title]=\"'core.component.form-builder.submit' | translate\" (click)=\"onValidate()\"></sd-button>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <!-- \u2500\u2500 Design mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n        @if (!dragDropRows.length) {\r\n          <div class=\"fb-empty\">\r\n            <div class=\"fb-empty__art\"><span class=\"msi\">dashboard_customize</span></div>\r\n            <div class=\"fb-empty__title\">{{ 'core.component.form-builder.empty-title' | translate }}</div>\r\n            <div class=\"fb-empty__hint\">\r\n              {{ 'core.component.form-builder.empty-hint' | translate }}\r\n              <span class=\"fb-empty__kbd\"><span class=\"msi\">keyboard</span>\u2318 K</span>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              class=\"fb-row\"\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\n              (cdkDragStarted)=\"onAnyDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              [class.is-drag-target]=\"targetItem === row\"\n              [id]=\"'row_' + row.rowIndex\"\n              aria-hidden=\"true\">\r\n              <div class=\"fb-row__drag\" [matTooltip]=\"'core.component.form-builder.drag-vertically' | translate\" cdkDragHandle>\r\n                <span class=\"msi\">drag_indicator</span>\r\n              </div>\r\n              <!-- Generic puck preview -->\r\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n              <!-- Quick-add break button \u2014 show on row hover, insert break after this row -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"fb-row-break-btn\"\r\n                [matTooltip]=\"'core.component.form-builder.break' | translate\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"insertBreakAfter(row); $event.stopPropagation()\">\r\n                <span class=\"msi\">horizontal_rule</span>\r\n              </button>\r\n\r\n              <div\r\n                class=\"fb-row__items\"\r\n                style=\"display: flex; flex: 1; gap: var(--gap-2);\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <!-- Group component renders as outlined card with colored header bar -->\r\n                  @if (item.type === 'group') {\r\n                    @let g = $any(item);\r\n                    @let cv = groupColorVars(g.properties?.color);\r\n                    <div\r\n                      cdkDrag\r\n                      [id]=\"item.id\"\r\n                      class=\"fb-group column-{{ item.layout?.columns || 12 }}\"\r\n                      [class.fb-item]=\"false\"\r\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\r\n                      [class.is-hidden]=\"item.properties?.hidden\"\r\n                      [style.flex]=\"'0 0 calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\r\n                      [style.maxWidth]=\"'calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\r\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event); onAnyDragStarted()\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <!-- Generic puck preview -->\r\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                      <!-- cdkDragHandle: ch\u1EC9 cho ph\u00E9p k\u00E9o group qua header \u2014 body free cho click v\u00E0o child. -->\r\n                      <div class=\"fb-group__header\" cdkDragHandle [style.background]=\"cv.bg\" [style.color]=\"cv.fg\">\r\n                        <span class=\"fb-group__icon\"><span class=\"msi\">{{ g.properties?.icon || 'category' }}</span></span>\r\n                        <span class=\"fb-group__label\">{{ item.label }}</span>\r\n                        @if (hasConditional(item)) {\r\n                          <span class=\"fb-group__conditional-chip\">\r\n                            <span class=\"msi\" style=\"font-size: 12px;\">bolt</span>\r\n                            {{ 'core.component.form-builder.conditional' | translate }}\r\n                          </span>\r\n                        }\r\n                        <span class=\"fb-group__count\">{{ g.components?.length || 0 }} fields</span>\r\n                      </div>\r\n                      <!-- Floating action toolbar -->\r\n                      <div class=\"fb-actions\">\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\r\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">content_copy</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.hidden\"\r\n                                [class.on]=\"item.properties?.hidden\"\r\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\r\n                          <span class=\"msi\">delete</span>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <div\n                        class=\"fb-group__body\"\n                        cdkDropList\n                        cdkDropListOrientation=\"horizontal\"\n                        [cdkDropListData]=\"g.components\"\n                        (cdkDropListDropped)=\"dropInGroup($event, g)\">\n                        @if (!g.components?.length) {\r\n                          <div class=\"fb-group__empty\">\r\n                            <span class=\"msi\" style=\"font-size: 16px; margin-right: 6px;\">south</span>\r\n                            {{ 'core.component.form-builder.group-drop-here' | translate }}\r\n                          </div>\r\n                        }\r\n                        @for (child of g.components; track child.id; let ci = $index) {\r\n                          <div\r\n                            cdkDrag\r\n                            [id]=\"child.id\"\r\n                            class=\"fb-item is-child column-{{ child.layout?.columns || 12 }}\"\r\n                            [class.is-selected]=\"child.id === selectedComponent()?.id\"\r\n                            [class.is-hidden]=\"child.properties?.hidden\"\r\n                            [class.is-readonly]=\"child.properties?.viewed\"\r\n                            (click)=\"selectComponent(child); $event.stopPropagation()\"\n                            (cdkDragStarted)=\"onAnyDragStarted()\"\n                            (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                            (cdkDragEnded)=\"onAnyDragEnded()\">\n                            <!-- Generic puck preview -->\r\n                            <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                            <ng-container\r\n                              *ngTemplateOutlet=\"controlTemplate; context: { $implicit: child }\">\r\n                            </ng-container>\r\n                            <!-- Resize handle cho group child \u2014 chia 12-col ngay trong group body.\r\n                                 Wrapping cdkDropList c\u00F3 enterPredicate=false \u0111\u1EC3 KH\u00D4NG nh\u1EADn drop\r\n                                 (ch\u1EC9 d\u00F9ng l\u00E0m context cho cdkDrag), tr\u00E1nh xung \u0111\u1ED9t v\u1EDBi group__body drop list. -->\r\n                            <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n                              <div\r\n                                cdkDrag\r\n                                cdkDragLockAxis=\"x\"\r\n                                class=\"fb-resize\"\r\n                                (cdkDragStarted)=\"onAnyDragStarted()\"\r\n                                (cdkDragMoved)=\"changeSizeChildInGroup($event, child, g)\"\r\n                                (cdkDragEnded)=\"dragEndChangeSizeControl($event); onAnyDragEnded()\"\r\n                                [matTooltip]=\"'core.component.form-builder.flex' | translate\"\r\n                                aria-label=\"resize\"></div>\r\n                            </div>\r\n                            <!-- Inline status chips for nested children -->\r\n                            @if (child.properties?.hidden) {\r\n                              <span class=\"fb-status-chip hidden\">\r\n                                <span class=\"msi\">visibility_off</span>\r\n                                {{ 'core.component.form-builder.hidden' | translate }}\r\n                              </span>\r\n                            } @else if (child.properties?.viewed) {\r\n                              <span class=\"fb-status-chip readonly\">\r\n                                <span class=\"msi\">edit_off</span>\r\n                                {{ 'core.component.form-builder.read-only' | translate }}\r\n                              </span>\r\n                            } @else if (hasConditional(child)) {\r\n                              <span class=\"fb-status-chip conditional\">\r\n                                <span class=\"msi\">bolt</span>\r\n                                {{ 'core.component.form-builder.conditional' | translate }}\r\n                              </span>\r\n                            }\r\n                            <div class=\"fb-actions\">\r\n                              <button type=\"button\" class=\"fb-icon-btn\"\r\n                                      [class.warning]=\"child.properties?.viewed\"\r\n                                      [class.on]=\"child.properties?.viewed\"\r\n                                      [matTooltip]=\"child.properties?.viewed ? ('core.component.form-builder.unset-readonly' | translate) : ('core.component.form-builder.set-readonly' | translate)\"\r\n                                      (click)=\"onChangeViewed(child); $event.stopPropagation()\">\r\n                                <span class=\"msi\">edit_off</span>\r\n                              </button>\r\n                              <button type=\"button\" class=\"fb-icon-btn\"\r\n                                      [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\r\n                                      (click)=\"onDuplicate(child); $event.stopPropagation()\">\r\n                                <span class=\"msi\">content_copy</span>\r\n                              </button>\r\n                              <button type=\"button\" class=\"fb-icon-btn\"\r\n                                      [class.warning]=\"child.properties?.hidden\"\r\n                                      [class.on]=\"child.properties?.hidden\"\r\n                                      [matTooltip]=\"child.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                      (click)=\"onChangeHidden(child); $event.stopPropagation()\">\r\n                                <span class=\"msi\">{{ child.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                              </button>\r\n                              <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                      [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                      (click)=\"removeFromGroup(g, child.id); $event.stopPropagation()\">\r\n                                <span class=\"msi\">delete</span>\r\n                              </button>\r\n                            </div>\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  } @else if (item.type === 'break') {\r\n                    <!-- Break: row separator c\u1ED1 \u0111\u1ECBnh. Render 12-col line, kh\u00F4ng c\u00F3 resize/edit attribute. -->\r\n                    <div\r\n                      cdkDrag\r\n                      [id]=\"item.id\"\r\n                      class=\"fb-item is-break column-12\"\r\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\r\n                      [class.is-hidden]=\"item.properties?.hidden\"\r\n                     (click)=\"selectComponent(item); $event.stopPropagation()\"\n                     (cdkDragStarted)=\"dragStartComponentItem($event); onAnyDragStarted()\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                     (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                     aria-hidden=\"true\">\n                      <!-- Generic puck preview -->\r\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                      <div class=\"fb-break-line\">\r\n                        <span class=\"msi\">horizontal_rule</span>\r\n                        <span class=\"fb-break-label\">{{ 'core.component.form-builder.break' | translate }}</span>\r\n                      </div>\r\n                      <div class=\"fb-actions\">\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.hidden\"\r\n                                [class.on]=\"item.properties?.hidden\"\r\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\r\n                          <span class=\"msi\">delete</span>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <!-- Regular form component -->\r\n                    <div\r\n                      cdkDrag\r\n                      [id]=\"item.id\"\r\n                      class=\"fb-item column-{{ item.layout?.columns || 12 }}\"\r\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\r\n                      [class.is-hidden]=\"item.properties?.hidden\"\r\n                      [class.is-readonly]=\"item.properties?.viewed\"\r\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event); onAnyDragStarted()\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <!-- Generic puck preview -->\r\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n\r\n                      <!-- Status chip (mutually exclusive priority: hidden > readonly > conditional) -->\r\n                      @if (item.properties?.hidden) {\r\n                        <span class=\"fb-status-chip hidden\">\r\n                          <span class=\"msi\">visibility_off</span>\r\n                          {{ 'core.component.form-builder.hidden' | translate }}\r\n                        </span>\r\n                      } @else if (item.properties?.viewed) {\r\n                        <span class=\"fb-status-chip readonly\">\r\n                          <span class=\"msi\">edit_off</span>\r\n                          {{ 'core.component.form-builder.read-only' | translate }}\r\n                        </span>\r\n                      } @else if (hasConditional(item)) {\r\n                        <span class=\"fb-status-chip conditional\">\r\n                          <span class=\"msi\">bolt</span>\r\n                          {{ 'core.component.form-builder.conditional' | translate }}\r\n                        </span>\r\n                      }\r\n\r\n                      <!-- Floating action toolbar pill -->\r\n                      <div class=\"fb-actions\">\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.viewed\"\r\n                                [class.on]=\"item.properties?.viewed\"\r\n                                [matTooltip]=\"item.properties?.viewed ? ('core.component.form-builder.unset-readonly' | translate) : ('core.component.form-builder.set-readonly' | translate)\"\r\n                                (click)=\"onChangeViewed(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">edit_off</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\r\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">content_copy</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn\"\r\n                                [class.warning]=\"item.properties?.hidden\"\r\n                                [class.on]=\"item.properties?.hidden\"\r\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\r\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\r\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\r\n                        </button>\r\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\r\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\r\n                          <span class=\"msi\">delete</span>\r\n                        </button>\r\n                      </div>\r\n\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"controlTemplate; context: { $implicit: item }\">\r\n                      </ng-container>\r\n\r\n                      <!-- Resize handle (pill) \u2014 cdkDragLockAxis=\"x\" \u0111\u1EC3 ch\u1EC9 k\u00E9o ngang.\r\n                           Wrapping cdkDropList c\u00F3 enterPredicate=false, kh\u00F4ng nh\u1EADn drop. -->\r\n                      <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n                        <div\r\n                          cdkDrag\r\n                          cdkDragLockAxis=\"x\"\r\n                          class=\"fb-resize\"\r\n                          (cdkDragStarted)=\"onAnyDragStarted()\"\r\n                          (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                          (cdkDragEnded)=\"dragEndChangeSizeControl($event); onAnyDragEnded()\"\r\n                          [matTooltip]=\"'core.component.form-builder.flex' | translate\"\r\n                          aria-label=\"resize\"></div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RIGHT ATTRIBUTES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <aside class=\"fb-attrs\">\r\n    <div class=\"fb-panel-header\">\r\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.attribute' | translate }}</div>\r\n    </div>\r\n\r\n    @let sel = selectedComponent();\r\n    @if (sel) {\r\n      <!-- Selection header: type icon + name + key/type -->\r\n      <div class=\"fb-attrs__selection\">\r\n        <span class=\"fb-attrs__sel-icon\"><span class=\"msi\">{{ symbolFor(sel) }}</span></span>\r\n        <div class=\"fb-attrs__sel-meta\">\r\n          <div class=\"fb-attrs__sel-name\">{{ $any(sel).label || ('core.component.form-builder.untitled' | translate) }}</div>\r\n          <div class=\"fb-attrs__sel-key\">\r\n            @if ($any(sel).key) {\r\n              {{ $any(sel).key }} \u00B7 {{ typeLabelFor(sel) }}\r\n            } @else {\r\n              {{ typeLabelFor(sel) }}\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"fb-attrs__body\" aria-hidden=\"true\">\r\n        @if (sel.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></textfield-attribute>\r\n        } @else if (sel.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></textarea-attribute>\r\n        } @else if (sel.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></chip-string-attribute>\r\n        } @else if (sel.type === 'chip-calendar') {\r\n          <chip-calendar-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></chip-calendar-attribute>\r\n        } @else if (sel.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></number-attribute>\r\n        } @else if (sel.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></datetime-attribute>\r\n        } @else if (sel.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></select-attribute>\r\n        } @else if (sel.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></radio-attribute>\r\n        } @else if (sel.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></checkbox-attribute>\r\n        } @else if (sel.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></html-attribute>\r\n        } @else if (sel.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></upload-attribute>\r\n        } @else if (sel.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"sel\"></table-attribute>\r\n        } @else if (sel.type === 'group') {\r\n          <group-attribute [group]=\"$any(sel)\"></group-attribute>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <div class=\"fb-attrs__placeholder\">\r\n        <span class=\"msi\">ads_click</span>\r\n        <div class=\"title\">{{ 'core.component.form-builder.no-selection-title' | translate }}</div>\r\n        <div class=\"hint\">{{ 'core.component.form-builder.no-selection-hint' | translate }}</div>\r\n      </div>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Reusable control template \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<ng-template #controlTemplate let-item>\r\n  @if (item.type === 'textfield') {\r\n    <textfield-control [component]=\"item\"></textfield-control>\r\n  } @else if (item.type === 'textarea') {\r\n    <textarea-control [component]=\"item\"></textarea-control>\r\n  } @else if (item.type === 'chip-string') {\r\n    <chip-string-control [component]=\"item\"></chip-string-control>\r\n  } @else if (item.type === 'chip-calendar') {\r\n    <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n  } @else if (item.type === 'number') {\r\n    <number-control [component]=\"item\"></number-control>\r\n  } @else if (item.type === 'datetime') {\r\n    <datetime-control [component]=\"item\"></datetime-control>\r\n  } @else if (item.type === 'select') {\r\n    <select-control [component]=\"item\"></select-control>\r\n  } @else if (item.type === 'radio') {\r\n    <radio-control [component]=\"item\"></radio-control>\r\n  } @else if (item.type === 'checkbox') {\r\n    <checkbox-control [component]=\"item\"></checkbox-control>\r\n  } @else if (item.type === 'html') {\r\n    <html-control [component]=\"item\"></html-control>\r\n  } @else if (item.type === 'upload') {\r\n    <upload-control [component]=\"item\"></upload-control>\r\n  } @else if (item.type === 'table') {\r\n    <table-control [component]=\"item\"></table-control>\r\n  }\r\n</ng-template>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JSON / variables modals \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal [title]=\"'core.component.form-builder.config-variable' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.display-label' | translate\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">{{ 'core.component.form-builder.add-variable' | translate }}</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host{--md-sys-color-primary: var(--sd-primary, #2A66F4);--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: var(--sd-primary-light, #EAF1FF);--md-sys-color-on-primary-container: var(--sd-primary, #2A66F4);--md-sys-color-info: var(--sd-info, #2962FF);--md-sys-color-info-container: var(--sd-info-light, #E7E9FF);--md-sys-color-secondary: #625b71;--md-sys-color-secondary-container: #e8def8;--md-sys-color-on-secondary-container: #1d192b;--md-sys-color-surface: #fbfafc;--md-sys-color-surface-container-lowest: #ffffff;--md-sys-color-surface-container-low: #f6f4f8;--md-sys-color-surface-container: #f1eef3;--md-sys-color-surface-container-high: #ebe8ee;--md-sys-color-surface-container-highest: #e6e2ea;--md-sys-color-on-surface: #1c1b1f;--md-sys-color-on-surface-variant: #49454e;--md-sys-color-outline: #79747e;--md-sys-color-outline-variant: #d6d2da;--md-sys-color-error: #b3261e;--md-sys-color-error-container: #f9dedc;--md-sys-color-warning: #8a5400;--md-sys-color-warning-container: #ffddb1;--md-sys-color-success: #1f6f43;--md-sys-color-success-container: #b7f0cb;--h-row: 28px;--h-field: 32px;--h-palette: 36px;--h-header: 36px;--h-section: 28px;--h-action-btn: 24px;--gap-1: 4px;--gap-2: 8px;--gap-3: 12px;--gap-4: 16px;--gap-5: 24px;--r-xs: 4px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 28px;--r-pill: 999px;--elev-1: 0 1px 2px 0 rgba(0, 0, 0, .06);--elev-2: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .04);--elev-3: 0 6px 14px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);display:block;width:100%;height:100%;font-family:Roboto,system-ui,sans-serif;font-size:13px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface)}:host ::ng-deep .msi{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"wght\" 300,\"opsz\" 24,\"GRAD\" 0,\"FILL\" 0}:host ::ng-deep .msi.filled{font-variation-settings:\"wght\" 300,\"opsz\" 24,\"GRAD\" 0,\"FILL\" 1}:host ::ng-deep .mono{font-family:Roboto Mono,ui-monospace,monospace}:host ::ng-deep .fb-icon-btn{width:28px;height:28px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--md-sys-color-on-surface-variant);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s ease,color .12s ease}:host ::ng-deep .fb-icon-btn:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent);color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-icon-btn.is-active{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}:host ::ng-deep .fb-icon-btn.danger:hover{color:var(--md-sys-color-error);background:var(--md-sys-color-error-container)}:host ::ng-deep .fb-icon-btn.warning.on{color:var(--md-sys-color-warning);background:var(--md-sys-color-warning-container)}:host ::ng-deep .fb-icon-btn .msi{font-size:18px}:host ::ng-deep .fb-field{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .fb-field__label{font-size:11px;font-weight:500;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-field__input{height:var(--h-row);padding:0 10px;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px;display:flex;align-items:center;justify-content:space-between;color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-field__input.placeholder{color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-field__input:focus-within,:host ::ng-deep .fb-field__input.focused{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent)}:host ::ng-deep .fb-field__input .msi{font-size:16px;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-field-row{display:flex;align-items:center;gap:var(--gap-2);justify-content:space-between}:host ::ng-deep .fb-switch{display:inline-flex;width:34px;height:18px;border-radius:999px;background:var(--md-sys-color-surface-container-highest);border:1.5px solid var(--md-sys-color-outline);padding:1px;align-items:center;cursor:pointer;position:relative;flex-shrink:0}:host ::ng-deep .fb-switch .fb-switch__thumb{width:12px;height:12px;border-radius:50%;background:var(--md-sys-color-outline)}:host ::ng-deep .fb-switch.on{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);justify-content:flex-end}:host ::ng-deep .fb-switch.on .fb-switch__thumb{background:var(--md-sys-color-on-primary);width:14px;height:14px}:host ::ng-deep .fb-expr{display:flex;align-items:center;gap:6px;height:var(--h-row);padding:0 6px 0 0;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-expr__badge{height:100%;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);font-family:Roboto Mono,monospace;font-size:10px;font-weight:500;border-radius:var(--r-xs) 0 0 var(--r-xs)}:host ::ng-deep .fb-expr__code{font-family:Roboto Mono,monospace;flex:1;font-size:11px;color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-expr__code .var{color:var(--md-sys-color-primary);font-weight:500}:host ::ng-deep .fb-expr__code .op{color:var(--md-sys-color-error)}:host ::ng-deep .fb-expr__code .lit{color:var(--md-sys-color-success)}:host ::ng-deep .fb-expr .empty{color:var(--md-sys-color-on-surface-variant);font-style:italic;padding-left:6px;flex:1}:host ::ng-deep details.fb-section{border-bottom:1px solid var(--md-sys-color-outline-variant);margin:0;padding:0;background:transparent}:host ::ng-deep details.fb-section>summary{list-style:none}:host ::ng-deep details.fb-section>summary::-webkit-details-marker{display:none}:host ::ng-deep .fb-section__head{height:var(--h-section);padding:0 var(--gap-4);display:flex;align-items:center;gap:var(--gap-2);cursor:pointer;font-size:12px;font-weight:500;color:var(--md-sys-color-on-surface);-webkit-user-select:none;user-select:none}:host ::ng-deep .fb-section__head .msi{font-size:16px;color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .fb-section__head .fb-section__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .fb-section__head .chev{margin-left:auto;transition:transform .16s ease}:host ::ng-deep details.fb-section[open] .fb-section__head .chev{transform:rotate(90deg)}:host ::ng-deep .fb-section__body{padding:4px var(--gap-4) var(--gap-3);display:flex;flex-direction:column;gap:var(--gap-2)}:host ::ng-deep .fb-columns-list{display:flex;flex-direction:column;gap:var(--gap-1);padding-top:var(--gap-1)}:host ::ng-deep .fb-column-row{display:flex;align-items:center;gap:var(--gap-2);height:40px;padding:6px 10px;border-radius:var(--r-sm);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px;cursor:pointer;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}:host ::ng-deep .fb-column-row:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-primary) 30%,transparent)}:host ::ng-deep .fb-column-row.is-active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 30%,transparent)}:host ::ng-deep .fb-column-row .fb-column-row__type-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}:host ::ng-deep .fb-column-row .fb-column-row__type-icon .msi{font-size:16px}:host ::ng-deep .fb-column-row .fb-column-row__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}:host ::ng-deep .fb-column-row .fb-column-row__meta .fb-column-row__label{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--md-sys-color-on-surface)}:host ::ng-deep .fb-column-row .fb-column-row__meta .fb-column-row__req{color:var(--md-sys-color-error);margin-left:2px;font-weight:600}:host ::ng-deep .fb-column-row .fb-column-row__meta .fb-column-row__sub{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:Roboto Mono,ui-monospace,monospace;letter-spacing:.02em}:host ::ng-deep .cdk-drag-preview.fb-drag-preview,:host ::ng-deep .fb-drag-preview{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;box-sizing:border-box;border-radius:50%;background:var(--md-sys-color-primary, #6750a4);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 24px #00000042,0 3px 8px #00000024;border:3px solid var(--md-sys-color-on-primary, #ffffff);cursor:grabbing;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.96;overflow:hidden;z-index:10000}:host ::ng-deep .cdk-drag-preview.fb-drag-preview:after,:host ::ng-deep .fb-drag-preview:after{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-on-primary, #ffffff);opacity:.9}@keyframes fb-drop-pulse{0%,to{box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-info) 16%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--md-sys-color-info) 24%,transparent)}}:host ::ng-deep .cdk-drag-placeholder{background:transparent!important;border:none!important;border-radius:999px!important;padding:0!important;transform:none!important;transition:none!important;pointer-events:none;overflow:hidden;animation:none!important;opacity:0!important}:host ::ng-deep .cdk-drag-placeholder>*{visibility:hidden!important;pointer-events:none!important}:host ::ng-deep .fb-palette__list>.cdk-drag-placeholder{display:none!important}:host ::ng-deep .fb-row__items>.cdk-drag-placeholder,:host ::ng-deep .fb-group__body>.cdk-drag-placeholder{width:0!important;min-width:0!important;max-width:0!important;height:auto!important;min-height:0!important;align-self:stretch;flex:0 0 0!important;margin:0!important}:host ::ng-deep [cdkDropListOrientation=vertical]>.cdk-drag-placeholder{width:auto!important;height:0!important;min-height:0!important;max-height:0!important;flex:0 0 0!important;margin:0!important;align-self:stretch}:host ::ng-deep .cdk-drop-list-receiving{background:color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent);transition:background .16s ease}:host ::ng-deep .fb-group__body.cdk-drop-list-receiving,:host ::ng-deep .fb-group__body.cdk-drop-list-dragging{background:color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent)!important;outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 78%,transparent);outline-offset:-6px;border-radius:var(--r-sm)}:host ::ng-deep .fb-resize.cdk-drag-preview{display:none!important}:host ::ng-deep .fb-shell--dragging .fb-item:hover,:host ::ng-deep .fb-shell--dragging .fb-group:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-item:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group:hover{border-color:transparent!important;background:transparent!important}:host ::ng-deep .fb-shell--dragging .fb-row:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row:hover{outline-color:transparent!important;background:transparent!important}:host ::ng-deep .fb-shell--dragging .fb-row:hover .fb-row__drag,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row:hover .fb-row__drag{opacity:0!important}:host ::ng-deep .fb-shell--dragging .fb-row.is-drag-target,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row.is-drag-target{outline-color:color-mix(in srgb,var(--md-sys-color-info) 44%,transparent)!important;background:color-mix(in srgb,var(--md-sys-color-info) 4%,transparent)!important}:host ::ng-deep .fb-shell--dragging .fb-row__drag,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row__drag{opacity:0!important}:host ::ng-deep .fb-shell--dragging .fb-actions,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-actions{opacity:0!important;pointer-events:none!important;transform:translateY(-2px)!important}:host ::ng-deep .fb-shell--dragging .fb-resize,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-resize{opacity:0!important;pointer-events:none!important}:host ::ng-deep .fb-shell--dragging .fb-row-break-btn,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-row-break-btn{opacity:0!important;pointer-events:none!important}:host ::ng-deep .fb-shell--dragging .fb-palette-item:hover,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-palette-item:hover{background:transparent!important}:host ::ng-deep .fb-shell--dragging .fb-palette-item:hover .fb-palette-item__drag,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-palette-item:hover .fb-palette-item__drag{opacity:0!important}:host ::ng-deep .fb-shell--dragging .fb-group__body,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__body{min-height:80px!important;background:color-mix(in srgb,var(--md-sys-color-primary) 5%,transparent)!important;outline:2px dashed color-mix(in srgb,var(--md-sys-color-primary) 50%,transparent)!important;outline-offset:-6px;border-radius:var(--r-sm);transition:background .16s ease,outline .16s ease,min-height .16s ease}:host ::ng-deep .fb-shell--dragging .fb-group__empty,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__empty{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary) 7%,transparent);color:var(--md-sys-color-primary)}:host ::ng-deep .fb-shell--dragging .fb-group__body.cdk-drop-list-receiving,:host ::ng-deep .fb-shell--dragging .fb-group__body.cdk-drop-list-dragging,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__body.cdk-drop-list-receiving,:host ::ng-deep .fb-shell:has(.cdk-drag-dragging) .fb-group__body.cdk-drop-list-dragging{background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)!important;outline:2px solid var(--md-sys-color-primary)!important}:host ::ng-deep .cdk-drag-animating{transition:transform .22s cubic-bezier(.2,0,0,1)!important}:host ::ng-deep .cdk-drag-dragging{transition:none!important}:host ::ng-deep .fb-item:not(.cdk-drag-dragging){transition:flex .12s cubic-bezier(.2,0,0,1),max-width .12s cubic-bezier(.2,0,0,1),border-color .12s,background .12s}.fb-shell{width:100%;height:100%;display:flex;background:var(--md-sys-color-surface);overflow:hidden;min-height:0}.fb-panel-header{height:var(--h-header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gap-3);border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);flex-shrink:0}.fb-panel-header__title{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.fb-panel-header__actions{display:flex;align-items:center;gap:2px}.fb-palette{width:220px;flex-shrink:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-right:1px solid var(--md-sys-color-outline-variant)}.fb-palette__scroll{flex:1;overflow-y:auto;padding-bottom:var(--gap-3)}.fb-palette__search{margin:var(--gap-3);height:32px;display:flex;align-items:center;gap:var(--gap-2);padding:0 var(--gap-3);border-radius:var(--r-pill);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:13px;flex-shrink:0}.fb-palette__search .msi{font-size:18px}.fb-palette__search input{flex:1;border:none;outline:none;background:transparent;color:var(--md-sys-color-on-surface);font-size:13px;font-family:inherit}.fb-palette__search input::placeholder{color:var(--md-sys-color-on-surface-variant)}.fb-palette__search .kbd{font-family:Roboto Mono,monospace;font-size:10px;padding:1px 6px;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant)}.fb-palette__group-label{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--md-sys-color-on-surface-variant);padding:var(--gap-3) var(--gap-4) var(--gap-1);text-transform:uppercase}.fb-palette__list{display:flex;flex-direction:column;padding:0 var(--gap-2)}.fb-palette-item{height:var(--h-palette);display:flex;align-items:center;gap:var(--gap-3);padding:0 var(--gap-3);border-radius:var(--r-sm);cursor:grab;color:var(--md-sys-color-on-surface);position:relative;-webkit-user-select:none;user-select:none}.fb-palette-item:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}.fb-palette-item .fb-palette-item__icon{width:24px;height:24px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);flex-shrink:0}.fb-palette-item .fb-palette-item__icon .msi{font-size:16px}.fb-palette-item .fb-palette-item__name{font-size:13px;font-weight:400}.fb-palette-item .fb-palette-item__drag{margin-left:auto;color:var(--md-sys-color-outline);opacity:0;transition:opacity .12s ease}.fb-palette-item .fb-palette-item__drag .msi{font-size:16px}.fb-palette-item:hover .fb-palette-item__drag{opacity:1}.fb-canvas{flex:1 1 0;min-width:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface);overflow:hidden}.fb-canvas__header{height:var(--h-header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gap-4);border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);gap:var(--gap-3);flex-shrink:0}.fb-canvas__title{display:flex;align-items:center;gap:var(--gap-2);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.fb-canvas__title .breadcrumb-sep{color:var(--md-sys-color-outline)}.fb-canvas__actions{display:flex;align-items:center;gap:var(--gap-2)}.fb-divider{width:1px;height:18px;background:var(--md-sys-color-outline-variant)}.fb-canvas__body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding:var(--gap-4);position:relative;background:var(--md-sys-color-surface);min-width:0}.fb-canvas__body.is-preview{background:var(--md-sys-color-surface-container-low);padding:32px}.fb-mode-toggle{display:inline-flex;height:28px;border:1px solid var(--md-sys-color-outline);border-radius:var(--r-pill);overflow:hidden;flex-shrink:0}.fb-mode-toggle button{border:0;background:transparent;padding:0 var(--gap-3);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant);cursor:pointer}.fb-mode-toggle button .msi{font-size:16px}.fb-mode-toggle button.is-active{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.fb-row{position:relative;display:flex;gap:var(--gap-2);padding:6px var(--gap-2);border-radius:var(--r-sm);margin-bottom:6px;min-width:0;transition:outline .12s ease,background .12s ease;outline:1px dashed transparent;outline-offset:-1px}.fb-row:hover{outline-color:var(--md-sys-color-outline-variant);background:color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent)}.fb-row:hover .fb-row__drag{opacity:1}.fb-row.is-drag-target{outline-color:color-mix(in srgb,var(--md-sys-color-info) 44%,transparent);background:color-mix(in srgb,var(--md-sys-color-info) 4%,transparent)}.fb-row.is-drag-target:after{content:\"\";position:absolute;left:10px;right:10px;bottom:-3px;height:4px;border-radius:999px;background:var(--md-sys-color-info);box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-info) 18%,transparent);pointer-events:none;animation:fb-drop-pulse .9s ease-in-out infinite;z-index:3}.fb-row__drag{position:absolute;left:-22px;top:50%;transform:translateY(-50%);width:18px;height:22px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-high);opacity:0;cursor:grab;z-index:2}.fb-row__drag .msi{font-size:14px}.fb-row-break-btn{position:absolute;right:-28px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;opacity:0;z-index:2;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-row-break-btn .msi{font-size:14px}.fb-row-break-btn:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);border-color:transparent}.fb-row:hover .fb-row-break-btn{opacity:1}.fb-item{position:relative;border:1.5px dashed transparent;border-radius:var(--r-md);padding:var(--gap-2) var(--gap-3);min-height:56px;min-width:0;transition:border-color .12s ease,background .12s ease;background:transparent;cursor:grab;display:flex;flex-direction:column;gap:6px}.fb-item:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 60%,transparent)}.fb-item.is-selected{border:1.5px solid var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent)}.fb-item.is-hidden{opacity:.45}.fb-item.is-readonly:after{content:\"\";position:absolute;inset:0;border-radius:var(--r-md);background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--md-sys-color-on-surface) 4%,transparent) 6px 7px);pointer-events:none}.fb-item.column-2{flex:0 0 calc(16.6666666667% - var(--gap-2));max-width:calc(16.6666666667% - var(--gap-2))}.fb-item.column-3{flex:0 0 calc(25% - var(--gap-2));max-width:calc(25% - var(--gap-2))}.fb-item.column-4{flex:0 0 calc(33.3333333333% - var(--gap-2));max-width:calc(33.3333333333% - var(--gap-2))}.fb-item.column-5{flex:0 0 calc(41.6666666667% - var(--gap-2));max-width:calc(41.6666666667% - var(--gap-2))}.fb-item.column-6{flex:0 0 calc(50% - var(--gap-2));max-width:calc(50% - var(--gap-2))}.fb-item.column-7{flex:0 0 calc(58.3333333333% - var(--gap-2));max-width:calc(58.3333333333% - var(--gap-2))}.fb-item.column-8{flex:0 0 calc(66.6666666667% - var(--gap-2));max-width:calc(66.6666666667% - var(--gap-2))}.fb-item.column-9{flex:0 0 calc(75% - var(--gap-2));max-width:calc(75% - var(--gap-2))}.fb-item.column-10{flex:0 0 calc(83.3333333333% - var(--gap-2));max-width:calc(83.3333333333% - var(--gap-2))}.fb-item.column-11{flex:0 0 calc(91.6666666667% - var(--gap-2));max-width:calc(91.6666666667% - var(--gap-2))}.fb-item.column-12{flex:1 1 100%;max-width:100%}.fb-actions{position:absolute;top:-14px;right:8px;display:flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--md-sys-color-surface-container-lowest);box-shadow:var(--elev-2);border:1px solid var(--md-sys-color-outline-variant);z-index:4;opacity:0;transform:translateY(-2px);pointer-events:none;transition:opacity .12s ease,transform .12s ease}.fb-actions .fb-icon-btn{width:24px;height:24px}.fb-actions .fb-icon-btn .msi{font-size:16px}.fb-item:hover .fb-actions,.fb-item.is-selected .fb-actions{opacity:1;transform:translateY(0);pointer-events:auto}.fb-group>.fb-actions{top:6px;right:8px}.fb-group:hover>.fb-actions,.fb-group.is-selected>.fb-actions{opacity:1;transform:translateY(0);pointer-events:auto}.fb-status-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;height:18px;border-radius:var(--r-pill);font-size:10px;font-weight:500;letter-spacing:.02em;position:absolute;top:-9px;left:12px;z-index:3;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface-variant)}.fb-status-chip .msi{font-size:12px}.fb-status-chip.readonly{color:var(--md-sys-color-warning);background:var(--md-sys-color-warning-container);border-color:transparent}.fb-status-chip.hidden{color:var(--md-sys-color-on-surface-variant)}.fb-status-chip.conditional{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);border-color:transparent}.fb-resize{position:absolute;top:8px;bottom:8px;right:-5px;width:6px;border-radius:999px;background:var(--md-sys-color-primary);display:flex;align-items:center;justify-content:center;cursor:col-resize;opacity:0;transition:opacity .12s ease;z-index:3}.fb-resize:before{content:\"\";width:2px;height:18px;background:var(--md-sys-color-on-primary);border-radius:999px}.fb-item:hover .fb-resize{opacity:1}.fb-item.is-break{min-height:28px;padding:8px var(--gap-3);justify-content:center}.fb-break-line{display:flex;align-items:center;gap:var(--gap-2);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.fb-break-line:before,.fb-break-line:after{content:\"\";flex:1;height:1px;background:var(--md-sys-color-outline-variant)}.fb-break-line .msi{display:none}.fb-break-line .fb-break-label{color:var(--md-sys-color-on-surface-variant)}.fb-drop-hint{height:36px;border-radius:var(--r-sm);border:1.5px dashed var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent);color:var(--md-sys-color-primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;gap:6px;margin:4px 0}.fb-drop-hint .msi{font-size:16px}.fb-group{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--r-lg);border:1.5px dashed transparent;transition:border-color .12s ease,background .12s ease;position:relative;display:flex;flex-direction:column;overflow:visible;cursor:default}.fb-group:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 60%,transparent)}.fb-group.is-selected{border:1.5px solid var(--md-sys-color-primary)}.fb-group.is-hidden{opacity:.55}.fb-group__header{display:flex;align-items:center;gap:var(--gap-2);padding:8px 12px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:grab}.fb-group__header:active{cursor:grabbing}.fb-group__header .fb-group__icon .msi{font-size:18px}.fb-group__header .fb-group__label{font-size:13px;font-weight:500}.fb-group__header .fb-group__count{margin-left:auto;font-size:10px;opacity:.75}.fb-group__conditional-chip{display:inline-flex;align-items:center;gap:4px;font-family:Roboto Mono,monospace;font-size:10px;padding:2px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,currentColor 12%,transparent)}.fb-group__body{padding:12px;display:flex;flex-wrap:wrap;gap:var(--gap-2);min-height:60px;position:relative}.fb-group__empty{display:flex;align-items:center;justify-content:center;height:56px;border-radius:var(--r-sm);border:1.5px dashed var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-style:italic}.fb-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-3);color:var(--md-sys-color-on-surface-variant);text-align:center;padding:24px;pointer-events:none}.fb-empty__art{width:96px;height:96px;border-radius:var(--r-xl);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center}.fb-empty__art .msi{font-size:44px}.fb-empty__title{font-size:16px;font-weight:500;color:var(--md-sys-color-on-surface)}.fb-empty__hint{font-size:13px;max-width:320px;line-height:1.5}.fb-empty__kbd{display:inline-flex;align-items:center;gap:6px;font-family:Roboto Mono,monospace;font-size:11px;padding:4px 8px;border-radius:var(--r-xs);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.fb-empty__kbd .msi{font-size:12px}.fb-attrs{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-left:1px solid var(--md-sys-color-outline-variant)}.fb-attrs__selection{padding:var(--gap-3) var(--gap-4);display:flex;align-items:center;gap:var(--gap-2);border-bottom:1px solid var(--md-sys-color-outline-variant)}.fb-attrs__sel-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.fb-attrs__sel-icon .msi{font-size:18px}.fb-attrs__sel-meta{display:flex;flex-direction:column;min-width:0}.fb-attrs__sel-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-attrs__sel-key{font-family:Roboto Mono,monospace;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.fb-attrs__body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;min-width:0}.fb-attrs__placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-2);padding:32px;color:var(--md-sys-color-on-surface-variant);text-align:center}.fb-attrs__placeholder .msi{font-size:32px;color:var(--md-sys-color-outline)}.fb-attrs__placeholder .title{font-size:13px;font-weight:500;color:var(--md-sys-color-on-surface)}.fb-attrs__placeholder .hint{font-size:12px;max-width:220px;line-height:1.5}.fb-preview-card{max-width:760px;margin:0 auto;background:var(--md-sys-color-surface-container-lowest);border-radius:var(--r-lg);padding:32px;box-shadow:var(--elev-1)}.fb-preview-card__chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;height:22px;border-radius:var(--r-pill);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--gap-3)}.fb-preview-card__title{font-size:20px;font-weight:500;margin:0 0 var(--gap-4);color:var(--md-sys-color-on-surface)}.fb-preview-card__footer{display:flex;justify-content:flex-end;gap:var(--gap-2);margin-top:var(--gap-4);padding-top:var(--gap-4);border-top:1px solid var(--md-sys-color-outline-variant)}.fb-icon-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:4px}.fb-icon-picker .fb-icon-picker__btn{height:28px;border-radius:var(--r-xs);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface-variant);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.fb-icon-picker .fb-icon-picker__btn .msi{font-size:16px}.fb-icon-picker .fb-icon-picker__btn.is-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary)}.fb-icon-picker .fb-icon-picker__btn:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}.fb-color-swatches{display:flex;gap:var(--gap-2);margin-top:4px}.fb-color-swatches .fb-color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent}.fb-color-swatches .fb-color-swatch.is-active{border-color:var(--md-sys-color-on-surface)}.fb-color-swatches .fb-color-swatch.primary{background:var(--md-sys-color-primary)}.fb-color-swatches .fb-color-swatch.secondary{background:var(--md-sys-color-secondary)}.fb-color-swatches .fb-color-swatch.success{background:var(--md-sys-color-success)}.fb-color-swatches .fb-color-swatch.warning{background:var(--md-sys-color-warning)}.fb-color-swatches .fb-color-swatch.error{background:var(--md-sys-color-error)}.fb-children-list{display:flex;flex-direction:column;gap:4px}.fb-child-row{display:flex;align-items:center;gap:var(--gap-2);height:30px;padding:0 8px;border-radius:var(--r-xs);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);font-size:12px}.fb-child-row .fb-child-row__icon{width:22px;height:22px;border-radius:var(--r-xs);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.fb-child-row .fb-child-row__icon .msi{font-size:14px}.fb-child-row .fb-child-row__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-child-row .fb-child-row__key{font-family:Roboto Mono,monospace;font-size:10px;color:var(--md-sys-color-on-surface-variant)}.fb-child-row:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent)}.fb-add-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--md-sys-color-primary);cursor:pointer;padding:4px 0;text-decoration:none}.fb-add-link .msi{font-size:14px}.fb-add-link:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [] });
 
 /* eslint-disable @angular-eslint/no-input-rename */
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -6364,11 +6681,11 @@ class SdFeelExpression extends SdBaseSecureComponent {
         return attributes;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFeelExpression, deps: [{ token: i0.ChangeDetectorRef }, { token: ExpressionFeelPipe }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdFeelExpression, isStandalone: true, selector: "sd-feel-expression", inputs: { components: "components", _expression: ["expression", "_expression"], _model: ["model", "_model"] }, outputs: { expressionChange: "expressionChange", modelChange: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{model || '--'}}</a>\r\n@if (expression) {\r\n<sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"calculate\" class=\"mr-4\" title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n      <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCondition(expression.conditions)\" type=\"fill\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n      <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n        <div class=\"c-condition\">\r\n          <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n          @if (idxLv1 === 0) {\r\n            <div class=\"c-where\">WHERE</div>\r\n          }\r\n          <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n          @if (idxLv1 === 1) {\r\n            <div class=\"c-select\">\r\n              <sd-select\r\n                size=\"sm\"\r\n                [(model)]=\"expression.combinator\"\r\n                [items]=\"[\r\n                  { value: '&&', display: 'AND' },\r\n                  { value: '||', display: 'OR' }\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                required\r\n                hideInlineError=\"\"></sd-select>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv1.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv1.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n            @if(!!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL') {\r\n              @if(fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if(fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input-number>\r\n              } @else if(fieldAttribute.type === 'boolean') {\r\n                <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n              }@else if(fieldAttribute.type === 'values') {\r\n                <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button\r\n              class=\"ml-auto\"\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n         \r\n        } @else if (conditionLv1.type === 'combinator') {\r\n          <div class=\"c-builder\">\r\n            <div class=\"d-flex justify-content-end\">\r\n              <sd-button\r\n                class=\"mr-4\"\r\n                prefixIcon=\"delete\"\r\n                tooltip=\"X\u00F3a\"\r\n                (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n              <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" size=\"sm\" color=\"primary\" (click)=\"addCondition(conditionLv1.conditions)\" type=\"fill\"></sd-button>\r\n            </div>\r\n            <!-- C\u1EA5p 2 -->\r\n            @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n              <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n                <div class=\"c-condition\">\r\n                  <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                  @if (idxLv2 === 0) {\r\n                    <div class=\"c-where\">WHERE</div>\r\n                  }\r\n                  <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                  @if (idxLv2 === 1) {\r\n                    <div class=\"c-select\">\r\n                      <sd-select\r\n                        size=\"sm\"\r\n                        [(model)]=\"conditionLv1.combinator\"\r\n                        [items]=\"[\r\n                          { value: '&&', display: 'AND' },\r\n                          { value: '||', display: 'OR' }\r\n                        ]\"\r\n                        valueField=\"value\"\r\n                        displayField=\"display\"\r\n                        required\r\n                        hideInlineError=\"\"></sd-select>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv2.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv2.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n                    @if(!!fieldAttribute?.type && conditionLv2.operator && conditionLv2.operator !== 'NULL' && conditionLv2.operator !== 'NOT_NULL') {\r\n                      @if(fieldAttribute.type === 'string') {\r\n                        <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input>\r\n                      } @else if(fieldAttribute.type === 'number') {\r\n                        <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input-number>\r\n                      } @else if(fieldAttribute.type === 'boolean') {\r\n                        <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n                      }@else if(fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                 \r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n}", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { 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", "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: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdFeelExpression, isStandalone: true, selector: "sd-feel-expression", inputs: { components: "components", _expression: ["expression", "_expression"], _model: ["model", "_model"] }, outputs: { expressionChange: "expressionChange", modelChange: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{model || '--'}}</a>\r\n@if (expression) {\r\n<sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"calculate\" class=\"mr-4\" [title]=\"'core.component.form-builder.condition-group' | translate\" color=\"primary\" (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.condition' | translate\" color=\"primary\" (click)=\"addCondition(expression.conditions)\" type=\"fill\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n      <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n        <div class=\"c-condition\">\r\n          <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n          @if (idxLv1 === 0) {\r\n            <div class=\"c-where\">WHERE</div>\r\n          }\r\n          <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n          @if (idxLv1 === 1) {\r\n            <div class=\"c-select\">\r\n              <sd-select\r\n                size=\"sm\"\r\n                [(model)]=\"expression.combinator\"\r\n                [items]=\"[\r\n                  { value: '&&', display: 'AND' },\r\n                  { value: '||', display: 'OR' }\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                required\r\n                hideInlineError=\"\"></sd-select>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv1.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv1.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n            @if(!!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL') {\r\n              @if(fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if(fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input-number>\r\n              } @else if(fieldAttribute.type === 'boolean') {\r\n                <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n              }@else if(fieldAttribute.type === 'values') {\r\n                <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button\r\n              class=\"ml-auto\"\r\n              prefixIcon=\"delete\"\r\n              [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n              (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n         \r\n        } @else if (conditionLv1.type === 'combinator') {\r\n          <div class=\"c-builder\">\r\n            <div class=\"d-flex justify-content-end\">\r\n              <sd-button\r\n                class=\"mr-4\"\r\n                prefixIcon=\"delete\"\r\n                [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n              <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.condition' | translate\" size=\"sm\" color=\"primary\" (click)=\"addCondition(conditionLv1.conditions)\" type=\"fill\"></sd-button>\r\n            </div>\r\n            <!-- C\u1EA5p 2 -->\r\n            @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n              <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n                <div class=\"c-condition\">\r\n                  <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                  @if (idxLv2 === 0) {\r\n                    <div class=\"c-where\">WHERE</div>\r\n                  }\r\n                  <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                  @if (idxLv2 === 1) {\r\n                    <div class=\"c-select\">\r\n                      <sd-select\r\n                        size=\"sm\"\r\n                        [(model)]=\"conditionLv1.combinator\"\r\n                        [items]=\"[\r\n                          { value: '&&', display: 'AND' },\r\n                          { value: '||', display: 'OR' }\r\n                        ]\"\r\n                        valueField=\"value\"\r\n                        displayField=\"display\"\r\n                        required\r\n                        hideInlineError=\"\"></sd-select>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv2.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv2.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n                    @if(!!fieldAttribute?.type && conditionLv2.operator && conditionLv2.operator !== 'NULL' && conditionLv2.operator !== 'NOT_NULL') {\r\n                      @if(fieldAttribute.type === 'string') {\r\n                        <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input>\r\n                      } @else if(fieldAttribute.type === 'number') {\r\n                        <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input-number>\r\n                      } @else if(fieldAttribute.type === 'boolean') {\r\n                        <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n                      }@else if(fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                 \r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n}", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, 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", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { 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", "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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFeelExpression, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-feel-expression', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdInput$1, SdInputNumber, SdSelect$1, SdAutocomplete$1, SdButton, SdSelect$1, SdModal], template: "<a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{model || '--'}}</a>\r\n@if (expression) {\r\n<sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"calculate\" class=\"mr-4\" title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n      <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCondition(expression.conditions)\" type=\"fill\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n      <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n        <div class=\"c-condition\">\r\n          <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n          @if (idxLv1 === 0) {\r\n            <div class=\"c-where\">WHERE</div>\r\n          }\r\n          <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n          @if (idxLv1 === 1) {\r\n            <div class=\"c-select\">\r\n              <sd-select\r\n                size=\"sm\"\r\n                [(model)]=\"expression.combinator\"\r\n                [items]=\"[\r\n                  { value: '&&', display: 'AND' },\r\n                  { value: '||', display: 'OR' }\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                required\r\n                hideInlineError=\"\"></sd-select>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv1.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv1.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n            @if(!!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL') {\r\n              @if(fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if(fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input-number>\r\n              } @else if(fieldAttribute.type === 'boolean') {\r\n                <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n              }@else if(fieldAttribute.type === 'values') {\r\n                <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button\r\n              class=\"ml-auto\"\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n         \r\n        } @else if (conditionLv1.type === 'combinator') {\r\n          <div class=\"c-builder\">\r\n            <div class=\"d-flex justify-content-end\">\r\n              <sd-button\r\n                class=\"mr-4\"\r\n                prefixIcon=\"delete\"\r\n                tooltip=\"X\u00F3a\"\r\n                (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n              <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" size=\"sm\" color=\"primary\" (click)=\"addCondition(conditionLv1.conditions)\" type=\"fill\"></sd-button>\r\n            </div>\r\n            <!-- C\u1EA5p 2 -->\r\n            @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n              <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n                <div class=\"c-condition\">\r\n                  <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                  @if (idxLv2 === 0) {\r\n                    <div class=\"c-where\">WHERE</div>\r\n                  }\r\n                  <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                  @if (idxLv2 === 1) {\r\n                    <div class=\"c-select\">\r\n                      <sd-select\r\n                        size=\"sm\"\r\n                        [(model)]=\"conditionLv1.combinator\"\r\n                        [items]=\"[\r\n                          { value: '&&', display: 'AND' },\r\n                          { value: '||', display: 'OR' }\r\n                        ]\"\r\n                        valueField=\"value\"\r\n                        displayField=\"display\"\r\n                        required\r\n                        hideInlineError=\"\"></sd-select>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv2.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv2.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n                    @if(!!fieldAttribute?.type && conditionLv2.operator && conditionLv2.operator !== 'NULL' && conditionLv2.operator !== 'NOT_NULL') {\r\n                      @if(fieldAttribute.type === 'string') {\r\n                        <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input>\r\n                      } @else if(fieldAttribute.type === 'number') {\r\n                        <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input-number>\r\n                      } @else if(fieldAttribute.type === 'boolean') {\r\n                        <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n                      }@else if(fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                 \r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n}", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
+            args: [{ selector: 'sd-feel-expression', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdInput$1, SdInputNumber, SdSelect$1, SdAutocomplete$1, SdButton, SdSelect$1, SdModal, TranslatePipe], template: "<a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{model || '--'}}</a>\r\n@if (expression) {\r\n<sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"calculate\" class=\"mr-4\" [title]=\"'core.component.form-builder.condition-group' | translate\" color=\"primary\" (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.condition' | translate\" color=\"primary\" (click)=\"addCondition(expression.conditions)\" type=\"fill\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n      <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n        <div class=\"c-condition\">\r\n          <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n          @if (idxLv1 === 0) {\r\n            <div class=\"c-where\">WHERE</div>\r\n          }\r\n          <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n          @if (idxLv1 === 1) {\r\n            <div class=\"c-select\">\r\n              <sd-select\r\n                size=\"sm\"\r\n                [(model)]=\"expression.combinator\"\r\n                [items]=\"[\r\n                  { value: '&&', display: 'AND' },\r\n                  { value: '||', display: 'OR' }\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                required\r\n                hideInlineError=\"\"></sd-select>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv1.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv1.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n            @if(!!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL') {\r\n              @if(fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if(fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input-number>\r\n              } @else if(fieldAttribute.type === 'boolean') {\r\n                <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n              }@else if(fieldAttribute.type === 'values') {\r\n                <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button\r\n              class=\"ml-auto\"\r\n              prefixIcon=\"delete\"\r\n              [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n              (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n         \r\n        } @else if (conditionLv1.type === 'combinator') {\r\n          <div class=\"c-builder\">\r\n            <div class=\"d-flex justify-content-end\">\r\n              <sd-button\r\n                class=\"mr-4\"\r\n                prefixIcon=\"delete\"\r\n                [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n              <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.condition' | translate\" size=\"sm\" color=\"primary\" (click)=\"addCondition(conditionLv1.conditions)\" type=\"fill\"></sd-button>\r\n            </div>\r\n            <!-- C\u1EA5p 2 -->\r\n            @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n              <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n                <div class=\"c-condition\">\r\n                  <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                  @if (idxLv2 === 0) {\r\n                    <div class=\"c-where\">WHERE</div>\r\n                  }\r\n                  <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                  @if (idxLv2 === 1) {\r\n                    <div class=\"c-select\">\r\n                      <sd-select\r\n                        size=\"sm\"\r\n                        [(model)]=\"conditionLv1.combinator\"\r\n                        [items]=\"[\r\n                          { value: '&&', display: 'AND' },\r\n                          { value: '||', display: 'OR' }\r\n                        ]\"\r\n                        valueField=\"value\"\r\n                        displayField=\"display\"\r\n                        required\r\n                        hideInlineError=\"\"></sd-select>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv2.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv2.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n                    @if(!!fieldAttribute?.type && conditionLv2.operator && conditionLv2.operator !== 'NULL' && conditionLv2.operator !== 'NOT_NULL') {\r\n                      @if(fieldAttribute.type === 'string') {\r\n                        <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input>\r\n                      } @else if(fieldAttribute.type === 'number') {\r\n                        <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input-number>\r\n                      } @else if(fieldAttribute.type === 'boolean') {\r\n                        <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n                      }@else if(fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                 \r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n}", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ExpressionFeelPipe }, { type: FormGenericService }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
@@ -6393,5 +6710,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AttributeOperators, DayInfoPreviouses, DayInfoTypes, EvaluateExpression, ExpressionToJavascriptExpression, FormBuilderComponents, GenerateId, GenerateKey, GetAttributes, GetComponentAttributes, GetDatetimeValue, GetVariableAttributes, Operators, SD_FORM_GENERIC_CONFIGURATION, SdFeelExpression, SdFormBuilder, SdFormRender, SdFormRenderService, SdFormatComponent, TableColumnTypes, TemplateToCondition };
+export { AttributeOperators, COMPONENT_ICONS, DayInfoPreviouses, DayInfoTypes, EvaluateExpression, ExpressionToJavascriptExpression, FormBuilderComponents, GenerateId, GenerateKey, GetAttributes, GetComponentAttributes, GetDatetimeValue, GetVariableAttributes, Operators, SD_FORM_GENERIC_CONFIGURATION, SdFeelExpression, SdFormBuilder, SdFormRender, SdFormRenderService, SdFormatComponent, TableColumnTypes, TemplateToCondition };
 //# sourceMappingURL=sd-angular-core-components-form-generic.mjs.map