@sd-angular/core 19.0.0-beta.8 → 19.0.0-beta.81

package/fesm2022/sd-angular-core-components-workflow.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Optional, Injectable, Pipe, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList } from '@angular/core';
+import { InjectionToken, Inject, Optional, Injectable, Pipe, SecurityContext, Input, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ViewChildren, QueryList } from '@angular/core';
 import { SdUtilities, DateUtilities as DateUtilities$1, StringUtilities, ArrayUtilities, NumberUtilities } from '@sd-angular/core/utilities/extensions';
 import { DateUtilities, SdUtilities as SdUtilities$1, StringUtilities as StringUtilities$1 } from '@sd-angular/core/utilities';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormControl } from '@angular/forms';
-import * as i1$3 from '@angular/material/icon';
+import * as i1$4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -22,11 +22,12 @@ import { Subscription, Subject, filter, debounceTime, startWith, combineLatest }
 import { SdSection } from '@sd-angular/core/components/section';
 import { startWith as startWith$1, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import { SD_EMPTY_STR } from '@sd-angular/core/utilities/models';
+import * as i1$1 from '@angular/platform-browser';
 import { SdInput, SdChip, SdChipCalendar, SdSelect, SdAutocomplete, SdRadio, SdInputNumber as SdInputNumber$1 } from '@sd-angular/core/forms';
 import { SdInputNumber } from '@sd-angular/core/forms/input-number';
 import { SdDate } from '@sd-angular/core/forms/date';
 import { SdDatetime } from '@sd-angular/core/forms/datetime';
-import * as i1$2 from '@angular/router';
+import * as i1$3 from '@angular/router';
 import { SdUploadFile } from '@sd-angular/core/components/upload-file';
 import { SdSideDrawer } from '@sd-angular/core/components/side-drawer';
 import { SdTable, SdTabelCellDefDirective } from '@sd-angular/core/components/table';
@@ -35,9 +36,9 @@ import { SdSelect as SdSelect$1 } from '@sd-angular/core/forms/select';
 import { SdSuffixDefDirective } from '@sd-angular/core/forms/directives';
 import { MatDividerModule } from '@angular/material/divider';
 import { SdLabel } from '@sd-angular/core/forms/label';
-import * as i1$4 from '@angular/material/menu';
+import * as i1$5 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$5 from '@sd-angular/core/services';
+import * as i1$6 from '@sd-angular/core/services';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const SD_WORKFLOW_CONFIGURATION = new InjectionToken('sd.workflow.configuration');
@@ -477,6 +478,75 @@ const TemplateToCondition = (template, entity) => {
     }
     return template;
 };
