@sdcorejs/angular 19.0.8 → 19.0.10

package/fesm2022/sdcorejs-angular-components-form-generic.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Optional, Injectable, Pipe, SecurityContext, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList, inject, input, ChangeDetectorRef, effect, untracked, viewChild, signal, computed } from '@angular/core';
+import { InjectionToken, inject, Injectable, Pipe, SecurityContext, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList, ChangeDetectorRef, viewChild, input, effect, untracked, signal, computed } from '@angular/core';
 import { Utilities, StringUtilities as StringUtilities$1 } from '@sdcorejs/utils/fns';
 import { DateUtilities } from '@sdcorejs/angular/utilities';
 import * as i3 from '@angular/cdk/drag-drop';
@@ -19,7 +19,7 @@ import { SdNotifyService, SdConfirmService } from '@sdcorejs/angular/services';
 import { Subscription, Subject, filter, debounceTime, startWith, combineLatest } from 'rxjs';
 import { SdSection } from '@sdcorejs/angular/components/section';
 import { startWith as startWith$1, debounceTime as debounceTime$1 } from 'rxjs/operators';
-import { DateUtilities as DateUtilities$1, StringUtilities, ArrayUtilities, NumberUtilities } from '@sdcorejs/angular/utilities/extensions';
+import { DateUtilities as DateUtilities$1, StringUtilities, NumberUtilities, ArrayUtilities } from '@sdcorejs/angular/utilities/extensions';
 import { EMPTY_STR } from '@sdcorejs/utils/constants';
 import * as i1 from '@sdcorejs/angular/pipes';
 import * as i1$1 from '@angular/platform-browser';
@@ -32,15 +32,15 @@ import { SdUploadFile } from '@sdcorejs/angular/components/upload-file';
 import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
 import { SdTable, SdTableCellDefDirective } from '@sdcorejs/angular/components/table';
 import { TranslatePipe, I18nService } from '@sdcorejs/angular/i18n';
-import { SdAutocomplete as SdAutocomplete$1 } from '@sdcorejs/angular/forms/autocomplete';
+import { SdQueryBuilder } from '@sdcorejs/angular/components/query-builder';
 import { SdSelect as SdSelect$1 } from '@sdcorejs/angular/forms/select';
