@libs-ui/components-table 0.2.274 → 0.2.276
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.
- package/esm2022/interfaces/template-config.interface.mjs +1 -1
- package/esm2022/table.component.mjs +10 -11
- package/esm2022/templates/templates.component.mjs +3 -3
- package/fesm2022/libs-ui-components-table.mjs +88 -89
- package/fesm2022/libs-ui-components-table.mjs.map +1 -1
- package/interfaces/template-config.interface.d.ts +1 -6
- package/package.json +25 -25
- package/table.component.d.ts +2 -2
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
import { NgStyle, NgClass, AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import { HttpParams } from '@angular/common/http';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, ChangeDetectionStrategy, Component,
|
|
4
|
+
import { Pipe, input, ChangeDetectionStrategy, Component, computed, signal, output, viewChild, inject, DestroyRef, ChangeDetectorRef, effect, untracked } from '@angular/core';
|
|
5
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
6
|
import * as i2 from '@iharbeck/ngx-virtual-scroller';
|
|
6
7
|
import { VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
|
|
7
8
|
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
8
9
|
import { LibsUiComponentsButtonsSortArrowComponent } from '@libs-ui/components-buttons-sort';
|
|
9
10
|
import { LibsUiComponentsCheckboxSingleComponent } from '@libs-ui/components-checkbox-single';
|
|
10
11
|
import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
|
|
12
|
+
import { LibsUiComponentsPaginationComponent } from '@libs-ui/components-pagination';
|
|
11
13
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
12
14
|
import { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';
|
|
13
15
|
import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
|
|
14
16
|
import { LibsUiIconsGetIconComponentPipe } from '@libs-ui/icons';
|
|
15
17
|
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
|
|
16
18
|
import { LibsUiPipesCheckSelectedByKeyPipe } from '@libs-ui/pipes-check-selected-by-key';
|
|
19
|
+
import { LibsUiPipesConvertObjectToSignalPipe } from '@libs-ui/pipes-convert-object-to-signal';
|
|
17
20
|
import { returnListObject, LibsUiHttpRequestService } from '@libs-ui/services-http-request';
|
|
18
21
|
import { get, convertObjectToSignal, viewDataNumberByLanguage, cloneDeep, deleteUnicode, set } from '@libs-ui/utils';
|
|
19
22
|
import * as i1 from '@ngx-translate/core';
|
|
20
23
|
import { TranslateModule } from '@ngx-translate/core';
|
|
21
|
-
import {
|
|
24
|
+
import { fromEvent, of, lastValueFrom, timer } from 'rxjs';
|
|
22
25
|
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
|
|
23
26
|
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
|
|
24
27
|
import { LibsUiComponentsButtonsStatusComponent } from '@libs-ui/components-buttons-status';
|
|
@@ -27,8 +30,84 @@ import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
|
27
30
|
import { LibsUiPipesCloneObjectPipe } from '@libs-ui/pipes-clone-object';
|
|
28
31
|
import { LibsUiPipesGetValueOfObjectPipe } from '@libs-ui/pipes-get-value-of-object';
|
|
29
32
|
import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
|
|
34
|
+
class LibsUiTableCalculatorColumnPipe {
|
|
35
|
+
transform(header, offsetWidth, headerLeftConfig, headerRightConfig) {
|
|
36
|
+
if (!header?.ngStyle) {
|
|
37
|
+
return undefined;
|
|
38
|
+
}
|
|
39
|
+
const mixHeaderConfig = [...(headerLeftConfig || []), ...(headerRightConfig || [])];
|
|
40
|
+
let totalPxWidthHeader = mixHeaderConfig.reduce((acc, curr) => acc + this.getWidthPxOfStyle(curr), 0);
|
|
41
|
+
const totalPercentWidthHeader = mixHeaderConfig.reduce((acc, curr) => acc + this.getWidthPercentOfStyle(curr), 0);
|
|
42
|
+
const totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader = mixHeaderConfig.reduce((acc, curr) => acc + (curr.keepWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader ? this.getWidthPxOfStyle(curr) : 0), 0);
|
|
43
|
+
if (mixHeaderConfig.some(header => header.isShowIndexOnRow)) {
|
|
44
|
+
offsetWidth -= 50;
|
|
45
|
+
}
|
|
46
|
+
if (totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader) {
|
|
47
|
+
offsetWidth -= totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader;
|
|
48
|
+
totalPxWidthHeader -= totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader;
|
|
49
|
+
}
|
|
50
|
+
let percent = this.getWidthPercentOfStyle(header);
|
|
51
|
+
if (percent) {
|
|
52
|
+
offsetWidth -= totalPxWidthHeader;
|
|
53
|
+
const percentDivide = (totalPercentWidthHeader - 100) / mixHeaderConfig.length;
|
|
54
|
+
percent -= percentDivide;
|
|
55
|
+
const widthCalculator = (percent / 100) * offsetWidth;
|
|
56
|
+
return this.getStyleUpdate(widthCalculator, header.ngStyle);
|
|
57
|
+
}
|
|
58
|
+
const width = this.getWidthPxOfStyle(header);
|
|
59
|
+
if (totalPxWidthHeader > offsetWidth || header.keepWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader || totalPercentWidthHeader) {
|
|
60
|
+
return this.getStyleUpdate(width, header.ngStyle);
|
|
61
|
+
}
|
|
62
|
+
const widthCalculator = (width / totalPxWidthHeader) * offsetWidth;
|
|
63
|
+
return this.getStyleUpdate(widthCalculator, header.ngStyle);
|
|
64
|
+
}
|
|
65
|
+
getWidthPxOfStyle(headerGetWidth) {
|
|
66
|
+
let { flex, width, maxWidth } = headerGetWidth.ngStyle || {};
|
|
67
|
+
if (flex?.includes('%') || width?.includes('%') || maxWidth?.includes('%')) {
|
|
68
|
+
return 0;
|
|
69
|
+
}
|
|
70
|
+
width = parseInt(width || '0');
|
|
71
|
+
maxWidth = parseInt(maxWidth || '0');
|
|
72
|
+
flex = parseInt((flex || '0').split(' ').pop() || '0');
|
|
73
|
+
if (!flex && !width && !maxWidth) {
|
|
74
|
+
return 0;
|
|
75
|
+
}
|
|
76
|
+
const widthMax = Math.max(width, maxWidth, flex);
|
|
77
|
+
return widthMax;
|
|
78
|
+
}
|
|
79
|
+
getWidthPercentOfStyle(headerGetWidth) {
|
|
80
|
+
let { flex, width, maxWidth } = headerGetWidth.ngStyle || {};
|
|
81
|
+
if (flex?.includes('px') || width?.includes('px') || maxWidth?.includes('px')) {
|
|
82
|
+
return 0;
|
|
83
|
+
}
|
|
84
|
+
width = parseInt(width || '0');
|
|
85
|
+
maxWidth = parseInt(maxWidth || '0');
|
|
86
|
+
flex = parseInt((flex || '0').split(' ').pop() || '0');
|
|
87
|
+
if (!flex && !width && !maxWidth) {
|
|
88
|
+
return 0;
|
|
89
|
+
}
|
|
90
|
+
const widthMax = Math.max(width, maxWidth, flex);
|
|
91
|
+
return widthMax;
|
|
92
|
+
}
|
|
93
|
+
getStyleUpdate(widthCalculator, ngStyle) {
|
|
94
|
+
return {
|
|
95
|
+
...ngStyle,
|
|
96
|
+
flex: `0 0 ${widthCalculator}px`,
|
|
97
|
+
width: `${widthCalculator}px`,
|
|
98
|
+
maxWidth: `${widthCalculator}px`
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
102
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, isStandalone: true, name: "LibsUiTableCalculatorColumnPipe" });
|
|
103
|
+
}
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, decorators: [{
|
|
105
|
+
type: Pipe,
|
|
106
|
+
args: [{
|
|
107
|
+
name: 'LibsUiTableCalculatorColumnPipe',
|
|
108
|
+
standalone: true
|
|
109
|
+
}]
|
|
110
|
+
}] });
|
|
32
111
|
|
|
33
112
|
class LibsUiComponentsTableTemplatesComponent {
|
|
34
113
|
lockClick;
|
|
@@ -108,7 +187,7 @@ class LibsUiComponentsTableTemplatesComponent {
|
|
|
108
187
|
this.functionControls.clear();
|
|
109
188
|
}
|
|
110
189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTableTemplatesComponent, isStandalone: true, selector: "libs_ui-components-table-templates", inputs: { isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null }, configs: { classPropertyName: "configs", publicName: "configs", isSignal: true, isRequired: false, transformFunction: null }, templateCssWrapper: { classPropertyName: "templateCssWrapper", publicName: "templateCssWrapper", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (configs(); as configs) {\n @if (item(); as item) {\n <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig;let index = $index;) {\n\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case (\"tooltip\") {\n @if ((fieldConfig.tooltip || {}); as tooltip) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"(fieldConfig.getTooltipConfig ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n [innerHTML]=\" (fieldConfig.field ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true ) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n (outEvent)=\"handlerItemClick($event,fieldConfig)\">\n </span>\n }\n }\n @case (\"image\") {\n @if (((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n @if (linkImage !== ' ') {\n <img [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n }\n }\n\n @case (\"avatar\") {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [size]='avatarConfig.size || 32'\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" \n [textAvatar]=\"avatarConfig.textAvatar\"/>\n }\n }\n\n @case (\"buttons\") {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of (fieldConfig.buttons || (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track button) {\n\n <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"button().disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case (\"button-status\") {\n <libs_ui-components-buttons-status\n [config]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n\n @case (\"switch\") {\n <libs_ui-components-switch\n [active]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async): false\"\n (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n }\n\n\n @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n <libs_ui-components-dropdown [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent:false,\n ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n paddingLeftItem:fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n classInclude:fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n position: fieldConfig.dropdownConfig?.position || {\n mode:'center',\n distance:0\n }\n }\"\n [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n [listConfig]=\"fieldConfig.dropdownConfig?.getListConfig ? ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListConfig:item()) | async):fieldConfig.dropdownConfig?.listConfig\"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index,$event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index,$event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div\n [innerHtml]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n </div>\n }\n @if (fieldConfig.instance === 'badge' && (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) > 0) {\n <libs_ui-components-badge [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n [maxCount]=\"99\" />\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case (\"line-clamp\") {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n </div>\n }\n\n @case (\"shape-style\") {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n @default {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div #rowRef\n class=\"w-full flex absolute {{ fieldConfig.rowsTemplateCssWrapper }}\">\n <libs_ui-components-table-templates class=\"flex w-full\"\n [item]=\"item\"\n [configs]=\"fieldConfig.rows\" />\n </div>\n </div>\n }\n @else {\n <ng-container\n *ngComponentOutlet=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDataComponentOutlet:item():fieldConfig.field:{valueIsEmpty:{item:item()}}) | async\" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { 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: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLineClampComponent, selector: "libs_ui-components-line_clamp", inputs: ["content", "lengthLimitDisplay", "maxHeight", "ignoreShowButtonCollapseExpand", "ignoreShowButtonCollapse", "showTooltip", "timeHidePopoverOnMouseout", "maxWidthTooltip", "maxHeightTooltip", "zIndexPopover", "isInnerText", "classClassLabelButtonCollapseExpand", "classClassIncludeButtonCollapseExpand", "ignoreStopPropagationTooltipEvent", "ngClassObject", "hasBackgroundGradient", "labelButtonViewMore", "labelButtonCollapse", "directionTooltip", "useXssFilter", "defaultIsCollapse"], outputs: ["outDisplayLineClamp", "outAction", "outClick", "outFunctionControl"] }, { 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: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTableTemplatesComponent, isStandalone: true, selector: "libs_ui-components-table-templates", inputs: { isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null }, configs: { classPropertyName: "configs", publicName: "configs", isSignal: true, isRequired: false, transformFunction: null }, templateCssWrapper: { classPropertyName: "templateCssWrapper", publicName: "templateCssWrapper", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (configs(); as configs) {\n @if (item(); as item) {\n <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig;let index = $index;) {\n @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgStyle:item() | async) : (fieldConfig.ngStyle || {});\n @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgClass:item() | async) : (fieldConfig.ngClass || {});\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case (\"tooltip\") {\n @if ((fieldConfig.tooltip || {}); as tooltip) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"(fieldConfig.getTooltipConfig ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n [innerHTML]=\" (fieldConfig.field ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true ) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n (outEvent)=\"handlerItemClick($event,fieldConfig)\">\n </span>\n }\n }\n @case (\"image\") {\n @if (((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n @if (linkImage !== ' ') {\n <img [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n }\n }\n\n @case (\"avatar\") {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [size]='avatarConfig.size || 32'\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" \n [textAvatar]=\"avatarConfig.textAvatar\"/>\n }\n }\n\n @case (\"buttons\") {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of (fieldConfig.buttons || (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track button) {\n\n <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"button().disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case (\"button-status\") {\n <libs_ui-components-buttons-status\n [config]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n\n @case (\"switch\") {\n <libs_ui-components-switch\n [active]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async): false\"\n (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n }\n\n\n @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n @let constHtmlDisableDropdown = fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async) : false;\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n <libs_ui-components-dropdown [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent:false,\n ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n paddingLeftItem:fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n classInclude:fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n position: fieldConfig.dropdownConfig?.position || {\n mode:'center',\n distance:0\n }\n }\"\n [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n [listConfig]=\"fieldConfig.dropdownConfig?.getListConfig ? ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListConfig:item()) | async):fieldConfig.dropdownConfig?.listConfig\"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n [disable]=\"constHtmlDisableDropdown\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index,$event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index,$event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div\n [innerHtml]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n </div>\n }\n @if (fieldConfig.instance === 'badge') {\n @let constHtmlDataBadge = item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async;\n @if(constHtmlDataBadge > 0){\n <libs_ui-components-badge [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"constHtmlDataBadge\"\n [maxCount]=\"99\" />\n }\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case (\"line-clamp\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n </div>\n }\n\n @case (\"shape-style\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n @default {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div #rowRef\n class=\"w-full flex absolute {{ fieldConfig.rowsTemplateCssWrapper }}\">\n <libs_ui-components-table-templates class=\"flex w-full\"\n [item]=\"item\"\n [configs]=\"fieldConfig.rows\" />\n </div>\n </div>\n }\n @else {\n <ng-container\n *ngComponentOutlet=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDataComponentOutlet:item():fieldConfig.field:{valueIsEmpty:{item:item()}}) | async\" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { 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: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLineClampComponent, selector: "libs_ui-components-line_clamp", inputs: ["content", "lengthLimitDisplay", "maxHeight", "ignoreShowButtonCollapseExpand", "ignoreShowButtonCollapse", "showTooltip", "timeHidePopoverOnMouseout", "maxWidthTooltip", "maxHeightTooltip", "zIndexPopover", "isInnerText", "classClassLabelButtonCollapseExpand", "classClassIncludeButtonCollapseExpand", "ignoreStopPropagationTooltipEvent", "ngClassObject", "hasBackgroundGradient", "labelButtonViewMore", "labelButtonCollapse", "directionTooltip", "useXssFilter", "defaultIsCollapse"], outputs: ["outDisplayLineClamp", "outAction", "outClick", "outFunctionControl"] }, { 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: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
112
191
|
}
|
|
113
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, decorators: [{
|
|
114
193
|
type: Component,
|
|
@@ -120,85 +199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
120
199
|
LibsUiPipesCloneObjectPipe, LibsUiComponentsButtonsButtonComponent,
|
|
121
200
|
LibsUiComponentsLineClampComponent, LibsUiComponentsDropdownComponent,
|
|
122
201
|
LibsUiComponentsBadgeComponent
|
|
123
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n @if (item(); as item) {\n <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig;let index = $index;) {\n\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case (\"tooltip\") {\n @if ((fieldConfig.tooltip || {}); as tooltip) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"(fieldConfig.getTooltipConfig ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n [innerHTML]=\" (fieldConfig.field ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true ) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n (outEvent)=\"handlerItemClick($event,fieldConfig)\">\n </span>\n }\n }\n @case (\"image\") {\n @if (((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n @if (linkImage !== ' ') {\n <img [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n }\n }\n\n @case (\"avatar\") {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [size]='avatarConfig.size || 32'\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" \n [textAvatar]=\"avatarConfig.textAvatar\"/>\n }\n }\n\n @case (\"buttons\") {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of (fieldConfig.buttons || (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track button) {\n\n <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"button().disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case (\"button-status\") {\n <libs_ui-components-buttons-status\n [config]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n\n @case (\"switch\") {\n <libs_ui-components-switch\n [active]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async): false\"\n (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n }\n\n\n @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n <libs_ui-components-dropdown [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent:false,\n ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n paddingLeftItem:fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n classInclude:fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n position: fieldConfig.dropdownConfig?.position || {\n mode:'center',\n distance:0\n }\n }\"\n [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n [listConfig]=\"fieldConfig.dropdownConfig?.getListConfig ? ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListConfig:item()) | async):fieldConfig.dropdownConfig?.listConfig\"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index,$event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index,$event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div\n [innerHtml]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n </div>\n }\n @if (fieldConfig.instance === 'badge' && (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) > 0) {\n <libs_ui-components-badge [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n [maxCount]=\"99\" />\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case (\"line-clamp\") {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n </div>\n }\n\n @case (\"shape-style\") {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n @default {\n <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n [ngClass]=\"fieldConfig.ngClass || {}\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div #rowRef\n class=\"w-full flex absolute {{ fieldConfig.rowsTemplateCssWrapper }}\">\n <libs_ui-components-table-templates class=\"flex w-full\"\n [item]=\"item\"\n [configs]=\"fieldConfig.rows\" />\n </div>\n </div>\n }\n @else {\n <ng-container\n *ngComponentOutlet=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDataComponentOutlet:item():fieldConfig.field:{valueIsEmpty:{item:item()}}) | async\" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"] }]
|
|
124
|
-
}] });
|
|
125
|
-
|
|
126
|
-
class LibsUiTableCalculatorColumnPipe {
|
|
127
|
-
transform(header, offsetWidth, headerLeftConfig, headerRightConfig) {
|
|
128
|
-
if (!header?.ngStyle) {
|
|
129
|
-
return undefined;
|
|
130
|
-
}
|
|
131
|
-
const mixHeaderConfig = [...(headerLeftConfig || []), ...(headerRightConfig || [])];
|
|
132
|
-
let totalPxWidthHeader = mixHeaderConfig.reduce((acc, curr) => acc + this.getWidthPxOfStyle(curr), 0);
|
|
133
|
-
const totalPercentWidthHeader = mixHeaderConfig.reduce((acc, curr) => acc + this.getWidthPercentOfStyle(curr), 0);
|
|
134
|
-
const totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader = mixHeaderConfig.reduce((acc, curr) => acc + (curr.keepWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader ? this.getWidthPxOfStyle(curr) : 0), 0);
|
|
135
|
-
if (mixHeaderConfig.some(header => header.isShowIndexOnRow)) {
|
|
136
|
-
offsetWidth -= 50;
|
|
137
|
-
}
|
|
138
|
-
if (totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader) {
|
|
139
|
-
offsetWidth -= totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader;
|
|
140
|
-
totalPxWidthHeader -= totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader;
|
|
141
|
-
}
|
|
142
|
-
let percent = this.getWidthPercentOfStyle(header);
|
|
143
|
-
if (percent) {
|
|
144
|
-
offsetWidth -= totalPxWidthHeader;
|
|
145
|
-
const percentDivide = (totalPercentWidthHeader - 100) / mixHeaderConfig.length;
|
|
146
|
-
percent -= percentDivide;
|
|
147
|
-
const widthCalculator = (percent / 100) * offsetWidth;
|
|
148
|
-
return this.getStyleUpdate(widthCalculator, header.ngStyle);
|
|
149
|
-
}
|
|
150
|
-
const width = this.getWidthPxOfStyle(header);
|
|
151
|
-
if (totalPxWidthHeader > offsetWidth || header.keepWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader || totalPercentWidthHeader) {
|
|
152
|
-
return this.getStyleUpdate(width, header.ngStyle);
|
|
153
|
-
}
|
|
154
|
-
const widthCalculator = (width / totalPxWidthHeader) * offsetWidth;
|
|
155
|
-
return this.getStyleUpdate(widthCalculator, header.ngStyle);
|
|
156
|
-
}
|
|
157
|
-
getWidthPxOfStyle(headerGetWidth) {
|
|
158
|
-
let { flex, width, maxWidth } = headerGetWidth.ngStyle || {};
|
|
159
|
-
if (flex?.includes('%') || width?.includes('%') || maxWidth?.includes('%')) {
|
|
160
|
-
return 0;
|
|
161
|
-
}
|
|
162
|
-
width = parseInt(width || '0');
|
|
163
|
-
maxWidth = parseInt(maxWidth || '0');
|
|
164
|
-
flex = parseInt((flex || '0').split(' ').pop() || '0');
|
|
165
|
-
if (!flex && !width && !maxWidth) {
|
|
166
|
-
return 0;
|
|
167
|
-
}
|
|
168
|
-
const widthMax = Math.max(width, maxWidth, flex);
|
|
169
|
-
return widthMax;
|
|
170
|
-
}
|
|
171
|
-
getWidthPercentOfStyle(headerGetWidth) {
|
|
172
|
-
let { flex, width, maxWidth } = headerGetWidth.ngStyle || {};
|
|
173
|
-
if (flex?.includes('px') || width?.includes('px') || maxWidth?.includes('px')) {
|
|
174
|
-
return 0;
|
|
175
|
-
}
|
|
176
|
-
width = parseInt(width || '0');
|
|
177
|
-
maxWidth = parseInt(maxWidth || '0');
|
|
178
|
-
flex = parseInt((flex || '0').split(' ').pop() || '0');
|
|
179
|
-
if (!flex && !width && !maxWidth) {
|
|
180
|
-
return 0;
|
|
181
|
-
}
|
|
182
|
-
const widthMax = Math.max(width, maxWidth, flex);
|
|
183
|
-
return widthMax;
|
|
184
|
-
}
|
|
185
|
-
getStyleUpdate(widthCalculator, ngStyle) {
|
|
186
|
-
return {
|
|
187
|
-
...ngStyle,
|
|
188
|
-
flex: `0 0 ${widthCalculator}px`,
|
|
189
|
-
width: `${widthCalculator}px`,
|
|
190
|
-
maxWidth: `${widthCalculator}px`
|
|
191
|
-
};
|
|
192
|
-
}
|
|
193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
194
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, isStandalone: true, name: "LibsUiTableCalculatorColumnPipe" });
|
|
195
|
-
}
|
|
196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, decorators: [{
|
|
197
|
-
type: Pipe,
|
|
198
|
-
args: [{
|
|
199
|
-
name: 'LibsUiTableCalculatorColumnPipe',
|
|
200
|
-
standalone: true
|
|
201
|
-
}]
|
|
202
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n @if (item(); as item) {\n <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig;let index = $index;) {\n @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgStyle:item() | async) : (fieldConfig.ngStyle || {});\n @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgClass:item() | async) : (fieldConfig.ngClass || {});\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case (\"tooltip\") {\n @if ((fieldConfig.tooltip || {}); as tooltip) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"(fieldConfig.getTooltipConfig ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n [innerHTML]=\" (fieldConfig.field ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true ) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n (outEvent)=\"handlerItemClick($event,fieldConfig)\">\n </span>\n }\n }\n @case (\"image\") {\n @if (((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n @if (linkImage !== ' ') {\n <img [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n }\n }\n\n @case (\"avatar\") {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [size]='avatarConfig.size || 32'\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" \n [textAvatar]=\"avatarConfig.textAvatar\"/>\n }\n }\n\n @case (\"buttons\") {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of (fieldConfig.buttons || (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track button) {\n\n <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"button().disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case (\"button-status\") {\n <libs_ui-components-buttons-status\n [config]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n\n @case (\"switch\") {\n <libs_ui-components-switch\n [active]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async): false\"\n (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n }\n\n\n @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n @let constHtmlDisableDropdown = fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async) : false;\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n <libs_ui-components-dropdown [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent:false,\n ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n paddingLeftItem:fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n classInclude:fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n position: fieldConfig.dropdownConfig?.position || {\n mode:'center',\n distance:0\n }\n }\"\n [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n [listConfig]=\"fieldConfig.dropdownConfig?.getListConfig ? ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListConfig:item()) | async):fieldConfig.dropdownConfig?.listConfig\"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n [disable]=\"constHtmlDisableDropdown\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index,$event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index,$event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div\n [innerHtml]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n </div>\n }\n @if (fieldConfig.instance === 'badge') {\n @let constHtmlDataBadge = item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async;\n @if(constHtmlDataBadge > 0){\n <libs_ui-components-badge [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"constHtmlDataBadge\"\n [maxCount]=\"99\" />\n }\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case (\"line-clamp\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n </div>\n }\n\n @case (\"shape-style\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n @default {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div #rowRef\n class=\"w-full flex absolute {{ fieldConfig.rowsTemplateCssWrapper }}\">\n <libs_ui-components-table-templates class=\"flex w-full\"\n [item]=\"item\"\n [configs]=\"fieldConfig.rows\" />\n </div>\n </div>\n }\n @else {\n <ng-container\n *ngComponentOutlet=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDataComponentOutlet:item():fieldConfig.field:{valueIsEmpty:{item:item()}}) | async\" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"] }]
|
|
202
203
|
}] });
|
|
203
204
|
|
|
204
205
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -243,7 +244,6 @@ class LibsUiComponentsTableComponent {
|
|
|
243
244
|
timeoutLeaveItem = signal(undefined);
|
|
244
245
|
functionControlSelectMoreItem;
|
|
245
246
|
mouseEnterHeader = signal(false);
|
|
246
|
-
onDestroy = new Subject();
|
|
247
247
|
/** INPUT */
|
|
248
248
|
timeHighlighNewItem = input(2000, { transform: val => val ?? 2000 });
|
|
249
249
|
headerLeft = input([], { transform: val => val ?? [] });
|
|
@@ -314,6 +314,7 @@ class LibsUiComponentsTableComponent {
|
|
|
314
314
|
;
|
|
315
315
|
/**INJECT */
|
|
316
316
|
httpRequestService = inject(LibsUiHttpRequestService);
|
|
317
|
+
destroyRef = inject(DestroyRef);
|
|
317
318
|
cdr = inject(ChangeDetectorRef);
|
|
318
319
|
constructor() {
|
|
319
320
|
effect(() => {
|
|
@@ -365,7 +366,7 @@ class LibsUiComponentsTableComponent {
|
|
|
365
366
|
resetKeySelected: () => this.keysSelected.set([]),
|
|
366
367
|
detectChanges: () => this.cdr.detectChanges()
|
|
367
368
|
});
|
|
368
|
-
fromEvent(window, 'resize').pipe(
|
|
369
|
+
fromEvent(window, 'resize').pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
369
370
|
this.cdr.detectChanges();
|
|
370
371
|
});
|
|
371
372
|
}
|
|
@@ -825,7 +826,7 @@ class LibsUiComponentsTableComponent {
|
|
|
825
826
|
async checkScroll() {
|
|
826
827
|
const hasScroll = this.hasScroll();
|
|
827
828
|
return new Promise(resolve => {
|
|
828
|
-
timer(500).pipe(
|
|
829
|
+
timer(500).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
829
830
|
if (this.BodyElement) {
|
|
830
831
|
this.hasScroll.set(this.BodyElement.scrollHeight > this.BodyElement.offsetHeight);
|
|
831
832
|
}
|
|
@@ -843,8 +844,6 @@ class LibsUiComponentsTableComponent {
|
|
|
843
844
|
return this.bodyElementRef()?.nativeElement;
|
|
844
845
|
}
|
|
845
846
|
ngOnDestroy() {
|
|
846
|
-
this.onDestroy.next();
|
|
847
|
-
this.onDestroy.complete();
|
|
848
847
|
clearTimeout(this.timeoutLeaveItem());
|
|
849
848
|
}
|
|
850
849
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|