+const GetEntityValue = (entity, key) => {
+    if (!key) {
+        return undefined;
+    }
+    let value = entity;
+    for (const part of key.split('.')) {
+        value = value?.[part];
+    }
+    return value;
+};
+const NormalizeExpressionValue = (value) => {
+    if (typeof value === 'string' && DateUtilities.isDate(value)) {
+        return DateUtilities.toFormat(value, 'yyyy/MM/dd HH:mm:ss');
+    }
+    return value;
+};
+const EvaluateExpressionCondition = (condition, entity) => {
+    const actualValue = NormalizeExpressionValue(GetEntityValue(entity, condition.field));
+    const { operator } = condition;
+    if (!operator) {
+        return undefined;
+    }
+    if (operator === 'NULL') {
+        return !actualValue;
+    }
+    if (operator === 'NOT_NULL') {
+        return !!actualValue;
+    }
+    const expectedValue = typeof condition.value === 'string' ? GetDatetimeValue(condition.value) || condition.value : condition.value;
+    if (expectedValue === undefined || expectedValue === null || expectedValue === '') {
+        return undefined;
+    }
+    const normalizedExpectedValue = NormalizeExpressionValue(expectedValue);
+    if (operator === 'EQUAL') {
+        return actualValue === normalizedExpectedValue;
+    }
+    if (operator === 'GREATER_THAN') {
+        return actualValue > normalizedExpectedValue;
+    }
+    if (operator === 'LESS_THAN') {
+        return actualValue < normalizedExpectedValue;
+    }
+    if (operator === 'NOT_EQUAL') {
+        return actualValue !== normalizedExpectedValue;
+    }
+    if (operator === 'GREATER_OR_EQUAL') {
+        return actualValue >= normalizedExpectedValue;
+    }
+    if (operator === 'LESS_OR_EQUAL') {
+        return actualValue <= normalizedExpectedValue;
+    }
+    return undefined;
+};
+const EvaluateExpression = (condition, entity) => {
+    if (condition.type === 'combinator') {
+        if (!condition.conditions?.length) {
+            return undefined;
+        }
+        const results = condition.conditions.map(child => EvaluateExpression(child, entity));
+        if (results.some(result => typeof result !== 'boolean')) {
+            return undefined;
+        }
+        if (condition.combinator === '&&') {
+            return results.every(result => result === true);
+        }
+        return results.some(result => result === true);
+    }
+    return EvaluateExpressionCondition(condition, entity);
+};
 const ExpressionToJavascriptExpression = (condition) => {
     const queries = [];
     if (condition.type === 'combinator') {
@@ -860,93 +930,41 @@ class WhenExpressionPipe {
         }
         const hiddenWhenExpression = component.properties?.hiddenWhenExpression;
         if (hiddenWhenExpression) {
-            const val = TemplateToCondition(ExpressionToJavascriptExpression(hiddenWhenExpression), variables);
-            if (!val) {
-                return true;
-            }
-            try {
-                const result = new Function('return ' + val)();
-                if (typeof result === 'boolean') {
-                    // Chỉ bỏ hidden khi template return false
-                    return result;
-                }
-                else {
-                    return true;
-                }
-            }
-            catch (ex) {
-                console.error(ex);
-                return true;
+            const result = EvaluateExpression(hiddenWhenExpression, variables);
+            if (typeof result === 'boolean') {
+                return result;
             }
+            return true;
         }
         const visibleWhenExpression = component.properties?.visibleWhenExpression;
         if (visibleWhenExpression) {
-            const val = TemplateToCondition(ExpressionToJavascriptExpression(visibleWhenExpression), variables);
-            if (!val) {
-                return true;
-            }
-            try {
-                const result = new Function('return ' + val)();
-                if (typeof result === 'boolean') {
-                    // 
-                    return !result;
-                }
-                else {
-                    return true; // Ẩn
-                }
-            }
-            catch (ex) {
-                console.error(ex);
-                return true; // Ẩn
+            const result = EvaluateExpression(visibleWhenExpression, variables);
+            if (typeof result === 'boolean') {
+                return !result;
             }
+            return true;
         }
         return false;
     };
     #disabled = (component, variables) => {
         const disabledWhenExpression = component.properties?.disabledWhenExpression;
         if (disabledWhenExpression) {
-            const val = TemplateToCondition(ExpressionToJavascriptExpression(disabledWhenExpression), variables);
-            if (!val) {
-                return true;
-            }
-            try {
-                const result = new Function('return ' + val)();
-                if (typeof result === 'boolean') {
-                    // Chỉ bỏ disabled khi template return false
-                    return result;
-                }
-                else {
-                    return true;
-                }
-            }
-            catch (ex) {
-                console.error(ex);
-                return true;
+            const result = EvaluateExpression(disabledWhenExpression, variables);
+            if (typeof result === 'boolean') {
+                return result;
             }
+            return true;
         }
         return false;
     };
     #required = (component, variables) => {
         const requiredWhenExpression = component.properties?.requiredWhenExpression;
         if (requiredWhenExpression) {
-            const val = TemplateToCondition(ExpressionToJavascriptExpression(requiredWhenExpression), variables);
-            if (!val) {
-                return false;
-            }
-            try {
-                const result = new Function('return ' + val)();
-                if (typeof result === 'boolean') {
-                    // Chỉ required khi template return true
-                    return result;
-                }
-                else {
-                    return false;
-                }
-            }
-            catch (ex) {
-                console.error(ex);
-                return false;
+            const result = EvaluateExpression(requiredWhenExpression, variables);
+            if (typeof result === 'boolean') {
+                return result;
             }
+            return false;
         }
         return false;
     };
@@ -1221,9 +1239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Pipe xử lý hiển thị detail cho component
 class HtmlPipe {
-    htmlSafePipe;
-    constructor(htmlSafePipe) {
-        this.htmlSafePipe = htmlSafePipe;
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
     }
     // Hash component để pipe nhận biết được content hay variables có thay đổi render lại
     transform = (hashed, content, component) => {
@@ -1234,9 +1252,10 @@ class HtmlPipe {
         if (component.properties?.variables?.length) {
             component.properties.variables.forEach(variable => (variables[variable.key] = variable.value));
         }
-        return this.htmlSafePipe.transform(StringUtilities.templateToDisplay(content, variables));
+        const renderedHtml = StringUtilities.templateToDisplay(content, variables);
+        return this.sanitizer.sanitize(SecurityContext.HTML, renderedHtml) || '';
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HtmlPipe, deps: [{ token: i1.SdSafeHtmlPipe }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: HtmlPipe, isStandalone: true, name: "htmlPipe" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HtmlPipe, decorators: [{
@@ -1245,7 +1264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     name: 'htmlPipe',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1.SdSafeHtmlPipe }] });
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Pipe xử lý hiển thị detail cho component
@@ -1347,9 +1366,7 @@ class TextfieldComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextfieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextfieldComponent, isStandalone: true, selector: "lib-textfield", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-input\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [maxlength]=\"component.validate?.maxlength\"\r\n      [pattern]=\"component.validate?.pattern\"\r\n      [patternErrorMessage]=\"component.validate?.patternErrorMessage\"\r\n      [disabled]=\"disabled\"></sd-input>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "pipe", type: 
-                // Pipe cho phần viewed
-                ComponentViewedPipe, name: "componentViewed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextfieldComponent, isStandalone: true, selector: "lib-textfield", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, ngImport: i0, template: "@if (component && entity) {\r\n  <sd-input\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [helperText]=\"component.helperText\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key!]\"\r\n    [required]=\"required\"\r\n    [validator]=\"validator\"\r\n    [maxlength]=\"component.validate?.maxlength\"\r\n    [pattern]=\"component.validate?.pattern\"\r\n    [patternErrorMessage]=\"component.validate?.patternErrorMessage\"\r\n    [disabled]=\"disabled\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"></sd-input>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextfieldComponent, decorators: [{
             type: Component,
@@ -1358,7 +1375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         SdInput,
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
-                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-input\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [maxlength]=\"component.validate?.maxlength\"\r\n      [pattern]=\"component.validate?.pattern\"\r\n      [patternErrorMessage]=\"component.validate?.patternErrorMessage\"\r\n      [disabled]=\"disabled\"></sd-input>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+                    ], template: "@if (component && entity) {\r\n  <sd-input\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [helperText]=\"component.helperText\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key!]\"\r\n    [required]=\"required\"\r\n    [validator]=\"validator\"\r\n    [maxlength]=\"component.validate?.maxlength\"\r\n    [pattern]=\"component.validate?.pattern\"\r\n    [patternErrorMessage]=\"component.validate?.patternErrorMessage\"\r\n    [disabled]=\"disabled\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"></sd-input>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1433,9 +1450,7 @@ class TextareaComponent {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-textarea\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [maxlength]=\"component.validate?.maxlength\"\r\n      [disabled]=\"disabled\"></sd-textarea>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "appearance", "form", "label", "helperText", "placeholder", "rows", "model", "hideInlineError", "required", "maxlength", "pattern", "validator", "inlineError", "disabled", "viewed", "autoHeight"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: 
-                // Pipe cho phần viewed
-                ComponentViewedPipe, name: "componentViewed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  <sd-textarea\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [helperText]=\"component.helperText\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key!]\"\r\n    [required]=\"required\"\r\n    [maxlength]=\"component.validate?.maxlength\"\r\n    [disabled]=\"disabled\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"></sd-textarea>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -1444,7 +1459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         SdTextarea,
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
-                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-textarea\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [maxlength]=\"component.validate?.maxlength\"\r\n      [disabled]=\"disabled\"></sd-textarea>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+                    ], template: "@if (component && entity) {\r\n  <sd-textarea\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [helperText]=\"component.helperText\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key!]\"\r\n    [required]=\"required\"\r\n    [maxlength]=\"component.validate?.maxlength\"\r\n    [disabled]=\"disabled\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"></sd-textarea>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1516,7 +1531,7 @@ class ChipStringComponent {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipStringComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipStringComponent, isStandalone: true, selector: "lib-chip-string", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdChip, selector: "sd-chip", inputs: ["autoId", "name", "appearance", "size", "form", "addable", "label", "placeholder", "removable", "hideInlineError", "model", "required", "min", "max", "disabled"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipStringComponent, isStandalone: true, selector: "lib-chip-string", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-black400\">{{ component.label || component.key }}</div>\r\n    <div class=\"T14M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: SdChip, selector: "sd-chip", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "placeholder", "removable", "hideInlineError", "model", "required", "min", "max", "addable", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: 
                 // Pipe cho phần viewed
                 ComponentViewedPipe, name: "componentViewed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1527,7 +1542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         SdChip,
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
-                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-black400\">{{ component.label || component.key }}</div>\r\n    <div class=\"T14M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1599,7 +1614,7 @@ class ChipCalendarComponent {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipCalendarComponent, isStandalone: true, selector: "lib-chip-calendar", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip-calendar\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip-calendar>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdChipCalendar, selector: "sd-chip-calendar", inputs: ["autoId", "name", "appearance", "size", "form", "label", "placeholder", "removable", "hideInlineError", "model", "required", "min", "max", "disabled"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipCalendarComponent, isStandalone: true, selector: "lib-chip-calendar", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-black400\">{{ component.label || component.key }}</div>\r\n    <div class=\"T14M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip-calendar\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip-calendar>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: SdChipCalendar, selector: "sd-chip-calendar", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "placeholder", "removable", "hideInlineError", "model", "required", "min", "max", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: 
                 // Pipe cho phần viewed
                 ComponentViewedPipe, name: "componentViewed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1610,7 +1625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         SdChipCalendar,
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
-                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip-calendar\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip-calendar>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-black400\">{{ component.label || component.key }}</div>\r\n    <div class=\"T14M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-chip-calendar\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"></sd-chip-calendar>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1682,7 +1697,7 @@ class NumberComponent {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NumberComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NumberComponent, isStandalone: true, selector: "lib-number", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-input-number\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [max]=\"component.validate?.max\"\r\n      [min]=\"component.validate?.min\"></sd-input-number>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "pipe", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NumberComponent, isStandalone: true, selector: "lib-number", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-input-number\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [max]=\"component.validate?.max\"\r\n      [min]=\"component.validate?.min\"\r\n      [viewed]=\"viewed || component.properties?.viewed\"></sd-input-number>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "pipe", type: 
                 // Pipe cho phần viewed
                 ComponentViewedPipe, name: "componentViewed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1693,7 +1708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         SdInputNumber,
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
-                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-input-number\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [max]=\"component.validate?.max\"\r\n      [min]=\"component.validate?.min\"></sd-input-number>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n  } @else {\r\n    <sd-input-number\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [max]=\"component.validate?.max\"\r\n      [min]=\"component.validate?.min\"\r\n      [viewed]=\"viewed || component.properties?.viewed\"></sd-input-number>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1779,10 +1794,8 @@ class DatetimeComponent {
             this.router.navigate([path], { queryParams });
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatetimeComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DatetimeComponent, isStandalone: true, selector: "lib-datetime", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    @if (component.properties?.hyperlink) {\r\n      @let url = component.properties!.hyperlink | hyperlink: entity;\r\n      <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n      <a href=\"javascript:;\" (click)=\"onNavigate(url)\">{{ entity[component.key!] | componentViewed: entity : component | async }}</a>\r\n    } @else {\r\n      <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n      <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n    }\r\n  } @else if (subtype === 'date') {\r\n    <sd-date\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"></sd-date>\r\n  } @else {\r\n    <sd-datetime\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"></sd-datetime>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "pipe", type: 
-                // Pipe cho phần viewed
-                ComponentViewedPipe, name: "componentViewed" }, { kind: "pipe", type: HyperlinkPipe, name: "hyperlink" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatetimeComponent, deps: [{ token: i1$3.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DatetimeComponent, isStandalone: true, selector: "lib-datetime", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (component && entity) {\r\n  @if (subtype === 'date') {\r\n    <sd-date\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"\r\n      [viewed]=\"viewed || component.properties?.viewed\"></sd-date>\r\n  } @else {\r\n    <sd-datetime\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"\r\n      [viewed]=\"viewed || component.properties?.viewed\"></sd-datetime>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -1793,8 +1806,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
                         HyperlinkPipe,
-                    ], template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    @if (component.properties?.hyperlink) {\r\n      @let url = component.properties!.hyperlink | hyperlink: entity;\r\n      <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n      <a href=\"javascript:;\" (click)=\"onNavigate(url)\">{{ entity[component.key!] | componentViewed: entity : component | async }}</a>\r\n    } @else {\r\n      <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n      <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n    }\r\n  } @else if (subtype === 'date') {\r\n    <sd-date\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"></sd-date>\r\n  } @else {\r\n    <sd-datetime\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"></sd-datetime>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
+                    ], template: "@if (component && entity) {\r\n  @if (subtype === 'date') {\r\n    <sd-date\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"\r\n      [viewed]=\"viewed || component.properties?.viewed\"></sd-date>\r\n  } @else {\r\n    <sd-datetime\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [helperText]=\"component.helperText\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [min]=\"component.validate?.min\"\r\n      [max]=\"component.validate?.max\"\r\n      [disabled]=\"disabled\"\r\n      [viewed]=\"viewed || component.properties?.viewed\"></sd-datetime>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
             }], form: [{
@@ -1986,10 +1999,8 @@ class SelectComponent {
             this.router.navigate([path], { queryParams });
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { setVariables: "setVariables", _form: ["form", "_form"], _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, ngImport: i0, template: "@if (entity && component) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    @if (component.properties?.hyperlink) {\r\n      @let url = component.properties!.hyperlink | hyperlink: entity;\r\n      <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n      <a href=\"javascript:;\" (click)=\"onNavigate(url)\">{{ entity[component.key!] | componentViewed: entity : component | async }}</a>\r\n    } @else {\r\n      <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n      <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n    }\r\n  } @else {\r\n    @if (component.properties?.multiple) {\r\n      <sd-select\r\n        [form]=\"form\"\r\n        [label]=\"component.label || component.key\"\r\n        [name]=\"component.key\"\r\n        [autoId]=\"component.key\"\r\n        [(model)]=\"entity[component.key]\"\r\n        [required]=\"required\"\r\n        [validator]=\"validator\"\r\n        [disabled]=\"disabled\"\r\n        [items]=\"items\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        disabledField=\"disabled\"\r\n        (sdChange)=\"onChanges()\"\r\n        multiple></sd-select>\r\n    } @else {\r\n      <sd-autocomplete\r\n        [form]=\"form\"\r\n        [label]=\"component.label || component.key\"\r\n        [name]=\"component.key\"\r\n        [autoId]=\"component.key\"\r\n        [(model)]=\"entity[component.key]\"\r\n        [required]=\"required\"\r\n        [validator]=\"validator\"\r\n        [disabled]=\"disabled\"\r\n        [items]=\"items\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChanges()\"></sd-autocomplete>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "pipe", type: 
-                // Pipe cho phần viewed
-                ComponentViewedPipe, name: "componentViewed" }, { kind: "pipe", type: HyperlinkPipe, name: "hyperlink" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, deps: [{ token: i1$3.Router }, { token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { setVariables: "setVariables", _form: ["form", "_form"], _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, ngImport: i0, template: "@if (entity && component) {\r\n  <sd-select\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key]\"\r\n    [required]=\"required\"\r\n    [validator]=\"validator\"\r\n    [disabled]=\"disabled\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    disabledField=\"disabled\"\r\n    (sdChange)=\"onChanges()\"\r\n    [multiple]=\"component.properties?.multiple\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"\r\n    [hyperlink]=\"component.properties?.hyperlink | hyperlink: entity\"></sd-select>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "pipe", type: HyperlinkPipe, name: "hyperlink" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -2000,8 +2011,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
                         HyperlinkPipe,
-                    ], template: "@if (entity && component) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    @if (component.properties?.hyperlink) {\r\n      @let url = component.properties!.hyperlink | hyperlink: entity;\r\n      <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n      <a href=\"javascript:;\" (click)=\"onNavigate(url)\">{{ entity[component.key!] | componentViewed: entity : component | async }}</a>\r\n    } @else {\r\n      <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n      <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n    }\r\n  } @else {\r\n    @if (component.properties?.multiple) {\r\n      <sd-select\r\n        [form]=\"form\"\r\n        [label]=\"component.label || component.key\"\r\n        [name]=\"component.key\"\r\n        [autoId]=\"component.key\"\r\n        [(model)]=\"entity[component.key]\"\r\n        [required]=\"required\"\r\n        [validator]=\"validator\"\r\n        [disabled]=\"disabled\"\r\n        [items]=\"items\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        disabledField=\"disabled\"\r\n        (sdChange)=\"onChanges()\"\r\n        multiple></sd-select>\r\n    } @else {\r\n      <sd-autocomplete\r\n        [form]=\"form\"\r\n        [label]=\"component.label || component.key\"\r\n        [name]=\"component.key\"\r\n        [autoId]=\"component.key\"\r\n        [(model)]=\"entity[component.key]\"\r\n        [required]=\"required\"\r\n        [validator]=\"validator\"\r\n        [disabled]=\"disabled\"\r\n        [items]=\"items\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChanges()\"></sd-autocomplete>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { setVariables: [{
+                    ], template: "@if (entity && component) {\r\n  <sd-select\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key]\"\r\n    [required]=\"required\"\r\n    [validator]=\"validator\"\r\n    [disabled]=\"disabled\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    disabledField=\"disabled\"\r\n    (sdChange)=\"onChanges()\"\r\n    [multiple]=\"component.properties?.multiple\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"\r\n    [hyperlink]=\"component.properties?.hyperlink | hyperlink: entity\"></sd-select>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
             }], _form: [{
@@ -2122,10 +2133,8 @@ class RadioComponent {
             this.router.navigate([path], { queryParams });
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { setVariables: "setVariables", _form: ["form", "_form"], _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (entity && component) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    @if (component.properties?.hyperlink) {\r\n      @let url = component.properties!.hyperlink | hyperlink: entity;\r\n      <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n      <a href=\"javascript:;\" (click)=\"onNavigate(url)\">{{ entity[component.key!] | componentViewed: entity : component | async }}</a>\r\n    } @else {\r\n      <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n      <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n    }\r\n  } @else {\r\n    <sd-radio\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [items]=\"items\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [display]=\"component.properties?.direction\"></sd-radio>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: SdRadio, selector: "sd-radio", inputs: ["autoId", "name", "form", "label", "placeholder", "display", "model", "items", "valueField", "displayField", "required", "inlineError", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "pipe", type: 
-                // Pipe cho phần viewed
-                ComponentViewedPipe, name: "componentViewed" }, { kind: "pipe", type: HyperlinkPipe, name: "hyperlink" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, deps: [{ token: i1$3.Router }, { token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { setVariables: "setVariables", _form: ["form", "_form"], _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"] }, ngImport: i0, template: "@if (entity && component) {\r\n  <sd-radio\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key!]\"\r\n    [required]=\"required\"\r\n    [disabled]=\"disabled\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [display]=\"component.properties?.direction\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"\r\n    [hyperlink]=\"component.properties?.hyperlink | hyperlink: entity\"></sd-radio>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdRadio, selector: "sd-radio", inputs: ["autoId", "name", "form", "label", "placeholder", "display", "model", "items", "valueField", "displayField", "required", "inlineError", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "pipe", type: HyperlinkPipe, name: "hyperlink" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -2135,8 +2144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         // Pipe cho phần viewed
                         ComponentViewedPipe,
                         HyperlinkPipe
-                    ], template: "@if (entity && component) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    @if (component.properties?.hyperlink) {\r\n      @let url = component.properties!.hyperlink | hyperlink: entity;\r\n      <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n      <a href=\"javascript:;\" (click)=\"onNavigate(url)\">{{ entity[component.key!] | componentViewed: entity : component | async }}</a>\r\n    } @else {\r\n      <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n      <div class=\"T16M\">{{ entity[component.key!] | componentViewed: entity : component | async }}</div>\r\n    }\r\n  } @else {\r\n    <sd-radio\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [name]=\"component.key\"\r\n      [autoId]=\"component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [items]=\"items\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [display]=\"component.properties?.direction\"></sd-radio>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { setVariables: [{
+                    ], template: "@if (entity && component) {\r\n  <sd-radio\r\n    [form]=\"form\"\r\n    [label]=\"component.label || component.key\"\r\n    [name]=\"component.key\"\r\n    [autoId]=\"component.key\"\r\n    [(model)]=\"entity[component.key!]\"\r\n    [required]=\"required\"\r\n    [disabled]=\"disabled\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [display]=\"component.properties?.direction\"\r\n    [viewed]=\"viewed || component.properties?.viewed\"\r\n    [hyperlink]=\"component.properties?.hyperlink | hyperlink: entity\"></sd-radio>\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.ChangeDetectorRef }, { type: FormGenericService }], propDecorators: { setVariables: [{
                 type: Input,
                 args: [{ required: true }]
             }], _form: [{
@@ -2218,7 +2227,7 @@ class UploadComponent {
         return await this.sdUploadFile?.upload();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: UploadComponent, isStandalone: true, selector: "lib-upload", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, viewQueries: [{ propertyName: "sdUploadFile", first: true, predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [model]=\"entity[component.key!]\"\r\n      align=\"left\"\r\n      [args]=\"component.properties?.args\"\r\n      disabled\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  } @else {\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [max]=\"component.properties?.max\"\r\n      [maxSize]=\"component.properties?.maxSize\"\r\n      [extensions]=\"component.properties?.extensions\"\r\n      [args]=\"component.properties?.args\"\r\n      align=\"left\"\r\n      [required]=\"component.validate?.required || required\"\r\n      [disabled]=\"disabled\"\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["form", "name", "args", "label", "helperText", "description", "type", "disabled", "required", "extensions", "max", "maxOfImage", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "previewWidth", "previewHeight", "align", "details", "imageValidator", "model"], outputs: ["loaded", "modelChange", "filesChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: UploadComponent, isStandalone: true, selector: "lib-upload", inputs: { setVariables: "setVariables", form: "form", _entity: ["entity", "_entity"], _component: ["component", "_component"], _disabled: ["disabled", "_disabled"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _validator: ["validator", "_validator"] }, viewQueries: [{ propertyName: "sdUploadFile", first: true, predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if (component && entity) {\r\n  @if (viewed || component.properties?.viewed) {\r\n    <div class=\"text-secondary\">{{ component.label || component.key }}</div>\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [model]=\"entity[component.key!]\"\r\n      align=\"left\"\r\n      [args]=\"component.properties?.args\"\r\n      disabled\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  } @else {\r\n    <sd-upload-file\r\n      [type]=\"component.properties?.type\"\r\n      [form]=\"form\"\r\n      [label]=\"component.label || component.key\"\r\n      [(model)]=\"entity[component.key!]\"\r\n      [max]=\"component.properties?.max\"\r\n      [maxSize]=\"component.properties?.maxSize\"\r\n      [extensions]=\"component.properties?.extensions\"\r\n      [args]=\"component.properties?.args\"\r\n      align=\"left\"\r\n      [required]=\"component.validate?.required || required\"\r\n      [disabled]=\"disabled\"\r\n      previewWidth=\"50px\"\r\n      previewHeight=\"50px\"></sd-upload-file>\r\n  }\r\n}\r\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["args", "label", "key", "description", "previewWidth", "previewHeight", "align", "upload", "details", "download", "imageValidator", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "form", "name", "required", "type", "helperText", "max", "maxOfImage", "extensions", "disabled", "model"], outputs: ["loaded", "filesChanged", "modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
@@ -2599,7 +2608,7 @@ class TableComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { setVariables: "setVariables", form: "form", _component: ["component", "_component"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: SdTable, descendants: true }, { propertyName: "sideDrawer", first: true, predicate: SdSideDrawer, descendants: true }, { propertyName: "uploadFiles", predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if(component && tableOption) {\r\n  <div style=\"width: 100%\">\r\n    <sd-table [option]=\"tableOption\">\r\n      @for(key of imageKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n            type=\"image\"\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n      @for(key of fileKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n    </sd-table>\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-button\r\n      prefixIcon=\"add\"\r\n      color=\"primary\"\r\n      (click)=\"onDetail()\"\r\n      [title]=\"component.properties?.titleButtonCreate || 'Th\u00EAm m\u1EDBi'\"></sd-button>\r\n    }\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-side-drawer title=\"Chi ti\u1EBFt\" width=\"500px\">\r\n        <div sdTitle>\r\n          <span>T\u1EA1o m\u1EDBi/c\u1EADp nh\u1EADt</span>\r\n        </div>\r\n        <div sdBody class=\"c-table-create-update\">\r\n          @if(!!component.columns?.length) {\r\n            <div class=\"row mx-0\">\r\n              @for(column of component.columns;track column.key) {\r\n                @let validate = formRenderColumn[column.key].validate;\r\n                <div class=\"col-12 px-0 mt-16\">\r\n                  @if(column.type === 'string') {\r\n                    <sd-input\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [pattern]=\"column.validate?.pattern\"\r\n                    [patternErrorMessage]=\"column.validate?.patternErrorMessage\"></sd-input>\r\n                  }@else if(column.type === 'number') {\r\n                    <sd-input-number\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [min]=\"column.validate?.min\"></sd-input-number>\r\n                  }@else if(column.type === 'radio') {\r\n                    <sd-radio\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [name]=\"column.key\"\r\n                    [items]=\"column.values\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [required]=\"validate?.required\"></sd-radio>\r\n                  }@else if(column.type === 'values') {\r\n                    <sd-autocomplete\r\n                      [form]=\"form\"\r\n                      [label]=\"column.label\"\r\n                      [(model)]=\"row[column.key]\"\r\n                      [items]=\"columnValues[column.key]\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [required]=\"validate?.required\"></sd-autocomplete>\r\n                  }@else if(column.type === 'date') {\r\n                    <sd-date\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-date>\r\n                  }@else if(column.type === 'datetime') {\r\n                    <sd-datetime\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-datetime>\r\n                  }@else if(column.type === 'image') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"image\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }@else if (column.type === 'file') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"file\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n        <div sdFooter class=\"text-right pr-16\">\r\n          <sd-button title=\"L\u01B0u\" prefixIcon=\"save\" color=\"primary\" type=\"fill\" (click)=\"onAccept()\"></sd-button>\r\n        </div>\r\n      </sd-side-drawer>\r\n    }\r\n  </div>\r\n}\r\n\r\n", styles: [":host{display:contents}.c-table-create-update{background:#fff;margin:-16px;padding:16px;height:calc(100vh - 97px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber$1, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["form", "name", "args", "label", "helperText", "description", "type", "disabled", "required", "extensions", "max", "maxOfImage", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "previewWidth", "previewHeight", "align", "details", "imageValidator", "model"], outputs: ["loaded", "modelChange", "filesChanged"] }, { kind: "component", type: SdTable, selector: "sd-table", inputs: ["autoId", "option"] }, { kind: "directive", type: SdTabelCellDefDirective, selector: "[sdTableCellDef]", inputs: ["sdTableCellDef"] }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdRadio, selector: "sd-radio", inputs: ["autoId", "name", "form", "label", "placeholder", "display", "model", "items", "valueField", "displayField", "required", "inlineError", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { setVariables: "setVariables", form: "form", _component: ["component", "_component"], _required: ["required", "_required"], _viewed: ["viewed", "_viewed"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: SdTable, descendants: true }, { propertyName: "sideDrawer", first: true, predicate: SdSideDrawer, descendants: true }, { propertyName: "uploadFiles", predicate: SdUploadFile, descendants: true }], ngImport: i0, template: "@if(component && tableOption) {\r\n  <div style=\"width: 100%\">\r\n    <sd-table [option]=\"tableOption\">\r\n      @for(key of imageKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n            type=\"image\"\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n      @for(key of fileKeys; track key) {\r\n        <ng-template [sdTableCellDef]=\"key\" let-item=\"item\">\r\n          <sd-upload-file\r\n           [model]=\"item[key]\"\r\n           [args]=\"getArgs(key)\"\r\n           (modelChange)=\"onFileUploadChange(item, key, $event)\"\r\n            align=\"left\"\r\n            disabled\r\n            previewWidth=\"50px\"\r\n            previewHeight=\"50px\"></sd-upload-file>\r\n        </ng-template>\r\n      }\r\n    </sd-table>\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-button\r\n      prefixIcon=\"add\"\r\n      color=\"primary\"\r\n      (click)=\"onDetail()\"\r\n      [title]=\"component.properties?.titleButtonCreate || 'Th\u00EAm m\u1EDBi'\"></sd-button>\r\n    }\r\n    @if(!viewed && !component.properties?.viewed) {\r\n      <sd-side-drawer title=\"Chi ti\u1EBFt\" width=\"500px\">\r\n        <div sdTitle>\r\n          <span>T\u1EA1o m\u1EDBi/c\u1EADp nh\u1EADt</span>\r\n        </div>\r\n        <div sdBody class=\"c-table-create-update\">\r\n          @if(!!component.columns?.length) {\r\n            <div class=\"row mx-0\">\r\n              @for(column of component.columns;track column.key) {\r\n                @let validate = formRenderColumn[column.key].validate;\r\n                <div class=\"col-12 px-0 mt-16\">\r\n                  @if(column.type === 'string') {\r\n                    <sd-input\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [pattern]=\"column.validate?.pattern\"\r\n                    [patternErrorMessage]=\"column.validate?.patternErrorMessage\"></sd-input>\r\n                  }@else if(column.type === 'number') {\r\n                    <sd-input-number\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"\r\n                    [min]=\"column.validate?.min\"></sd-input-number>\r\n                  }@else if(column.type === 'radio') {\r\n                    <sd-radio\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [name]=\"column.key\"\r\n                    [items]=\"column.values\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [required]=\"validate?.required\"></sd-radio>\r\n                  }@else if(column.type === 'values') {\r\n                    <sd-autocomplete\r\n                      [form]=\"form\"\r\n                      [label]=\"column.label\"\r\n                      [(model)]=\"row[column.key]\"\r\n                      [items]=\"columnValues[column.key]\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [required]=\"validate?.required\"></sd-autocomplete>\r\n                  }@else if(column.type === 'date') {\r\n                    <sd-date\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-date>\r\n                  }@else if(column.type === 'datetime') {\r\n                    <sd-datetime\r\n                    [form]=\"form\"\r\n                    [label]=\"column.label\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [required]=\"validate?.required\"></sd-datetime>\r\n                  }@else if(column.type === 'image') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"image\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }@else if (column.type === 'file') {\r\n                    <sd-upload-file\r\n                    [label]=\"column.label\"\r\n                    type=\"file\"\r\n                    [(model)]=\"row[column.key]\"\r\n                    [args]=\"column.args\"\r\n                    previewWidth=\"50px\"\r\n                    previewHeight=\"50px\"\r\n                    align=\"left\"></sd-upload-file>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n        <div sdFooter class=\"text-right pr-16\">\r\n          <sd-button title=\"L\u01B0u\" prefixIcon=\"save\" color=\"primary\" type=\"fill\" (click)=\"onAccept()\"></sd-button>\r\n        </div>\r\n      </sd-side-drawer>\r\n    }\r\n  </div>\r\n}\r\n\r\n", styles: [":host{display:contents}.c-table-create-update{background:#fff;margin:-16px;padding:16px;height:calc(100vh - 97px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber$1, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdUploadFile, selector: "sd-upload-file", inputs: ["args", "label", "key", "description", "previewWidth", "previewHeight", "align", "upload", "details", "download", "imageValidator", "maxSize", "maxWidth", "maxHeight", "scaleToPixel", "form", "name", "required", "type", "helperText", "max", "maxOfImage", "extensions", "disabled", "model"], outputs: ["loaded", "filesChanged", "modelChange"] }, { kind: "component", type: SdTable, selector: "sd-table", inputs: ["autoId", "option"] }, { kind: "directive", type: SdTabelCellDefDirective, selector: "[sdTableCellDef]", inputs: ["sdTableCellDef"] }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdRadio, selector: "sd-radio", inputs: ["autoId", "name", "form", "label", "placeholder", "display", "model", "items", "valueField", "displayField", "required", "inlineError", "disabled", "viewed", "hyperlink"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3017,9 +3026,12 @@ class SdFormRender extends SdBaseSecureComponent {
                 this.loadCompleted = true;
                 this.ref.markForCheck(); // Vì loadCompleted ko phải là @Input nên component sẽ ko load lại
                 if (this.configuration?.onLoaded) {
-                    setTimeout(() => {
-                        this.configuration?.onLoaded?.();
-                    });
+                    try {
+                        this.configuration.onLoaded();
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
                 }
             }
         }));
@@ -3068,24 +3080,9 @@ class SdFormRender extends SdBaseSecureComponent {
         const messages = [];
         for (const validation of this.configuration?.validations?.filter(e => e.alert === alert) || []) {
             if (validation.type === 'expression') {
-                const val = TemplateToCondition(ExpressionToJavascriptExpression(validation.expression), this.entity);
-                if (!val) {
-                    continue;
-                }
-                try {
-                    const result = new Function('return ' + val)();
-                    if (typeof result === 'boolean') {
-                        if (result) {
-                            messages.push(validation.message);
-                        }
-                    }
-                    else {
-                        continue;
-                    }
-                }
-                catch (ex) {
-                    console.error(ex);
-                    continue;
+                const result = EvaluateExpression(validation.expression, this.entity);
+                if (result) {
+                    messages.push(validation.message);
                 }
             }
             else if (validation.type === 'function') {
@@ -3103,7 +3100,7 @@ class SdFormRender extends SdBaseSecureComponent {
         return messages;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFormRender, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_WORKFLOW_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdFormRender, isStandalone: true, selector: "sd-form-render", inputs: { form: "form", _configuration: ["configuration", "_configuration"], _default: ["defaultEntity", "_default"], _entity: ["entity", "_entity"], _properties: ["properties", "_properties"], _viewed: ["viewed", "_viewed"] }, viewQueries: [{ propertyName: "formRenderItems", predicate: LibItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (form && loadCompleted && hashedValues) {\r\n  <div class=\"row mx-0\">\r\n    @for (component of configuration.components; track component.id) {\r\n      @let expression = hashedValues | whenExpression: component : formValue;\r\n      @if (!expression.hidden) {\r\n        @if (component.type === 'group') {\r\n          @if (!!component.components.length) {\r\n            <div class=\"col-12 mt-16\">\r\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\r\n                <div class=\"row mx-0\">\r\n                  @for (childComponent of component.components; track childComponent.id) {\r\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\r\n                    @if (!childExpression.hidden) {\r\n                      <lib-item\r\n                        [setVariables]=\"setVariables\"\r\n                        [form]=\"form\"\r\n                        [entity]=\"entity\"\r\n                        [component]=\"childComponent\"\r\n                        [required]=\"childExpression.required\"\r\n                        [disabled]=\"childExpression.disabled\"\r\n                        [viewed]=\"viewed\"></lib-item>\r\n                    }\r\n                  }\r\n                </div>\r\n              </sd-section>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <lib-item\r\n            [setVariables]=\"setVariables\"\r\n            [form]=\"form\"\r\n            [entity]=\"entity\"\r\n            [component]=\"component\"\r\n            [required]=\"expression.required\"\r\n            [disabled]=\"expression.disabled\"\r\n            [viewed]=\"viewed\"></lib-item>\r\n        }\r\n      }\r\n    }\r\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdFormRender, isStandalone: true, selector: "sd-form-render", inputs: { form: "form", _configuration: ["configuration", "_configuration"], _default: ["defaultEntity", "_default"], _entity: ["entity", "_entity"], _properties: ["properties", "_properties"], _viewed: ["viewed", "_viewed"] }, viewQueries: [{ propertyName: "formRenderItems", predicate: LibItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (form && loadCompleted && hashedValues) {\r\n  <div class=\"row mx-0\">\r\n    @for (component of configuration.components; track component.id) {\r\n      @let expression = hashedValues | whenExpression: component : formValue;\r\n      @if (!expression.hidden) {\r\n        @if (component.type === 'group') {\r\n          @if (!!component.components.length) {\r\n            <div class=\"col-12 mt-16\">\r\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\r\n                <div class=\"row mx-0\">\r\n                  @for (childComponent of component.components; track childComponent.id) {\r\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\r\n                    @if (!childExpression.hidden) {\r\n                      <lib-item\r\n                        [setVariables]=\"setVariables\"\r\n                        [form]=\"form\"\r\n                        [entity]=\"entity\"\r\n                        [component]=\"childComponent\"\r\n                        [required]=\"childExpression.required\"\r\n                        [disabled]=\"childExpression.disabled\"\r\n                        [viewed]=\"viewed\"></lib-item>\r\n                    }\r\n                  }\r\n                </div>\r\n              </sd-section>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <lib-item\r\n            [setVariables]=\"setVariables\"\r\n            [form]=\"form\"\r\n            [entity]=\"entity\"\r\n            [component]=\"component\"\r\n            [required]=\"expression.required\"\r\n            [disabled]=\"expression.disabled\"\r\n            [viewed]=\"viewed\"></lib-item>\r\n        }\r\n      }\r\n    }\r\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: LibItemComponent, selector: "lib-item", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "pipe", type: WhenExpressionPipe, name: "whenExpression" }, { kind: "component", type: VariableComponent, selector: "variable", inputs: ["variables", "setVariables", "form", "entity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFormRender, decorators: [{
             type: Component,
@@ -3256,7 +3253,7 @@ class ExpressionBuilderComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExpressionBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExpressionBuilderComponent, isStandalone: true, selector: "expression-builder", inputs: { label: "label", _attributes: ["attributes", "_attributes"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange", edit: "edit" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<!-- <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ (model | expressionQuery) || '--' }}</a> -->\r\n<sd-input [label]=\"label\" style=\"width: 100%;\" [model]=\"(model | expressionQuery) || '--'\" disabled hideInlineError>\r\n  <ng-template sdSuffixDef>\r\n    <sd-button\r\n      prefixIcon=\"edit\"\r\n      color=\"primary\"\r\n      (click)=\"onEdit()\"\r\n      type=\"link\"></sd-button>\r\n  </ng-template>\r\n</sd-input>\r\n@if (expression) {\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button\r\n          prefixIcon=\"calculate\"\r\n          class=\"mr-4\"\r\n          title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n        <sd-button\r\n          prefixIcon=\"add\"\r\n          title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCondition(expression.conditions)\"\r\n          type=\"fill\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n          <div class=\"c-condition\">\r\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n            @if (idxLv1 === 0) {\r\n              <div class=\"c-where\">WHERE</div>\r\n            }\r\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n            @if (idxLv1 === 1) {\r\n              <div class=\"c-select\">\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [(model)]=\"expression.combinator\"\r\n                  [items]=\"[\r\n                    { value: '&&', display: 'AND' },\r\n                    { value: '||', display: 'OR' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError=\"\"></sd-select>\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 200px\"\r\n              [(model)]=\"conditionLv1.field\"\r\n              [items]=\"attributes\"\r\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              required\r\n              hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 100px\"\r\n              [(model)]=\"conditionLv1.operator\"\r\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              [disabled]=\"!fieldAttribute?.type\"\r\n              required\r\n              hideInlineError></sd-select>\r\n            @if (\r\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\r\n            ) {\r\n              @if (fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if (fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"numberAttributes\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  hideInlineError></sd-autocomplete>\r\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                  [form]=\"form\"\r\n                  style=\"width: 150px\"\r\n                  [items]=\"types\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"conditionLv1.dayInfo.type\"\r\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                  required\r\n                  hideInlineError>\r\n                </sd-select>\r\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\r\n                  <sd-input-number\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"width: 80px\"\r\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    [min]=\"1\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-input-number>\r\n                  <sd-select\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [items]=\"previouses\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [(model)]=\"conditionLv1.dayInfo.related\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\r\n                  <sd-datetime\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-datetime>\r\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\r\n                  <sd-autocomplete\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    [items]=\"dateAttributes\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    hideInlineError></sd-autocomplete>\r\n                }\r\n              } @else if (fieldAttribute.type === 'boolean') {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"[\r\n                    { value: true, display: fieldAttribute.displayOnTrue },\r\n                    { value: false, display: fieldAttribute.displayOnFalse }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-select>\r\n              } @else if (fieldAttribute.type === 'values') {\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"fieldAttribute.values\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n          } @else if (conditionLv1.type === 'combinator') {\r\n            <div class=\"c-builder\">\r\n              <div class=\"d-flex justify-content-end\">\r\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n                <sd-button\r\n                  prefixIcon=\"add\"\r\n                  title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n                  size=\"sm\"\r\n                  color=\"primary\"\r\n                  (click)=\"addCondition(conditionLv1.conditions)\"\r\n                  type=\"fill\"></sd-button>\r\n              </div>\r\n              <!-- C\u1EA5p 2 -->\r\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n                  <div class=\"c-condition\">\r\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                    @if (idxLv2 === 0) {\r\n                      <div class=\"c-where\">WHERE</div>\r\n                    }\r\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                    @if (idxLv2 === 1) {\r\n                      <div class=\"c-select\">\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [(model)]=\"conditionLv1.combinator\"\r\n                          [items]=\"[\r\n                            { value: '&&', display: 'AND' },\r\n                            { value: '||', display: 'OR' }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError=\"\"></sd-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                  @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 200px\"\r\n                      [(model)]=\"conditionLv2.field\"\r\n                      [items]=\"attributes\"\r\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      required\r\n                      hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 100px\"\r\n                      [(model)]=\"conditionLv2.operator\"\r\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [disabled]=\"!fieldAttribute?.type\"\r\n                      required\r\n                      hideInlineError></sd-select>\r\n                    @if (\r\n                      !!fieldAttribute?.type &&\r\n                      conditionLv2.operator &&\r\n                      conditionLv2.operator !== 'NULL' &&\r\n                      conditionLv2.operator !== 'NOT_NULL'\r\n                    ) {\r\n                      @if (fieldAttribute.type === 'string') {\r\n                        <sd-input\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          required\r\n                          hideInlineError></sd-input>\r\n                      } @else if (fieldAttribute.type === 'number') {\r\n                        <sd-input-number\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          hideInlineError></sd-input-number>\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"numberAttributes\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          hideInlineError></sd-autocomplete>\r\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                          style=\"width: 150px\"\r\n                          [items]=\"types\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          [(model)]=\"conditionLv2.dayInfo.type\"\r\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                          required\r\n                          hideInlineError>\r\n                        </sd-select>\r\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\r\n                          <sd-input-number\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"width: 80px\"\r\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            [min]=\"1\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-input-number>\r\n                          <sd-select\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [items]=\"previouses\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            [(model)]=\"conditionLv2.dayInfo.related\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-select>\r\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\r\n                          <sd-datetime\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-datetime>\r\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\r\n                          <sd-autocomplete\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            [items]=\"dateAttributes\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            hideInlineError></sd-autocomplete>\r\n                        }\r\n                      } @else if (fieldAttribute.type === 'boolean') {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"[\r\n                            { value: true, display: fieldAttribute.displayOnTrue },\r\n                            { value: false, display: fieldAttribute.displayOnFalse }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-select>\r\n                      } @else if (fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"fieldAttribute.values\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "pipe", type: ExpressionQueryPipe, name: "expressionQuery" }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExpressionBuilderComponent, isStandalone: true, selector: "expression-builder", inputs: { label: "label", _attributes: ["attributes", "_attributes"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange", edit: "edit" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<!-- <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ (model | expressionQuery) || '--' }}</a> -->\r\n<sd-input [label]=\"label\" style=\"width: 100%;\" [model]=\"(model | expressionQuery) || '--'\" disabled hideInlineError>\r\n  <ng-template sdSuffixDef>\r\n    <sd-button\r\n      prefixIcon=\"edit\"\r\n      color=\"primary\"\r\n      (click)=\"onEdit()\"\r\n      type=\"link\"></sd-button>\r\n  </ng-template>\r\n</sd-input>\r\n@if (expression) {\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button\r\n          prefixIcon=\"calculate\"\r\n          class=\"mr-4\"\r\n          title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n        <sd-button\r\n          prefixIcon=\"add\"\r\n          title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n          color=\"primary\"\r\n          (click)=\"addCondition(expression.conditions)\"\r\n          type=\"fill\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n        <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n          <div class=\"c-condition\">\r\n            <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n            @if (idxLv1 === 0) {\r\n              <div class=\"c-where\">WHERE</div>\r\n            }\r\n            <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n            @if (idxLv1 === 1) {\r\n              <div class=\"c-select\">\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [(model)]=\"expression.combinator\"\r\n                  [items]=\"[\r\n                    { value: '&&', display: 'AND' },\r\n                    { value: '||', display: 'OR' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError=\"\"></sd-select>\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 200px\"\r\n              [(model)]=\"conditionLv1.field\"\r\n              [items]=\"attributes\"\r\n              (sdChange)=\"onChangeAttribute(conditionLv1)\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              required\r\n              hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select\r\n              size=\"sm\"\r\n              [form]=\"form\"\r\n              style=\"width: 100px\"\r\n              [(model)]=\"conditionLv1.operator\"\r\n              [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n              valueField=\"value\"\r\n              displayField=\"display\"\r\n              [disabled]=\"!fieldAttribute?.type\"\r\n              required\r\n              hideInlineError></sd-select>\r\n            @if (\r\n              !!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL'\r\n            ) {\r\n              @if (fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if (fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"conditionLv1.value\" hideInlineError></sd-input-number>\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"numberAttributes\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  hideInlineError></sd-autocomplete>\r\n              } @else if (fieldAttribute.type === 'datetime' && conditionLv1.dayInfo) {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                  [form]=\"form\"\r\n                  style=\"width: 150px\"\r\n                  [items]=\"types\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"conditionLv1.dayInfo.type\"\r\n                  (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                  required\r\n                  hideInlineError>\r\n                </sd-select>\r\n                @if (conditionLv1.dayInfo.type === 'RELATED') {\r\n                  <sd-input-number\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"width: 80px\"\r\n                    [(model)]=\"conditionLv1.dayInfo.relatedValue\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    [min]=\"1\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-input-number>\r\n                  <sd-select\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [items]=\"previouses\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    [(model)]=\"conditionLv1.dayInfo.related\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (conditionLv1.dayInfo.type === 'DATETIME') {\r\n                  <sd-datetime\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    (sdChange)=\"onChangeDateInfo(conditionLv1)\"\r\n                    required\r\n                    hideInlineError>\r\n                  </sd-datetime>\r\n                } @else if (conditionLv1.dayInfo.type === 'ATTRIBUTE') {\r\n                  <sd-autocomplete\r\n                    size=\"sm\"\r\n                    [form]=\"form\"\r\n                    style=\"flex: 1\"\r\n                    [(model)]=\"conditionLv1.value\"\r\n                    [items]=\"dateAttributes\"\r\n                    valueField=\"value\"\r\n                    displayField=\"display\"\r\n                    hideInlineError></sd-autocomplete>\r\n                }\r\n              } @else if (fieldAttribute.type === 'boolean') {\r\n                <sd-select\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"[\r\n                    { value: true, display: fieldAttribute.displayOnTrue },\r\n                    { value: false, display: fieldAttribute.displayOnFalse }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-select>\r\n              } @else if (fieldAttribute.type === 'values') {\r\n                <sd-autocomplete\r\n                  size=\"sm\"\r\n                  [form]=\"form\"\r\n                  style=\"flex: 1\"\r\n                  [(model)]=\"conditionLv1.value\"\r\n                  [items]=\"fieldAttribute.values\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  required\r\n                  hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button class=\"ml-auto\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n          } @else if (conditionLv1.type === 'combinator') {\r\n            <div class=\"c-builder\">\r\n              <div class=\"d-flex justify-content-end\">\r\n                <sd-button class=\"mr-4\" prefixIcon=\"delete\" tooltip=\"X\u00F3a\" (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n                <sd-button\r\n                  prefixIcon=\"add\"\r\n                  title=\"\u0110i\u1EC1u ki\u1EC7n\"\r\n                  size=\"sm\"\r\n                  color=\"primary\"\r\n                  (click)=\"addCondition(conditionLv1.conditions)\"\r\n                  type=\"fill\"></sd-button>\r\n              </div>\r\n              <!-- C\u1EA5p 2 -->\r\n              @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n                <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px\">\r\n                  <div class=\"c-condition\">\r\n                    <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                    @if (idxLv2 === 0) {\r\n                      <div class=\"c-where\">WHERE</div>\r\n                    }\r\n                    <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                    @if (idxLv2 === 1) {\r\n                      <div class=\"c-select\">\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [(model)]=\"conditionLv1.combinator\"\r\n                          [items]=\"[\r\n                            { value: '&&', display: 'AND' },\r\n                            { value: '||', display: 'OR' }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError=\"\"></sd-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                  @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 200px\"\r\n                      [(model)]=\"conditionLv2.field\"\r\n                      [items]=\"attributes\"\r\n                      (sdChange)=\"onChangeAttribute(conditionLv2)\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      required\r\n                      hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select\r\n                      size=\"sm\"\r\n                      [form]=\"form\"\r\n                      style=\"width: 100px\"\r\n                      [(model)]=\"conditionLv2.operator\"\r\n                      [items]=\"attributeOperators[fieldAttribute?.type || 'string']\"\r\n                      valueField=\"value\"\r\n                      displayField=\"display\"\r\n                      [disabled]=\"!fieldAttribute?.type\"\r\n                      required\r\n                      hideInlineError></sd-select>\r\n                    @if (\r\n                      !!fieldAttribute?.type &&\r\n                      conditionLv2.operator &&\r\n                      conditionLv2.operator !== 'NULL' &&\r\n                      conditionLv2.operator !== 'NOT_NULL'\r\n                    ) {\r\n                      @if (fieldAttribute.type === 'string') {\r\n                        <sd-input\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          required\r\n                          hideInlineError></sd-input>\r\n                      } @else if (fieldAttribute.type === 'number') {\r\n                        <sd-input-number\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          hideInlineError></sd-input-number>\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"numberAttributes\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          hideInlineError></sd-autocomplete>\r\n                      } @else if (fieldAttribute.type === 'datetime' && conditionLv2.dayInfo) {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          placeholder=\"Th\u1EDDi \u0111i\u1EC3m\"\r\n                          style=\"width: 150px\"\r\n                          [items]=\"types\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          [(model)]=\"conditionLv2.dayInfo.type\"\r\n                          (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                          required\r\n                          hideInlineError>\r\n                        </sd-select>\r\n                        @if (conditionLv2.dayInfo.type === 'RELATED') {\r\n                          <sd-input-number\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"width: 80px\"\r\n                            [(model)]=\"conditionLv2.dayInfo.relatedValue\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            [min]=\"1\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-input-number>\r\n                          <sd-select\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [items]=\"previouses\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            [(model)]=\"conditionLv2.dayInfo.related\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-select>\r\n                        } @else if (conditionLv2.dayInfo.type === 'DATETIME') {\r\n                          <sd-datetime\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            (sdChange)=\"onChangeDateInfo(conditionLv2)\"\r\n                            required\r\n                            hideInlineError>\r\n                          </sd-datetime>\r\n                        } @else if (conditionLv2.dayInfo.type === 'ATTRIBUTE') {\r\n                          <sd-autocomplete\r\n                            size=\"sm\"\r\n                            [form]=\"form\"\r\n                            style=\"flex: 1\"\r\n                            [(model)]=\"conditionLv2.value\"\r\n                            [items]=\"dateAttributes\"\r\n                            valueField=\"value\"\r\n                            displayField=\"display\"\r\n                            hideInlineError></sd-autocomplete>\r\n                        }\r\n                      } @else if (fieldAttribute.type === 'boolean') {\r\n                        <sd-select\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"[\r\n                            { value: true, display: fieldAttribute.displayOnTrue },\r\n                            { value: false, display: fieldAttribute.displayOnFalse }\r\n                          ]\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-select>\r\n                      } @else if (fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete\r\n                          size=\"sm\"\r\n                          [form]=\"form\"\r\n                          style=\"flex: 1\"\r\n                          [(model)]=\"conditionLv2.value\"\r\n                          [items]=\"fieldAttribute.values\"\r\n                          valueField=\"value\"\r\n                          displayField=\"display\"\r\n                          required\r\n                          hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "pipe", type: ExpressionQueryPipe, name: "expressionQuery" }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExpressionBuilderComponent, decorators: [{
             type: Component,
@@ -3447,7 +3444,7 @@ class AttributeInputNumber {
         this.modelChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeInputNumber, isStandalone: true, selector: "attribute-input-number", inputs: { _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input-number\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n</div> -->\r\n<sd-input-number\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n", dependencies: [{ kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeInputNumber, isStandalone: true, selector: "attribute-input-number", inputs: { _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input-number\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n</div> -->\r\n<sd-input-number\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [(model)]=\"model\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-input-number>\r\n", dependencies: [{ kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeInputNumber, decorators: [{
             type: Component,
@@ -3489,7 +3486,7 @@ class AttributeInput {
         this.sdChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeInput, isStandalone: true, selector: "attribute-input", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input style=\"width: 200px\" size=\"sm\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n</div> -->\r\n<sd-input class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n", dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeInput, isStandalone: true, selector: "attribute-input", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-input style=\"width: 200px\" size=\"sm\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n</div> -->\r\n<sd-input class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-input>\r\n", dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeInput, decorators: [{
             type: Component,
@@ -3530,7 +3527,7 @@ class AttributeSwitch {
         this.modelChange.emit(!!value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeSwitch, isStandalone: true, selector: "attribute-switch", inputs: { form: "form", _label: ["label", "_label"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-switch size=\"sm\" [form]=\"form\" [(model)]=\"model\" (sdChange)=\"onChange($event)\" hideInlineError></sd-switch>\r\n</div> -->\r\n<sd-select\r\n  class=\"py-8\"\r\n  [label]=\"label!\"\r\n  [form]=\"form\"\r\n  [(model)]=\"model\"\r\n  valueField=\"value\"\r\n  displayField=\"display\"\r\n  [items]=\"[\r\n    { value: true, display: 'C\u00F3' },\r\n    { value: false, display: 'Kh\u00F4ng' }\r\n  ]\"\r\n  (sdChange)=\"onChange($event)\"\r\n  hideInlineError></sd-select>\r\n", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeSwitch, isStandalone: true, selector: "attribute-switch", inputs: { form: "form", _label: ["label", "_label"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-switch size=\"sm\" [form]=\"form\" [(model)]=\"model\" (sdChange)=\"onChange($event)\" hideInlineError></sd-switch>\r\n</div> -->\r\n<sd-select\r\n  class=\"py-8\"\r\n  [label]=\"label!\"\r\n  [form]=\"form\"\r\n  [(model)]=\"model\"\r\n  valueField=\"value\"\r\n  displayField=\"display\"\r\n  [items]=\"[\r\n    { value: true, display: 'C\u00F3' },\r\n    { value: false, display: 'Kh\u00F4ng' }\r\n  ]\"\r\n  (sdChange)=\"onChange($event)\"\r\n  hideInlineError></sd-select>\r\n", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeSwitch, decorators: [{
             type: Component,
@@ -3570,7 +3567,7 @@ class AttributeTemplate {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeTemplate, deps: [{ token: SD_WORKFLOW_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeTemplate, isStandalone: true, selector: "attribute-template", inputs: { _component: ["component", "_component"] }, outputs: { sdChange: "sdChange" }, ngImport: i0, template: "@if (templates.length) {\r\n  <!-- <div class=\"d-flex align-items-center py-4\">\r\n    <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u m\u1EABu</div>\r\n    <sd-autocomplete\r\n      style=\"width: 200px\"\r\n      size=\"sm\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n  </div> -->\r\n  <sd-autocomplete\r\n      class=\"py-8\"\r\n      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n}\r\n", dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeTemplate, isStandalone: true, selector: "attribute-template", inputs: { _component: ["component", "_component"] }, outputs: { sdChange: "sdChange" }, ngImport: i0, template: "@if (templates.length) {\r\n  <!-- <div class=\"d-flex align-items-center py-4\">\r\n    <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u m\u1EABu</div>\r\n    <sd-autocomplete\r\n      style=\"width: 200px\"\r\n      size=\"sm\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n  </div> -->\r\n  <sd-autocomplete\r\n      class=\"py-8\"\r\n      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"templates\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      (sdChange)=\"onChange($event)\"\r\n      hideInlineError></sd-autocomplete>\r\n}\r\n", dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeTemplate, decorators: [{
             type: Component,
@@ -3609,7 +3606,7 @@ class AttributeTextarea {
         this.sdChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeTextarea, isStandalone: true, selector: "attribute-textarea", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-textarea class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-textarea>", dependencies: [{ kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "appearance", "form", "label", "helperText", "placeholder", "rows", "model", "hideInlineError", "required", "maxlength", "pattern", "validator", "inlineError", "disabled", "viewed", "autoHeight"], outputs: ["modelChange", "sdChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeTextarea, isStandalone: true, selector: "attribute-textarea", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-textarea class=\"py-8\" [label]=\"label!\" [form]=\"form\" [(model)]=\"model\" [disabled]=\"disabled\" (sdChange)=\"onChange($event)\" hideInlineError></sd-textarea>", dependencies: [{ kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "rows", "hideInlineError", "required", "disabled", "viewed", "autoHeight", "maxlength", "pattern", "validator", "inlineError", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeTextarea, decorators: [{
             type: Component,
@@ -3701,7 +3698,7 @@ class TextfieldAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextfieldAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextfieldAttribute, isStandalone: true, selector: "textfield-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  <attribute-input [form]=\"form\" label=\"Gi\u00E1 tr\u1ECB m\u1EB7c \u0111\u1ECBnh\" [(model)]=\"component.defaultValue\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\r\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextfieldAttribute, isStandalone: true, selector: "textfield-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n  <attribute-input [form]=\"form\" label=\"Gi\u00E1 tr\u1ECB m\u1EB7c \u0111\u1ECBnh\" [(model)]=\"component.defaultValue\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input label=\"Expression\" [(model)]=\"component.validate!.pattern\"></attribute-input>\r\n    <attribute-input label=\"Expression message\" [(model)]=\"component.validate!.patternErrorMessage\"></attribute-input>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextfieldAttribute, decorators: [{
             type: Component,
@@ -3801,7 +3798,7 @@ class TextareaAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextareaAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextareaAttribute, isStandalone: true, selector: "textarea-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextareaAttribute, isStandalone: true, selector: "textarea-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"K\u00FD t\u1EF1 t\u1ED1i \u0111a\" [(model)]=\"component.validate!.maxlength\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextareaAttribute, decorators: [{
             type: Component,
@@ -3949,7 +3946,7 @@ class ChipStringAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipStringAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipStringAttribute, isStandalone: true, selector: "chip-string-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipStringAttribute, isStandalone: true, selector: "chip-string-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipStringAttribute, decorators: [{
             type: Component,
@@ -4058,7 +4055,7 @@ class ChipCalendarAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipCalendarAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipCalendarAttribute, isStandalone: true, selector: "chip-calendar-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChipCalendarAttribute, isStandalone: true, selector: "chip-calendar-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipCalendarAttribute, decorators: [{
             type: Component,
@@ -4124,7 +4121,7 @@ class NumberAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NumberAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NumberAttribute, isStandalone: true, selector: "number-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB nh\u1ECF nh\u1EA5t\" [(model)]=\"component.validate!.min\"></attribute-input-number>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB l\u1EDBn nh\u1EA5t\" [(model)]=\"component.validate!.max\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NumberAttribute, isStandalone: true, selector: "number-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB nh\u1ECF nh\u1EA5t\" [(model)]=\"component.validate!.min\"></attribute-input-number>\r\n    <attribute-input-number label=\"Gi\u00E1 tr\u1ECB l\u1EDBn nh\u1EA5t\" [(model)]=\"component.validate!.max\"></attribute-input-number>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NumberAttribute, decorators: [{
             type: Component,
@@ -4257,7 +4254,7 @@ class AttributeSelect {
         this.sdChange.emit(value);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeSelect, isStandalone: true, selector: "attribute-select", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _multiple: ["multiple", "_multiple"], _items: ["items", "_items"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-select\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>\r\n</div> -->\r\n<sd-select\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AttributeSelect, isStandalone: true, selector: "attribute-select", inputs: { form: "form", _label: ["label", "_label"], _disabled: ["disabled", "_disabled"], _multiple: ["multiple", "_multiple"], _items: ["items", "_items"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, ngImport: i0, template: "<!-- <div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <sd-select\r\n    style=\"width: 200px\"\r\n    size=\"sm\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>\r\n</div> -->\r\n<sd-select\r\n    class=\"py-8\"\r\n    [label]=\"label!\"\r\n    [form]=\"form\"\r\n    [(model)]=\"model\"\r\n    [items]=\"items\"\r\n    valueField=\"value\"\r\n    displayField=\"display\"\r\n    [disabled]=\"disabled\"\r\n    (sdChange)=\"onChange($event)\"\r\n    hideInlineError></sd-select>", dependencies: [{ kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeSelect, decorators: [{
             type: Component,
@@ -4331,7 +4328,7 @@ class DatetimeAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatetimeAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DatetimeAttribute, isStandalone: true, selector: "datetime-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"\u0110\u1ECBnh d\u1EA1ng\"\r\n    [(model)]=\"component.subtype\"\r\n    [items]=\"[\r\n      { value: 'date', display: 'dd/MM/yyyy' },\r\n      { value: 'datetime', display: 'dd/MM/yyyy HH:mm' }\r\n    ]\"></attribute-select>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch [form]=\"form\" label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DatetimeAttribute, isStandalone: true, selector: "datetime-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"\u0110\u1ECBnh d\u1EA1ng\"\r\n    [(model)]=\"component.subtype\"\r\n    [items]=\"[\r\n      { value: 'date', display: 'dd/MM/yyyy' },\r\n      { value: 'datetime', display: 'dd/MM/yyyy HH:mm' }\r\n    ]\"></attribute-select>\r\n  <attribute-textarea [form]=\"form\" label=\"G\u1EE3i \u00FD\" [(model)]=\"component.helperText\"></attribute-textarea>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch [form]=\"form\" label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatetimeAttribute, decorators: [{
             type: Component,
@@ -4413,7 +4410,7 @@ let BuildQueries$1 = class BuildQueries {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BuildQueries, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.queries?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div style=\"width: 150px\">\r\n            <div class=\"text-secondary\">{{ property.value }}</div>\r\n            <div class=\"T16M\">{{ property.display }}</div>\r\n          </div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.queries?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div style=\"width: 150px\">\r\n            <div class=\"text-secondary\">{{ property.value }}</div>\r\n            <div class=\"T16M\">{{ property.display }}</div>\r\n          </div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BuildQueries$1, decorators: [{
             type: Component,
@@ -4528,7 +4525,7 @@ class BuildVariables {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BuildVariables, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BuildVariables, isStandalone: true, selector: "build-variables", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.variables?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp g\u00E1n gi\u00E1 tr\u1ECB khi thay \u0111\u1ED5i\" width=\"500px\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (item of items; track item.id; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng mu\u1ED1n g\u00E1n gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.key\"\r\n            [items]=\"leftProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n          <sd-autocomplete\r\n             label=\"Gi\u00E1 tr\u1ECB mu\u1ED1n g\u00E1n\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.value\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BuildVariables, isStandalone: true, selector: "build-variables", inputs: { components: "components", variables: "variables", label: "label", selections: "selections", _valuesKey: ["valuesKey", "_valuesKey"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!selection?.variables?.items?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp g\u00E1n gi\u00E1 tr\u1ECB khi thay \u0111\u1ED5i\" width=\"500px\">\r\n    <div class=\"c-builder\">\r\n      <div class=\"d-flex justify-content-end\">\r\n        <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n      </div>\r\n      <!-- C\u1EA5p 1 -->\r\n      @for (item of items; track item.id; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng mu\u1ED1n g\u00E1n gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.key\"\r\n            [items]=\"leftProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n          <sd-autocomplete\r\n             label=\"Gi\u00E1 tr\u1ECB mu\u1ED1n g\u00E1n\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"item.value\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BuildVariables, decorators: [{
             type: Component,
@@ -4626,7 +4623,7 @@ class AttributeSelection {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeSelection, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeSelection, isStandalone: true, selector: "attribute-selection", inputs: { components: "components", variables: "variables", component: "component", _valuesKey: ["valuesKey", "_valuesKey"], _values: ["values", "_values"] }, outputs: { valuesKeyChange: "valuesKeyChange", valuesChange: "valuesChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (selections.length) {\r\n    <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u API</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"valuesKey\"\r\n        [items]=\"selections\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeValuesKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div>\r\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\r\n\r\n    @if (component.type === 'select' && !!valuesKey) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n      <build-variables\r\n        label=\"G\u00E1n gi\u00E1 tr\u1ECB\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\r\n      <!-- <div class=\"d-flex align-items-center py-4\">\r\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\r\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\r\n      </div> -->\r\n    }\r\n  }\r\n  @if (!valuesKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">D\u1EEF li\u1EC7u t\u0129nh</div>\r\n      @for (item of values; track item.value; let idx = $index) {\r\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm d\u1EEF li\u1EC7u\" (click)=\"addItem()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n", dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: BuildQueries$1, selector: "build-queries", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "component", type: BuildVariables, selector: "build-variables", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeSelection, isStandalone: true, selector: "attribute-selection", inputs: { components: "components", variables: "variables", component: "component", _valuesKey: ["valuesKey", "_valuesKey"], _values: ["values", "_values"] }, outputs: { valuesKeyChange: "valuesKeyChange", valuesChange: "valuesChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (selections.length) {\r\n    <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u API</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"valuesKey\"\r\n        [items]=\"selections\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeValuesKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div>\r\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\r\n\r\n    @if (component.type === 'select' && !!valuesKey) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n      <build-variables\r\n        label=\"G\u00E1n gi\u00E1 tr\u1ECB\"\r\n        [selections]=\"selections\"\r\n        [valuesKey]=\"valuesKey\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\r\n      <!-- <div class=\"d-flex align-items-center py-4\">\r\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\r\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\r\n      </div> -->\r\n    }\r\n  }\r\n  @if (!valuesKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">D\u1EEF li\u1EC7u t\u0129nh</div>\r\n      @for (item of values; track item.value; let idx = $index) {\r\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\r\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm d\u1EEF li\u1EC7u\" (click)=\"addItem()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n", dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: BuildQueries$1, selector: "build-queries", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "component", type: BuildVariables, selector: "build-variables", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeSelection, decorators: [{
             type: Component,
@@ -4707,7 +4704,7 @@ class SelectAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectAttribute, isStandalone: true, selector: "select-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-switch label=\"Ch\u1ECDn nhi\u1EC1u\" [(model)]=\"component.properties!.multiple\"></attribute-switch>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n      <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [component]=\"component\"\r\n    [variables]=\"variables\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectAttribute, isStandalone: true, selector: "select-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-switch label=\"Ch\u1ECDn nhi\u1EC1u\" [(model)]=\"component.properties!.multiple\"></attribute-switch>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n      <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [component]=\"component\"\r\n    [variables]=\"variables\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectAttribute, decorators: [{
             type: Component,
@@ -4855,7 +4852,7 @@ class RadioAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RadioAttribute, isStandalone: true, selector: "radio-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-select\r\n      [form]=\"form\"\r\n      label=\"B\u1ED1 c\u1EE5c\"\r\n      [(model)]=\"component.properties!.direction\"\r\n      [items]=\"[\r\n        { value: 'row', display: 'Ngang' },\r\n        { value: 'column', display: 'D\u1ECDc' }\r\n      ]\"></attribute-select>\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [component]=\"component\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RadioAttribute, isStandalone: true, selector: "radio-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  @if (component.properties!.viewed) {\r\n    <attribute-input label=\"Hyperlink\" [(model)]=\"component.properties!.hyperlink\"></attribute-input>\r\n  }\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-select\r\n      [form]=\"form\"\r\n      label=\"B\u1ED1 c\u1EE5c\"\r\n      [(model)]=\"component.properties!.direction\"\r\n      [items]=\"[\r\n        { value: 'row', display: 'Ngang' },\r\n        { value: 'column', display: 'D\u1ECDc' }\r\n      ]\"></attribute-select>\r\n  </sd-section>\r\n  @if (!component.properties!.viewed) {\r\n    <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n      @if (!component.validate!.required) {\r\n        <attribute-expression\r\n          label=\"B\u1EAFt bu\u1ED9c khi\"\r\n          [components]=\"components\"\r\n          [variables]=\"variables\"\r\n          [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <attribute-selection\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [component]=\"component\"\r\n    [(valuesKey)]=\"component.valuesKey\"\r\n    [(values)]=\"component.values\"\r\n    (valuesKeyChange)=\"onChanges()\"\r\n    (valuesChange)=\"onChanges()\"></attribute-selection>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioAttribute, decorators: [{
             type: Component,
@@ -4934,7 +4931,7 @@ class CheckboxAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CheckboxAttribute, isStandalone: true, selector: "checkbox-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CheckboxAttribute, isStandalone: true, selector: "checkbox-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxAttribute, decorators: [{
             type: Component,
@@ -5007,7 +5004,7 @@ class BuildQueries {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BuildQueries, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { label: "label", _queries: ["queries", "_queries"], components: "components", variables: "variables", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!leftProperties?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div class=\"T14M\" style=\"width: 150px\">{{ property.display }}</div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BuildQueries, isStandalone: true, selector: "build-queries", inputs: { label: "label", _queries: ["queries", "_queries"], components: "components", variables: "variables", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "@if (!!leftProperties?.length) {\r\n  <div class=\"d-flex align-items-center py-4\">\r\n    @if (label) {\r\n      <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n    }\r\n    <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n      <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n    </div>\r\n  </div>\r\n  <sd-modal title=\"Thi\u1EBFt l\u1EADp gi\u00E1 tr\u1ECB truy v\u1EA5n\" width=\"400px\">\r\n    <div class=\"c-builder\">\r\n      @for (property of leftProperties; track property.value) {\r\n        <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n          <div class=\"T14M\" style=\"width: 150px\">{{ property.display }}</div>\r\n          <sd-autocomplete\r\n            label=\"Tr\u01B0\u1EDDng l\u1EA5y gi\u00E1 tr\u1ECB\"\r\n            [form]=\"form\"\r\n            style=\"flex: 1\"\r\n            [(model)]=\"model![property.value]\"\r\n            [items]=\"rightProperties\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required\r\n            hideInlineError></sd-autocomplete>\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-container sdFooter>\r\n      <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n    </ng-container>\r\n  </sd-modal>\r\n}\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BuildQueries, decorators: [{
             type: Component,
@@ -5108,7 +5105,7 @@ class HtmlAttribute {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HtmlAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HtmlAttribute, isStandalone: true, selector: "html-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, outputs: { attributeChanges: "attributeChanges" }, ngImport: i0, template: "@if (!component.properties!.hidden) {\r\n  <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n    <attribute-select\r\n      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"definitionHtmls\"\r\n      (sdChange)=\"onChangeDefinition($event)\"></attribute-select>\r\n    <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\"></attribute-input>\r\n    <attribute-textarea [form]=\"form\" label=\"N\u1ED9i dung\" [(model)]=\"component.content\"></attribute-textarea>\r\n    @if (component.properties?.queries?.length) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [queries]=\"component.properties?.queries\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\" \r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n    }\r\n  </sd-section>\r\n  @if (component.properties?.variables?.length) {\r\n    <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"format_list_bulleted\">\r\n      @for (variable of component.properties?.variables; track variable.key) {\r\n        <attribute-input [form]=\"form\" [label]=\"variable.label\" [(model)]=\"variable.value\"></attribute-input>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: BuildQueries, selector: "build-queries", inputs: ["label", "queries", "components", "variables", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HtmlAttribute, isStandalone: true, selector: "html-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, outputs: { attributeChanges: "attributeChanges" }, ngImport: i0, template: "@if (!component.properties!.hidden) {\r\n  <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n    <attribute-select\r\n      label=\"D\u1EEF li\u1EC7u m\u1EABu\"\r\n      [(model)]=\"component.template\"\r\n      [items]=\"definitionHtmls\"\r\n      (sdChange)=\"onChangeDefinition($event)\"></attribute-select>\r\n    <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\"></attribute-input>\r\n    <attribute-textarea [form]=\"form\" label=\"N\u1ED9i dung\" [(model)]=\"component.content\"></attribute-textarea>\r\n    @if (component.properties?.queries?.length) {\r\n      <build-queries\r\n        label=\"\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n\"\r\n        [queries]=\"component.properties?.queries\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\" \r\n        [(model)]=\"component.properties!.query\"></build-queries>\r\n    }\r\n  </sd-section>\r\n  @if (component.properties?.variables?.length) {\r\n    <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"format_list_bulleted\">\r\n      @for (variable of component.properties?.variables; track variable.key) {\r\n        <attribute-input [form]=\"form\" [label]=\"variable.label\" [(model)]=\"variable.value\"></attribute-input>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeTextarea, selector: "attribute-textarea", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: BuildQueries, selector: "build-queries", inputs: ["label", "queries", "components", "variables", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HtmlAttribute, decorators: [{
             type: Component,
@@ -5240,7 +5237,7 @@ class AttributeParameter {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeParameter, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeParameter, isStandalone: true, selector: "attribute-parameter", inputs: { components: "components", label: "label", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n    <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n  </div>\r\n</div>\r\n<sd-modal title=\"G\u00E1n gi\u00E1 tr\u1ECB Tham s\u1ED1\" width=\"500px\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (item of items; track item.id; let idx = $index) {\r\n      <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n        <sd-input label=\"T\u00EAn tham s\u1ED1\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.key\" required hideInlineError></sd-input>\r\n        <sd-input label=\"Gi\u00E1 tr\u1ECB t\u01B0\u01A1ng \u1EE9ng\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.value\" required hideInlineError></sd-input>\r\n        <div style=\"width: 32px; min-width: 32px\">\r\n            <sd-button\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(idx)\"\r\n              size=\"sm\"\r\n              class=\"p-0\"\r\n            ></sd-button>\r\n          </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeParameter, isStandalone: true, selector: "attribute-parameter", inputs: { components: "components", label: "label", _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center py-4\">\r\n  @if (label) {\r\n    <div class=\"T14R\" style=\"flex: 1\">{{ label }}</div>\r\n  }\r\n  <div style=\"width: 200px\" class=\"d-flex align-items-center\">\r\n    <a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{ queryString }}</a>\r\n  </div>\r\n</div>\r\n<sd-modal title=\"G\u00E1n gi\u00E1 tr\u1ECB Tham s\u1ED1\" width=\"500px\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm tr\u01B0\u1EDDng\" color=\"primary\" (click)=\"addField()\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (item of items; track item.id; let idx = $index) {\r\n      <div class=\"d-flex align-items-center py-8\" style=\"gap: 8px\">\r\n        <sd-input label=\"T\u00EAn tham s\u1ED1\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.key\" required hideInlineError></sd-input>\r\n        <sd-input label=\"Gi\u00E1 tr\u1ECB t\u01B0\u01A1ng \u1EE9ng\" [form]=\"form\" style=\"flex: 1\" [(model)]=\"item.value\" required hideInlineError></sd-input>\r\n        <div style=\"width: 32px; min-width: 32px\">\r\n            <sd-button\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(idx)\"\r\n              size=\"sm\"\r\n              class=\"p-0\"\r\n            ></sd-button>\r\n          </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeParameter, decorators: [{
             type: Component,
@@ -5327,7 +5324,7 @@ class UploadAttribute {
                 ?.filter(val => !!val) || [];
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UploadAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: UploadAttribute, isStandalone: true, selector: "upload-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"Lo\u1EA1i\"\r\n    [(model)]=\"component.properties!.type\"\r\n    [items]=\"[\r\n      { value: 'file', display: 'T\u1EC7p' },\r\n      { value: 'image', display: '\u1EA2nh' }\r\n    ]\"></attribute-select>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input-number label=\"SL t\u1EC7p/\u1EA3nh t\u1ED1i \u0111a\" [(model)]=\"component.properties!.max\"></attribute-input-number>\r\n    <attribute-input-number label=\"Dung l\u01B0\u1EE3ng (Mb)\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\r\n    @if (component.properties!.type === 'file') {\r\n      <attribute-input label=\"\u0110\u1ECBnh d\u1EA1ng (VD: png,jpg ...)\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\r\n    }\r\n    @if (component.properties!.type === 'image') {\r\n      <attribute-select label=\"Ngu\u1ED3n (mobile)\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n    <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"component.properties!.args\"></attribute-parameter>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: UploadAttribute, isStandalone: true, selector: "upload-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n  <attribute-select\r\n    label=\"Lo\u1EA1i\"\r\n    [(model)]=\"component.properties!.type\"\r\n    [items]=\"[\r\n      { value: 'file', display: 'T\u1EC7p' },\r\n      { value: 'image', display: '\u1EA2nh' }\r\n    ]\"></attribute-select>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n    <attribute-input-number label=\"SL t\u1EC7p/\u1EA3nh t\u1ED1i \u0111a\" [(model)]=\"component.properties!.max\"></attribute-input-number>\r\n    <attribute-input-number label=\"Dung l\u01B0\u1EE3ng (Mb)\" [(model)]=\"component.properties!.maxSize\"></attribute-input-number>\r\n    @if (component.properties!.type === 'file') {\r\n      <attribute-input label=\"\u0110\u1ECBnh d\u1EA1ng (VD: png,jpg ...)\" [model]=\"extension\" (modelChange)=\"onChangeExtension($event)\"></attribute-input>\r\n    }\r\n    @if (component.properties!.type === 'image') {\r\n      <attribute-select label=\"Ngu\u1ED3n (mobile)\" [(model)]=\"component.properties!.source\" [items]=\"sources\"></attribute-select>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n    <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"component.properties!.args\"></attribute-parameter>\r\n  </sd-section>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeInputNumber, selector: "attribute-input-number", inputs: ["label", "disabled", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UploadAttribute, decorators: [{
             type: Component,
@@ -5466,7 +5463,7 @@ class AttributeTable {
         this.modal?.close();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeTable, deps: [{ token: SD_WORKFLOW_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeTable, isStandalone: true, selector: "attribute-table", inputs: { components: "components", variables: "variables", _columnsKey: ["columnsKey", "_columnsKey"], _columns: ["columns", "_columns"] }, outputs: { columnsKeyChange: "columnsKeyChange", columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (tables.length) {\r\n    <!-- <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u c\u1ED9t</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnsKey\"\r\n        [items]=\"tables\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeColumnsKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div> -->\r\n    <sd-autocomplete\r\n        class=\"py-8\"\r\n        label=\"D\u1EEF li\u1EC7u c\u1ED9t\"\r\n        [(model)]=\"columnsKey\"\r\n        [items]=\"tables\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeColumnsKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n  }\r\n  @if (!columnsKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">Danh s\u00E1ch c\u1ED9t</div>\r\n      @for (item of columns; track item.key; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-4\" style=\"gap: 4px; justify-content: space-between\">\r\n          <div class=\"d-flex flex-column\">\r\n            <sd-label [label]=\"item.label\" [required]=\"item.validate?.required\"></sd-label>\r\n            <div class=\"T12R text-secondary\">{{ item.key }}</div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px\">\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'edit'\" (click)=\"editColumn(idx)\"></mat-icon>\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'cancel'\" (click)=\"removeColumn(idx)\"></mat-icon>\r\n          </div>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm c\u1ED9t\" (click)=\"addColumn()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh c\u1ED9t\" width=\"600px\">\r\n  @if (column) {\r\n    <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n      <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"column.key\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"T\u00EAn c\u1ED9t\" [(model)]=\"column.label\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"Chi\u1EC1u r\u1ED9ng\" [(model)]=\"column.width\"></attribute-input>\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"column.validate!.required\"></attribute-switch>\r\n      <attribute-select [form]=\"form\" label=\"Lo\u1EA1i d\u1EEF li\u1EC7u\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\r\n    </sd-section>\r\n    @if (column.type === 'boolean') {\r\n      <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"info\">\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi TRUE\" [(model)]=\"column.displayOnTrue\"></attribute-input>\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi FALSE\" [(model)]=\"column.displayOnFalse\"></attribute-input>\r\n      </sd-section>\r\n    } @else if (column.type === 'values') {\r\n      <attribute-selection\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [component]=\"column\"\r\n        [(valuesKey)]=\"column.valuesKey\"\r\n        [(values)]=\"column.values\"></attribute-selection>\r\n    } @else if (column.type === 'file' || column.type === 'image') {\r\n      <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n        <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\r\n      </sd-section>\r\n    }\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"L\u01B0u\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AttributeTable, isStandalone: true, selector: "attribute-table", inputs: { components: "components", variables: "variables", _columnsKey: ["columnsKey", "_columnsKey"], _columns: ["columns", "_columns"] }, outputs: { columnsKeyChange: "columnsKeyChange", columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"D\u1EEF li\u1EC7u\" icon=\"format_list_bulleted\">\r\n  @if (tables.length) {\r\n    <!-- <div class=\"d-flex align-items-center py-4\">\r\n      <div class=\"T14M\" style=\"flex: 1\">D\u1EEF li\u1EC7u c\u1ED9t</div>\r\n      <sd-autocomplete\r\n        style=\"width: 200px\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnsKey\"\r\n        [items]=\"tables\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeColumnsKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n    </div> -->\r\n    <sd-autocomplete\r\n        class=\"py-8\"\r\n        label=\"D\u1EEF li\u1EC7u c\u1ED9t\"\r\n        [(model)]=\"columnsKey\"\r\n        [items]=\"tables\"\r\n        valueField=\"value\"\r\n        displayField=\"display\"\r\n        (sdChange)=\"onChangeColumnsKey($event)\"\r\n        hideInlineError></sd-autocomplete>\r\n  }\r\n  @if (!columnsKey) {\r\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\r\n      <div class=\"T14M\">Danh s\u00E1ch c\u1ED9t</div>\r\n      @for (item of columns; track item.key; let idx = $index) {\r\n        <div class=\"d-flex align-items-center py-4\" style=\"gap: 4px; justify-content: space-between\">\r\n          <div class=\"d-flex flex-column\">\r\n            <sd-label [label]=\"item.label\" [required]=\"item.validate?.required\"></sd-label>\r\n            <div class=\"T12R text-secondary\">{{ item.key }}</div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px\">\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'edit'\" (click)=\"editColumn(idx)\"></mat-icon>\r\n            <mat-icon class=\"text-secondary\" style=\"cursor: pointer\" [fontIcon]=\"'cancel'\" (click)=\"removeColumn(idx)\"></mat-icon>\r\n          </div>\r\n        </div>\r\n      }\r\n      <sd-button prefixIcon=\"add\" title=\"Th\u00EAm c\u1ED9t\" (click)=\"addColumn()\" color=\"primary\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-section>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh c\u1ED9t\" width=\"600px\">\r\n  @if (column) {\r\n    <sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n      <attribute-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"column.key\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"T\u00EAn c\u1ED9t\" [(model)]=\"column.label\"></attribute-input>\r\n      <attribute-input [form]=\"form\" label=\"Chi\u1EC1u r\u1ED9ng\" [(model)]=\"column.width\"></attribute-input>\r\n      <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"column.validate!.required\"></attribute-switch>\r\n      <attribute-select [form]=\"form\" label=\"Lo\u1EA1i d\u1EEF li\u1EC7u\" [(model)]=\"column.type\" [items]=\"types\"></attribute-select>\r\n    </sd-section>\r\n    @if (column.type === 'boolean') {\r\n      <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"info\">\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi TRUE\" [(model)]=\"column.displayOnTrue\"></attribute-input>\r\n        <attribute-input [form]=\"form\" label=\"Hi\u1EC3n th\u1ECB khi FALSE\" [(model)]=\"column.displayOnFalse\"></attribute-input>\r\n      </sd-section>\r\n    } @else if (column.type === 'values') {\r\n      <attribute-selection\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [component]=\"column\"\r\n        [(valuesKey)]=\"column.valuesKey\"\r\n        [(values)]=\"column.values\"></attribute-selection>\r\n    } @else if (column.type === 'file' || column.type === 'image') {\r\n      <sd-section class=\"mt-8\" title=\"Tham s\u1ED1\" icon=\"settings\">\r\n        <attribute-parameter label=\"G\u00E1n tham s\u1ED1\" [components]=\"components\" [(model)]=\"column!.args\"></attribute-parameter>\r\n      </sd-section>\r\n    }\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"L\u01B0u\" (click)=\"onConfirm()\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: AttributeSelection, selector: "attribute-selection", inputs: ["components", "variables", "component", "valuesKey", "values"], outputs: ["valuesKeyChange", "valuesChange", "sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSelect, selector: "attribute-select", inputs: ["form", "label", "disabled", "multiple", "items", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeParameter, selector: "attribute-parameter", inputs: ["components", "label", "model"], outputs: ["modelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AttributeTable, decorators: [{
             type: Component,
@@ -5561,7 +5558,7 @@ class TableAttribute {
         this.#changes.next();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableAttribute, deps: [{ token: i0.ChangeDetectorRef }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableAttribute, isStandalone: true, selector: "table-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-table\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [(columnsKey)]=\"component.columnsKey\"\r\n    [(columns)]=\"component.columns\"\r\n    (columnsKeyChange)=\"onChanges()\"\r\n    (columnsChange)=\"onChanges()\"></attribute-table>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTable, selector: "attribute-table", inputs: ["components", "variables", "columnsKey", "columns"], outputs: ["columnsKeyChange", "columnsChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableAttribute, isStandalone: true, selector: "table-attribute", inputs: { components: "components", variables: "variables", _component: ["component", "_component"] }, ngImport: i0, template: "<sd-section class=\"mt-8\" title=\"Th\u00F4ng tin chung\" icon=\"info\">\r\n  <attribute-template [component]=\"component\" (sdChange)=\"onChangeTemplate($event)\"></attribute-template>\r\n  <attribute-input label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"component.key\" [disabled]=\"!!component.template\"></attribute-input>\r\n  <attribute-input [form]=\"form\" label=\"T\u00EAn hi\u1EC3n th\u1ECB\" [(model)]=\"component.label\"></attribute-input>\r\n</sd-section>\r\n\r\n@if (!component.properties!.hidden && !component.properties!.viewed) {\r\n  <sd-section class=\"mt-8\" title=\"Hi\u1EC3n th\u1ECB\" icon=\"visibility\">\r\n    <attribute-switch label=\"V\u00F4 hi\u1EC7u\" [(model)]=\"component.disabled\"></attribute-switch>\r\n    <attribute-expression\r\n      label=\"Hi\u1EC3n th\u1ECB khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.visibleWhenExpression\"></attribute-expression>\r\n    <attribute-expression\r\n      label=\"\u1EA8n khi\"\r\n      [components]=\"components\"\r\n      [variables]=\"variables\"\r\n      [(model)]=\"component.properties!.hiddenWhenExpression\"></attribute-expression>\r\n    @if (!component.disabled) {\r\n      <attribute-expression\r\n        label=\"V\u00F4 hi\u1EC7u khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.disabledWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <sd-section class=\"mt-8\" title=\"R\u00E0ng bu\u1ED9c\" icon=\"verified_user\">\r\n    <attribute-switch [form]=\"form\" label=\"B\u1EAFt bu\u1ED9c\" [(model)]=\"component.validate!.required\"></attribute-switch>\r\n    @if (!component.validate!.required) {\r\n      <attribute-expression\r\n        label=\"B\u1EAFt bu\u1ED9c khi\"\r\n        [components]=\"components\"\r\n        [variables]=\"variables\"\r\n        [(model)]=\"component.properties!.requiredWhenExpression\"></attribute-expression>\r\n    }\r\n  </sd-section>\r\n  <attribute-table\r\n    [components]=\"components\"\r\n    [variables]=\"variables\"\r\n    [(columnsKey)]=\"component.columnsKey\"\r\n    [(columns)]=\"component.columns\"\r\n    (columnsKeyChange)=\"onChanges()\"\r\n    (columnsChange)=\"onChanges()\"></attribute-table>\r\n}\r\n", dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: AttributeTemplate, selector: "attribute-template", inputs: ["component"], outputs: ["sdChange"] }, { kind: "component", type: AttributeInput, selector: "attribute-input", inputs: ["form", "label", "disabled", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: AttributeSwitch, selector: "attribute-switch", inputs: ["form", "label", "model"], outputs: ["modelChange"] }, { kind: "component", type: AttributeTable, selector: "attribute-table", inputs: ["components", "variables", "columnsKey", "columns"], outputs: ["columnsKeyChange", "columnsChange"] }, { kind: "component", type: AttributeExpression, selector: "attribute-expression", inputs: ["components", "variables", "label", "model"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableAttribute, decorators: [{
             type: Component,
@@ -5699,7 +5696,7 @@ class ConfigureValidationComponent {
         this.modal?.close();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigureValidationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_WORKFLOW_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfigureValidationComponent, isStandalone: true, selector: "configure-validation", outputs: { accept: "accept" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal title=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c l\u1ED7i/c\u1EA3nh b\u00E1o\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (validation of validations; track $index; let idx = $index) {\r\n    <div class=\"mat-elevation-z2 position-relative p-8 mb-16\" style=\"border-radius: 8px;\">\r\n      <div class=\"row mx-0\">\r\n        <sd-select\r\n          class=\"col-3\"\r\n          label=\"Lo\u1EA1i th\u00F4ng b\u00E1o\"\r\n          [(model)]=\"validation.alert\"\r\n          [items]=\"alerts\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          required></sd-select>\r\n        @if (validation.type === 'expression') {\r\n          <sd-input class=\"col-9\" [form]=\"form\" label=\"Th\u00F4ng b\u00E1o hi\u1EC3n th\u1ECB\" [(model)]=\"validation.message\" required></sd-input>\r\n          <expression-builder class=\"col-12\" label=\"Bi\u1EC3u th\u1EE9c \u0111i\u1EC1u ki\u1EC7n\" [(model)]=\"validation.expression\" [attributes]=\"attributes\"></expression-builder>\r\n        } @else if (validation.type === 'function') {\r\n          <sd-select\r\n            class=\"col-9\"\r\n            [form]=\"form\"\r\n            [(model)]=\"validation.code\"\r\n            [items]=\"functions\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required></sd-select>\r\n        }\r\n        <mat-icon class=\"c-close-icon\" (click)=\"removaValidation(idx)\">delete</mat-icon>\r\n        <!-- <sd-button\r\n          \r\n          prefixIcon=\"delete\"\r\n          (click)=\"removaValidation(idx)\"\r\n          color=\"error\"\r\n          type=\"link\"></sd-button> -->\r\n      </div>\r\n    </div>\r\n  }\r\n  <sd-button title=\"Th\u00EAm x\u00E1c th\u1EF1c\" [matMenuTriggerFor]=\"menu\" prefixIcon=\"add\" color=\"primary\" type=\"link\"></sd-button>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <button (click)=\"addValidation('expression')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"warning\"></mat-icon> -->\r\n      <span>Bi\u1EC3u th\u1EE9c</span>\r\n    </button>\r\n    <button (click)=\"addValidation('function')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"error\"></mat-icon> -->\r\n      <span>Ph\u01B0\u01A1ng th\u1EE9c s\u1EB5n c\u00F3</span>\r\n    </button>\r\n  </mat-menu>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateValidations()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-close-icon{margin-left:auto;font-size:16px;width:16px;height:16px;cursor:pointer;border-radius:50%;color:var(--sd-error);top:4px;right:4px;position:absolute}.c-close-icon:hover{background-color:var(--sd-black200)}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$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: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: ExpressionBuilderComponent, selector: "expression-builder", inputs: ["label", "attributes", "model"], outputs: ["modelChange", "sdChange", "edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfigureValidationComponent, isStandalone: true, selector: "configure-validation", outputs: { accept: "accept" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal title=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c l\u1ED7i/c\u1EA3nh b\u00E1o\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (validation of validations; track $index; let idx = $index) {\r\n    <div class=\"mat-elevation-z2 position-relative p-8 mb-16\" style=\"border-radius: 8px;\">\r\n      <div class=\"row mx-0\">\r\n        <sd-select\r\n          class=\"col-3\"\r\n          label=\"Lo\u1EA1i th\u00F4ng b\u00E1o\"\r\n          [(model)]=\"validation.alert\"\r\n          [items]=\"alerts\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          required></sd-select>\r\n        @if (validation.type === 'expression') {\r\n          <sd-input class=\"col-9\" [form]=\"form\" label=\"Th\u00F4ng b\u00E1o hi\u1EC3n th\u1ECB\" [(model)]=\"validation.message\" required></sd-input>\r\n          <expression-builder class=\"col-12\" label=\"Bi\u1EC3u th\u1EE9c \u0111i\u1EC1u ki\u1EC7n\" [(model)]=\"validation.expression\" [attributes]=\"attributes\"></expression-builder>\r\n        } @else if (validation.type === 'function') {\r\n          <sd-select\r\n            class=\"col-9\"\r\n            [form]=\"form\"\r\n            [(model)]=\"validation.code\"\r\n            [items]=\"functions\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            required></sd-select>\r\n        }\r\n        <mat-icon class=\"c-close-icon\" (click)=\"removaValidation(idx)\">delete</mat-icon>\r\n        <!-- <sd-button\r\n          \r\n          prefixIcon=\"delete\"\r\n          (click)=\"removaValidation(idx)\"\r\n          color=\"error\"\r\n          type=\"link\"></sd-button> -->\r\n      </div>\r\n    </div>\r\n  }\r\n  <sd-button title=\"Th\u00EAm x\u00E1c th\u1EF1c\" [matMenuTriggerFor]=\"menu\" prefixIcon=\"add\" color=\"primary\" type=\"link\"></sd-button>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <button (click)=\"addValidation('expression')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"warning\"></mat-icon> -->\r\n      <span>Bi\u1EC3u th\u1EE9c</span>\r\n    </button>\r\n    <button (click)=\"addValidation('function')\" mat-menu-item type=\"button\">\r\n      <!-- <mat-icon fontIcon=\"error\"></mat-icon> -->\r\n      <span>Ph\u01B0\u01A1ng th\u1EE9c s\u1EB5n c\u00F3</span>\r\n    </button>\r\n  </mat-menu>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateValidations()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-close-icon{margin-left:auto;font-size:16px;width:16px;height:16px;cursor:pointer;border-radius:50%;color:var(--sd-error);top:4px;right:4px;position:absolute}.c-close-icon:hover{background-color:var(--sd-black200)}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: ExpressionBuilderComponent, selector: "expression-builder", inputs: ["label", "attributes", "model"], outputs: ["modelChange", "sdChange", "edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigureValidationComponent, decorators: [{
             type: Component,
@@ -6137,12 +6134,12 @@ class SdFormBuilder extends SdBaseSecureComponent {
             this.notifyService.success('Submit success');
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFormBuilder, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.SdNotifyService }, { token: i1$5.SdConfirmService }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdFormBuilder, isStandalone: true, selector: "sd-form-builder", inputs: { _formGeneric: ["formGeneric", "_formGeneric"] }, viewQueries: [{ propertyName: "popupViewJSON", first: true, predicate: ["popupViewJSON"], descendants: true }, { propertyName: "popupConfigureVariables", first: true, predicate: ["popupConfigureVariables"], descendants: true }, { propertyName: "configureValidation", first: true, predicate: ConfigureValidationComponent, descendants: true }, { propertyName: "formRender", first: true, predicate: SdFormRender, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex form-editor\">\r\n  <div class=\"d-flex flex-column form-menu\">\r\n    <div class=\"c-header\">Components</div>\r\n    <div class=\"component-container\" style=\"flex: 1\">\r\n      <div class=\"form-editor-group\" cdkDropList [cdkDropListData]=\"formBuilderComponents\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n        @for (formBuilderComponent of formBuilderComponents; track formBuilderComponent.type) {\r\n          <div cdkDrag class=\"form-item\" (click)=\"addComponent(formBuilderComponent)\" aria-hidden=\"true\">\r\n            <div class=\"c-form-item\">\r\n              <span [innerHtml]=\"formBuilderComponent.icon | sdSafeHtml\"></span>\r\n              <div class=\"title\">\r\n                {{ formBuilderComponent.name }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-content\">\r\n    <div class=\"c-header d-flex align-items-center justify-content-between\">\r\n      <div>B\u1ED1 c\u1EE5c</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n        <mat-icon matTooltip=\"Xem JSON\" fontIcon=\"code\" (click)=\"viewJSON()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" fontIcon=\"scatter_plot\" (click)=\"configureVariables()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c c\u1EA3nh b\u00E1o/l\u1ED7i\" fontIcon=\"error\" (click)=\"openConfigureValidation()\"></mat-icon>\r\n        <mat-icon\r\n          [matTooltip]=\"isPreview ? 'Tr\u1EDF v\u1EC1 thi\u1EBFt k\u1EBF' : 'Xem th\u1EED'\"\r\n          [fontIcon]=\"isPreview ? 'stop_circle' : 'play_circle'\"\r\n          (click)=\"isPreview = !isPreview\"></mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"p-12 components\" style=\"flex: 1; overflow-y: auto\" id=\"frmComponent\">\r\n      @if (isPreview) {\r\n        <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n        <sd-button title=\"Validate\" (click)=\"onValidate()\"></sd-button>\r\n      } @else {\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          class=\"listY\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\r\n              id=\"row_{{ row.rowIndex }}\"\r\n              class=\"row-item\"\r\n              aria-hidden=\"true\">\r\n              <div class=\"btn-drag-row-item\"><mat-icon matTooltip=\"K\u00E9o l\u00EAn / xu\u1ED1ng\">drag_indicator</mat-icon></div>\r\n              <div\r\n                class=\"c-row-item\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <div\r\n                    cdkDrag\r\n                    [id]=\"item.id\"\r\n                    class=\"component-item column-{{ item.layout?.columns || 12 }}\"\r\n                    [class.active]=\"item.id === selectedComponent?.id\"\r\n                    (click)=\"selectComponent(item)\"\r\n                    (clickOutside)=\"onClickedOutside($event)\"\r\n                    (cdkDragStarted)=\"dragStartComponentItem($event)\"\r\n                    (cdkDragEnded)=\"dragEndComponentItem($event)\"\r\n                    aria-hidden=\"true\">\r\n                    <div class=\"c-component-item\" [class.c-hidden]=\"item.properties?.hidden\">\r\n                      <div class=\"c-actions\">\r\n                        @if (item.type !== 'group') {\r\n                          <mat-icon\r\n                            [matTooltip]=\"item.properties?.viewed ? 'B\u1ECF ch\u1EC9 xem' : 'Ch\u1EC9 xem'\"\r\n                            (click)=\"onChangeViewed(item)\"\r\n                            fontSet=\"material-icons-outlined\"\r\n                            style=\"font-size: 16px; cursor: pointer\"\r\n                            [class.text-warning]=\"item.properties?.viewed\">\r\n                            edit_off\r\n                          </mat-icon>\r\n                        }\r\n                        <mat-icon\r\n                          matTooltip=\"Nh\u00E2n b\u1EA3n\"\r\n                          (click)=\"onDuplicate(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\">\r\n                          content_copy\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          [matTooltip]=\"item.properties?.hidden ? 'Hi\u1EC7n' : '\u1EA8n'\"\r\n                          (click)=\"onChangeHidden(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          [class.text-warning]=\"item.properties?.hidden\">\r\n                          visibility_off\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          matTooltip=\"X\u00F3a\"\r\n                          (click)=\"removeComponent(item.id)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          class=\"text-error\">\r\n                          delete\r\n                        </mat-icon>\r\n                      </div>\r\n                      @if (item.type === 'textfield') {\r\n                        <textfield-control [component]=\"item\"></textfield-control>\r\n                      } @else if (item.type === 'textarea') {\r\n                        <textarea-control [component]=\"item\"></textarea-control>\r\n                      } @else if (item.type === 'chip-string') {\r\n                        <chip-string-control [component]=\"item\"></chip-string-control>\r\n                      } @else if (item.type === 'chip-calendar') {\r\n                        <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n                      } @else if (item.type === 'number') {\r\n                        <number-control [component]=\"item\"></number-control>\r\n                      } @else if (item.type === 'datetime') {\r\n                        <datetime-control [component]=\"item\"></datetime-control>\r\n                      } @else if (item.type === 'select') {\r\n                        <select-control [component]=\"item\"></select-control>\r\n                      } @else if (item.type === 'radio') {\r\n                        <radio-control [component]=\"item\"></radio-control>\r\n                      } @else if (item.type === 'checkbox') {\r\n                        <checkbox-control [component]=\"item\"></checkbox-control>\r\n                      } @else if (item.type === 'html') {\r\n                        <html-control [component]=\"item\" #html></html-control>\r\n                      } @else if (item.type === 'upload') {\r\n                        <upload-control [component]=\"item\"></upload-control>\r\n                      } @else if (item.type === 'table') {\r\n                        <table-control [component]=\"item\"></table-control>\r\n                      }\r\n                      <div class=\"c-item-backdrop\"></div>\r\n                    </div>\r\n                    <div cdkDropList cdkDropListOrientation=\"horizontal\">\r\n                      <div\r\n                        cdkDrag\r\n                        (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                        (cdkDragEnded)=\"dragEndChangeSizeControl($event)\"\r\n                        class=\"c-bar-resize-right\"\r\n                        matTooltip=\"Co d\u00E3n\"></div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-attributes\">\r\n    <div class=\"c-header\">Thu\u1ED9c t\u00EDnh</div>\r\n    @if (selectedComponent) {\r\n      <div class=\"attributes\" style=\"flex: 1\" aria-hidden=\"true\">\r\n        @if (selectedComponent.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textfield-attribute>\r\n        } @else if (selectedComponent.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textarea-attribute>\r\n        } @else if (selectedComponent.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></chip-string-attribute>\r\n        } @else if (selectedComponent.type === 'chip-calendar') {\r\n          <chip-calendar-attribute\r\n            [components]=\"components\"\r\n            [variables]=\"variables\"\r\n            [component]=\"selectedComponent\"></chip-calendar-attribute>\r\n        } @else if (selectedComponent.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></number-attribute>\r\n        } @else if (selectedComponent.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></datetime-attribute>\r\n        } @else if (selectedComponent.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></select-attribute>\r\n        } @else if (selectedComponent.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></radio-attribute>\r\n        } @else if (selectedComponent.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></checkbox-attribute>\r\n        } @else if (selectedComponent.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></html-attribute>\r\n        } @else if (selectedComponent.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></upload-attribute>\r\n        } @else if (selectedComponent.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></table-attribute>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" label=\"Nh\u00E3n hi\u1EC3n th\u1ECB\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">Th\u00EAm bi\u1EBFn</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host::ng-deep .svg{width:40px}:host::ng-deep .mat-form-field.sd-sm.mat-form-field-appearance-outline .mat-form-field-infix input.mat-input-element{margin-top:7px!important}::ng-deep .component-item.cdk-drag-preview .c-component-item{display:none}::ng-deep .component-item.cdk-drag-dragging,::ng-deep .row-item.cdk-drag-dragging{box-shadow:0 4px 8px #0003;border:2px #0e7cfa dashed}::ng-deep .row-item.cdk-drag-preview .c-row-item,::ng-deep .row-item.cdk-drag-preview .btn-drag-row-item{display:none}::ng-deep .form-item.cdk-drag-preview{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item .svg{width:40px}.form-editor{width:100%;height:100%}.form-editor .material-icons{color:#5f6368!important}.form-editor .material-icons:hover{color:#2626b4!important;cursor:pointer!important}.form-editor .c-header{font-weight:500;padding:5px 10px;background-color:#ebebeb;border-bottom:1px solid #d3d3d3;text-transform:uppercase}.form-editor .c-header:last-child{border-right:0!important}.form-editor .c-header a{font-size:12px}.form-editor .form-menu{width:120px}.form-editor .form-menu .component-container{overflow-y:hidden;background:#f6f8fc}.form-editor .form-menu .component-container:hover{overflow-y:auto!important}.form-editor .form-menu .form-editor-group{padding:5px 10px;display:flex;align-items:center;flex-wrap:wrap}.form-editor .form-menu .form-editor-group .form-item{height:68px;display:flex;align-items:center;justify-content:center;font-size:11px;-webkit-user-select:none;user-select:none;color:#333;background:#fff;border:1px solid transparent;width:100px;margin:6px}.form-editor .form-menu .form-editor-group .form-item:hover{background-color:#e7e7e7;border-color:#878b8f;cursor:pointer}.form-editor .form-menu .form-editor-group .form-item .c-form-item{text-align:center}.form-editor .form-menu .form-editor-group .form-item .c-form-item>div.title,.form-editor .form-menu .form-editor-group .form-item .c-form-item>span{text-align:center;white-space:nowrap;font-weight:500}.form-editor .form-content{flex:1;border-right:1px solid #d3d3d3;border-left:1px solid #d3d3d3}.form-editor .form-content .components{background:#fff}.form-editor .form-content .components .row-item{position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.form-editor .form-content .components .row-item:hover{outline:1px dashed #bbb;border-radius:8px}.form-editor .form-content .components .row-item:hover .btn-drag-row-item{display:grid}.form-editor .form-content .components .row-item .btn-drag-row-item{display:none;position:absolute;top:0;left:-12px;height:100%;z-index:2;place-items:center;cursor:grab}.form-editor .form-content .components .row-item .btn-drag-row-item mat-icon{font-size:24px;height:24px;width:24px;box-shadow:0 1px 2px #0000001a;background:#fff}.form-editor .form-content .components .component-item{padding:4px 8px;border:2px dashed transparent;position:relative;min-height:28px;cursor:grab;transition:transform .2s ease,box-shadow .2s ease;display:inline-block;margin:4px;border-radius:8px;vertical-align:bottom}.form-editor .form-content .components .component-item:active{cursor:grabbing;box-shadow:0 4px 8px #0003}.form-editor .form-content .components .component-item:hover{border:2px #0e7cfa dashed}.form-editor .form-content .components .component-item:hover .c-actions{display:flex;flex-direction:row;gap:4px}.form-editor .form-content .components .component-item:hover .c-bar-resize-right{display:block;cursor:w-resize}.form-editor .form-content .components .component-item:hover .c-bar-resize-right.disabled{display:none}.form-editor .form-content .components .component-item .c-component-item{overflow:hidden}.form-editor .form-content .components .component-item .c-actions{display:none;position:absolute;right:4px;z-index:2}.form-editor .form-content .components .component-item .c-bar-resize-right{display:none;width:8px;height:80%;position:absolute;top:10%;right:-5px;outline:2px #0e7cfa solid;border-radius:4px;color:#fff;background:#fff;z-index:2}.form-editor .form-content .components .component-item .c-item-backdrop{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}.form-editor .form-content .components .active{border:2px #0e7cfa solid;outline:1px #0e7cfa solid}.form-editor .form-content .components .column-2{width:calc(16.6666666667% - 8px)}.form-editor .form-content .components .column-3{width:calc(25% - 8px)}.form-editor .form-content .components .column-4{width:calc(33.3333333333% - 8px)}.form-editor .form-content .components .column-5{width:calc(41.6666666667% - 8px)}.form-editor .form-content .components .column-6{width:calc(50% - 8px)}.form-editor .form-content .components .column-7{width:calc(58.3333333333% - 8px)}.form-editor .form-content .components .column-8{width:calc(66.6666666667% - 8px)}.form-editor .form-content .components .column-9{width:calc(75% - 8px)}.form-editor .form-content .components .column-10{width:calc(83.3333333333% - 8px)}.form-editor .form-content .components .column-11{width:calc(91.6666666667% - 8px)}.form-editor .form-content .components .column-12{width:calc(100% - 8px)}.form-editor .form-attributes{width:300px}.form-editor .form-attributes .attributes{overflow-y:auto!important;padding:0 10px;background:#f6f8fc}.form-editor .form-attributes .attributes .group-attribute .title-group{font-weight:500;padding:5px 0;position:relative;cursor:pointer;margin-top:8px}.form-editor .form-attributes .attributes .group-attribute .title-group span{vertical-align:middle;display:inline-block}.form-editor .form-attributes .attributes .group-attribute .title-group mat-icon{vertical-align:middle;position:absolute;right:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute{display:grid;margin-bottom:10px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute label{font-size:12px;font-weight:400;margin:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute input,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute select,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute textarea{border:1px solid #d3d3d3;height:30px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options{padding:5px 0;border-bottom:1px solid #d3d3d3}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options input{width:100%;margin-bottom:5px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options .material-icons{padding-top:22px}.preview-container{margin:0 -24px;position:relative}.preview-container .header-preview{border-bottom:1px solid #eee;padding:10px;font-size:14px;font-weight:500;position:sticky;top:0;background-color:#fff;z-index:9999}.preview-container .header-preview .material-icons:hover{color:#5f6368;cursor:pointer}.preview-container .content{padding:10px}.c-hidden{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFormBuilder, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$6.SdNotifyService }, { token: i1$6.SdConfirmService }, { token: BuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdFormBuilder, isStandalone: true, selector: "sd-form-builder", inputs: { _formGeneric: ["formGeneric", "_formGeneric"] }, viewQueries: [{ propertyName: "popupViewJSON", first: true, predicate: ["popupViewJSON"], descendants: true }, { propertyName: "popupConfigureVariables", first: true, predicate: ["popupConfigureVariables"], descendants: true }, { propertyName: "configureValidation", first: true, predicate: ConfigureValidationComponent, descendants: true }, { propertyName: "formRender", first: true, predicate: SdFormRender, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex form-editor\">\r\n  <div class=\"d-flex flex-column form-menu\">\r\n    <div class=\"c-header\">Components</div>\r\n    <div class=\"component-container\" style=\"flex: 1\">\r\n      <div class=\"form-editor-group\" cdkDropList [cdkDropListData]=\"formBuilderComponents\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n        @for (formBuilderComponent of formBuilderComponents; track formBuilderComponent.type) {\r\n          <div cdkDrag class=\"form-item\" (click)=\"addComponent(formBuilderComponent)\" aria-hidden=\"true\">\r\n            <div class=\"c-form-item\">\r\n              <span [innerHtml]=\"formBuilderComponent.icon | sdSafeHtml\"></span>\r\n              <div class=\"title\">\r\n                {{ formBuilderComponent.name }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-content\">\r\n    <div class=\"c-header d-flex align-items-center justify-content-between\">\r\n      <div>B\u1ED1 c\u1EE5c</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n        <mat-icon matTooltip=\"Xem JSON\" fontIcon=\"code\" (click)=\"viewJSON()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" fontIcon=\"scatter_plot\" (click)=\"configureVariables()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c c\u1EA3nh b\u00E1o/l\u1ED7i\" fontIcon=\"error\" (click)=\"openConfigureValidation()\"></mat-icon>\r\n        <mat-icon\r\n          [matTooltip]=\"isPreview ? 'Tr\u1EDF v\u1EC1 thi\u1EBFt k\u1EBF' : 'Xem th\u1EED'\"\r\n          [fontIcon]=\"isPreview ? 'stop_circle' : 'play_circle'\"\r\n          (click)=\"isPreview = !isPreview\"></mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"p-12 components\" style=\"flex: 1; overflow-y: auto\" id=\"frmComponent\">\r\n      @if (isPreview) {\r\n        <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n        <sd-button title=\"Validate\" (click)=\"onValidate()\"></sd-button>\r\n      } @else {\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          class=\"listY\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\r\n              id=\"row_{{ row.rowIndex }}\"\r\n              class=\"row-item\"\r\n              aria-hidden=\"true\">\r\n              <div class=\"btn-drag-row-item\"><mat-icon matTooltip=\"K\u00E9o l\u00EAn / xu\u1ED1ng\">drag_indicator</mat-icon></div>\r\n              <div\r\n                class=\"c-row-item\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <div\r\n                    cdkDrag\r\n                    [id]=\"item.id\"\r\n                    class=\"component-item column-{{ item.layout?.columns || 12 }}\"\r\n                    [class.active]=\"item.id === selectedComponent?.id\"\r\n                    (click)=\"selectComponent(item)\"\r\n                    (clickOutside)=\"onClickedOutside($event)\"\r\n                    (cdkDragStarted)=\"dragStartComponentItem($event)\"\r\n                    (cdkDragEnded)=\"dragEndComponentItem($event)\"\r\n                    aria-hidden=\"true\">\r\n                    <div class=\"c-component-item\" [class.c-hidden]=\"item.properties?.hidden\">\r\n                      <div class=\"c-actions\">\r\n                        @if (item.type !== 'group') {\r\n                          <mat-icon\r\n                            [matTooltip]=\"item.properties?.viewed ? 'B\u1ECF ch\u1EC9 xem' : 'Ch\u1EC9 xem'\"\r\n                            (click)=\"onChangeViewed(item)\"\r\n                            fontSet=\"material-icons-outlined\"\r\n                            style=\"font-size: 16px; cursor: pointer\"\r\n                            [class.text-warning]=\"item.properties?.viewed\">\r\n                            edit_off\r\n                          </mat-icon>\r\n                        }\r\n                        <mat-icon\r\n                          matTooltip=\"Nh\u00E2n b\u1EA3n\"\r\n                          (click)=\"onDuplicate(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\">\r\n                          content_copy\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          [matTooltip]=\"item.properties?.hidden ? 'Hi\u1EC7n' : '\u1EA8n'\"\r\n                          (click)=\"onChangeHidden(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          [class.text-warning]=\"item.properties?.hidden\">\r\n                          visibility_off\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          matTooltip=\"X\u00F3a\"\r\n                          (click)=\"removeComponent(item.id)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          class=\"text-error\">\r\n                          delete\r\n                        </mat-icon>\r\n                      </div>\r\n                      @if (item.type === 'textfield') {\r\n                        <textfield-control [component]=\"item\"></textfield-control>\r\n                      } @else if (item.type === 'textarea') {\r\n                        <textarea-control [component]=\"item\"></textarea-control>\r\n                      } @else if (item.type === 'chip-string') {\r\n                        <chip-string-control [component]=\"item\"></chip-string-control>\r\n                      } @else if (item.type === 'chip-calendar') {\r\n                        <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n                      } @else if (item.type === 'number') {\r\n                        <number-control [component]=\"item\"></number-control>\r\n                      } @else if (item.type === 'datetime') {\r\n                        <datetime-control [component]=\"item\"></datetime-control>\r\n                      } @else if (item.type === 'select') {\r\n                        <select-control [component]=\"item\"></select-control>\r\n                      } @else if (item.type === 'radio') {\r\n                        <radio-control [component]=\"item\"></radio-control>\r\n                      } @else if (item.type === 'checkbox') {\r\n                        <checkbox-control [component]=\"item\"></checkbox-control>\r\n                      } @else if (item.type === 'html') {\r\n                        <html-control [component]=\"item\" #html></html-control>\r\n                      } @else if (item.type === 'upload') {\r\n                        <upload-control [component]=\"item\"></upload-control>\r\n                      } @else if (item.type === 'table') {\r\n                        <table-control [component]=\"item\"></table-control>\r\n                      }\r\n                      <div class=\"c-item-backdrop\"></div>\r\n                    </div>\r\n                    <div cdkDropList cdkDropListOrientation=\"horizontal\">\r\n                      <div\r\n                        cdkDrag\r\n                        (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                        (cdkDragEnded)=\"dragEndChangeSizeControl($event)\"\r\n                        class=\"c-bar-resize-right\"\r\n                        matTooltip=\"Co d\u00E3n\"></div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-attributes\">\r\n    <div class=\"c-header\">Thu\u1ED9c t\u00EDnh</div>\r\n    @if (selectedComponent) {\r\n      <div class=\"attributes\" style=\"flex: 1\" aria-hidden=\"true\">\r\n        @if (selectedComponent.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textfield-attribute>\r\n        } @else if (selectedComponent.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textarea-attribute>\r\n        } @else if (selectedComponent.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></chip-string-attribute>\r\n        } @else if (selectedComponent.type === 'chip-calendar') {\r\n          <chip-calendar-attribute\r\n            [components]=\"components\"\r\n            [variables]=\"variables\"\r\n            [component]=\"selectedComponent\"></chip-calendar-attribute>\r\n        } @else if (selectedComponent.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></number-attribute>\r\n        } @else if (selectedComponent.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></datetime-attribute>\r\n        } @else if (selectedComponent.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></select-attribute>\r\n        } @else if (selectedComponent.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></radio-attribute>\r\n        } @else if (selectedComponent.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></checkbox-attribute>\r\n        } @else if (selectedComponent.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></html-attribute>\r\n        } @else if (selectedComponent.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></upload-attribute>\r\n        } @else if (selectedComponent.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></table-attribute>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" label=\"Nh\u00E3n hi\u1EC3n th\u1ECB\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">Th\u00EAm bi\u1EBFn</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host::ng-deep .svg{width:40px}:host::ng-deep .mat-form-field.sd-sm.mat-form-field-appearance-outline .mat-form-field-infix input.mat-input-element{margin-top:7px!important}::ng-deep .component-item.cdk-drag-preview .c-component-item{display:none}::ng-deep .component-item.cdk-drag-dragging,::ng-deep .row-item.cdk-drag-dragging{box-shadow:0 4px 8px #0003;border:2px #0e7cfa dashed}::ng-deep .row-item.cdk-drag-preview .c-row-item,::ng-deep .row-item.cdk-drag-preview .btn-drag-row-item{display:none}::ng-deep .form-item.cdk-drag-preview{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item .svg{width:40px}.form-editor{width:100%;height:100%}.form-editor .material-icons{color:#5f6368!important}.form-editor .material-icons:hover{color:#2626b4!important;cursor:pointer!important}.form-editor .c-header{font-weight:500;padding:5px 10px;background-color:#ebebeb;border-bottom:1px solid #d3d3d3;text-transform:uppercase}.form-editor .c-header:last-child{border-right:0!important}.form-editor .c-header a{font-size:12px}.form-editor .form-menu{width:120px}.form-editor .form-menu .component-container{overflow-y:hidden;background:#f6f8fc}.form-editor .form-menu .component-container:hover{overflow-y:auto!important}.form-editor .form-menu .form-editor-group{padding:5px 10px;display:flex;align-items:center;flex-wrap:wrap}.form-editor .form-menu .form-editor-group .form-item{height:68px;display:flex;align-items:center;justify-content:center;font-size:11px;-webkit-user-select:none;user-select:none;color:#333;background:#fff;border:1px solid transparent;width:100px;margin:6px}.form-editor .form-menu .form-editor-group .form-item:hover{background-color:#e7e7e7;border-color:#878b8f;cursor:pointer}.form-editor .form-menu .form-editor-group .form-item .c-form-item{text-align:center}.form-editor .form-menu .form-editor-group .form-item .c-form-item>div.title,.form-editor .form-menu .form-editor-group .form-item .c-form-item>span{text-align:center;white-space:nowrap;font-weight:500}.form-editor .form-content{flex:1;border-right:1px solid #d3d3d3;border-left:1px solid #d3d3d3}.form-editor .form-content .components{background:#fff}.form-editor .form-content .components .row-item{position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.form-editor .form-content .components .row-item:hover{outline:1px dashed #bbb;border-radius:8px}.form-editor .form-content .components .row-item:hover .btn-drag-row-item{display:grid}.form-editor .form-content .components .row-item .btn-drag-row-item{display:none;position:absolute;top:0;left:-12px;height:100%;z-index:2;place-items:center;cursor:grab}.form-editor .form-content .components .row-item .btn-drag-row-item mat-icon{font-size:24px;height:24px;width:24px;box-shadow:0 1px 2px #0000001a;background:#fff}.form-editor .form-content .components .component-item{padding:4px 8px;border:2px dashed transparent;position:relative;min-height:28px;cursor:grab;transition:transform .2s ease,box-shadow .2s ease;display:inline-block;margin:4px;border-radius:8px;vertical-align:bottom}.form-editor .form-content .components .component-item:active{cursor:grabbing;box-shadow:0 4px 8px #0003}.form-editor .form-content .components .component-item:hover{border:2px #0e7cfa dashed}.form-editor .form-content .components .component-item:hover .c-actions{display:flex;flex-direction:row;gap:4px}.form-editor .form-content .components .component-item:hover .c-bar-resize-right{display:block;cursor:w-resize}.form-editor .form-content .components .component-item:hover .c-bar-resize-right.disabled{display:none}.form-editor .form-content .components .component-item .c-component-item{overflow:hidden}.form-editor .form-content .components .component-item .c-actions{display:none;position:absolute;right:4px;z-index:2}.form-editor .form-content .components .component-item .c-bar-resize-right{display:none;width:8px;height:80%;position:absolute;top:10%;right:-5px;outline:2px #0e7cfa solid;border-radius:4px;color:#fff;background:#fff;z-index:2}.form-editor .form-content .components .component-item .c-item-backdrop{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}.form-editor .form-content .components .active{border:2px #0e7cfa solid;outline:1px #0e7cfa solid}.form-editor .form-content .components .column-2{width:calc(16.6666666667% - 8px)}.form-editor .form-content .components .column-3{width:calc(25% - 8px)}.form-editor .form-content .components .column-4{width:calc(33.3333333333% - 8px)}.form-editor .form-content .components .column-5{width:calc(41.6666666667% - 8px)}.form-editor .form-content .components .column-6{width:calc(50% - 8px)}.form-editor .form-content .components .column-7{width:calc(58.3333333333% - 8px)}.form-editor .form-content .components .column-8{width:calc(66.6666666667% - 8px)}.form-editor .form-content .components .column-9{width:calc(75% - 8px)}.form-editor .form-content .components .column-10{width:calc(83.3333333333% - 8px)}.form-editor .form-content .components .column-11{width:calc(91.6666666667% - 8px)}.form-editor .form-content .components .column-12{width:calc(100% - 8px)}.form-editor .form-attributes{width:300px}.form-editor .form-attributes .attributes{overflow-y:auto!important;padding:0 10px;background:#f6f8fc}.form-editor .form-attributes .attributes .group-attribute .title-group{font-weight:500;padding:5px 0;position:relative;cursor:pointer;margin-top:8px}.form-editor .form-attributes .attributes .group-attribute .title-group span{vertical-align:middle;display:inline-block}.form-editor .form-attributes .attributes .group-attribute .title-group mat-icon{vertical-align:middle;position:absolute;right:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute{display:grid;margin-bottom:10px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute label{font-size:12px;font-weight:400;margin:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute input,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute select,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute textarea{border:1px solid #d3d3d3;height:30px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options{padding:5px 0;border-bottom:1px solid #d3d3d3}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options input{width:100%;margin-bottom:5px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options .material-icons{padding-top:22px}.preview-container{margin:0 -24px;position:relative}.preview-container .header-preview{border-bottom:1px solid #eee;padding:10px;font-size:14px;font-weight:500;position:sticky;top:0;background-color:#fff;z-index:9999}.preview-container .header-preview .material-icons:hover{color:#5f6368;cursor:pointer}.preview-container .content{padding:10px}.c-hidden{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: 
                 // Core Pipes
                 SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "component", type: 
                 // Controls
-                TextFieldControl, selector: "textfield-control", inputs: ["component"] }, { kind: "component", type: TextfieldAttribute, selector: "textfield-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TextareaControl, selector: "textarea-control", inputs: ["component"] }, { kind: "component", type: TextareaAttribute, selector: "textarea-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipStringControl, selector: "chip-string-control", inputs: ["component"] }, { kind: "component", type: ChipStringAttribute, selector: "chip-string-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipCalendarControl, selector: "chip-calendar-control", inputs: ["component"] }, { kind: "component", type: ChipCalendarAttribute, selector: "chip-calendar-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: NumberControl, selector: "number-control", inputs: ["component"] }, { kind: "component", type: NumberAttribute, selector: "number-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SelectControl, selector: "select-control", inputs: ["component"] }, { kind: "component", type: SelectAttribute, selector: "select-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: DatetimeControl, selector: "datetime-control", inputs: ["component"] }, { kind: "component", type: DatetimeAttribute, selector: "datetime-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: RadioControl, selector: "radio-control", inputs: ["component"] }, { kind: "component", type: RadioAttribute, selector: "radio-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: CheckboxControl, selector: "checkbox-control", inputs: ["component"] }, { kind: "component", type: CheckboxAttribute, selector: "checkbox-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: HtmlControl, selector: "html-control", inputs: ["component"] }, { kind: "component", type: HtmlAttribute, selector: "html-attribute", inputs: ["components", "variables", "component"], outputs: ["attributeChanges"] }, { kind: "component", type: UploadControl, selector: "upload-control", inputs: ["component"] }, { kind: "component", type: UploadAttribute, selector: "upload-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TableControl, selector: "table-control", inputs: ["component"] }, { kind: "component", type: TableAttribute, selector: "table-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "appearance", "form", "label", "helperText", "placeholder", "rows", "model", "hideInlineError", "required", "maxlength", "pattern", "validator", "inlineError", "disabled", "viewed", "autoHeight"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdFormRender, selector: "sd-form-render", inputs: ["form", "configuration", "defaultEntity", "entity", "properties", "viewed"] }, { kind: "component", type: ConfigureValidationComponent, selector: "configure-validation", outputs: ["accept"] }] });
+                TextFieldControl, selector: "textfield-control", inputs: ["component"] }, { kind: "component", type: TextfieldAttribute, selector: "textfield-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TextareaControl, selector: "textarea-control", inputs: ["component"] }, { kind: "component", type: TextareaAttribute, selector: "textarea-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipStringControl, selector: "chip-string-control", inputs: ["component"] }, { kind: "component", type: ChipStringAttribute, selector: "chip-string-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: ChipCalendarControl, selector: "chip-calendar-control", inputs: ["component"] }, { kind: "component", type: ChipCalendarAttribute, selector: "chip-calendar-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: NumberControl, selector: "number-control", inputs: ["component"] }, { kind: "component", type: NumberAttribute, selector: "number-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SelectControl, selector: "select-control", inputs: ["component"] }, { kind: "component", type: SelectAttribute, selector: "select-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: DatetimeControl, selector: "datetime-control", inputs: ["component"] }, { kind: "component", type: DatetimeAttribute, selector: "datetime-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: RadioControl, selector: "radio-control", inputs: ["component"] }, { kind: "component", type: RadioAttribute, selector: "radio-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: CheckboxControl, selector: "checkbox-control", inputs: ["component"] }, { kind: "component", type: CheckboxAttribute, selector: "checkbox-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: HtmlControl, selector: "html-control", inputs: ["component"] }, { kind: "component", type: HtmlAttribute, selector: "html-attribute", inputs: ["components", "variables", "component"], outputs: ["attributeChanges"] }, { kind: "component", type: UploadControl, selector: "upload-control", inputs: ["component"] }, { kind: "component", type: UploadAttribute, selector: "upload-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: TableControl, selector: "table-control", inputs: ["component"] }, { kind: "component", type: TableAttribute, selector: "table-attribute", inputs: ["components", "variables", "component"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdTextarea, selector: "sd-textarea", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "rows", "hideInlineError", "required", "disabled", "viewed", "autoHeight", "maxlength", "pattern", "validator", "inlineError", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdFormRender, selector: "sd-form-render", inputs: ["form", "configuration", "defaultEntity", "entity", "properties", "viewed"] }, { kind: "component", type: ConfigureValidationComponent, selector: "configure-validation", outputs: ["accept"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFormBuilder, decorators: [{
             type: Component,
@@ -6185,7 +6182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         SdFormRender,
                         ConfigureValidationComponent,
                     ], template: "<div class=\"d-flex form-editor\">\r\n  <div class=\"d-flex flex-column form-menu\">\r\n    <div class=\"c-header\">Components</div>\r\n    <div class=\"component-container\" style=\"flex: 1\">\r\n      <div class=\"form-editor-group\" cdkDropList [cdkDropListData]=\"formBuilderComponents\" [cdkDropListEnterPredicate]=\"noReturnPredicate\">\r\n        @for (formBuilderComponent of formBuilderComponents; track formBuilderComponent.type) {\r\n          <div cdkDrag class=\"form-item\" (click)=\"addComponent(formBuilderComponent)\" aria-hidden=\"true\">\r\n            <div class=\"c-form-item\">\r\n              <span [innerHtml]=\"formBuilderComponent.icon | sdSafeHtml\"></span>\r\n              <div class=\"title\">\r\n                {{ formBuilderComponent.name }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-content\">\r\n    <div class=\"c-header d-flex align-items-center justify-content-between\">\r\n      <div>B\u1ED1 c\u1EE5c</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n        <mat-icon matTooltip=\"Xem JSON\" fontIcon=\"code\" (click)=\"viewJSON()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" fontIcon=\"scatter_plot\" (click)=\"configureVariables()\"></mat-icon>\r\n        <mat-icon matTooltip=\"C\u1EA5u h\u00ECnh x\u00E1c th\u1EF1c c\u1EA3nh b\u00E1o/l\u1ED7i\" fontIcon=\"error\" (click)=\"openConfigureValidation()\"></mat-icon>\r\n        <mat-icon\r\n          [matTooltip]=\"isPreview ? 'Tr\u1EDF v\u1EC1 thi\u1EBFt k\u1EBF' : 'Xem th\u1EED'\"\r\n          [fontIcon]=\"isPreview ? 'stop_circle' : 'play_circle'\"\r\n          (click)=\"isPreview = !isPreview\"></mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"p-12 components\" style=\"flex: 1; overflow-y: auto\" id=\"frmComponent\">\r\n      @if (isPreview) {\r\n        <sd-form-render [configuration]=\"{ components: this.components, validations: this.validations }\"></sd-form-render>\r\n        <sd-button title=\"Validate\" (click)=\"onValidate()\"></sd-button>\r\n      } @else {\r\n        <div\r\n          cdkDropList\r\n          cdkDropListOrientation=\"vertical\"\r\n          [cdkDropListData]=\"dragDropRows\"\r\n          class=\"listY\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n          (click)=\"clickFormContentEmpty()\"\r\n          aria-hidden=\"true\">\r\n          @for (row of dragDropRows; track row.rowIndex) {\r\n            <div\r\n              cdkDrag\r\n              (mouseover)=\"onMouseover($event, row)\"\r\n              (focus)=\"onFocus($event)\"\r\n              id=\"row_{{ row.rowIndex }}\"\r\n              class=\"row-item\"\r\n              aria-hidden=\"true\">\r\n              <div class=\"btn-drag-row-item\"><mat-icon matTooltip=\"K\u00E9o l\u00EAn / xu\u1ED1ng\">drag_indicator</mat-icon></div>\r\n              <div\r\n                class=\"c-row-item\"\r\n                cdkDropList\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"row.items\"\r\n                (cdkDropListDropped)=\"drop($event)\">\r\n                @for (item of row.items; track item.id; let i = $index) {\r\n                  <div\r\n                    cdkDrag\r\n                    [id]=\"item.id\"\r\n                    class=\"component-item column-{{ item.layout?.columns || 12 }}\"\r\n                    [class.active]=\"item.id === selectedComponent?.id\"\r\n                    (click)=\"selectComponent(item)\"\r\n                    (clickOutside)=\"onClickedOutside($event)\"\r\n                    (cdkDragStarted)=\"dragStartComponentItem($event)\"\r\n                    (cdkDragEnded)=\"dragEndComponentItem($event)\"\r\n                    aria-hidden=\"true\">\r\n                    <div class=\"c-component-item\" [class.c-hidden]=\"item.properties?.hidden\">\r\n                      <div class=\"c-actions\">\r\n                        @if (item.type !== 'group') {\r\n                          <mat-icon\r\n                            [matTooltip]=\"item.properties?.viewed ? 'B\u1ECF ch\u1EC9 xem' : 'Ch\u1EC9 xem'\"\r\n                            (click)=\"onChangeViewed(item)\"\r\n                            fontSet=\"material-icons-outlined\"\r\n                            style=\"font-size: 16px; cursor: pointer\"\r\n                            [class.text-warning]=\"item.properties?.viewed\">\r\n                            edit_off\r\n                          </mat-icon>\r\n                        }\r\n                        <mat-icon\r\n                          matTooltip=\"Nh\u00E2n b\u1EA3n\"\r\n                          (click)=\"onDuplicate(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\">\r\n                          content_copy\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          [matTooltip]=\"item.properties?.hidden ? 'Hi\u1EC7n' : '\u1EA8n'\"\r\n                          (click)=\"onChangeHidden(item)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          [class.text-warning]=\"item.properties?.hidden\">\r\n                          visibility_off\r\n                        </mat-icon>\r\n                        <mat-icon\r\n                          matTooltip=\"X\u00F3a\"\r\n                          (click)=\"removeComponent(item.id)\"\r\n                          fontSet=\"material-icons-outlined\"\r\n                          style=\"font-size: 16px; cursor: pointer\"\r\n                          class=\"text-error\">\r\n                          delete\r\n                        </mat-icon>\r\n                      </div>\r\n                      @if (item.type === 'textfield') {\r\n                        <textfield-control [component]=\"item\"></textfield-control>\r\n                      } @else if (item.type === 'textarea') {\r\n                        <textarea-control [component]=\"item\"></textarea-control>\r\n                      } @else if (item.type === 'chip-string') {\r\n                        <chip-string-control [component]=\"item\"></chip-string-control>\r\n                      } @else if (item.type === 'chip-calendar') {\r\n                        <chip-calendar-control [component]=\"item\"></chip-calendar-control>\r\n                      } @else if (item.type === 'number') {\r\n                        <number-control [component]=\"item\"></number-control>\r\n                      } @else if (item.type === 'datetime') {\r\n                        <datetime-control [component]=\"item\"></datetime-control>\r\n                      } @else if (item.type === 'select') {\r\n                        <select-control [component]=\"item\"></select-control>\r\n                      } @else if (item.type === 'radio') {\r\n                        <radio-control [component]=\"item\"></radio-control>\r\n                      } @else if (item.type === 'checkbox') {\r\n                        <checkbox-control [component]=\"item\"></checkbox-control>\r\n                      } @else if (item.type === 'html') {\r\n                        <html-control [component]=\"item\" #html></html-control>\r\n                      } @else if (item.type === 'upload') {\r\n                        <upload-control [component]=\"item\"></upload-control>\r\n                      } @else if (item.type === 'table') {\r\n                        <table-control [component]=\"item\"></table-control>\r\n                      }\r\n                      <div class=\"c-item-backdrop\"></div>\r\n                    </div>\r\n                    <div cdkDropList cdkDropListOrientation=\"horizontal\">\r\n                      <div\r\n                        cdkDrag\r\n                        (cdkDragMoved)=\"changeSizeControl($event, item, row.items, i)\"\r\n                        (cdkDragEnded)=\"dragEndChangeSizeControl($event)\"\r\n                        class=\"c-bar-resize-right\"\r\n                        matTooltip=\"Co d\u00E3n\"></div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-column form-attributes\">\r\n    <div class=\"c-header\">Thu\u1ED9c t\u00EDnh</div>\r\n    @if (selectedComponent) {\r\n      <div class=\"attributes\" style=\"flex: 1\" aria-hidden=\"true\">\r\n        @if (selectedComponent.type === 'textfield') {\r\n          <textfield-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textfield-attribute>\r\n        } @else if (selectedComponent.type === 'textarea') {\r\n          <textarea-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></textarea-attribute>\r\n        } @else if (selectedComponent.type === 'chip-string') {\r\n          <chip-string-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></chip-string-attribute>\r\n        } @else if (selectedComponent.type === 'chip-calendar') {\r\n          <chip-calendar-attribute\r\n            [components]=\"components\"\r\n            [variables]=\"variables\"\r\n            [component]=\"selectedComponent\"></chip-calendar-attribute>\r\n        } @else if (selectedComponent.type === 'number') {\r\n          <number-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></number-attribute>\r\n        } @else if (selectedComponent.type === 'datetime') {\r\n          <datetime-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></datetime-attribute>\r\n        } @else if (selectedComponent.type === 'select') {\r\n          <select-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></select-attribute>\r\n        } @else if (selectedComponent.type === 'radio') {\r\n          <radio-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></radio-attribute>\r\n        } @else if (selectedComponent.type === 'checkbox') {\r\n          <checkbox-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></checkbox-attribute>\r\n        } @else if (selectedComponent.type === 'html') {\r\n          <html-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></html-attribute>\r\n        } @else if (selectedComponent.type === 'upload') {\r\n          <upload-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></upload-attribute>\r\n        } @else if (selectedComponent.type === 'table') {\r\n          <table-attribute [components]=\"components\" [variables]=\"variables\" [component]=\"selectedComponent\"></table-attribute>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n<sd-modal title=\"JSON\" view=\"dialog\" width=\"80%\" #popupViewJSON>\r\n  <sd-textarea [(model)]=\"jsonString\"></sd-textarea>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateJSON()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<sd-modal title=\"C\u1EA5u h\u00ECnh bi\u1EBFn\" view=\"dialog\" width=\"800px\" #popupConfigureVariables>\r\n  @for (variable of clonedVariables; track variable.id) {\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px\">\r\n      <sd-input [form]=\"form\" label=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(model)]=\"variable.key\" required></sd-input>\r\n      <sd-input [form]=\"form\" label=\"Nh\u00E3n hi\u1EC3n th\u1ECB\" [(model)]=\"variable.label\" required></sd-input>\r\n      <sd-button prefixIcon=\"delete\" (click)=\"removeVariables(variable.id)\" color=\"error\"></sd-button>\r\n    </div>\r\n  }\r\n  <a href=\"javascript:;\" (click)=\"addVariables()\">Th\u00EAm bi\u1EBFn</a>\r\n  <ng-container sdFooter>\r\n    <sd-button type=\"fill\" title=\"L\u01B0u\" (click)=\"updateVariables()\" prefixIcon=\"save\" color=\"primary\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n<configure-validation (accept)=\"onUpdateValidations($event)\"></configure-validation>\r\n", styles: [":host::ng-deep .svg{width:40px}:host::ng-deep .mat-form-field.sd-sm.mat-form-field-appearance-outline .mat-form-field-infix input.mat-input-element{margin-top:7px!important}::ng-deep .component-item.cdk-drag-preview .c-component-item{display:none}::ng-deep .component-item.cdk-drag-dragging,::ng-deep .row-item.cdk-drag-dragging{box-shadow:0 4px 8px #0003;border:2px #0e7cfa dashed}::ng-deep .row-item.cdk-drag-preview .c-row-item,::ng-deep .row-item.cdk-drag-preview .btn-drag-row-item{display:none}::ng-deep .form-item.cdk-drag-preview{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item{text-align:center}::ng-deep .form-item.cdk-drag-preview .c-form-item .svg{width:40px}.form-editor{width:100%;height:100%}.form-editor .material-icons{color:#5f6368!important}.form-editor .material-icons:hover{color:#2626b4!important;cursor:pointer!important}.form-editor .c-header{font-weight:500;padding:5px 10px;background-color:#ebebeb;border-bottom:1px solid #d3d3d3;text-transform:uppercase}.form-editor .c-header:last-child{border-right:0!important}.form-editor .c-header a{font-size:12px}.form-editor .form-menu{width:120px}.form-editor .form-menu .component-container{overflow-y:hidden;background:#f6f8fc}.form-editor .form-menu .component-container:hover{overflow-y:auto!important}.form-editor .form-menu .form-editor-group{padding:5px 10px;display:flex;align-items:center;flex-wrap:wrap}.form-editor .form-menu .form-editor-group .form-item{height:68px;display:flex;align-items:center;justify-content:center;font-size:11px;-webkit-user-select:none;user-select:none;color:#333;background:#fff;border:1px solid transparent;width:100px;margin:6px}.form-editor .form-menu .form-editor-group .form-item:hover{background-color:#e7e7e7;border-color:#878b8f;cursor:pointer}.form-editor .form-menu .form-editor-group .form-item .c-form-item{text-align:center}.form-editor .form-menu .form-editor-group .form-item .c-form-item>div.title,.form-editor .form-menu .form-editor-group .form-item .c-form-item>span{text-align:center;white-space:nowrap;font-weight:500}.form-editor .form-content{flex:1;border-right:1px solid #d3d3d3;border-left:1px solid #d3d3d3}.form-editor .form-content .components{background:#fff}.form-editor .form-content .components .row-item{position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.form-editor .form-content .components .row-item:hover{outline:1px dashed #bbb;border-radius:8px}.form-editor .form-content .components .row-item:hover .btn-drag-row-item{display:grid}.form-editor .form-content .components .row-item .btn-drag-row-item{display:none;position:absolute;top:0;left:-12px;height:100%;z-index:2;place-items:center;cursor:grab}.form-editor .form-content .components .row-item .btn-drag-row-item mat-icon{font-size:24px;height:24px;width:24px;box-shadow:0 1px 2px #0000001a;background:#fff}.form-editor .form-content .components .component-item{padding:4px 8px;border:2px dashed transparent;position:relative;min-height:28px;cursor:grab;transition:transform .2s ease,box-shadow .2s ease;display:inline-block;margin:4px;border-radius:8px;vertical-align:bottom}.form-editor .form-content .components .component-item:active{cursor:grabbing;box-shadow:0 4px 8px #0003}.form-editor .form-content .components .component-item:hover{border:2px #0e7cfa dashed}.form-editor .form-content .components .component-item:hover .c-actions{display:flex;flex-direction:row;gap:4px}.form-editor .form-content .components .component-item:hover .c-bar-resize-right{display:block;cursor:w-resize}.form-editor .form-content .components .component-item:hover .c-bar-resize-right.disabled{display:none}.form-editor .form-content .components .component-item .c-component-item{overflow:hidden}.form-editor .form-content .components .component-item .c-actions{display:none;position:absolute;right:4px;z-index:2}.form-editor .form-content .components .component-item .c-bar-resize-right{display:none;width:8px;height:80%;position:absolute;top:10%;right:-5px;outline:2px #0e7cfa solid;border-radius:4px;color:#fff;background:#fff;z-index:2}.form-editor .form-content .components .component-item .c-item-backdrop{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}.form-editor .form-content .components .active{border:2px #0e7cfa solid;outline:1px #0e7cfa solid}.form-editor .form-content .components .column-2{width:calc(16.6666666667% - 8px)}.form-editor .form-content .components .column-3{width:calc(25% - 8px)}.form-editor .form-content .components .column-4{width:calc(33.3333333333% - 8px)}.form-editor .form-content .components .column-5{width:calc(41.6666666667% - 8px)}.form-editor .form-content .components .column-6{width:calc(50% - 8px)}.form-editor .form-content .components .column-7{width:calc(58.3333333333% - 8px)}.form-editor .form-content .components .column-8{width:calc(66.6666666667% - 8px)}.form-editor .form-content .components .column-9{width:calc(75% - 8px)}.form-editor .form-content .components .column-10{width:calc(83.3333333333% - 8px)}.form-editor .form-content .components .column-11{width:calc(91.6666666667% - 8px)}.form-editor .form-content .components .column-12{width:calc(100% - 8px)}.form-editor .form-attributes{width:300px}.form-editor .form-attributes .attributes{overflow-y:auto!important;padding:0 10px;background:#f6f8fc}.form-editor .form-attributes .attributes .group-attribute .title-group{font-weight:500;padding:5px 0;position:relative;cursor:pointer;margin-top:8px}.form-editor .form-attributes .attributes .group-attribute .title-group span{vertical-align:middle;display:inline-block}.form-editor .form-attributes .attributes .group-attribute .title-group mat-icon{vertical-align:middle;position:absolute;right:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute{display:grid;margin-bottom:10px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute label{font-size:12px;font-weight:400;margin:0}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute input,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute select,.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute textarea{border:1px solid #d3d3d3;height:30px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options{padding:5px 0;border-bottom:1px solid #d3d3d3}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options input{width:100%;margin-bottom:5px}.form-editor .form-attributes .attributes .group-attribute .item-group .item-attribute .select-options .material-icons{padding-top:22px}.preview-container{margin:0 -24px;position:relative}.preview-container .header-preview{border-bottom:1px solid #eee;padding:10px;font-size:14px;font-weight:500;position:sticky;top:0;background-color:#fff;z-index:9999}.preview-container .header-preview .material-icons:hover{color:#5f6368;cursor:pointer}.preview-container .content{padding:10px}.c-hidden{opacity:.5}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.SdNotifyService }, { type: i1$5.SdConfirmService }, { type: BuilderService }], propDecorators: { popupViewJSON: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$6.SdNotifyService }, { type: i1$6.SdConfirmService }, { type: BuilderService }], propDecorators: { popupViewJSON: [{
                 type: ViewChild,
                 args: ['popupViewJSON']
             }], popupConfigureVariables: [{
@@ -6367,7 +6364,7 @@ class SdFeelExpression extends SdBaseSecureComponent {
         return attributes;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFeelExpression, deps: [{ token: i0.ChangeDetectorRef }, { token: ExpressionFeelPipe }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdFeelExpression, isStandalone: true, selector: "sd-feel-expression", inputs: { components: "components", _expression: ["expression", "_expression"], _model: ["model", "_model"] }, outputs: { expressionChange: "expressionChange", modelChange: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{model || '--'}}</a>\r\n@if (expression) {\r\n<sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"calculate\" class=\"mr-4\" title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n      <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCondition(expression.conditions)\" type=\"fill\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n      <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n        <div class=\"c-condition\">\r\n          <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n          @if (idxLv1 === 0) {\r\n            <div class=\"c-where\">WHERE</div>\r\n          }\r\n          <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n          @if (idxLv1 === 1) {\r\n            <div class=\"c-select\">\r\n              <sd-select\r\n                size=\"sm\"\r\n                [(model)]=\"expression.combinator\"\r\n                [items]=\"[\r\n                  { value: '&&', display: 'AND' },\r\n                  { value: '||', display: 'OR' }\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                required\r\n                hideInlineError=\"\"></sd-select>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv1.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv1.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n            @if(!!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL') {\r\n              @if(fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if(fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input-number>\r\n              } @else if(fieldAttribute.type === 'boolean') {\r\n                <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n              }@else if(fieldAttribute.type === 'values') {\r\n                <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button\r\n              class=\"ml-auto\"\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n         \r\n        } @else if (conditionLv1.type === 'combinator') {\r\n          <div class=\"c-builder\">\r\n            <div class=\"d-flex justify-content-end\">\r\n              <sd-button\r\n                class=\"mr-4\"\r\n                prefixIcon=\"delete\"\r\n                tooltip=\"X\u00F3a\"\r\n                (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n              <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" size=\"sm\" color=\"primary\" (click)=\"addCondition(conditionLv1.conditions)\" type=\"fill\"></sd-button>\r\n            </div>\r\n            <!-- C\u1EA5p 2 -->\r\n            @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n              <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n                <div class=\"c-condition\">\r\n                  <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                  @if (idxLv2 === 0) {\r\n                    <div class=\"c-where\">WHERE</div>\r\n                  }\r\n                  <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                  @if (idxLv2 === 1) {\r\n                    <div class=\"c-select\">\r\n                      <sd-select\r\n                        size=\"sm\"\r\n                        [(model)]=\"conditionLv1.combinator\"\r\n                        [items]=\"[\r\n                          { value: '&&', display: 'AND' },\r\n                          { value: '||', display: 'OR' }\r\n                        ]\"\r\n                        valueField=\"value\"\r\n                        displayField=\"display\"\r\n                        required\r\n                        hideInlineError=\"\"></sd-select>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv2.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv2.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n                    @if(!!fieldAttribute?.type && conditionLv2.operator && conditionLv2.operator !== 'NULL' && conditionLv2.operator !== 'NOT_NULL') {\r\n                      @if(fieldAttribute.type === 'string') {\r\n                        <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input>\r\n                      } @else if(fieldAttribute.type === 'number') {\r\n                        <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input-number>\r\n                      } @else if(fieldAttribute.type === 'boolean') {\r\n                        <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n                      }@else if(fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                 \r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n}", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdFeelExpression, isStandalone: true, selector: "sd-feel-expression", inputs: { components: "components", _expression: ["expression", "_expression"], _model: ["model", "_model"] }, outputs: { expressionChange: "expressionChange", modelChange: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a class=\"T12R\" href=\"javascript:;\" (click)=\"edit()\">{{model || '--'}}</a>\r\n@if (expression) {\r\n<sd-modal title=\"Thi\u1EBFt l\u1EADp bi\u1EC3u th\u1EE9c\">\r\n  <div class=\"c-builder\">\r\n    <div class=\"d-flex justify-content-end\">\r\n      <sd-button prefixIcon=\"calculate\" class=\"mr-4\" title=\"Nh\u00F3m \u0111i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCombinator(expression.conditions)\"></sd-button>\r\n      <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" color=\"primary\" (click)=\"addCondition(expression.conditions)\" type=\"fill\"></sd-button>\r\n    </div>\r\n    <!-- C\u1EA5p 1 -->\r\n    @for (conditionLv1 of expression.conditions; track conditionLv1.key; let idxLv1 = $index) {\r\n      <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n        <div class=\"c-condition\">\r\n          <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n          @if (idxLv1 === 0) {\r\n            <div class=\"c-where\">WHERE</div>\r\n          }\r\n          <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n          @if (idxLv1 === 1) {\r\n            <div class=\"c-select\">\r\n              <sd-select\r\n                size=\"sm\"\r\n                [(model)]=\"expression.combinator\"\r\n                [items]=\"[\r\n                  { value: '&&', display: 'AND' },\r\n                  { value: '||', display: 'OR' }\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                required\r\n                hideInlineError=\"\"></sd-select>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (conditionLv1.type === 'condition') {\r\n            <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv1.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n            @let fieldAttribute = attribute[conditionLv1.field!];\r\n            <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv1.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n            @if(!!fieldAttribute?.type && conditionLv1.operator && conditionLv1.operator !== 'NULL' && conditionLv1.operator !== 'NOT_NULL') {\r\n              @if(fieldAttribute.type === 'string') {\r\n                <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input>\r\n              } @else if(fieldAttribute.type === 'number') {\r\n                <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" required hideInlineError></sd-input-number>\r\n              } @else if(fieldAttribute.type === 'boolean') {\r\n                <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n              }@else if(fieldAttribute.type === 'values') {\r\n                <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv1.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n              }\r\n            }\r\n            <sd-button\r\n              class=\"ml-auto\"\r\n              prefixIcon=\"delete\"\r\n              tooltip=\"X\u00F3a\"\r\n              (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n         \r\n        } @else if (conditionLv1.type === 'combinator') {\r\n          <div class=\"c-builder\">\r\n            <div class=\"d-flex justify-content-end\">\r\n              <sd-button\r\n                class=\"mr-4\"\r\n                prefixIcon=\"delete\"\r\n                tooltip=\"X\u00F3a\"\r\n                (click)=\"remove(expression.conditions, idxLv1)\"></sd-button>\r\n              <sd-button prefixIcon=\"add\" title=\"\u0110i\u1EC1u ki\u1EC7n\" size=\"sm\" color=\"primary\" (click)=\"addCondition(conditionLv1.conditions)\" type=\"fill\"></sd-button>\r\n            </div>\r\n            <!-- C\u1EA5p 2 -->\r\n            @for (conditionLv2 of conditionLv1.conditions; track conditionLv2.key; let idxLv2 = $index) {\r\n              <div class=\"d-flex align-items-end py-8\" style=\"gap: 8px;\">\r\n                <div class=\"c-condition\">\r\n                  <!-- D\u00F2ng 1 ch\u1EC9 hi\u1EC7n WHERE -->\r\n                  @if (idxLv2 === 0) {\r\n                    <div class=\"c-where\">WHERE</div>\r\n                  }\r\n                  <!-- D\u00F2ng 2 hi\u1EC3n th\u1ECB combinator -->\r\n                  @if (idxLv2 === 1) {\r\n                    <div class=\"c-select\">\r\n                      <sd-select\r\n                        size=\"sm\"\r\n                        [(model)]=\"conditionLv1.combinator\"\r\n                        [items]=\"[\r\n                          { value: '&&', display: 'AND' },\r\n                          { value: '||', display: 'OR' }\r\n                        ]\"\r\n                        valueField=\"value\"\r\n                        displayField=\"display\"\r\n                        required\r\n                        hideInlineError=\"\"></sd-select>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (conditionLv2.type === 'condition') {\r\n                    <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"width: 200px;\" [(model)]=\"conditionLv2.field\" [items]=\"attributes\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                    @let fieldAttribute = attribute[conditionLv2.field!];\r\n                    <sd-select size=\"sm\" [form]=\"form\" style=\"width: 100px;\" [(model)]=\"conditionLv2.operator\" [items]=\"attributeOperators[fieldAttribute?.type || 'string']\" valueField=\"value\" displayField=\"display\" [disabled]=\"!fieldAttribute?.type\" required hideInlineError></sd-select>\r\n                    @if(!!fieldAttribute?.type && conditionLv2.operator && conditionLv2.operator !== 'NULL' && conditionLv2.operator !== 'NOT_NULL') {\r\n                      @if(fieldAttribute.type === 'string') {\r\n                        <sd-input size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input>\r\n                      } @else if(fieldAttribute.type === 'number') {\r\n                        <sd-input-number size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" required hideInlineError></sd-input-number>\r\n                      } @else if(fieldAttribute.type === 'boolean') {\r\n                        <sd-select size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"[{value: true, display: fieldAttribute.displayOnTrue}, {value: false, display: fieldAttribute.displayOnFalse}]\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-select>\r\n                      }@else if(fieldAttribute.type === 'values') {\r\n                        <sd-autocomplete size=\"sm\" [form]=\"form\" style=\"flex:1\" [(model)]=\"conditionLv2.value\" [items]=\"fieldAttribute.values\" valueField=\"value\" displayField=\"display\" required hideInlineError></sd-autocomplete>\r\n                      }\r\n                    }\r\n                    <sd-button\r\n                      class=\"ml-auto\"\r\n                      prefixIcon=\"delete\"\r\n                      tooltip=\"X\u00F3a\"\r\n                      (click)=\"remove(conditionLv1.conditions, idxLv1)\"></sd-button>\r\n                 \r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  <ng-container sdFooter>\r\n    <sd-button prefixIcon=\"save\" title=\"X\u00E1c nh\u1EADn\" (click)=\"onAccept()\" color=\"primary\" type=\"fill\"></sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n}", styles: [".c-builder{padding:8px;width:100%;border:1px solid #e6e6e6;border-radius:4px}.c-builder .c-condition{width:80px}.c-builder .c-condition .c-where{width:80px;border:1px solid #e6e6e6;background-color:#f2f2f2;color:#757575;border-radius:4px;padding:4px;text-align:center}.c-builder .c-condition .c-select{margin-left:10px;width:70px}\n"], dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect$1, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdFeelExpression, decorators: [{
             type: Component,
@@ -6396,5 +6393,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AttributeOperators, DayInfoPreviouses, DayInfoTypes, ExpressionToJavascriptExpression, FormBuilderComponents, GenerateId, GenerateKey, GetAttributes, GetComponentAttributes, GetDatetimeValue, GetVariableAttributes, Operators, SD_WORKFLOW_CONFIGURATION, SdFeelExpression, SdFormBuilder, SdFormRender, SdFormRenderService, SdFormatComponent, TableColumnTypes, TemplateToCondition };
+export { AttributeOperators, DayInfoPreviouses, DayInfoTypes, EvaluateExpression, ExpressionToJavascriptExpression, FormBuilderComponents, GenerateId, GenerateKey, GetAttributes, GetComponentAttributes, GetDatetimeValue, GetVariableAttributes, Operators, SD_WORKFLOW_CONFIGURATION, SdFeelExpression, SdFormBuilder, SdFormRender, SdFormRenderService, SdFormatComponent, TableColumnTypes, TemplateToCondition };
 //# sourceMappingURL=sd-angular-core-components-workflow.mjs.map