@libs-ui/components-table 0.2.304 → 0.2.306-3

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

@@ -216,7 +216,7 @@ class LibsUiComponentsTableComponent {
     keySearch = signal('');
     totalItemInBackend = signal(0);
     hasItemHightLight = signal(false);
-    totalItemDisplay = computed(() => viewDataNumberByLanguage((this.totalItem() ?? this.totalItemInBackend()), false));
+    totalItemDisplay = computed(() => viewDataNumberByLanguage(this.totalItem() ?? this.totalItemInBackend(), false));
     listConfigMoreItem = computed(() => {
         return {
             type: 'text',
@@ -225,14 +225,14 @@ class LibsUiComponentsTableComponent {
                 ignoreIconSelected: true,
                 getValue: this.configSelectMoreItem()?.getValue,
                 configLabelPopover: signal({
-                    zIndex: 1200
-                })
+                    zIndex: 1200,
+                }),
             }),
             httpRequestData: signal({
                 serviceOther: returnListObject(this.configSelectMoreItem()?.listOption),
                 functionName: 'list',
-                argumentsValue: []
-            })
+                argumentsValue: [],
+            }),
         };
     });
     hasScroll = signal(false);
@@ -245,38 +245,38 @@ class LibsUiComponentsTableComponent {
     functionControlSelectMoreItem;
     mouseEnterHeader = signal(false);
     /** INPUT */
-    timeHighlighNewItem = input(2000, { transform: val => val ?? 2000 });
-    headerLeft = input([], { transform: val => val ?? [] });
-    headerRight = input([], { transform: val => val ?? [] });
+    timeHighlighNewItem = input(2000, { transform: (val) => val ?? 2000 });
+    headerLeft = input([], { transform: (val) => val ?? [] });
+    headerRight = input([], { transform: (val) => val ?? [] });
     configTemplateItemCollapseExpand = input();
     showFooter = input();
     ignoreBorderFooter = input();
-    customPositionFooter = input('bottom', { transform: val => val ?? 'bottom' });
+    customPositionFooter = input('bottom', { transform: (val) => val ?? 'bottom' });
     footerLeft = input();
     footerRight = input();
-    disableCheckbox = input(false, { transform: val => val ?? false });
-    enableUnequalChildrenSizes = input(false, { transform: val => val ?? false });
-    bufferAmount = input(5, { transform: val => val ? (val > 25 ? 25 : val) : 5 });
+    disableCheckbox = input(false, { transform: (val) => val ?? false });
+    enableUnequalChildrenSizes = input(false, { transform: (val) => val ?? false });
+    bufferAmount = input(5, { transform: (val) => (val ? (val > 25 ? 25 : val) : 5) });
     totalItem = input();
     isDashBorder = input();
     classHeaderContainerInclude = input();
     classHeaderLeftInclude = input();
-    classBodyInclude = input('', { transform: val => val ?? '' });
-    classFooterInclude = input('', { transform: val => val ?? '' });
-    classTableContainerInclude = input('', { transform: val => val ?? '' });
+    classBodyInclude = input('', { transform: (val) => val ?? '' });
+    classFooterInclude = input('', { transform: (val) => val ?? '' });
+    classTableContainerInclude = input('', { transform: (val) => val ?? '' });
     classBarInclude = input('justify-between mb-[16px]');
-    fieldKey = input('id', { transform: val => val || 'id' }); // tên field định danh item của listDatas
+    fieldKey = input('id', { transform: (val) => val || 'id' }); // tên field định danh item của listDatas
     defaultKeysSelected = input();
     labelBarNoSelectItem = input(`i18n_total_quantity`); // sử dụng để hiên thị khi tích chọn item
-    labelBarButtons = input('i18n_number_item_selected', { transform: val => val || 'i18n_number_item_selected' }); // sử dụng để hiên thị khi tích chọn item
-    classLabelBarButtons = input('', { transform: val => val ?? '' }); // sử dụng để hiên thị khi tích chọn item
+    labelBarButtons = input('i18n_number_item_selected', { transform: (val) => val || 'i18n_number_item_selected' }); // sử dụng để hiên thị khi tích chọn item
+    classLabelBarButtons = input('', { transform: (val) => val ?? '' }); // sử dụng để hiên thị khi tích chọn item
     barButtons = input();
     sortLocal = input(); // trường hợp nếu sortLocal này không đáp ứng được nghiệp vụ thì mới cân nhắc sử dụng filterLocal
     filterOrSortLocal = input();
     httpRequestData = input();
     httpRequestDataFooter = input();
     newData = input();
-    filter = input({ filterData: {} }, { transform: val => val ?? { filterData: {} } });
+    filter = input({ filterData: {} }, { transform: (val) => val ?? { filterData: {} } });
     ignoreBar = input();
     classLabelBarNoSelectItem = input();
     ignoreClassBgHeader = input();
@@ -284,11 +284,11 @@ class LibsUiComponentsTableComponent {
     showScrollTablePinnedIfNoData = input();
     ignoreBorderItemLast = input();
     isHiddenHeaderWhenNodata = input();
-    maxItemSelected = input(100, { transform: val => val ?? 100 });
+    maxItemSelected = input(100, { transform: (val) => val ?? 100 });
     configSelectMoreItem = input();
     onlyShowNoResult = input();
     ignoreBorderItem = input();
-    activityLoadData = input('scroll-infinity', { transform: val => val ?? 'scroll-infinity' });
+    activityLoadData = input('scroll-infinity', { transform: (val) => val ?? 'scroll-infinity' });
     paginationSetting = input();
     templateNoData = input();
     templateNoResult = input();
@@ -311,7 +311,6 @@ class LibsUiComponentsTableComponent {
     footerLeftElementRef = viewChild('footerLeftElementRef');
     bodyElementRef = viewChild('bodyElementRef');
     bodyComponentRef = viewChild('bodyComponentRef');
-    ;
     /**INJECT */
     httpRequestService = inject(LibsUiHttpRequestService);
     destroyRef = inject(DestroyRef);
@@ -319,7 +318,7 @@ class LibsUiComponentsTableComponent {
     constructor() {
         effect(() => {
             if (this.defaultKeysSelected()?.length) {
-                untracked(() => this.keysSelected.update(keys => ([...keys, ...(this.defaultKeysSelected() || [])])));
+                untracked(() => this.keysSelected.update((keys) => [...keys, ...(this.defaultKeysSelected() || [])]));
             }
         });
         effect(() => {
@@ -340,7 +339,7 @@ class LibsUiComponentsTableComponent {
                 this.keySearch.set(get(this.filter().filterData, 'keySearch', ''));
                 this.storeParamsCallApi.set(cloneDeep(this.filter().filterData));
                 if (this.filter()?.filterData && !this.filter().filterData['instanceSort'] && this.instanceSort()) {
-                    this.storeParamsCallApi.update(data => ({ ...data, instanceSort: this.instanceSort() }));
+                    this.storeParamsCallApi.update((data) => ({ ...data, instanceSort: this.instanceSort() }));
                 }
                 if (this.filterOrSortLocal() && this.stores().length) {
                     this.items.set(this.filterOrSortLocal()?.(signal([...this.stores()]), { ...(this.filter().filterData || {}), instanceSort: this.instanceSort() }) || []);
@@ -364,9 +363,11 @@ class LibsUiComponentsTableComponent {
                 return;
             },
             resetKeySelected: () => this.keysSelected.set([]),
-            detectChanges: () => this.cdr.detectChanges()
+            detectChanges: () => this.cdr.detectChanges(),
         });
-        fromEvent(window, 'resize').pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+        fromEvent(window, 'resize')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             this.cdr.detectChanges();
         });
     }
@@ -392,14 +393,14 @@ class LibsUiComponentsTableComponent {
                 guideAutoUpdateArgumentsValue.sortOrderBy = {
                     fieldGetValue: 'storeParamsCallApi.instanceSort.fieldSort',
                     fieldUpdate: '[0]',
-                    subFieldUpdate: 'order_by'
+                    subFieldUpdate: 'order_by',
                 };
             }
             if (guideAutoUpdateArgumentsValue && !guideAutoUpdateArgumentsValue.sortOrderType && this.instanceSort()) {
                 guideAutoUpdateArgumentsValue.sortOrderType = {
                     fieldGetValue: 'storeParamsCallApi.instanceSort.mode',
                     fieldUpdate: '[0]',
-                    subFieldUpdate: 'order_type'
+                    subFieldUpdate: 'order_type',
                 };
             }
             if (firstCall) {
@@ -456,28 +457,28 @@ class LibsUiComponentsTableComponent {
             return;
         }
         const itemsAdd = [];
-        items().forEach(item => {
+        items().forEach((item) => {
             if (!this.checkExistItem(item)) {
                 itemsAdd.push(item);
                 if (!ignoreHightLight) {
                     this.hasItemHightLight.set(true);
-                    item.update(data => ({ ...data, specificHightLight: true }));
+                    item.update((data) => ({ ...data, specificHightLight: true }));
                 }
                 if (addFirst) {
-                    this.items.update(data => [item, ...data]);
-                    this.stores.update(data => [item, ...data]);
+                    this.items.update((data) => [item, ...data]);
+                    this.stores.update((data) => [item, ...data]);
                     return;
                 }
-                this.items.update(data => [...data, item]);
-                this.stores.update(data => [...data, item]);
+                this.items.update((data) => [...data, item]);
+                this.stores.update((data) => [...data, item]);
             }
         });
         if (autoCountNewItem && itemsAdd.length) {
-            this.totalItemInBackend.update(value => value + itemsAdd.length);
+            this.totalItemInBackend.update((value) => value + itemsAdd.length);
         }
         if (!ignoreHightLight) {
             setTimeout(() => {
-                itemsAdd.forEach(item => item.update(data => ({ ...data, specificHightLight: false })));
+                itemsAdd.forEach((item) => item.update((data) => ({ ...data, specificHightLight: false })));
                 this.hasItemHightLight.set(false);
             }, this.timeHighlighNewItem());
         }
@@ -487,17 +488,17 @@ class LibsUiComponentsTableComponent {
         }
     }
     checkExistItem(itemNew) {
-        return this.items().find(item => `${item()[this.fieldKey()]}` === `${itemNew()[this.fieldKey()]}`) ? true : false;
+        return this.items().find((item) => `${item()[this.fieldKey()]}` === `${itemNew()[this.fieldKey()]}`) ? true : false;
     }
     async removeItems(keys, ignoreReCallFooter) {
         this.resetIndexHover();
         if (!this.items().length) {
             return;
         }
-        keys.forEach(key => {
-            this.items.update(items => {
+        keys.forEach((key) => {
+            this.items.update((items) => {
                 let isUpdate = false;
-                const newItems = items.filter(item => {
+                const newItems = items.filter((item) => {
                     if (`${item()[this.fieldKey()]}` === `${key}`) {
                         isUpdate = true;
                         return false;
@@ -506,9 +507,9 @@ class LibsUiComponentsTableComponent {
                 });
                 return isUpdate ? newItems : items;
             });
-            this.stores.update(items => {
+            this.stores.update((items) => {
                 let isUpdate = false;
-                const newItems = items.filter(item => {
+                const newItems = items.filter((item) => {
                     if (`${item()[this.fieldKey()]}` === `${key}`) {
                         isUpdate = true;
                         return false;
@@ -520,9 +521,9 @@ class LibsUiComponentsTableComponent {
             if (!this.keysSelected() || !this.keysSelected().length) {
                 return;
             }
-            this.keysSelected.update(keys => keys.filter(keySelected => keySelected !== key));
+            this.keysSelected.update((keys) => keys.filter((keySelected) => keySelected !== key));
         });
-        this.totalItemInBackend.update(value => value - keys.length);
+        this.totalItemInBackend.update((value) => value - keys.length);
         await this.checkScroll();
         if (!ignoreReCallFooter) {
             await this.callApiByServiceFooter();
@@ -546,7 +547,9 @@ class LibsUiComponentsTableComponent {
     }
     handlerChangeCheckedAllItems(event) {
         if (event.checked) {
-            this.keysSelected.set(this.items().filter(async (item) => !(await this.checkCancelConditionCheckedItem(item))).map(item => `${item()[this.fieldKey()]}`));
+            this.keysSelected.set(this.items()
+                .filter(async (item) => !(await this.checkCancelConditionCheckedItem(item)))
+                .map((item) => `${item()[this.fieldKey()]}`));
             this.outKeysSelected.emit({ keys: this.keysSelected() });
             return;
         }
@@ -556,10 +559,10 @@ class LibsUiComponentsTableComponent {
     async checkCancelConditionCheckedItem(item) {
         let isCancelCheck = false;
         if (!isCancelCheck && this.headerLeft().length && this.headerLeft()[0].checkConditionCheckBoxHidden) {
-            isCancelCheck = await lastValueFrom(this.headerLeft()[0].checkConditionCheckBoxHidden({ item: item() })) || false;
+            isCancelCheck = (await lastValueFrom(this.headerLeft()[0].checkConditionCheckBoxHidden({ item: item() }))) || false;
         }
         if (!isCancelCheck && this.headerRight().length && this.headerRight()[0].checkConditionCheckBoxHidden) {
-            isCancelCheck = await lastValueFrom(this.headerRight()[0].checkConditionCheckBoxHidden({ item: item() })) || false;
+            isCancelCheck = (await lastValueFrom(this.headerRight()[0].checkConditionCheckBoxHidden({ item: item() }))) || false;
         }
         return isCancelCheck;
     }
@@ -583,10 +586,10 @@ class LibsUiComponentsTableComponent {
             this.handlerSortLocal(sort, scrollLeft);
             return;
         }
-        this.storeParamsCallApi.update(data => ({ ...data, instanceSort: this.instanceSort() }));
+        this.storeParamsCallApi.update((data) => ({ ...data, instanceSort: this.instanceSort() }));
         this.outSort.emit({
             sort: sort,
-            onSortSuccess: () => this.onSortSuccess(scrollLeft)
+            onSortSuccess: () => this.onSortSuccess(scrollLeft),
         });
         try {
             await this.callApiByService(true);
@@ -602,7 +605,7 @@ class LibsUiComponentsTableComponent {
             return;
         }
         const { fieldSort, mode } = sort;
-        this.items.update(items => {
+        this.items.update((items) => {
             items.sort((itemA, itemB) => {
                 let value1 = mode === 'asc' ? itemA()[fieldSort] : itemB()[fieldSort];
                 let value2 = mode === 'asc' ? itemB()[fieldSort] : itemA()[fieldSort];
@@ -628,25 +631,29 @@ class LibsUiComponentsTableComponent {
         }
         this.functionControlSelectMoreItem?.reset();
         const perPage = Number(event.key).valueOf();
-        const currentPage = Number(this.setPerPageSelectMoreItem(perPage)).valueOf();
+        const currentPerPage = Number(this.setPerPageSelectMoreItem(perPage)).valueOf();
         const isPagingNumber = this.configSelectMoreItem()?.pagingNumber;
-        if (currentPage > perPage || this.items.length >= perPage) {
+        if (currentPerPage > perPage || this.items.length >= perPage) {
             if (!isPagingNumber) {
-                this.setPerPageSelectMoreItem(currentPage);
+                this.setPerPageSelectMoreItem(currentPerPage);
             }
-            this.keysSelected.set(this.items().slice(0, perPage).map(item => `${item()[this.fieldKey()]}`));
+            this.keysSelected.set(this.items()
+                .slice(0, perPage)
+                .map((item) => `${item()[this.fieldKey()]}`));
             return;
         }
         this.callApiByService(true, true);
         const sub = this.outLoadDataComplete.subscribe(() => {
             sub.unsubscribe();
             if (!isPagingNumber) {
-                this.setPerPageSelectMoreItem(currentPage);
+                this.setPerPageSelectMoreItem(currentPerPage);
             }
-            this.keysSelected.set(this.items().slice(0, perPage).map(item => `${item()[this.fieldKey()]}`));
+            this.keysSelected.set(this.items()
+                .slice(0, perPage)
+                .map((item) => `${item()[this.fieldKey()]}`));
         });
         this.outLoadDataError.subscribe(() => {
-            this.setPerPageSelectMoreItem(currentPage);
+            this.setPerPageSelectMoreItem(currentPerPage);
         });
     }
     setPerPageSelectMoreItem(perPage) {
@@ -658,13 +665,13 @@ class LibsUiComponentsTableComponent {
         for (let i = 0; i < argumentsValue.length; i++) {
             let argument = argumentsValue[i];
             if (argument instanceof HttpParams && argument.has(keyPerPage)) {
-                const currentPerPage = argument.get(keyPerPage) || '25';
+                const currentPerPage = get(argument, keyPerPage, '25');
                 argument = argument.set(keyPerPage, perPage);
                 set(argumentsValue, `${i}`, argument);
                 return currentPerPage;
             }
             if (argument instanceof Object && Object.keys(argument).includes(keyPerPage)) {
-                const currentPerPage = argument.get(keyPerPage) || '25';
+                const currentPerPage = get(argument, keyPerPage, '25');
                 set(argument, keyPerPage, perPage);
                 return currentPerPage;
             }
@@ -677,6 +684,7 @@ class LibsUiComponentsTableComponent {
         this.outLoading.emit(this.loading());
     }
     handlerButtonClick(type, buttonDropdownData, button) {
+        // buttonOrigin chỉ sử dụng khi dùng buttonActions có button-dropdown
         if (type === 'button') {
             return this.outClickButtonAction.emit({ item: this.itemOfIndexHover, button: button });
         }
@@ -684,8 +692,8 @@ class LibsUiComponentsTableComponent {
     }
     handlerBarButtonClick(button) {
         const items = [];
-        this.keysSelected().forEach(key => {
-            const item = this.items().find(item => `${item()[this.fieldKey()]}` === `${key}`);
+        this.keysSelected().forEach((key) => {
+            const item = this.items().find((item) => `${item()[this.fieldKey()]}` === `${key}`);
             if (item) {
                 items.push(item);
             }
@@ -696,7 +704,7 @@ class LibsUiComponentsTableComponent {
             keys: this.keysSelected(),
             hiddenBarButtons: () => {
                 return;
-            }
+            },
         });
     }
     handlerButtonDropdownEvent(eventName) {
@@ -795,7 +803,7 @@ class LibsUiComponentsTableComponent {
         this.callApiByService(false);
     }
     handlerChangePage(page) {
-        this.pagingStore.update(data => ({ ...(data || {}), page }));
+        this.pagingStore.update((data) => ({ ...(data || {}), page }));
         this.callApiByService(true);
     }
     resetScroll(scrollPositionLeft, scrollPositionTop) {
@@ -825,8 +833,10 @@ class LibsUiComponentsTableComponent {
     }
     async checkScroll() {
         const hasScroll = this.hasScroll();
-        return new Promise(resolve => {
-            timer(500).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+        return new Promise((resolve) => {
+            timer(500)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
                 if (this.BodyElement) {
                     this.hasScroll.set(this.BodyElement.scrollHeight > this.BodyElement.offsetHeight);
                 }
@@ -852,13 +862,27 @@ class LibsUiComponentsTableComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, NgComponentOutlet, LibsUiComponentsTableTemplatesComponent,
-                        TranslateModule, VirtualScrollerModule, LibsUiComponentsButtonsButtonComponent, LibsUiPipesConvertObjectToSignalPipe,
-                        LibsUiComponentsDropdownComponent, LibsUiComponentsButtonsSortArrowComponent, LibsUiComponentsPaginationComponent,
-                        LibsUiComponentsCheckboxSingleComponent, LibsUiTableCalculatorColumnPipe,
-                        LibsUiComponentsSpinnerComponent, LibsUiComponentsPopoverComponent,
-                        LibsUiComponentsScrollOverlayDirective, LibsUiIconsGetIconComponentPipe,
-                        LibsUiPipesCallFunctionInTemplatePipe, LibsUiPipesCheckSelectedByKeyPipe
+                        NgClass,
+                        NgStyle,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        LibsUiComponentsTableTemplatesComponent,
+                        TranslateModule,
+                        VirtualScrollerModule,
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiPipesConvertObjectToSignalPipe,
+                        LibsUiComponentsDropdownComponent,
+                        LibsUiComponentsButtonsSortArrowComponent,
+                        LibsUiComponentsPaginationComponent,
+                        LibsUiComponentsCheckboxSingleComponent,
+                        LibsUiTableCalculatorColumnPipe,
+                        LibsUiComponentsSpinnerComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsScrollOverlayDirective,
+                        LibsUiIconsGetIconComponentPipe,
+                        LibsUiPipesCallFunctionInTemplatePipe,
+                        LibsUiPipesCheckSelectedByKeyPipe,
                     ], template: "<div class='flex flex-col w-full h-full'>\n  @if (!ignoreBar()) {\n    <div\n      class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      <ng-content select='div.libs-ui-table-bar-left'></ng-content>\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]='labelBarNoSelectItem() | translate:{value:totalItemDisplay()}'>\n        </div>\n      }\n      @if (keysSelected().length) {\n        <div class=\"flex items-center pl-[12px]\">\n          <div class=\"flex items-center h-full mt-[-2px]\">\n            <libs_ui-components-checkbox-single [checked]=\"true\"\n              [disable]=\"loading() || disableCheckbox()\"\n              (outChange)=\"handlerChangeAllChecked()\" />\n          </div>\n          <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n            {{ labelBarButtons() | translate:{ value:keysSelected().length } }}\n          </div>\n          @if (configSelectMoreItem()) {\n            <libs_ui-components-dropdown [isNgContent]=\"true\"\n              [popoverCustomConfig]=\"{\n                widthByParent:false,\n                ignoreArrow: true,\n                maxHeight:  2048,\n                classInclude:'!w-[121px]',\n                position: {\n                  mode:'start',\n                  distance:0\n                  }\n                }\"\n              [listConfig]=\"listConfigMoreItem()\"\n              [listHiddenInputSearch]=\"true\"\n              [listMaxItemShow]=\"5\"\n              class=\"!w-[16px] h-[16px] mr-[8px]\"\n              (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n              (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n              <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n                [classInclude]=\"'!p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n                [popover]=\"{config:{content:'i18n_more_select'}}\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n          @if (barButtons()?.length) {\n            @for (button of barButtons();track button) {\n              <libs_ui-components-buttons-button [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"(button.label || ' ') | translate\"\n                (outClick)=\"handlerBarButtonClick(button)\" />\n            }\n          }\n        </div>\n      }\n      <ng-content select='div.libs-ui-table-bar-right'></ng-content>\n    </div>\n  }\n\n  <div #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]='!ignoreBar()'\n    (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n    <div class=\"relative w-full shrink-0\"\n      [style.height.px]=\"headerElementRef.offsetHeight\">\n      <div #headerElementRef\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"{scrollbarWidth: 0}\"\n        [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n        [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n        [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n        [class]=\"classHeaderContainer()\"\n        (outScroll)=\"handlerScrollHeader($event)\"\n        (mouseenter)=\"handlerMouseEnterHeader($event)\"\n        (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n        @if (headerLeft().length) {\n          <div [class]=\"classHeaderLeftContainer()\">\n            @for (header of headerLeft();track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:true}\" />\n            }\n          </div>\n        }\n        @if (headerRight().length) {\n          @for (header of headerRight();track header) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:false}\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n      <ng-container *ngTemplateOutlet='templateFooterRef' />\n    }\n    <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n      <div #bodyElementRef\n        class=\"flex h-full w-full relative\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScroll)=\"handlerScrollBody($event)\"\n        (outScrollBottom)=\"handlerScrollBottom($event)\">\n        @if (items().length) {\n          <virtual-scroller #bodyComponentRef\n            [items]=\"items()\"\n            [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n            class=\"h-full\"\n            [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth: undefined\"\n            [parentScroll]=\"bodyElementRef\"\n            [bufferAmount]=\"bufferAmount()\">\n            @for (data of bodyComponentRef.viewPortItems;track data()) {\n              <div #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"data().specificHightLight\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"data().specificHightLight && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"data().specificHightLight && !ignoreBorderItem()\"\n                [ngClass]=\"(data().specificHightLight || ($last && ignoreBorderItemLast())) ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px' : ignoreBorderItem() ? '' : isDashBorder() ? 'libs-ui-border-bottom-dashed-general' : 'libs-ui-border-bottom-general'\"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\n                (mouseenter)=\"setIndexHover($event,data)\"\n                (mouseleave)=\"resetIndexHoverWhenMouseLeave($event)\">\n                @if (headerLeft().length || headerRight().length) {\n                  <div class=\"flex flex-col w-full\">\n                    <div class=\"flex w-full\">\n                      @if (headerLeft().length) {\n                        <div class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!data().specificHightLight\"\n                          [class.bg-[#f3fcfc]]=\"data().specificHightLight\">\n                          @for (header of headerLeft();track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\n                              [ngStyle]=\"(header|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\n                              [ngClass]=\"header.ngClass ||  {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @for (header of headerRight();track header) {\n                          <div class=\"relative flex px-[12px] py-[8px]\"\n                            [ngStyle]=\"(header|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\n                            [ngClass]=\"header.ngClass || {}\">\n                            <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                          </div>\n                        }\n                      }\n                    </div>\n                    @if (configTemplateItemCollapseExpand() && data().specificExpand && data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand']) {\n                      <div [class]=\"configTemplateItemCollapseExpand()?.cssWrapper || 'flex w-full'\">\n                        @for (dataExpand of data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand']();track $index) {\n                          @if (configTemplateItemCollapseExpand()?.colTemplateConfig) {\n                            <libs_ui-components-table-templates [item]=\"dataExpand\"\n                              [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                              [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                          }\n                        } @empty {\n                          <div class=\"relative h-[100px]\">\n                            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </virtual-scroller>\n        } @else if (!loading()) {\n          <div class=\"sticky left-0 top-0 z-[1] h-full w-full\">\n            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n          </div>\n          @if (showScrollTablePinnedIfNoData()) {\n            <div class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n              [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n          }\n        }\n      </div>\n\n      @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n        <ng-container *ngTemplateOutlet='templateFooterRef' />\n      }\n\n      @if (loading()) {\n        <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n          <libs_ui-components-spinner />\n        </div>\n      }\n    </div>\n\n    @if (activityLoadData() === 'click-pagination') {\n      <div class=\"flex w-full mt-[12px]\">\n        <libs_ui-components-pagination\n        [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n        [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n        [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n        [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n        [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n        [numberPageDispaly]=\"paginationSetting()?.numberPageDispaly || 5\"\n        [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n        [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n        [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0)*(pagingStore()?.per_page || 0)\"\n          [perPage]=\"pagingStore()?.per_page || 0\"\n          [currentPage]=\"pagingStore()?.page || 0\"\n          (outPageSelect)=\"handlerChangePage($event)\" />\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #templateHeaderRef\n  let-header='headerItem'\n  let-isHeaderLeft='isHeaderLeft'>\n  <div\n    [class]=\"'relative flex '+ (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ')+ ' libs-ui-table-header-col '\"\n    [class.flex-col]=\"header.rowsConfig\"\n    [class.py-[8px]]='!header.ignorePyDefault'\n    [ngStyle]=\"(header|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef;context:{headerItem:header,isColRender:false}\" />\n    }\n    @if (header.rowsConfig;as rowsConfig) {\n      @for (row of rowsConfig.rows;track row) {\n        <div [class]=\"row.classRow\">\n          @for (col of row.cols ; track col) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderContentRef;context:{headerItem:col,isColRender:true}\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateHeaderContentRef\n  let-header='headerItem'\n  let-isColRender='isColRender'>\n  <div #itemHeaderRef class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n    [class.items-center]='header.contentHeaderAlignCenter ?? true'\n    [class.justify-end]='header.contentHeaderJustifyContentEnd'\n    [class.w-full]=\"header.isShowIndexOnRow\"\n    [ngStyle]=\"isColRender ? ((header|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})) : {}\"\n    [ngClass]=\"isColRender ? (header.ngClass || {}) : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single [key]=\"'all'\"\n            [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n            [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n            [disable]=\"loading()\"\n            [classInclude]=\"header.checkboxClassInclude\"\n            (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n        </div>\n      } @else {\n        <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\">\n        </div>\n      }\n    }\n    @for (tooltip of header.tooltipsLeft; track tooltip) {\n      <div class=\"mr-[4px]\">\n        <libs_ui-components-popover [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"tooltip.config || {content:(tooltip.dataView || ' ') | translate, position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12\n                }\n              }}\"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow) {\n      <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n        {{ header.label ?? '#' }}\n      </div>\n    } @else {\n      @if ((header.label | LibsUiPipesCallFunctionInTemplatePipe:header.parseValue:header) | async | translate; as labelHeaderColumn) {\n        <libs_ui-components-popover [type]=\"header?.labelConfig?.type || 'text'\"\n          [mode]=\"header?.labelConfig?.mode || 'hover'\"\n          [classInclude]=\"(header?.labelConfig?.classInclude || '')\"\n          [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n          [config]=\"header.labelConfig?.config || {content:labelHeaderColumn}\"\n          [innerHTML]=\"labelHeaderColumn\" />\n      }\n    }\n\n    @for (tooltip of header.tooltipsRight; track tooltip) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-popover [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"tooltip.config || {content:(tooltip.dataView || ' ') | translate, position: {\n              mode: 'center',\n              distance: 0,\n              autoUpdatePosition: {\n                endDistance: 12,\n                startDistance: -12\n              }\n            }}\"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.hasSort && header.orderby) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || !items().length\"\n          [fieldSort]=\"header.orderby\"\n          [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n          [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n          [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n          [defaultMode]=\"header.defaultMode\"\n          [zIndex]=\"header.zIndexTooltipSort\"\n          (outChange)=\"handlerChangeSort($event)\" />\n      </div>\n    }\n  </div>\n  @if (header.labelDescription) {\n    <div class=\"flex\">\n      <libs_ui-components-popover [type]=\"'text'\"\n        [classInclude]=\"header.labelDescription.classInclude || ''\"\n        [config]=\"{content: header.labelDescription.content | translate}\"\n        [innerHTML]=\"header.labelDescription.content | translate\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateBodyRef\n  let-header='header'\n  let-data='data'>\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div class=\"flex h-full\"\n        [class.invisible]=\"header.checkConditionCheckBoxHidden &&( data() | LibsUiPipesCallFunctionInTemplatePipe:header.checkConditionCheckBoxHidden:data() | async)\"\n        [class.items-center]=\"header.checkboxAlignCenter\">\n        <libs_ui-components-checkbox-single [key]=\"data()[fieldKey()]\"\n          [classInclude]=\"header.checkboxClassInclude\"\n          [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe:keysSelected():keysSelected().length\"\n          [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe:keysSelected():keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n          (outChange)=\"handlerChangeItemChecked($event,data())\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow; as config) {\n      <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n        <div LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{}\"\n          [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe:getIndexRow | async\">\n        </div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      <libs_ui-components-table-templates [isHover]=\"itemOfIndexHover === data && !data.specificHightLight\"\n        [class]=\"header.templateCssWrapperHost || ''\"\n        [item]=\"data\"\n        [templateCssWrapper]=\"header.templateCssWrapper\"\n        [configs]=\"header.colTemplateConfig\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div #footerElementRef\n      class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '': (customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general':'libs-ui-table-shadow-top libs-ui-border-top-general') }} min-h-[35px]\"\n      (mouseenter)=\"handlerMouseEnterFooter($event)\"\n      (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n      @if (footerLeft()) {\n        <div #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft();track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"(footer|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:footerLeft():footerRight()) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                <libs_ui-components-table-templates [item]=\"itemFooter|LibsUiPipesConvertObjectToSignalPipe\"\n                  [templateCssWrapper]=\"footer.templateCssWrapper\"\n                  [configs]=\"footer.colTemplateConfig\" />\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight()) {\n        @for (footer of footerRight();track footer) {\n          <div class=\"flex items-center px-[12px] py-[8px]\"\n            [ngStyle]=\"(footer|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:footerLeft():footerRight()) || {}\"\n            [ngClass]=\"footer.ngClass || {}\">\n            @if (footer.colTemplateConfig && itemFooter()) {\n              <libs_ui-components-table-templates [item]=\"itemFooter|LibsUiPipesConvertObjectToSignalPipe\"\n                [templateCssWrapper]=\"footer.templateCssWrapper\"\n                [configs]=\"footer.colTemplateConfig\" />\n            }\n          </div>\n        }\n      }\n\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (!keySearch() && templateNoData(); as templateNoData) {\n    <ng-container *ngTemplateOutlet=\"templateNoData\" />\n  } @if (keySearch() && templateNoResult(); as templateNoResult) {\n    <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n  }\n  @if (!templateNoData() && !templateNoResult() && noDataConfig(); as config) {\n    <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n      <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\"\n        LibsUiComponentsScrollOverlayDirective>\n        @if (!keySearch() && !onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\" ('no-data' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textNoData | translate\">\n          </div>\n        }\n        @if (keySearch() || onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\"('no-result' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textSearchNoData | translate\">\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [".libs-ui-table-header-container{height:33px;flex-shrink:0}.libs-ui-table-header-col{height:100%;width:100%;align-items:center}.libs-ui-table-no-data-config-text{margin-top:16px;font-size:12px;color:#9ca2ad;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400}.libs-ui-table-no-data-config-icon{margin-bottom:12px}.libs-ui-table-no-data-config-icon:before{font-size:84px;color:#c1c1c1}.libs-ui-table-shadow-bottom{box-shadow:0 1px 1px #00143305,0 4px 8px #0014330a}@media only screen and (min-width: 1921px){.libs-ui-border-bottom-general{border-bottom:solid 2px #e6e8ed!important}}\n"] }]
         }], ctorParameters: () => [] });