@libs-ui/components-inputs-multi-language 0.2.356-22 → 0.2.356-24

package/fesm2022/libs-ui-components-inputs-multi-language.mjs

@@ -22,7 +22,7 @@ class LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe {
         if (!result) {
             return CHARACTER_DATA_EMPTY;
         }
-        return `${result.label}: `;
+        return `${result.label}:`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe, isStandalone: true, name: "LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe" });
@@ -478,7 +478,6 @@ const validRequired = () => {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsInputsMultiLanguageComponent {
-    // #region PROPERTY
     languageDisplay = signal([]);
     dataLanguageChange = signal({});
     langDefault = signal(languageSupport());
@@ -488,9 +487,8 @@ class LibsUiComponentsInputsMultiLanguageComponent {
     listConfigItem = computed(() => listConfigItem(this.options()));
     httpRequestDetail = computed(() => httpRequestDetail(this.options()));
     inputFunctionControl = signal(new Map());
-    quillFunctionControl = signal([]);
+    quillFunctionControl = signal(new Map());
     onDestroy = new Subject();
-    // #region INPUT
     optionsLanguage = input(langOptions());
     zIndex = input();
     viewType = input('text', { transform: (value) => value ?? 'text' });
@@ -513,14 +511,13 @@ class LibsUiComponentsInputsMultiLanguageComponent {
     classIncludeKey = input('libs-ui-font-h4r');
     classIncludeValue = input('libs-ui-font-h4s');
     dataLanguage = model({});
-    multiLine = input();
     readonly = input();
     acceptNegativeValue = input();
     valueUpDownNumber = input();
     maxValueNumber = input();
     onlyAcceptNegativeValue = input();
     validOneDefaultMultiLanguage = input();
-    // #region OUTPUT
+    classIconAddLanguage = input('libs-ui-icon-add', { transform: (value) => value || 'libs-ui-icon-add' });
     outEventMultiLanguage = output();
     outChangeTypeLanguage = output();
     outFunctionsControl = output();
@@ -538,16 +535,18 @@ class LibsUiComponentsInputsMultiLanguageComponent {
             untracked(() => {
                 if (viewType === 'integer') {
                     this.langDefault.set(currenciesSupport());
-                    this.options.set(currenciesOptions());
-                    this.options().forEach((item) => {
-                        this.currencyUnits().push({
-                            label: item.label,
-                            id: item.key,
-                            type: item.label,
-                        });
-                    });
-                    this.currencyUnits.update((value) => [...value]);
+                    const opts = currenciesOptions();
+                    this.options.set(opts);
+                    this.currencyUnits.set(opts.map((item) => ({
+                        label: item.label,
+                        id: item.key,
+                        type: item.label,
+                    })));
+                    return;
                 }
+                this.langDefault.set(languageSupport());
+                this.options.set(this.optionsLanguage());
+                this.currencyUnits.set([]);
             });
         });
         effect(() => {
@@ -555,20 +554,7 @@ class LibsUiComponentsInputsMultiLanguageComponent {
                 const dataLanguage = this.dataLanguage();
                 this.dataLanguageChange.set(cloneDeep(dataLanguage));
                 this.generateData();
-                const optionsSelected = new Set();
-                Object.keys(this.dataLanguageChange()).forEach((key) => {
-                    if (this.options().find((item) => item.key === key)) {
-                        optionsSelected.add(key);
-                    }
-                });
-                if (this.langDefault().length) {
-                    this.langDefault().forEach((key) => {
-                        if (!isNil(get(this.dataLanguageChange, key))) {
-                            optionsSelected.add(key);
-                        }
-                    });
-                }
-                this.languageDisplay.set(Array.from(optionsSelected));
+                this.languageDisplay.set(this.computeLanguageDisplayKeys());
             });
         });
         effect(() => {
@@ -579,18 +565,18 @@ class LibsUiComponentsInputsMultiLanguageComponent {
                     return;
                 }
                 const key = this.langDefault()[0];
-                this.dataLanguage.update((value) => ({ ...value, [key]: get(this.dataLanguageChange, key) }));
+                this.dataLanguage.update((value) => ({ ...value, [key]: get(this.dataLanguageChange(), key) }));
             });
         });
         effect(() => {
-            const validRequired = this.validRequired();
+            const validRequiredInput = this.validRequired();
             untracked(() => {
-                if (!validRequired) {
+                if (!validRequiredInput) {
                     return;
                 }
-                this.validRequiredDefault.update((value) => ({ ...value, isRequired: validRequired.isRequired }));
-                if (!validRequired.isRequired) {
-                    this.validate();
+                this.validRequiredDefault.update((value) => ({ ...value, isRequired: validRequiredInput.isRequired }));
+                if (!validRequiredInput.isRequired) {
+                    void this.validate();
                 }
             });
         });
@@ -605,82 +591,109 @@ class LibsUiComponentsInputsMultiLanguageComponent {
             getData: this.getData.bind(this),
         };
     }
-    async handlerInputFunctionControl(event, key) {
-        this.inputFunctionControl().set(key, event);
+    /** Các key ngôn ngữ / tiền tệ cần hiển thị theo dữ liệu + cấu hình options. */
+    computeLanguageDisplayKeys() {
+        const dc = this.dataLanguageChange();
+        const opts = this.options();
+        const langs = this.langDefault();
+        const selected = new Set();
+        for (const k of Object.keys(dc)) {
+            if (opts.some((o) => o.key === k)) {
+                selected.add(k);
+            }
+        }
+        for (const k of langs) {
+            if (!isNil(get(dc, k))) {
+                selected.add(k);
+            }
+        }
+        return Array.from(selected);
+    }
+    handlerInputFunctionControl(event, key) {
+        this.inputFunctionControl.update((map) => {
+            const next = new Map(map);
+            next.set(key, event);
+            return next;
+        });
     }
-    async handlerQuillFunctionControl(event) {
-        this.quillFunctionControl.update((items) => [...items, event]);
+    handlerQuillFunctionControl(event, index) {
+        this.quillFunctionControl.update((map) => {
+            const next = new Map(map);
+            next.set(index, event);
+            return next;
+        });
     }
-    async handlerSelectChange(event, keyOld) {
+    handlerSelectChange(event, keyOld) {
         if (!event || event.key === keyOld) {
             return;
         }
         this.languageDisplay.update((value) => value.map((item) => (item === keyOld ? event.key : item)));
         delete this.dataLanguageChange()[keyOld];
         delete this.dataLanguage()[keyOld];
-        this.setDefaultData(event.key);
+        void this.setDefaultData(event.key);
     }
-    async handlerAddLanguage(event) {
+    handlerAddLanguage(event) {
         event.stopPropagation();
         const lang = this.options().find((item) => !this.languageDisplay().includes(item.key));
         if (!lang) {
             return;
         }
         this.languageDisplay.update((value) => [...value, lang.key]);
-        this.setDefaultData(lang.key);
+        void this.setDefaultData(lang.key);
         if (this.options().length === this.languageDisplay().length) {
             this.ignoreAdd.set(true);
         }
         this.outEventMultiLanguage.emit({ action: 'add', data: this.dataLanguageChange() });
     }
-    async handlerRemoveLanguage(event, key) {
+    handlerRemoveLanguage(event, key) {
         event.stopPropagation();
-        this.ignoreAdd.set(true);
+        this.ignoreAdd.set(false);
         this.dataLanguageChange.update((value) => {
             delete value[key];
             return { ...value };
         });
-        this.validateIsMultiKey();
+        void this.validateIsMultiKey();
         this.languageDisplay.update((value) => value.filter((item) => item !== key));
         this.outEventMultiLanguage.emit({ action: 'remove', data: this.dataLanguageChange() });
         this.inputFunctionControl().delete(key);
     }
-    async getData() {
+    getData() {
         if (this.singleLanguage()) {
             const key = this.langDefault()[0];
-            this.dataLanguage.update((value) => ({ ...value, [key]: get(this.dataLanguageChange, key) }));
+            this.dataLanguage.update((value) => ({ ...value, [key]: get(this.dataLanguageChange(), key) }));
             return this.dataLanguage();
         }
         if (this.data().length > 1) {
+            const defaultLang = this.langDefault()[0];
             for (const item of this.data()) {
-                const lang = this.langDefault()[0];
-                const key = item.keyBindData;
-                const dataByKey = key ? get(this.dataLanguageChange, key) : undefined;
-                if (key && dataByKey && lang && !get(dataByKey, lang) && !get(this.dataLanguageChange, lang)) {
+                const keyBind = item.keyBindData;
+                const dataByKey = keyBind ? get(this.dataLanguageChange(), keyBind) : undefined;
+                if (keyBind && dataByKey && defaultLang && !get(dataByKey, defaultLang) && !get(this.dataLanguageChange(), defaultLang)) {
                     return {};
                 }
             }
         }
         return this.dataLanguageChange();
     }
-    async generateData() {
+    generateData() {
         const lang = this.langDefault()[0];
-        if (this.data().length) {
-            this.data().forEach((item, index) => {
+        const dataItems = this.data();
+        if (dataItems.length) {
+            dataItems.forEach((item, index) => {
                 const key = item.keyBindData;
-                if (!index && isNil(get(this.dataLanguageChange, lang))) {
-                    this.setDefaultData(lang);
+                if (!index && isNil(get(this.dataLanguageChange(), lang))) {
+                    void this.setDefaultData(lang);
                     return;
                 }
-                if (!key || !isNil(get(this.dataLanguageChange, key))) {
+                if (!key || !isNil(get(this.dataLanguageChange(), key))) {
                     return;
                 }
                 this.dataLanguageChange.update((value) => ({ ...value, [key]: { [lang]: '' } }));
             });
         }
-        if (!this.data().length) {
+        if (!dataItems.length) {
             if (!this.dataLanguage() || !Object.keys(this.dataLanguage()).length) {
-                this.setDefaultData(lang);
+                void this.setDefaultData(lang);
             }
             this.data.set([
                 {
@@ -692,7 +705,7 @@ class LibsUiComponentsInputsMultiLanguageComponent {
             ]);
         }
     }
-    async setDefaultData(key) {
+    setDefaultData(key) {
         this.dataLanguageChange.update((value) => ({ ...value, [key]: '' }));
         this.dataLanguage.update((value) => ({ ...value, [key]: '' }));
     }
@@ -703,7 +716,7 @@ class LibsUiComponentsInputsMultiLanguageComponent {
                 valid = false;
             }
         }
-        for (const control of this.quillFunctionControl()) {
+        for (const control of this.quillFunctionControl().values()) {
             if (!(await control.checkIsValid())) {
                 valid = false;
             }
@@ -712,9 +725,12 @@ class LibsUiComponentsInputsMultiLanguageComponent {
             return valid;
         }
         if (this.data().length === 1) {
-            await this.validateDefault();
+            const defaultOk = await this.validateDefault();
+            if (!defaultOk) {
+                valid = false;
+            }
         }
-        this.validateIsMultiKey();
+        await this.validateIsMultiKey();
         return valid;
     }
     async validateDefault() {
@@ -734,12 +750,12 @@ class LibsUiComponentsInputsMultiLanguageComponent {
             return valid;
         }
         for (const key of Object.keys(this.dataLanguageChange())) {
-            if (key !== 'id' && key !== this.keyHeader() && get(this.dataLanguageChange, key) && key !== this.langDefault()[0]) {
+            if (key !== 'id' && key !== this.keyHeader() && get(this.dataLanguageChange(), key) && key !== this.langDefault()[0]) {
                 this.validRequiredDefault.update((value) => ({ ...value, isRequired: true }));
                 if (!(await this.checkValidInput())) {
                     valid = false;
                 }
-                return;
+                return valid;
             }
             this.validRequiredDefault.update((value) => ({ ...value, isRequired: false }));
             if (!(await this.checkValidInput())) {
@@ -757,73 +773,83 @@ class LibsUiComponentsInputsMultiLanguageComponent {
         }
         return valid;
     }
+    /**
+     * Khi có nhiều `IDataItem` (nhiều field bind), cập nhật `validRequiredLangDefault` theo dữ liệu đã nhập.
+     * Giữ nguyên thứ tự điều kiện / nhánh như phiên bản trước (forEach async), nhưng await đúng để validate không kết thúc sớm.
+     */
     async validateIsMultiKey() {
-        if (this.data().length > 1) {
-            if (this.data()[0].validRequired?.isRequired) {
-                return;
+        if (this.data().length <= 1) {
+            return;
+        }
+        if (this.data()[0].validRequired?.isRequired) {
+            return;
+        }
+        const dataItems = this.data();
+        const dc = this.dataLanguageChange();
+        for (const item of dataItems) {
+            if (!item.keyBindData) {
+                continue;
             }
-            this.data().forEach((item) => {
-                if (!item.keyBindData) {
-                    return;
-                }
-                Object.keys(get(this.dataLanguageChange, item.keyBindData)).forEach(async (keyBind) => {
-                    for (const key of Object.keys(this.dataLanguageChange())) {
-                        if (key === item.keyBindData || key === keyBind) {
-                            continue;
-                        }
-                        if (get(this.dataLanguageChange, key) && this.options().find((item) => item.key === key)) {
-                            this.data().forEach(async (config) => {
-                                if (config && config.validRequiredLangDefault) {
-                                    config.validRequiredLangDefault.isRequired = true;
-                                    await this.checkValidInput();
-                                }
-                            });
-                            return;
-                        }
-                        this.data().forEach(async (config) => {
-                            if (config && config.validRequiredLangDefault) {
-                                config.validRequiredLangDefault.isRequired = false;
+            const nested = get(dc, item.keyBindData);
+            if (!nested || typeof nested !== 'object') {
+                continue;
+            }
+            langKey: for (const langNestedKey of Object.keys(nested)) {
+                for (const topKey of Object.keys(dc)) {
+                    if (topKey === item.keyBindData || topKey === langNestedKey) {
+                        continue;
+                    }
+                    if (get(dc, topKey) && this.options().find((opt) => opt.key === topKey)) {
+                        for (const config of dataItems) {
+                            if (config?.validRequiredLangDefault) {
+                                config.validRequiredLangDefault.isRequired = true;
                                 await this.checkValidInput();
                             }
-                        });
-                    }
-                    const dataLanguageChangeByKeyBind = get(this.dataLanguageChange, keyBind);
-                    const dataLanguageChangeByKeyBindData = item.keyBindData ? get(this.dataLanguageChange, item.keyBindData) : undefined;
-                    if ((!dataLanguageChangeByKeyBind && !get(dataLanguageChangeByKeyBindData, keyBind)) || (dataLanguageChangeByKeyBind && get(dataLanguageChangeByKeyBindData, keyBind))) {
-                        return;
-                    }
-                    if (!dataLanguageChangeByKeyBind) {
-                        const dataFirst = this.data()[0];
-                        if (dataFirst && dataFirst.validRequiredLangDefault) {
-                            dataFirst.validRequiredLangDefault.isRequired = true;
-                            await this.checkValidInput();
                         }
-                        return;
+                        continue langKey;
                     }
-                    if (!get(dataLanguageChangeByKeyBindData, keyBind)) {
-                        const dataSecond = this.data()[1];
-                        if (dataSecond && dataSecond.validRequiredLangDefault) {
-                            dataSecond.validRequiredLangDefault.isRequired = true;
+                    for (const config of dataItems) {
+                        if (config?.validRequiredLangDefault) {
+                            config.validRequiredLangDefault.isRequired = false;
                             await this.checkValidInput();
                         }
-                        return;
                     }
-                });
-            });
+                }
+                const dataLanguageChangeByKeyBind = get(dc, langNestedKey);
+                const dataByItemKey = item.keyBindData ? get(dc, item.keyBindData) : undefined;
+                if ((!dataLanguageChangeByKeyBind && !get(dataByItemKey, langNestedKey)) || (dataLanguageChangeByKeyBind && get(dataByItemKey, langNestedKey))) {
+                    continue;
+                }
+                if (!dataLanguageChangeByKeyBind) {
+                    const dataFirst = dataItems[0];
+                    if (dataFirst?.validRequiredLangDefault) {
+                        dataFirst.validRequiredLangDefault.isRequired = true;
+                        await this.checkValidInput();
+                    }
+                    continue;
+                }
+                if (!get(dataByItemKey, langNestedKey)) {
+                    const dataSecond = dataItems[1];
+                    if (dataSecond?.validRequiredLangDefault) {
+                        dataSecond.validRequiredLangDefault.isRequired = true;
+                        await this.checkValidInput();
+                    }
+                }
+            }
         }
     }
-    async handlerInputChange() {
+    handlerInputChange() {
         this.outChangeValueInput.emit();
         timer(500)
             .pipe(takeUntil(this.onDestroy))
-            .subscribe(() => this.validate());
+            .subscribe(() => void this.validate());
     }
     ngOnDestroy() {
         this.onDestroy.next();
         this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMultiLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsMultiLanguageComponent, isStandalone: true, selector: "libs_ui-components-inputs-multi_language", inputs: { optionsLanguage: { classPropertyName: "optionsLanguage", publicName: "optionsLanguage", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, singleLanguage: { classPropertyName: "singleLanguage", publicName: "singleLanguage", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreAdd: { classPropertyName: "ignoreAdd", publicName: "ignoreAdd", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, keyHeader: { classPropertyName: "keyHeader", publicName: "keyHeader", isSignal: true, isRequired: false, transformFunction: null }, textArea: { classPropertyName: "textArea", publicName: "textArea", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, extendClass: { classPropertyName: "extendClass", publicName: "extendClass", isSignal: true, isRequired: false, transformFunction: null }, extendClassContent: { classPropertyName: "extendClassContent", publicName: "extendClassContent", isSignal: true, isRequired: false, transformFunction: null }, viewPosition: { classPropertyName: "viewPosition", publicName: "viewPosition", isSignal: true, isRequired: false, transformFunction: null }, ignoreRemove: { classPropertyName: "ignoreRemove", publicName: "ignoreRemove", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, countCharacters: { classPropertyName: "countCharacters", publicName: "countCharacters", isSignal: true, isRequired: false, transformFunction: null }, viewContent: { classPropertyName: "viewContent", publicName: "viewContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeKey: { classPropertyName: "classIncludeKey", publicName: "classIncludeKey", isSignal: true, isRequired: false, transformFunction: null }, classIncludeValue: { classPropertyName: "classIncludeValue", publicName: "classIncludeValue", isSignal: true, isRequired: false, transformFunction: null }, dataLanguage: { classPropertyName: "dataLanguage", publicName: "dataLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiLine: { classPropertyName: "multiLine", publicName: "multiLine", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, validOneDefaultMultiLanguage: { classPropertyName: "validOneDefaultMultiLanguage", publicName: "validOneDefaultMultiLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", ignoreAdd: "ignoreAddChange", extendClass: "extendClassChange", dataLanguage: "dataLanguageChange", outEventMultiLanguage: "outEventMultiLanguage", outChangeTypeLanguage: "outChangeTypeLanguage", outFunctionsControl: "outFunctionsControl", outChangeValueInput: "outChangeValueInput" }, ngImport: i0, template: "<div class=\"w-full\">\n  @if (titleField(); as titleField) {\n    <div class=\"libs-ui-font-h6m mb-[4px]\">{{ titleField | translate }}</div>\n  }\n  @for (key of languageDisplay(); track key) {\n    @if (!viewContent()) {\n      <div\n        [class.mt-[4px]]=\"!$first\"\n        [class.hidden]=\"singleLanguage() && !$first\"\n        [class.mt-[8px]]=\"countCharacters() && !$first\">\n        <div class=\"flex {{ extendClass() }}\">\n          @if (!singleLanguage()) {\n            <div>\n              <libs_ui-components-dropdown\n                [listConfig]=\"listConfigItem()\"\n                [httpRequestDetailItemById]=\"httpRequestDetail()\"\n                [listKeysDisable]=\"languageDisplay() | LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe: key\"\n                [readonly]=\"$index === 0 || readonly()\"\n                [listKeySelected]=\"key\"\n                [zIndex]=\"zIndex()\"\n                [classInclude]=\"'w-[150px]'\"\n                [listHasButtonUnSelectOption]=\"false\"\n                (outSelectKey)=\"handlerSelectChange($event, key)\" />\n            </div>\n          }\n          <div\n            class=\"flex relative p-0 {{ extendClassContent() }}\"\n            [class.w-[calc(100%-150px)]]=\"!textArea() && !singleLanguage() && viewPosition() === 'row'\"\n            [class.w-full]=\"textArea() || singleLanguage() || viewPosition() === 'column'\">\n            @for (item of data(); track item) {\n              @if ((item.type !== 'editor' && !item.isOneValue) || (item.isOneValue && $first)) {\n                <div\n                  class=\"relative {{ item.classIncludeInput }}\"\n                  [class.w-full]=\"(singleLanguage() && !multiLine()) || readonly() || $first\"\n                  [class.w-[calc(100%-28px)]]=\"textArea() || (!singleLanguage() && multiLine())\"\n                  [class.w-[calc(100%-40px)]]=\"!textArea() && !singleLanguage() && !multiLine() && !readonly()\"\n                  [class.w-[calc(100%-70px)]]=\"!textArea() && !singleLanguage() && multiLine()\"\n                  [class.mt-[8px]]=\"viewPosition() === 'column'\"\n                  [class.ml-[12px]]=\"!singleLanguage() && !textArea() && viewPosition() === 'row'\">\n                  @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                    @let constHtmlPlaceholder = item.placeholder || ' ';\n                    <libs_ui-components-inputs-valid\n                      [dataType]=\"item.type === 'number' ? 'int' : item.type === 'text' ? 'string' : item.type === 'bigint' ? 'bigint' : 'float'\"\n                      [(item)]=\"itemMap\"\n                      [fieldNameBind]=\"key\"\n                      [labelConfig]=\"countCharacters() ? { classInclude: 'absolute -top-[20px]', required: true } : undefined\"\n                      [tagInput]=\"textArea() ? 'textarea' : 'input'\"\n                      [placeholder]=\"constHtmlPlaceholder | translate\"\n                      [emitEmptyInDataTypeNumber]=\"true\"\n                      [validRequired]=\"\n                        validOneDefaultMultiLanguage() ? { isRequired: validOneDefaultMultiLanguage() === key ? true : false} :\n                        ($index === 0 && data().length <= 1\n                          ? validRequiredDefault()\n                          : $index === 0 && data().length > 1 && item.validRequiredLangDefault\n                            ? item.validRequiredLangDefault\n                            : item.validRequired\n                              ? item.validRequired\n                              : validRequired() || { isRequired: false })\n                      \"\n                      [unitsRight]=\"currencyUnits()\"\n                      [keySelectedUnitRight]=\"key\"\n                      [readonly]=\"readonly()\"\n                      [showCount]=\"countCharacters()\"\n                      [maxLength]=\"validMaxLength().length ? validMaxLength().length : undefined\"\n                      [fixedFloat]=\"item.type === 'bigint' ? 4 : 14\"\n                      [validMinLength]=\"(validOneDefaultMultiLanguage() && validOneDefaultMultiLanguage() !== key && !itemMap()[key] ) ?  undefined : { length: validMinLength()?.length || -1, message: 'i18n_minimum_length_number', interpolateParams: { number: validMinLength()?.length } }\"\n                      [acceptNegativeValue]=\"acceptNegativeValue()\"\n                      [valueUpDownNumber]=\"valueUpDownNumber()\"\n                      [maxValueNumber]=\"maxValueNumber()\"\n                      [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n                      (outValueChange)=\"handlerInputChange()\"\n                      (outFunctionsControl)=\"handlerInputFunctionControl($event, key)\" />\n                  }\n                </div>\n              }\n              @if (item.type === 'editor') {\n                <div class=\"w-[calc(100%-28px)]\">\n                  <div class=\"h-[250px]\">\n                    @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                      @let constHtmlPlaceholder = item.placeholder || ' ';\n                      <libs_ui-components-inputs-quill\n                        [(item)]=\"itemMap\"\n                        [fieldNameBind]=\"key\"\n                        [validRequired]=\"$index === 0 && data().length <= 1 ? validRequiredDefault() : validRequired()\"\n                        [placeholder]=\"constHtmlPlaceholder | translate\"\n                        [readonly]=\"readonly()\"\n                        (outFocus)=\"handlerInputChange()\"\n                        (outChange)=\"handlerInputChange()\"\n                        (outFunctionsControl)=\"handlerQuillFunctionControl($event)\" />\n                    }\n                  </div>\n                </div>\n              }\n            }\n            @if ($index > 0 && data().length === 1 && !ignoreRemove() && !readonly()) {\n              <div class=\"h-[32px] flex items-center ml-[16px]\">\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-link-custom'\"\n                  [buttonCustom]=\"{\n                    configStepColor: {\n                      text: '#071631',\n                      text_hover: '#ee2d41',\n                      text_active: '#ee2d41',\n                      text_disable: '071631',\n                    },\n                    rootColor: '#071631',\n                  }\"\n                  [iconOnlyType]=\"true\"\n                  [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n                  [classIconLeft]=\"'libs-ui-icon-remove'\"\n                  [classInclude]=\"'!p-0'\"\n                  (outClick)=\"handlerRemoveLanguage($event, key)\" />\n              </div>\n            }\n          </div>\n        </div>\n        @if ($index === 0 && !singleLanguage() && options().length !== languageDisplay().length && viewType() !== 'integer' && !readonly()) {\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-primary'\"\n            [label]=\"'i18n_add_language'\"\n            [classIconLeft]=\"'libs-ui-icon-add'\"\n            [classInclude]=\"'!px-0 mt-[8px]'\"\n            (outClick)=\"handlerAddLanguage($event)\" />\n        }\n      </div>\n    }\n    @if (viewContent()) {\n      <div class=\"flex\">\n        @if (singleLanguage()) {\n          <div\n            class=\"flex\"\n            [class.hidden]=\"singleLanguage() && !$first\"\n            [class.mt-[4px]]=\"!singleLanguage() && !$first\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [classInclude]=\"classIncludeKey()\"\n              [innerHTML]=\"key | LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe: options()\" />\n          </div>\n        }\n        <div\n          class=\"w-[calc(100%-100px)]\"\n          [class.hidden]=\"singleLanguage() && !$first\"\n          [class.flex]=\"!singleLanguage() || $first\"\n          [class.mt-[4px]]=\"!singleLanguage() && !$first\">\n          <libs_ui-components-popover\n            [type]=\"'text'\"\n            [classInclude]=\"classIncludeValue()\"\n            [innerHTML]=\"(dataLanguageChange()[key] || dataLanguageChange()[key] === 0 ? dataLanguageChange()[key] + '' : '') | LibsUiPipesEscapeHtmlPipe\"\n            [config]=\"{ zIndex: zIndex() }\" />\n        </div>\n      </div>\n    }\n  }\n  @if (viewType() === 'integer' && !this.ignoreAdd() && !readonly()) {\n    <libs_ui-components-buttons-button\n      type=\"button-link-primary\"\n      [classIconLeft]=\"'libs-ui-icon-add mr-[8px] text-[10px]'\"\n      [classLabel]=\"'libs-ui-font-h5r'\"\n      [classInclude]=\"'!pb-0'\"\n      [label]=\"'i18n_add_currency'\"\n      (outClick)=\"handlerAddLanguage($event)\" />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "ignoreShowMessageError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe, name: "LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe" }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe, name: "LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe" }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageGetItemPipe, name: "LibsUiComponentsInputsMultiLanguageGetItemPipe" }, { kind: "pipe", type: LibsUiPipesEscapeHtmlPipe, name: "LibsUiPipesEscapeHtmlPipe" }, { kind: "component", type: LibsUiComponentsInputsQuillComponent, selector: "libs_ui-components-inputs-quill", inputs: ["isShowToolBar", "isToolbarPositionFixed", "classIncludeToolbar", "stylesIncludeToolbar", "toolbarConfig", "placeholder", "label", "item", "autoUpdateValueWhenTextChange", "fieldNameBind", "readonly", "showErrorLabel", "showErrorBorder", "onlyShowErrorBorderInContent", "classIncludeTemplate", "classInclude", "handlersExpand", "validRequired", "validMinLength", "validMaxLength", "zIndex", "dataConfigMention", "blotsRegister", "autoFocus", "focusBottom", "blockUndoRedoKeyboard", "templateToolBarPersonalize", "template", "uploadImageConfig", "heightAuto", "elementScrollHeightAuto", "ignoreShowPopupEditLink", "ignoreCommunicateMicroEventPopup"], outputs: ["itemChange", "outShowPopupEditLink", "outMessageError", "outBlur", "outFocus", "outChange", "outFunctionsControl", "outSelectionChange", "outTextChange", "outContextMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsMultiLanguageComponent, isStandalone: true, selector: "libs_ui-components-inputs-multi_language", inputs: { optionsLanguage: { classPropertyName: "optionsLanguage", publicName: "optionsLanguage", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, singleLanguage: { classPropertyName: "singleLanguage", publicName: "singleLanguage", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreAdd: { classPropertyName: "ignoreAdd", publicName: "ignoreAdd", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, keyHeader: { classPropertyName: "keyHeader", publicName: "keyHeader", isSignal: true, isRequired: false, transformFunction: null }, textArea: { classPropertyName: "textArea", publicName: "textArea", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, extendClass: { classPropertyName: "extendClass", publicName: "extendClass", isSignal: true, isRequired: false, transformFunction: null }, extendClassContent: { classPropertyName: "extendClassContent", publicName: "extendClassContent", isSignal: true, isRequired: false, transformFunction: null }, viewPosition: { classPropertyName: "viewPosition", publicName: "viewPosition", isSignal: true, isRequired: false, transformFunction: null }, ignoreRemove: { classPropertyName: "ignoreRemove", publicName: "ignoreRemove", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, countCharacters: { classPropertyName: "countCharacters", publicName: "countCharacters", isSignal: true, isRequired: false, transformFunction: null }, viewContent: { classPropertyName: "viewContent", publicName: "viewContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeKey: { classPropertyName: "classIncludeKey", publicName: "classIncludeKey", isSignal: true, isRequired: false, transformFunction: null }, classIncludeValue: { classPropertyName: "classIncludeValue", publicName: "classIncludeValue", isSignal: true, isRequired: false, transformFunction: null }, dataLanguage: { classPropertyName: "dataLanguage", publicName: "dataLanguage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, validOneDefaultMultiLanguage: { classPropertyName: "validOneDefaultMultiLanguage", publicName: "validOneDefaultMultiLanguage", isSignal: true, isRequired: false, transformFunction: null }, classIconAddLanguage: { classPropertyName: "classIconAddLanguage", publicName: "classIconAddLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", ignoreAdd: "ignoreAddChange", extendClass: "extendClassChange", dataLanguage: "dataLanguageChange", outEventMultiLanguage: "outEventMultiLanguage", outChangeTypeLanguage: "outChangeTypeLanguage", outFunctionsControl: "outFunctionsControl", outChangeValueInput: "outChangeValueInput" }, ngImport: i0, template: "<div class=\"w-full flex flex-col gap-[8px]\">\n  @if (titleField(); as titleField) {\n    <div class=\"libs-ui-font-h6m\">{{ titleField | translate }}</div>\n  }\n  <div\n    class=\"flex flex-col gap-[8px]\"\n    [class.gap-[8px]]=\"viewPosition() === 'row'\"\n    [class.gap-[16px]]=\"viewPosition() === 'column'\">\n    @for (key of languageDisplay(); track key) {\n      @if (!viewContent()) {\n        <div class=\"flex gap-[8px] w-full {{ extendClass() }}\">\n          @if (!singleLanguage()) {\n            <div>\n              <libs_ui-components-dropdown\n                [listConfig]=\"listConfigItem()\"\n                [httpRequestDetailItemById]=\"httpRequestDetail()\"\n                [listKeysDisable]=\"languageDisplay() | LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe: key\"\n                [readonly]=\"$index === 0 || readonly()\"\n                [listKeySelected]=\"key\"\n                [zIndex]=\"zIndex()\"\n                [classInclude]=\"'w-[150px]'\"\n                [listHiddenInputSearch]=\"true\"\n                [listHasButtonUnSelectOption]=\"false\"\n                (outSelectKey)=\"handlerSelectChange($event, key)\" />\n            </div>\n          }\n          <div class=\"flex flex-1 gap-[12px] {{ extendClassContent() }}\">\n            @for (item of data(); track item; let itemIndex = $index) {\n              @if (item.type === 'editor') {\n                <div class=\"w-full min-w-0 h-[250px]\">\n                  @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                    @let constHtmlPlaceholder = item.placeholder || ' ';\n                    <libs_ui-components-inputs-quill\n                      [(item)]=\"itemMap\"\n                      [fieldNameBind]=\"key\"\n                      [validRequired]=\"$index === 0 && data().length <= 1 ? validRequiredDefault() : validRequired()\"\n                      [placeholder]=\"constHtmlPlaceholder | translate\"\n                      [readonly]=\"readonly()\"\n                      (outFocus)=\"handlerInputChange()\"\n                      (outChange)=\"handlerInputChange()\"\n                      (outFunctionsControl)=\"handlerQuillFunctionControl($event, itemIndex)\" />\n                  }\n                </div>\n              } @else {\n                <div class=\"w-full min-w-0 {{ item.classIncludeInput }}\">\n                  @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                    @let constHtmlPlaceholder = item.placeholder || ' ';\n                    <libs_ui-components-inputs-valid\n                      [dataType]=\"item.type === 'number' ? 'int' : item.type === 'text' ? 'string' : item.type === 'bigint' ? 'bigint' : 'float'\"\n                      [(item)]=\"itemMap\"\n                      [fieldNameBind]=\"key\"\n                      [tagInput]=\"textArea() ? 'textarea' : 'input'\"\n                      [placeholder]=\"constHtmlPlaceholder | translate\"\n                      [emitEmptyInDataTypeNumber]=\"true\"\n                      [validRequired]=\"\n                        validOneDefaultMultiLanguage()\n                          ? { isRequired: validOneDefaultMultiLanguage() === key ? true : false }\n                          : $index === 0 && data().length <= 1\n                            ? validRequiredDefault()\n                            : $index === 0 && data().length > 1 && item.validRequiredLangDefault\n                              ? item.validRequiredLangDefault\n                              : item.validRequired\n                                ? item.validRequired\n                                : validRequired() || { isRequired: false }\n                      \"\n                      [unitsRight]=\"currencyUnits()\"\n                      [keySelectedUnitRight]=\"key\"\n                      [readonly]=\"readonly()\"\n                      [showCount]=\"countCharacters()\"\n                      [maxLength]=\"validMaxLength().length ? validMaxLength().length : undefined\"\n                      [fixedFloat]=\"item.type === 'bigint' ? 4 : 14\"\n                      [validMinLength]=\"\n                        validOneDefaultMultiLanguage() && validOneDefaultMultiLanguage() !== key && !itemMap()[key]\n                          ? undefined\n                          : { length: validMinLength()?.length || -1, message: 'i18n_minimum_length_number', interpolateParams: { number: validMinLength()?.length } }\n                      \"\n                      [acceptNegativeValue]=\"acceptNegativeValue()\"\n                      [valueUpDownNumber]=\"valueUpDownNumber()\"\n                      [maxValueNumber]=\"maxValueNumber()\"\n                      [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n                      (outValueChange)=\"handlerInputChange()\"\n                      (outFunctionsControl)=\"handlerInputFunctionControl($event, key)\" />\n                  }\n                </div>\n              }\n            }\n            @if (!singleLanguage()) {\n              <div\n                class=\"flex items-center w-[16px]\"\n                [class.h-[32px]]=\"data()[0].type !== 'editor'\"\n                [class.h-[40px]]=\"data()[0].type === 'editor'\">\n                @if ($index > 0 && data().length === 1 && !ignoreRemove() && !readonly()) {\n                  <libs_ui-components-buttons-button\n                    [type]=\"'button-link-custom'\"\n                    [buttonCustom]=\"{\n                      configStepColor: {\n                        text: '#6a7383',\n                        text_hover: '#ee2d41',\n                        text_active: '#ee2d41',\n                        text_disable: '#6a7383',\n                      },\n                      rootColor: '#6a7383',\n                    }\"\n                    [iconOnlyType]=\"true\"\n                    [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n                    [classIconLeft]=\"'libs-ui-icon-remove'\"\n                    [classInclude]=\"'!p-0'\"\n                    (outClick)=\"handlerRemoveLanguage($event, key)\" />\n                }\n                @if ($index === 0 && options().length !== languageDisplay().length && viewType() !== 'integer' && !readonly()) {\n                  <libs_ui-components-buttons-button\n                    [type]=\"'button-link-third'\"\n                    [iconOnlyType]=\"true\"\n                    [classIconLeft]=\"classIconAddLanguage()\"\n                    [classInclude]=\"'!p-0'\"\n                    (outClick)=\"handlerAddLanguage($event)\" />\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (viewContent()) {\n        <div class=\"flex gap-[4px]\">\n          @if (!singleLanguage()) {\n            <div class=\"flex\">\n              <libs_ui-components-popover\n                [type]=\"'text'\"\n                [classInclude]=\"classIncludeKey()\"\n                [innerHTML]=\"key | LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe: options()\" />\n            </div>\n          }\n          <div class=\"flex flex-1 min-w-0\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [classInclude]=\"classIncludeValue()\"\n              [innerHTML]=\"(dataLanguageChange()[key] || dataLanguageChange()[key] === 0 ? dataLanguageChange()[key] + '' : '') | LibsUiPipesEscapeHtmlPipe\"\n              [config]=\"{ zIndex: zIndex() }\" />\n          </div>\n        </div>\n      }\n    }\n  </div>\n  @if (viewType() === 'integer' && !this.ignoreAdd() && !readonly()) {\n    <libs_ui-components-buttons-button\n      [type]=\"'button-link-primary'\"\n      [classIconLeft]=\"'libs-ui-icon-add'\"\n      [classLabel]=\"'libs-ui-font-h6mi'\"\n      [classInclude]=\"'!px-0 !py-[2px]'\"\n      [label]=\"'i18n_add_new'\"\n      (outClick)=\"handlerAddLanguage($event)\" />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "ignoreShowMessageError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe, name: "LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe" }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe, name: "LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe" }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageGetItemPipe, name: "LibsUiComponentsInputsMultiLanguageGetItemPipe" }, { kind: "pipe", type: LibsUiPipesEscapeHtmlPipe, name: "LibsUiPipesEscapeHtmlPipe" }, { kind: "component", type: LibsUiComponentsInputsQuillComponent, selector: "libs_ui-components-inputs-quill", inputs: ["isShowToolBar", "isToolbarPositionFixed", "classIncludeToolbar", "stylesIncludeToolbar", "toolbarConfig", "placeholder", "label", "item", "autoUpdateValueWhenTextChange", "fieldNameBind", "readonly", "showErrorLabel", "showErrorBorder", "onlyShowErrorBorderInContent", "classIncludeTemplate", "classInclude", "handlersExpand", "validRequired", "validMinLength", "validMaxLength", "zIndex", "dataConfigMention", "blotsRegister", "autoFocus", "focusBottom", "blockUndoRedoKeyboard", "templateToolBarPersonalize", "template", "uploadImageConfig", "heightAuto", "elementScrollHeightAuto", "ignoreShowPopupEditLink", "ignoreCommunicateMicroEventPopup"], outputs: ["itemChange", "outShowPopupEditLink", "outMessageError", "outBlur", "outFocus", "outChange", "outFunctionsControl", "outSelectionChange", "outTextChange", "outContextMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMultiLanguageComponent, decorators: [{
             type: Component,
@@ -838,19 +864,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsInputsMultiLanguageGetItemPipe,
                         LibsUiPipesEscapeHtmlPipe,
                         LibsUiComponentsInputsQuillComponent,
-                    ], template: "<div class=\"w-full\">\n  @if (titleField(); as titleField) {\n    <div class=\"libs-ui-font-h6m mb-[4px]\">{{ titleField | translate }}</div>\n  }\n  @for (key of languageDisplay(); track key) {\n    @if (!viewContent()) {\n      <div\n        [class.mt-[4px]]=\"!$first\"\n        [class.hidden]=\"singleLanguage() && !$first\"\n        [class.mt-[8px]]=\"countCharacters() && !$first\">\n        <div class=\"flex {{ extendClass() }}\">\n          @if (!singleLanguage()) {\n            <div>\n              <libs_ui-components-dropdown\n                [listConfig]=\"listConfigItem()\"\n                [httpRequestDetailItemById]=\"httpRequestDetail()\"\n                [listKeysDisable]=\"languageDisplay() | LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe: key\"\n                [readonly]=\"$index === 0 || readonly()\"\n                [listKeySelected]=\"key\"\n                [zIndex]=\"zIndex()\"\n                [classInclude]=\"'w-[150px]'\"\n                [listHasButtonUnSelectOption]=\"false\"\n                (outSelectKey)=\"handlerSelectChange($event, key)\" />\n            </div>\n          }\n          <div\n            class=\"flex relative p-0 {{ extendClassContent() }}\"\n            [class.w-[calc(100%-150px)]]=\"!textArea() && !singleLanguage() && viewPosition() === 'row'\"\n            [class.w-full]=\"textArea() || singleLanguage() || viewPosition() === 'column'\">\n            @for (item of data(); track item) {\n              @if ((item.type !== 'editor' && !item.isOneValue) || (item.isOneValue && $first)) {\n                <div\n                  class=\"relative {{ item.classIncludeInput }}\"\n                  [class.w-full]=\"(singleLanguage() && !multiLine()) || readonly() || $first\"\n                  [class.w-[calc(100%-28px)]]=\"textArea() || (!singleLanguage() && multiLine())\"\n                  [class.w-[calc(100%-40px)]]=\"!textArea() && !singleLanguage() && !multiLine() && !readonly()\"\n                  [class.w-[calc(100%-70px)]]=\"!textArea() && !singleLanguage() && multiLine()\"\n                  [class.mt-[8px]]=\"viewPosition() === 'column'\"\n                  [class.ml-[12px]]=\"!singleLanguage() && !textArea() && viewPosition() === 'row'\">\n                  @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                    @let constHtmlPlaceholder = item.placeholder || ' ';\n                    <libs_ui-components-inputs-valid\n                      [dataType]=\"item.type === 'number' ? 'int' : item.type === 'text' ? 'string' : item.type === 'bigint' ? 'bigint' : 'float'\"\n                      [(item)]=\"itemMap\"\n                      [fieldNameBind]=\"key\"\n                      [labelConfig]=\"countCharacters() ? { classInclude: 'absolute -top-[20px]', required: true } : undefined\"\n                      [tagInput]=\"textArea() ? 'textarea' : 'input'\"\n                      [placeholder]=\"constHtmlPlaceholder | translate\"\n                      [emitEmptyInDataTypeNumber]=\"true\"\n                      [validRequired]=\"\n                        validOneDefaultMultiLanguage() ? { isRequired: validOneDefaultMultiLanguage() === key ? true : false} :\n                        ($index === 0 && data().length <= 1\n                          ? validRequiredDefault()\n                          : $index === 0 && data().length > 1 && item.validRequiredLangDefault\n                            ? item.validRequiredLangDefault\n                            : item.validRequired\n                              ? item.validRequired\n                              : validRequired() || { isRequired: false })\n                      \"\n                      [unitsRight]=\"currencyUnits()\"\n                      [keySelectedUnitRight]=\"key\"\n                      [readonly]=\"readonly()\"\n                      [showCount]=\"countCharacters()\"\n                      [maxLength]=\"validMaxLength().length ? validMaxLength().length : undefined\"\n                      [fixedFloat]=\"item.type === 'bigint' ? 4 : 14\"\n                      [validMinLength]=\"(validOneDefaultMultiLanguage() && validOneDefaultMultiLanguage() !== key && !itemMap()[key] ) ?  undefined : { length: validMinLength()?.length || -1, message: 'i18n_minimum_length_number', interpolateParams: { number: validMinLength()?.length } }\"\n                      [acceptNegativeValue]=\"acceptNegativeValue()\"\n                      [valueUpDownNumber]=\"valueUpDownNumber()\"\n                      [maxValueNumber]=\"maxValueNumber()\"\n                      [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n                      (outValueChange)=\"handlerInputChange()\"\n                      (outFunctionsControl)=\"handlerInputFunctionControl($event, key)\" />\n                  }\n                </div>\n              }\n              @if (item.type === 'editor') {\n                <div class=\"w-[calc(100%-28px)]\">\n                  <div class=\"h-[250px]\">\n                    @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                      @let constHtmlPlaceholder = item.placeholder || ' ';\n                      <libs_ui-components-inputs-quill\n                        [(item)]=\"itemMap\"\n                        [fieldNameBind]=\"key\"\n                        [validRequired]=\"$index === 0 && data().length <= 1 ? validRequiredDefault() : validRequired()\"\n                        [placeholder]=\"constHtmlPlaceholder | translate\"\n                        [readonly]=\"readonly()\"\n                        (outFocus)=\"handlerInputChange()\"\n                        (outChange)=\"handlerInputChange()\"\n                        (outFunctionsControl)=\"handlerQuillFunctionControl($event)\" />\n                    }\n                  </div>\n                </div>\n              }\n            }\n            @if ($index > 0 && data().length === 1 && !ignoreRemove() && !readonly()) {\n              <div class=\"h-[32px] flex items-center ml-[16px]\">\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-link-custom'\"\n                  [buttonCustom]=\"{\n                    configStepColor: {\n                      text: '#071631',\n                      text_hover: '#ee2d41',\n                      text_active: '#ee2d41',\n                      text_disable: '071631',\n                    },\n                    rootColor: '#071631',\n                  }\"\n                  [iconOnlyType]=\"true\"\n                  [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n                  [classIconLeft]=\"'libs-ui-icon-remove'\"\n                  [classInclude]=\"'!p-0'\"\n                  (outClick)=\"handlerRemoveLanguage($event, key)\" />\n              </div>\n            }\n          </div>\n        </div>\n        @if ($index === 0 && !singleLanguage() && options().length !== languageDisplay().length && viewType() !== 'integer' && !readonly()) {\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-primary'\"\n            [label]=\"'i18n_add_language'\"\n            [classIconLeft]=\"'libs-ui-icon-add'\"\n            [classInclude]=\"'!px-0 mt-[8px]'\"\n            (outClick)=\"handlerAddLanguage($event)\" />\n        }\n      </div>\n    }\n    @if (viewContent()) {\n      <div class=\"flex\">\n        @if (singleLanguage()) {\n          <div\n            class=\"flex\"\n            [class.hidden]=\"singleLanguage() && !$first\"\n            [class.mt-[4px]]=\"!singleLanguage() && !$first\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [classInclude]=\"classIncludeKey()\"\n              [innerHTML]=\"key | LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe: options()\" />\n          </div>\n        }\n        <div\n          class=\"w-[calc(100%-100px)]\"\n          [class.hidden]=\"singleLanguage() && !$first\"\n          [class.flex]=\"!singleLanguage() || $first\"\n          [class.mt-[4px]]=\"!singleLanguage() && !$first\">\n          <libs_ui-components-popover\n            [type]=\"'text'\"\n            [classInclude]=\"classIncludeValue()\"\n            [innerHTML]=\"(dataLanguageChange()[key] || dataLanguageChange()[key] === 0 ? dataLanguageChange()[key] + '' : '') | LibsUiPipesEscapeHtmlPipe\"\n            [config]=\"{ zIndex: zIndex() }\" />\n        </div>\n      </div>\n    }\n  }\n  @if (viewType() === 'integer' && !this.ignoreAdd() && !readonly()) {\n    <libs_ui-components-buttons-button\n      type=\"button-link-primary\"\n      [classIconLeft]=\"'libs-ui-icon-add mr-[8px] text-[10px]'\"\n      [classLabel]=\"'libs-ui-font-h5r'\"\n      [classInclude]=\"'!pb-0'\"\n      [label]=\"'i18n_add_currency'\"\n      (outClick)=\"handlerAddLanguage($event)\" />\n  }\n</div>\n" }]
+                    ], template: "<div class=\"w-full flex flex-col gap-[8px]\">\n  @if (titleField(); as titleField) {\n    <div class=\"libs-ui-font-h6m\">{{ titleField | translate }}</div>\n  }\n  <div\n    class=\"flex flex-col gap-[8px]\"\n    [class.gap-[8px]]=\"viewPosition() === 'row'\"\n    [class.gap-[16px]]=\"viewPosition() === 'column'\">\n    @for (key of languageDisplay(); track key) {\n      @if (!viewContent()) {\n        <div class=\"flex gap-[8px] w-full {{ extendClass() }}\">\n          @if (!singleLanguage()) {\n            <div>\n              <libs_ui-components-dropdown\n                [listConfig]=\"listConfigItem()\"\n                [httpRequestDetailItemById]=\"httpRequestDetail()\"\n                [listKeysDisable]=\"languageDisplay() | LibsUiComponentsInputsMultiLanguageGetDisableKeyPipe: key\"\n                [readonly]=\"$index === 0 || readonly()\"\n                [listKeySelected]=\"key\"\n                [zIndex]=\"zIndex()\"\n                [classInclude]=\"'w-[150px]'\"\n                [listHiddenInputSearch]=\"true\"\n                [listHasButtonUnSelectOption]=\"false\"\n                (outSelectKey)=\"handlerSelectChange($event, key)\" />\n            </div>\n          }\n          <div class=\"flex flex-1 gap-[12px] {{ extendClassContent() }}\">\n            @for (item of data(); track item; let itemIndex = $index) {\n              @if (item.type === 'editor') {\n                <div class=\"w-full min-w-0 h-[250px]\">\n                  @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                    @let constHtmlPlaceholder = item.placeholder || ' ';\n                    <libs_ui-components-inputs-quill\n                      [(item)]=\"itemMap\"\n                      [fieldNameBind]=\"key\"\n                      [validRequired]=\"$index === 0 && data().length <= 1 ? validRequiredDefault() : validRequired()\"\n                      [placeholder]=\"constHtmlPlaceholder | translate\"\n                      [readonly]=\"readonly()\"\n                      (outFocus)=\"handlerInputChange()\"\n                      (outChange)=\"handlerInputChange()\"\n                      (outFunctionsControl)=\"handlerQuillFunctionControl($event, itemIndex)\" />\n                  }\n                </div>\n              } @else {\n                <div class=\"w-full min-w-0 {{ item.classIncludeInput }}\">\n                  @if (item.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: dataLanguageChange; as itemMap) {\n                    @let constHtmlPlaceholder = item.placeholder || ' ';\n                    <libs_ui-components-inputs-valid\n                      [dataType]=\"item.type === 'number' ? 'int' : item.type === 'text' ? 'string' : item.type === 'bigint' ? 'bigint' : 'float'\"\n                      [(item)]=\"itemMap\"\n                      [fieldNameBind]=\"key\"\n                      [tagInput]=\"textArea() ? 'textarea' : 'input'\"\n                      [placeholder]=\"constHtmlPlaceholder | translate\"\n                      [emitEmptyInDataTypeNumber]=\"true\"\n                      [validRequired]=\"\n                        validOneDefaultMultiLanguage()\n                          ? { isRequired: validOneDefaultMultiLanguage() === key ? true : false }\n                          : $index === 0 && data().length <= 1\n                            ? validRequiredDefault()\n                            : $index === 0 && data().length > 1 && item.validRequiredLangDefault\n                              ? item.validRequiredLangDefault\n                              : item.validRequired\n                                ? item.validRequired\n                                : validRequired() || { isRequired: false }\n                      \"\n                      [unitsRight]=\"currencyUnits()\"\n                      [keySelectedUnitRight]=\"key\"\n                      [readonly]=\"readonly()\"\n                      [showCount]=\"countCharacters()\"\n                      [maxLength]=\"validMaxLength().length ? validMaxLength().length : undefined\"\n                      [fixedFloat]=\"item.type === 'bigint' ? 4 : 14\"\n                      [validMinLength]=\"\n                        validOneDefaultMultiLanguage() && validOneDefaultMultiLanguage() !== key && !itemMap()[key]\n                          ? undefined\n                          : { length: validMinLength()?.length || -1, message: 'i18n_minimum_length_number', interpolateParams: { number: validMinLength()?.length } }\n                      \"\n                      [acceptNegativeValue]=\"acceptNegativeValue()\"\n                      [valueUpDownNumber]=\"valueUpDownNumber()\"\n                      [maxValueNumber]=\"maxValueNumber()\"\n                      [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n                      (outValueChange)=\"handlerInputChange()\"\n                      (outFunctionsControl)=\"handlerInputFunctionControl($event, key)\" />\n                  }\n                </div>\n              }\n            }\n            @if (!singleLanguage()) {\n              <div\n                class=\"flex items-center w-[16px]\"\n                [class.h-[32px]]=\"data()[0].type !== 'editor'\"\n                [class.h-[40px]]=\"data()[0].type === 'editor'\">\n                @if ($index > 0 && data().length === 1 && !ignoreRemove() && !readonly()) {\n                  <libs_ui-components-buttons-button\n                    [type]=\"'button-link-custom'\"\n                    [buttonCustom]=\"{\n                      configStepColor: {\n                        text: '#6a7383',\n                        text_hover: '#ee2d41',\n                        text_active: '#ee2d41',\n                        text_disable: '#6a7383',\n                      },\n                      rootColor: '#6a7383',\n                    }\"\n                    [iconOnlyType]=\"true\"\n                    [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n                    [classIconLeft]=\"'libs-ui-icon-remove'\"\n                    [classInclude]=\"'!p-0'\"\n                    (outClick)=\"handlerRemoveLanguage($event, key)\" />\n                }\n                @if ($index === 0 && options().length !== languageDisplay().length && viewType() !== 'integer' && !readonly()) {\n                  <libs_ui-components-buttons-button\n                    [type]=\"'button-link-third'\"\n                    [iconOnlyType]=\"true\"\n                    [classIconLeft]=\"classIconAddLanguage()\"\n                    [classInclude]=\"'!p-0'\"\n                    (outClick)=\"handlerAddLanguage($event)\" />\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (viewContent()) {\n        <div class=\"flex gap-[4px]\">\n          @if (!singleLanguage()) {\n            <div class=\"flex\">\n              <libs_ui-components-popover\n                [type]=\"'text'\"\n                [classInclude]=\"classIncludeKey()\"\n                [innerHTML]=\"key | LibsUiComponentsInputsMultiLanguageDisplayLanguagePipe: options()\" />\n            </div>\n          }\n          <div class=\"flex flex-1 min-w-0\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [classInclude]=\"classIncludeValue()\"\n              [innerHTML]=\"(dataLanguageChange()[key] || dataLanguageChange()[key] === 0 ? dataLanguageChange()[key] + '' : '') | LibsUiPipesEscapeHtmlPipe\"\n              [config]=\"{ zIndex: zIndex() }\" />\n          </div>\n        </div>\n      }\n    }\n  </div>\n  @if (viewType() === 'integer' && !this.ignoreAdd() && !readonly()) {\n    <libs_ui-components-buttons-button\n      [type]=\"'button-link-primary'\"\n      [classIconLeft]=\"'libs-ui-icon-add'\"\n      [classLabel]=\"'libs-ui-font-h6mi'\"\n      [classInclude]=\"'!px-0 !py-[2px]'\"\n      [label]=\"'i18n_add_new'\"\n      (outClick)=\"handlerAddLanguage($event)\" />\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class LibsUiComponentsInputsMultiLanguageItemsComponent {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     dataMultiKey = signal([]);
     langDefault = signal(UtilsCache.getLang());
     configHeader = signal(undefined);
     validRequired = signal({ isRequired: false });
     validRequiredWhenInputHasValue = signal(undefined);
     dataHeader = signal(undefined);
-    multiLanguageFunctionControl = signal([]);
-    inputValidFunctionControl = signal([]);
+    /** Một control valid header cho mỗi dòng (theo index). */
+    inputValidByRow = signal(new Map());
+    /** Một control multi-language cho mỗi dòng (theo index). */
+    multiLanguageByRow = signal(new Map());
     configItems = input([]);
     dataMultiLanguage = model([{}]);
     zIndex = input();
@@ -861,38 +888,33 @@ class LibsUiComponentsInputsMultiLanguageItemsComponent {
     valueUpDownNumber = input();
     maxValueNumber = input();
     onlyAcceptNegativeValue = input();
+    classIconAddLanguage = input('libs-ui-icon-add', { transform: (value) => value || 'libs-ui-icon-add' });
     outClick = output();
     outFunctionControl = output();
     outChangeValue = output();
     constructor() {
         effect(() => {
-            const configItems = this.configItems();
+            const items = this.configItems();
             untracked(() => {
-                if (configItems && configItems.length) {
-                    this.configHeader.set(configItems[0].header);
-                }
+                this.configHeader.set(items?.[0]?.header);
+                this.validRequired.set(items?.[0]?.validRequired ?? { isRequired: false });
+                this.syncDataMultiKey();
             });
         });
         effect(() => {
-            const dataMultiLanguage = this.dataMultiLanguage();
+            const rows = this.dataMultiLanguage();
             untracked(() => {
-                if (!dataMultiLanguage || !dataMultiLanguage.length) {
-                    this.dataMultiLanguage.set([{}]);
-                    const configHeader = this.configHeader();
-                    if (configHeader && configHeader.dataDefault) {
-                        this.dataMultiLanguage.set([cloneDeep(configHeader.dataDefault)]);
-                    }
+                if (!rows?.length) {
+                    const header = this.configHeader();
+                    const initial = header?.dataDefault ? cloneDeep(header.dataDefault) : {};
+                    this.dataMultiLanguage.set([initial]);
                 }
-                this.handlerConfigMulti();
+                this.syncDataMultiKey();
             });
         });
     }
     ngOnInit() {
         this.outFunctionControl.emit(this.FunctionsControl);
-        const configItems = this.configItems();
-        if (configItems && configItems.length && configItems[0].validRequired) {
-            this.validRequired.set(configItems[0].validRequired);
-        }
     }
     get FunctionsControl() {
         return {
@@ -900,86 +922,101 @@ class LibsUiComponentsInputsMultiLanguageItemsComponent {
             getData: this.getData.bind(this),
         };
     }
-    async handlerConfigMulti() {
-        this.dataMultiKey.set([]);
-        this.dataMultiLanguage().forEach(() => {
-            const configItems = this.configItems();
-            if (configItems) {
-                this.dataMultiKey().push(configItems);
-            }
-        });
-        this.dataMultiKey.update((items) => [...items]);
-    }
-    async handlerAdd() {
-        let dataLanguage = {};
-        const configHeader = this.configHeader();
-        if (configHeader) {
-            dataLanguage = cloneDeep(configHeader.dataDefault);
+    /**
+     * Mỗi dòng cần một bản `data` (shallow copy từng `IDataItem`) để multi-language con không dùng chung một mảng tham chiếu.
+     */
+    syncDataMultiKey() {
+        const templates = this.configItems();
+        const rowCount = this.dataMultiLanguage().length;
+        if (!templates?.length) {
+            this.dataMultiKey.set([]);
+            return;
         }
+        this.dataMultiKey.set(Array.from({ length: rowCount }, () => templates.map((c) => ({ ...c }))));
+    }
+    handlerAdd() {
+        const header = this.configHeader();
+        const dataLanguage = header?.dataDefault ? cloneDeep(header.dataDefault) : {};
         this.dataMultiLanguage.update((items) => [...items, dataLanguage]);
-        this.dataMultiKey.update((items) => [...items, this.configItems()]);
+        this.syncDataMultiKey();
         this.handlerChangeValue();
     }
-    async handlerRemove(index) {
-        this.dataMultiLanguage.update((items) => {
-            items.splice(index, 1);
-            return [...items];
-        });
+    handlerRemove(index) {
+        this.dataMultiLanguage.update((items) => items.filter((_, i) => i !== index));
+        this.reindexRowMapsAfterRemove(index);
+        this.syncDataMultiKey();
         this.handlerChangeValue();
     }
-    async handlerClick(e) {
+    reindexRowMapsAfterRemove(removedIndex) {
+        const reindex = (m) => {
+            const next = new Map();
+            m.forEach((v, k) => {
+                if (k < removedIndex) {
+                    next.set(k, v);
+                }
+                else if (k > removedIndex) {
+                    next.set(k - 1, v);
+                }
+            });
+            return next;
+        };
+        this.inputValidByRow.update((m) => reindex(m));
+        this.multiLanguageByRow.update((m) => reindex(m));
+    }
+    handlerClick(e) {
         e.stopPropagation();
         this.outClick.emit();
     }
-    async handlerFunctionsControlInputLanguage(event) {
-        this.multiLanguageFunctionControl.update((items) => [...items, event]);
-        console.log(this.multiLanguageFunctionControl());
+    handlerFunctionsControlInputLanguage(event, rowIndex) {
+        this.multiLanguageByRow.update((m) => new Map(m).set(rowIndex, event));
     }
-    async handlerFunctionsControlInputValid(event) {
-        this.inputValidFunctionControl.update((items) => [...items, event]);
+    handlerFunctionsControlInputValid(event, rowIndex) {
+        this.inputValidByRow.update((m) => new Map(m).set(rowIndex, event));
     }
     async validate() {
         let valid = true;
-        this.checkValidRequiredWhenInputHasValue();
-        for (const control of this.inputValidFunctionControl()) {
-            if (!(await control.checkIsValid())) {
+        this.applyValidRequiredWhenHeaderHasValue();
+        const rowCount = this.dataMultiLanguage().length;
+        for (let i = 0; i < rowCount; i++) {
+            const inputCtrl = this.inputValidByRow().get(i);
+            if (inputCtrl && !(await inputCtrl.checkIsValid())) {
                 valid = false;
             }
-        }
-        for (const control of this.multiLanguageFunctionControl()) {
-            if (!(await control.checkIsValid())) {
+            const mlCtrl = this.multiLanguageByRow().get(i);
+            if (mlCtrl && !(await mlCtrl.checkIsValid())) {
                 valid = false;
             }
         }
         return valid;
     }
-    async getData() {
-        const dataMultiLanguage = [];
-        for (const element of this.multiLanguageFunctionControl()) {
-            dataMultiLanguage.push((await element.getData()) || {});
+    getData() {
+        const rowCount = this.dataMultiLanguage().length;
+        const out = [];
+        for (let i = 0; i < rowCount; i++) {
+            const ctrl = this.multiLanguageByRow().get(i);
+            out.push((ctrl?.getData() ?? {}));
         }
-        // this.dataMultiLanguage.update(items => [...items]);
-        return dataMultiLanguage;
+        return out;
     }
-    async handlerChangeValue(value, type) {
+    handlerChangeValue(value, type) {
         if (type === 'input') {
             this.dataHeader.set(value);
         }
-        this.checkValidRequiredWhenInputHasValue();
+        this.applyValidRequiredWhenHeaderHasValue();
         this.outChangeValue.emit();
     }
-    async checkValidRequiredWhenInputHasValue() {
+    applyValidRequiredWhenHeaderHasValue() {
         this.validRequiredWhenInputHasValue.set(undefined);
         if (!isNil(this.dataHeader())) {
             this.validRequiredWhenInputHasValue.set({ isRequired: true });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMultiLanguageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsMultiLanguageItemsComponent, isStandalone: true, selector: "libs_ui-components-inputs-multi_language-items", inputs: { configItems: { classPropertyName: "configItems", publicName: "configItems", isSignal: true, isRequired: false, transformFunction: null }, dataMultiLanguage: { classPropertyName: "dataMultiLanguage", publicName: "dataMultiLanguage", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreAdd: { classPropertyName: "ignoreAdd", publicName: "ignoreAdd", isSignal: true, isRequired: false, transformFunction: null }, labelAddItem: { classPropertyName: "labelAddItem", publicName: "labelAddItem", isSignal: true, isRequired: false, transformFunction: null }, singleLanguage: { classPropertyName: "singleLanguage", publicName: "singleLanguage", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataMultiLanguage: "dataMultiLanguageChange", outClick: "outClick", outFunctionControl: "outFunctionControl", outChangeValue: "outChangeValue" }, ngImport: i0, template: "<div class=\"mt-[4px]\">\n  @for (item of dataMultiLanguage(); track item) {\n    <div\n      class=\"flex w-full\"\n      [class.mt-[12px]]=\"!$first\">\n      <div\n        class=\"libs-ui-border-general\"\n        [class.w-full]=\"dataMultiLanguage().length < 2\"\n        [class.w-[calc(100%-28px)]]=\"dataMultiLanguage().length > 1\">\n        @if (configHeader(); as configHeader) {\n          <div class=\"flex bg-[#e6eef5] px-[12px] py-[4px]\">\n            <div class=\"libs-ui-font-h6m h-[32px] flex items-center\">\n              @let constHtmlTitle = configHeader.title ?? ' ';\n              {{ constHtmlTitle | translate }}\n            </div>\n            <div\n              (click)=\"handlerClick($event)\"\n              class=\"pl-[8px]\">\n              @if (configHeader.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: item; as itemMap) {\n                <libs_ui-components-inputs-valid\n                  [(item)]=\"itemMap\"\n                  [dataType]=\"configHeader.type && configHeader.type === 'number' ? 'int' : 'string'\"\n                  [fieldNameBind]=\"langDefault()\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [validRequired]=\"{ isRequired: configItems()[0].validRequired?.isRequired ?? false }\"\n                  [placeholder]=\"'i18n_enter_value'\"\n                  [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n                  [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n                  [maxValueNumber]=\"maxValueNumber()\"\n                  [fixedFloat]=\"15\"\n                  (outValueChange)=\"handlerChangeValue($event, 'input')\"\n                  (outFunctionsControl)=\"handlerFunctionsControlInputValid($event)\" />\n              }\n            </div>\n          </div>\n          <div class=\"px-[12px] pt-[8px] pb-[12px] flex w-full\">\n            <libs_ui-components-inputs-multi_language\n              class=\"w-full\"\n              [singleLanguage]=\"singleLanguage() || false\"\n              [multiLine]=\"false\"\n              [titleField]=\"configItems()[0].titleField || ''\"\n              [keyHeader]=\"configHeader.keyBindData ?? ''\"\n              [placeholder]=\"'i18n_import_content'\"\n              [classIncludeValue]=\"'libs-ui-font-h4r'\"\n              [data]=\"dataMultiKey()[$index]\"\n              [validRequired]=\"validRequiredWhenInputHasValue() || configItems()[0].validRequired\"\n              [dataLanguage]=\"item\"\n              [zIndex]=\"1203\"\n              [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n              [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n              [maxValueNumber]=\"maxValueNumber()\"\n              [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n              [viewType]=\"configItems()[0].type ? (configItems()[0].type === 'number' ? 'number' : configItems()[0].type === 'float' ? 'float' : 'text') : 'text'\"\n              (outEventMultiLanguage)=\"handlerChangeValue()\"\n              (outChangeValueInput)=\"handlerChangeValue()\"\n              (outFunctionsControl)=\"handlerFunctionsControlInputLanguage($event)\" />\n          </div>\n        }\n      </div>\n      @if (!$first) {\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-custom'\"\n          [buttonCustom]=\"{\n            configStepColor: {\n              text: '#071631',\n              text_hover: '#ee2d41',\n              text_active: '#ee2d41',\n              text_disable: '071631',\n            },\n            rootColor: '#071631',\n          }\"\n          [iconOnlyType]=\"true\"\n          [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n          [classIconLeft]=\"'libs-ui-icon-remove'\"\n          [classInclude]=\"'!p-0 ml-[8px] mt-[12px]'\"\n          (outClick)=\"handlerRemove($index)\" />\n      }\n    </div>\n  }\n  @if (!ignoreAdd()) {\n    <libs_ui-components-buttons-button\n      [type]=\"'button-link-primary'\"\n      [classIconLeft]=\"'libs-ui-icon-add mr-[8px]'\"\n      [classLabel]=\"'libs-ui-font-h5r'\"\n      [classInclude]=\"'!px-0 mt-[8px]'\"\n      [label]=\"labelAddItem() || ''\"\n      (outClick)=\"handlerAdd()\" />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageGetItemPipe, name: "LibsUiComponentsInputsMultiLanguageGetItemPipe" }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "ignoreShowMessageError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsMultiLanguageComponent, selector: "libs_ui-components-inputs-multi_language", inputs: ["optionsLanguage", "zIndex", "viewType", "singleLanguage", "data", "validRequired", "ignoreAdd", "titleField", "keyHeader", "textArea", "placeholder", "extendClass", "extendClassContent", "viewPosition", "ignoreRemove", "validMaxLength", "validMinLength", "countCharacters", "viewContent", "classIncludeKey", "classIncludeValue", "dataLanguage", "multiLine", "readonly", "acceptNegativeValue", "valueUpDownNumber", "maxValueNumber", "onlyAcceptNegativeValue", "validOneDefaultMultiLanguage"], outputs: ["dataChange", "ignoreAddChange", "extendClassChange", "dataLanguageChange", "outEventMultiLanguage", "outChangeTypeLanguage", "outFunctionsControl", "outChangeValueInput"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsMultiLanguageItemsComponent, isStandalone: true, selector: "libs_ui-components-inputs-multi_language-items", inputs: { configItems: { classPropertyName: "configItems", publicName: "configItems", isSignal: true, isRequired: false, transformFunction: null }, dataMultiLanguage: { classPropertyName: "dataMultiLanguage", publicName: "dataMultiLanguage", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreAdd: { classPropertyName: "ignoreAdd", publicName: "ignoreAdd", isSignal: true, isRequired: false, transformFunction: null }, labelAddItem: { classPropertyName: "labelAddItem", publicName: "labelAddItem", isSignal: true, isRequired: false, transformFunction: null }, singleLanguage: { classPropertyName: "singleLanguage", publicName: "singleLanguage", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, classIconAddLanguage: { classPropertyName: "classIconAddLanguage", publicName: "classIconAddLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataMultiLanguage: "dataMultiLanguageChange", outClick: "outClick", outFunctionControl: "outFunctionControl", outChangeValue: "outChangeValue" }, ngImport: i0, template: "<div class=\"flex flex-col gap-[8px]\">\n  @for (item of dataMultiLanguage(); track item) {\n    <div class=\"libs-ui-border-general w-full rounded-[4px]\">\n      @if (configHeader(); as configHeader) {\n        <div class=\"flex bg-[var(--libs-ui-color-light-2)] p-[12px] gap-[16px]\">\n          <div class=\"flex items-center gap-[8px] w-full\">\n            <div class=\"libs-ui-font-h6m h-[32px] flex items-center shrink-0\">\n              @let constHtmlTitle = configHeader.title ?? ' ';\n              {{ constHtmlTitle | translate }}\n            </div>\n            <div\n              class=\"w-full\"\n              (click)=\"handlerClick($event)\">\n              @if (configHeader.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: item; as itemMap) {\n                <libs_ui-components-inputs-valid\n                  [(item)]=\"itemMap\"\n                  [dataType]=\"configHeader.type && configHeader.type === 'number' ? 'int' : 'string'\"\n                  [fieldNameBind]=\"langDefault()\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [validRequired]=\"{ isRequired: configItems()[0].validRequired?.isRequired ?? false }\"\n                  [placeholder]=\"'i18n_enter_value'\"\n                  [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n                  [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n                  [maxValueNumber]=\"maxValueNumber()\"\n                  [fixedFloat]=\"15\"\n                  (outValueChange)=\"handlerChangeValue($event, 'input')\"\n                  (outFunctionsControl)=\"handlerFunctionsControlInputValid($event, $index)\" />\n              }\n            </div>\n          </div>\n          @if (!$first) {\n            <div class=\"flex items-center h-[32px]\">\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-custom'\"\n                [buttonCustom]=\"{\n                  configStepColor: {\n                    text: '#071631',\n                    text_hover: '#ee2d41',\n                    text_active: '#ee2d41',\n                    text_disable: '071631',\n                  },\n                  rootColor: '#071631',\n                }\"\n                [iconOnlyType]=\"true\"\n                [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [classInclude]=\"'!p-0'\"\n                (outClick)=\"handlerRemove($index)\" />\n            </div>\n          }\n        </div>\n        <div class=\"p-[12px] flex w-full\">\n          <libs_ui-components-inputs-multi_language\n            class=\"w-full\"\n            [singleLanguage]=\"singleLanguage()\"\n            [titleField]=\"configItems()[0].titleField || ''\"\n            [keyHeader]=\"configHeader.keyBindData ?? ''\"\n            [placeholder]=\"'i18n_import_content'\"\n            [classIncludeValue]=\"'libs-ui-font-h5r'\"\n            [data]=\"dataMultiKey()[$index]\"\n            [validRequired]=\"validRequiredWhenInputHasValue() || configItems()[0].validRequired\"\n            [dataLanguage]=\"item\"\n            [zIndex]=\"zIndex() ?? 1203\"\n            [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n            [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n            [maxValueNumber]=\"maxValueNumber()\"\n            [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n            [classIconAddLanguage]=\"classIconAddLanguage()\"\n            [viewType]=\"configItems()[0].type ? (configItems()[0].type === 'number' ? 'number' : configItems()[0].type === 'float' ? 'float' : 'text') : 'text'\"\n            (outEventMultiLanguage)=\"handlerChangeValue()\"\n            (outChangeValueInput)=\"handlerChangeValue()\"\n            (outFunctionsControl)=\"handlerFunctionsControlInputLanguage($event, $index)\" />\n        </div>\n      }\n    </div>\n  }\n  @if (!ignoreAdd()) {\n    <libs_ui-components-buttons-button\n      [type]=\"'button-link-primary'\"\n      [classIconLeft]=\"'libs-ui-icon-add'\"\n      [classLabel]=\"'libs-ui-font-h6mi'\"\n      [classInclude]=\"'!px-0 !py-[2px]'\"\n      [label]=\"labelAddItem() || ''\"\n      (outClick)=\"handlerAdd()\" />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsInputsMultiLanguageGetItemPipe, name: "LibsUiComponentsInputsMultiLanguageGetItemPipe" }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "ignoreShowMessageError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsMultiLanguageComponent, selector: "libs_ui-components-inputs-multi_language", inputs: ["optionsLanguage", "zIndex", "viewType", "singleLanguage", "data", "validRequired", "ignoreAdd", "titleField", "keyHeader", "textArea", "placeholder", "extendClass", "extendClassContent", "viewPosition", "ignoreRemove", "validMaxLength", "validMinLength", "countCharacters", "viewContent", "classIncludeKey", "classIncludeValue", "dataLanguage", "readonly", "acceptNegativeValue", "valueUpDownNumber", "maxValueNumber", "onlyAcceptNegativeValue", "validOneDefaultMultiLanguage", "classIconAddLanguage"], outputs: ["dataChange", "ignoreAddChange", "extendClassChange", "dataLanguageChange", "outEventMultiLanguage", "outChangeTypeLanguage", "outFunctionsControl", "outChangeValueInput"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMultiLanguageItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-multi_language-items', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsInputsMultiLanguageGetItemPipe, LibsUiComponentsInputsValidComponent, LibsUiComponentsInputsMultiLanguageComponent, LibsUiComponentsButtonsButtonComponent], template: "<div class=\"mt-[4px]\">\n  @for (item of dataMultiLanguage(); track item) {\n    <div\n      class=\"flex w-full\"\n      [class.mt-[12px]]=\"!$first\">\n      <div\n        class=\"libs-ui-border-general\"\n        [class.w-full]=\"dataMultiLanguage().length < 2\"\n        [class.w-[calc(100%-28px)]]=\"dataMultiLanguage().length > 1\">\n        @if (configHeader(); as configHeader) {\n          <div class=\"flex bg-[#e6eef5] px-[12px] py-[4px]\">\n            <div class=\"libs-ui-font-h6m h-[32px] flex items-center\">\n              @let constHtmlTitle = configHeader.title ?? ' ';\n              {{ constHtmlTitle | translate }}\n            </div>\n            <div\n              (click)=\"handlerClick($event)\"\n              class=\"pl-[8px]\">\n              @if (configHeader.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: item; as itemMap) {\n                <libs_ui-components-inputs-valid\n                  [(item)]=\"itemMap\"\n                  [dataType]=\"configHeader.type && configHeader.type === 'number' ? 'int' : 'string'\"\n                  [fieldNameBind]=\"langDefault()\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [validRequired]=\"{ isRequired: configItems()[0].validRequired?.isRequired ?? false }\"\n                  [placeholder]=\"'i18n_enter_value'\"\n                  [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n                  [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n                  [maxValueNumber]=\"maxValueNumber()\"\n                  [fixedFloat]=\"15\"\n                  (outValueChange)=\"handlerChangeValue($event, 'input')\"\n                  (outFunctionsControl)=\"handlerFunctionsControlInputValid($event)\" />\n              }\n            </div>\n          </div>\n          <div class=\"px-[12px] pt-[8px] pb-[12px] flex w-full\">\n            <libs_ui-components-inputs-multi_language\n              class=\"w-full\"\n              [singleLanguage]=\"singleLanguage() || false\"\n              [multiLine]=\"false\"\n              [titleField]=\"configItems()[0].titleField || ''\"\n              [keyHeader]=\"configHeader.keyBindData ?? ''\"\n              [placeholder]=\"'i18n_import_content'\"\n              [classIncludeValue]=\"'libs-ui-font-h4r'\"\n              [data]=\"dataMultiKey()[$index]\"\n              [validRequired]=\"validRequiredWhenInputHasValue() || configItems()[0].validRequired\"\n              [dataLanguage]=\"item\"\n              [zIndex]=\"1203\"\n              [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n              [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n              [maxValueNumber]=\"maxValueNumber()\"\n              [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n              [viewType]=\"configItems()[0].type ? (configItems()[0].type === 'number' ? 'number' : configItems()[0].type === 'float' ? 'float' : 'text') : 'text'\"\n              (outEventMultiLanguage)=\"handlerChangeValue()\"\n              (outChangeValueInput)=\"handlerChangeValue()\"\n              (outFunctionsControl)=\"handlerFunctionsControlInputLanguage($event)\" />\n          </div>\n        }\n      </div>\n      @if (!$first) {\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-custom'\"\n          [buttonCustom]=\"{\n            configStepColor: {\n              text: '#071631',\n              text_hover: '#ee2d41',\n              text_active: '#ee2d41',\n              text_disable: '071631',\n            },\n            rootColor: '#071631',\n          }\"\n          [iconOnlyType]=\"true\"\n          [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n          [classIconLeft]=\"'libs-ui-icon-remove'\"\n          [classInclude]=\"'!p-0 ml-[8px] mt-[12px]'\"\n          (outClick)=\"handlerRemove($index)\" />\n      }\n    </div>\n  }\n  @if (!ignoreAdd()) {\n    <libs_ui-components-buttons-button\n      [type]=\"'button-link-primary'\"\n      [classIconLeft]=\"'libs-ui-icon-add mr-[8px]'\"\n      [classLabel]=\"'libs-ui-font-h5r'\"\n      [classInclude]=\"'!px-0 mt-[8px]'\"\n      [label]=\"labelAddItem() || ''\"\n      (outClick)=\"handlerAdd()\" />\n  }\n</div>\n" }]
+            args: [{ selector: 'libs_ui-components-inputs-multi_language-items', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsInputsMultiLanguageGetItemPipe, LibsUiComponentsInputsValidComponent, LibsUiComponentsInputsMultiLanguageComponent, LibsUiComponentsButtonsButtonComponent], template: "<div class=\"flex flex-col gap-[8px]\">\n  @for (item of dataMultiLanguage(); track item) {\n    <div class=\"libs-ui-border-general w-full rounded-[4px]\">\n      @if (configHeader(); as configHeader) {\n        <div class=\"flex bg-[var(--libs-ui-color-light-2)] p-[12px] gap-[16px]\">\n          <div class=\"flex items-center gap-[8px] w-full\">\n            <div class=\"libs-ui-font-h6m h-[32px] flex items-center shrink-0\">\n              @let constHtmlTitle = configHeader.title ?? ' ';\n              {{ constHtmlTitle | translate }}\n            </div>\n            <div\n              class=\"w-full\"\n              (click)=\"handlerClick($event)\">\n              @if (configHeader.keyBindData | LibsUiComponentsInputsMultiLanguageGetItemPipe: item; as itemMap) {\n                <libs_ui-components-inputs-valid\n                  [(item)]=\"itemMap\"\n                  [dataType]=\"configHeader.type && configHeader.type === 'number' ? 'int' : 'string'\"\n                  [fieldNameBind]=\"langDefault()\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [validRequired]=\"{ isRequired: configItems()[0].validRequired?.isRequired ?? false }\"\n                  [placeholder]=\"'i18n_enter_value'\"\n                  [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n                  [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n                  [maxValueNumber]=\"maxValueNumber()\"\n                  [fixedFloat]=\"15\"\n                  (outValueChange)=\"handlerChangeValue($event, 'input')\"\n                  (outFunctionsControl)=\"handlerFunctionsControlInputValid($event, $index)\" />\n              }\n            </div>\n          </div>\n          @if (!$first) {\n            <div class=\"flex items-center h-[32px]\">\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-custom'\"\n                [buttonCustom]=\"{\n                  configStepColor: {\n                    text: '#071631',\n                    text_hover: '#ee2d41',\n                    text_active: '#ee2d41',\n                    text_disable: '071631',\n                  },\n                  rootColor: '#071631',\n                }\"\n                [iconOnlyType]=\"true\"\n                [popover]=\"{ config: { content: 'i18n_delete', zIndex: 1205 } }\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [classInclude]=\"'!p-0'\"\n                (outClick)=\"handlerRemove($index)\" />\n            </div>\n          }\n        </div>\n        <div class=\"p-[12px] flex w-full\">\n          <libs_ui-components-inputs-multi_language\n            class=\"w-full\"\n            [singleLanguage]=\"singleLanguage()\"\n            [titleField]=\"configItems()[0].titleField || ''\"\n            [keyHeader]=\"configHeader.keyBindData ?? ''\"\n            [placeholder]=\"'i18n_import_content'\"\n            [classIncludeValue]=\"'libs-ui-font-h5r'\"\n            [data]=\"dataMultiKey()[$index]\"\n            [validRequired]=\"validRequiredWhenInputHasValue() || configItems()[0].validRequired\"\n            [dataLanguage]=\"item\"\n            [zIndex]=\"zIndex() ?? 1203\"\n            [acceptNegativeValue]=\"acceptNegativeValue() ?? true\"\n            [valueUpDownNumber]=\"valueUpDownNumber() || 1\"\n            [maxValueNumber]=\"maxValueNumber()\"\n            [onlyAcceptNegativeValue]=\"onlyAcceptNegativeValue()\"\n            [classIconAddLanguage]=\"classIconAddLanguage()\"\n            [viewType]=\"configItems()[0].type ? (configItems()[0].type === 'number' ? 'number' : configItems()[0].type === 'float' ? 'float' : 'text') : 'text'\"\n            (outEventMultiLanguage)=\"handlerChangeValue()\"\n            (outChangeValueInput)=\"handlerChangeValue()\"\n            (outFunctionsControl)=\"handlerFunctionsControlInputLanguage($event, $index)\" />\n        </div>\n      }\n    </div>\n  }\n  @if (!ignoreAdd()) {\n    <libs_ui-components-buttons-button\n      [type]=\"'button-link-primary'\"\n      [classIconLeft]=\"'libs-ui-icon-add'\"\n      [classLabel]=\"'libs-ui-font-h6mi'\"\n      [classInclude]=\"'!px-0 !py-[2px]'\"\n      [label]=\"labelAddItem() || ''\"\n      (outClick)=\"handlerAdd()\" />\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**