-import { SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
+import { SdAutocomplete as SdAutocomplete$1 } from '@sdcorejs/angular/forms/autocomplete';
 import { MatDividerModule } from '@angular/material/divider';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
 import * as i1$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import { SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const SD_FORM_GENERIC_CONFIGURATION = new InjectionToken('sd.form-generic.configuration');
 
 const GenerateId = () => {
@@ -172,9 +172,9 @@ const FormBuilderComponents = [
     // ── 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' },
+    { type: 'html', symbol: 'code', group: 'layout', name: 'HTML' },
 ];
-/** Lookup: component type → Material Symbol + label, used by attribute panel header. */
+/** Lookup: component type → Material icon + 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 = [];
@@ -593,12 +593,9 @@ const ConvertToJavascriptExpression = (condition) => {
 };
 
 class FormGenericService {
-    configuration;
     #selections;
     #definitionHtmls;
-    constructor(configuration) {
-        this.configuration = configuration;
-    }
+    configuration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
     get selections() {
         return this.configuration?.form?.selections || [];
     }
@@ -744,7 +741,7 @@ class FormGenericService {
             return '';
         },
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormGenericService, decorators: [{
@@ -752,12 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }, {
-                    type: Optional
-                }] }] });
+        }] });
 
 class SdFormRenderService {
     componentViewedPipe;
@@ -792,7 +784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [{ type: ComponentViewedPipe }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Pipe xử lý hiển thị detail cho component
 class ComponentViewedPipe {
     formatNumberPipe;
@@ -881,7 +872,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.SdFormatNumberPipe }, { type: FormGenericService }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Xử lý thông tin required, disabled, hidden của component
 class WhenExpressionPipe {
     #hidden = (component, variables) => {
@@ -1197,7 +1187,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Pipe xử lý hiển thị detail cho component
 class HtmlPipe {
     sanitizer;
@@ -1227,7 +1216,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Pipe xử lý hiển thị detail cho component
 class HyperlinkPipe {
     constructor() { }
@@ -1248,8 +1236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class TextfieldComponent {
     ref;
     setVariables;
@@ -1368,8 +1354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['validator']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class TextareaComponent {
     ref;
     setVariables;
@@ -1449,8 +1433,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class ChipStringComponent {
     ref;
     setVariables;
@@ -1532,8 +1514,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class ChipCalendarComponent {
     ref;
     setVariables;
@@ -1615,8 +1595,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class NumberComponent {
     ref;
     setVariables;
@@ -1698,8 +1676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class DatetimeComponent {
     router;
     ref;
@@ -1746,11 +1722,14 @@ class DatetimeComponent {
         this.#subscription.unsubscribe();
     }
     onNavigate = (url) => {
-        if (url?.startsWith('http')) {
+        if (!url) {
+            return;
+        }
+        if (url.startsWith('http')) {
             window.open(url);
         }
         else {
-            const [path, queryString] = url?.split('?');
+            const [path, queryString] = url.split('?');
             const queryParams = Utilities.parseQueryParams(queryString);
             this.router.navigate([path], { queryParams });
         }
@@ -1796,8 +1775,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class SelectComponent {
     router;
     ref;
@@ -1951,11 +1928,14 @@ class SelectComponent {
         }
     };
     onNavigate = (url) => {
-        if (url?.startsWith('http')) {
+        if (!url) {
+            return;
+        }
+        if (url.startsWith('http')) {
             window.open(url);
         }
         else {
-            const [path, queryString] = url?.split('?');
+            const [path, queryString] = url.split('?');
             const queryParams = Utilities.parseQueryParams(queryString);
             this.router.navigate([path], { queryParams });
         }
@@ -2002,8 +1982,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['validator']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class RadioComponent {
     router;
     ref;
@@ -2085,11 +2063,14 @@ class RadioComponent {
         this.#subscription.unsubscribe();
     }
     onNavigate = (url) => {
-        if (url?.startsWith('http')) {
+        if (!url) {
+            return;
+        }
+        if (url.startsWith('http')) {
             window.open(url);
         }
         else {
-            const [path, queryString] = url?.split('?');
+            const [path, queryString] = url.split('?');
             const queryParams = Utilities.parseQueryParams(queryString);
             this.router.navigate([path], { queryParams });
         }
@@ -2104,7 +2085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdRadio,
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
-                        HyperlinkPipe
+                        HyperlinkPipe,
                     ], template: "@if (entity && component) {\n  <sd-radio\n    [form]=\"form\"\n    [label]=\"component.label || component.key\"\n    [name]=\"component.key\"\n    [autoId]=\"component.key\"\n    [(model)]=\"entity[component.key!]\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [items]=\"items\"\n    valueField=\"value\"\n    displayField=\"display\"\n    [display]=\"component.properties?.direction\"\n    [viewed]=\"viewed || component.properties?.viewed\"\n    [hyperlink]=\"component.properties?.hyperlink | hyperlink: entity\"></sd-radio>\n}\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { setVariables: [{
                 type: Input,
@@ -2132,8 +2113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class UploadComponent {
     ref;
     setVariables;
@@ -2227,8 +2206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['validator']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class TableComponent {
     ref;
     formGenericService;
@@ -2297,7 +2274,6 @@ class TableComponent {
     #initTable = async () => {
         // Xử lý columns
         const columns = [];
-        //console.log( this.component?.columns)
         for (const column of this.component?.columns || []) {
             // Ghi nhận lại vào object formRenderColumn để có thể xử lý customType hoặc một vài thuộc tính khác khi render UI
             this.formRenderColumn[column.key] = column;
@@ -2450,7 +2426,6 @@ class TableComponent {
                     },
                 });
             }
-            //console.log( this.imageKeys ,this.fileKeys )
         }
         // await this.#onLoaded();
         this.tableOption = {
@@ -2625,8 +2600,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class HtmlComponent {
     ref;
     formRenderService;
@@ -2778,8 +2751,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class LibItemComponent {
     itemUpload;
     itemTable;
@@ -2838,7 +2809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         RadioComponent,
                         TableComponent,
                         UploadComponent,
-                        HtmlComponent
+                        HtmlComponent,
                     ], template: "@if (entity && component) {\n  @if (component.type === 'textfield') {\n    <div [class]=\"col\">\n      <lib-textfield\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [entity]=\"entity\"\n        [component]=\"component\"\n        [validator]=\"validator\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-textfield>\n    </div>\n  } @else if (component.type === 'textarea') {\n    <div [class]=\"col\">\n      <lib-textarea\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [entity]=\"entity\"\n        [component]=\"component\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-textarea>\n    </div>\n  } @else if (component.type === 'chip-string') {\n    <div [class]=\"col\">\n      <lib-chip-string\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [entity]=\"entity\"\n        [component]=\"component\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-chip-string>\n    </div>\n  } @else if (component.type === 'chip-calendar') {\n    <div [class]=\"col\">\n      <lib-chip-calendar\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [entity]=\"entity\"\n        [component]=\"component\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-chip-calendar>\n    </div>\n  } @else if (component.type === 'number') {\n    <div [class]=\"col\">\n      <lib-number\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [entity]=\"entity\"\n        [component]=\"component\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-number>\n    </div>\n  }\n  @if (component.type === 'select') {\n    <div [class]=\"col\">\n      <lib-select\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [component]=\"component\"\n        [entity]=\"entity\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [validator]=\"validator\"\n        [viewed]=\"viewed\"></lib-select>\n    </div>\n  } @else if (component.type === 'radio') {\n    <div [class]=\"col\">\n      <lib-radio\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [component]=\"component\"\n        [entity]=\"entity\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-radio>\n    </div>\n  } @else if (component.type === 'datetime') {\n    <div [class]=\"col\">\n      <lib-datetime\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [entity]=\"entity\"\n        [component]=\"component\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [viewed]=\"viewed\"></lib-datetime>\n    </div>\n  } @else if (component.type === 'upload') {\n    <div [class]=\"col\">\n      <lib-upload\n        [setVariables]=\"setVariables\"\n        [form]=\"form\"\n        [component]=\"component\"\n        [entity]=\"entity\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [validator]=\"validator\"\n        [viewed]=\"viewed\">\n      </lib-upload>\n    </div>\n  } @else if (component.type === 'table') {\n    <div [class]=\"col\">\n      <lib-table [setVariables]=\"setVariables\" [component]=\"component\" [(model)]=\"entity[component.key!]\" [viewed]=\"viewed\"></lib-table>\n    </div>\n  } @else if (component.type === 'html') {\n    <div [class]=\"col\">\n      <lib-html [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" [component]=\"component\" [viewed]=\"viewed\"> </lib-html>\n    </div>\n  } @else if (component.type === 'break') {\n    <!-- Break: empty 12-col placeholder \u00E9p xu\u1ED1ng d\u00F2ng. Kh\u00F4ng render g\u00EC runtime. -->\n    <div class=\"col-12\" style=\"height: 0;\"></div>\n  }\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { itemUpload: [{
                 type: ViewChild,
@@ -2877,8 +2848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['validator']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class VariableComponent {
     ref;
     variables;
@@ -2906,7 +2875,11 @@ class VariableComponent {
             // Khi nhận được tín hiệu setVariables từ nơi khác, nếu variable này thuộc ds variables thì thực hiện gán variable
             this.#subscription.add(this.setVariables.pipe(filter(variable => !!this.variables?.some(e => e.key === variable.key))).subscribe(variable => {
                 this.entity[variable.key] = variable.value;
-                this.form.setValue(this.entity);
+                if (this.form.controls[variable.key]) {
+                    this.form.patchValue({ [variable.key]: variable.value });
+                }
+                this.form.controls['sdRaw']?.setValue({ ...this.entity });
+                this.ref.markForCheck();
             }));
         }
     }
@@ -2935,18 +2908,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     }]
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/no-input-rename */
 class SdFormRender {
-    ref;
-    formGenericConfiguration;
     formRenderItems = new QueryList();
     form = new FormGroup({});
     configuration;
     set _configuration(val) {
-        this.configuration = val;
+        this.configuration = this.#cloneAndFormatConfiguration(val);
         // Luôn format lại component trước khi render
-        this.configuration?.components?.forEach(SdFormatComponent);
         this.#configurationChanges.next(this.configuration);
     }
     // Dựa vào giá trị default sẽ gán cho entity
@@ -2972,22 +2940,22 @@ class SdFormRender {
     #configurationChanges = new Subject();
     #defaultEntityChanges = new Subject();
     #entityChanges = new Subject();
+    #renderScheduled = false;
+    #destroyed = false;
     loadCompleted = false;
     hashedValues;
     formValue = {};
     // Các component item của form-render sẽ lắng nghe thay đổi
     setVariables = new Subject();
-    constructor(ref, formGenericConfiguration) {
-        this.ref = ref;
-        this.formGenericConfiguration = formGenericConfiguration;
-    }
+    ref = inject(ChangeDetectorRef);
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
     ngAfterViewInit() {
         this.#subscription.add(combineLatest([this.#configurationChanges, this.#entityChanges])
             .pipe(startWith$1([]))
             .subscribe(async () => {
             if (this.entity && this.configuration?.components?.length) {
                 this.loadCompleted = true;
-                this.ref.markForCheck(); // Vì loadCompleted ko phải là @Input nên component sẽ ko load lại
+                this.#scheduleRender();
                 if (this.configuration?.onLoaded) {
                     try {
                         this.configuration.onLoaded();
@@ -3002,15 +2970,11 @@ class SdFormRender {
             for (const key of Object.keys({ ...defaultEntity })) {
                 this.entity[key] = this.entity[key] ?? defaultEntity[key];
             }
-            this.form.setValue(this.entity);
+            this.#patchRegisteredControls(this.entity);
+            this.#syncRawControl(this.entity);
         }));
         this.#subscription.add(this.#entityChanges.pipe(startWith$1(this.entity)).subscribe(entity => {
-            if (!this.form.controls['sdRaw']) {
-                this.form.addControl('sdRaw', new FormControl({ ...entity }));
-            }
-            else {
-                this.form.controls['sdRaw'].setValue({ ...entity });
-            }
+            this.#syncRawControl(entity);
         }));
         this.#subscription.add(this.form.valueChanges.pipe(debounceTime$1(500), startWith$1(this.form.value)).subscribe(values => {
             const hashedValues = Utilities.hash(values);
@@ -3018,11 +2982,12 @@ class SdFormRender {
                 this.hashedValues = hashedValues;
                 // Ở trạng thái view thì không có FormControl nên phải binding entity mới có dữ liệu cho formValue
                 this.formValue = { ...this.entity, ...values };
-                this.ref.markForCheck();
+                this.#scheduleRender();
             }
         }));
     }
     ngOnDestroy() {
+        this.#destroyed = true;
         this.#subscription.unsubscribe();
     }
     // Hàm này sẽ đi qua các components và các columns trong table để xử lý upload file
@@ -3062,18 +3027,58 @@ class SdFormRender {
         }
         return messages;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormRender, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    #cloneAndFormatConfiguration(configuration) {
+        return {
+            ...configuration,
+            components: (configuration?.components || []).map(component => this.#cloneAndFormatComponent(component)),
+        };
+    }
+    #patchRegisteredControls(entity) {
+        const registeredValue = {};
+        for (const key of Object.keys(entity)) {
+            if (key !== 'sdRaw' && this.form.controls[key]) {
+                registeredValue[key] = entity[key];
+            }
+        }
+        if (Object.keys(registeredValue).length) {
+            this.form.patchValue(registeredValue);
+        }
+    }
+    #syncRawControl(entity) {
+        if (!this.form.controls['sdRaw']) {
+            this.form.addControl('sdRaw', new FormControl({ ...entity }));
+        }
+        else {
+            this.form.controls['sdRaw'].setValue({ ...entity });
+        }
+    }
+    #cloneAndFormatComponent(component) {
+        const clonedComponent = JSON.parse(JSON.stringify(component));
+        SdFormatComponent(clonedComponent);
+        if (clonedComponent.type === 'group') {
+            clonedComponent.components = clonedComponent.components.map(child => this.#cloneAndFormatComponent(child));
+        }
+        return clonedComponent;
+    }
+    #scheduleRender() {
+        if (this.#renderScheduled || this.#destroyed) {
+            return;
+        }
+        this.#renderScheduled = true;
+        queueMicrotask(() => {
+            this.#renderScheduled = false;
+            if (!this.#destroyed) {
+                this.ref.detectChanges();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormRender, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdFormRender, isStandalone: true, selector: "sd-form-render", inputs: { form: "form", _configuration: ["configuration", "_configuration"], _default: ["defaultEntity", "_default"], _entity: ["entity", "_entity"], _properties: ["properties", "_properties"], _viewed: ["viewed", "_viewed"] }, viewQueries: [{ propertyName: "formRenderItems", predicate: LibItemComponent, descendants: true }], ngImport: i0, template: "@if (form && loadCompleted && hashedValues) {\n  <div class=\"row mx-0\">\n    @for (component of configuration.components; track component.id) {\n      @let expression = hashedValues | whenExpression: component : formValue;\n      @if (!expression.hidden) {\n        @if (component.type === 'group') {\n          @if (!!component.components.length) {\n            <div class=\"col-12 mt-16\">\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\n                <div class=\"row mx-0\">\n                  @for (childComponent of component.components; track childComponent.id) {\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\n                    @if (!childExpression.hidden) {\n                      <lib-item\n                        [setVariables]=\"setVariables\"\n                        [form]=\"form\"\n                        [entity]=\"entity\"\n                        [component]=\"childComponent\"\n                        [required]=\"childExpression.required\"\n                        [disabled]=\"childExpression.disabled\"\n                        [viewed]=\"viewed\"></lib-item>\n                    }\n                  }\n                </div>\n              </sd-section>\n            </div>\n          }\n        } @else {\n          <lib-item\n            [setVariables]=\"setVariables\"\n            [form]=\"form\"\n            [entity]=\"entity\"\n            [component]=\"component\"\n            [required]=\"expression.required\"\n            [disabled]=\"expression.disabled\"\n            [viewed]=\"viewed\"></lib-item>\n        }\n      }\n    }\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsible", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: LibItemComponent, selector: "lib-item", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "pipe", type: WhenExpressionPipe, name: "whenExpression" }, { kind: "component", type: VariableComponent, selector: "variable", inputs: ["variables", "setVariables", "form", "entity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdFormRender, decorators: [{
             type: Component,
             args: [{ selector: 'sd-form-render', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdSection, LibItemComponent, WhenExpressionPipe, VariableComponent], template: "@if (form && loadCompleted && hashedValues) {\n  <div class=\"row mx-0\">\n    @for (component of configuration.components; track component.id) {\n      @let expression = hashedValues | whenExpression: component : formValue;\n      @if (!expression.hidden) {\n        @if (component.type === 'group') {\n          @if (!!component.components.length) {\n            <div class=\"col-12 mt-16\">\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\n                <div class=\"row mx-0\">\n                  @for (childComponent of component.components; track childComponent.id) {\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\n                    @if (!childExpression.hidden) {\n                      <lib-item\n                        [setVariables]=\"setVariables\"\n                        [form]=\"form\"\n                        [entity]=\"entity\"\n                        [component]=\"childComponent\"\n                        [required]=\"childExpression.required\"\n                        [disabled]=\"childExpression.disabled\"\n                        [viewed]=\"viewed\"></lib-item>\n                    }\n                  }\n                </div>\n              </sd-section>\n            </div>\n          }\n        } @else {\n          <lib-item\n            [setVariables]=\"setVariables\"\n            [form]=\"form\"\n            [entity]=\"entity\"\n            [component]=\"component\"\n            [required]=\"expression.required\"\n            [disabled]=\"expression.disabled\"\n            [viewed]=\"viewed\"></lib-item>\n        }\n      }\n    }\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { formRenderItems: [{
+        }], propDecorators: { formRenderItems: [{
                 type: ViewChildren,
                 args: [LibItemComponent]
             }], form: [{
@@ -3095,175 +3100,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: ['viewed']
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Component xây dựng Expression dựa vào SdFormGenericExpression
-class ExpressionBuilderComponent {
-    ref;
-    modal;
-    form = new FormGroup({});
-    attributeOperators = AttributeOperators;
-    attributes = [];
-    numberAttributes = [];
-    dateAttributes = [];
-    attribute = {};
-    types = DayInfoTypes;
-    previouses = DayInfoPreviouses;
-    label;
-    set _attributes(attributes) {
-        this.attributes = attributes || [];
-        this.numberAttributes = this.attributes
-            .filter(e => e.type === 'number')
-            .map(e => ({
-            ...e,
-            value: '${' + e.value + '}',
-        }));
-        this.dateAttributes = this.attributes
-            .filter(e => e.type === 'datetime')
-            .map(e => ({
-            ...e,
-            value: '${' + e.value + '}',
-        }));
-        this.attribute = ArrayUtilities.toObject('value', this.attributes);
-    }
-    expression = {
-        key: Utilities.randomId(),
-        type: 'combinator',
-        combinator: '&&',
-        conditions: [],
-    };
-    model = {
-        key: Utilities.randomId(),
-        type: 'combinator',
-        combinator: '&&',
-        conditions: [],
+let expressionId = 0;
+function formAttributesToQueryFields(attributes) {
+    return attributes.map(attribute => ({
+        key: attribute.value,
+        label: attribute.display,
+        type: attribute.type === 'datetime' ? 'datetime' : attribute.type,
+        operators: AttributeOperators[attribute.type].map(operator => operator.value),
+        values: attribute.type === 'values' ? attribute.values : undefined,
+        trueLabel: attribute.type === 'boolean' ? attribute.displayOnTrue : undefined,
+        falseLabel: attribute.type === 'boolean' ? attribute.displayOnFalse : undefined,
+    }));
+}
+function formExpressionToFilter(expression) {
+    if (!expression?.conditions?.length)
+        return null;
+    const data = expression.conditions
+        .map(condition => (condition.type === 'combinator' ? formExpressionToFilter(condition) : conditionToFilter(condition)))
+        .filter((filter) => !!filter);
+    if (!data.length)
+        return null;
+    return {
+        operator: expression.combinator === '||' ? 'OR' : 'AND',
+        data,
     };
-    set _model(model) {
-        if (this.model !== model) {
-            this.model = model;
-        }
-        this.model = this.model || {
-            key: Utilities.randomId(),
-            type: 'combinator',
-            combinator: '&&',
-            conditions: [],
+}
+function filterToFormExpression(filter) {
+    const root = newExpression(filter && isAndOrFilter(filter) && filter.operator === 'OR' ? '||' : '&&');
+    if (!filter)
+        return root;
+    if (isAndOrFilter(filter)) {
+        root.conditions = filter.data.map(filterToExpressionNode);
+        return root;
+    }
+    root.conditions = [filterToCondition(filter)];
+    return root;
+}
+function conditionToFilter(condition) {
+    if (!condition.field || !condition.operator)
+        return null;
+    if (condition.operator === 'NULL' || condition.operator === 'NOT_NULL') {
+        return {
+            field: condition.field,
+            operator: condition.operator,
         };
     }
-    modelChange = new EventEmitter();
-    sdChange = new EventEmitter();
-    edit = new EventEmitter();
-    constructor(ref) {
-        this.ref = ref;
-    }
-    ngOnInit() { }
-    onEdit = async () => {
-        // Khi cập nhật expression thì clone ra
-        this.expression = JSON.parse(JSON.stringify(this.model));
-        // Thông báo cho component cha có sự kiện edit trong trường hợp attributes có thay đổi
-        this.edit.next();
-        this.modal?.open?.();
-        this.ref.markForCheck();
-    };
-    addCondition = (conditions) => {
-        conditions.push({
-            key: Utilities.randomId(),
-            type: 'condition',
-            field: undefined,
-            operator: 'EQUAL',
-            value: undefined,
-            dayInfo: {},
-        });
-        this.ref.markForCheck();
-    };
-    addCombinator = (conditions) => {
-        conditions.push({
-            key: Utilities.randomId(),
-            type: 'combinator',
-            combinator: '&&',
-            conditions: [],
-        });
-        this.ref.markForCheck();
-    };
-    remove = (conditions, idx) => {
-        conditions.splice(idx, 1);
-        this.ref.markForCheck();
+    if (condition.value === undefined || condition.value === null || condition.value === '')
+        return null;
+    return {
+        field: condition.field,
+        operator: condition.operator,
+        data: condition.value,
     };
-    onAccept = () => {
-        if (this.form.invalid) {
-            this.form.markAllAsTouched();
-            return;
-        }
-        this.model = this.expression;
-        this.modelChange.emit(this.model);
-        this.sdChange.emit(this.model);
-        this.modal?.close();
-        this.ref.markForCheck();
+}
+function filterToExpressionNode(filter) {
+    return isAndOrFilter(filter) ? filterToGroupExpression(filter) : filterToCondition(filter);
+}
+function filterToGroupExpression(filter) {
+    return {
+        ...newExpression(filter.operator === 'OR' ? '||' : '&&'),
+        conditions: filter.data.map(filterToExpressionNode),
     };
-    onChangeAttribute = (condition) => {
-        const fieldAttribute = this.attribute[condition.field];
-        if (fieldAttribute.type === 'datetime') {
-            condition.dayInfo = condition.dayInfo || {};
-        }
+}
+function filterToCondition(filter) {
+    const raw = filter;
+    const relative = readRelativeDate(raw);
+    return {
+        key: nextExpressionId('condition'),
+        type: 'condition',
+        field: raw['field'],
+        operator: raw['operator'],
+        value: relative.value,
+        dayInfo: relative.dayInfo,
     };
-    onChangeDateInfo = (condition) => {
-        // Xử lý giá trị
-        if (condition.dayInfo?.type === 'NOW') {
-            condition.value = 'now';
-        }
-        else if (condition.dayInfo?.type === 'RELATED' && condition.dayInfo.relatedValue) {
-            condition.value = DayInfoPreviouses.find(e => e.value === condition.dayInfo.related)?.format(condition.dayInfo.relatedValue) ?? null;
-        }
-        else if (condition.value?.type === 'DATETIME' && condition.value) {
-            condition.value = DateUtilities$1.toFormat(condition.value, 'yyyy/MM/dd HH:mm:00');
+}
+function readRelativeDate(filter) {
+    if (filter['dataType'] === 'date-today') {
+        return { value: 'now', dayInfo: { type: 'NOW' } };
+    }
+    if (filter['dataType'] === 'date-relative') {
+        const data = filter['data'];
+        if (data?.unit === 'day' && typeof data.amount === 'number') {
+            const related = data.direction === 'next' ? 'NEXTDAY' : 'LASTDAY';
+            const suffix = related === 'NEXTDAY' ? 'NextDay' : 'LastDay';
+            return {
+                value: `${data.amount}${suffix}`,
+                dayInfo: {
+                    type: 'RELATED',
+                    related,
+                    relatedValue: data.amount,
+                },
+            };
         }
+    }
+    return { value: filter['data'], dayInfo: {} };
+}
+function newExpression(combinator) {
+    return {
+        key: nextExpressionId('group'),
+        type: 'combinator',
+        combinator,
+        conditions: [],
     };
-    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: "<!--\n  FEEL-style expression trigger pill (M3 redesign).\n  B\u1EA5m v\u00E0o pill m\u1EDF modal builder hi\u1EC7n t\u1EA1i (onEdit).\n-->\n<div class=\"fb-field\">\n  @if (label) {\n    <div class=\"fb-field__label\">{{ label }}</div>\n  }\n  @let exprText = model | expressionQuery;\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\">\n    <span class=\"fb-expr__badge\">FEEL</span>\n    @if (exprText) {\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\n    } @else {\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\n    }\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\n      <span class=\"msi\">functions</span>\n    </button>\n  </div>\n</div>\n@if (expression) {\n  <sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\n    <div class=\"c-builder\">\n      <div class=\"d-flex justify-content-end\">\n        <sd-button\n          prefixIcon=\"calculate\"\n          class=\"mr-4\"\n          [title]=\"'core.component.form-builder.condition-group' | translate\"\n          color=\"primary\"\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\n        <sd-button\n          prefixIcon=\"add\"\n          [title]=\"'core.component.form-builder.condition' | translate\"\n          color=\"primary\"\n          (click)=\"addCondition(expression.conditions)\"\n          type=\"fill\"></sd-button>\n      </div>\n      <!-- C\u1EA5p 1 -->\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n          <div class=\"c-condition\">\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n            @if (idxLv1 === 0) {\n              <div class=\"c-where\">WHERE</div>\n            }\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n            @if (idxLv1 === 1) {\n              <div class=\"c-select\">\n                <sd-select\n                  size=\"sm\"\n                  [(model)]=\"expression.combinator\"\n                  [items]=\"[\n                    { value: '&&', display: 'AND' },\n                    { value: '||', display: 'OR' }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError=\"\"></sd-select>\n              </div>\n            }\n          </div>\n          @if (conditionLv1.type === 'condition') {\n            <sd-autocomplete\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 200px\"\n              [(model)]=\"conditionLv1.field\"\n              [items]=\"attributes\"\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\n              valueField=\"value\"\n              displayField=\"display\"\n              required\n              hideInlineError></sd-autocomplete>\n            @let fieldAttribute = attribute[conditionLv1.field!];\n            <sd-select\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 100px\"\n              [(model)]=\"conditionLv1.operator\"\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n              valueField=\"value\"\n              displayField=\"display\"\n              [disabled]=\"!fieldAttribute?.type\"\n              required\n              hideInlineError></sd-select>\n            @if (\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\n            ) {\n              @if (fieldAttribute.type === 'string') {\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\n              } @else if (fieldAttribute.type === 'number') {\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"numberAttributes\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  hideInlineError></sd-autocomplete>\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\n                <sd-select\n                  size=\"sm\"\n                  [placeholder]=\"'core.component.form-builder.time' | translate\"\n                  [form]=\"form\"\n                  style=\"width: 150px\"\n                  [items]=\"types\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"conditionLv1.dayInfo.type\"\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                  required\n                  hideInlineError>\n                </sd-select>\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\n                  <sd-input-number\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"width: 80px\"\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    [min]=\"1\"\n                    required\n                    hideInlineError>\n                  </sd-input-number>\n                  <sd-select\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [items]=\"previouses\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    [(model)]=\"conditionLv1.dayInfo.related\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-select>\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\n                  <sd-datetime\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-datetime>\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\n                  <sd-autocomplete\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    [items]=\"dateAttributes\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    hideInlineError></sd-autocomplete>\n                }\n              } @else if (fieldAttribute.type === 'boolean') {\n                <sd-select\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"[\n                    { value: true, display: fieldAttribute.displayOnTrue },\n                    { value: false, display: fieldAttribute.displayOnFalse }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-select>\n              } @else if (fieldAttribute.type === 'values') {\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"fieldAttribute.values\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-autocomplete>\n              }\n            }\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n          } @else if (conditionLv1.type === 'combinator') {\n            <div class=\"c-builder\">\n              <div class=\"d-flex justify-content-end\">\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n                <sd-button\n                  prefixIcon=\"add\"\n                  [title]=\"'core.component.form-builder.condition' | translate\"\n                  size=\"sm\"\n                  color=\"primary\"\n                  (click)=\"addCondition(conditionLv1.conditions)\"\n                  type=\"fill\"></sd-button>\n              </div>\n              <!-- C\u1EA5p 2 -->\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n                  <div class=\"c-condition\">\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n                    @if (idxLv2 === 0) {\n                      <div class=\"c-where\">WHERE</div>\n                    }\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n                    @if (idxLv2 === 1) {\n                      <div class=\"c-select\">\n                        <sd-select\n                          size=\"sm\"\n                          [(model)]=\"conditionLv1.combinator\"\n                          [items]=\"[\n                            { value: '&&', display: 'AND' },\n                            { value: '||', display: 'OR' }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError=\"\"></sd-select>\n                      </div>\n                    }\n                  </div>\n                  @if (conditionLv2.type === 'condition') {\n                    <sd-autocomplete\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 200px\"\n                      [(model)]=\"conditionLv2.field\"\n                      [items]=\"attributes\"\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      required\n                      hideInlineError></sd-autocomplete>\n                    @let fieldAttribute = attribute[conditionLv2.field!];\n                    <sd-select\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 100px\"\n                      [(model)]=\"conditionLv2.operator\"\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      [disabled]=\"!fieldAttribute?.type\"\n                      required\n                      hideInlineError></sd-select>\n                    @if (\n                      !!fieldAttribute?.type &&\n                      conditionLv2.operator &&\n                      conditionLv2.operator !== 'NULL' &&\n                      conditionLv2.operator !== 'NOT_NULL'\n                    ) {\n                      @if (fieldAttribute.type === 'string') {\n                        <sd-input\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          required\n                          hideInlineError></sd-input>\n                      } @else if (fieldAttribute.type === 'number') {\n                        <sd-input-number\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          hideInlineError></sd-input-number>\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"numberAttributes\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          hideInlineError></sd-autocomplete>\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          [placeholder]=\"'core.component.form-builder.time' | translate\"\n                          style=\"width: 150px\"\n                          [items]=\"types\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          [(model)]=\"conditionLv2.dayInfo.type\"\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                          required\n                          hideInlineError>\n                        </sd-select>\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\n                          <sd-input-number\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"width: 80px\"\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            [min]=\"1\"\n                            required\n                            hideInlineError>\n                          </sd-input-number>\n                          <sd-select\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [items]=\"previouses\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            [(model)]=\"conditionLv2.dayInfo.related\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-select>\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\n                          <sd-datetime\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-datetime>\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\n                          <sd-autocomplete\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            [items]=\"dateAttributes\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            hideInlineError></sd-autocomplete>\n                        }\n                      } @else if (fieldAttribute.type === 'boolean') {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"[\n                            { value: true, display: fieldAttribute.displayOnTrue },\n                            { value: false, display: fieldAttribute.displayOnFalse }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-select>\n                      } @else if (fieldAttribute.type === 'values') {\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"fieldAttribute.values\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-autocomplete>\n                      }\n                    }\n                    <sd-button\n                      class=\"ml-auto\"\n                      prefixIcon=\"delete\"\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <ng-container sdFooter>\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\n    </ng-container>\n  </sd-modal>\n}\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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "cleared", "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", "clearable", "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", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "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", "clearable", "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,
-            args: [{ selector: 'expression-builder', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        SdInput$1,
-                        SdInputNumber,
-                        SdSelect$1,
-                        SdAutocomplete$1,
-                        SdButton,
-                        SdSelect$1,
-                        SdModal,
-                        ExpressionQueryPipe,
-                        SdDatetime,
-                        SdSuffixDefDirective,
-                        MatIconModule, TranslatePipe
-                    ], template: "<!--\n  FEEL-style expression trigger pill (M3 redesign).\n  B\u1EA5m v\u00E0o pill m\u1EDF modal builder hi\u1EC7n t\u1EA1i (onEdit).\n-->\n<div class=\"fb-field\">\n  @if (label) {\n    <div class=\"fb-field__label\">{{ label }}</div>\n  }\n  @let exprText = model | expressionQuery;\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\">\n    <span class=\"fb-expr__badge\">FEEL</span>\n    @if (exprText) {\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\n    } @else {\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\n    }\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\n      <span class=\"msi\">functions</span>\n    </button>\n  </div>\n</div>\n@if (expression) {\n  <sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\n    <div class=\"c-builder\">\n      <div class=\"d-flex justify-content-end\">\n        <sd-button\n          prefixIcon=\"calculate\"\n          class=\"mr-4\"\n          [title]=\"'core.component.form-builder.condition-group' | translate\"\n          color=\"primary\"\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\n        <sd-button\n          prefixIcon=\"add\"\n          [title]=\"'core.component.form-builder.condition' | translate\"\n          color=\"primary\"\n          (click)=\"addCondition(expression.conditions)\"\n          type=\"fill\"></sd-button>\n      </div>\n      <!-- C\u1EA5p 1 -->\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n          <div class=\"c-condition\">\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n            @if (idxLv1 === 0) {\n              <div class=\"c-where\">WHERE</div>\n            }\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n            @if (idxLv1 === 1) {\n              <div class=\"c-select\">\n                <sd-select\n                  size=\"sm\"\n                  [(model)]=\"expression.combinator\"\n                  [items]=\"[\n                    { value: '&&', display: 'AND' },\n                    { value: '||', display: 'OR' }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError=\"\"></sd-select>\n              </div>\n            }\n          </div>\n          @if (conditionLv1.type === 'condition') {\n            <sd-autocomplete\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 200px\"\n              [(model)]=\"conditionLv1.field\"\n              [items]=\"attributes\"\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\n              valueField=\"value\"\n              displayField=\"display\"\n              required\n              hideInlineError></sd-autocomplete>\n            @let fieldAttribute = attribute[conditionLv1.field!];\n            <sd-select\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 100px\"\n              [(model)]=\"conditionLv1.operator\"\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n              valueField=\"value\"\n              displayField=\"display\"\n              [disabled]=\"!fieldAttribute?.type\"\n              required\n              hideInlineError></sd-select>\n            @if (\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\n            ) {\n              @if (fieldAttribute.type === 'string') {\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\n              } @else if (fieldAttribute.type === 'number') {\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"numberAttributes\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  hideInlineError></sd-autocomplete>\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\n                <sd-select\n                  size=\"sm\"\n                  [placeholder]=\"'core.component.form-builder.time' | translate\"\n                  [form]=\"form\"\n                  style=\"width: 150px\"\n                  [items]=\"types\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"conditionLv1.dayInfo.type\"\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                  required\n                  hideInlineError>\n                </sd-select>\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\n                  <sd-input-number\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"width: 80px\"\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    [min]=\"1\"\n                    required\n                    hideInlineError>\n                  </sd-input-number>\n                  <sd-select\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [items]=\"previouses\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    [(model)]=\"conditionLv1.dayInfo.related\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-select>\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\n                  <sd-datetime\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-datetime>\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\n                  <sd-autocomplete\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    [items]=\"dateAttributes\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    hideInlineError></sd-autocomplete>\n                }\n              } @else if (fieldAttribute.type === 'boolean') {\n                <sd-select\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"[\n                    { value: true, display: fieldAttribute.displayOnTrue },\n                    { value: false, display: fieldAttribute.displayOnFalse }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-select>\n              } @else if (fieldAttribute.type === 'values') {\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"fieldAttribute.values\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-autocomplete>\n              }\n            }\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n          } @else if (conditionLv1.type === 'combinator') {\n            <div class=\"c-builder\">\n              <div class=\"d-flex justify-content-end\">\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n                <sd-button\n                  prefixIcon=\"add\"\n                  [title]=\"'core.component.form-builder.condition' | translate\"\n                  size=\"sm\"\n                  color=\"primary\"\n                  (click)=\"addCondition(conditionLv1.conditions)\"\n                  type=\"fill\"></sd-button>\n              </div>\n              <!-- C\u1EA5p 2 -->\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n                  <div class=\"c-condition\">\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n                    @if (idxLv2 === 0) {\n                      <div class=\"c-where\">WHERE</div>\n                    }\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n                    @if (idxLv2 === 1) {\n                      <div class=\"c-select\">\n                        <sd-select\n                          size=\"sm\"\n                          [(model)]=\"conditionLv1.combinator\"\n                          [items]=\"[\n                            { value: '&&', display: 'AND' },\n                            { value: '||', display: 'OR' }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError=\"\"></sd-select>\n                      </div>\n                    }\n                  </div>\n                  @if (conditionLv2.type === 'condition') {\n                    <sd-autocomplete\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 200px\"\n                      [(model)]=\"conditionLv2.field\"\n                      [items]=\"attributes\"\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      required\n                      hideInlineError></sd-autocomplete>\n                    @let fieldAttribute = attribute[conditionLv2.field!];\n                    <sd-select\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 100px\"\n                      [(model)]=\"conditionLv2.operator\"\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      [disabled]=\"!fieldAttribute?.type\"\n                      required\n                      hideInlineError></sd-select>\n                    @if (\n                      !!fieldAttribute?.type &&\n                      conditionLv2.operator &&\n                      conditionLv2.operator !== 'NULL' &&\n                      conditionLv2.operator !== 'NOT_NULL'\n                    ) {\n                      @if (fieldAttribute.type === 'string') {\n                        <sd-input\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          required\n                          hideInlineError></sd-input>\n                      } @else if (fieldAttribute.type === 'number') {\n                        <sd-input-number\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          hideInlineError></sd-input-number>\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"numberAttributes\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          hideInlineError></sd-autocomplete>\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          [placeholder]=\"'core.component.form-builder.time' | translate\"\n                          style=\"width: 150px\"\n                          [items]=\"types\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          [(model)]=\"conditionLv2.dayInfo.type\"\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                          required\n                          hideInlineError>\n                        </sd-select>\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\n                          <sd-input-number\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"width: 80px\"\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            [min]=\"1\"\n                            required\n                            hideInlineError>\n                          </sd-input-number>\n                          <sd-select\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [items]=\"previouses\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            [(model)]=\"conditionLv2.dayInfo.related\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-select>\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\n                          <sd-datetime\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-datetime>\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\n                          <sd-autocomplete\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            [items]=\"dateAttributes\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            hideInlineError></sd-autocomplete>\n                        }\n                      } @else if (fieldAttribute.type === 'boolean') {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"[\n                            { value: true, display: fieldAttribute.displayOnTrue },\n                            { value: false, display: fieldAttribute.displayOnFalse }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-select>\n                      } @else if (fieldAttribute.type === 'values') {\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"fieldAttribute.values\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-autocomplete>\n                      }\n                    }\n                    <sd-button\n                      class=\"ml-auto\"\n                      prefixIcon=\"delete\"\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <ng-container sdFooter>\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\n    </ng-container>\n  </sd-modal>\n}\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]
-            }], label: [{
-                type: Input
-            }], _attributes: [{
-                type: Input,
-                args: ['attributes']
-            }], _model: [{
-                type: Input,
-                args: [{ alias: 'model', required: true }]
-            }], modelChange: [{
-                type: Output
-            }], sdChange: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }] } });
+function nextExpressionId(prefix) {
+    expressionId += 1;
+    return `${prefix}-${expressionId}`;
+}
+function isAndOrFilter(filter) {
+    return !!filter && (filter.operator === 'AND' || filter.operator === 'OR') && Array.isArray(filter.data);
+}
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Component xây dựng Expression dựa vào SdFormGenericExpression
 class AttributeExpression {
     ref;
     formGenericService;
+    modal = viewChild(SdModal);
     components;
     variables;
-    attributes = [];
     label;
+    queryFields = [];
+    draftFilter = null;
     model;
     set _model(model) {
         if (this.model !== model) {
@@ -3276,16 +3232,21 @@ class AttributeExpression {
         this.ref = ref;
         this.formGenericService = formGenericService;
     }
-    ngOnInit() { }
     onEdit = async () => {
-        this.attributes = await this.#getAttributes(this.components, this.variables);
+        const attributes = await this.#getAttributes(this.components, this.variables);
+        this.queryFields = formAttributesToQueryFields(attributes);
+        this.draftFilter = formExpressionToFilter(this.model);
+        this.modal()?.open();
         this.ref.markForCheck();
     };
-    onChange = (value) => {
-        this.modelChange.emit(value);
-        this.sdChange.emit(value);
+    onAccept = () => {
+        const nextModel = filterToFormExpression(this.draftFilter);
+        this.model = nextModel;
+        this.modelChange.emit(nextModel);
+        this.sdChange.emit(nextModel);
+        this.modal()?.close();
+        this.ref.markForCheck();
     };
-    // Từ components map thành các attributes
     #getAttributes = async (components, variables) => {
         const attributes = [];
         if (components?.length) {
@@ -3307,6 +3268,13 @@ class AttributeExpression {
                         type: 'number',
                     });
                 }
+                else if (component.type === 'datetime') {
+                    attributes.push({
+                        value: component.key,
+                        display: component.label,
+                        type: 'datetime',
+                    });
+                }
                 else if (component.type === 'checkbox') {
                     attributes.push({
                         value: component.key,
@@ -3333,7 +3301,6 @@ class AttributeExpression {
                             entity: {},
                             component,
                         });
-                        // Nếu là mảng thì push vào
                         if (Array.isArray(values)) {
                             attributes.push({
                                 value: component.key,
@@ -3365,11 +3332,11 @@ class AttributeExpression {
         return attributes;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeExpression, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: AttributeExpression, isStandalone: true, selector: "attribute-expression", inputs: { components: "components", variables: "variables", label: "label", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "\n\n<expression-builder class=\"d-block py-8\" [label]=\"label\" [(model)]=\"model\" [attributes]=\"attributes\" (sdChange)=\"onChange($event)\" (edit)=\"onEdit()\"></expression-builder>", 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: ExpressionBuilderComponent, selector: "expression-builder", inputs: ["label", "attributes", "model"], outputs: ["modelChange", "sdChange", "edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeExpression, isStandalone: true, selector: "attribute-expression", inputs: { components: "components", variables: "variables", label: "label", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fb-field\">\n  @if (label) {\n    <div class=\"fb-field__label\">{{ label }}</div>\n  }\n  @let exprText = model | expressionQuery;\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onEdit()\" (keydown.space)=\"onEdit()\">\n    <span class=\"fb-expr__badge\">QB</span>\n    @if (exprText) {\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\n    } @else {\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\n    }\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\n      <span class=\"msi\">account_tree</span>\n    </button>\n  </div>\n</div>\n\n<sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\" width=\"920px\">\n  <div class=\"fb-expression-query\">\n    <sd-query-builder [fields]=\"queryFields\" [(value)]=\"draftFilter\"></sd-query-builder>\n  </div>\n  <ng-container sdFooter>\n    <sd-button\n      prefixIcon=\"check\"\n      [title]=\"'core.component.form-builder.confirm' | translate\"\n      (click)=\"onAccept()\"\n      color=\"primary\"\n      type=\"fill\"></sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [":host{display:block;padding:8px 0}.fb-field{display:flex;flex-direction:column;gap:4px}.fb-field__label{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:500}.fb-expr{display:flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--r-xs, 4px);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface-variant);cursor:pointer;overflow:hidden}.fb-expr:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,transparent);outline-offset:2px}.fb-expr__badge{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;min-width:34px;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:600}.fb-expr__code,.empty{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-expr__code{color:var(--md-sys-color-on-surface);font-family:Roboto Mono,monospace;font-size:11px}.empty{font-size:12px}.fb-icon-btn{width:28px;height:28px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:2px;color:var(--md-sys-color-primary);background:transparent;cursor:pointer}.msi{font-family:Material Icons Outlined;font-size:18px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.fb-expression-query{width:100%;min-height:180px}\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: SdQueryBuilder, selector: "sd-query-builder", inputs: ["option", "fields", "mode", "comparisonMode", "disabled", "autoId", "value", "filters", "rootLogic"], outputs: ["valueChange", "filtersChange", "rootLogicChange"] }, { kind: "pipe", type: ExpressionQueryPipe, name: "expressionQuery" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeExpression, decorators: [{
             type: Component,
-            args: [{ selector: 'attribute-expression', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ExpressionBuilderComponent], template: "\n\n<expression-builder class=\"d-block py-8\" [label]=\"label\" [(model)]=\"model\" [attributes]=\"attributes\" (sdChange)=\"onChange($event)\" (edit)=\"onEdit()\"></expression-builder>", 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-expression', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdButton, SdModal, SdQueryBuilder, ExpressionQueryPipe, TranslatePipe], template: "<div class=\"fb-field\">\n  @if (label) {\n    <div class=\"fb-field__label\">{{ label }}</div>\n  }\n  @let exprText = model | expressionQuery;\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onEdit()\" (keydown.space)=\"onEdit()\">\n    <span class=\"fb-expr__badge\">QB</span>\n    @if (exprText) {\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\n    } @else {\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\n    }\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\n      <span class=\"msi\">account_tree</span>\n    </button>\n  </div>\n</div>\n\n<sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\" width=\"920px\">\n  <div class=\"fb-expression-query\">\n    <sd-query-builder [fields]=\"queryFields\" [(value)]=\"draftFilter\"></sd-query-builder>\n  </div>\n  <ng-container sdFooter>\n    <sd-button\n      prefixIcon=\"check\"\n      [title]=\"'core.component.form-builder.confirm' | translate\"\n      (click)=\"onAccept()\"\n      color=\"primary\"\n      type=\"fill\"></sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [":host{display:block;padding:8px 0}.fb-field{display:flex;flex-direction:column;gap:4px}.fb-field__label{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:500}.fb-expr{display:flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--r-xs, 4px);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface-variant);cursor:pointer;overflow:hidden}.fb-expr:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,transparent);outline-offset:2px}.fb-expr__badge{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;min-width:34px;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:600}.fb-expr__code,.empty{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-expr__code{color:var(--md-sys-color-on-surface);font-family:Roboto Mono,monospace;font-size:11px}.empty{font-size:12px}.fb-icon-btn{width:28px;height:28px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:2px;color:var(--md-sys-color-primary);background:transparent;cursor:pointer}.msi{font-family:Material Icons Outlined;font-size:18px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.fb-expression-query{width:100%;min-height:180px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3387,8 +3354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class AttributeInputNumber {
     label;
     set _label(label) {
@@ -3427,7 +3392,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class AttributeInput {
     form;
     label;
@@ -3473,8 +3437,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class AttributeSwitch {
     form;
     label;
@@ -3512,7 +3474,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 // Template là các mẫu do Portal định nghĩa sẵn (key, label ....) để người dùng chọn nhanh
 // Khi thực hiện sao chép 1 template chúng ta sẽ CLONE để tránh ảnh hưởng template gốc
 class AttributeTemplate {
-    formGenericConfiguration;
     templates = [];
     component;
     set _component(component) {
@@ -3520,9 +3481,7 @@ class AttributeTemplate {
         this.templates = this.formGenericConfiguration?.form?.templates?.filter(e => e.component?.type === this.component?.type) || [];
     }
     sdChange = new EventEmitter();
-    constructor(formGenericConfiguration) {
-        this.formGenericConfiguration = formGenericConfiguration;
-    }
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
     onChange = (value) => {
         if (typeof value === 'string') {
             const template = this.templates?.find(e => e.value === value);
@@ -3531,25 +3490,19 @@ class AttributeTemplate {
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeTemplate, isStandalone: true, selector: "attribute-template", inputs: { _component: ["component", "_component"] }, outputs: { sdChange: "sdChange" }, ngImport: i0, template: "@if (templates.length) {\n  <!-- <div class=\"d-flex align-items-center py-4\">\n    <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u m\u1EABu</div>\n    <sd-autocomplete\n      style=\"width: 200px\"\n      size=\"sm\"\n      [(model)]=\"component.template\"\n      [items]=\"templates\"\n      valueField=\"value\"\n      displayField=\"display\"\n      (sdChange)=\"onChange($event)\"\n      hideInlineError></sd-autocomplete>\n  </div> -->\n  <sd-autocomplete\n      class=\"py-8\"\n      size=\"sm\"\n      [label]=\"'core.component.form-builder.template-data' | translate\"\n      [(model)]=\"component.template\"\n      [items]=\"templates\"\n      valueField=\"value\"\n      displayField=\"display\"\n      (sdChange)=\"onChange($event)\"\n      hideInlineError></sd-autocomplete>\n}\n", dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'attribute-template', imports: [SdAutocomplete$1, TranslatePipe], template: "@if (templates.length) {\n  <!-- <div class=\"d-flex align-items-center py-4\">\n    <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u m\u1EABu</div>\n    <sd-autocomplete\n      style=\"width: 200px\"\n      size=\"sm\"\n      [(model)]=\"component.template\"\n      [items]=\"templates\"\n      valueField=\"value\"\n      displayField=\"display\"\n      (sdChange)=\"onChange($event)\"\n      hideInlineError></sd-autocomplete>\n  </div> -->\n  <sd-autocomplete\n      class=\"py-8\"\n      size=\"sm\"\n      [label]=\"'core.component.form-builder.template-data' | translate\"\n      [(model)]=\"component.template\"\n      [items]=\"templates\"\n      valueField=\"value\"\n      displayField=\"display\"\n      (sdChange)=\"onChange($event)\"\n      hideInlineError></sd-autocomplete>\n}\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { _component: [{
+        }], propDecorators: { _component: [{
                 type: Input,
                 args: [{ alias: 'component', required: true }]
             }], sdChange: [{
                 type: Output
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class AttributeTextarea {
     form;
     label;
@@ -3619,7 +3572,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class TextfieldAttribute {
     ref;
     builderService;
@@ -3669,7 +3621,15 @@ class TextfieldAttribute {
 }
 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: [AttributeTemplate, AttributeExpression, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeTextarea, TranslatePipe], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.default-value' | translate\" [(model)]=\"component.defaultValue\"></attribute-input>\n  </div>\n</details>\n\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\n    </div>\n  </details>\n}\n" }]
+            args: [{ selector: 'textfield-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AttributeTemplate,
+                        AttributeExpression,
+                        AttributeInput,
+                        AttributeInputNumber,
+                        AttributeSwitch,
+                        AttributeTextarea,
+                        TranslatePipe,
+                    ], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.default-value' | translate\" [(model)]=\"component.defaultValue\"></attribute-input>\n  </div>\n</details>\n\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\n    </div>\n  </details>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3719,7 +3679,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class TextareaAttribute {
     ref;
     builderService;
@@ -3769,7 +3728,15 @@ class TextareaAttribute {
 }
 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: [AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeExpression, AttributeTextarea, TranslatePipe], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\n  </div>\n</details>\n\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n}\n" }]
+            args: [{ selector: 'textarea-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AttributeTemplate,
+                        AttributeInput,
+                        AttributeInputNumber,
+                        AttributeSwitch,
+                        AttributeExpression,
+                        AttributeTextarea,
+                        TranslatePipe,
+                    ], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\n  </div>\n</details>\n\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    <attribute-input-number [label]=\"'core.component.form-builder.maxlength' | translate\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3781,7 +3748,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class TextareaControl {
     ref;
     builderService;
@@ -3820,7 +3786,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class ChipStringControl {
     ref;
     builderService;
@@ -3860,7 +3825,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class ChipStringAttribute {
     ref;
     builderService;
@@ -3929,7 +3893,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class ChipCalendarControl {
     ref;
     builderService;
@@ -3969,7 +3932,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class ChipCalendarAttribute {
     ref;
     builderService;
@@ -4038,7 +4000,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class NumberAttribute {
     ref;
     builderService;
@@ -4092,7 +4053,15 @@ class NumberAttribute {
 }
 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: [AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeExpression, AttributeTextarea, TranslatePipe], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\n  </div>\n</details>\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    <attribute-input-number [label]=\"'core.component.form-builder.min' | translate\" [(model)]=\"component.validate!.min\"></attribute-input-number>\n    <attribute-input-number [label]=\"'core.component.form-builder.max' | translate\" [(model)]=\"component.validate!.max\"></attribute-input-number>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n}\n" }]
+            args: [{ selector: 'number-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AttributeTemplate,
+                        AttributeInput,
+                        AttributeInputNumber,
+                        AttributeSwitch,
+                        AttributeExpression,
+                        AttributeTextarea,
+                        TranslatePipe,
+                    ], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-textarea [form]=\"form\" [label]=\"'core.component.form-builder.hint' | translate\" [(model)]=\"component.helperText\"></attribute-textarea>\n  </div>\n</details>\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    <attribute-input-number [label]=\"'core.component.form-builder.min' | translate\" [(model)]=\"component.validate!.min\"></attribute-input-number>\n    <attribute-input-number [label]=\"'core.component.form-builder.max' | translate\" [(model)]=\"component.validate!.max\"></attribute-input-number>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4104,7 +4073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class NumberControl {
     ref;
     builderService;
@@ -4145,7 +4113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class DatetimeControl {
     ref;
     builderService;
@@ -4183,8 +4150,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class AttributeSelect {
     form;
     label;
@@ -4249,7 +4214,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class DatetimeAttribute {
     ref;
     builderService;
@@ -4311,8 +4275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 let BuildQueries$1 = class BuildQueries {
     ref;
     modal;
@@ -4406,8 +4368,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class BuildVariables {
     ref;
     modal;
@@ -4521,8 +4481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Template là các mẫu do Portal định nghĩa sẵn (key, label ....) để người dùng chọn nhanh
 // Khi thực hiện sao chép 1 template chúng ta sẽ CLONE để tránh ảnh hưởng template gốc
 class AttributeSelection {
@@ -4618,7 +4576,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class SelectAttribute {
     ref;
     builderService;
@@ -4687,7 +4644,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class SelectControl {
     ref;
     builderService;
@@ -4726,7 +4682,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class RadioControl {
     ref;
     builderService;
@@ -4766,7 +4721,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class RadioAttribute {
     ref;
     builderService;
@@ -4835,7 +4789,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class CheckboxControl {
     component;
     set _component(component) {
@@ -4852,7 +4805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class CheckboxAttribute {
     ref;
     builderService;
@@ -4914,8 +4866,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class BuildQueries {
     ref;
     modal;
@@ -4997,7 +4947,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class HtmlAttribute {
     ref;
     formGenericService;
@@ -5090,7 +5039,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class HtmlControl {
     ref;
     builderService;
@@ -5143,8 +5091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class AttributeParameter {
     ref;
     modal;
@@ -5168,8 +5114,7 @@ class AttributeParameter {
     constructor(ref) {
         this.ref = ref;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     edit = async () => {
         this.modal?.open?.();
         this.ref.markForCheck();
@@ -5224,7 +5169,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class UploadAttribute {
     ref;
     builderService;
@@ -5241,16 +5185,20 @@ class UploadAttribute {
     #subscription = new Subscription();
     #i18n = inject(I18nService);
     // Dropdown nguồn upload (mobile); display dịch qua i18n để hỗ trợ EN
-    sources = [{
+    sources = [
+        {
             value: 'ALL',
-            display: this.#i18n.t('core.component.form-builder.upload-source.all')
-        }, {
+            display: this.#i18n.t('core.component.form-builder.upload-source.all'),
+        },
+        {
             value: 'PHOTO_LIBRARY',
-            display: this.#i18n.t('core.component.form-builder.upload-source.photo-library')
-        }, {
+            display: this.#i18n.t('core.component.form-builder.upload-source.photo-library'),
+        },
+        {
             value: 'CAPTURE',
-            display: this.#i18n.t('core.component.form-builder.upload-source.capture')
-        }];
+            display: this.#i18n.t('core.component.form-builder.upload-source.capture'),
+        },
+    ];
     constructor(ref, builderService) {
         this.ref = ref;
         this.builderService = builderService;
@@ -5297,7 +5245,16 @@ class UploadAttribute {
 }
 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: [AttributeTemplate, AttributeInput, AttributeInputNumber, AttributeSwitch, AttributeSelect, AttributeExpression, AttributeParameter, TranslatePipe], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-select\n    [label]=\"'core.component.form-builder.type' | translate\"\n    [(model)]=\"component.properties!.type\"\n    [items]=\"[\n      { value: 'file', display: ('core.component.form-builder.file' | translate) },\n      { value: 'image', display: ('core.component.form-builder.image' | translate) }\n    ]\"></attribute-select>\n  </div>\n</details>\n\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    <attribute-input-number [label]=\"'core.component.form-builder.max-files' | translate\" [(model)]=\"component.properties!.max\"></attribute-input-number>\n    <attribute-input-number [label]=\"'core.component.form-builder.size-mb' | translate\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\n    @if (component.properties!.type === 'file') {\n      <attribute-input [label]=\"'core.component.form-builder.format-example' | translate\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\n    }\n    @if (component.properties!.type === 'image') {\n      <attribute-select [label]=\"'core.component.form-builder.source-mobile' | translate\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">settings</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.parameter' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-parameter [label]=\"'core.component.form-builder.assign-parameter' | translate\" [components]=\"components\" [(model)]=\"component.properties!.args\"></attribute-parameter>\n    </div>\n  </details>\n}\n" }]
+            args: [{ selector: 'upload-attribute', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AttributeTemplate,
+                        AttributeInput,
+                        AttributeInputNumber,
+                        AttributeSwitch,
+                        AttributeSelect,
+                        AttributeExpression,
+                        AttributeParameter,
+                        TranslatePipe,
+                    ], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">info</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\n  <attribute-input [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\n  <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.label' | translate\" [(model)]=\"component.label\"></attribute-input>\n  <attribute-select\n    [label]=\"'core.component.form-builder.type' | translate\"\n    [(model)]=\"component.properties!.type\"\n    [items]=\"[\n      { value: 'file', display: ('core.component.form-builder.file' | translate) },\n      { value: 'image', display: ('core.component.form-builder.image' | translate) }\n    ]\"></attribute-select>\n  </div>\n</details>\n\n@if (!component.properties!.hidden && !component.properties!.viewed) {\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">visibility</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.disabled' | translate\" [(model)]=\"component.disabled\"></attribute-switch>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.visible-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\n    <attribute-expression\n      [label]=\"'core.component.form-builder.hidden-when' | translate\"\n      [components]=\"components\"\n      [variables]=\"variables\"\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\n    @if (!component.disabled) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.disabled-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">verified</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.validation' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-switch [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"component.validate!.required\"></attribute-switch>\n    @if (!component.validate!.required) {\n      <attribute-expression\n        [label]=\"'core.component.form-builder.required-when' | translate\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\n    }\n    <attribute-input-number [label]=\"'core.component.form-builder.max-files' | translate\" [(model)]=\"component.properties!.max\"></attribute-input-number>\n    <attribute-input-number [label]=\"'core.component.form-builder.size-mb' | translate\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\n    @if (component.properties!.type === 'file') {\n      <attribute-input [label]=\"'core.component.form-builder.format-example' | translate\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\n    }\n    @if (component.properties!.type === 'image') {\n      <attribute-select [label]=\"'core.component.form-builder.source-mobile' | translate\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\n    }\n    </div>\n  </details>\n  <details class=\"fb-section\" open>\n    <summary class=\"fb-section__head\">\n      <span class=\"msi\">settings</span>\n      <span class=\"fb-section__title\">{{ 'core.component.form-builder.parameter' | translate }}</span>\n      <span class=\"msi chev\">chevron_right</span>\n    </summary>\n    <div class=\"fb-section__body\">\n    <attribute-parameter [label]=\"'core.component.form-builder.assign-parameter' | translate\" [components]=\"components\" [(model)]=\"component.properties!.args\"></attribute-parameter>\n    </div>\n  </details>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: BuilderService }], propDecorators: { components: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5347,12 +5304,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Template là các mẫu do Portal định nghĩa sẵn (key, label ....) để người dùng chọn nhanh
 // Khi thực hiện sao chép 1 template chúng ta sẽ CLONE để tránh ảnh hưởng template gốc
 class AttributeTable {
-    formGenericConfiguration;
     modal;
     form = new FormGroup({});
     components;
@@ -5365,7 +5319,8 @@ class AttributeTable {
         }
     }
     columnsKeyChange = new EventEmitter();
-    tables = [];
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
+    tables = this.formGenericConfiguration?.form?.tables || [];
     // Columns
     types = TableColumnTypes;
     columns = [];
@@ -5376,10 +5331,6 @@ class AttributeTable {
     }
     columnsChange = new EventEmitter();
     column;
-    constructor(formGenericConfiguration) {
-        this.formGenericConfiguration = formGenericConfiguration;
-        this.tables = this.formGenericConfiguration?.form?.tables || [];
-    }
     onChangeColumnsKey = (value) => {
         this.columnsKeyChange.emit(value);
         const table = this.tables.find(e => e.value === value);
@@ -5445,7 +5396,7 @@ class AttributeTable {
         }
         this.modal?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTable, deps: [{ token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: AttributeTable, isStandalone: true, selector: "attribute-table", inputs: { components: "components", variables: "variables", _columnsKey: ["columnsKey", "_columnsKey"], _columns: ["columns", "_columns"] }, outputs: { columnsKeyChange: "columnsKeyChange", columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">view_column</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.column-list' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n    @if (tables.length) {\n      <sd-autocomplete\n          class=\"py-8\"\n          [label]=\"'core.component.form-builder.column-data' | translate\"\n          [(model)]=\"columnsKey\"\n          [items]=\"tables\"\n          valueField=\"value\"\n          displayField=\"display\"\n          (sdChange)=\"onChangeColumnsKey($event)\"\n          hideInlineError></sd-autocomplete>\n    }\n    @if (!columnsKey) {\n      <div class=\"fb-columns-list\">\n        @for (item of columns; track item.key; let idx = $index) {\n          <div class=\"fb-column-row\" [class.is-active]=\"idx === selectedIdx\">\n            <span class=\"fb-column-row__type-icon\"><span class=\"msi\">{{ columnTypeSymbol(item.type) }}</span></span>\n            <div class=\"fb-column-row__meta\">\n              <div class=\"fb-column-row__label\">\n                {{ item.label }}\n                @if (item.validate?.required) {\n                  <span class=\"fb-column-row__req\">*</span>\n                }\n              </div>\n              <div class=\"fb-column-row__sub mono\">{{ item.key }} \u00B7 {{ item.type }}</div>\n            </div>\n            <button type=\"button\" class=\"fb-icon-btn\" [attr.aria-label]=\"'core.component.form-builder.column-config' | translate\" (click)=\"editColumn(idx)\">\n              <span class=\"msi\">edit</span>\n            </button>\n            <button type=\"button\" class=\"fb-icon-btn danger\" [attr.aria-label]=\"'core.component.form-builder.delete' | translate\" (click)=\"removeColumn(idx)\">\n              <span class=\"msi\">delete</span>\n            </button>\n          </div>\n        }\n        <a class=\"fb-add-link\" (click)=\"addColumn()\">\n          <span class=\"msi\">add</span>\n          {{ 'core.component.form-builder.add-column' | translate }}\n        </a>\n      </div>\n    }\n  </div>\n</details>\n\n<sd-modal [title]=\"'core.component.form-builder.column-config' | translate\" width=\"600px\">\n  @if (column) {\n    <details class=\"fb-section\" open>\n      <summary class=\"fb-section__head\">\n        <span class=\"msi\">info</span>\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n        <span class=\"msi chev\">chevron_right</span>\n      </summary>\n      <div class=\"fb-section__body\">\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"column.key\"></attribute-input>\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.column-name' | translate\" [(model)]=\"column.label\"></attribute-input>\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.width' | translate\" [(model)]=\"column.width\"></attribute-input>\n        <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"column.validate!.required\"></attribute-switch>\n        <attribute-select [form]=\"form\" [label]=\"'core.component.form-builder.data-type' | translate\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\n      </div>\n    </details>\n    @if (column.type === 'boolean') {\n      <details class=\"fb-section\" open>\n        <summary class=\"fb-section__head\">\n          <span class=\"msi\">visibility</span>\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n          <span class=\"msi chev\">chevron_right</span>\n        </summary>\n        <div class=\"fb-section__body\">\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-true' | translate\" [(model)]=\"column.displayOnTrue\"></attribute-input>\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-false' | translate\" [(model)]=\"column.displayOnFalse\"></attribute-input>\n        </div>\n      </details>\n    } @else if (column.type === 'values') {\n      <attribute-selection\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [component]=\"column\"\n        [(valuesKey)]=\"column.valuesKey\"\n        [(values)]=\"column.values\"></attribute-selection>\n    } @else if (column.type === 'file' || column.type === 'image') {\n      <details class=\"fb-section\" open>\n        <summary class=\"fb-section__head\">\n          <span class=\"msi\">settings</span>\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.parameter' | translate }}</span>\n          <span class=\"msi chev\">chevron_right</span>\n        </summary>\n        <div class=\"fb-section__body\">\n          <attribute-parameter [label]=\"'core.component.form-builder.assign-parameter' | translate\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\n        </div>\n      </details>\n    }\n  }\n  <ng-container sdFooter>\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AttributeTable, decorators: [{
@@ -5461,14 +5412,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         AttributeInput,
                         AttributeSelect,
                         AttributeSwitch,
-                        AttributeParameter, TranslatePipe
+                        AttributeParameter,
+                        TranslatePipe,
                     ], template: "<details class=\"fb-section\" open>\n  <summary class=\"fb-section__head\">\n    <span class=\"msi\">view_column</span>\n    <span class=\"fb-section__title\">{{ 'core.component.form-builder.column-list' | translate }}</span>\n    <span class=\"msi chev\">chevron_right</span>\n  </summary>\n  <div class=\"fb-section__body\">\n    @if (tables.length) {\n      <sd-autocomplete\n          class=\"py-8\"\n          [label]=\"'core.component.form-builder.column-data' | translate\"\n          [(model)]=\"columnsKey\"\n          [items]=\"tables\"\n          valueField=\"value\"\n          displayField=\"display\"\n          (sdChange)=\"onChangeColumnsKey($event)\"\n          hideInlineError></sd-autocomplete>\n    }\n    @if (!columnsKey) {\n      <div class=\"fb-columns-list\">\n        @for (item of columns; track item.key; let idx = $index) {\n          <div class=\"fb-column-row\" [class.is-active]=\"idx === selectedIdx\">\n            <span class=\"fb-column-row__type-icon\"><span class=\"msi\">{{ columnTypeSymbol(item.type) }}</span></span>\n            <div class=\"fb-column-row__meta\">\n              <div class=\"fb-column-row__label\">\n                {{ item.label }}\n                @if (item.validate?.required) {\n                  <span class=\"fb-column-row__req\">*</span>\n                }\n              </div>\n              <div class=\"fb-column-row__sub mono\">{{ item.key }} \u00B7 {{ item.type }}</div>\n            </div>\n            <button type=\"button\" class=\"fb-icon-btn\" [attr.aria-label]=\"'core.component.form-builder.column-config' | translate\" (click)=\"editColumn(idx)\">\n              <span class=\"msi\">edit</span>\n            </button>\n            <button type=\"button\" class=\"fb-icon-btn danger\" [attr.aria-label]=\"'core.component.form-builder.delete' | translate\" (click)=\"removeColumn(idx)\">\n              <span class=\"msi\">delete</span>\n            </button>\n          </div>\n        }\n        <a class=\"fb-add-link\" (click)=\"addColumn()\">\n          <span class=\"msi\">add</span>\n          {{ 'core.component.form-builder.add-column' | translate }}\n        </a>\n      </div>\n    }\n  </div>\n</details>\n\n<sd-modal [title]=\"'core.component.form-builder.column-config' | translate\" width=\"600px\">\n  @if (column) {\n    <details class=\"fb-section\" open>\n      <summary class=\"fb-section__head\">\n        <span class=\"msi\">info</span>\n        <span class=\"fb-section__title\">{{ 'core.component.form-builder.general' | translate }}</span>\n        <span class=\"msi chev\">chevron_right</span>\n      </summary>\n      <div class=\"fb-section__body\">\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"column.key\"></attribute-input>\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.column-name' | translate\" [(model)]=\"column.label\"></attribute-input>\n        <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.width' | translate\" [(model)]=\"column.width\"></attribute-input>\n        <attribute-switch [form]=\"form\" [label]=\"'core.component.form-builder.required' | translate\" [(model)]=\"column.validate!.required\"></attribute-switch>\n        <attribute-select [form]=\"form\" [label]=\"'core.component.form-builder.data-type' | translate\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\n      </div>\n    </details>\n    @if (column.type === 'boolean') {\n      <details class=\"fb-section\" open>\n        <summary class=\"fb-section__head\">\n          <span class=\"msi\">visibility</span>\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.display' | translate }}</span>\n          <span class=\"msi chev\">chevron_right</span>\n        </summary>\n        <div class=\"fb-section__body\">\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-true' | translate\" [(model)]=\"column.displayOnTrue\"></attribute-input>\n          <attribute-input [form]=\"form\" [label]=\"'core.component.form-builder.show-when-false' | translate\" [(model)]=\"column.displayOnFalse\"></attribute-input>\n        </div>\n      </details>\n    } @else if (column.type === 'values') {\n      <attribute-selection\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [component]=\"column\"\n        [(valuesKey)]=\"column.valuesKey\"\n        [(values)]=\"column.values\"></attribute-selection>\n    } @else if (column.type === 'file' || column.type === 'image') {\n      <details class=\"fb-section\" open>\n        <summary class=\"fb-section__head\">\n          <span class=\"msi\">settings</span>\n          <span class=\"fb-section__title\">{{ 'core.component.form-builder.parameter' | translate }}</span>\n          <span class=\"msi chev\">chevron_right</span>\n        </summary>\n        <div class=\"fb-section__body\">\n          <attribute-parameter [label]=\"'core.component.form-builder.assign-parameter' | translate\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\n        </div>\n      </details>\n    }\n  }\n  <ng-container sdFooter>\n    <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { modal: [{
+        }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
             }], components: [{
@@ -5489,7 +5436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class TableAttribute {
     ref;
     builderService;
@@ -5558,7 +5504,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ alias: 'component', required: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
 class TableControl {
     ref;
     builderService;
@@ -5622,11 +5567,11 @@ class TableControl {
         return rowIndex === 1 ? 'Sample value' : '—';
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableControl, isStandalone: true, selector: "table-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\n  <div class=\"fb-table-control__label\">\n    {{ component.label }}\n    @if (component.validate?.required) {\n      <span>*</span>\n    }\n  </div>\n\n  @if (component.columns?.length) {\n    <div class=\"fb-table-control__frame\">\n      <div class=\"fb-table-control__header\">\n        @for (column of component.columns; track column.key) {\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\n            <span>{{ column.label }}</span>\n            @if (column.validate?.required) {\n              <span class=\"fb-table-control__required\">*</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"fb-table-control__body\">\n        @for (row of sampleRows(); track row) {\n          <div class=\"fb-table-control__row\">\n            @for (column of component.columns; track column.key) {\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n                {{ cellPreview(column, row) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <button type=\"button\" class=\"fb-table-control__add\">\n      <span>+</span>\n      Add row\n    </button>\n  }\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-size:16px;line-height:1;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"GRAD\" 0,\"opsz\" 20}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableControl, isStandalone: true, selector: "table-control", inputs: { _component: ["component", "_component"] }, ngImport: i0, template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\n  <div class=\"fb-table-control__label\">\n    {{ component.label }}\n    @if (component.validate?.required) {\n      <span>*</span>\n    }\n  </div>\n\n  @if (component.columns?.length) {\n    <div class=\"fb-table-control__frame\">\n      <div class=\"fb-table-control__header\">\n        @for (column of component.columns; track column.key) {\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\n            <span>{{ column.label }}</span>\n            @if (column.validate?.required) {\n              <span class=\"fb-table-control__required\">*</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"fb-table-control__body\">\n        @for (row of sampleRows(); track row) {\n          <div class=\"fb-table-control__row\">\n            @for (column of component.columns; track column.key) {\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n                {{ cellPreview(column, row) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <button type=\"button\" class=\"fb-table-control__add\">\n      <span>+</span>\n      Add row\n    </button>\n  }\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-family:Material Icons Outlined;font-size:16px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableControl, decorators: [{
             type: Component,
-            args: [{ selector: 'table-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\n  <div class=\"fb-table-control__label\">\n    {{ component.label }}\n    @if (component.validate?.required) {\n      <span>*</span>\n    }\n  </div>\n\n  @if (component.columns?.length) {\n    <div class=\"fb-table-control__frame\">\n      <div class=\"fb-table-control__header\">\n        @for (column of component.columns; track column.key) {\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\n            <span>{{ column.label }}</span>\n            @if (column.validate?.required) {\n              <span class=\"fb-table-control__required\">*</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"fb-table-control__body\">\n        @for (row of sampleRows(); track row) {\n          <div class=\"fb-table-control__row\">\n            @for (column of component.columns; track column.key) {\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n                {{ cellPreview(column, row) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <button type=\"button\" class=\"fb-table-control__add\">\n      <span>+</span>\n      Add row\n    </button>\n  }\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-size:16px;line-height:1;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"GRAD\" 0,\"opsz\" 20}.fb-table-control__required{color:var(--sd-error, #F82C13)}.fb-table-control__add{align-self:flex-start;height:28px;border:0;background:transparent;color:var(--sd-primary, #2A66F4);display:inline-flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:600;cursor:default}.fb-table-control__add span{font-size:18px;line-height:1}.fb-table-control.is-viewed .fb-table-control__header{background:var(--sd-black100, #F2F2F2)}.fb-table-control.is-viewed .fb-table-control__add{display:none}\n"] }]
+            args: [{ selector: 'table-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"fb-table-control\" [class.is-viewed]=\"component.properties?.viewed\">\n  <div class=\"fb-table-control__label\">\n    {{ component.label }}\n    @if (component.validate?.required) {\n      <span>*</span>\n    }\n  </div>\n\n  @if (component.columns?.length) {\n    <div class=\"fb-table-control__frame\">\n      <div class=\"fb-table-control__header\">\n        @for (column of component.columns; track column.key) {\n          <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n            <span class=\"fb-table-control__icon msi\">{{ columnIcon(column.type) }}</span>\n            <span>{{ column.label }}</span>\n            @if (column.validate?.required) {\n              <span class=\"fb-table-control__required\">*</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"fb-table-control__body\">\n        @for (row of sampleRows(); track row) {\n          <div class=\"fb-table-control__row\">\n            @for (column of component.columns; track column.key) {\n              <div class=\"fb-table-control__cell\" [style.width]=\"column.width\">\n                {{ cellPreview(column, row) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <button type=\"button\" class=\"fb-table-control__add\">\n      <span>+</span>\n      Add row\n    </button>\n  }\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;min-width:0}.fb-table-control{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden;color:var(--sd-black500, #212121)}.fb-table-control__label{font-size:14px;line-height:20px;font-weight:600;color:var(--sd-black400, #757575)}.fb-table-control__label span{color:var(--sd-error, #F82C13)}.fb-table-control__frame{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sd-black200, #E6E6E6);border-radius:10px;background:#fff;overscroll-behavior-x:contain}.fb-table-control__header,.fb-table-control__row{display:flex;width:max-content;min-width:max-content}.fb-table-control__header{min-height:44px;background:color-mix(in srgb,var(--sd-black100, #F2F2F2) 70%,#fff);border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row{min-height:42px;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.fb-table-control__row:last-child{border-bottom:0}.fb-table-control__cell{width:136px;flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;color:var(--sd-black400, #757575);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0}.fb-table-control__cell:last-child{border-right:0}.fb-table-control__header .fb-table-control__cell{color:var(--sd-black400, #757575);font-weight:700}.fb-table-control__icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sd-black400, #757575);font-family:Material Icons Outlined;font-size:16px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.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 }]
@@ -5694,10 +5639,165 @@ const ValidationAlerts = [
     },
 ];
 
-/* eslint-disable @angular-eslint/no-input-rename */
-class ConfigureValidationComponent {
+// Component xây dựng Expression dựa vào SdFormGenericExpression
+class ExpressionBuilderComponent {
     ref;
-    formGenericConfiguration;
+    modal;
+    form = new FormGroup({});
+    attributeOperators = AttributeOperators;
+    attributes = [];
+    numberAttributes = [];
+    dateAttributes = [];
+    attribute = {};
+    types = DayInfoTypes;
+    previouses = DayInfoPreviouses;
+    label;
+    set _attributes(attributes) {
+        this.attributes = attributes || [];
+        this.numberAttributes = this.attributes
+            .filter(e => e.type === 'number')
+            .map(e => ({
+            ...e,
+            value: '${' + e.value + '}',
+        }));
+        this.dateAttributes = this.attributes
+            .filter(e => e.type === 'datetime')
+            .map(e => ({
+            ...e,
+            value: '${' + e.value + '}',
+        }));
+        this.attribute = ArrayUtilities.toObject('value', this.attributes);
+    }
+    expression = {
+        key: Utilities.randomId(),
+        type: 'combinator',
+        combinator: '&&',
+        conditions: [],
+    };
+    model = {
+        key: Utilities.randomId(),
+        type: 'combinator',
+        combinator: '&&',
+        conditions: [],
+    };
+    set _model(model) {
+        if (this.model !== model) {
+            this.model = model;
+        }
+        this.model = this.model || {
+            key: Utilities.randomId(),
+            type: 'combinator',
+            combinator: '&&',
+            conditions: [],
+        };
+    }
+    modelChange = new EventEmitter();
+    sdChange = new EventEmitter();
+    edit = new EventEmitter();
+    constructor(ref) {
+        this.ref = ref;
+    }
+    ngOnInit() { }
+    onEdit = async () => {
+        // Khi cập nhật expression thì clone ra
+        this.expression = JSON.parse(JSON.stringify(this.model));
+        // Thông báo cho component cha có sự kiện edit trong trường hợp attributes có thay đổi
+        this.edit.next();
+        this.modal?.open?.();
+        this.ref.markForCheck();
+    };
+    addCondition = (conditions) => {
+        conditions.push({
+            key: Utilities.randomId(),
+            type: 'condition',
+            field: undefined,
+            operator: 'EQUAL',
+            value: undefined,
+            dayInfo: {},
+        });
+        this.ref.markForCheck();
+    };
+    addCombinator = (conditions) => {
+        conditions.push({
+            key: Utilities.randomId(),
+            type: 'combinator',
+            combinator: '&&',
+            conditions: [],
+        });
+        this.ref.markForCheck();
+    };
+    remove = (conditions, idx) => {
+        conditions.splice(idx, 1);
+        this.ref.markForCheck();
+    };
+    onAccept = () => {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        this.model = this.expression;
+        this.modelChange.emit(this.model);
+        this.sdChange.emit(this.model);
+        this.modal?.close();
+        this.ref.markForCheck();
+    };
+    onChangeAttribute = (condition) => {
+        const fieldAttribute = this.attribute[condition.field];
+        if (fieldAttribute.type === 'datetime') {
+            condition.dayInfo = condition.dayInfo || {};
+        }
+    };
+    onChangeDateInfo = (condition) => {
+        // Xử lý giá trị
+        if (condition.dayInfo?.type === 'NOW') {
+            condition.value = 'now';
+        }
+        else if (condition.dayInfo?.type === 'RELATED' && condition.dayInfo.relatedValue) {
+            condition.value = DayInfoPreviouses.find(e => e.value === condition.dayInfo.related)?.format(condition.dayInfo.relatedValue) ?? null;
+        }
+        else if (condition.value?.type === 'DATETIME' && condition.value) {
+            condition.value = DateUtilities$1.toFormat(condition.value, 'yyyy/MM/dd HH:mm:00');
+        }
+    };
+    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: "<!--\n  FEEL-style expression trigger pill (M3 redesign).\n  B\u1EA5m v\u00E0o pill m\u1EDF modal builder hi\u1EC7n t\u1EA1i (onEdit).\n-->\n<div class=\"fb-field\">\n  @if (label) {\n    <div class=\"fb-field__label\">{{ label }}</div>\n  }\n  @let exprText = model | expressionQuery;\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\">\n    <span class=\"fb-expr__badge\">FEEL</span>\n    @if (exprText) {\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\n    } @else {\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\n    }\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\n      <span class=\"msi\">functions</span>\n    </button>\n  </div>\n</div>\n@if (expression) {\n  <sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\n    <div class=\"c-builder\">\n      <div class=\"d-flex justify-content-end\">\n        <sd-button\n          prefixIcon=\"calculate\"\n          class=\"mr-4\"\n          [title]=\"'core.component.form-builder.condition-group' | translate\"\n          color=\"primary\"\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\n        <sd-button\n          prefixIcon=\"add\"\n          [title]=\"'core.component.form-builder.condition' | translate\"\n          color=\"primary\"\n          (click)=\"addCondition(expression.conditions)\"\n          type=\"fill\"></sd-button>\n      </div>\n      <!-- C\u1EA5p 1 -->\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n          <div class=\"c-condition\">\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n            @if (idxLv1 === 0) {\n              <div class=\"c-where\">WHERE</div>\n            }\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n            @if (idxLv1 === 1) {\n              <div class=\"c-select\">\n                <sd-select\n                  size=\"sm\"\n                  [(model)]=\"expression.combinator\"\n                  [items]=\"[\n                    { value: '&&', display: 'AND' },\n                    { value: '||', display: 'OR' }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError=\"\"></sd-select>\n              </div>\n            }\n          </div>\n          @if (conditionLv1.type === 'condition') {\n            <sd-autocomplete\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 200px\"\n              [(model)]=\"conditionLv1.field\"\n              [items]=\"attributes\"\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\n              valueField=\"value\"\n              displayField=\"display\"\n              required\n              hideInlineError></sd-autocomplete>\n            @let fieldAttribute = attribute[conditionLv1.field!];\n            <sd-select\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 100px\"\n              [(model)]=\"conditionLv1.operator\"\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n              valueField=\"value\"\n              displayField=\"display\"\n              [disabled]=\"!fieldAttribute?.type\"\n              required\n              hideInlineError></sd-select>\n            @if (\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\n            ) {\n              @if (fieldAttribute.type === 'string') {\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\n              } @else if (fieldAttribute.type === 'number') {\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"numberAttributes\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  hideInlineError></sd-autocomplete>\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\n                <sd-select\n                  size=\"sm\"\n                  [placeholder]=\"'core.component.form-builder.time' | translate\"\n                  [form]=\"form\"\n                  style=\"width: 150px\"\n                  [items]=\"types\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"conditionLv1.dayInfo.type\"\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                  required\n                  hideInlineError>\n                </sd-select>\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\n                  <sd-input-number\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"width: 80px\"\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    [min]=\"1\"\n                    required\n                    hideInlineError>\n                  </sd-input-number>\n                  <sd-select\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [items]=\"previouses\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    [(model)]=\"conditionLv1.dayInfo.related\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-select>\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\n                  <sd-datetime\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-datetime>\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\n                  <sd-autocomplete\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    [items]=\"dateAttributes\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    hideInlineError></sd-autocomplete>\n                }\n              } @else if (fieldAttribute.type === 'boolean') {\n                <sd-select\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"[\n                    { value: true, display: fieldAttribute.displayOnTrue },\n                    { value: false, display: fieldAttribute.displayOnFalse }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-select>\n              } @else if (fieldAttribute.type === 'values') {\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"fieldAttribute.values\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-autocomplete>\n              }\n            }\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n          } @else if (conditionLv1.type === 'combinator') {\n            <div class=\"c-builder\">\n              <div class=\"d-flex justify-content-end\">\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n                <sd-button\n                  prefixIcon=\"add\"\n                  [title]=\"'core.component.form-builder.condition' | translate\"\n                  size=\"sm\"\n                  color=\"primary\"\n                  (click)=\"addCondition(conditionLv1.conditions)\"\n                  type=\"fill\"></sd-button>\n              </div>\n              <!-- C\u1EA5p 2 -->\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n                  <div class=\"c-condition\">\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n                    @if (idxLv2 === 0) {\n                      <div class=\"c-where\">WHERE</div>\n                    }\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n                    @if (idxLv2 === 1) {\n                      <div class=\"c-select\">\n                        <sd-select\n                          size=\"sm\"\n                          [(model)]=\"conditionLv1.combinator\"\n                          [items]=\"[\n                            { value: '&&', display: 'AND' },\n                            { value: '||', display: 'OR' }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError=\"\"></sd-select>\n                      </div>\n                    }\n                  </div>\n                  @if (conditionLv2.type === 'condition') {\n                    <sd-autocomplete\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 200px\"\n                      [(model)]=\"conditionLv2.field\"\n                      [items]=\"attributes\"\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      required\n                      hideInlineError></sd-autocomplete>\n                    @let fieldAttribute = attribute[conditionLv2.field!];\n                    <sd-select\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 100px\"\n                      [(model)]=\"conditionLv2.operator\"\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      [disabled]=\"!fieldAttribute?.type\"\n                      required\n                      hideInlineError></sd-select>\n                    @if (\n                      !!fieldAttribute?.type &&\n                      conditionLv2.operator &&\n                      conditionLv2.operator !== 'NULL' &&\n                      conditionLv2.operator !== 'NOT_NULL'\n                    ) {\n                      @if (fieldAttribute.type === 'string') {\n                        <sd-input\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          required\n                          hideInlineError></sd-input>\n                      } @else if (fieldAttribute.type === 'number') {\n                        <sd-input-number\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          hideInlineError></sd-input-number>\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"numberAttributes\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          hideInlineError></sd-autocomplete>\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          [placeholder]=\"'core.component.form-builder.time' | translate\"\n                          style=\"width: 150px\"\n                          [items]=\"types\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          [(model)]=\"conditionLv2.dayInfo.type\"\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                          required\n                          hideInlineError>\n                        </sd-select>\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\n                          <sd-input-number\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"width: 80px\"\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            [min]=\"1\"\n                            required\n                            hideInlineError>\n                          </sd-input-number>\n                          <sd-select\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [items]=\"previouses\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            [(model)]=\"conditionLv2.dayInfo.related\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-select>\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\n                          <sd-datetime\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-datetime>\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\n                          <sd-autocomplete\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            [items]=\"dateAttributes\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            hideInlineError></sd-autocomplete>\n                        }\n                      } @else if (fieldAttribute.type === 'boolean') {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"[\n                            { value: true, display: fieldAttribute.displayOnTrue },\n                            { value: false, display: fieldAttribute.displayOnFalse }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-select>\n                      } @else if (fieldAttribute.type === 'values') {\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"fieldAttribute.values\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-autocomplete>\n                      }\n                    }\n                    <sd-button\n                      class=\"ml-auto\"\n                      prefixIcon=\"delete\"\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <ng-container sdFooter>\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\n    </ng-container>\n  </sd-modal>\n}\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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "cleared", "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", "clearable", "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", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "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", "clearable", "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,
+            args: [{ selector: 'expression-builder', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SdInput$1,
+                        SdInputNumber,
+                        SdSelect$1,
+                        SdAutocomplete$1,
+                        SdButton,
+                        SdSelect$1,
+                        SdModal,
+                        ExpressionQueryPipe,
+                        SdDatetime,
+                        SdSuffixDefDirective,
+                        MatIconModule,
+                        TranslatePipe,
+                    ], template: "<!--\n  FEEL-style expression trigger pill (M3 redesign).\n  B\u1EA5m v\u00E0o pill m\u1EDF modal builder hi\u1EC7n t\u1EA1i (onEdit).\n-->\n<div class=\"fb-field\">\n  @if (label) {\n    <div class=\"fb-field__label\">{{ label }}</div>\n  }\n  @let exprText = model | expressionQuery;\n  <div class=\"fb-expr\" (click)=\"onEdit()\" role=\"button\" tabindex=\"0\">\n    <span class=\"fb-expr__badge\">FEEL</span>\n    @if (exprText) {\n      <span class=\"fb-expr__code mono\">{{ exprText }}</span>\n    } @else {\n      <span class=\"empty\">{{ 'core.component.form-builder.set-expression' | translate }}</span>\n    }\n    <button type=\"button\" class=\"fb-icon-btn\" (click)=\"onEdit(); $event.stopPropagation()\" aria-label=\"edit expression\">\n      <span class=\"msi\">functions</span>\n    </button>\n  </div>\n</div>\n@if (expression) {\n  <sd-modal [title]=\"'core.component.form-builder.set-expression' | translate\">\n    <div class=\"c-builder\">\n      <div class=\"d-flex justify-content-end\">\n        <sd-button\n          prefixIcon=\"calculate\"\n          class=\"mr-4\"\n          [title]=\"'core.component.form-builder.condition-group' | translate\"\n          color=\"primary\"\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\n        <sd-button\n          prefixIcon=\"add\"\n          [title]=\"'core.component.form-builder.condition' | translate\"\n          color=\"primary\"\n          (click)=\"addCondition(expression.conditions)\"\n          type=\"fill\"></sd-button>\n      </div>\n      <!-- C\u1EA5p 1 -->\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n          <div class=\"c-condition\">\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n            @if (idxLv1 === 0) {\n              <div class=\"c-where\">WHERE</div>\n            }\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n            @if (idxLv1 === 1) {\n              <div class=\"c-select\">\n                <sd-select\n                  size=\"sm\"\n                  [(model)]=\"expression.combinator\"\n                  [items]=\"[\n                    { value: '&&', display: 'AND' },\n                    { value: '||', display: 'OR' }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError=\"\"></sd-select>\n              </div>\n            }\n          </div>\n          @if (conditionLv1.type === 'condition') {\n            <sd-autocomplete\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 200px\"\n              [(model)]=\"conditionLv1.field\"\n              [items]=\"attributes\"\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\n              valueField=\"value\"\n              displayField=\"display\"\n              required\n              hideInlineError></sd-autocomplete>\n            @let fieldAttribute = attribute[conditionLv1.field!];\n            <sd-select\n              size=\"sm\"\n              [form]=\"form\"\n              style=\"width: 100px\"\n              [(model)]=\"conditionLv1.operator\"\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n              valueField=\"value\"\n              displayField=\"display\"\n              [disabled]=\"!fieldAttribute?.type\"\n              required\n              hideInlineError></sd-select>\n            @if (\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\n            ) {\n              @if (fieldAttribute.type === 'string') {\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\n              } @else if (fieldAttribute.type === 'number') {\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"numberAttributes\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  hideInlineError></sd-autocomplete>\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\n                <sd-select\n                  size=\"sm\"\n                  [placeholder]=\"'core.component.form-builder.time' | translate\"\n                  [form]=\"form\"\n                  style=\"width: 150px\"\n                  [items]=\"types\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"conditionLv1.dayInfo.type\"\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                  required\n                  hideInlineError>\n                </sd-select>\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\n                  <sd-input-number\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"width: 80px\"\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    [min]=\"1\"\n                    required\n                    hideInlineError>\n                  </sd-input-number>\n                  <sd-select\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [items]=\"previouses\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    [(model)]=\"conditionLv1.dayInfo.related\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-select>\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\n                  <sd-datetime\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\n                    required\n                    hideInlineError>\n                  </sd-datetime>\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\n                  <sd-autocomplete\n                    size=\"sm\"\n                    [form]=\"form\"\n                    style=\"flex: 1\"\n                    [(model)]=\"conditionLv1.value\"\n                    [items]=\"dateAttributes\"\n                    valueField=\"value\"\n                    displayField=\"display\"\n                    hideInlineError></sd-autocomplete>\n                }\n              } @else if (fieldAttribute.type === 'boolean') {\n                <sd-select\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"[\n                    { value: true, display: fieldAttribute.displayOnTrue },\n                    { value: false, display: fieldAttribute.displayOnFalse }\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-select>\n              } @else if (fieldAttribute.type === 'values') {\n                <sd-autocomplete\n                  size=\"sm\"\n                  [form]=\"form\"\n                  style=\"flex: 1\"\n                  [(model)]=\"conditionLv1.value\"\n                  [items]=\"fieldAttribute.values\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  required\n                  hideInlineError></sd-autocomplete>\n              }\n            }\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n          } @else if (conditionLv1.type === 'combinator') {\n            <div class=\"c-builder\">\n              <div class=\"d-flex justify-content-end\">\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" [tooltip]=\"'core.component.form-builder.delete' | translate\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\n                <sd-button\n                  prefixIcon=\"add\"\n                  [title]=\"'core.component.form-builder.condition' | translate\"\n                  size=\"sm\"\n                  color=\"primary\"\n                  (click)=\"addCondition(conditionLv1.conditions)\"\n                  type=\"fill\"></sd-button>\n              </div>\n              <!-- C\u1EA5p 2 -->\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\n                  <div class=\"c-condition\">\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\n                    @if (idxLv2 === 0) {\n                      <div class=\"c-where\">WHERE</div>\n                    }\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\n                    @if (idxLv2 === 1) {\n                      <div class=\"c-select\">\n                        <sd-select\n                          size=\"sm\"\n                          [(model)]=\"conditionLv1.combinator\"\n                          [items]=\"[\n                            { value: '&&', display: 'AND' },\n                            { value: '||', display: 'OR' }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError=\"\"></sd-select>\n                      </div>\n                    }\n                  </div>\n                  @if (conditionLv2.type === 'condition') {\n                    <sd-autocomplete\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 200px\"\n                      [(model)]=\"conditionLv2.field\"\n                      [items]=\"attributes\"\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      required\n                      hideInlineError></sd-autocomplete>\n                    @let fieldAttribute = attribute[conditionLv2.field!];\n                    <sd-select\n                      size=\"sm\"\n                      [form]=\"form\"\n                      style=\"width: 100px\"\n                      [(model)]=\"conditionLv2.operator\"\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\n                      valueField=\"value\"\n                      displayField=\"display\"\n                      [disabled]=\"!fieldAttribute?.type\"\n                      required\n                      hideInlineError></sd-select>\n                    @if (\n                      !!fieldAttribute?.type &&\n                      conditionLv2.operator &&\n                      conditionLv2.operator !== 'NULL' &&\n                      conditionLv2.operator !== 'NOT_NULL'\n                    ) {\n                      @if (fieldAttribute.type === 'string') {\n                        <sd-input\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          required\n                          hideInlineError></sd-input>\n                      } @else if (fieldAttribute.type === 'number') {\n                        <sd-input-number\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          hideInlineError></sd-input-number>\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"numberAttributes\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          hideInlineError></sd-autocomplete>\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          [placeholder]=\"'core.component.form-builder.time' | translate\"\n                          style=\"width: 150px\"\n                          [items]=\"types\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          [(model)]=\"conditionLv2.dayInfo.type\"\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                          required\n                          hideInlineError>\n                        </sd-select>\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\n                          <sd-input-number\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"width: 80px\"\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            [min]=\"1\"\n                            required\n                            hideInlineError>\n                          </sd-input-number>\n                          <sd-select\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [items]=\"previouses\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            [(model)]=\"conditionLv2.dayInfo.related\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-select>\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\n                          <sd-datetime\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\n                            required\n                            hideInlineError>\n                          </sd-datetime>\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\n                          <sd-autocomplete\n                            size=\"sm\"\n                            [form]=\"form\"\n                            style=\"flex: 1\"\n                            [(model)]=\"conditionLv2.value\"\n                            [items]=\"dateAttributes\"\n                            valueField=\"value\"\n                            displayField=\"display\"\n                            hideInlineError></sd-autocomplete>\n                        }\n                      } @else if (fieldAttribute.type === 'boolean') {\n                        <sd-select\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"[\n                            { value: true, display: fieldAttribute.displayOnTrue },\n                            { value: false, display: fieldAttribute.displayOnFalse }\n                          ]\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-select>\n                      } @else if (fieldAttribute.type === 'values') {\n                        <sd-autocomplete\n                          size=\"sm\"\n                          [form]=\"form\"\n                          style=\"flex: 1\"\n                          [(model)]=\"conditionLv2.value\"\n                          [items]=\"fieldAttribute.values\"\n                          valueField=\"value\"\n                          displayField=\"display\"\n                          required\n                          hideInlineError></sd-autocomplete>\n                      }\n                    }\n                    <sd-button\n                      class=\"ml-auto\"\n                      prefixIcon=\"delete\"\n                      [tooltip]=\"'core.component.form-builder.delete' | translate\"\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <ng-container sdFooter>\n      <sd-button prefixIcon=\"save\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\n    </ng-container>\n  </sd-modal>\n}\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]
+            }], label: [{
+                type: Input
+            }], _attributes: [{
+                type: Input,
+                args: ['attributes']
+            }], _model: [{
+                type: Input,
+                args: [{ alias: 'model', required: true }]
+            }], modelChange: [{
+                type: Output
+            }], sdChange: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }] } });
+
+class ConfigureValidationComponent {
     modal;
     form = new FormGroup({});
     attributes = [];
@@ -5705,9 +5805,9 @@ class ConfigureValidationComponent {
     functions = [];
     alerts = ValidationAlerts;
     accept = new EventEmitter();
-    constructor(ref, formGenericConfiguration) {
-        this.ref = ref;
-        this.formGenericConfiguration = formGenericConfiguration;
+    ref = inject(ChangeDetectorRef);
+    formGenericConfiguration = inject(SD_FORM_GENERIC_CONFIGURATION, { optional: true });
+    constructor() {
         this.functions = this.formGenericConfiguration?.form?.validation?.functions || [];
     }
     ngAfterViewInit() {
@@ -5718,8 +5818,7 @@ class ConfigureValidationComponent {
         //   })
         // );
     }
-    ngOnDestroy() {
-    }
+    ngOnDestroy() { }
     open = (formGeneric) => {
         // Xử lý gán validations
         if (Array.isArray(formGeneric?.validations)) {
@@ -5765,27 +5864,98 @@ class ConfigureValidationComponent {
         this.accept.emit(this.validations);
         this.modal?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigureValidationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigureValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigureValidationComponent, isStandalone: true, selector: "configure-validation", outputs: { accept: "accept" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal [title]=\"'core.component.form-builder.config-validation-error-warning' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\n  @for (validation of validations; track $index; let idx = $index) {\n    <div class=\"mat-elevation-z2 position-relative p-8 mb-16\" style=\"border-radius: 8px;\">\n      <div class=\"row mx-0\">\n        <sd-select\n          class=\"col-3\"\n          [label]=\"'core.component.form-builder.message-type' | translate\"\n          [(model)]=\"validation.alert\"\n          [items]=\"alerts\"\n          valueField=\"value\"\n          displayField=\"display\"\n          required></sd-select>\n        @if (validation.type === 'expression') {\n          <sd-input class=\"col-9\" [form]=\"form\" [label]=\"'core.component.form-builder.message-display' | translate\" [(model)]=\"validation.message\" required></sd-input>\n          <expression-builder class=\"col-12\" [label]=\"'core.component.form-builder.condition-expression' | translate\" [(model)]=\"validation.expression\" [attributes]=\"attributes\"></expression-builder>\n        } @else if (validation.type === 'function') {\n          <sd-select\n            class=\"col-9\"\n            [form]=\"form\"\n            [(model)]=\"validation.code\"\n            [items]=\"functions\"\n            valueField=\"value\"\n            displayField=\"display\"\n            required></sd-select>\n        }\n        <mat-icon class=\"c-close-icon\" (click)=\"removaValidation(idx)\">delete</mat-icon>\n        <!-- <sd-button\n          \n          prefixIcon=\"delete\"\n          (click)=\"removaValidation(idx)\"\n          color=\"error\"\n          type=\"link\"></sd-button> -->\n      </div>\n    </div>\n  }\n  <sd-button [title]=\"'core.component.form-builder.add-validation' | translate\" [matMenuTriggerFor]=\"menu\" prefixIcon=\"add\" color=\"primary\" type=\"link\"></sd-button>\n  <mat-menu #menu=\"matMenu\">\n    <button (click)=\"addValidation('expression')\" mat-menu-item type=\"button\">\n      <!-- <mat-icon fontIcon=\"warning\"></mat-icon> -->\n      <span>{{ 'core.component.form-builder.expression' | translate }}</span>\n    </button>\n    <button (click)=\"addValidation('function')\" mat-menu-item type=\"button\">\n      <!-- <mat-icon fontIcon=\"error\"></mat-icon> -->\n      <span>{{ 'core.component.form-builder.available-methods' | translate }}</span>\n    </button>\n  </mat-menu>\n  <ng-container sdFooter>\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateValidations()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-close-icon{margin-left:auto;font-size:16px;width:16px;height:16px;cursor:pointer;border-radius:50%;color:var(--sd-error);top:4px;right:4px;position:absolute}.c-close-icon:hover{background-color:var(--sd-black200)}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: ExpressionBuilderComponent, selector: "expression-builder", inputs: ["label", "attributes", "model"], outputs: ["modelChange", "sdChange", "edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigureValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configure-validation', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, SdModal, SdButton, SdInput, SdSelect, ExpressionBuilderComponent, MatIconModule, TranslatePipe], template: "<sd-modal [title]=\"'core.component.form-builder.config-validation-error-warning' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\n  @for (validation of validations; track $index; let idx = $index) {\n    <div class=\"mat-elevation-z2 position-relative p-8 mb-16\" style=\"border-radius: 8px;\">\n      <div class=\"row mx-0\">\n        <sd-select\n          class=\"col-3\"\n          [label]=\"'core.component.form-builder.message-type' | translate\"\n          [(model)]=\"validation.alert\"\n          [items]=\"alerts\"\n          valueField=\"value\"\n          displayField=\"display\"\n          required></sd-select>\n        @if (validation.type === 'expression') {\n          <sd-input class=\"col-9\" [form]=\"form\" [label]=\"'core.component.form-builder.message-display' | translate\" [(model)]=\"validation.message\" required></sd-input>\n          <expression-builder class=\"col-12\" [label]=\"'core.component.form-builder.condition-expression' | translate\" [(model)]=\"validation.expression\" [attributes]=\"attributes\"></expression-builder>\n        } @else if (validation.type === 'function') {\n          <sd-select\n            class=\"col-9\"\n            [form]=\"form\"\n            [(model)]=\"validation.code\"\n            [items]=\"functions\"\n            valueField=\"value\"\n            displayField=\"display\"\n            required></sd-select>\n        }\n        <mat-icon class=\"c-close-icon\" (click)=\"removaValidation(idx)\">delete</mat-icon>\n        <!-- <sd-button\n          \n          prefixIcon=\"delete\"\n          (click)=\"removaValidation(idx)\"\n          color=\"error\"\n          type=\"link\"></sd-button> -->\n      </div>\n    </div>\n  }\n  <sd-button [title]=\"'core.component.form-builder.add-validation' | translate\" [matMenuTriggerFor]=\"menu\" prefixIcon=\"add\" color=\"primary\" type=\"link\"></sd-button>\n  <mat-menu #menu=\"matMenu\">\n    <button (click)=\"addValidation('expression')\" mat-menu-item type=\"button\">\n      <!-- <mat-icon fontIcon=\"warning\"></mat-icon> -->\n      <span>{{ 'core.component.form-builder.expression' | translate }}</span>\n    </button>\n    <button (click)=\"addValidation('function')\" mat-menu-item type=\"button\">\n      <!-- <mat-icon fontIcon=\"error\"></mat-icon> -->\n      <span>{{ 'core.component.form-builder.available-methods' | translate }}</span>\n    </button>\n  </mat-menu>\n  <ng-container sdFooter>\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateValidations()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-close-icon{margin-left:auto;font-size:16px;width:16px;height:16px;cursor:pointer;border-radius:50%;color:var(--sd-error);top:4px;right:4px;position:absolute}.c-close-icon:hover{background-color:var(--sd-black200)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SD_FORM_GENERIC_CONFIGURATION]
-                }] }], propDecorators: { modal: [{
+        }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [SdModal]
             }], accept: [{
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
+function normalizeColumns(item) {
+    const raw = Number(item.layout?.columns ?? 12);
+    if (!Number.isFinite(raw))
+        return 12;
+    return Math.min(12, Math.max(1, Math.round(raw)));
+}
+function buildFormBuilderRows(components) {
+    const rows = [];
+    for (const component of components) {
+        const columns = normalizeColumns(component);
+        let row = rows[rows.length - 1];
+        if (!row || row.columns + columns > 12) {
+            row = { id: '', items: [], columns: 0 };
+            rows.push(row);
+        }
+        row.items.push(component);
+        row.columns += columns;
+    }
+    return rows.map(row => ({
+        ...row,
+        id: createRowId(row),
+    }));
+}
+function flattenFormBuilderRows(rows) {
+    return rows.flatMap(row => row.items);
+}
+function canPlaceInRow(row, item, ignoredItemId) {
+    const currentColumns = row.items
+        .filter(rowItem => rowItem.id !== ignoredItemId)
+        .reduce((sum, rowItem) => sum + normalizeColumns(rowItem), 0);
+    return currentColumns + normalizeColumns(item) <= 12;
+}
+function moveItemToRow(rows, request) {
+    const source = findItem(rows, request.itemId);
+    if (!source) {
+        return { rows, moved: false, reason: 'item-not-found' };
+    }
+    const targetRow = rows.find(row => row.id === request.targetRowId);
+    if (!targetRow) {
+        return { rows, moved: false, reason: 'target-row-not-found' };
+    }
+    if (!canPlaceInRow(targetRow, source.item, request.itemId)) {
+        return { rows, moved: false, reason: 'row-overflow' };
+    }
+    const nextRows = rows.map(row => ({ ...row, items: [...row.items] }));
+    const nextSource = findItem(nextRows, request.itemId);
+    const nextTarget = nextRows.find(row => row.id === request.targetRowId);
+    if (!nextSource || !nextTarget) {
+        return { rows, moved: false, reason: 'item-not-found' };
+    }
+    const [item] = nextRows[nextSource.rowIndex].items.splice(nextSource.itemIndex, 1);
+    const insertAt = clampIndex(request.targetIndex ?? nextTarget.items.length, nextTarget.items.length);
+    nextTarget.items.splice(insertAt, 0, item);
+    return {
+        rows: buildFormBuilderRows(flattenFormBuilderRows(nextRows)),
+        moved: true,
+    };
+}
+function createRowId(row) {
+    const firstId = row.items[0]?.id || 'empty';
+    return `row-${firstId}`;
+}
+function clampIndex(index, length) {
+    return Math.max(0, Math.min(index, length));
+}
+function findItem(rows, itemId) {
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        const itemIndex = rows[rowIndex].items.findIndex(item => item.id === itemId);
+        if (itemIndex >= 0) {
+            return {
+                rowIndex,
+                itemIndex,
+                item: rows[rowIndex].items[itemIndex],
+            };
+        }
+    }
+    return undefined;
+}
+
 class SdFormBuilder {
     // ── viewChild signals (Angular 17+) ────────────────────────────────────
     popupViewJSON = viewChild('popupViewJSON');
@@ -5811,8 +5981,7 @@ class SdFormBuilder {
         const term = this.paletteSearch().trim().toLowerCase();
         // why: trong chế độ Detail group, ẩn item 'group' khỏi palette — không cho group lồng group.
         const inGroup = !!this.editingGroupId();
-        const match = (c) => (!inGroup || c.type !== 'group') &&
-            (!term || c.name.toLowerCase().includes(term) || c.type.toLowerCase().includes(term));
+        const match = (c) => (!inGroup || c.type !== 'group') && (!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))
@@ -5856,6 +6025,9 @@ class SdFormBuilder {
     /** 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);
+    dragSource = signal(undefined);
+    resizeState = signal(undefined);
+    isResizing = computed(() => !!this.resizeState());
     expand = true;
     dragDropRows = [];
     isDragging = false;
@@ -5865,13 +6037,18 @@ class SdFormBuilder {
     onAnyDragStarted = () => {
         this.isAnyDragging.set(true);
     };
+    onPaletteDragStarted = () => {
+        this.dragSource.set('palette');
+        this.onAnyDragStarted();
+    };
+    onRowDragStarted = () => {
+        this.dragSource.set('row');
+        this.onAnyDragStarted();
+    };
     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);
+        const rowEl = document.elementFromPoint(event.pointerPosition.x, event.pointerPosition.y)?.closest('.fb-row');
+        const row = rowEl?.id ? this.dragDropRows.find(t => t.id === rowEl.id) : undefined;
         if (row && this.targetItem !== row) {
             this.targetItem = row;
             this.#ref.markForCheck();
@@ -5882,11 +6059,23 @@ class SdFormBuilder {
     onAnyDragEnded = () => {
         setTimeout(() => {
             this.isAnyDragging.set(false);
+            this.dragSource.set(undefined);
             this.lastDragPointer = undefined;
             this.targetItem = undefined;
             this.#ref.markForCheck();
         }, 0);
     };
+    startResizeControl = (item, row) => {
+        this.dragSource.set('resize');
+        this.isAnyDragging.set(true);
+        this.resizeState.set({ itemId: item.id, rowId: row.id, columns: `${item.layout?.columns || '12'}` });
+        this.#ref.markForCheck();
+    };
+    endResizeControl = (event) => {
+        this.dragEndChangeSizeControl(event);
+        this.resizeState.set(undefined);
+        this.onAnyDragEnded();
+    };
     #componentsChanges = new Subject();
     #variablesChanges = new Subject();
     #validationsChanges = new Subject();
@@ -5922,11 +6111,12 @@ class SdFormBuilder {
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    addComponent = (item, index) => {
+    addComponent = (item, index, layoutColumns = '12') => {
         // why: không cho thêm group khi đang Detail trong 1 group (tránh group lồng group).
         if (item.type === 'group' && this.editingGroupId())
             return;
         const id = GenerateId();
+        const columns = item.type === 'break' ? '12' : layoutColumns;
         let newComponent;
         if (item.type === 'group') {
             // Group là layout container, không có key/validate; có nested components[] + properties{icon,color}.
@@ -5934,7 +6124,7 @@ class SdFormBuilder {
                 id,
                 type: 'group',
                 label: 'Group',
-                layout: { columns: '12' },
+                layout: { columns },
                 components: [],
                 properties: {
                     icon: item.symbol || 'category',
@@ -5962,7 +6152,7 @@ class SdFormBuilder {
                 key: GenerateKey(),
                 type: item.type,
                 label: item.type,
-                layout: { columns: '12' },
+                layout: { columns },
                 validate: { required: false },
                 disabled: false,
                 properties: {},
@@ -5992,6 +6182,33 @@ class SdFormBuilder {
     typeLabelFor = (item) => {
         return this.componentIcons[item.type]?.label ?? item.type;
     };
+    placeholderSymbolFor = (item) => {
+        if (!item)
+            return 'add';
+        if (this.#isPaletteComponent(item))
+            return item.symbol;
+        if ('items' in item)
+            return 'view_week';
+        return this.symbolFor(item);
+    };
+    placeholderTitleFor = (item) => {
+        if (!item)
+            return 'Component';
+        if (this.#isPaletteComponent(item))
+            return item.name;
+        if ('items' in item)
+            return 'Row';
+        return ('label' in item && item.label) || this.typeLabelFor(item);
+    };
+    placeholderMetaFor = (item) => {
+        if (!item)
+            return '';
+        if (this.#isPaletteComponent(item))
+            return 'New field';
+        if ('items' in item)
+            return `${item.items.length} field${item.items.length === 1 ? '' : 's'}`;
+        return this.typeLabelFor(item);
+    };
     /** True nếu component có expression điều kiện — drives the "conditional" status chip. */
     hasConditional = (item) => {
         const p = item.properties || {};
@@ -6099,7 +6316,7 @@ class SdFormBuilder {
         if (event.previousContainer === event.container) {
             moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
             this.#syncRowsToComponents();
-            // xử lý kéo chéo
+            // Xử lý kéo chéo giữa các row khi pointer rời khỏi container hiện tại.
             if (!event.isPointerOverContainer) {
                 const dragItemId = event.item.element.nativeElement.id;
                 if (dragItemId) {
@@ -6109,27 +6326,29 @@ class SdFormBuilder {
             }
         }
         else {
-            const drop = event.previousContainer.data[0];
-            if (drop && 'symbol' in drop) {
+            const draggedData = this.#draggedDataFromDropEvent(event);
+            if (this.#isPaletteComponent(draggedData)) {
                 // transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-                const droppedItem = event.previousContainer.data[event.previousIndex];
-                const rowIndex = event.currentIndex;
-                const rowItem = this.dragDropRows?.find(t => t.rowIndex === rowIndex);
-                if (rowItem) {
-                    this.addComponent(droppedItem, +(rowItem.items[0]?.layout?.row || 12) - 1);
-                    // this.addComponent(droppedItem, parseInt(rowItem.items[rowItem.items.length - 1].layout.row, 0));
-                }
-                else {
-                    this.addComponent(droppedItem);
-                }
+                const placement = this.#paletteDropPlacement(event.container.data, event.currentIndex, draggedData);
+                this.addComponent(draggedData, placement.index, placement.columns);
             }
             else {
+                const movedItem = event.previousContainer.data[event.previousIndex];
+                const targetRow = this.#rowForItems(event.container.data);
+                if (targetRow && !canPlaceInRow(targetRow, movedItem, movedItem.id)) {
+                    this.#notifyService.warning(this.#i18n.t('core.component.form-builder.row-overflow'));
+                    return;
+                }
                 transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+                this.#syncRowsToComponents();
             }
         }
         this.#recountTabIndex();
     };
     dragStartComponentItem = (event) => {
+        void event;
+        this.dragSource.set('canvas');
+        this.onAnyDragStarted();
         this.isDragging = true;
     };
     dragEndComponentItem = (event) => {
@@ -6141,29 +6360,38 @@ class SdFormBuilder {
             this.#ref.markForCheck();
         }
     };
-    // Mouseover thì phải có Focus không thì thẻ sẽ báo lỗi
+    isRowFull = (row) => this.#usedColumns(row) >= 12;
+    isRowInlineDropLocked = (row) => this.#availableColumns(row) < 2;
+    canEnterRowDropList = (drag, drop) => {
+        const row = this.#rowForItems(drop.data);
+        if (!row)
+            return true;
+        const data = drag.data;
+        if (!data)
+            return true;
+        if (this.#isPaletteComponent(data)) {
+            return data.type === 'break' || this.#availableColumns(row) >= 2;
+        }
+        if ('layout' in data && 'id' in data) {
+            return canPlaceInRow(row, data, data.id);
+        }
+        return true;
+    };
     onFocus = (event) => {
-        //console.log(event);
+        void event;
     };
     xuLyKeoCheo = (dragItem) => {
-        if (dragItem) {
-            if (this.targetItem) {
-                // kiểm tra target đã full column chưa?
-                const totalColumnInRow = this.targetItem.items.map(t => +t.layout.columns || 12).reduce((acc, curr) => acc + curr, 0);
-                if (totalColumnInRow + +dragItem.layout.columns <= 12) {
-                    // xóa vị trí cũ
-                    this.dragDropRows.forEach(t => {
-                        if (t.items.some((k) => k.id === dragItem.id)) {
-                            t.items = t.items.filter((k) => k.id !== dragItem.id) || [];
-                        }
-                    });
-                    // thêm vào vị trí mới
-                    this.targetItem.items.push(dragItem);
-                    this.#syncRowsToComponents();
-                }
-                else {
-                    this.#notifyService.warning(this.#i18n.t('core.component.form-builder.row-overflow'));
-                }
+        if (dragItem && this.targetItem) {
+            const result = moveItemToRow(this.dragDropRows, {
+                itemId: dragItem.id,
+                targetRowId: this.targetItem.id,
+            });
+            if (result.moved) {
+                this.dragDropRows = this.#withRowIndexes(result.rows);
+                this.#syncRowsToComponents();
+            }
+            else if (result.reason === 'row-overflow') {
+                this.#notifyService.warning(this.#i18n.t('core.component.form-builder.row-overflow'));
             }
         }
         this.targetItem = undefined;
@@ -6172,7 +6400,6 @@ class SdFormBuilder {
         return false;
     };
     #recountTabIndex = () => {
-        // Tránh dùng map vì nó sẽ sinh ra reference mới. Chạy theo scope hiện tại (top-level hoặc group).
         const scope = this.#scope();
         scope.forEach((item, index) => {
             if (item.layout) {
@@ -6193,35 +6420,11 @@ class SdFormBuilder {
         this.#syncComponentsToRows();
     };
     // Hàm xử lý chuyển đổi components (scope hiện tại) -> dragDropRows
-    // Dựa vào columns của component để quyết định dragDropRows có bao nhiêu items trên row, đảm bảo columns tổng số items <= 12
     #syncComponentsToRows = () => {
-        this.dragDropRows = [];
-        for (const component of this.#scope()) {
-            // lấy dòng cuối cùng của dragDropList
-            let lastRow = { rowIndex: this.dragDropRows.length, items: [] };
-            if (this.dragDropRows.length) {
-                lastRow = this.dragDropRows[this.dragDropRows.length - 1];
-            }
-            else {
-                this.dragDropRows.push(lastRow);
-            }
-            // tính tổng cột trên 1 dòng
-            const columns = +component.layout.columns || 12;
-            const totalColumnInRow = lastRow.items.map(t => +t.layout.columns || 12).reduce((acc, curr) => acc + curr, 0);
-            if (+totalColumnInRow + columns <= 12) {
-                lastRow.items.push(component);
-            }
-            else {
-                const newRow = { rowIndex: this.dragDropRows.length, items: [component] };
-                this.dragDropRows.push(newRow);
-            }
-        }
+        this.dragDropRows = this.#withRowIndexes(buildFormBuilderRows(this.#scope()));
     };
-    // Hàm xử lý chuyển đổi dragDropRows -> components (ghi về scope hiện tại)
-    // Vì khi kéo thả sẽ thay đổi vị trí, do đó cần sắp xếp lại components
     #syncRowsToComponents = () => {
-        // rải data ma trận droplist => schema.components
-        const flat = this.dragDropRows?.map(e => e.items)?.reduce((current, next) => [...current, ...next], []) || [];
+        const flat = flattenFormBuilderRows(this.dragDropRows);
         const g = this.editingGroup();
         if (g) {
             g.components = flat;
@@ -6250,6 +6453,15 @@ class SdFormBuilder {
         if (item.layout.columns !== newCols) {
             item.layout.columns = newCols;
         }
+        const currentResizeState = this.resizeState();
+        if (currentResizeState?.itemId !== item.id || currentResizeState?.columns !== newCols) {
+            this.resizeState.set({
+                itemId: item.id,
+                rowId: currentResizeState?.rowId ?? this.#rowForItems(items)?.id ?? `row-${item.id}`,
+                columns: newCols,
+            });
+            this.#ref.markForCheck();
+        }
         //     document.getElementById('test').innerHTML = `<pre>
         // left: ${left}
         // right: ${document.getElementById('frmComponent').getBoundingClientRect().right}
@@ -6275,9 +6487,7 @@ class SdFormBuilder {
     };
     // Duplicate component nhưng sẽ clear id và key để tránh trùng lặp (theo scope hiện tại)
     onDuplicate = (component) => {
-        const clonedComponent = JSON.parse(JSON.stringify(component));
-        clonedComponent.id = GenerateId();
-        clonedComponent.key = GenerateKey();
+        const clonedComponent = this.#cloneComponentWithNewIdentity(component);
         const scope = this.#scope();
         scope.push(clonedComponent);
         this.#recountTabIndex();
@@ -6380,8 +6590,84 @@ class SdFormBuilder {
             this.#notifyService.success('Submit success');
         }
     };
+    #withRowIndexes = (rows) => {
+        return rows.map((row, index) => ({
+            ...row,
+            rowIndex: index,
+        }));
+    };
+    #rowForItems = (items) => {
+        return this.dragDropRows.find(row => row.items === items);
+    };
+    #isPaletteComponent = (item) => {
+        return !!item && typeof item === 'object' && 'symbol' in item && 'type' in item;
+    };
+    #draggedDataFromDropEvent = (event) => {
+        return event.item.data ?? event.previousContainer.data[event.previousIndex];
+    };
+    #usedColumns = (row) => {
+        return row.items.reduce((sum, item) => sum + +(item.layout?.columns || 12), 0);
+    };
+    #availableColumns = (row) => {
+        return Math.max(0, 12 - this.#usedColumns(row));
+    };
+    #scopeIndexAfterRow = (row) => {
+        const scope = this.#scope();
+        const lastItem = row.items[row.items.length - 1];
+        const lastIndex = lastItem ? scope.findIndex(component => component.id === lastItem.id) : -1;
+        return lastIndex >= 0 ? lastIndex + 1 : scope.length;
+    };
+    #paletteDropPlacement = (containerData, currentIndex, item) => {
+        const row = this.#rowForItems(containerData);
+        if (!row || item.type === 'break') {
+            return { index: this.#scopeIndexFromDrop(containerData, currentIndex) };
+        }
+        const availableColumns = this.#availableColumns(row);
+        if (availableColumns >= 2) {
+            return {
+                index: this.#scopeIndexFromDrop(containerData, currentIndex),
+                columns: `${availableColumns}`,
+            };
+        }
+        return { index: this.#scopeIndexAfterRow(row), columns: '12' };
+    };
+    #scopeIndexFromDrop = (containerData, currentIndex) => {
+        const scope = this.#scope();
+        const row = this.#rowForItems(containerData);
+        if (row) {
+            const anchor = row.items[currentIndex] ?? row.items[row.items.length - 1];
+            if (!anchor)
+                return scope.length;
+            const anchorIndex = scope.findIndex(component => component.id === anchor.id);
+            if (anchorIndex < 0)
+                return scope.length;
+            return currentIndex >= row.items.length ? anchorIndex + 1 : anchorIndex;
+        }
+        if (containerData === this.dragDropRows) {
+            const rowAtIndex = this.dragDropRows[currentIndex];
+            const anchor = rowAtIndex?.items[0];
+            if (!anchor)
+                return scope.length;
+            const anchorIndex = scope.findIndex(component => component.id === anchor.id);
+            return anchorIndex >= 0 ? anchorIndex : scope.length;
+        }
+        return undefined;
+    };
+    #cloneComponentWithNewIdentity = (component) => {
+        const clonedComponent = JSON.parse(JSON.stringify(component));
+        this.#regenerateComponentIdentity(clonedComponent);
+        return clonedComponent;
+    };
+    #regenerateComponentIdentity = (component) => {
+        component.id = GenerateId();
+        if (component.type === 'group') {
+            component.components = component.components.map(child => this.#cloneComponentWithNewIdentity(child));
+            return;
+        }
+        component.key = GenerateKey();
+    };
     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 }], ngImport: i0, template: "<!-- cdkDropListGroup: auto-connect t\u1EA5t c\u1EA3 cdkDropList trong palette, canvas rows, group bodies.\n     [class.fb-shell--dragging]: JS-driven flag \u0111\u1EC3 \u1EA9n hover/actions/resize to\u00E0n di\u1EC7n\n     trong l\u00FAc drag (CSS :has() kh\u00F4ng b\u1EAFt 100% tr\u01B0\u1EDDng h\u1EE3p v\u1EDBi CDK preview clone). -->\n<div class=\"fb-shell\" cdkDropListGroup [class.fb-shell--dragging]=\"isAnyDragging()\">\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 -->\n  <aside class=\"fb-palette\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.components' | translate }}</div>\n    </div>\n\n    <!-- Search pill -->\n    <div class=\"fb-palette__search\">\n      <span class=\"msi\" aria-hidden=\"true\">search</span>\n      <input\n        type=\"text\"\n        [placeholder]=\"'core.component.form-builder.search-components' | translate\"\n        [value]=\"paletteSearch()\"\n        (input)=\"paletteSearch.set($any($event.target).value)\" />\n      <span class=\"kbd\">\u2318K</span>\n    </div>\n\n    <div class=\"fb-palette__scroll\">\n      @for (group of paletteGroups(); track group.key) {\n        <div class=\"fb-palette__group-label\">{{ group.label }}</div>\n        <div\n          class=\"fb-palette__list\"\n          cdkDropList\n          [cdkDropListData]=\"group.items\"\n          [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n          @for (formBuilderComponent of group.items; track formBuilderComponent.type) {\n            <div\n              cdkDrag\n              class=\"fb-palette-item\"\n              [matTooltip]=\"formBuilderComponent.name\"\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>\n              <span class=\"fb-palette-item__name\">{{ formBuilderComponent.name }}</span>\n              <span class=\"fb-palette-item__drag\"><span class=\"msi\">drag_indicator</span></span>\n              <!-- Generic drag preview: ch\u1EC9 icon (puck), label \u1EA9n -->\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </aside>\n\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 -->\n  <section class=\"fb-canvas\">\n    @let _editingGroup = editingGroup();\n    @if (_editingGroup) {\n      <!-- \u2500\u2500 Drill-in header: \u0111ang thi\u1EBFt k\u1EBF children c\u1EE7a 1 group \u2500\u2500 -->\n      <header class=\"fb-canvas__header fb-canvas__header--group\">\n        <div class=\"fb-canvas__title fb-groupedit__crumb\">\n          <button type=\"button\" class=\"fb-icon-btn\" [matTooltip]=\"'core.component.form-builder.back-to-design' | translate\" (click)=\"cancelGroupEdit()\">\n            <span class=\"msi\">chevron_left</span>\n          </button>\n          <span class=\"fb-groupedit__icon\"><span class=\"msi\">{{ _editingGroup.properties?.icon || 'category' }}</span></span>\n          <span>{{ _editingGroup.label || ('core.component.form-builder.edit-group' | translate) }}</span>\n          <span class=\"fb-groupedit__hint\">{{ 'core.component.form-builder.edit-group' | translate }}</span>\n        </div>\n        <div class=\"fb-canvas__actions\">\n          <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"cancelGroupEdit()\"></sd-button>\n          <sd-button type=\"fill\" color=\"primary\" prefixIcon=\"check\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"confirmGroupEdit()\"></sd-button>\n        </div>\n      </header>\n    } @else {\n    <header class=\"fb-canvas__header\">\n      <div class=\"fb-canvas__title\">\n        <span>{{ 'core.component.form-builder.layout' | translate }}</span>\n      </div>\n      <div class=\"fb-canvas__actions\">\n        <!-- Toolbar cluster: view JSON / variables / validation -->\n        <button\n          type=\"button\"\n          class=\"fb-icon-btn\"\n          [matTooltip]=\"'core.component.form-builder.view-json' | translate\"\n          (click)=\"viewJSON()\">\n          <span class=\"msi\">data_object</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"fb-icon-btn\"\n          [matTooltip]=\"'core.component.form-builder.config-variable' | translate\"\n          (click)=\"configureVariables()\">\n          <span class=\"msi\">data_array</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"fb-icon-btn\"\n          [matTooltip]=\"'core.component.form-builder.config-validation-warning-error' | translate\"\n          (click)=\"openConfigureValidation()\">\n          <span class=\"msi\">rule</span>\n        </button>\n\n        <span class=\"fb-divider\"></span>\n\n        <!-- M3 segmented Design/Preview toggle -->\n        <div class=\"fb-mode-toggle\" role=\"tablist\">\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [class.is-active]=\"!isPreview()\"\n            (click)=\"setMode(false)\">\n            <span class=\"msi\">edit</span>\n            <span>{{ 'core.component.form-builder.design' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [class.is-active]=\"isPreview()\"\n            (click)=\"setMode(true)\">\n            <span class=\"msi\">visibility</span>\n            <span>{{ 'core.component.form-builder.preview' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </header>\n    }\n\n    <div\n      class=\"fb-canvas__body\"\n      [class.is-preview]=\"isPreview()\"\n      id=\"frmComponent\">\n      @if (isPreview()) {\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 -->\n        <div class=\"fb-preview-card\">\n          <div class=\"fb-preview-card__chip\">\n            <span class=\"msi\">visibility</span>\n            {{ 'core.component.form-builder.preview-runtime' | translate }}\n          </div>\n          <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\n          <div class=\"fb-preview-card__footer\">\n            <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"setMode(false)\"></sd-button>\n            <sd-button type=\"fill\" color=\"primary\" [title]=\"'core.component.form-builder.submit' | translate\" (click)=\"onValidate()\"></sd-button>\n          </div>\n        </div>\n      } @else {\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 -->\n        @if (!dragDropRows.length) {\n          <div class=\"fb-empty\">\n            <div class=\"fb-empty__art\"><span class=\"msi\">dashboard_customize</span></div>\n            <div class=\"fb-empty__title\">{{ 'core.component.form-builder.empty-title' | translate }}</div>\n            <div class=\"fb-empty__hint\">\n              {{ 'core.component.form-builder.empty-hint' | translate }}\n              <span class=\"fb-empty__kbd\"><span class=\"msi\">keyboard</span>\u2318 K</span>\n            </div>\n          </div>\n        }\n\n        <div\n          cdkDropList\n          cdkDropListOrientation=\"vertical\"\n          [cdkDropListData]=\"dragDropRows\"\n          (cdkDropListDropped)=\"drop($event)\"\n          (click)=\"clickFormContentEmpty()\"\n          aria-hidden=\"true\">\n          @for (row of dragDropRows; track row.rowIndex) {\n            <div\n              cdkDrag\n              class=\"fb-row\"\n              (mouseover)=\"onMouseover($event, row)\"\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\">\n              <div class=\"fb-row__drag\" [matTooltip]=\"'core.component.form-builder.drag-vertically' | translate\" cdkDragHandle>\n                <span class=\"msi\">drag_indicator</span>\n              </div>\n              <!-- Generic puck preview -->\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n              <!-- Quick-add break button \u2014 show on row hover, insert break after this row -->\n              <button\n                type=\"button\"\n                class=\"fb-row-break-btn\"\n                [matTooltip]=\"'core.component.form-builder.break' | translate\"\n                matTooltipPosition=\"right\"\n                (click)=\"insertBreakAfter(row); $event.stopPropagation()\">\n                <span class=\"msi\">horizontal_rule</span>\n              </button>\n\n              <div\n                class=\"fb-row__items\"\n                style=\"display: flex; flex: 1; gap: var(--gap-2);\"\n                cdkDropList\n                cdkDropListOrientation=\"horizontal\"\n                [cdkDropListData]=\"row.items\"\n                (cdkDropListDropped)=\"drop($event)\">\n\n                @for (item of row.items; track item.id; let i = $index) {\n                  <!-- Group component renders as outlined card with colored header bar -->\n                  @if (item.type === 'group') {\n                    @let g = $any(item);\n                    @let cv = groupColorVars(g.properties?.color);\n                    <div\n                      cdkDrag\n                      [id]=\"item.id\"\n                      class=\"fb-group column-{{ item.layout?.columns || 12 }}\"\n                      [class.fb-item]=\"false\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [style.flex]=\"'0 0 calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\n                      [style.maxWidth]=\"'calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\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 -->\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. -->\n                      <div class=\"fb-group__header\" cdkDragHandle [style.background]=\"cv.bg\" [style.color]=\"cv.fg\">\n                        <span class=\"fb-group__icon\"><span class=\"msi\">{{ g.properties?.icon || 'category' }}</span></span>\n                        <span class=\"fb-group__label\">{{ item.label }}</span>\n                        @if (hasConditional(item)) {\n                          <span class=\"fb-group__conditional-chip\">\n                            <span class=\"msi\" style=\"font-size: 12px;\">bolt</span>\n                            {{ 'core.component.form-builder.conditional' | translate }}\n                          </span>\n                        }\n                        <span class=\"fb-group__count\">{{ g.components?.length || 0 }} fields</span>\n                      </div>\n                      <!-- Floating action toolbar -->\n                      <div class=\"fb-actions\">\n                        <!-- why: Detail = m\u1EDF canvas thi\u1EBFt k\u1EBF ri\u00EAng cho group (thay cho drag/drop trong group). -->\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [matTooltip]=\"'core.component.form-builder.edit-group' | translate\"\n                                (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                          <span class=\"msi\">open_in_full</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.hidden\"\n                                [class.on]=\"item.properties?.hidden\"\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <!-- Static preview: children render read-only (kh\u00F4ng drag/resize/select).\n                           S\u1EEDa n\u1ED9i dung group qua n\u00FAt Detail (enterGroupEdit). -->\n                      <div class=\"fb-group__body fb-group__body--static\" (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                        @if (!g.components?.length) {\n                          <div class=\"fb-group__empty\">\n                            <span class=\"msi\" style=\"font-size: 16px; margin-right: 6px;\">open_in_full</span>\n                            {{ 'core.component.form-builder.group-empty-hint' | translate }}\n                          </div>\n                        }\n                        @for (child of g.components; track child.id) {\n                          <div\n                            class=\"fb-item is-child fb-item--static column-{{ child.layout?.columns || 12 }}\"\n                            [class.is-hidden]=\"child.properties?.hidden\">\n                            <ng-container\n                              *ngTemplateOutlet=\"controlTemplate; context: { $implicit: child }\">\n                            </ng-container>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  } @else if (item.type === 'break') {\n                    <!-- Break: row separator c\u1ED1 \u0111\u1ECBnh. Render 12-col line, kh\u00F4ng c\u00F3 resize/edit attribute. -->\n                    <div\n                      cdkDrag\n                      [id]=\"item.id\"\n                      class=\"fb-item is-break column-12\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\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 -->\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                      <div class=\"fb-break-line\">\n                        <span class=\"msi\">horizontal_rule</span>\n                        <span class=\"fb-break-label\">{{ 'core.component.form-builder.break' | translate }}</span>\n                      </div>\n                      <div class=\"fb-actions\">\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.hidden\"\n                                [class.on]=\"item.properties?.hidden\"\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular form component -->\n                    <div\n                      cdkDrag\n                      [id]=\"item.id\"\n                      class=\"fb-item column-{{ item.layout?.columns || 12 }}\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [class.is-readonly]=\"item.properties?.viewed\"\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 -->\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n\n                      <!-- Status chip (mutually exclusive priority: hidden > readonly > conditional) -->\n                      @if (item.properties?.hidden) {\n                        <span class=\"fb-status-chip hidden\">\n                          <span class=\"msi\">visibility_off</span>\n                          {{ 'core.component.form-builder.hidden' | translate }}\n                        </span>\n                      } @else if (item.properties?.viewed) {\n                        <span class=\"fb-status-chip readonly\">\n                          <span class=\"msi\">edit_off</span>\n                          {{ 'core.component.form-builder.read-only' | translate }}\n                        </span>\n                      } @else if (hasConditional(item)) {\n                        <span class=\"fb-status-chip conditional\">\n                          <span class=\"msi\">bolt</span>\n                          {{ 'core.component.form-builder.conditional' | translate }}\n                        </span>\n                      }\n\n                      <!-- Floating action toolbar pill -->\n                      <div class=\"fb-actions\">\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.viewed\"\n                                [class.on]=\"item.properties?.viewed\"\n                                [matTooltip]=\"item.properties?.viewed ? ('core.component.form-builder.unset-readonly' | translate) : ('core.component.form-builder.set-readonly' | translate)\"\n                                (click)=\"onChangeViewed(item); $event.stopPropagation()\">\n                          <span class=\"msi\">edit_off</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.hidden\"\n                                [class.on]=\"item.properties?.hidden\"\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <ng-container\n                        *ngTemplateOutlet=\"controlTemplate; context: { $implicit: item }\">\n                      </ng-container>\n\n                      <!-- Resize handle (pill) \u2014 cdkDragLockAxis=\"x\" \u0111\u1EC3 ch\u1EC9 k\u00E9o ngang.\n                           Wrapping cdkDropList c\u00F3 enterPredicate=false, kh\u00F4ng nh\u1EADn drop. -->\n                      <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n                        <div\n                          cdkDrag\n                          cdkDragLockAxis=\"x\"\n                          class=\"fb-resize\"\n                          (cdkDragStarted)=\"onAnyDragStarted()\"\n                          (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\n                          (cdkDragEnded)=\"dragEndChangeSizeControl($event); onAnyDragEnded()\"\n                          [matTooltip]=\"'core.component.form-builder.flex' | translate\"\n                          aria-label=\"resize\"></div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n\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 -->\n  <aside class=\"fb-attrs\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.attribute' | translate }}</div>\n    </div>\n\n    @let _selectedComponent = selectedComponent();\n    @if (_selectedComponent) {\n      <!-- Selection header: type icon + name + key/type -->\n      <div class=\"fb-attrs__selection\">\n        <span class=\"fb-attrs__sel-icon\"><span class=\"msi\">{{ symbolFor(_selectedComponent) }}</span></span>\n        <div class=\"fb-attrs__sel-meta\">\n          <div class=\"fb-attrs__sel-name\">{{ $any(_selectedComponent).label || ('core.component.form-builder.untitled' | translate) }}</div>\n          <div class=\"fb-attrs__sel-key\">\n            @if ($any(_selectedComponent).key) {\n              {{ $any(_selectedComponent).key }} \u00B7 {{ typeLabelFor(_selectedComponent) }}\n            } @else {\n              {{ typeLabelFor(_selectedComponent) }}\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"fb-attrs__body\" aria-hidden=\"true\">\n        @if (_selectedComponent.type === 'textfield') {\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textfield-attribute>\n        } @else if (_selectedComponent.type === 'textarea') {\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textarea-attribute>\n        } @else if (_selectedComponent.type === 'chip-string') {\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></chip-string-attribute>\n        } @else if (_selectedComponent.type === 'chip-calendar') {\n          <chip-calendar-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></chip-calendar-attribute>\n        } @else if (_selectedComponent.type === 'number') {\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></number-attribute>\n        } @else if (_selectedComponent.type === 'datetime') {\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></datetime-attribute>\n        } @else if (_selectedComponent.type === 'select') {\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></select-attribute>\n        } @else if (_selectedComponent.type === 'radio') {\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></radio-attribute>\n        } @else if (_selectedComponent.type === 'checkbox') {\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></checkbox-attribute>\n        } @else if (_selectedComponent.type === 'html') {\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></html-attribute>\n        } @else if (_selectedComponent.type === 'upload') {\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></upload-attribute>\n        } @else if (_selectedComponent.type === 'table') {\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></table-attribute>\n        } @else if (_selectedComponent.type === 'group') {\n          <group-attribute [group]=\"$any(_selectedComponent)\"></group-attribute>\n        }\n      </div>\n    } @else {\n      <div class=\"fb-attrs__placeholder\">\n        <span class=\"msi\">ads_click</span>\n        <div class=\"title\">{{ 'core.component.form-builder.no-selection-title' | translate }}</div>\n        <div class=\"hint\">{{ 'core.component.form-builder.no-selection-hint' | translate }}</div>\n      </div>\n    }\n  </aside>\n</div>\n\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 -->\n<ng-template #controlTemplate let-item>\n  @if (item.type === 'textfield') {\n    <textfield-control [component]=\"item\"></textfield-control>\n  } @else if (item.type === 'textarea') {\n    <textarea-control [component]=\"item\"></textarea-control>\n  } @else if (item.type === 'chip-string') {\n    <chip-string-control [component]=\"item\"></chip-string-control>\n  } @else if (item.type === 'chip-calendar') {\n    <chip-calendar-control [component]=\"item\"></chip-calendar-control>\n  } @else if (item.type === 'number') {\n    <number-control [component]=\"item\"></number-control>\n  } @else if (item.type === 'datetime') {\n    <datetime-control [component]=\"item\"></datetime-control>\n  } @else if (item.type === 'select') {\n    <select-control [component]=\"item\"></select-control>\n  } @else if (item.type === 'radio') {\n    <radio-control [component]=\"item\"></radio-control>\n  } @else if (item.type === 'checkbox') {\n    <checkbox-control [component]=\"item\"></checkbox-control>\n  } @else if (item.type === 'html') {\n    <html-control [component]=\"item\"></html-control>\n  } @else if (item.type === 'upload') {\n    <upload-control [component]=\"item\"></upload-control>\n  } @else if (item.type === 'table') {\n    <table-control [component]=\"item\"></table-control>\n  }\n</ng-template>\n\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 -->\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\n  <ng-container sdFooter>\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<sd-modal [title]=\"'core.component.form-builder.config-variable' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\n  @for (variable of clonedVariables; track variable.id) {\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"variable.key\" required></sd-input>\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.display-label' | translate\" [(model)]=\"variable.label\" required></sd-input>\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\n    </div>\n  }\n  <a href=\"javascript:;\" (click)=\"addVariables()\">{{ 'core.component.form-builder.add-variable' | translate }}</a>\n  <ng-container sdFooter>\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\n", styles: ["@charset \"UTF-8\";: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}table-control{display:block;width:100%;max-width:100%;min-width:0}.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}.fb-group__body--static{display:flex;flex-wrap:wrap;gap:var(--gap-2, 8px);cursor:pointer;min-height:48px}.fb-group__body--static .fb-item--static{pointer-events:none;position:relative}.fb-group__body--static .fb-item--static .fb-resize,.fb-group__body--static .fb-item--static .fb-actions,.fb-group__body--static .fb-item--static .fb-status-chip{display:none!important}.fb-canvas__header--group .fb-groupedit__crumb{display:flex;align-items:center;gap:6px;font-weight:600}.fb-canvas__header--group .fb-groupedit__icon .msi{font-size:18px;color:var(--md-sys-color-primary)}.fb-canvas__header--group .fb-groupedit__hint{font-weight:400;font-size:12px;color:var(--md-sys-color-on-surface-variant, #6b6b6b);padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}\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: 
+    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 }], ngImport: i0, template: "<!-- cdkDropListGroup: auto-connect t\u1EA5t c\u1EA3 cdkDropList trong palette, canvas rows, group bodies.\n     [class.fb-shell--dragging]: JS-driven flag \u0111\u1EC3 \u1EA9n hover/actions/resize to\u00E0n di\u1EC7n\n     trong l\u00FAc drag (CSS :has() kh\u00F4ng b\u1EAFt 100% tr\u01B0\u1EDDng h\u1EE3p v\u1EDBi CDK preview clone). -->\n<div\n  class=\"fb-shell\"\n  cdkDropListGroup\n  [class.fb-shell--dragging]=\"isAnyDragging()\"\n  [class.fb-shell--palette-dragging]=\"dragSource() === 'palette'\"\n  [class.fb-shell--resizing]=\"isResizing()\">\n  <ng-template #dragPreviewTemplate>\n    <span class=\"fb-drag-preview__glyph\" aria-hidden=\"true\"></span>\n    <span class=\"fb-drag-preview__body\" aria-hidden=\"true\">\n      <span class=\"fb-drag-preview__line is-strong\"></span>\n      <span class=\"fb-drag-preview__line\"></span>\n    </span>\n  </ng-template>\n  <ng-template #dropPlaceholderTemplate let-item>\n    <span class=\"fb-drop-placeholder__icon\" aria-hidden=\"true\">\n      <span class=\"msi\">{{ placeholderSymbolFor(item) }}</span>\n    </span>\n    <span class=\"fb-drop-placeholder__body\" aria-hidden=\"true\">\n      <span class=\"fb-drop-placeholder__title\">{{ placeholderTitleFor(item) }}</span>\n      <span class=\"fb-drop-placeholder__meta\">{{ placeholderMetaFor(item) }}</span>\n    </span>\n  </ng-template>\n\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 -->\n  <aside class=\"fb-palette\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.components' | translate }}</div>\n    </div>\n\n    <!-- Search pill -->\n    <div class=\"fb-palette__search\">\n      <span class=\"msi\" aria-hidden=\"true\">search</span>\n      <input\n        type=\"text\"\n        [placeholder]=\"'core.component.form-builder.search-components' | translate\"\n        [value]=\"paletteSearch()\"\n        (input)=\"paletteSearch.set($any($event.target).value)\" />\n      <span class=\"kbd\">\u2318K</span>\n    </div>\n\n    <div class=\"fb-palette__scroll\">\n      @for (group of paletteGroups(); track group.key) {\n        <div class=\"fb-palette__group-label\">{{ group.label }}</div>\n        <div class=\"fb-palette__list\" cdkDropList [cdkDropListData]=\"group.items\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n          @for (formBuilderComponent of group.items; track formBuilderComponent.type) {\n            <div\n              cdkDrag\n              [cdkDragData]=\"formBuilderComponent\"\n              class=\"fb-palette-item\"\n              [matTooltip]=\"formBuilderComponent.name\"\n              matTooltipPosition=\"right\"\n              (click)=\"addComponent(formBuilderComponent)\"\n              (cdkDragStarted)=\"onPaletteDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              aria-hidden=\"true\">\n              <span class=\"fb-palette-item__icon\"\n                ><span class=\"msi\">{{ formBuilderComponent.symbol }}</span></span\n              >\n              <span class=\"fb-palette-item__name\">{{ formBuilderComponent.name }}</span>\n              <span class=\"fb-palette-item__drag\"><span class=\"msi\">drag_indicator</span></span>\n              <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n              </div>\n              <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: formBuilderComponent }\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </aside>\n\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 -->\n  <section class=\"fb-canvas\">\n    @let _editingGroup = editingGroup();\n    @if (_editingGroup) {\n      <!-- \u2500\u2500 Drill-in header: \u0111ang thi\u1EBFt k\u1EBF children c\u1EE7a 1 group \u2500\u2500 -->\n      <header class=\"fb-canvas__header fb-canvas__header--group\">\n        <div class=\"fb-canvas__title fb-groupedit__crumb\">\n          <button\n            type=\"button\"\n            class=\"fb-icon-btn\"\n            [matTooltip]=\"'core.component.form-builder.back-to-design' | translate\"\n            (click)=\"cancelGroupEdit()\">\n            <span class=\"msi\">chevron_left</span>\n          </button>\n          <span class=\"fb-groupedit__icon\"\n            ><span class=\"msi\">{{ _editingGroup.properties?.icon || 'category' }}</span></span\n          >\n          <span>{{ _editingGroup.label || ('core.component.form-builder.edit-group' | translate) }}</span>\n          <span class=\"fb-groupedit__hint\">{{ 'core.component.form-builder.edit-group' | translate }}</span>\n        </div>\n        <div class=\"fb-canvas__actions\">\n          <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"cancelGroupEdit()\"></sd-button>\n          <sd-button\n            type=\"fill\"\n            color=\"primary\"\n            prefixIcon=\"check\"\n            [title]=\"'core.component.form-builder.confirm' | translate\"\n            (click)=\"confirmGroupEdit()\"></sd-button>\n        </div>\n      </header>\n    } @else {\n      <header class=\"fb-canvas__header\">\n        <div class=\"fb-canvas__title\">\n          <span>{{ 'core.component.form-builder.layout' | translate }}</span>\n        </div>\n        <div class=\"fb-canvas__actions\">\n          <!-- Toolbar cluster: view JSON / variables / validation -->\n          <button type=\"button\" class=\"fb-icon-btn\" [matTooltip]=\"'core.component.form-builder.view-json' | translate\" (click)=\"viewJSON()\">\n            <span class=\"msi\">data_object</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"fb-icon-btn\"\n            [matTooltip]=\"'core.component.form-builder.config-variable' | translate\"\n            (click)=\"configureVariables()\">\n            <span class=\"msi\">data_array</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"fb-icon-btn\"\n            [matTooltip]=\"'core.component.form-builder.config-validation-warning-error' | translate\"\n            (click)=\"openConfigureValidation()\">\n            <span class=\"msi\">rule</span>\n          </button>\n\n          <span class=\"fb-divider\"></span>\n\n          <!-- M3 segmented Design/Preview toggle -->\n          <div class=\"fb-mode-toggle\" role=\"tablist\">\n            <button type=\"button\" role=\"tab\" [class.is-active]=\"!isPreview()\" [attr.aria-selected]=\"!isPreview()\" (click)=\"setMode(false)\">\n              <span class=\"msi\">edit</span>\n              <span>{{ 'core.component.form-builder.design' | translate }}</span>\n            </button>\n            <button type=\"button\" role=\"tab\" [class.is-active]=\"isPreview()\" [attr.aria-selected]=\"isPreview()\" (click)=\"setMode(true)\">\n              <span class=\"msi\">visibility</span>\n              <span>{{ 'core.component.form-builder.preview' | translate }}</span>\n            </button>\n          </div>\n        </div>\n      </header>\n    }\n\n    <div class=\"fb-canvas__body\" [class.is-preview]=\"isPreview()\" id=\"frmComponent\">\n      @if (isPreview()) {\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 -->\n        <div class=\"fb-preview-card\">\n          <div class=\"fb-preview-card__chip\">\n            <span class=\"msi\">visibility</span>\n            {{ 'core.component.form-builder.preview-runtime' | translate }}\n          </div>\n          <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\n          <div class=\"fb-preview-card__footer\">\n            <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"setMode(false)\"></sd-button>\n            <sd-button\n              type=\"fill\"\n              color=\"primary\"\n              [title]=\"'core.component.form-builder.submit' | translate\"\n              (click)=\"onValidate()\"></sd-button>\n          </div>\n        </div>\n      } @else {\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 -->\n        @if (!dragDropRows.length) {\n          <div class=\"fb-empty\">\n            <div class=\"fb-empty__art\"><span class=\"msi\">dashboard_customize</span></div>\n            <div class=\"fb-empty__title\">{{ 'core.component.form-builder.empty-title' | translate }}</div>\n            <div class=\"fb-empty__hint\">\n              {{ 'core.component.form-builder.empty-hint' | translate }}\n              <span class=\"fb-empty__kbd\"><span class=\"msi\">keyboard</span>\u2318 K</span>\n            </div>\n          </div>\n        }\n\n        <div\n          cdkDropList\n          cdkDropListOrientation=\"vertical\"\n          [cdkDropListData]=\"dragDropRows\"\n          (cdkDropListDropped)=\"drop($event)\"\n          (click)=\"clickFormContentEmpty()\"\n          aria-hidden=\"true\">\n          @for (row of dragDropRows; track row.id) {\n            <div\n              cdkDrag\n              [cdkDragData]=\"row\"\n              class=\"fb-row\"\n              (mouseover)=\"onMouseover($event, row)\"\n              (focus)=\"onFocus($event)\"\n              (cdkDragStarted)=\"onRowDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              [class.is-drag-target]=\"targetItem === row\"\n              [class.is-row-full]=\"isRowFull(row)\"\n              [class.is-row-inline-locked]=\"isRowInlineDropLocked(row)\"\n              [class.is-resizing-row]=\"resizeState()?.rowId === row.id\"\n              [id]=\"row.id\"\n              aria-hidden=\"true\">\n              <div class=\"fb-row__drag\" [matTooltip]=\"'core.component.form-builder.drag-vertically' | translate\" cdkDragHandle>\n                <span class=\"msi\">drag_indicator</span>\n              </div>\n              <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n              </div>\n              <div *cdkDragPlaceholder class=\"fb-drop-placeholder fb-drop-placeholder--row\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: row }\"></ng-container>\n              </div>\n              <!-- Quick-add break button \u2014 show on row hover, insert break after this row -->\n              <button\n                type=\"button\"\n                class=\"fb-row-break-btn\"\n                [matTooltip]=\"'core.component.form-builder.break' | translate\"\n                matTooltipPosition=\"right\"\n                (click)=\"insertBreakAfter(row); $event.stopPropagation()\">\n                <span class=\"msi\">horizontal_rule</span>\n              </button>\n\n              <div\n                class=\"fb-row__items\"\n                style=\"display: flex; flex: 1; gap: var(--gap-2)\"\n                cdkDropList\n                cdkDropListOrientation=\"horizontal\"\n                [cdkDropListData]=\"row.items\"\n                [cdkDropListEnterPredicate]=\"canEnterRowDropList\"\n                (cdkDropListDropped)=\"drop($event)\">\n                @for (item of row.items; track item.id; let i = $index) {\n                  <!-- Group component renders as outlined card with colored header bar -->\n                  @if (item.type === 'group') {\n                    @let g = $any(item);\n                    @let cv = groupColorVars(g.properties?.color);\n                    <div\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      [id]=\"item.id\"\n                      class=\"fb-group column-{{ item.layout?.columns || 12 }}\"\n                      [class.fb-item]=\"false\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [style.flex]=\"'0 0 calc(' + +(item.layout?.columns || 12) + '/12 * 100% - var(--gap-2))'\"\n                      [style.maxWidth]=\"'calc(' + +(item.layout?.columns || 12) + '/12 * 100% - var(--gap-2))'\"\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event)\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n                      </div>\n                      <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: item }\"></ng-container>\n                      </div>\n                      <!-- cdkDragHandle: ch\u1EC9 cho ph\u00E9p k\u00E9o group qua header \u2014 body free cho click v\u00E0o child. -->\n                      <div class=\"fb-group__header\" cdkDragHandle [style.background]=\"cv.bg\" [style.color]=\"cv.fg\">\n                        <span class=\"fb-group__icon\"\n                          ><span class=\"msi\">{{ g.properties?.icon || 'category' }}</span></span\n                        >\n                        <span class=\"fb-group__label\">{{ item.label }}</span>\n                        @if (hasConditional(item)) {\n                          <span class=\"fb-group__conditional-chip\">\n                            <span class=\"msi\" style=\"font-size: 12px\">bolt</span>\n                            {{ 'core.component.form-builder.conditional' | translate }}\n                          </span>\n                        }\n                        <span class=\"fb-group__count\">{{ g.components?.length || 0 }} fields</span>\n                      </div>\n                      <!-- Floating action toolbar -->\n                      <div class=\"fb-actions\">\n                        <!-- why: Detail = m\u1EDF canvas thi\u1EBFt k\u1EBF ri\u00EAng cho group (thay cho drag/drop trong group). -->\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [matTooltip]=\"'core.component.form-builder.edit-group' | translate\"\n                          (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                          <span class=\"msi\">open_in_full</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                          (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.hidden\"\n                          [class.on]=\"item.properties?.hidden\"\n                          [matTooltip]=\"\n                            item.properties?.hidden\n                              ? ('core.component.form-builder.show' | translate)\n                              : ('core.component.form-builder.hide' | translate)\n                          \"\n                          (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn danger\"\n                          [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                          (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <!-- Static preview: children render read-only (kh\u00F4ng drag/resize/select).\n                           S\u1EEDa n\u1ED9i dung group qua n\u00FAt Detail (enterGroupEdit). -->\n                      <div class=\"fb-group__body fb-group__body--static\" (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                        @if (!g.components?.length) {\n                          <div class=\"fb-group__empty\">\n                            <span class=\"msi\" style=\"font-size: 16px; margin-right: 6px\">open_in_full</span>\n                            {{ 'core.component.form-builder.group-empty-hint' | translate }}\n                          </div>\n                        }\n                        @for (child of g.components; track child.id) {\n                          <div\n                            class=\"fb-item is-child fb-item--static column-{{ child.layout?.columns || 12 }}\"\n                            [class.is-hidden]=\"child.properties?.hidden\">\n                            <ng-container *ngTemplateOutlet=\"controlTemplate; context: { $implicit: child }\"> </ng-container>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  } @else if (item.type === 'break') {\n                    <!-- Break: row separator c\u1ED1 \u0111\u1ECBnh. Render 12-col line, kh\u00F4ng c\u00F3 resize/edit attribute. -->\n                    <div\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      [id]=\"item.id\"\n                      class=\"fb-item is-break column-12\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event)\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n                      </div>\n                      <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: item }\"></ng-container>\n                      </div>\n                      <div class=\"fb-break-line\">\n                        <span class=\"msi\">horizontal_rule</span>\n                        <span class=\"fb-break-label\">{{ 'core.component.form-builder.break' | translate }}</span>\n                      </div>\n                      <div class=\"fb-actions\">\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.hidden\"\n                          [class.on]=\"item.properties?.hidden\"\n                          [matTooltip]=\"\n                            item.properties?.hidden\n                              ? ('core.component.form-builder.show' | translate)\n                              : ('core.component.form-builder.hide' | translate)\n                          \"\n                          (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn danger\"\n                          [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                          (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular form component -->\n                    <div\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      [id]=\"item.id\"\n                      class=\"fb-item column-{{ item.layout?.columns || 12 }}\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [class.is-readonly]=\"item.properties?.viewed\"\n                      [class.is-resizing]=\"resizeState()?.itemId === item.id\"\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event)\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n                      </div>\n                      <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: item }\"></ng-container>\n                      </div>\n\n                      <!-- Status chip (mutually exclusive priority: hidden > readonly > conditional) -->\n                      @if (item.properties?.hidden) {\n                        <span class=\"fb-status-chip hidden\">\n                          <span class=\"msi\">visibility_off</span>\n                          {{ 'core.component.form-builder.hidden' | translate }}\n                        </span>\n                      } @else if (item.properties?.viewed) {\n                        <span class=\"fb-status-chip readonly\">\n                          <span class=\"msi\">edit_off</span>\n                          {{ 'core.component.form-builder.read-only' | translate }}\n                        </span>\n                      } @else if (hasConditional(item)) {\n                        <span class=\"fb-status-chip conditional\">\n                          <span class=\"msi\">bolt</span>\n                          {{ 'core.component.form-builder.conditional' | translate }}\n                        </span>\n                      }\n\n                      <!-- Floating action toolbar pill -->\n                      <div class=\"fb-actions\">\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.viewed\"\n                          [class.on]=\"item.properties?.viewed\"\n                          [matTooltip]=\"\n                            item.properties?.viewed\n                              ? ('core.component.form-builder.unset-readonly' | translate)\n                              : ('core.component.form-builder.set-readonly' | translate)\n                          \"\n                          (click)=\"onChangeViewed(item); $event.stopPropagation()\">\n                          <span class=\"msi\">edit_off</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                          (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.hidden\"\n                          [class.on]=\"item.properties?.hidden\"\n                          [matTooltip]=\"\n                            item.properties?.hidden\n                              ? ('core.component.form-builder.show' | translate)\n                              : ('core.component.form-builder.hide' | translate)\n                          \"\n                          (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn danger\"\n                          [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                          (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <ng-container *ngTemplateOutlet=\"controlTemplate; context: { $implicit: item }\"> </ng-container>\n\n                      @if (resizeState()?.itemId === item.id) {\n                        <span class=\"fb-resize-chip\">{{ resizeState()?.columns }}/12</span>\n                      }\n\n                      <!-- Resize handle (pill) \u2014 cdkDragLockAxis=\"x\" \u0111\u1EC3 ch\u1EC9 k\u00E9o ngang.\n                           Wrapping cdkDropList c\u00F3 enterPredicate=false, kh\u00F4ng nh\u1EADn drop. -->\n                      <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n                        <div\n                          cdkDrag\n                          cdkDragLockAxis=\"x\"\n                          class=\"fb-resize\"\n                          (cdkDragStarted)=\"startResizeControl(item, row)\"\n                          (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\n                          (cdkDragEnded)=\"endResizeControl($event)\"\n                          [matTooltip]=\"'core.component.form-builder.flex' | translate\"\n                          aria-label=\"resize\"></div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n\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 -->\n  <aside class=\"fb-attrs\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.attribute' | translate }}</div>\n    </div>\n\n    @let _selectedComponent = selectedComponent();\n    @if (_selectedComponent) {\n      <!-- Selection header: type icon + name + key/type -->\n      <div class=\"fb-attrs__selection\">\n        <span class=\"fb-attrs__sel-icon\"\n          ><span class=\"msi\">{{ symbolFor(_selectedComponent) }}</span></span\n        >\n        <div class=\"fb-attrs__sel-meta\">\n          <div class=\"fb-attrs__sel-name\">{{ $any(_selectedComponent).label || ('core.component.form-builder.untitled' | translate) }}</div>\n          <div class=\"fb-attrs__sel-key\">\n            @if ($any(_selectedComponent).key) {\n              {{ $any(_selectedComponent).key }} \u00B7 {{ typeLabelFor(_selectedComponent) }}\n            } @else {\n              {{ typeLabelFor(_selectedComponent) }}\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"fb-attrs__body\" aria-hidden=\"true\">\n        @if (_selectedComponent.type === 'textfield') {\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textfield-attribute>\n        } @else if (_selectedComponent.type === 'textarea') {\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textarea-attribute>\n        } @else if (_selectedComponent.type === 'chip-string') {\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></chip-string-attribute>\n        } @else if (_selectedComponent.type === 'chip-calendar') {\n          <chip-calendar-attribute\n            [components]=\"components\"\n            [variables]=\"variables\"\n            [component]=\"_selectedComponent\"></chip-calendar-attribute>\n        } @else if (_selectedComponent.type === 'number') {\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></number-attribute>\n        } @else if (_selectedComponent.type === 'datetime') {\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></datetime-attribute>\n        } @else if (_selectedComponent.type === 'select') {\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></select-attribute>\n        } @else if (_selectedComponent.type === 'radio') {\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></radio-attribute>\n        } @else if (_selectedComponent.type === 'checkbox') {\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></checkbox-attribute>\n        } @else if (_selectedComponent.type === 'html') {\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></html-attribute>\n        } @else if (_selectedComponent.type === 'upload') {\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></upload-attribute>\n        } @else if (_selectedComponent.type === 'table') {\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></table-attribute>\n        } @else if (_selectedComponent.type === 'group') {\n          <group-attribute [group]=\"$any(_selectedComponent)\"></group-attribute>\n        }\n      </div>\n    } @else {\n      <div class=\"fb-attrs__placeholder\">\n        <span class=\"msi\">ads_click</span>\n        <div class=\"title\">{{ 'core.component.form-builder.no-selection-title' | translate }}</div>\n        <div class=\"hint\">{{ 'core.component.form-builder.no-selection-hint' | translate }}</div>\n      </div>\n    }\n  </aside>\n</div>\n\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 -->\n<ng-template #controlTemplate let-item>\n  @if (item.type === 'textfield') {\n    <textfield-control [component]=\"item\"></textfield-control>\n  } @else if (item.type === 'textarea') {\n    <textarea-control [component]=\"item\"></textarea-control>\n  } @else if (item.type === 'chip-string') {\n    <chip-string-control [component]=\"item\"></chip-string-control>\n  } @else if (item.type === 'chip-calendar') {\n    <chip-calendar-control [component]=\"item\"></chip-calendar-control>\n  } @else if (item.type === 'number') {\n    <number-control [component]=\"item\"></number-control>\n  } @else if (item.type === 'datetime') {\n    <datetime-control [component]=\"item\"></datetime-control>\n  } @else if (item.type === 'select') {\n    <select-control [component]=\"item\"></select-control>\n  } @else if (item.type === 'radio') {\n    <radio-control [component]=\"item\"></radio-control>\n  } @else if (item.type === 'checkbox') {\n    <checkbox-control [component]=\"item\"></checkbox-control>\n  } @else if (item.type === 'html') {\n    <html-control [component]=\"item\"></html-control>\n  } @else if (item.type === 'upload') {\n    <upload-control [component]=\"item\"></upload-control>\n  } @else if (item.type === 'table') {\n    <table-control [component]=\"item\"></table-control>\n  }\n</ng-template>\n\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 -->\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\n  <ng-container sdFooter>\n    <sd-button\n      type=\"fill\"\n      [title]=\"'core.component.form-builder.save' | translate\"\n      (click)=\"updateJSON()\"\n      prefixIcon=\"save\"\n      color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<sd-modal [title]=\"'core.component.form-builder.config-variable' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\n  @for (variable of clonedVariables; track variable.id) {\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"variable.key\" required></sd-input>\n      <sd-input\n        [form]=\"form\"\n        [label]=\"'core.component.form-builder.display-label' | translate\"\n        [(model)]=\"variable.label\"\n        required></sd-input>\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\n    </div>\n  }\n  <a href=\"javascript:;\" (click)=\"addVariables()\">{{ 'core.component.form-builder.add-variable' | translate }}</a>\n  <ng-container sdFooter>\n    <sd-button\n      type=\"fill\"\n      [title]=\"'core.component.form-builder.save' | translate\"\n      (click)=\"updateVariables()\"\n      prefixIcon=\"save\"\n      color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\n", styles: ["@charset \"UTF-8\";: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 Icons Outlined;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}:host ::ng-deep .msi.filled{font-family:Material Icons}: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:132px;height:44px;box-sizing:border-box;border-radius:14px;background:var(--md-sys-color-surface-container-lowest, #ffffff);display:inline-flex;align-items:center;gap:10px;padding:8px 12px;box-shadow:0 14px 32px #0000003d,0 5px 14px #00000029;border:1.5px solid color-mix(in srgb,var(--md-sys-color-primary) 46%,var(--md-sys-color-outline-variant));cursor:grabbing;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1;overflow:hidden;z-index:10000}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__glyph,:host ::ng-deep .fb-drag-preview .fb-drag-preview__glyph{width:28px;height:28px;border-radius:50%;background:var(--md-sys-color-primary);flex-shrink:0;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--md-sys-color-on-primary) 18%,transparent)}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__body,:host ::ng-deep .fb-drag-preview .fb-drag-preview__body{flex:1;min-width:0;display:grid;gap:7px}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line,:host ::ng-deep .fb-drag-preview .fb-drag-preview__line{height:7px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent)}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line.is-strong,:host ::ng-deep .fb-drag-preview .fb-drag-preview__line.is-strong{width:74%;background:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant))}:host ::ng-deep .cdk-drag-placeholder.fb-drop-placeholder,:host ::ng-deep .fb-drop-placeholder{box-sizing:border-box;min-height:46px;border:1.5px dashed color-mix(in srgb,var(--md-sys-color-primary) 76%,var(--md-sys-color-outline-variant));border-radius:var(--r-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),transparent 62%),color-mix(in srgb,var(--md-sys-color-primary) 4%,var(--md-sys-color-surface-container-lowest));color:var(--md-sys-color-primary);display:flex;align-items:center;gap:var(--gap-2);padding:8px 10px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1!important;transform:none!important;animation:none!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),0 2px 8px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent)}:host ::ng-deep .fb-drop-placeholder__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:0 0 28px}:host ::ng-deep .fb-drop-placeholder__icon .msi{font-size:17px}:host ::ng-deep .fb-drop-placeholder__body{min-width:0;display:flex;flex-direction:column;gap:2px}:host ::ng-deep .fb-drop-placeholder__title{color:var(--md-sys-color-on-surface);font-size:12px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .fb-drop-placeholder__meta{color:var(--md-sys-color-primary);font-size:10px;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:0}:host ::ng-deep .fb-palette__list>.fb-drop-placeholder{display:none!important}:host ::ng-deep .fb-row__items>.fb-drop-placeholder,:host ::ng-deep .fb-group__body>.fb-drop-placeholder{flex:1 1 160px;min-width:min(180px,100%);max-width:100%;align-self:stretch;margin:0 2px}:host ::ng-deep [cdkDropListOrientation=vertical]>.fb-drop-placeholder{width:auto;min-height:50px;margin:6px 14px;align-self:stretch}:host ::ng-deep .fb-drop-placeholder--row{min-height:56px}: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) 7%,transparent)!important;outline:1px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,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:72px!important;background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent)!important;outline:1px dashed color-mix(in srgb,var(--md-sys-color-primary) 48%,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) 9%,transparent)!important;outline:1.5px solid var(--md-sys-color-primary)!important}:host ::ng-deep .fb-shell--resizing .fb-row.is-resizing-row{outline-color:color-mix(in srgb,var(--md-sys-color-primary) 42%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent)}:host ::ng-deep .fb-shell--resizing .fb-row.is-resizing-row .fb-row__items:before{content:\"\";position:absolute;inset:-3px 0;border-radius:var(--r-sm);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333% - 1px),color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent) calc(8.333% - 1px),color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent) 8.333%),color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent);pointer-events:none;z-index:0}:host ::ng-deep .fb-shell--resizing .fb-row.is-resizing-row .fb-row__items>*{position:relative;z-index:1}:host ::ng-deep .fb-shell--resizing .fb-item.is-resizing{border-color:var(--md-sys-color-primary)!important;background:color-mix(in srgb,var(--md-sys-color-primary) 6%,var(--md-sys-color-surface-container-lowest));box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent);cursor:col-resize;z-index:2}:host ::ng-deep .fb-shell--resizing .fb-item.is-resizing .fb-resize{opacity:1!important;pointer-events:auto!important;background:var(--md-sys-color-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}: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}::ng-deep .cdk-drag-preview.fb-drag-preview{width:132px;height:44px;box-sizing:border-box;border-radius:14px;background:#fff;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;box-shadow:0 14px 32px #0000003d,0 5px 14px #00000029;border:1.5px solid color-mix(in srgb,var(--sd-primary, #2a66f4) 46%,#d6d2da);cursor:grabbing;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1;overflow:hidden;z-index:10000}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__glyph{width:28px;height:28px;border-radius:50%;background:var(--sd-primary, #2a66f4);flex-shrink:0;box-shadow:inset 0 0 0 5px #ffffff2e}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__body{flex:1;min-width:0;display:grid;gap:7px}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line{height:7px;border-radius:999px;background:#d6d2dab8}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line.is-strong{width:74%;background:color-mix(in srgb,var(--sd-primary, #2a66f4) 26%,#d6d2da)}.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:32px;padding:2px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--r-pill);background:var(--md-sys-color-surface-container-lowest);flex-shrink:0;gap:2px;box-shadow:var(--elev-1)}.fb-mode-toggle button{border:0;background:transparent;border-radius:var(--r-pill);padding:0 12px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:background .12s ease,color .12s ease,box-shadow .12s ease}.fb-mode-toggle button .msi{font-size:16px}.fb-mode-toggle button:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 7%,transparent);color:var(--md-sys-color-on-surface)}.fb-mode-toggle button:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 48%,transparent);outline-offset:1px}.fb-mode-toggle button.is-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent)}.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__items{position:relative;min-width:0}.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);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),inset 3px 0 0 var(--md-sys-color-primary)}.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}table-control{display:block;width:100%;max-width:100%;min-width:0}.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-chip{position:absolute;right:14px;bottom:-18px;z-index:5;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--elev-2);font-size:11px;font-weight:700;letter-spacing:0;pointer-events:none}.fb-resize{position:absolute;top:10px;bottom:10px;right:-6px;width:8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,transparent);background:var(--md-sys-color-surface-container-lowest);display:flex;align-items:center;justify-content:center;cursor:col-resize;opacity:0;transition:opacity .12s ease,background .12s ease,box-shadow .12s ease;z-index:3}.fb-resize:before{content:\"\";width:2px;height:20px;background:var(--md-sys-color-primary);border-radius:999px}.fb-resize:hover{background:var(--md-sys-color-primary-container);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.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);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),inset 3px 0 0 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}.fb-group__body--static{display:flex;flex-wrap:wrap;gap:var(--gap-2, 8px);cursor:pointer;min-height:48px}.fb-group__body--static .fb-item--static{pointer-events:none;position:relative}.fb-group__body--static .fb-item--static .fb-resize,.fb-group__body--static .fb-item--static .fb-actions,.fb-group__body--static .fb-item--static .fb-status-chip{display:none!important}.fb-canvas__header--group .fb-groupedit__crumb{display:flex;align-items:center;gap:6px;font-weight:600}.fb-canvas__header--group .fb-groupedit__icon .msi{font-size:18px;color:var(--md-sys-color-primary)}.fb-canvas__header--group .fb-groupedit__hint{font-weight:400;font-size:12px;color:var(--md-sys-color-on-surface-variant, #6b6b6b);padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}\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: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { 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: 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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" }] });
 }
@@ -6423,12 +6709,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdTextarea,
                         SdButton,
                         SdFormRender,
-                        ConfigureValidationComponent, TranslatePipe
-                    ], template: "<!-- cdkDropListGroup: auto-connect t\u1EA5t c\u1EA3 cdkDropList trong palette, canvas rows, group bodies.\n     [class.fb-shell--dragging]: JS-driven flag \u0111\u1EC3 \u1EA9n hover/actions/resize to\u00E0n di\u1EC7n\n     trong l\u00FAc drag (CSS :has() kh\u00F4ng b\u1EAFt 100% tr\u01B0\u1EDDng h\u1EE3p v\u1EDBi CDK preview clone). -->\n<div class=\"fb-shell\" cdkDropListGroup [class.fb-shell--dragging]=\"isAnyDragging()\">\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 -->\n  <aside class=\"fb-palette\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.components' | translate }}</div>\n    </div>\n\n    <!-- Search pill -->\n    <div class=\"fb-palette__search\">\n      <span class=\"msi\" aria-hidden=\"true\">search</span>\n      <input\n        type=\"text\"\n        [placeholder]=\"'core.component.form-builder.search-components' | translate\"\n        [value]=\"paletteSearch()\"\n        (input)=\"paletteSearch.set($any($event.target).value)\" />\n      <span class=\"kbd\">\u2318K</span>\n    </div>\n\n    <div class=\"fb-palette__scroll\">\n      @for (group of paletteGroups(); track group.key) {\n        <div class=\"fb-palette__group-label\">{{ group.label }}</div>\n        <div\n          class=\"fb-palette__list\"\n          cdkDropList\n          [cdkDropListData]=\"group.items\"\n          [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n          @for (formBuilderComponent of group.items; track formBuilderComponent.type) {\n            <div\n              cdkDrag\n              class=\"fb-palette-item\"\n              [matTooltip]=\"formBuilderComponent.name\"\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>\n              <span class=\"fb-palette-item__name\">{{ formBuilderComponent.name }}</span>\n              <span class=\"fb-palette-item__drag\"><span class=\"msi\">drag_indicator</span></span>\n              <!-- Generic drag preview: ch\u1EC9 icon (puck), label \u1EA9n -->\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </aside>\n\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 -->\n  <section class=\"fb-canvas\">\n    @let _editingGroup = editingGroup();\n    @if (_editingGroup) {\n      <!-- \u2500\u2500 Drill-in header: \u0111ang thi\u1EBFt k\u1EBF children c\u1EE7a 1 group \u2500\u2500 -->\n      <header class=\"fb-canvas__header fb-canvas__header--group\">\n        <div class=\"fb-canvas__title fb-groupedit__crumb\">\n          <button type=\"button\" class=\"fb-icon-btn\" [matTooltip]=\"'core.component.form-builder.back-to-design' | translate\" (click)=\"cancelGroupEdit()\">\n            <span class=\"msi\">chevron_left</span>\n          </button>\n          <span class=\"fb-groupedit__icon\"><span class=\"msi\">{{ _editingGroup.properties?.icon || 'category' }}</span></span>\n          <span>{{ _editingGroup.label || ('core.component.form-builder.edit-group' | translate) }}</span>\n          <span class=\"fb-groupedit__hint\">{{ 'core.component.form-builder.edit-group' | translate }}</span>\n        </div>\n        <div class=\"fb-canvas__actions\">\n          <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"cancelGroupEdit()\"></sd-button>\n          <sd-button type=\"fill\" color=\"primary\" prefixIcon=\"check\" [title]=\"'core.component.form-builder.confirm' | translate\" (click)=\"confirmGroupEdit()\"></sd-button>\n        </div>\n      </header>\n    } @else {\n    <header class=\"fb-canvas__header\">\n      <div class=\"fb-canvas__title\">\n        <span>{{ 'core.component.form-builder.layout' | translate }}</span>\n      </div>\n      <div class=\"fb-canvas__actions\">\n        <!-- Toolbar cluster: view JSON / variables / validation -->\n        <button\n          type=\"button\"\n          class=\"fb-icon-btn\"\n          [matTooltip]=\"'core.component.form-builder.view-json' | translate\"\n          (click)=\"viewJSON()\">\n          <span class=\"msi\">data_object</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"fb-icon-btn\"\n          [matTooltip]=\"'core.component.form-builder.config-variable' | translate\"\n          (click)=\"configureVariables()\">\n          <span class=\"msi\">data_array</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"fb-icon-btn\"\n          [matTooltip]=\"'core.component.form-builder.config-validation-warning-error' | translate\"\n          (click)=\"openConfigureValidation()\">\n          <span class=\"msi\">rule</span>\n        </button>\n\n        <span class=\"fb-divider\"></span>\n\n        <!-- M3 segmented Design/Preview toggle -->\n        <div class=\"fb-mode-toggle\" role=\"tablist\">\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [class.is-active]=\"!isPreview()\"\n            (click)=\"setMode(false)\">\n            <span class=\"msi\">edit</span>\n            <span>{{ 'core.component.form-builder.design' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [class.is-active]=\"isPreview()\"\n            (click)=\"setMode(true)\">\n            <span class=\"msi\">visibility</span>\n            <span>{{ 'core.component.form-builder.preview' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </header>\n    }\n\n    <div\n      class=\"fb-canvas__body\"\n      [class.is-preview]=\"isPreview()\"\n      id=\"frmComponent\">\n      @if (isPreview()) {\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 -->\n        <div class=\"fb-preview-card\">\n          <div class=\"fb-preview-card__chip\">\n            <span class=\"msi\">visibility</span>\n            {{ 'core.component.form-builder.preview-runtime' | translate }}\n          </div>\n          <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\n          <div class=\"fb-preview-card__footer\">\n            <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"setMode(false)\"></sd-button>\n            <sd-button type=\"fill\" color=\"primary\" [title]=\"'core.component.form-builder.submit' | translate\" (click)=\"onValidate()\"></sd-button>\n          </div>\n        </div>\n      } @else {\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 -->\n        @if (!dragDropRows.length) {\n          <div class=\"fb-empty\">\n            <div class=\"fb-empty__art\"><span class=\"msi\">dashboard_customize</span></div>\n            <div class=\"fb-empty__title\">{{ 'core.component.form-builder.empty-title' | translate }}</div>\n            <div class=\"fb-empty__hint\">\n              {{ 'core.component.form-builder.empty-hint' | translate }}\n              <span class=\"fb-empty__kbd\"><span class=\"msi\">keyboard</span>\u2318 K</span>\n            </div>\n          </div>\n        }\n\n        <div\n          cdkDropList\n          cdkDropListOrientation=\"vertical\"\n          [cdkDropListData]=\"dragDropRows\"\n          (cdkDropListDropped)=\"drop($event)\"\n          (click)=\"clickFormContentEmpty()\"\n          aria-hidden=\"true\">\n          @for (row of dragDropRows; track row.rowIndex) {\n            <div\n              cdkDrag\n              class=\"fb-row\"\n              (mouseover)=\"onMouseover($event, row)\"\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\">\n              <div class=\"fb-row__drag\" [matTooltip]=\"'core.component.form-builder.drag-vertically' | translate\" cdkDragHandle>\n                <span class=\"msi\">drag_indicator</span>\n              </div>\n              <!-- Generic puck preview -->\n              <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n              <!-- Quick-add break button \u2014 show on row hover, insert break after this row -->\n              <button\n                type=\"button\"\n                class=\"fb-row-break-btn\"\n                [matTooltip]=\"'core.component.form-builder.break' | translate\"\n                matTooltipPosition=\"right\"\n                (click)=\"insertBreakAfter(row); $event.stopPropagation()\">\n                <span class=\"msi\">horizontal_rule</span>\n              </button>\n\n              <div\n                class=\"fb-row__items\"\n                style=\"display: flex; flex: 1; gap: var(--gap-2);\"\n                cdkDropList\n                cdkDropListOrientation=\"horizontal\"\n                [cdkDropListData]=\"row.items\"\n                (cdkDropListDropped)=\"drop($event)\">\n\n                @for (item of row.items; track item.id; let i = $index) {\n                  <!-- Group component renders as outlined card with colored header bar -->\n                  @if (item.type === 'group') {\n                    @let g = $any(item);\n                    @let cv = groupColorVars(g.properties?.color);\n                    <div\n                      cdkDrag\n                      [id]=\"item.id\"\n                      class=\"fb-group column-{{ item.layout?.columns || 12 }}\"\n                      [class.fb-item]=\"false\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [style.flex]=\"'0 0 calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\n                      [style.maxWidth]=\"'calc(' + (+(item.layout?.columns || 12)) + '/12 * 100% - var(--gap-2))'\"\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 -->\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. -->\n                      <div class=\"fb-group__header\" cdkDragHandle [style.background]=\"cv.bg\" [style.color]=\"cv.fg\">\n                        <span class=\"fb-group__icon\"><span class=\"msi\">{{ g.properties?.icon || 'category' }}</span></span>\n                        <span class=\"fb-group__label\">{{ item.label }}</span>\n                        @if (hasConditional(item)) {\n                          <span class=\"fb-group__conditional-chip\">\n                            <span class=\"msi\" style=\"font-size: 12px;\">bolt</span>\n                            {{ 'core.component.form-builder.conditional' | translate }}\n                          </span>\n                        }\n                        <span class=\"fb-group__count\">{{ g.components?.length || 0 }} fields</span>\n                      </div>\n                      <!-- Floating action toolbar -->\n                      <div class=\"fb-actions\">\n                        <!-- why: Detail = m\u1EDF canvas thi\u1EBFt k\u1EBF ri\u00EAng cho group (thay cho drag/drop trong group). -->\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [matTooltip]=\"'core.component.form-builder.edit-group' | translate\"\n                                (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                          <span class=\"msi\">open_in_full</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.hidden\"\n                                [class.on]=\"item.properties?.hidden\"\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <!-- Static preview: children render read-only (kh\u00F4ng drag/resize/select).\n                           S\u1EEDa n\u1ED9i dung group qua n\u00FAt Detail (enterGroupEdit). -->\n                      <div class=\"fb-group__body fb-group__body--static\" (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                        @if (!g.components?.length) {\n                          <div class=\"fb-group__empty\">\n                            <span class=\"msi\" style=\"font-size: 16px; margin-right: 6px;\">open_in_full</span>\n                            {{ 'core.component.form-builder.group-empty-hint' | translate }}\n                          </div>\n                        }\n                        @for (child of g.components; track child.id) {\n                          <div\n                            class=\"fb-item is-child fb-item--static column-{{ child.layout?.columns || 12 }}\"\n                            [class.is-hidden]=\"child.properties?.hidden\">\n                            <ng-container\n                              *ngTemplateOutlet=\"controlTemplate; context: { $implicit: child }\">\n                            </ng-container>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  } @else if (item.type === 'break') {\n                    <!-- Break: row separator c\u1ED1 \u0111\u1ECBnh. Render 12-col line, kh\u00F4ng c\u00F3 resize/edit attribute. -->\n                    <div\n                      cdkDrag\n                      [id]=\"item.id\"\n                      class=\"fb-item is-break column-12\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\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 -->\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n                      <div class=\"fb-break-line\">\n                        <span class=\"msi\">horizontal_rule</span>\n                        <span class=\"fb-break-label\">{{ 'core.component.form-builder.break' | translate }}</span>\n                      </div>\n                      <div class=\"fb-actions\">\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.hidden\"\n                                [class.on]=\"item.properties?.hidden\"\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular form component -->\n                    <div\n                      cdkDrag\n                      [id]=\"item.id\"\n                      class=\"fb-item column-{{ item.layout?.columns || 12 }}\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [class.is-readonly]=\"item.properties?.viewed\"\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 -->\n                      <div *cdkDragPreview class=\"fb-drag-preview\"></div>\n\n                      <!-- Status chip (mutually exclusive priority: hidden > readonly > conditional) -->\n                      @if (item.properties?.hidden) {\n                        <span class=\"fb-status-chip hidden\">\n                          <span class=\"msi\">visibility_off</span>\n                          {{ 'core.component.form-builder.hidden' | translate }}\n                        </span>\n                      } @else if (item.properties?.viewed) {\n                        <span class=\"fb-status-chip readonly\">\n                          <span class=\"msi\">edit_off</span>\n                          {{ 'core.component.form-builder.read-only' | translate }}\n                        </span>\n                      } @else if (hasConditional(item)) {\n                        <span class=\"fb-status-chip conditional\">\n                          <span class=\"msi\">bolt</span>\n                          {{ 'core.component.form-builder.conditional' | translate }}\n                        </span>\n                      }\n\n                      <!-- Floating action toolbar pill -->\n                      <div class=\"fb-actions\">\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.viewed\"\n                                [class.on]=\"item.properties?.viewed\"\n                                [matTooltip]=\"item.properties?.viewed ? ('core.component.form-builder.unset-readonly' | translate) : ('core.component.form-builder.set-readonly' | translate)\"\n                                (click)=\"onChangeViewed(item); $event.stopPropagation()\">\n                          <span class=\"msi\">edit_off</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                                (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn\"\n                                [class.warning]=\"item.properties?.hidden\"\n                                [class.on]=\"item.properties?.hidden\"\n                                [matTooltip]=\"item.properties?.hidden ? ('core.component.form-builder.show' | translate) : ('core.component.form-builder.hide' | translate)\"\n                                (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button type=\"button\" class=\"fb-icon-btn danger\"\n                                [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                                (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <ng-container\n                        *ngTemplateOutlet=\"controlTemplate; context: { $implicit: item }\">\n                      </ng-container>\n\n                      <!-- Resize handle (pill) \u2014 cdkDragLockAxis=\"x\" \u0111\u1EC3 ch\u1EC9 k\u00E9o ngang.\n                           Wrapping cdkDropList c\u00F3 enterPredicate=false, kh\u00F4ng nh\u1EADn drop. -->\n                      <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n                        <div\n                          cdkDrag\n                          cdkDragLockAxis=\"x\"\n                          class=\"fb-resize\"\n                          (cdkDragStarted)=\"onAnyDragStarted()\"\n                          (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\n                          (cdkDragEnded)=\"dragEndChangeSizeControl($event); onAnyDragEnded()\"\n                          [matTooltip]=\"'core.component.form-builder.flex' | translate\"\n                          aria-label=\"resize\"></div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n\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 -->\n  <aside class=\"fb-attrs\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.attribute' | translate }}</div>\n    </div>\n\n    @let _selectedComponent = selectedComponent();\n    @if (_selectedComponent) {\n      <!-- Selection header: type icon + name + key/type -->\n      <div class=\"fb-attrs__selection\">\n        <span class=\"fb-attrs__sel-icon\"><span class=\"msi\">{{ symbolFor(_selectedComponent) }}</span></span>\n        <div class=\"fb-attrs__sel-meta\">\n          <div class=\"fb-attrs__sel-name\">{{ $any(_selectedComponent).label || ('core.component.form-builder.untitled' | translate) }}</div>\n          <div class=\"fb-attrs__sel-key\">\n            @if ($any(_selectedComponent).key) {\n              {{ $any(_selectedComponent).key }} \u00B7 {{ typeLabelFor(_selectedComponent) }}\n            } @else {\n              {{ typeLabelFor(_selectedComponent) }}\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"fb-attrs__body\" aria-hidden=\"true\">\n        @if (_selectedComponent.type === 'textfield') {\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textfield-attribute>\n        } @else if (_selectedComponent.type === 'textarea') {\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textarea-attribute>\n        } @else if (_selectedComponent.type === 'chip-string') {\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></chip-string-attribute>\n        } @else if (_selectedComponent.type === 'chip-calendar') {\n          <chip-calendar-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></chip-calendar-attribute>\n        } @else if (_selectedComponent.type === 'number') {\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></number-attribute>\n        } @else if (_selectedComponent.type === 'datetime') {\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></datetime-attribute>\n        } @else if (_selectedComponent.type === 'select') {\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></select-attribute>\n        } @else if (_selectedComponent.type === 'radio') {\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></radio-attribute>\n        } @else if (_selectedComponent.type === 'checkbox') {\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></checkbox-attribute>\n        } @else if (_selectedComponent.type === 'html') {\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></html-attribute>\n        } @else if (_selectedComponent.type === 'upload') {\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></upload-attribute>\n        } @else if (_selectedComponent.type === 'table') {\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></table-attribute>\n        } @else if (_selectedComponent.type === 'group') {\n          <group-attribute [group]=\"$any(_selectedComponent)\"></group-attribute>\n        }\n      </div>\n    } @else {\n      <div class=\"fb-attrs__placeholder\">\n        <span class=\"msi\">ads_click</span>\n        <div class=\"title\">{{ 'core.component.form-builder.no-selection-title' | translate }}</div>\n        <div class=\"hint\">{{ 'core.component.form-builder.no-selection-hint' | translate }}</div>\n      </div>\n    }\n  </aside>\n</div>\n\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 -->\n<ng-template #controlTemplate let-item>\n  @if (item.type === 'textfield') {\n    <textfield-control [component]=\"item\"></textfield-control>\n  } @else if (item.type === 'textarea') {\n    <textarea-control [component]=\"item\"></textarea-control>\n  } @else if (item.type === 'chip-string') {\n    <chip-string-control [component]=\"item\"></chip-string-control>\n  } @else if (item.type === 'chip-calendar') {\n    <chip-calendar-control [component]=\"item\"></chip-calendar-control>\n  } @else if (item.type === 'number') {\n    <number-control [component]=\"item\"></number-control>\n  } @else if (item.type === 'datetime') {\n    <datetime-control [component]=\"item\"></datetime-control>\n  } @else if (item.type === 'select') {\n    <select-control [component]=\"item\"></select-control>\n  } @else if (item.type === 'radio') {\n    <radio-control [component]=\"item\"></radio-control>\n  } @else if (item.type === 'checkbox') {\n    <checkbox-control [component]=\"item\"></checkbox-control>\n  } @else if (item.type === 'html') {\n    <html-control [component]=\"item\"></html-control>\n  } @else if (item.type === 'upload') {\n    <upload-control [component]=\"item\"></upload-control>\n  } @else if (item.type === 'table') {\n    <table-control [component]=\"item\"></table-control>\n  }\n</ng-template>\n\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 -->\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\n  <ng-container sdFooter>\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<sd-modal [title]=\"'core.component.form-builder.config-variable' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\n  @for (variable of clonedVariables; track variable.id) {\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"variable.key\" required></sd-input>\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.display-label' | translate\" [(model)]=\"variable.label\" required></sd-input>\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\n    </div>\n  }\n  <a href=\"javascript:;\" (click)=\"addVariables()\">{{ 'core.component.form-builder.add-variable' | translate }}</a>\n  <ng-container sdFooter>\n    <sd-button type=\"fill\" [title]=\"'core.component.form-builder.save' | translate\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\n", styles: ["@charset \"UTF-8\";: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}table-control{display:block;width:100%;max-width:100%;min-width:0}.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}.fb-group__body--static{display:flex;flex-wrap:wrap;gap:var(--gap-2, 8px);cursor:pointer;min-height:48px}.fb-group__body--static .fb-item--static{pointer-events:none;position:relative}.fb-group__body--static .fb-item--static .fb-resize,.fb-group__body--static .fb-item--static .fb-actions,.fb-group__body--static .fb-item--static .fb-status-chip{display:none!important}.fb-canvas__header--group .fb-groupedit__crumb{display:flex;align-items:center;gap:6px;font-weight:600}.fb-canvas__header--group .fb-groupedit__icon .msi{font-size:18px;color:var(--md-sys-color-primary)}.fb-canvas__header--group .fb-groupedit__hint{font-weight:400;font-size:12px;color:var(--md-sys-color-on-surface-variant, #6b6b6b);padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}\n"] }]
+                        ConfigureValidationComponent,
+                        TranslatePipe,
+                    ], template: "<!-- cdkDropListGroup: auto-connect t\u1EA5t c\u1EA3 cdkDropList trong palette, canvas rows, group bodies.\n     [class.fb-shell--dragging]: JS-driven flag \u0111\u1EC3 \u1EA9n hover/actions/resize to\u00E0n di\u1EC7n\n     trong l\u00FAc drag (CSS :has() kh\u00F4ng b\u1EAFt 100% tr\u01B0\u1EDDng h\u1EE3p v\u1EDBi CDK preview clone). -->\n<div\n  class=\"fb-shell\"\n  cdkDropListGroup\n  [class.fb-shell--dragging]=\"isAnyDragging()\"\n  [class.fb-shell--palette-dragging]=\"dragSource() === 'palette'\"\n  [class.fb-shell--resizing]=\"isResizing()\">\n  <ng-template #dragPreviewTemplate>\n    <span class=\"fb-drag-preview__glyph\" aria-hidden=\"true\"></span>\n    <span class=\"fb-drag-preview__body\" aria-hidden=\"true\">\n      <span class=\"fb-drag-preview__line is-strong\"></span>\n      <span class=\"fb-drag-preview__line\"></span>\n    </span>\n  </ng-template>\n  <ng-template #dropPlaceholderTemplate let-item>\n    <span class=\"fb-drop-placeholder__icon\" aria-hidden=\"true\">\n      <span class=\"msi\">{{ placeholderSymbolFor(item) }}</span>\n    </span>\n    <span class=\"fb-drop-placeholder__body\" aria-hidden=\"true\">\n      <span class=\"fb-drop-placeholder__title\">{{ placeholderTitleFor(item) }}</span>\n      <span class=\"fb-drop-placeholder__meta\">{{ placeholderMetaFor(item) }}</span>\n    </span>\n  </ng-template>\n\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 -->\n  <aside class=\"fb-palette\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.components' | translate }}</div>\n    </div>\n\n    <!-- Search pill -->\n    <div class=\"fb-palette__search\">\n      <span class=\"msi\" aria-hidden=\"true\">search</span>\n      <input\n        type=\"text\"\n        [placeholder]=\"'core.component.form-builder.search-components' | translate\"\n        [value]=\"paletteSearch()\"\n        (input)=\"paletteSearch.set($any($event.target).value)\" />\n      <span class=\"kbd\">\u2318K</span>\n    </div>\n\n    <div class=\"fb-palette__scroll\">\n      @for (group of paletteGroups(); track group.key) {\n        <div class=\"fb-palette__group-label\">{{ group.label }}</div>\n        <div class=\"fb-palette__list\" cdkDropList [cdkDropListData]=\"group.items\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n          @for (formBuilderComponent of group.items; track formBuilderComponent.type) {\n            <div\n              cdkDrag\n              [cdkDragData]=\"formBuilderComponent\"\n              class=\"fb-palette-item\"\n              [matTooltip]=\"formBuilderComponent.name\"\n              matTooltipPosition=\"right\"\n              (click)=\"addComponent(formBuilderComponent)\"\n              (cdkDragStarted)=\"onPaletteDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              aria-hidden=\"true\">\n              <span class=\"fb-palette-item__icon\"\n                ><span class=\"msi\">{{ formBuilderComponent.symbol }}</span></span\n              >\n              <span class=\"fb-palette-item__name\">{{ formBuilderComponent.name }}</span>\n              <span class=\"fb-palette-item__drag\"><span class=\"msi\">drag_indicator</span></span>\n              <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n              </div>\n              <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: formBuilderComponent }\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </aside>\n\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 -->\n  <section class=\"fb-canvas\">\n    @let _editingGroup = editingGroup();\n    @if (_editingGroup) {\n      <!-- \u2500\u2500 Drill-in header: \u0111ang thi\u1EBFt k\u1EBF children c\u1EE7a 1 group \u2500\u2500 -->\n      <header class=\"fb-canvas__header fb-canvas__header--group\">\n        <div class=\"fb-canvas__title fb-groupedit__crumb\">\n          <button\n            type=\"button\"\n            class=\"fb-icon-btn\"\n            [matTooltip]=\"'core.component.form-builder.back-to-design' | translate\"\n            (click)=\"cancelGroupEdit()\">\n            <span class=\"msi\">chevron_left</span>\n          </button>\n          <span class=\"fb-groupedit__icon\"\n            ><span class=\"msi\">{{ _editingGroup.properties?.icon || 'category' }}</span></span\n          >\n          <span>{{ _editingGroup.label || ('core.component.form-builder.edit-group' | translate) }}</span>\n          <span class=\"fb-groupedit__hint\">{{ 'core.component.form-builder.edit-group' | translate }}</span>\n        </div>\n        <div class=\"fb-canvas__actions\">\n          <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"cancelGroupEdit()\"></sd-button>\n          <sd-button\n            type=\"fill\"\n            color=\"primary\"\n            prefixIcon=\"check\"\n            [title]=\"'core.component.form-builder.confirm' | translate\"\n            (click)=\"confirmGroupEdit()\"></sd-button>\n        </div>\n      </header>\n    } @else {\n      <header class=\"fb-canvas__header\">\n        <div class=\"fb-canvas__title\">\n          <span>{{ 'core.component.form-builder.layout' | translate }}</span>\n        </div>\n        <div class=\"fb-canvas__actions\">\n          <!-- Toolbar cluster: view JSON / variables / validation -->\n          <button type=\"button\" class=\"fb-icon-btn\" [matTooltip]=\"'core.component.form-builder.view-json' | translate\" (click)=\"viewJSON()\">\n            <span class=\"msi\">data_object</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"fb-icon-btn\"\n            [matTooltip]=\"'core.component.form-builder.config-variable' | translate\"\n            (click)=\"configureVariables()\">\n            <span class=\"msi\">data_array</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"fb-icon-btn\"\n            [matTooltip]=\"'core.component.form-builder.config-validation-warning-error' | translate\"\n            (click)=\"openConfigureValidation()\">\n            <span class=\"msi\">rule</span>\n          </button>\n\n          <span class=\"fb-divider\"></span>\n\n          <!-- M3 segmented Design/Preview toggle -->\n          <div class=\"fb-mode-toggle\" role=\"tablist\">\n            <button type=\"button\" role=\"tab\" [class.is-active]=\"!isPreview()\" [attr.aria-selected]=\"!isPreview()\" (click)=\"setMode(false)\">\n              <span class=\"msi\">edit</span>\n              <span>{{ 'core.component.form-builder.design' | translate }}</span>\n            </button>\n            <button type=\"button\" role=\"tab\" [class.is-active]=\"isPreview()\" [attr.aria-selected]=\"isPreview()\" (click)=\"setMode(true)\">\n              <span class=\"msi\">visibility</span>\n              <span>{{ 'core.component.form-builder.preview' | translate }}</span>\n            </button>\n          </div>\n        </div>\n      </header>\n    }\n\n    <div class=\"fb-canvas__body\" [class.is-preview]=\"isPreview()\" id=\"frmComponent\">\n      @if (isPreview()) {\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 -->\n        <div class=\"fb-preview-card\">\n          <div class=\"fb-preview-card__chip\">\n            <span class=\"msi\">visibility</span>\n            {{ 'core.component.form-builder.preview-runtime' | translate }}\n          </div>\n          <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\n          <div class=\"fb-preview-card__footer\">\n            <sd-button type=\"outline\" [title]=\"'core.component.form-builder.cancel' | translate\" (click)=\"setMode(false)\"></sd-button>\n            <sd-button\n              type=\"fill\"\n              color=\"primary\"\n              [title]=\"'core.component.form-builder.submit' | translate\"\n              (click)=\"onValidate()\"></sd-button>\n          </div>\n        </div>\n      } @else {\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 -->\n        @if (!dragDropRows.length) {\n          <div class=\"fb-empty\">\n            <div class=\"fb-empty__art\"><span class=\"msi\">dashboard_customize</span></div>\n            <div class=\"fb-empty__title\">{{ 'core.component.form-builder.empty-title' | translate }}</div>\n            <div class=\"fb-empty__hint\">\n              {{ 'core.component.form-builder.empty-hint' | translate }}\n              <span class=\"fb-empty__kbd\"><span class=\"msi\">keyboard</span>\u2318 K</span>\n            </div>\n          </div>\n        }\n\n        <div\n          cdkDropList\n          cdkDropListOrientation=\"vertical\"\n          [cdkDropListData]=\"dragDropRows\"\n          (cdkDropListDropped)=\"drop($event)\"\n          (click)=\"clickFormContentEmpty()\"\n          aria-hidden=\"true\">\n          @for (row of dragDropRows; track row.id) {\n            <div\n              cdkDrag\n              [cdkDragData]=\"row\"\n              class=\"fb-row\"\n              (mouseover)=\"onMouseover($event, row)\"\n              (focus)=\"onFocus($event)\"\n              (cdkDragStarted)=\"onRowDragStarted()\"\n              (cdkDragMoved)=\"onAnyDragMoved($event)\"\n              (cdkDragEnded)=\"onAnyDragEnded()\"\n              [class.is-drag-target]=\"targetItem === row\"\n              [class.is-row-full]=\"isRowFull(row)\"\n              [class.is-row-inline-locked]=\"isRowInlineDropLocked(row)\"\n              [class.is-resizing-row]=\"resizeState()?.rowId === row.id\"\n              [id]=\"row.id\"\n              aria-hidden=\"true\">\n              <div class=\"fb-row__drag\" [matTooltip]=\"'core.component.form-builder.drag-vertically' | translate\" cdkDragHandle>\n                <span class=\"msi\">drag_indicator</span>\n              </div>\n              <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n              </div>\n              <div *cdkDragPlaceholder class=\"fb-drop-placeholder fb-drop-placeholder--row\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: row }\"></ng-container>\n              </div>\n              <!-- Quick-add break button \u2014 show on row hover, insert break after this row -->\n              <button\n                type=\"button\"\n                class=\"fb-row-break-btn\"\n                [matTooltip]=\"'core.component.form-builder.break' | translate\"\n                matTooltipPosition=\"right\"\n                (click)=\"insertBreakAfter(row); $event.stopPropagation()\">\n                <span class=\"msi\">horizontal_rule</span>\n              </button>\n\n              <div\n                class=\"fb-row__items\"\n                style=\"display: flex; flex: 1; gap: var(--gap-2)\"\n                cdkDropList\n                cdkDropListOrientation=\"horizontal\"\n                [cdkDropListData]=\"row.items\"\n                [cdkDropListEnterPredicate]=\"canEnterRowDropList\"\n                (cdkDropListDropped)=\"drop($event)\">\n                @for (item of row.items; track item.id; let i = $index) {\n                  <!-- Group component renders as outlined card with colored header bar -->\n                  @if (item.type === 'group') {\n                    @let g = $any(item);\n                    @let cv = groupColorVars(g.properties?.color);\n                    <div\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      [id]=\"item.id\"\n                      class=\"fb-group column-{{ item.layout?.columns || 12 }}\"\n                      [class.fb-item]=\"false\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [style.flex]=\"'0 0 calc(' + +(item.layout?.columns || 12) + '/12 * 100% - var(--gap-2))'\"\n                      [style.maxWidth]=\"'calc(' + +(item.layout?.columns || 12) + '/12 * 100% - var(--gap-2))'\"\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event)\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n                      </div>\n                      <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: item }\"></ng-container>\n                      </div>\n                      <!-- cdkDragHandle: ch\u1EC9 cho ph\u00E9p k\u00E9o group qua header \u2014 body free cho click v\u00E0o child. -->\n                      <div class=\"fb-group__header\" cdkDragHandle [style.background]=\"cv.bg\" [style.color]=\"cv.fg\">\n                        <span class=\"fb-group__icon\"\n                          ><span class=\"msi\">{{ g.properties?.icon || 'category' }}</span></span\n                        >\n                        <span class=\"fb-group__label\">{{ item.label }}</span>\n                        @if (hasConditional(item)) {\n                          <span class=\"fb-group__conditional-chip\">\n                            <span class=\"msi\" style=\"font-size: 12px\">bolt</span>\n                            {{ 'core.component.form-builder.conditional' | translate }}\n                          </span>\n                        }\n                        <span class=\"fb-group__count\">{{ g.components?.length || 0 }} fields</span>\n                      </div>\n                      <!-- Floating action toolbar -->\n                      <div class=\"fb-actions\">\n                        <!-- why: Detail = m\u1EDF canvas thi\u1EBFt k\u1EBF ri\u00EAng cho group (thay cho drag/drop trong group). -->\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [matTooltip]=\"'core.component.form-builder.edit-group' | translate\"\n                          (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                          <span class=\"msi\">open_in_full</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                          (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.hidden\"\n                          [class.on]=\"item.properties?.hidden\"\n                          [matTooltip]=\"\n                            item.properties?.hidden\n                              ? ('core.component.form-builder.show' | translate)\n                              : ('core.component.form-builder.hide' | translate)\n                          \"\n                          (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn danger\"\n                          [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                          (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <!-- Static preview: children render read-only (kh\u00F4ng drag/resize/select).\n                           S\u1EEDa n\u1ED9i dung group qua n\u00FAt Detail (enterGroupEdit). -->\n                      <div class=\"fb-group__body fb-group__body--static\" (click)=\"enterGroupEdit(g); $event.stopPropagation()\">\n                        @if (!g.components?.length) {\n                          <div class=\"fb-group__empty\">\n                            <span class=\"msi\" style=\"font-size: 16px; margin-right: 6px\">open_in_full</span>\n                            {{ 'core.component.form-builder.group-empty-hint' | translate }}\n                          </div>\n                        }\n                        @for (child of g.components; track child.id) {\n                          <div\n                            class=\"fb-item is-child fb-item--static column-{{ child.layout?.columns || 12 }}\"\n                            [class.is-hidden]=\"child.properties?.hidden\">\n                            <ng-container *ngTemplateOutlet=\"controlTemplate; context: { $implicit: child }\"> </ng-container>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  } @else if (item.type === 'break') {\n                    <!-- Break: row separator c\u1ED1 \u0111\u1ECBnh. Render 12-col line, kh\u00F4ng c\u00F3 resize/edit attribute. -->\n                    <div\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      [id]=\"item.id\"\n                      class=\"fb-item is-break column-12\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event)\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n                      </div>\n                      <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: item }\"></ng-container>\n                      </div>\n                      <div class=\"fb-break-line\">\n                        <span class=\"msi\">horizontal_rule</span>\n                        <span class=\"fb-break-label\">{{ 'core.component.form-builder.break' | translate }}</span>\n                      </div>\n                      <div class=\"fb-actions\">\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.hidden\"\n                          [class.on]=\"item.properties?.hidden\"\n                          [matTooltip]=\"\n                            item.properties?.hidden\n                              ? ('core.component.form-builder.show' | translate)\n                              : ('core.component.form-builder.hide' | translate)\n                          \"\n                          (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn danger\"\n                          [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                          (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular form component -->\n                    <div\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      [id]=\"item.id\"\n                      class=\"fb-item column-{{ item.layout?.columns || 12 }}\"\n                      [class.is-selected]=\"item.id === selectedComponent()?.id\"\n                      [class.is-hidden]=\"item.properties?.hidden\"\n                      [class.is-readonly]=\"item.properties?.viewed\"\n                      [class.is-resizing]=\"resizeState()?.itemId === item.id\"\n                      (click)=\"selectComponent(item); $event.stopPropagation()\"\n                      (cdkDragStarted)=\"dragStartComponentItem($event)\"\n                      (cdkDragMoved)=\"onAnyDragMoved($event)\"\n                      (cdkDragEnded)=\"dragEndComponentItem($event); onAnyDragEnded()\"\n                      aria-hidden=\"true\">\n                      <div *cdkDragPreview class=\"fb-drag-preview\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dragPreviewTemplate\"></ng-container>\n                      </div>\n                      <div *cdkDragPlaceholder class=\"fb-drop-placeholder\" aria-hidden=\"true\">\n                        <ng-container *ngTemplateOutlet=\"dropPlaceholderTemplate; context: { $implicit: item }\"></ng-container>\n                      </div>\n\n                      <!-- Status chip (mutually exclusive priority: hidden > readonly > conditional) -->\n                      @if (item.properties?.hidden) {\n                        <span class=\"fb-status-chip hidden\">\n                          <span class=\"msi\">visibility_off</span>\n                          {{ 'core.component.form-builder.hidden' | translate }}\n                        </span>\n                      } @else if (item.properties?.viewed) {\n                        <span class=\"fb-status-chip readonly\">\n                          <span class=\"msi\">edit_off</span>\n                          {{ 'core.component.form-builder.read-only' | translate }}\n                        </span>\n                      } @else if (hasConditional(item)) {\n                        <span class=\"fb-status-chip conditional\">\n                          <span class=\"msi\">bolt</span>\n                          {{ 'core.component.form-builder.conditional' | translate }}\n                        </span>\n                      }\n\n                      <!-- Floating action toolbar pill -->\n                      <div class=\"fb-actions\">\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.viewed\"\n                          [class.on]=\"item.properties?.viewed\"\n                          [matTooltip]=\"\n                            item.properties?.viewed\n                              ? ('core.component.form-builder.unset-readonly' | translate)\n                              : ('core.component.form-builder.set-readonly' | translate)\n                          \"\n                          (click)=\"onChangeViewed(item); $event.stopPropagation()\">\n                          <span class=\"msi\">edit_off</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [matTooltip]=\"'core.component.form-builder.duplicate' | translate\"\n                          (click)=\"onDuplicate(item); $event.stopPropagation()\">\n                          <span class=\"msi\">content_copy</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn\"\n                          [class.warning]=\"item.properties?.hidden\"\n                          [class.on]=\"item.properties?.hidden\"\n                          [matTooltip]=\"\n                            item.properties?.hidden\n                              ? ('core.component.form-builder.show' | translate)\n                              : ('core.component.form-builder.hide' | translate)\n                          \"\n                          (click)=\"onChangeHidden(item); $event.stopPropagation()\">\n                          <span class=\"msi\">{{ item.properties?.hidden ? 'visibility_off' : 'visibility' }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"fb-icon-btn danger\"\n                          [matTooltip]=\"'core.component.form-builder.delete' | translate\"\n                          (click)=\"removeComponent(item.id); $event.stopPropagation()\">\n                          <span class=\"msi\">delete</span>\n                        </button>\n                      </div>\n\n                      <ng-container *ngTemplateOutlet=\"controlTemplate; context: { $implicit: item }\"> </ng-container>\n\n                      @if (resizeState()?.itemId === item.id) {\n                        <span class=\"fb-resize-chip\">{{ resizeState()?.columns }}/12</span>\n                      }\n\n                      <!-- Resize handle (pill) \u2014 cdkDragLockAxis=\"x\" \u0111\u1EC3 ch\u1EC9 k\u00E9o ngang.\n                           Wrapping cdkDropList c\u00F3 enterPredicate=false, kh\u00F4ng nh\u1EADn drop. -->\n                      <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\n                        <div\n                          cdkDrag\n                          cdkDragLockAxis=\"x\"\n                          class=\"fb-resize\"\n                          (cdkDragStarted)=\"startResizeControl(item, row)\"\n                          (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\n                          (cdkDragEnded)=\"endResizeControl($event)\"\n                          [matTooltip]=\"'core.component.form-builder.flex' | translate\"\n                          aria-label=\"resize\"></div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n\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 -->\n  <aside class=\"fb-attrs\">\n    <div class=\"fb-panel-header\">\n      <div class=\"fb-panel-header__title\">{{ 'core.component.form-builder.attribute' | translate }}</div>\n    </div>\n\n    @let _selectedComponent = selectedComponent();\n    @if (_selectedComponent) {\n      <!-- Selection header: type icon + name + key/type -->\n      <div class=\"fb-attrs__selection\">\n        <span class=\"fb-attrs__sel-icon\"\n          ><span class=\"msi\">{{ symbolFor(_selectedComponent) }}</span></span\n        >\n        <div class=\"fb-attrs__sel-meta\">\n          <div class=\"fb-attrs__sel-name\">{{ $any(_selectedComponent).label || ('core.component.form-builder.untitled' | translate) }}</div>\n          <div class=\"fb-attrs__sel-key\">\n            @if ($any(_selectedComponent).key) {\n              {{ $any(_selectedComponent).key }} \u00B7 {{ typeLabelFor(_selectedComponent) }}\n            } @else {\n              {{ typeLabelFor(_selectedComponent) }}\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"fb-attrs__body\" aria-hidden=\"true\">\n        @if (_selectedComponent.type === 'textfield') {\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textfield-attribute>\n        } @else if (_selectedComponent.type === 'textarea') {\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></textarea-attribute>\n        } @else if (_selectedComponent.type === 'chip-string') {\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></chip-string-attribute>\n        } @else if (_selectedComponent.type === 'chip-calendar') {\n          <chip-calendar-attribute\n            [components]=\"components\"\n            [variables]=\"variables\"\n            [component]=\"_selectedComponent\"></chip-calendar-attribute>\n        } @else if (_selectedComponent.type === 'number') {\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></number-attribute>\n        } @else if (_selectedComponent.type === 'datetime') {\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></datetime-attribute>\n        } @else if (_selectedComponent.type === 'select') {\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></select-attribute>\n        } @else if (_selectedComponent.type === 'radio') {\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></radio-attribute>\n        } @else if (_selectedComponent.type === 'checkbox') {\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></checkbox-attribute>\n        } @else if (_selectedComponent.type === 'html') {\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></html-attribute>\n        } @else if (_selectedComponent.type === 'upload') {\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></upload-attribute>\n        } @else if (_selectedComponent.type === 'table') {\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"_selectedComponent\"></table-attribute>\n        } @else if (_selectedComponent.type === 'group') {\n          <group-attribute [group]=\"$any(_selectedComponent)\"></group-attribute>\n        }\n      </div>\n    } @else {\n      <div class=\"fb-attrs__placeholder\">\n        <span class=\"msi\">ads_click</span>\n        <div class=\"title\">{{ 'core.component.form-builder.no-selection-title' | translate }}</div>\n        <div class=\"hint\">{{ 'core.component.form-builder.no-selection-hint' | translate }}</div>\n      </div>\n    }\n  </aside>\n</div>\n\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 -->\n<ng-template #controlTemplate let-item>\n  @if (item.type === 'textfield') {\n    <textfield-control [component]=\"item\"></textfield-control>\n  } @else if (item.type === 'textarea') {\n    <textarea-control [component]=\"item\"></textarea-control>\n  } @else if (item.type === 'chip-string') {\n    <chip-string-control [component]=\"item\"></chip-string-control>\n  } @else if (item.type === 'chip-calendar') {\n    <chip-calendar-control [component]=\"item\"></chip-calendar-control>\n  } @else if (item.type === 'number') {\n    <number-control [component]=\"item\"></number-control>\n  } @else if (item.type === 'datetime') {\n    <datetime-control [component]=\"item\"></datetime-control>\n  } @else if (item.type === 'select') {\n    <select-control [component]=\"item\"></select-control>\n  } @else if (item.type === 'radio') {\n    <radio-control [component]=\"item\"></radio-control>\n  } @else if (item.type === 'checkbox') {\n    <checkbox-control [component]=\"item\"></checkbox-control>\n  } @else if (item.type === 'html') {\n    <html-control [component]=\"item\"></html-control>\n  } @else if (item.type === 'upload') {\n    <upload-control [component]=\"item\"></upload-control>\n  } @else if (item.type === 'table') {\n    <table-control [component]=\"item\"></table-control>\n  }\n</ng-template>\n\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 -->\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\n  <ng-container sdFooter>\n    <sd-button\n      type=\"fill\"\n      [title]=\"'core.component.form-builder.save' | translate\"\n      (click)=\"updateJSON()\"\n      prefixIcon=\"save\"\n      color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<sd-modal [title]=\"'core.component.form-builder.config-variable' | translate\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\n  @for (variable of clonedVariables; track variable.id) {\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\n      <sd-input [form]=\"form\" [label]=\"'core.component.form-builder.field-key' | translate\" [(model)]=\"variable.key\" required></sd-input>\n      <sd-input\n        [form]=\"form\"\n        [label]=\"'core.component.form-builder.display-label' | translate\"\n        [(model)]=\"variable.label\"\n        required></sd-input>\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\n    </div>\n  }\n  <a href=\"javascript:;\" (click)=\"addVariables()\">{{ 'core.component.form-builder.add-variable' | translate }}</a>\n  <ng-container sdFooter>\n    <sd-button\n      type=\"fill\"\n      [title]=\"'core.component.form-builder.save' | translate\"\n      (click)=\"updateVariables()\"\n      prefixIcon=\"save\"\n      color=\"primary\"></sd-button>\n  </ng-container>\n</sd-modal>\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\n", styles: ["@charset \"UTF-8\";: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 Icons Outlined;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}:host ::ng-deep .msi.filled{font-family:Material Icons}: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:132px;height:44px;box-sizing:border-box;border-radius:14px;background:var(--md-sys-color-surface-container-lowest, #ffffff);display:inline-flex;align-items:center;gap:10px;padding:8px 12px;box-shadow:0 14px 32px #0000003d,0 5px 14px #00000029;border:1.5px solid color-mix(in srgb,var(--md-sys-color-primary) 46%,var(--md-sys-color-outline-variant));cursor:grabbing;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1;overflow:hidden;z-index:10000}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__glyph,:host ::ng-deep .fb-drag-preview .fb-drag-preview__glyph{width:28px;height:28px;border-radius:50%;background:var(--md-sys-color-primary);flex-shrink:0;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--md-sys-color-on-primary) 18%,transparent)}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__body,:host ::ng-deep .fb-drag-preview .fb-drag-preview__body{flex:1;min-width:0;display:grid;gap:7px}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line,:host ::ng-deep .fb-drag-preview .fb-drag-preview__line{height:7px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent)}:host ::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line.is-strong,:host ::ng-deep .fb-drag-preview .fb-drag-preview__line.is-strong{width:74%;background:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant))}:host ::ng-deep .cdk-drag-placeholder.fb-drop-placeholder,:host ::ng-deep .fb-drop-placeholder{box-sizing:border-box;min-height:46px;border:1.5px dashed color-mix(in srgb,var(--md-sys-color-primary) 76%,var(--md-sys-color-outline-variant));border-radius:var(--r-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),transparent 62%),color-mix(in srgb,var(--md-sys-color-primary) 4%,var(--md-sys-color-surface-container-lowest));color:var(--md-sys-color-primary);display:flex;align-items:center;gap:var(--gap-2);padding:8px 10px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1!important;transform:none!important;animation:none!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),0 2px 8px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent)}:host ::ng-deep .fb-drop-placeholder__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:0 0 28px}:host ::ng-deep .fb-drop-placeholder__icon .msi{font-size:17px}:host ::ng-deep .fb-drop-placeholder__body{min-width:0;display:flex;flex-direction:column;gap:2px}:host ::ng-deep .fb-drop-placeholder__title{color:var(--md-sys-color-on-surface);font-size:12px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .fb-drop-placeholder__meta{color:var(--md-sys-color-primary);font-size:10px;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:0}:host ::ng-deep .fb-palette__list>.fb-drop-placeholder{display:none!important}:host ::ng-deep .fb-row__items>.fb-drop-placeholder,:host ::ng-deep .fb-group__body>.fb-drop-placeholder{flex:1 1 160px;min-width:min(180px,100%);max-width:100%;align-self:stretch;margin:0 2px}:host ::ng-deep [cdkDropListOrientation=vertical]>.fb-drop-placeholder{width:auto;min-height:50px;margin:6px 14px;align-self:stretch}:host ::ng-deep .fb-drop-placeholder--row{min-height:56px}: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) 7%,transparent)!important;outline:1px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,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:72px!important;background:color-mix(in srgb,var(--md-sys-color-primary) 4%,transparent)!important;outline:1px dashed color-mix(in srgb,var(--md-sys-color-primary) 48%,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) 9%,transparent)!important;outline:1.5px solid var(--md-sys-color-primary)!important}:host ::ng-deep .fb-shell--resizing .fb-row.is-resizing-row{outline-color:color-mix(in srgb,var(--md-sys-color-primary) 42%,transparent);background:color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent)}:host ::ng-deep .fb-shell--resizing .fb-row.is-resizing-row .fb-row__items:before{content:\"\";position:absolute;inset:-3px 0;border-radius:var(--r-sm);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333% - 1px),color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent) calc(8.333% - 1px),color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent) 8.333%),color-mix(in srgb,var(--md-sys-color-primary) 3%,transparent);pointer-events:none;z-index:0}:host ::ng-deep .fb-shell--resizing .fb-row.is-resizing-row .fb-row__items>*{position:relative;z-index:1}:host ::ng-deep .fb-shell--resizing .fb-item.is-resizing{border-color:var(--md-sys-color-primary)!important;background:color-mix(in srgb,var(--md-sys-color-primary) 6%,var(--md-sys-color-surface-container-lowest));box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent);cursor:col-resize;z-index:2}:host ::ng-deep .fb-shell--resizing .fb-item.is-resizing .fb-resize{opacity:1!important;pointer-events:auto!important;background:var(--md-sys-color-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}: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}::ng-deep .cdk-drag-preview.fb-drag-preview{width:132px;height:44px;box-sizing:border-box;border-radius:14px;background:#fff;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;box-shadow:0 14px 32px #0000003d,0 5px 14px #00000029;border:1.5px solid color-mix(in srgb,var(--sd-primary, #2a66f4) 46%,#d6d2da);cursor:grabbing;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:1;overflow:hidden;z-index:10000}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__glyph{width:28px;height:28px;border-radius:50%;background:var(--sd-primary, #2a66f4);flex-shrink:0;box-shadow:inset 0 0 0 5px #ffffff2e}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__body{flex:1;min-width:0;display:grid;gap:7px}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line{height:7px;border-radius:999px;background:#d6d2dab8}::ng-deep .cdk-drag-preview.fb-drag-preview .fb-drag-preview__line.is-strong{width:74%;background:color-mix(in srgb,var(--sd-primary, #2a66f4) 26%,#d6d2da)}.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:32px;padding:2px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--r-pill);background:var(--md-sys-color-surface-container-lowest);flex-shrink:0;gap:2px;box-shadow:var(--elev-1)}.fb-mode-toggle button{border:0;background:transparent;border-radius:var(--r-pill);padding:0 12px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:background .12s ease,color .12s ease,box-shadow .12s ease}.fb-mode-toggle button .msi{font-size:16px}.fb-mode-toggle button:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 7%,transparent);color:var(--md-sys-color-on-surface)}.fb-mode-toggle button:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 48%,transparent);outline-offset:1px}.fb-mode-toggle button.is-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent)}.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__items{position:relative;min-width:0}.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);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),inset 3px 0 0 var(--md-sys-color-primary)}.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}table-control{display:block;width:100%;max-width:100%;min-width:0}.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-chip{position:absolute;right:14px;bottom:-18px;z-index:5;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--elev-2);font-size:11px;font-weight:700;letter-spacing:0;pointer-events:none}.fb-resize{position:absolute;top:10px;bottom:10px;right:-6px;width:8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,transparent);background:var(--md-sys-color-surface-container-lowest);display:flex;align-items:center;justify-content:center;cursor:col-resize;opacity:0;transition:opacity .12s ease,background .12s ease,box-shadow .12s ease;z-index:3}.fb-resize:before{content:\"\";width:2px;height:20px;background:var(--md-sys-color-primary);border-radius:999px}.fb-resize:hover{background:var(--md-sys-color-primary-container);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.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);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent),inset 3px 0 0 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}.fb-group__body--static{display:flex;flex-wrap:wrap;gap:var(--gap-2, 8px);cursor:pointer;min-height:48px}.fb-group__body--static .fb-item--static{pointer-events:none;position:relative}.fb-group__body--static .fb-item--static .fb-resize,.fb-group__body--static .fb-item--static .fb-actions,.fb-group__body--static .fb-item--static .fb-status-chip{display:none!important}.fb-canvas__header--group .fb-groupedit__crumb{display:flex;align-items:center;gap:6px;font-weight:600}.fb-canvas__header--group .fb-groupedit__icon .msi{font-size:18px;color:var(--md-sys-color-primary)}.fb-canvas__header--group .fb-groupedit__hint{font-weight:400;font-size:12px;color:var(--md-sys-color-on-surface-variant, #6b6b6b);padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}\n"] }]
         }], ctorParameters: () => [] });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // Template là các mẫu do Portal định nghĩa sẵn (key, label ....) để người dùng chọn nhanh
 // Khi thực hiện sao chép 1 template chúng ta sẽ CLONE để tránh ảnh hưởng template gốc
 class SdFeelExpression {
@@ -6483,7 +6768,7 @@ class SdFeelExpression {
             field: undefined,
             operator: 'EQUAL',
             value: undefined,
-            dayInfo: {}
+            dayInfo: {},
         });
         this.ref.markForCheck();
     };