@libs-ui/components-table 0.2.346-0 → 0.2.346-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -891,7 +891,7 @@ class LibsUiComponentsTableComponent {
|
|
|
891
891
|
clearTimeout(this.timeoutLeaveItem());
|
|
892
892
|
}
|
|
893
893
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
894
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTableComponent, isStandalone: true, selector: "libs_ui-components-table", inputs: { optimizeTableRenderByOnViewport: { classPropertyName: "optimizeTableRenderByOnViewport", publicName: "optimizeTableRenderByOnViewport", isSignal: true, isRequired: false, transformFunction: null }, timeHighlighNewItem: { classPropertyName: "timeHighlighNewItem", publicName: "timeHighlighNewItem", isSignal: true, isRequired: false, transformFunction: null }, headerLeft: { classPropertyName: "headerLeft", publicName: "headerLeft", isSignal: true, isRequired: false, transformFunction: null }, headerRight: { classPropertyName: "headerRight", publicName: "headerRight", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorWidthHeader: { classPropertyName: "ignoreCalculatorWidthHeader", publicName: "ignoreCalculatorWidthHeader", isSignal: true, isRequired: false, transformFunction: null }, configTemplateItemCollapseExpand: { classPropertyName: "configTemplateItemCollapseExpand", publicName: "configTemplateItemCollapseExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderFooter: { classPropertyName: "ignoreBorderFooter", publicName: "ignoreBorderFooter", isSignal: true, isRequired: false, transformFunction: null }, customPositionFooter: { classPropertyName: "customPositionFooter", publicName: "customPositionFooter", isSignal: true, isRequired: false, transformFunction: null }, footerLeft: { classPropertyName: "footerLeft", publicName: "footerLeft", isSignal: true, isRequired: false, transformFunction: null }, footerRight: { classPropertyName: "footerRight", publicName: "footerRight", isSignal: true, isRequired: false, transformFunction: null }, disableCheckbox: { classPropertyName: "disableCheckbox", publicName: "disableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableUnequalChildrenSizes: { classPropertyName: "enableUnequalChildrenSizes", publicName: "enableUnequalChildrenSizes", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, totalItem: { classPropertyName: "totalItem", publicName: "totalItem", isSignal: true, isRequired: false, transformFunction: null }, isDashBorder: { classPropertyName: "isDashBorder", publicName: "isDashBorder", isSignal: true, isRequired: false, transformFunction: null }, classHeaderContainerInclude: { classPropertyName: "classHeaderContainerInclude", publicName: "classHeaderContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classHeaderLeftInclude: { classPropertyName: "classHeaderLeftInclude", publicName: "classHeaderLeftInclude", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, classFooterInclude: { classPropertyName: "classFooterInclude", publicName: "classFooterInclude", isSignal: true, isRequired: false, transformFunction: null }, classTableContainerInclude: { classPropertyName: "classTableContainerInclude", publicName: "classTableContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classBarInclude: { classPropertyName: "classBarInclude", publicName: "classBarInclude", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, labelBarNoSelectItem: { classPropertyName: "labelBarNoSelectItem", publicName: "labelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, labelBarButtons: { classPropertyName: "labelBarButtons", publicName: "labelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarButtons: { classPropertyName: "classLabelBarButtons", publicName: "classLabelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, barButtons: { classPropertyName: "barButtons", publicName: "barButtons", isSignal: true, isRequired: false, transformFunction: null }, sortLocal: { classPropertyName: "sortLocal", publicName: "sortLocal", isSignal: true, isRequired: false, transformFunction: null }, filterOrSortLocal: { classPropertyName: "filterOrSortLocal", publicName: "filterOrSortLocal", isSignal: true, isRequired: false, transformFunction: null }, httpRequestData: { classPropertyName: "httpRequestData", publicName: "httpRequestData", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDataFooter: { classPropertyName: "httpRequestDataFooter", publicName: "httpRequestDataFooter", isSignal: true, isRequired: false, transformFunction: null }, newData: { classPropertyName: "newData", publicName: "newData", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBar: { classPropertyName: "ignoreBar", publicName: "ignoreBar", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarNoSelectItem: { classPropertyName: "classLabelBarNoSelectItem", publicName: "classLabelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassBgHeader: { classPropertyName: "ignoreClassBgHeader", publicName: "ignoreClassBgHeader", isSignal: true, isRequired: false, transformFunction: null }, noDataConfig: { classPropertyName: "noDataConfig", publicName: "noDataConfig", isSignal: true, isRequired: false, transformFunction: null }, showScrollTablePinnedIfNoData: { classPropertyName: "showScrollTablePinnedIfNoData", publicName: "showScrollTablePinnedIfNoData", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItemLast: { classPropertyName: "ignoreBorderItemLast", publicName: "ignoreBorderItemLast", isSignal: true, isRequired: false, transformFunction: null }, isHiddenHeaderWhenNodata: { classPropertyName: "isHiddenHeaderWhenNodata", publicName: "isHiddenHeaderWhenNodata", isSignal: true, isRequired: false, transformFunction: null }, maxItemSelected: { classPropertyName: "maxItemSelected", publicName: "maxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, configSelectMoreItem: { classPropertyName: "configSelectMoreItem", publicName: "configSelectMoreItem", isSignal: true, isRequired: false, transformFunction: null }, onlyShowNoResult: { classPropertyName: "onlyShowNoResult", publicName: "onlyShowNoResult", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItem: { classPropertyName: "ignoreBorderItem", publicName: "ignoreBorderItem", isSignal: true, isRequired: false, transformFunction: null }, activityLoadData: { classPropertyName: "activityLoadData", publicName: "activityLoadData", isSignal: true, isRequired: false, transformFunction: null }, paginationSetting: { classPropertyName: "paginationSetting", publicName: "paginationSetting", isSignal: true, isRequired: false, transformFunction: null }, templateNoData: { classPropertyName: "templateNoData", publicName: "templateNoData", isSignal: true, isRequired: false, transformFunction: null }, templateNoResult: { classPropertyName: "templateNoResult", publicName: "templateNoResult", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLoadMore: "outLoadMore", outScrollIsGone: "outScrollIsGone", outLoading: "outLoading", outClickButtonAction: "outClickButtonAction", outSort: "outSort", outClickBarButton: "outClickBarButton", outHoverButtonAction: "outHoverButtonAction", outKeysSelected: "outKeysSelected", outFunctionsControl: "outFunctionsControl", outLoadDataComplete: "outLoadDataComplete", outTotalItem: "outTotalItem", outLoadDataError: "outLoadDataError" }, viewQueries: [{ propertyName: "headerElementRef", first: true, predicate: ["headerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerElementRef", first: true, predicate: ["footerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerLeftElementRef", first: true, predicate: ["footerLeftElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyElementRef", first: true, predicate: ["bodyElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyComponentRef", first: true, predicate: ["bodyComponentRef"], descendants: true, isSignal: true }], ngImport: i0, 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\n class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></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\n [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\n [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\n [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 @let constHtmlLabel = button.label || ' ';\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [label]=\"constHtmlLabel | 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\n #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\n class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n <div\n #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]=\"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\n #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\n #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\n #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]=\"\n data().specificHightLight?.() || ($last && ignoreBorderItemLast())\n ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n : ignoreBorderItem()\n ? ''\n : isDashBorder()\n ? 'libs-ui-border-bottom-dashed-general'\n : 'libs-ui-border-bottom-general'\n \"\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\n 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]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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\n class=\"relative flex px-[12px] py-[8px]\"\n [ngStyle]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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 @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n }\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-[calc(100%-10px)] w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div\n 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 [numberPageDisplay]=\"paginationSetting()?.numberPageDisplay || 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\n #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]=\"\n (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\n [ngClass]=\"header.ngClass || {}\">\n @if (!header.rowsConfig) {\n <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\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, isHeaderLeft: isHeaderLeft }\" />\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template\n #templateHeaderContentRef\n let-header=\"headerItem\"\n let-isColRender=\"isColRender\"\n let-isHeaderLeft=\"isHeaderLeft\">\n <div\n #itemHeaderRef\n 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]=\"\n isColRender\n ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n : {}\n \"\n [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n @if (header.hasCheckbox) {\n @if (header.hasCheckboxAll) {\n <div\n class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [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 }}\"></div>\n }\n }\n @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[4px]\">\n @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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 @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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\n [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\n #templateBodyRef\n let-header=\"header\"\n let-data=\"data\">\n <div class=\"flex w-full h-full\">\n @if (header.hasCheckbox) {\n <div\n 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\n [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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{}\"\n [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n </div>\n }\n\n @if (header.colTemplateConfig) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n }\n }\n </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n <div\n #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\n #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: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n </div>\n }\n @if (footerRight()) {\n @for (footer of footerRight(); track footer) {\n <div\n class=\"flex items-center px-[12px] py-[8px]\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n\n<ng-template #templateNodataRef>\n @if (keySearch() || onlyShowNoResult()) {\n @if (templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextSearchNoData = noDataConfig().textSearchNoData || 'i18n_no_result';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextSearchNoData | translate\"></div>\n </div>\n </div>\n }\n } @else {\n @if (templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextNoData = noDataConfig().textNoData || 'i18n_no_data_yet';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextNoData | translate\"></div>\n </div>\n </div>\n }\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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i2.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: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "component", type: LibsUiComponentsPaginationComponent, selector: "libs_ui-components-pagination", inputs: ["showTotalPage", "showInputGotoPage", "modeDisplayTotalPageAndGotoPage", "classDisplayTotalPageAndGotoPage", "classIncludeContainer", "classIncludeItem", "disable", "numberPageDisplay", "totalItems", "perPage", "currentPage"], outputs: ["currentPageChange", "outPageSelect"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiTableCalculatorColumnPipe, name: "LibsUiTableCalculatorColumnPipe" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent,
|
|
894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTableComponent, isStandalone: true, selector: "libs_ui-components-table", inputs: { optimizeTableRenderByOnViewport: { classPropertyName: "optimizeTableRenderByOnViewport", publicName: "optimizeTableRenderByOnViewport", isSignal: true, isRequired: false, transformFunction: null }, timeHighlighNewItem: { classPropertyName: "timeHighlighNewItem", publicName: "timeHighlighNewItem", isSignal: true, isRequired: false, transformFunction: null }, headerLeft: { classPropertyName: "headerLeft", publicName: "headerLeft", isSignal: true, isRequired: false, transformFunction: null }, headerRight: { classPropertyName: "headerRight", publicName: "headerRight", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorWidthHeader: { classPropertyName: "ignoreCalculatorWidthHeader", publicName: "ignoreCalculatorWidthHeader", isSignal: true, isRequired: false, transformFunction: null }, configTemplateItemCollapseExpand: { classPropertyName: "configTemplateItemCollapseExpand", publicName: "configTemplateItemCollapseExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderFooter: { classPropertyName: "ignoreBorderFooter", publicName: "ignoreBorderFooter", isSignal: true, isRequired: false, transformFunction: null }, customPositionFooter: { classPropertyName: "customPositionFooter", publicName: "customPositionFooter", isSignal: true, isRequired: false, transformFunction: null }, footerLeft: { classPropertyName: "footerLeft", publicName: "footerLeft", isSignal: true, isRequired: false, transformFunction: null }, footerRight: { classPropertyName: "footerRight", publicName: "footerRight", isSignal: true, isRequired: false, transformFunction: null }, disableCheckbox: { classPropertyName: "disableCheckbox", publicName: "disableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableUnequalChildrenSizes: { classPropertyName: "enableUnequalChildrenSizes", publicName: "enableUnequalChildrenSizes", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, totalItem: { classPropertyName: "totalItem", publicName: "totalItem", isSignal: true, isRequired: false, transformFunction: null }, isDashBorder: { classPropertyName: "isDashBorder", publicName: "isDashBorder", isSignal: true, isRequired: false, transformFunction: null }, classHeaderContainerInclude: { classPropertyName: "classHeaderContainerInclude", publicName: "classHeaderContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classHeaderLeftInclude: { classPropertyName: "classHeaderLeftInclude", publicName: "classHeaderLeftInclude", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, classFooterInclude: { classPropertyName: "classFooterInclude", publicName: "classFooterInclude", isSignal: true, isRequired: false, transformFunction: null }, classTableContainerInclude: { classPropertyName: "classTableContainerInclude", publicName: "classTableContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classBarInclude: { classPropertyName: "classBarInclude", publicName: "classBarInclude", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, labelBarNoSelectItem: { classPropertyName: "labelBarNoSelectItem", publicName: "labelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, labelBarButtons: { classPropertyName: "labelBarButtons", publicName: "labelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarButtons: { classPropertyName: "classLabelBarButtons", publicName: "classLabelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, barButtons: { classPropertyName: "barButtons", publicName: "barButtons", isSignal: true, isRequired: false, transformFunction: null }, sortLocal: { classPropertyName: "sortLocal", publicName: "sortLocal", isSignal: true, isRequired: false, transformFunction: null }, filterOrSortLocal: { classPropertyName: "filterOrSortLocal", publicName: "filterOrSortLocal", isSignal: true, isRequired: false, transformFunction: null }, httpRequestData: { classPropertyName: "httpRequestData", publicName: "httpRequestData", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDataFooter: { classPropertyName: "httpRequestDataFooter", publicName: "httpRequestDataFooter", isSignal: true, isRequired: false, transformFunction: null }, newData: { classPropertyName: "newData", publicName: "newData", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBar: { classPropertyName: "ignoreBar", publicName: "ignoreBar", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarNoSelectItem: { classPropertyName: "classLabelBarNoSelectItem", publicName: "classLabelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassBgHeader: { classPropertyName: "ignoreClassBgHeader", publicName: "ignoreClassBgHeader", isSignal: true, isRequired: false, transformFunction: null }, noDataConfig: { classPropertyName: "noDataConfig", publicName: "noDataConfig", isSignal: true, isRequired: false, transformFunction: null }, showScrollTablePinnedIfNoData: { classPropertyName: "showScrollTablePinnedIfNoData", publicName: "showScrollTablePinnedIfNoData", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItemLast: { classPropertyName: "ignoreBorderItemLast", publicName: "ignoreBorderItemLast", isSignal: true, isRequired: false, transformFunction: null }, isHiddenHeaderWhenNodata: { classPropertyName: "isHiddenHeaderWhenNodata", publicName: "isHiddenHeaderWhenNodata", isSignal: true, isRequired: false, transformFunction: null }, maxItemSelected: { classPropertyName: "maxItemSelected", publicName: "maxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, configSelectMoreItem: { classPropertyName: "configSelectMoreItem", publicName: "configSelectMoreItem", isSignal: true, isRequired: false, transformFunction: null }, onlyShowNoResult: { classPropertyName: "onlyShowNoResult", publicName: "onlyShowNoResult", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItem: { classPropertyName: "ignoreBorderItem", publicName: "ignoreBorderItem", isSignal: true, isRequired: false, transformFunction: null }, activityLoadData: { classPropertyName: "activityLoadData", publicName: "activityLoadData", isSignal: true, isRequired: false, transformFunction: null }, paginationSetting: { classPropertyName: "paginationSetting", publicName: "paginationSetting", isSignal: true, isRequired: false, transformFunction: null }, templateNoData: { classPropertyName: "templateNoData", publicName: "templateNoData", isSignal: true, isRequired: false, transformFunction: null }, templateNoResult: { classPropertyName: "templateNoResult", publicName: "templateNoResult", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLoadMore: "outLoadMore", outScrollIsGone: "outScrollIsGone", outLoading: "outLoading", outClickButtonAction: "outClickButtonAction", outSort: "outSort", outClickBarButton: "outClickBarButton", outHoverButtonAction: "outHoverButtonAction", outKeysSelected: "outKeysSelected", outFunctionsControl: "outFunctionsControl", outLoadDataComplete: "outLoadDataComplete", outTotalItem: "outTotalItem", outLoadDataError: "outLoadDataError" }, viewQueries: [{ propertyName: "headerElementRef", first: true, predicate: ["headerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerElementRef", first: true, predicate: ["footerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerLeftElementRef", first: true, predicate: ["footerLeftElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyElementRef", first: true, predicate: ["bodyElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyComponentRef", first: true, predicate: ["bodyComponentRef"], descendants: true, isSignal: true }], ngImport: i0, 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\n class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></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\n [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\n [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\n [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 @let constHtmlLabel = button.label || ' ';\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [label]=\"constHtmlLabel | 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\n #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\n class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n <div\n #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]=\"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\n #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\n #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\n #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]=\"\n data().specificHightLight?.() || ($last && ignoreBorderItemLast())\n ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n : ignoreBorderItem()\n ? ''\n : isDashBorder()\n ? 'libs-ui-border-bottom-dashed-general'\n : 'libs-ui-border-bottom-general'\n \"\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\n 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]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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\n class=\"relative flex px-[12px] py-[8px]\"\n [ngStyle]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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 @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n }\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-[calc(100%-10px)] w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div\n 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 [numberPageDisplay]=\"paginationSetting()?.numberPageDisplay || 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\n #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]=\"\n (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\n [ngClass]=\"header.ngClass || {}\">\n @if (!header.rowsConfig) {\n <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\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, isHeaderLeft: isHeaderLeft }\" />\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template\n #templateHeaderContentRef\n let-header=\"headerItem\"\n let-isColRender=\"isColRender\"\n let-isHeaderLeft=\"isHeaderLeft\">\n <div\n #itemHeaderRef\n 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]=\"\n isColRender\n ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n : {}\n \"\n [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n @if (header.hasCheckbox) {\n @if (header.hasCheckboxAll) {\n <div\n class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [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 }}\"></div>\n }\n }\n @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[4px]\">\n @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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 @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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\n [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\n #templateBodyRef\n let-header=\"header\"\n let-data=\"data\">\n <div class=\"flex w-full h-full\">\n @if (header.hasCheckbox) {\n <div\n 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\n [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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{}\"\n [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n </div>\n }\n\n @if (header.colTemplateConfig) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"header.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n }\n }\n </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n <div\n #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\n #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: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n </div>\n }\n @if (footerRight()) {\n @for (footer of footerRight(); track footer) {\n <div\n class=\"flex items-center px-[12px] py-[8px]\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n\n<ng-template #templateNodataRef>\n @if (keySearch() || onlyShowNoResult()) {\n @if (templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextSearchNoData = noDataConfig().textSearchNoData || 'i18n_no_result';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextSearchNoData | translate\"></div>\n </div>\n </div>\n }\n } @else {\n @if (templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextNoData = noDataConfig().textNoData || 'i18n_no_data_yet';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextNoData | translate\"></div>\n </div>\n </div>\n }\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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i2.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: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "component", type: LibsUiComponentsPaginationComponent, selector: "libs_ui-components-pagination", inputs: ["showTotalPage", "showInputGotoPage", "modeDisplayTotalPageAndGotoPage", "classDisplayTotalPageAndGotoPage", "classIncludeContainer", "classIncludeItem", "disable", "numberPageDisplay", "totalItems", "perPage", "currentPage"], outputs: ["currentPageChange", "outPageSelect"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiTableCalculatorColumnPipe, name: "LibsUiTableCalculatorColumnPipe" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent,
|
|
895
895
|
LibsUiPipesConvertObjectToSignalPipe], () => [LibsUiComponentsTableTemplatesComponent,
|
|
896
896
|
LibsUiPipesConvertObjectToSignalPipe]] });
|
|
897
897
|
}
|
|
@@ -919,7 +919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
919
919
|
LibsUiIconsGetIconComponentPipe,
|
|
920
920
|
LibsUiPipesCallFunctionInTemplatePipe,
|
|
921
921
|
LibsUiPipesCheckSelectedByKeyPipe,
|
|
922
|
-
], 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\n class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></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\n [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\n [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\n [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 @let constHtmlLabel = button.label || ' ';\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [label]=\"constHtmlLabel | 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\n #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\n class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n <div\n #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]=\"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\n #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\n #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\n #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]=\"\n data().specificHightLight?.() || ($last && ignoreBorderItemLast())\n ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n : ignoreBorderItem()\n ? ''\n : isDashBorder()\n ? 'libs-ui-border-bottom-dashed-general'\n : 'libs-ui-border-bottom-general'\n \"\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\n 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]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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\n class=\"relative flex px-[12px] py-[8px]\"\n [ngStyle]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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 @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n }\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-[calc(100%-10px)] w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div\n 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 [numberPageDisplay]=\"paginationSetting()?.numberPageDisplay || 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\n #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]=\"\n (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\n [ngClass]=\"header.ngClass || {}\">\n @if (!header.rowsConfig) {\n <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\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, isHeaderLeft: isHeaderLeft }\" />\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template\n #templateHeaderContentRef\n let-header=\"headerItem\"\n let-isColRender=\"isColRender\"\n let-isHeaderLeft=\"isHeaderLeft\">\n <div\n #itemHeaderRef\n 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]=\"\n isColRender\n ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n : {}\n \"\n [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n @if (header.hasCheckbox) {\n @if (header.hasCheckboxAll) {\n <div\n class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [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 }}\"></div>\n }\n }\n @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[4px]\">\n @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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 @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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\n [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\n #templateBodyRef\n let-header=\"header\"\n let-data=\"data\">\n <div class=\"flex w-full h-full\">\n @if (header.hasCheckbox) {\n <div\n 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\n [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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{}\"\n [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n </div>\n }\n\n @if (header.colTemplateConfig) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n }\n }\n </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n <div\n #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\n #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: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n </div>\n }\n @if (footerRight()) {\n @for (footer of footerRight(); track footer) {\n <div\n class=\"flex items-center px-[12px] py-[8px]\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div class=\"h-full w-full\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n\n<ng-template #templateNodataRef>\n @if (keySearch() || onlyShowNoResult()) {\n @if (templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextSearchNoData = noDataConfig().textSearchNoData || 'i18n_no_result';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextSearchNoData | translate\"></div>\n </div>\n </div>\n }\n } @else {\n @if (templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextNoData = noDataConfig().textNoData || 'i18n_no_data_yet';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextNoData | translate\"></div>\n </div>\n </div>\n }\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"] }]
|
|
922
|
+
], 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\n class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></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\n [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\n [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\n [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 @let constHtmlLabel = button.label || ' ';\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [label]=\"constHtmlLabel | 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\n #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\n class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n <div\n #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]=\"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\n #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\n #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\n #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]=\"\n data().specificHightLight?.() || ($last && ignoreBorderItemLast())\n ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n : ignoreBorderItem()\n ? ''\n : isDashBorder()\n ? 'libs-ui-border-bottom-dashed-general'\n : 'libs-ui-border-bottom-general'\n \"\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\n 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]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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\n class=\"relative flex px-[12px] py-[8px]\"\n [ngStyle]=\"\n (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\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 @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"dataExpand\"\n [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n }\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-[calc(100%-10px)] w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div\n 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 [numberPageDisplay]=\"paginationSetting()?.numberPageDisplay || 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\n #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]=\"\n (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n \"\n [ngClass]=\"header.ngClass || {}\">\n @if (!header.rowsConfig) {\n <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\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, isHeaderLeft: isHeaderLeft }\" />\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template\n #templateHeaderContentRef\n let-header=\"headerItem\"\n let-isColRender=\"isColRender\"\n let-isHeaderLeft=\"isHeaderLeft\">\n <div\n #itemHeaderRef\n 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]=\"\n isColRender\n ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n : {}\n \"\n [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n @if (header.hasCheckbox) {\n @if (header.hasCheckboxAll) {\n <div\n class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [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 }}\"></div>\n }\n }\n @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[4px]\">\n @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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 @let constHtmlTooltip = tooltip.dataView || ' ';\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: constHtmlTooltip | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\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\n [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\n [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\n #templateBodyRef\n let-header=\"header\"\n let-data=\"data\">\n <div class=\"flex w-full h-full\">\n @if (header.hasCheckbox) {\n <div\n 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\n [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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{}\"\n [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n </div>\n }\n\n @if (header.colTemplateConfig) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"header.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [isHover]=\"itemOfIndexHover === data && !data.specificHightLight?.()\"\n [class]=\"header.templateCssWrapperHost || ''\"\n [item]=\"data\"\n [templateCssWrapper]=\"header.templateCssWrapper\"\n [configs]=\"header.colTemplateConfig\" />\n }\n }\n </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n <div\n #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\n #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: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n </div>\n }\n @if (footerRight()) {\n @for (footer of footerRight(); track footer) {\n <div\n class=\"flex items-center px-[12px] py-[8px]\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n @if (optimizeTableRenderByOnViewport()) {\n @defer (on viewport) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n } @placeholder {\n <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n }\n } @else {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [class]=\"footer.templateCssWrapperHost || ''\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n\n<ng-template #templateNodataRef>\n @if (keySearch() || onlyShowNoResult()) {\n @if (templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextSearchNoData = noDataConfig().textSearchNoData || 'i18n_no_result';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextSearchNoData | translate\"></div>\n </div>\n </div>\n }\n } @else {\n @if (templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n } @else {\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 <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n @let constHtmlTextNoData = noDataConfig().textNoData || 'i18n_no_data_yet';\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"noDataConfig().ngStyle || {}\"\n [ngClass]=\"noDataConfig().ngClass || {}\"\n [innerHtml]=\"constHtmlTextNoData | translate\"></div>\n </div>\n </div>\n }\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"] }]
|
|
923
923
|
}], ctorParameters: () => [] });
|
|
924
924
|
|
|
925
925
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|