@libs-ui/components-list 0.2.36

package/fesm2022/libs-ui-components-list.mjs

@@ -0,0 +1,1077 @@
+import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, Directive, Pipe, signal, model, output, viewChild, Component, ChangeDetectionStrategy, effect } from '@angular/core';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { LibsUiComponentsInputsSearchComponent } from '@libs-ui/components-inputs-search';
+import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
+import { deleteUnicode, CHARACTER_DATA_EMPTY, isEmpty, isNil, cloneDeep, escapeHtml, ERROR_MESSAGE_EMPTY_VALID } from '@libs-ui/utils';
+import * as i2 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { Subject, interval, timer, takeUntil as takeUntil$1 } from 'rxjs';
+import * as i1 from '@iharbeck/ngx-virtual-scroller';
+import { VirtualScrollerComponent, VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+import { LibsUiComponentsButtonsSortArrowComponent } from '@libs-ui/components-buttons-sort';
+import { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';
+import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
+import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
+import { LibsUiHttpRequestService } from '@libs-ui/services-http-request';
+import { takeUntil, skipWhile, take } from 'rxjs/operators';
+
+class LibsUiComponentsListHighlightKeySearchDirective {
+    isHighlight = input(undefined);
+    keySearch = input(undefined);
+    classHighlight = input('libs-ui-list-highlight-text-search');
+    elementRef = inject(ElementRef);
+    ngAfterViewInit() {
+        if (!this.elementRef || !this.isHighlight() || !this.keySearch()) {
+            return;
+        }
+        this.handlerHighlight(this.elementRef.nativeElement);
+    }
+    handlerHighlight(element) {
+        if (!element || element === null) {
+            return;
+        }
+        const children = Array.prototype.slice.call(element.childNodes);
+        if (!children.length) {
+            return;
+        }
+        children.forEach(item => {
+            if (item.nodeType === Node.TEXT_NODE) {
+                this.checkAndReplace(item);
+                return;
+            }
+            if (item.nodeType === Node.ELEMENT_NODE) {
+                this.handlerHighlight(item);
+            }
+        });
+    }
+    checkAndReplace(node) {
+        let nodeVal = node.nodeValue;
+        const parentNode = node.parentNode;
+        let textNode = null;
+        if (!parentNode || !nodeVal) {
+            return;
+        }
+        const textToHighlight = deleteUnicode(this.keySearch()?.trim() || '').toLowerCase();
+        let isFirst = true;
+        while (true) {
+            const foundIndex = deleteUnicode(nodeVal).toLowerCase().indexOf(textToHighlight);
+            if (foundIndex < 0) {
+                if (isFirst) {
+                    break;
+                }
+                if (nodeVal) {
+                    textNode = document.createTextNode(nodeVal);
+                    parentNode.insertBefore(textNode, node);
+                }
+                parentNode.removeChild(node);
+                break;
+            }
+            isFirst = false;
+            const start = nodeVal.substring(0, foundIndex);
+            const matched = nodeVal.substring(foundIndex, foundIndex + textToHighlight.length);
+            if (start) {
+                textNode = document.createTextNode(start);
+                parentNode.insertBefore(textNode, node);
+            }
+            const span = document.createElement("span");
+            if (!span.classList.contains(this.classHighlight())) {
+                span.classList.add(this.classHighlight());
+            }
+            span.appendChild(document.createTextNode(matched));
+            parentNode.insertBefore(span, node);
+            nodeVal = nodeVal.substring(foundIndex + textToHighlight.length);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListHighlightKeySearchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsListHighlightKeySearchDirective, isStandalone: true, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: { isHighlight: { classPropertyName: "isHighlight", publicName: "isHighlight", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, classHighlight: { classPropertyName: "classHighlight", publicName: "classHighlight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListHighlightKeySearchDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiComponentsListHighlightKeySearchDirective]',
+                    standalone: true
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class MoLibsSharedPipesCallFunctionInTemplatePipe {
+    async transform(value, functionCall, item, lang, otherData) {
+        if (!functionCall) {
+            return this.getValueOfType(value);
+        }
+        return this.getValueOfType(await functionCall(value, item, lang, otherData));
+    }
+    async getValueOfType(value) {
+        if ('object' === typeof value || value instanceof Array || typeof value === 'boolean') {
+            return value !== null ? value : CHARACTER_DATA_EMPTY;
+        }
+        return value ? `${value}` : value === 0 ? '0' : CHARACTER_DATA_EMPTY;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MoLibsSharedPipesCallFunctionInTemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MoLibsSharedPipesCallFunctionInTemplatePipe, isStandalone: true, name: "MoLibsSharedPipesCallFunctionInTemplate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MoLibsSharedPipesCallFunctionInTemplatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'MoLibsSharedPipesCallFunctionInTemplate',
+                    standalone: true
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiCheckSelectedByKeyPipe {
+    transform(value, multiKeys, length) {
+        if (!multiKeys || !(multiKeys instanceof Array) || !multiKeys.length || !length) {
+            return false;
+        }
+        return multiKeys.some(key => key === value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiCheckSelectedByKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiCheckSelectedByKeyPipe, isStandalone: true, name: "LibsUiCheckSelectedByKeyPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiCheckSelectedByKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiCheckSelectedByKeyPipe',
+                    standalone: true
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
+class LibsUiComponentsListTemplatesComponentAbstract {
+    /* PROPERTY */
+    loading = signal(true);
+    heightViewPort = signal(0);
+    store = signal([]);
+    items = signal([]);
+    loadedLastItem = signal(false);
+    hasScroll = signal(false);
+    fieldKeyDefault = signal('id');
+    fieldKey = signal('id');
+    timeAutoScrollItemSelected = signal(0);
+    pagingStore = signal(undefined);
+    heightItem = signal(0);
+    timeIntervalIntervalSetHeightViewPort = signal(0);
+    timeIntervalCheckScroll = signal(250);
+    onDestroy = new Subject();
+    intervalSetHeightViewPortSubscription;
+    intervalCheckScrollSubscription;
+    /* INPUT */
+    functionCustomAddDataToStore = input();
+    functionGetItemAutoAddList = input();
+    paddingLeftItem = input(undefined);
+    maxItemShow = input(0);
+    searchConfig = input();
+    config = input();
+    keySearch = model('');
+    dropdownTabKeyActive = input();
+    isSearchOnline = input(false);
+    onSearch = input();
+    onRefresh = input();
+    onSetHiddenItemByKey = input();
+    onRemoveItems = input();
+    onSetDataStore = input();
+    onUpdateMultiKeySelectedGroup = input();
+    onItemChangeUnSelect = input();
+    clickExactly = input();
+    keySelected = model(); // sử dụng cho type radio,text.
+    multiKeySelected = model(); // sử dụng cho type cho phép chọn nhiều.
+    keysDisableItem = input();
+    keysHiddenItem = model();
+    disable = input();
+    disableLabel = input();
+    zIndex = input();
+    loadingIconSize = input();
+    resetKeyWhenSelectAllKeyDropdown = input();
+    ignoreClassDisableDefaultWhenUseKeysDisableItem = input(); // bỏ chế độ disable item trên html để disable từng phần trong rows
+    templateRefSearchNoData = input(undefined);
+    /* OUTPUT */
+    outSortSingleSelect = output();
+    outSelectKey = output(); // sử dụng cho type radio,text.
+    outSelectMultiKey = output(); // sử dụng cho type cho phép chọn nhiều.
+    outUnSelectMultiKey = output(); // sử dụng cho type cho phép chọn nhiều.
+    outFieldKey = output();
+    outChangeView = output();
+    outLoading = output();
+    outChangStageFlagMousePopover = output();
+    outLoadItemsComplete = output();
+    /* VIEW CHILD */
+    itemRef = viewChild('itemRef');
+    /* INJECT */
+    translateService = inject(TranslateService);
+    httpRequestService = inject(LibsUiHttpRequestService);
+    constructor() {
+        this.outLoading.emit(this.loading());
+    }
+    ngOnInit() {
+        this.onSearch()?.pipe(takeUntil(this.onDestroy)).subscribe((keySearch) => {
+            this.keySearch.set(keySearch);
+            // if (this.elementScroll) {
+            //   this.elementScroll.scrollTop = 0;
+            // }
+            this.processSearch();
+        });
+        this.onRefresh()?.pipe(skipWhile(() => this.loading()), takeUntil(this.onDestroy)).subscribe(() => {
+            if (this.dropdownTabKeyActive()) {
+                this.items.set([]);
+                this.store.set([]);
+            }
+            this.callApiByService(true);
+        });
+        this.onItemChangeUnSelect()?.pipe(takeUntil(this.onDestroy)).subscribe((item) => {
+            if (!item) {
+                return;
+            }
+            this.processKeyChangeUnSelect(item);
+        });
+        this.onSetDataStore()?.pipe(takeUntil(this.onDestroy)).subscribe((data) => {
+            console.log('vaoday', data);
+            this.setDataStore(data);
+        });
+        this.onSetHiddenItemByKey()?.pipe(takeUntil(this.onDestroy)).subscribe(this.setHiddenItemByKey.bind(this));
+        this.outFieldKey.emit(getFieldKeyByType(this.config(), this.fieldKeyDefault()));
+        this.onRemoveItems()?.pipe(takeUntil(this.onDestroy)).subscribe(this.removeItems.bind(this));
+    }
+    setDataStore(data) {
+        if (!data || !data.length) {
+            return;
+        }
+        if (this.config()?.type === 'checkbox') {
+            data.forEach(item => (item.isAddNew = true));
+        }
+        this.functionCustomAddDataToStore()?.(data, this.store());
+        if (!this.functionCustomAddDataToStore()) {
+            this.store.update(items => {
+                return [...data, ...items];
+            });
+        }
+        this.processData();
+    }
+    getFieldKey() {
+        let fieldKey;
+        switch (this.config()?.type) {
+            case 'group':
+                fieldKey = this.config()?.configTemplateGroup?.fieldKey;
+                break;
+            case 'tag':
+                fieldKey = this.config()?.configTemplateTag?.fieldKey;
+                break;
+            case 'text':
+                fieldKey = this.config()?.configTemplateText?.fieldKey;
+                break;
+            case 'checkbox':
+                fieldKey = this.config()?.configTemplateCheckbox?.fieldKey;
+                break;
+            case 'radio':
+                fieldKey = this.config()?.configTemplateRadio?.fieldKey;
+                break;
+        }
+        return fieldKey || 'id';
+    }
+    removeItems(keys) {
+        const fieldKey = this.getFieldKey();
+        [this.store(), this.items()].forEach(element => {
+            if (this.config()?.type === 'group') {
+                element.forEach(item => {
+                    this.removeItem(item[this.config()?.configTemplateGroup?.fieldGetItems || 'items'], keys, fieldKey);
+                });
+                return;
+            }
+            this.removeItem(element, keys, fieldKey);
+        });
+        this.processData();
+    }
+    removeItem(data, keys, fieldKey) {
+        if (!data || !data.length) {
+            return;
+        }
+        keys.forEach(key => {
+            const index = data.findIndex(item => item[fieldKey] === key);
+            if (index > -1) {
+                data.splice(index, 1);
+            }
+        });
+    }
+    setHeightViewPort(callBackCalculatorHeightSuccess) {
+        console.log('setHeightViewPort');
+        const lengthItems = this.getLengthItem();
+        if (!lengthItems) {
+            this.outChangeView.emit([...this.items()]);
+            if (this.heightItem()) {
+                this.heightViewPort.set(this.heightItem());
+            }
+            callBackCalculatorHeightSuccess?.();
+            return;
+        }
+        console.log('this.maxItemShow()', this.maxItemShow(), lengthItems);
+        const heightViewPort = this.getHeightGroupHasLine() + (lengthItems < this.maxItemShow() ? lengthItems * this.heightItem() : this.maxItemShow() * this.heightItem()) + (this.config()?.configTemplateGroup?.configCheckboxCheckAll ? 27 : 0) + (this.config()?.configTemplateGroup?.configButtonSelectAndUndSelectItem ? 27 : 0);
+        if (!this.maxItemShow()) {
+            this.heightViewPort.set(0);
+        }
+        if (this.heightItem() > 13) {
+            if (heightViewPort && heightViewPort !== this.heightViewPort()) {
+                this.heightViewPort.set(heightViewPort);
+            }
+            this.outChangeView.emit([...this.items()]);
+            callBackCalculatorHeightSuccess?.();
+            return;
+        }
+        this.intervalSetHeightViewPortSubscription?.unsubscribe();
+        this.intervalSetHeightViewPortSubscription = interval(this.timeIntervalIntervalSetHeightViewPort()).pipe(takeUntil(this.onDestroy)).subscribe(() => {
+            if (!this.itemRef() || !this.itemRef()?.nativeElement) {
+                return;
+            }
+            this.heightItem.set(this.itemRef()?.nativeElement.getBoundingClientRect().height);
+            if (this.heightItem() < 13) {
+                return;
+            }
+            this.intervalSetHeightViewPortSubscription?.unsubscribe();
+            this.setHeightViewPort(callBackCalculatorHeightSuccess);
+        });
+    }
+    setHiddenItemByKey(keys) {
+        this.keysHiddenItem.set(keys);
+        if (this.store() && this.store().length) {
+            this.processData(false);
+        }
+    }
+    checkViewPortScroll(callBack) {
+        const pre = this.hasScroll();
+        this.intervalCheckScrollSubscription?.unsubscribe();
+        this.intervalCheckScrollSubscription = interval(this.timeIntervalCheckScroll()).pipe(take(5)).subscribe(() => {
+            this.hasScroll.set(false);
+            if (this.items() && !this.items().length && pre && !this.hasScroll()) {
+                callBack?.(pre, this.hasScroll());
+                this.intervalCheckScrollSubscription?.unsubscribe();
+            }
+            // if (!this.elementScroll) {
+            //   return;
+            // }
+            // if (this.elementScroll.offsetHeight < this.elementScroll.scrollHeight) {
+            //   this.hasScroll.set(true);
+            // }
+            callBack?.(pre, this.hasScroll());
+            this.intervalCheckScrollSubscription?.unsubscribe();
+        });
+    }
+    async callApiByService(firstCall = true) {
+        const config = this.config();
+        if (!config) {
+            return;
+        }
+        try {
+            const { httpRequestData, ignoreShowDataWhenNotSearch } = config;
+            if (!httpRequestData || (ignoreShowDataWhenNotSearch && !this.keySearch())) {
+                this.loading.set(false);
+                this.outLoading.emit(this.loading());
+                this.loadedLastItem.set(true);
+                if (ignoreShowDataWhenNotSearch && !this.keySearch()) {
+                    this.items.set([]);
+                    this.store.set([]);
+                    this.processData(true);
+                }
+                return;
+            }
+            this.loading.set(true);
+            this.outLoading.emit(this.loading());
+            const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestData;
+            if (firstCall) {
+                const loadedLastItem = this.httpRequestService.updateArguments(argumentsValue, { ...this.fakeResponseApi(), dropdownTabKeyActive: this.dropdownTabKeyActive() }, this.pagingStore() || {}, this.keySearch(), this.isSearchOnline(), this.loadedLastItem(), guideAutoUpdateArgumentsValue);
+                this.loadedLastItem.set(loadedLastItem);
+            }
+            const result = await this.httpRequestService.callApi(httpRequestData);
+            this.pagingStore.set(result.paging);
+            if (!this.pagingStore) {
+                this.loadedLastItem.set(true);
+            }
+            const loadedLastItem = this.httpRequestService.updateArguments(argumentsValue, { ...result, dropdownTabKeyActive: this.dropdownTabKeyActive() }, this.pagingStore() || {}, this.keySearch(), this.isSearchOnline(), this.loadedLastItem(), guideAutoUpdateArgumentsValue);
+            this.loadedLastItem.set(loadedLastItem);
+            if (firstCall) {
+                this.store.set(result.data || []);
+                if (this.functionGetItemAutoAddList()) {
+                    this.store.update(items => [...(this.functionGetItemAutoAddList()?.() || []), ...items]);
+                }
+                this.processData(true);
+                return;
+            }
+            this.store.update(items => [...items, ...result.data]);
+            this.processData(false);
+        }
+        catch (error) {
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            console.log(error);
+        }
+    }
+    fakeResponseApi() {
+        this.loadedLastItem.set(false);
+        this.pagingStore.set({});
+        return this.httpRequestService.fakeResponsePagingApi();
+    }
+    buildValueByConfig(item, configTemplate) {
+        const ref = item.ref || {};
+        const label = ref.label || ref.title || ref.value || ref.name || ' ';
+        if (typeof label === 'string') {
+            item.fieldLabel = this.translateService.instant(ref.label || ref.title || ref.value || ref.name || ' ');
+        }
+        if (configTemplate?.getValue) {
+            const value = configTemplate.getValue(ref);
+            item.fieldLabel = value ? this.translateService.instant(`${value}`) : '';
+        }
+        if (configTemplate?.getPopover) {
+            item.PopoverLabel = configTemplate?.getPopover(item);
+        }
+        if (!configTemplate?.rows) {
+            return item.fieldLabel;
+        }
+        let textSearch = item.fieldLabel || '';
+        configTemplate.rows.forEach((row, indexRow) => {
+            const fieldNameRow = `fieldLabelRow${indexRow}`;
+            item[fieldNameRow] = row.getValue && row.getValue(ref);
+            item[`fieldRowStylesDynamicCols${indexRow}`] = row.getRowStylesDynamicCols && row.getRowStylesDynamicCols(ref);
+            item[`fieldRowAvatarConfig${indexRow}`] = row.getAvatarConfig && row.getAvatarConfig(ref);
+            if (row.cols && row.cols.length) {
+                row.cols.forEach((col, indexCol) => {
+                    const fieldNameCol = `fieldLabelCol${indexRow}${indexCol}`;
+                    item[fieldNameCol] = col.getValue && col.getValue(ref, indexCol);
+                    item[`fieldColPopover${indexRow}${indexCol}`] = col.getPopover && col.getPopover(ref, indexCol);
+                    item[`fieldBadge${indexRow}${indexCol}`] = col.getConfigBadge && col.getConfigBadge(ref, indexCol);
+                    item[`fieldColStylesDynamic${indexRow}${indexCol}`] = col.getStylesDynamicCol;
+                    item[`fieldColButton${indexRow}${indexCol}`] = col.getButton && col.getButton(ref, indexCol);
+                    item[`fieldColSwitch${indexRow}${indexCol}`] = col.getLabelSwitch && col.getLabelSwitch(ref, indexCol);
+                    item[`fieldColAvatarConfig${indexRow}${indexCol}`] = col.getAvatarConfig && col.getAvatarConfig(ref);
+                    textSearch = ` ${textSearch} ${item[fieldNameCol] || ''} `;
+                });
+            }
+            textSearch = ` ${textSearch} ${item[fieldNameRow] || ''} `;
+        });
+        return textSearch || ' ';
+    }
+    handlerChangStageFlagMouse(flag) {
+        this.outChangStageFlagMousePopover.emit(flag);
+    }
+    getHeightGroupHasLine() {
+        return 0;
+    }
+    ngOnDestroy() {
+        clearTimeout(this.timeAutoScrollItemSelected());
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTemplatesComponentAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: LibsUiComponentsListTemplatesComponentAbstract, inputs: { functionCustomAddDataToStore: { classPropertyName: "functionCustomAddDataToStore", publicName: "functionCustomAddDataToStore", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemAutoAddList: { classPropertyName: "functionGetItemAutoAddList", publicName: "functionGetItemAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, dropdownTabKeyActive: { classPropertyName: "dropdownTabKeyActive", publicName: "dropdownTabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, onRefresh: { classPropertyName: "onRefresh", publicName: "onRefresh", isSignal: true, isRequired: false, transformFunction: null }, onSetHiddenItemByKey: { classPropertyName: "onSetHiddenItemByKey", publicName: "onSetHiddenItemByKey", isSignal: true, isRequired: false, transformFunction: null }, onRemoveItems: { classPropertyName: "onRemoveItems", publicName: "onRemoveItems", isSignal: true, isRequired: false, transformFunction: null }, onSetDataStore: { classPropertyName: "onSetDataStore", publicName: "onSetDataStore", isSignal: true, isRequired: false, transformFunction: null }, onUpdateMultiKeySelectedGroup: { classPropertyName: "onUpdateMultiKeySelectedGroup", publicName: "onUpdateMultiKeySelectedGroup", isSignal: true, isRequired: false, transformFunction: null }, onItemChangeUnSelect: { classPropertyName: "onItemChangeUnSelect", publicName: "onItemChangeUnSelect", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, multiKeySelected: { classPropertyName: "multiKeySelected", publicName: "multiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, loadingIconSize: { classPropertyName: "loadingIconSize", publicName: "loadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySearch: "keySearchChange", keySelected: "keySelectedChange", multiKeySelected: "multiKeySelectedChange", keysHiddenItem: "keysHiddenItemChange", outSortSingleSelect: "outSortSingleSelect", outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outLoading: "outLoading", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTemplatesComponentAbstract, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesComponentAbstract {
+    configTemplateText = signal(undefined);
+    virtualScrollerComponent = viewChild(VirtualScrollerComponent);
+    ngOnInit() {
+        if (isEmpty(this.config()?.configTemplateText)) {
+            return;
+        }
+        super.ngOnInit();
+        this.configTemplateText.set(this.config()?.configTemplateText);
+        this.fieldKey.set(this.configTemplateText()?.fieldKey ?? this.fieldKeyDefault());
+        this.callApiByService();
+    }
+    handlerScrollBottom() {
+        if (this.loadedLastItem()) {
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            return;
+        }
+        if (this.loading() || this.loadedLastItem()) {
+            return;
+        }
+        this.loading.set(true);
+        this.outLoading.emit(this.loading());
+        this.callApiByService(false);
+    }
+    processSearch() {
+        if (!this.isSearchOnline()) {
+            return this.processData(true);
+        }
+        this.callApiByService(true);
+    }
+    handlerClickRelative(e, item) {
+        e.stopPropagation();
+        if (this.clickExactly()) {
+            return;
+        }
+        this.handlerSelectItem(e, item);
+    }
+    processKeyChangeUnSelect(item) {
+        if (isNil(item[this.fieldKey()]) || item[this.fieldKey()] === '' || this.keySelected() !== item[this.fieldKey()]) {
+            return;
+        }
+        this.keySelected.set('');
+        this.outSelectKey.emit(undefined);
+    }
+    handlerSelectItem(e, item, action, ignoreDisable = false) {
+        if (e instanceof Event) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        if (item.disable) {
+            return;
+        }
+        if (this.disable() && !ignoreDisable) {
+            return;
+        }
+        if (typeof e === 'string' && e !== 'click') {
+            return;
+        }
+        if (!item || (this.keysDisableItem() && this.keysDisableItem()?.some(key => key === item[this.fieldKey()]))) {
+            return;
+        }
+        if (action) {
+            action(item.ref);
+            this.items().forEach(item => {
+                this.buildValueByConfig(item, this.configTemplateText());
+            });
+            return;
+        }
+        if (this.configTemplateText()?.actionSort) {
+            const currentItemSort = this.configTemplateText()?.itemSort;
+            const mode = currentItemSort?.fieldSort !== item[this.fieldKey()] ? 'asc' : currentItemSort?.mode === 'desc' ? 'asc' : 'desc';
+            const newSort = {
+                fieldSort: item[this.fieldKey()],
+                mode,
+                modeNumber: mode === 'asc' ? 1 : 2,
+                reset: () => 0
+            };
+            this.configTemplateText.update(item => {
+                if (!item) {
+                    return;
+                }
+                return { ...item, itemSort: newSort };
+            });
+            this.outSortSingleSelect.emit(this.configTemplateText()?.itemSort || newSort);
+        }
+        this.keySelected.set(item[this.fieldKey()]);
+        this.outSelectKey.emit({ key: this.keySelected(), item, isClickManual: true });
+    }
+    handlerSort(itemSort) {
+        itemSort.reset = () => 0;
+        this.configTemplateText.update(item => {
+            if (!item) {
+                return;
+            }
+            return { ...item, itemSort: itemSort };
+        });
+        this.outSortSingleSelect.emit(this.configTemplateText()?.itemSort || itemSort);
+    }
+    processData(replace) {
+        const itemByKeySearch = [];
+        const keysHidden = this.keysHiddenItem() || [];
+        if (replace) {
+            this.items.set([]);
+        }
+        this.store().forEach((item) => {
+            const dataStore = cloneDeep(item);
+            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            dataStore.ref = item;
+            if (key === undefined) {
+                const text = deleteUnicode(this.buildValueByConfig(dataStore, this.configTemplateText())).toLocaleLowerCase();
+                const textEscape = escapeHtml(text);
+                const keySearch = deleteUnicode(escapeHtml(this.keySearch().toLocaleLowerCase()));
+                if (((this.isSearchOnline() && this.config()?.httpRequestData?.serviceName && this.config()?.httpRequestData?.serviceName !== 'commonDataStaticService' && !this.config()?.httpRequestData?.serviceOther) ||
+                    (text && (text.includes(keySearch) || textEscape.includes(keySearch)))) && (replace || (!replace && !this.items().find(dataItem => dataItem[this.fieldKey()] === dataStore[this.fieldKey()]))) && !itemByKeySearch.find(dataItem => dataItem[this.fieldKey()] === dataStore[this.fieldKey()])) {
+                    dataStore.hrefButton = this.configTemplateText()?.getHrefButton?.(dataStore);
+                    dataStore.classItem = item.classItem || this.configTemplateText()?.getClassItem?.(dataStore);
+                    dataStore.classInclude = dataStore.classInclude || this.configTemplateText()?.getClassIncludePopover?.(dataStore);
+                    dataStore.buttonLeftConfig = this.configTemplateText()?.getConfigButtonLeft?.(dataStore);
+                    dataStore.classIconLeft = dataStore.classIconLeft || this.configTemplateText()?.getClassIconLeft?.(dataStore);
+                    dataStore.hoverDanger = dataStore.hoverDanger || this.configTemplateText()?.getConfigHoverDanger?.(dataStore);
+                    dataStore.avatarConfig = this.configTemplateText()?.getAvatarConfig?.(dataStore);
+                    dataStore.itemAlignStart = dataStore.itemAlignStart || this.configTemplateText()?.getConfigAlignStart?.(dataStore);
+                    itemByKeySearch.push(dataStore);
+                }
+                return;
+            }
+            const indexItemRemove = this.items().findIndex(item => item[this.fieldKey()] === key);
+            if (indexItemRemove > -1) {
+                this.items().splice(indexItemRemove, 1);
+            }
+        });
+        const checkLoadItem = (preStateHasScroll, currentHasScroll) => {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+                this.callApiByService(false);
+            }
+        };
+        if (replace) {
+            this.items.set(itemByKeySearch);
+            this.config()?.sort?.(this.items());
+            this.emitKeySelectedDefaultIfExistItem(this.items());
+            this.autoSelectFirstItem(this.items());
+            this.setHeightViewPort();
+            this.loading.set(false);
+            this.checkViewPortScroll(checkLoadItem);
+            this.scrollToItemSelected();
+            this.outLoading.emit(this.loading());
+            this.outLoadItemsComplete.emit({ items: this.items(), paging: this.pagingStore() });
+            return;
+        }
+        this.items.update(items => [...items, ...itemByKeySearch]);
+        this.config()?.sort?.(this.items());
+        this.setHeightViewPort();
+        this.loading.set(false);
+        this.checkViewPortScroll(checkLoadItem);
+        this.scrollToItemSelected();
+        this.outLoading.emit(this.loading());
+        this.outLoadItemsComplete.emit({ items: this.items(), paging: this.pagingStore() });
+    }
+    scrollToItemSelected() {
+        if (!this.configTemplateText()?.autoScrollToItemSelected) {
+            return;
+        }
+        clearTimeout(this.timeAutoScrollItemSelected());
+        this.timeAutoScrollItemSelected.set(setTimeout(() => {
+            if (!this.keySelected()) {
+                return;
+            }
+            const index = this.items().findIndex(item => item[this.fieldKey()] === this.keySelected);
+            if (index !== -1) {
+                this.virtualScrollerComponent()?.scrollToIndex(index);
+            }
+        }));
+    }
+    autoSelectFirstItem(items) {
+        if (this.keySelected() || !this.config()?.autoSelectFirstItem || !items || !items.length) {
+            return;
+        }
+        this.handlerSelectItem('click', items[0], undefined, true);
+    }
+    emitKeySelectedDefaultIfExistItem(items) {
+        const item = items.find(store => store[this.fieldKey()] === this.keySelected);
+        if (item) {
+            this.handlerSelectItem('click', item, undefined, true);
+        }
+    }
+    getLengthItem() {
+        return this.items().length;
+    }
+    handlerImageError(event, item) {
+        event.stopPropagation();
+        item.specific_loadImgError = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListTextComponent, isStandalone: true, selector: "libs_ui-components-list-templates_text", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <div #elementScroll\n        [style.height]=\"!configTemplateText.notUseVirtualScroll && heightViewPort() && (!config()?.ignoreShowDataWhenNotSearch || (config()?.ignoreShowDataWhenNotSearch && config()?.ignoreFixHeightShowDataWhenNotSearch))  ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet='listRef;context:{itemsView:scroll.viewPortItems}' />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet='listRef;context:{itemsView:items()}' />\n        }\n      </div>\n    }\n    @if ((!items() || !items().length) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n      <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n        @if (!keySearch() && !loading()) {\n          {{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\"></ng-container>\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          {{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template #listRef\n    let-itemsView='itemsView'>\n    @for (item of itemsView; track item[fieldKey()]) {\n      <div #itemRef\n        [class]=\"item.classItemWrapper || ''\">\n        <div LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item flex '+(item.classItem || '')\"\n          [class.items-center]=\"!item.itemAlignStart\"\n          [class.items-start]=\"item.itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item.hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly()  && !item.hoverDanger\"\n          [class.libs-ui-bg-list-selected]=\"!clickExactly() && keySelected() === item[fieldKey()]\"\n          [class.pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item.disable\"\n          [class.cursor-default]=\"item.disable\"\n          [class.py-[2px]]=\"clickExactly()\"\n          [class.pr-[48px]]=\"keySelected() === item[fieldKey()] && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort)&& !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{'pointer-events-none libs-ui-disable':loading() || disable() || ((item[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem())}\"\n          (click)=\"handlerClickRelative($event,item)\">\n          @if (item.bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.background-color]=\"item.bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item)\">\n            </span>\n          }\n\n          @if (item.avatarConfig; as avatarConfig) {\n            <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\n              [size]='avatarConfig.size || 32'\n              [linkAvatar]=\"avatarConfig.linkAvatar\"\n              [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n              [idGenColor]=\"avatarConfig.idGenColor\"\n              [textAvatar]=\"avatarConfig.textAvatar\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"configTemplateText.getImage ? (('avatar' | MoLibsSharedPipesCallFunctionInTemplate:(item.specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage):item) | async) : item[configTemplateText.fieldGetImage || '']\"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item)\"\n              (click)=\"handlerSelectItem($event,item)\" />\n          }\n          @if (item.buttonLeftConfig; as buttonLeft) {\n            @if (item.hrefButton) {\n              <a [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item.hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </a>\n            }\n            @if (!item.hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button class=\"w-full\"\n                [type]=\"buttonLeft.type || 'button-link-primary'\"\n                [label]=\"buttonLeft.label || ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? ((buttonLeft.classIconLeft || '')+' flex mr-[8px] text-[12px]') : ''\"\n                [classInclude]=\"(buttonLeft.classInclude|| '')+' w-full'\"\n                [classLabel]=\"(buttonLeft.classLabel ?? 'libs-ui-font-h4r')\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft\"\n                [styleButton]=\"buttonLeft.styleButton\"\n                (moClick)=\"handlerSelectItem($event,item)\" />\n            </ng-template>\n          }\n          @if (item.switchConfig) {\n            <libs_ui-components-switch [active]=\"item.switchConfig.active\"\n              (moSwitch)=\"handlerSelectItem('click',item)\" />\n          }\n          @if (item.classIconLeft) {\n            <i [class]=\"item.classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item.ignoreShowFieldLabel && !configTemplateText.rows) {\n            <libs_ui-components-popover [type]=\"item.popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item.popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item.popoverLabel?.ignoreShowPopover\"\n              [config]=\"item.popoverLabel?.config || (configTemplateText.configLabelPopover || {})\"\n              [innerHtml]=\"item.fieldLabel\"\n              [classInclude]=\"item.classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item)\" />\n          }\n          @if (!item.ignoreShowFieldLabel && !configTemplateText.rows) {\n            <libs_ui-components-popover [type]=\"item.popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item.popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item.popoverLabel?.ignoreShowPopover\"\n              [config]=\"item.popoverLabel?.config || ((configTemplateText.configLabelPopover || {}))\"\n              [innerHtml]=\"item.fieldLabel\"\n              [classInclude]=\"item.classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item)\" />\n          }\n          @if (item.fieldPopover; as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude || '' }}\"\n              [config]=\"popover?.config\">\n              @if (!popover.dataView) {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              }\n            </libs_ui-components-popover>\n          }\n          <!-- <libs-uis-shared-components-list_view-templates-rows *ngIf=\"configTemplateText?.rows\"\n            class=\"w-100 {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n            [item]=\"item\"\n            [fieldKey]=\"fieldKey\"\n            [keySelected]=\"keySelected\"\n            [configTemplate]=\"configTemplateText\"\n            [zIndex]=\"zIndex\"\n            (moChangStageFlagMouseTooltip)=\"handlerChangStageFlagMouse($event)\"\n            (moEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\">\n          </libs-uis-shared-components-list_view-templates-rows> -->\n          @if ((keySelected === item[fieldKey()] || (item[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item[fieldKey()] : undefined) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check '+(configTemplateText.classIncludeIconSelected || 'right-[12px]')\">\n            </i>\n          }\n          @if (keySelected() === item[fieldKey()] && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText.itemSort?.mode || ''\"\n                [fieldSort]=\"item[fieldKey()]\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px 6px 1px;font-size:12px;line-height:18px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226FF5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { 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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["classContainer", "options"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "pipe", type: MoLibsSharedPipesCallFunctionInTemplatePipe, name: "MoLibsSharedPipesCallFunctionInTemplate" }, { kind: "directive", type: LibsUiComponentsListHighlightKeySearchDirective, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: ["isHighlight", "keySearch", "classHighlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-list-templates_text', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        VirtualScrollerModule, NgTemplateOutlet, TranslateModule, NgClass, AsyncPipe,
+                        LibsUiComponentsSpinnerComponent,
+                        LibsUiComponentsAvatarComponent,
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsScrollOverlayDirective,
+                        LibsUiCheckSelectedByKeyPipe,
+                        LibsUiComponentsSwitchComponent,
+                        LibsUiComponentsButtonsSortArrowComponent,
+                        MoLibsSharedPipesCallFunctionInTemplatePipe,
+                        LibsUiComponentsListHighlightKeySearchDirective
+                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <div #elementScroll\n        [style.height]=\"!configTemplateText.notUseVirtualScroll && heightViewPort() && (!config()?.ignoreShowDataWhenNotSearch || (config()?.ignoreShowDataWhenNotSearch && config()?.ignoreFixHeightShowDataWhenNotSearch))  ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet='listRef;context:{itemsView:scroll.viewPortItems}' />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet='listRef;context:{itemsView:items()}' />\n        }\n      </div>\n    }\n    @if ((!items() || !items().length) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n      <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n        @if (!keySearch() && !loading()) {\n          {{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\"></ng-container>\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          {{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template #listRef\n    let-itemsView='itemsView'>\n    @for (item of itemsView; track item[fieldKey()]) {\n      <div #itemRef\n        [class]=\"item.classItemWrapper || ''\">\n        <div LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item flex '+(item.classItem || '')\"\n          [class.items-center]=\"!item.itemAlignStart\"\n          [class.items-start]=\"item.itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item.hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly()  && !item.hoverDanger\"\n          [class.libs-ui-bg-list-selected]=\"!clickExactly() && keySelected() === item[fieldKey()]\"\n          [class.pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item.disable\"\n          [class.cursor-default]=\"item.disable\"\n          [class.py-[2px]]=\"clickExactly()\"\n          [class.pr-[48px]]=\"keySelected() === item[fieldKey()] && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort)&& !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{'pointer-events-none libs-ui-disable':loading() || disable() || ((item[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem())}\"\n          (click)=\"handlerClickRelative($event,item)\">\n          @if (item.bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.background-color]=\"item.bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item)\">\n            </span>\n          }\n\n          @if (item.avatarConfig; as avatarConfig) {\n            <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\n              [size]='avatarConfig.size || 32'\n              [linkAvatar]=\"avatarConfig.linkAvatar\"\n              [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n              [idGenColor]=\"avatarConfig.idGenColor\"\n              [textAvatar]=\"avatarConfig.textAvatar\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"configTemplateText.getImage ? (('avatar' | MoLibsSharedPipesCallFunctionInTemplate:(item.specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage):item) | async) : item[configTemplateText.fieldGetImage || '']\"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item)\"\n              (click)=\"handlerSelectItem($event,item)\" />\n          }\n          @if (item.buttonLeftConfig; as buttonLeft) {\n            @if (item.hrefButton) {\n              <a [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item.hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </a>\n            }\n            @if (!item.hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button class=\"w-full\"\n                [type]=\"buttonLeft.type || 'button-link-primary'\"\n                [label]=\"buttonLeft.label || ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? ((buttonLeft.classIconLeft || '')+' flex mr-[8px] text-[12px]') : ''\"\n                [classInclude]=\"(buttonLeft.classInclude|| '')+' w-full'\"\n                [classLabel]=\"(buttonLeft.classLabel ?? 'libs-ui-font-h4r')\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft\"\n                [styleButton]=\"buttonLeft.styleButton\"\n                (moClick)=\"handlerSelectItem($event,item)\" />\n            </ng-template>\n          }\n          @if (item.switchConfig) {\n            <libs_ui-components-switch [active]=\"item.switchConfig.active\"\n              (moSwitch)=\"handlerSelectItem('click',item)\" />\n          }\n          @if (item.classIconLeft) {\n            <i [class]=\"item.classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item.ignoreShowFieldLabel && !configTemplateText.rows) {\n            <libs_ui-components-popover [type]=\"item.popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item.popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item.popoverLabel?.ignoreShowPopover\"\n              [config]=\"item.popoverLabel?.config || (configTemplateText.configLabelPopover || {})\"\n              [innerHtml]=\"item.fieldLabel\"\n              [classInclude]=\"item.classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item)\" />\n          }\n          @if (!item.ignoreShowFieldLabel && !configTemplateText.rows) {\n            <libs_ui-components-popover [type]=\"item.popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item.popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item.popoverLabel?.ignoreShowPopover\"\n              [config]=\"item.popoverLabel?.config || ((configTemplateText.configLabelPopover || {}))\"\n              [innerHtml]=\"item.fieldLabel\"\n              [classInclude]=\"item.classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item)\" />\n          }\n          @if (item.fieldPopover; as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude || '' }}\"\n              [config]=\"popover?.config\">\n              @if (!popover.dataView) {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              }\n            </libs_ui-components-popover>\n          }\n          <!-- <libs-uis-shared-components-list_view-templates-rows *ngIf=\"configTemplateText?.rows\"\n            class=\"w-100 {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n            [item]=\"item\"\n            [fieldKey]=\"fieldKey\"\n            [keySelected]=\"keySelected\"\n            [configTemplate]=\"configTemplateText\"\n            [zIndex]=\"zIndex\"\n            (moChangStageFlagMouseTooltip)=\"handlerChangStageFlagMouse($event)\"\n            (moEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\">\n          </libs-uis-shared-components-list_view-templates-rows> -->\n          @if ((keySelected === item[fieldKey()] || (item[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item[fieldKey()] : undefined) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check '+(configTemplateText.classIncludeIconSelected || 'right-[12px]')\">\n            </i>\n          }\n          @if (keySelected() === item[fieldKey()] && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText.itemSort?.mode || ''\"\n                [fieldSort]=\"item[fieldKey()]\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px 6px 1px;font-size:12px;line-height:18px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226FF5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"] }]
+        }] });
+
+const getComponentByType = (typeTemplate) => {
+    switch (typeTemplate) {
+        case 'checkbox':
+            return LibsUiComponentsListTextComponent;
+        case 'group':
+            return LibsUiComponentsListTextComponent;
+        case 'radio':
+            return LibsUiComponentsListTextComponent;
+        case 'text':
+            return LibsUiComponentsListTextComponent;
+        case 'tag':
+            return LibsUiComponentsListTextComponent;
+    }
+};
+const getFieldKeyByType = (config, fieldKeyDefault) => {
+    if (!config) {
+        return;
+    }
+    switch (config.type) {
+        case 'checkbox':
+            return config.configTemplateCheckbox?.fieldKey || fieldKeyDefault;
+        case 'group':
+            return config.configTemplateGroup?.fieldKey || fieldKeyDefault;
+        case 'radio':
+            return config.configTemplateRadio?.fieldKey || fieldKeyDefault;
+        case 'text':
+            return config.configTemplateText?.fieldKey || fieldKeyDefault;
+        case 'tag':
+            return config.configTemplateTag?.fieldKey || fieldKeyDefault;
+    }
+};
+const initConfig = (config) => {
+    if (!config) {
+        return;
+    }
+    const defaultConfig = {
+        fieldKey: 'id',
+        getValue: (item) => {
+            if (!item) {
+                return ' ';
+            }
+            return item.label || item.name || ' ';
+        }
+    };
+    switch (config.type) {
+        case 'checkbox':
+            if (!config.configTemplateCheckbox) {
+                config.configTemplateCheckbox = defaultConfig;
+            }
+            break;
+        case 'group':
+            break;
+        case 'radio':
+            if (!config.configTemplateRadio) {
+                config.configTemplateRadio = defaultConfig;
+            }
+            break;
+        case 'text':
+            if (!config.configTemplateText) {
+                config.configTemplateText = defaultConfig;
+            }
+            break;
+    }
+};
+
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsListComponent {
+    /* PROPERTY */
+    ERROR_MESSAGE_EMPTY_VALID = ERROR_MESSAGE_EMPTY_VALID;
+    disableButtonUnSelectOption = signal(true);
+    isErrorRequired = signal(false);
+    loading = signal(false);
+    keySearchStore = signal(undefined);
+    onDestroy = new Subject();
+    onSearch = new Subject();
+    onRefresh = new Subject();
+    onSetHiddenItemByKey = new Subject();
+    onSetDataStore = new Subject();
+    onItemChangeUnSelect = new Subject();
+    onUpdateMultiKeySelectedGroup = new Subject();
+    onRemoveItems = new Subject();
+    componentRef;
+    configData = signal({
+        type: 'text',
+        configTemplateText: {
+            fieldKey: 'id',
+            getValue: (item) => {
+                return item.label || item.name;
+            }
+        }
+    });
+    groupMultiKeySelected = signal([]);
+    functionControlInputSearch = signal(undefined);
+    /* INPUT */
+    hiddenInputSearch = input(false);
+    dropdownTabKeyActive = input();
+    keySearch = input();
+    itemChangeUnSelect = input();
+    paddingLeftItem = input();
+    config = input.required();
+    isSearchOnline = input();
+    disable = input();
+    disableLabel = input();
+    labelConfig = input();
+    searchConfig = input({});
+    searchPadding = input();
+    dividerClassInclude = input();
+    hasDivider = input(true);
+    buttonsOther = input(undefined);
+    hasButtonUnSelectOption = input();
+    clickExactly = input();
+    backgroundListCustom = input('bg-[#ffffff]');
+    maxItemShow = input();
+    keySelected = input();
+    multiKeySelected = input(undefined); // lưu ý khi sử dụng listview
+    keysDisableItem = input(undefined); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
+    keysHiddenItem = input(undefined); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
+    data = input(undefined);
+    focusInputSearch = input();
+    skipFocusInputWhenKeySearchStoreUndefined = input();
+    functionCustomAddDataToStore = input();
+    functionGetItemAutoAddList = input(undefined);
+    validRequired = input(undefined);
+    showValidateBottom = input();
+    zIndex = input();
+    loadingIconSize = input(undefined);
+    templateRefSearchNoData = input(undefined);
+    resetKeyWhenSelectAllKeyDropdown = input();
+    ignoreClassDisableDefaultWhenUseKeysDisableItem = input(); // bỏ chế độ disable item trên html để disable từng phần trong rows
+    /* OUTPUT */
+    outSelectKey = output(); // sử dụng cho type chọn 1
+    outSelectMultiKey = output(); // sử dụng cho type cho phép chọn nhiều.
+    outUnSelectMultiKey = output(); // sử dụng cho type cho phép chọn nhiều.
+    outClickButtonOther = output();
+    outFieldKey = output();
+    outChangeView = output();
+    outLoading = output();
+    outFunctionsControl = output();
+    outChangStageFlagMousePopover = output();
+    outLoadItemsComplete = output();
+    /* VIEW CHILD */
+    listViewElementRef = viewChild('listViewContainer');
+    contentElementRef = viewChild('contentContainer');
+    /* INJECT */
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
+    constructor() {
+        effect(() => {
+            this.keySearchStore.set(this.keySearch());
+            this.onSearch.next(this.keySearch());
+        }, { allowSignalWrites: true });
+        effect(() => this.onItemChangeUnSelect.next(this.itemChangeUnSelect()));
+        effect(() => {
+            if (!this.componentRef) {
+                return;
+            }
+            if (!isEmpty(this.keysDisableItem())) {
+                this.componentRef.setInput('keysDisableItem', this.keysDisableItem());
+            }
+            if (!isEmpty(this.keysHiddenItem())) {
+                this.onSetHiddenItemByKey.next(this.keysHiddenItem() || []);
+            }
+            if (!isEmpty(this.disable())) {
+                this.componentRef.setInput('disable', this.disable());
+            }
+            if (!isEmpty(this.data())) {
+                this.onSetDataStore.next(this.data() || []);
+            }
+            if (!isEmpty(this.keySelected())) {
+                this.componentRef.setInput('keySelected', this.keySelected());
+            }
+            if (this.configData()?.type !== 'group' && !isEmpty(this.multiKeySelected())) {
+                this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
+            }
+            if (this.configData()?.type === 'group' && !isEmpty(this.multiKeySelected())) {
+                this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
+                this.onUpdateMultiKeySelectedGroup.next();
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            this.refresh();
+        });
+    }
+    ngOnInit() {
+        this.outFunctionsControl.emit({
+            checkIsValid: this.checkIsValid.bind(this),
+            refresh: this.refresh.bind(this),
+            resetKeySelected: this.handlerRemoveKeySelected.bind(this),
+            getRectListView: async () => this.listViewElementRef()?.nativeElement.getBoundingClientRect(),
+            removeItems: async (keys) => this.onRemoveItems.next(keys)
+        });
+        const config = this.config();
+        if (config) {
+            this.configData.set(this.cloneConfig(config));
+        }
+        initConfig(this.configData());
+        const compClass = getComponentByType(this.configData().type);
+        this.componentRef = this.dynamicComponentService.resolveComponentFactory(compClass);
+        // const instance = this.componentRef.instance;
+        timer(0).pipe(takeUntil$1(this.onDestroy)).subscribe(() => {
+            this.dynamicComponentService.addToElement(this.componentRef, this.contentElementRef()?.nativeElement);
+        });
+        this.componentRef.setInput('onSetDataStore', this.onSetDataStore);
+        this.componentRef.setInput('onSetHiddenItemByKey', this.onSetHiddenItemByKey);
+        this.componentRef.setInput('config', this.configData());
+        if (this.searchConfig()) {
+            this.componentRef.setInput('searchConfig', this.searchConfig());
+        }
+        this.componentRef.setInput('onSearch', this.onSearch);
+        this.componentRef.setInput('onRefresh', this.onRefresh);
+        this.componentRef.setInput('keySearch', this.keySearchStore() ?? '');
+        this.componentRef.setInput('dropdownTabKeyActive', this.dropdownTabKeyActive());
+        this.componentRef.setInput('clickExactly', this.clickExactly() || false);
+        this.componentRef.setInput('disable', this.disable());
+        this.componentRef.setInput('paddingLeftItem', this.paddingLeftItem());
+        this.componentRef.setInput('resetKeyWhenSelectAllKeyDropdown', this.resetKeyWhenSelectAllKeyDropdown());
+        this.componentRef.setInput('ignoreClassDisableDefaultWhenUseKeysDisableItem', this.ignoreClassDisableDefaultWhenUseKeysDisableItem());
+        this.componentRef.setInput('functionCustomAddDataToStore', this.functionCustomAddDataToStore());
+        this.componentRef.setInput('functionGetItemAutoAddList', this.functionGetItemAutoAddList());
+        timer(0).pipe(takeUntil$1(this.onDestroy)).subscribe(() => {
+            if (this.data()) {
+                this.onSetDataStore.next(this.data() || []);
+            }
+        });
+        if (this.maxItemShow()) {
+            this.componentRef.setInput('maxItemShow', this.maxItemShow());
+        }
+        this.componentRef.setInput('keySelected', this.keySelected());
+        if (this.multiKeySelected()) {
+            this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
+        }
+        this.componentRef.setInput('keysDisableItem', this.keysDisableItem() || []);
+        this.componentRef.setInput('keysHiddenItem', this.keysHiddenItem() || []);
+        if (!isNil(this.keySelected()) || this.multiKeySelected()?.length) {
+            this.disableButtonUnSelectOption.set(false);
+        }
+        this.componentRef.setInput('onItemChangeUnSelect', this.onItemChangeUnSelect);
+        this.componentRef.setInput('onUpdateMultiKeySelectedGroup', this.onUpdateMultiKeySelectedGroup);
+        this.componentRef.setInput('onRemoveItems', this.onRemoveItems);
+        this.componentRef.setInput('zIndex', this.zIndex());
+        this.componentRef.setInput('isSearchOnline', this.isSearchOnline());
+        this.componentRef.setInput('disableLabel', this.disableLabel() || false);
+        this.componentRef.setInput('loadingIconSize', this.loadingIconSize());
+        this.componentRef.setInput('templateRefSearchNoData', this.templateRefSearchNoData());
+        let keySearch = '';
+        const instance = this.componentRef.instance;
+        instance.outChangeView.subscribe(data => {
+            this.outChangeView.emit(data);
+            if (this.skipFocusInputWhenKeySearchStoreUndefined() && isNil(this.keySearchStore)) {
+                return;
+            }
+            if (this.focusInputSearch() && this.keySearchStore() !== keySearch) {
+                keySearch = this.keySearchStore() || '';
+                this.functionControlInputSearch()?.focus();
+            }
+        });
+        instance.outSelectKey.subscribe(data => {
+            this.disableButtonUnSelectOption.set(false);
+            this.outSelectKey.emit(data);
+            this.checkIsValid();
+        });
+        instance.outFieldKey.subscribe((fieldKey) => {
+            this.outFieldKey.emit(fieldKey);
+        });
+        instance.outLoading.subscribe((loading) => {
+            this.loading.set(loading);
+            this.outLoading.emit(loading);
+        });
+        instance.outLoadItemsComplete.subscribe((event) => {
+            this.outLoadItemsComplete.emit(event);
+        });
+        if (this.config() && this.config()?.configTemplateText && this.config()?.configTemplateText?.actionSort) {
+            instance.outSortSingleSelect.subscribe(itemSort => {
+                const config = this.config();
+                if (config && config.configTemplateText && config.configTemplateText?.actionSort) {
+                    config.configTemplateText.itemSort = itemSort;
+                    config.configTemplateText.actionSort(itemSort);
+                }
+            });
+        }
+        instance.outChangStageFlagMousePopover.subscribe((flag) => {
+            this.outChangStageFlagMousePopover.emit(flag);
+        });
+        const type = this.configData()?.type;
+        if (type === 'text' || type === 'radio') {
+            return;
+        }
+        instance.outSelectMultiKey.subscribe(data => {
+            this.disableButtonUnSelectOption.set(false);
+            if (type === 'group') {
+                this.groupMultiKeySelected.set(data.keys);
+            }
+            this.outSelectMultiKey.emit(data);
+            this.checkIsValid();
+        });
+    }
+    handlerSearch(keySearch) {
+        this.keySearchStore.set(keySearch);
+        this.onSearch.next(keySearch);
+    }
+    async handlerRemoveKeySelected() {
+        if (!this.componentRef) {
+            return;
+        }
+        this.outSelectKey.emit(undefined);
+        this.outSelectMultiKey.emit(undefined);
+        this.componentRef.setInput('keySelected', '');
+        this.componentRef.setInput('multiKeySelected', undefined);
+        this.disableButtonUnSelectOption.set(true);
+        await this.checkIsValid();
+    }
+    handlerClickButtonOther(button) {
+        this.outClickButtonOther.emit(button);
+    }
+    handlerFunctionControlInputSearch(event) {
+        this.functionControlInputSearch.set(event);
+    }
+    async checkIsValid() {
+        if (!this.validRequired || !this.config()?.type || !this.componentRef?.instance) {
+            this.isErrorRequired.set(false);
+            return true;
+        }
+        const type = this.config()?.type;
+        let hasKey = !isEmpty(this.componentRef.instance.multiKeySelected);
+        if (type === 'group') {
+            hasKey = !isEmpty(this.groupMultiKeySelected);
+        }
+        if (type === 'text' || type === 'radio') {
+            hasKey = !isNil(this.componentRef.instance.keySelected);
+        }
+        this.isErrorRequired.set(!hasKey);
+        return hasKey;
+    }
+    async refresh() {
+        const config = this.config();
+        if (!config) {
+            return;
+        }
+        this.dropdownTabKeyActive();
+        Object.assign(this.configData, this.cloneConfig(config));
+        this.onRefresh.next();
+    }
+    cloneConfig(configInput) {
+        if (!configInput) {
+            return {};
+        }
+        const serviceOther = configInput.httpRequestData?.serviceOther;
+        const serviceOtherRequestAllIdSelectOrUnSelect = configInput.configTemplateCheckbox?.httpRequestAllIdSelectOrUnSelect?.serviceOther;
+        serviceOther && delete configInput.httpRequestData?.serviceOther;
+        serviceOtherRequestAllIdSelectOrUnSelect && delete configInput.configTemplateCheckbox?.httpRequestAllIdSelectOrUnSelect?.serviceOther;
+        const config = cloneDeep(configInput);
+        serviceOther && config.httpRequestData && (config.httpRequestData.serviceOther = serviceOther);
+        serviceOtherRequestAllIdSelectOrUnSelect && config.configTemplateCheckbox?.httpRequestAllIdSelectOrUnSelect && (config.configTemplateCheckbox.httpRequestAllIdSelectOrUnSelect.serviceOther = serviceOtherRequestAllIdSelectOrUnSelect);
+        serviceOther && configInput.httpRequestData && (configInput.httpRequestData.serviceOther = serviceOther);
+        serviceOtherRequestAllIdSelectOrUnSelect && configInput.configTemplateCheckbox?.httpRequestAllIdSelectOrUnSelect && (configInput.configTemplateCheckbox.httpRequestAllIdSelectOrUnSelect.serviceOther = serviceOtherRequestAllIdSelectOrUnSelect);
+        return config;
+    }
+    ngOnDestroy() {
+        this.outLoading.emit(false);
+        this.dynamicComponentService.remove(this.componentRef);
+        this.onRefresh.complete();
+        this.onSearch.complete();
+        this.onSetHiddenItemByKey.complete();
+        this.onUpdateMultiKeySelectedGroup.complete();
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListComponent, isStandalone: true, selector: "libs_ui-components-list", inputs: { hiddenInputSearch: { classPropertyName: "hiddenInputSearch", publicName: "hiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, dropdownTabKeyActive: { classPropertyName: "dropdownTabKeyActive", publicName: "dropdownTabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, itemChangeUnSelect: { classPropertyName: "itemChangeUnSelect", publicName: "itemChangeUnSelect", isSignal: true, isRequired: false, transformFunction: null }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, searchPadding: { classPropertyName: "searchPadding", publicName: "searchPadding", isSignal: true, isRequired: false, transformFunction: null }, dividerClassInclude: { classPropertyName: "dividerClassInclude", publicName: "dividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, buttonsOther: { classPropertyName: "buttonsOther", publicName: "buttonsOther", isSignal: true, isRequired: false, transformFunction: null }, hasButtonUnSelectOption: { classPropertyName: "hasButtonUnSelectOption", publicName: "hasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", isSignal: true, isRequired: false, transformFunction: null }, backgroundListCustom: { classPropertyName: "backgroundListCustom", publicName: "backgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, multiKeySelected: { classPropertyName: "multiKeySelected", publicName: "multiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, skipFocusInputWhenKeySearchStoreUndefined: { classPropertyName: "skipFocusInputWhenKeySearchStoreUndefined", publicName: "skipFocusInputWhenKeySearchStoreUndefined", isSignal: true, isRequired: false, transformFunction: null }, functionCustomAddDataToStore: { classPropertyName: "functionCustomAddDataToStore", publicName: "functionCustomAddDataToStore", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemAutoAddList: { classPropertyName: "functionGetItemAutoAddList", publicName: "functionGetItemAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, showValidateBottom: { classPropertyName: "showValidateBottom", publicName: "showValidateBottom", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, loadingIconSize: { classPropertyName: "loadingIconSize", publicName: "loadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outClickButtonOther: "outClickButtonOther", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outLoading: "outLoading", outFunctionsControl: "outFunctionsControl", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "listViewElementRef", first: true, predicate: ["listViewContainer"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow\"\n  [class.h-full]=\"!maxItemShow\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required \"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\"></ng-container>\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\" disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup; as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude():'' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\">\n    </div>\n  }\n  <div class=\"flex flex-col {{ (config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch) ? 'h-[353px]' : 'h-full' }}\">\n    <div #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\">\n    </div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div class=\"bg-[#ffffff]\">\n        <libs_ui-components-buttons-button [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '')+' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full libs-ui-border-top-general text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude:'' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px]\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-100 libs-ui-border-top-general text-left rounded-0\"\n          classLabel=\"mo-lib-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\"></ng-container>\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"text-[#ee2d41] mo-lib-font-h7\"\n        [innerHtml]=\"(validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n      </span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-view-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsSearchComponent, selector: "libs_ui-components-inputs-search", inputs: ["disable", "readonly", "searchConfig", "ignoreAutoComplete", "debounceTime", "ignoreStopPropagationEvent", "focusTimeOut", "blurTimeOut"], outputs: ["outSearch", "outValueChange", "outIconLeft", "outIconRight", "outFocusAndBlur", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { 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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet, TranslateModule,
+                        LibsUiComponentsLabelComponent,
+                        LibsUiComponentsInputsSearchComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsButtonsButtonComponent
+                    ], template: "<div #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow\"\n  [class.h-full]=\"!maxItemShow\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required \"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\"></ng-container>\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\" disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup; as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude():'' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\">\n    </div>\n  }\n  <div class=\"flex flex-col {{ (config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch) ? 'h-[353px]' : 'h-full' }}\">\n    <div #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\">\n    </div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div class=\"bg-[#ffffff]\">\n        <libs_ui-components-buttons-button [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '')+' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full libs-ui-border-top-general text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude:'' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px]\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-100 libs-ui-border-top-general text-left rounded-0\"\n          classLabel=\"mo-lib-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\"></ng-container>\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"text-[#ee2d41] mo-lib-font-h7\"\n        [innerHtml]=\"(validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n      </span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-view-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"] }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsListComponent };
+//# sourceMappingURL=libs-ui-components-list.mjs.map