@updevs/components 1.0.0-alpha.90 → 1.0.0-alpha.92
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/table/abstractions/public-api.mjs +2 -1
- package/esm2022/table/components/search-section/search-section.component.mjs +2 -2
- package/esm2022/table/directives/table-column.directive.mjs +3 -1
- package/esm2022/table/models/columns/custom-column.model.mjs +11 -0
- package/esm2022/table/models/columns/public-api.mjs +2 -1
- package/esm2022/table/models/filter-item.model.mjs +1 -1
- package/esm2022/table/table.component.mjs +3 -3
- package/esm2022/table/tools/filters.tools.mjs +13 -7
- package/fesm2022/updevs-components-table.mjs +82 -65
- package/fesm2022/updevs-components-table.mjs.map +1 -1
- package/package.json +25 -25
- package/table/abstractions/public-api.d.ts +1 -0
- package/table/models/columns/custom-column.model.d.ts +5 -0
- package/table/models/columns/public-api.d.ts +1 -0
- package/table/models/filter-item.model.d.ts +1 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { DataTypeEnum, StringColumnFilter, GuidColumnFilter, NumberColumnFilter, DateColumnFilter, BooleanColumnFilter, SortDirectionEnum, ColumnSort, BaseStore, FilterOperandEnum, FilterDateOperandEnum, FilterNumberOperandEnum, FilterBooleanOperandEnum, FilterGuidOperandEnum } from '@updevs/sdk/stores';
|
|
2
1
|
import * as i0 from '@angular/core';
|
|
3
2
|
import { inject, Directive, Component, input, ViewContainerRef, effect, computed, signal, Injectable, model, InjectionToken, Inject, EventEmitter, Output, HostBinding, viewChild, ElementRef, NgModule } from '@angular/core';
|
|
4
|
-
import { DynamicComponentLoaderService, BaseComponent, ButtonModel } from '@updevs/sdk/layout';
|
|
5
3
|
import { TextService } from '@updevs/sdk';
|
|
4
|
+
import { DataTypeEnum, StringColumnFilter, GuidColumnFilter, NumberColumnFilter, DateColumnFilter, BooleanColumnFilter, SortDirectionEnum, ColumnSort, BaseStore, FilterOperandEnum, FilterDateOperandEnum, FilterNumberOperandEnum, FilterBooleanOperandEnum, FilterGuidOperandEnum } from '@updevs/sdk/stores';
|
|
5
|
+
import { DynamicComponentLoaderService, BaseComponent, ButtonModel } from '@updevs/sdk/layout';
|
|
6
6
|
import * as i1 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
import * as i3 from '@updevs/icons';
|
|
@@ -50,59 +50,6 @@ var ColumnTypeEnum;
|
|
|
50
50
|
ColumnTypeEnum[ColumnTypeEnum["Guid"] = 11] = "Guid";
|
|
51
51
|
})(ColumnTypeEnum || (ColumnTypeEnum = {}));
|
|
52
52
|
|
|
53
|
-
class BaseColumnModel {
|
|
54
|
-
get dataType() {
|
|
55
|
-
switch (this.type) {
|
|
56
|
-
case ColumnTypeEnum.Boolean:
|
|
57
|
-
return DataTypeEnum.Boolean;
|
|
58
|
-
case ColumnTypeEnum.DateTime:
|
|
59
|
-
case ColumnTypeEnum.Date:
|
|
60
|
-
case ColumnTypeEnum.Time:
|
|
61
|
-
return DataTypeEnum.Date;
|
|
62
|
-
case ColumnTypeEnum.Currency:
|
|
63
|
-
case ColumnTypeEnum.Number:
|
|
64
|
-
return DataTypeEnum.Number;
|
|
65
|
-
case ColumnTypeEnum.Guid:
|
|
66
|
-
return DataTypeEnum.Guid;
|
|
67
|
-
default:
|
|
68
|
-
return DataTypeEnum.String;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
get widthClass() {
|
|
72
|
-
if (!this.width || !!this.width.pixels) {
|
|
73
|
-
return '';
|
|
74
|
-
}
|
|
75
|
-
const prefix = !!this.width.gridColumn ? 'col' : 'w';
|
|
76
|
-
const auto = !!this.width.gridColumn && this.width.gridColumn === 0 ? 'auto' : '';
|
|
77
|
-
return `${prefix}-${auto || this.widthSize}`;
|
|
78
|
-
}
|
|
79
|
-
get widthSize() {
|
|
80
|
-
return !this.width ? 0 : this.width.gridColumn || this.width.percentage || 0;
|
|
81
|
-
}
|
|
82
|
-
get pixelsSize() {
|
|
83
|
-
return this.width?.pixels;
|
|
84
|
-
}
|
|
85
|
-
constructor(columnType, init) {
|
|
86
|
-
this.titleAlignment = 'left';
|
|
87
|
-
this.allowSort = true;
|
|
88
|
-
this.isItalic = false;
|
|
89
|
-
this.type = ColumnTypeEnum.Text;
|
|
90
|
-
this.alignment = 'left';
|
|
91
|
-
this.weight = 'normal';
|
|
92
|
-
this.overflowStrategy = 'truncate';
|
|
93
|
-
this.shouldSpaceAfterPrefix = true;
|
|
94
|
-
this.shouldSpaceBeforeSuffix = true;
|
|
95
|
-
this.isHidden = false;
|
|
96
|
-
if (!!init) {
|
|
97
|
-
Object.assign(this, init);
|
|
98
|
-
}
|
|
99
|
-
this.type = columnType;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
class FiltersOperandsService {
|
|
104
|
-
}
|
|
105
|
-
|
|
106
53
|
class BaseColumn {
|
|
107
54
|
constructor() {
|
|
108
55
|
this.textService = inject(TextService);
|
|
@@ -183,6 +130,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
183
130
|
type: Directive
|
|
184
131
|
}] });
|
|
185
132
|
|
|
133
|
+
class BaseColumnModel {
|
|
134
|
+
get dataType() {
|
|
135
|
+
switch (this.type) {
|
|
136
|
+
case ColumnTypeEnum.Boolean:
|
|
137
|
+
return DataTypeEnum.Boolean;
|
|
138
|
+
case ColumnTypeEnum.DateTime:
|
|
139
|
+
case ColumnTypeEnum.Date:
|
|
140
|
+
case ColumnTypeEnum.Time:
|
|
141
|
+
return DataTypeEnum.Date;
|
|
142
|
+
case ColumnTypeEnum.Currency:
|
|
143
|
+
case ColumnTypeEnum.Number:
|
|
144
|
+
return DataTypeEnum.Number;
|
|
145
|
+
case ColumnTypeEnum.Guid:
|
|
146
|
+
return DataTypeEnum.Guid;
|
|
147
|
+
default:
|
|
148
|
+
return DataTypeEnum.String;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
get widthClass() {
|
|
152
|
+
if (!this.width || !!this.width.pixels) {
|
|
153
|
+
return '';
|
|
154
|
+
}
|
|
155
|
+
const prefix = !!this.width.gridColumn ? 'col' : 'w';
|
|
156
|
+
const auto = !!this.width.gridColumn && this.width.gridColumn === 0 ? 'auto' : '';
|
|
157
|
+
return `${prefix}-${auto || this.widthSize}`;
|
|
158
|
+
}
|
|
159
|
+
get widthSize() {
|
|
160
|
+
return !this.width ? 0 : this.width.gridColumn || this.width.percentage || 0;
|
|
161
|
+
}
|
|
162
|
+
get pixelsSize() {
|
|
163
|
+
return this.width?.pixels;
|
|
164
|
+
}
|
|
165
|
+
constructor(columnType, init) {
|
|
166
|
+
this.titleAlignment = 'left';
|
|
167
|
+
this.allowSort = true;
|
|
168
|
+
this.isItalic = false;
|
|
169
|
+
this.type = ColumnTypeEnum.Text;
|
|
170
|
+
this.alignment = 'left';
|
|
171
|
+
this.weight = 'normal';
|
|
172
|
+
this.overflowStrategy = 'truncate';
|
|
173
|
+
this.shouldSpaceAfterPrefix = true;
|
|
174
|
+
this.shouldSpaceBeforeSuffix = true;
|
|
175
|
+
this.isHidden = false;
|
|
176
|
+
if (!!init) {
|
|
177
|
+
Object.assign(this, init);
|
|
178
|
+
}
|
|
179
|
+
this.type = columnType;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
class FiltersOperandsService {
|
|
184
|
+
}
|
|
185
|
+
|
|
186
186
|
class TextColumnComponent extends BaseColumn {
|
|
187
187
|
getClasses() {
|
|
188
188
|
return [
|
|
@@ -279,6 +279,8 @@ class TableColumnDirective {
|
|
|
279
279
|
case ColumnTypeEnum.Guid:
|
|
280
280
|
// @ts-ignore
|
|
281
281
|
return TextColumnComponent;
|
|
282
|
+
case ColumnTypeEnum.Custom:
|
|
283
|
+
return this.config().component;
|
|
282
284
|
default:
|
|
283
285
|
throw Error();
|
|
284
286
|
}
|
|
@@ -313,6 +315,15 @@ class BooleanColumnModel extends BaseColumnModel {
|
|
|
313
315
|
}
|
|
314
316
|
}
|
|
315
317
|
|
|
318
|
+
class CustomColumnModel extends BaseColumnModel {
|
|
319
|
+
constructor(init) {
|
|
320
|
+
super(ColumnTypeEnum.Custom, init);
|
|
321
|
+
if (!!init) {
|
|
322
|
+
Object.assign(this, init);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
|
|
316
327
|
class DateTimeColumnModel extends BaseColumnModel {
|
|
317
328
|
get dateTimeFormat() {
|
|
318
329
|
return this.customFormat || this.format;
|
|
@@ -550,7 +561,8 @@ class FilterTools {
|
|
|
550
561
|
return filters.map(f => ({
|
|
551
562
|
name: f.column,
|
|
552
563
|
value: f.value,
|
|
553
|
-
operandConfig: operands[f.dataType].find(op => op.operand === f.operand)
|
|
564
|
+
operandConfig: operands[f.dataType].find(op => op.operand === f.operand),
|
|
565
|
+
isHidden: f.isHidden
|
|
554
566
|
}));
|
|
555
567
|
}
|
|
556
568
|
static convertToRequestFilter(filters, columns) {
|
|
@@ -561,31 +573,36 @@ class FilterTools {
|
|
|
561
573
|
return new BooleanColumnFilter({
|
|
562
574
|
column: af.name,
|
|
563
575
|
value: af.value,
|
|
564
|
-
operand: !!af.operandConfig ? af.operandConfig.operand : undefined
|
|
576
|
+
operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
|
|
577
|
+
isHidden: af.isHidden
|
|
565
578
|
});
|
|
566
579
|
case DataTypeEnum.Date:
|
|
567
580
|
return new DateColumnFilter({
|
|
568
581
|
column: af.name,
|
|
569
582
|
value: af.value,
|
|
570
|
-
operand: !!af.operandConfig ? af.operandConfig.operand : undefined
|
|
583
|
+
operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
|
|
584
|
+
isHidden: af.isHidden
|
|
571
585
|
});
|
|
572
586
|
case DataTypeEnum.Number:
|
|
573
587
|
return new NumberColumnFilter({
|
|
574
588
|
column: af.name,
|
|
575
589
|
value: af.value,
|
|
576
|
-
operand: !!af.operandConfig ? af.operandConfig.operand : undefined
|
|
590
|
+
operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
|
|
591
|
+
isHidden: af.isHidden
|
|
577
592
|
});
|
|
578
593
|
case DataTypeEnum.Guid:
|
|
579
594
|
return new GuidColumnFilter({
|
|
580
595
|
column: af.name,
|
|
581
596
|
value: af.value,
|
|
582
|
-
operand: !!af.operandConfig ? af.operandConfig.operand : undefined
|
|
597
|
+
operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
|
|
598
|
+
isHidden: af.isHidden
|
|
583
599
|
});
|
|
584
600
|
default:
|
|
585
601
|
return new StringColumnFilter({
|
|
586
602
|
column: af.name,
|
|
587
603
|
value: af.value,
|
|
588
|
-
operand: !!af.operandConfig ? af.operandConfig.operand : undefined
|
|
604
|
+
operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
|
|
605
|
+
isHidden: af.isHidden
|
|
589
606
|
});
|
|
590
607
|
}
|
|
591
608
|
});
|
|
@@ -747,7 +764,7 @@ class SearchSectionComponent extends BaseComponent {
|
|
|
747
764
|
this.activeFilters = signal([]);
|
|
748
765
|
this.isFilterSectionOpen = signal(false);
|
|
749
766
|
this.canApplyFilters = computed(() => this.activeFilters().length > 0
|
|
750
|
-
&& this.activeFilters().every(af => !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value)));
|
|
767
|
+
&& this.activeFilters().every(af => !af.isHidden && !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value)));
|
|
751
768
|
this.canPerformActions = computed(() => this.canApplyFilters() && !this.isSearching());
|
|
752
769
|
this.badgeConfig = computed(() => (this.searchRequest().filters?.length || 0) > 0
|
|
753
770
|
? ({
|
|
@@ -1216,11 +1233,11 @@ class TableComponent extends BaseComponent {
|
|
|
1216
1233
|
};
|
|
1217
1234
|
}
|
|
1218
1235
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n <div class=\"card\">\n @if (!!configModel().title || !configModel().canSearch) {\n <div class=\"card-header\">\n @if (!!configModel().title) {\n <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n }\n <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n </div>\n }\n\n @if (configModel().customHeaderActions.length > 0) {\n <div class=\"card-body py-3 d-flex flex-column gap-2\">\n <div class=\"ms-auto d-flex gap-2\">\n @for (btn of configModel().customHeaderActions; track btn) {\n <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n }\n </div>\n </div>\n }\n\n @if (configModel().canSearch) {\n <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n </upd-search-section>\n }\n\n <div [class.table-responsive]=\"configModel().isResponsive\">\n <!-- TODO: implement pixel sized table -->\n <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n [class.pixel-sized]=\"isWidthInPixels\">\n <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <th class=\"checkbox-selector\">\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n [(isChecked)]=\"isMainCheckboxChecked\"\n [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n </th>\n }\n\n @for (col of columns(); track col) {\n <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n {{ textService.getText(col.title) }}\n @if (canSortColumn(col.name)) {\n <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n </upd-icon>\n }\n </th>\n }\n\n @if (!!pendingWidthColClass) {\n <th [ngClass]=\"pendingWidthColClass\"></th>\n }\n\n @if (configModel().customActions.length > 0) {\n <th class=\"custom-actions\"></th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (isSearching()) {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n <div class=\"progress progress-sm w-25\">\n <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n </div>\n </div>\n </td>\n </tr>\n } @else {\n @for (record of data(); track record) {\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <td>\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n </td>\n }\n\n @for (col of columns(); track col) {\n <td>\n <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n </td>\n }\n\n @if (!!pendingWidthColClass) {\n <td></td>\n }\n\n @if (configModel().customActions.length > 0) {\n <td style=\"overflow: unset\">\n <div class=\"grow-left d-flex\">\n @if (configModel().customActions.length > 1) {\n <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\" [isIcon]=\"true\"\n [isLink]=\"true\" size=\"small\"></upd-button>\n\n <div class=\"ca-dropdown-content rounded shadow-sm\">\n @for (btn of configModel().customActions; track btn) {\n <upd-button [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n }\n </div>\n } @else {\n <upd-button [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n </upd-button>\n }\n </div>\n </td>\n }\n </tr>\n } @empty {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n [(currentPage)]=\"currentPage\"\n [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n </upd-paginator>\n </div>\n\n <ng-template #actionsTpl>\n <div class=\"ms-auto d-flex gap-2\">\n @if (!!activeSavedView()) {\n @if (activeSavedView()!.isDefault) {\n <div class=\"ribbon ribbon-top ribbon-start\">\n <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n </div>\n }\n <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n updPopover=\"{{ t('CurrentSavedView') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n </div>\n }\n @if (hiddenColumns() > 0) {\n <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ hiddenColumns() }}</span>\n </div>\n }\n @if (!!activeSavedView() || hiddenColumns() > 0) {\n <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canSaveViews) {\n <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canManageColumns) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('ColumnsManagerButton') }}\n </upd-button>\n }\n @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('SavedViews.ButtonTitle') }}\n </upd-button>\n <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n @if (savedViewsOptions().length < 1) {\n <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n }\n </upd-dropdown>\n }\n </div>\n </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5$1.PaginatorComponent, selector: "upd-paginator", inputs: ["startPageIndex", "currentPage", "wrapperClasses", "availablePageSizes", "defaultInitPageSize", "pageSize", "shouldDisplayFirstIcon", "shouldDisplayFirstText", "shouldDisplayPreviousIcon", "shouldDisplayPreviousText", "shouldDisplayNextIcon", "shouldDisplayNextText", "shouldDisplayLastIcon", "shouldDisplayLastText", "previousDescription", "nextDescription", "totalRecords"], outputs: ["changed", "currentPageChange", "pageSizeChange"] }, { kind: "component", type: i6.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i7.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }, { kind: "component", type: SearchSectionComponent, selector: "upd-search-section", inputs: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
|
|
1236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n <div class=\"card\">\n @if (!!configModel().title || !configModel().canSearch) {\n <div class=\"card-header\">\n @if (!!configModel().title) {\n <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n }\n <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n </div>\n }\n\n @if (configModel().customHeaderActions.length > 0) {\n <div class=\"card-body py-3 d-flex flex-column gap-2\">\n <div class=\"ms-auto d-flex gap-2\">\n @for (btn of configModel().customHeaderActions; track btn) {\n <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n }\n </div>\n </div>\n }\n\n @if (configModel().canSearch) {\n <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n </upd-search-section>\n }\n\n <div [class.table-responsive]=\"configModel().isResponsive\">\n <!-- TODO: implement pixel sized table -->\n <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n [class.pixel-sized]=\"isWidthInPixels\">\n <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <th class=\"checkbox-selector\">\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n [(isChecked)]=\"isMainCheckboxChecked\"\n [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n </th>\n }\n\n @for (col of columns(); track col) {\n <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n {{ textService.getText(col.title) }}\n @if (canSortColumn(col.name)) {\n <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n </upd-icon>\n }\n </th>\n }\n\n @if (!!pendingWidthColClass) {\n <th [ngClass]=\"pendingWidthColClass\"></th>\n }\n\n @if (configModel().customActions.length > 0) {\n <th class=\"custom-actions\"></th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (isSearching()) {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n <div class=\"progress progress-sm w-25\">\n <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n </div>\n </div>\n </td>\n </tr>\n } @else {\n @for (record of data(); track record) {\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <td class=\"checkbox-selector\">\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n </td>\n }\n\n @for (col of columns(); track col) {\n <td [style.width.px]=\"col.pixelsSize\">\n <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n </td>\n }\n\n @if (!!pendingWidthColClass) {\n <td></td>\n }\n\n @if (configModel().customActions.length > 0) {\n <td style=\"overflow: unset\">\n <div class=\"grow-left d-flex\">\n @if (configModel().customActions.length > 1) {\n <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\" [isIcon]=\"true\"\n [isLink]=\"true\" size=\"small\"></upd-button>\n\n <div class=\"ca-dropdown-content rounded shadow-sm\">\n @for (btn of configModel().customActions; track btn) {\n <upd-button [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n }\n </div>\n } @else {\n <upd-button [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n </upd-button>\n }\n </div>\n </td>\n }\n </tr>\n } @empty {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n [(currentPage)]=\"currentPage\"\n [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n </upd-paginator>\n </div>\n\n <ng-template #actionsTpl>\n <div class=\"ms-auto d-flex gap-2\">\n @if (!!activeSavedView()) {\n @if (activeSavedView()!.isDefault) {\n <div class=\"ribbon ribbon-top ribbon-start\">\n <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n </div>\n }\n <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n updPopover=\"{{ t('CurrentSavedView') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n </div>\n }\n @if (hiddenColumns() > 0) {\n <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ hiddenColumns() }}</span>\n </div>\n }\n @if (!!activeSavedView() || hiddenColumns() > 0) {\n <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canSaveViews) {\n <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canManageColumns) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('ColumnsManagerButton') }}\n </upd-button>\n }\n @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('SavedViews.ButtonTitle') }}\n </upd-button>\n <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n @if (savedViewsOptions().length < 1) {\n <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n }\n </upd-dropdown>\n }\n </div>\n </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5$1.PaginatorComponent, selector: "upd-paginator", inputs: ["startPageIndex", "currentPage", "wrapperClasses", "availablePageSizes", "defaultInitPageSize", "pageSize", "shouldDisplayFirstIcon", "shouldDisplayFirstText", "shouldDisplayPreviousIcon", "shouldDisplayPreviousText", "shouldDisplayNextIcon", "shouldDisplayNextText", "shouldDisplayLastIcon", "shouldDisplayLastText", "previousDescription", "nextDescription", "totalRecords"], outputs: ["changed", "currentPageChange", "pageSizeChange"] }, { kind: "component", type: i6.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i7.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }, { kind: "component", type: SearchSectionComponent, selector: "upd-search-section", inputs: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
|
|
1220
1237
|
}
|
|
1221
1238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
1222
1239
|
type: Component,
|
|
1223
|
-
args: [{ selector: 'upd-table', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n <div class=\"card\">\n @if (!!configModel().title || !configModel().canSearch) {\n <div class=\"card-header\">\n @if (!!configModel().title) {\n <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n }\n <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n </div>\n }\n\n @if (configModel().customHeaderActions.length > 0) {\n <div class=\"card-body py-3 d-flex flex-column gap-2\">\n <div class=\"ms-auto d-flex gap-2\">\n @for (btn of configModel().customHeaderActions; track btn) {\n <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n }\n </div>\n </div>\n }\n\n @if (configModel().canSearch) {\n <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n </upd-search-section>\n }\n\n <div [class.table-responsive]=\"configModel().isResponsive\">\n <!-- TODO: implement pixel sized table -->\n <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n [class.pixel-sized]=\"isWidthInPixels\">\n <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <th class=\"checkbox-selector\">\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n [(isChecked)]=\"isMainCheckboxChecked\"\n [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n </th>\n }\n\n @for (col of columns(); track col) {\n <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n {{ textService.getText(col.title) }}\n @if (canSortColumn(col.name)) {\n <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n </upd-icon>\n }\n </th>\n }\n\n @if (!!pendingWidthColClass) {\n <th [ngClass]=\"pendingWidthColClass\"></th>\n }\n\n @if (configModel().customActions.length > 0) {\n <th class=\"custom-actions\"></th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (isSearching()) {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n <div class=\"progress progress-sm w-25\">\n <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n </div>\n </div>\n </td>\n </tr>\n } @else {\n @for (record of data(); track record) {\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <td>\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n </td>\n }\n\n @for (col of columns(); track col) {\n <td>\n <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n </td>\n }\n\n @if (!!pendingWidthColClass) {\n <td></td>\n }\n\n @if (configModel().customActions.length > 0) {\n <td style=\"overflow: unset\">\n <div class=\"grow-left d-flex\">\n @if (configModel().customActions.length > 1) {\n <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\" [isIcon]=\"true\"\n [isLink]=\"true\" size=\"small\"></upd-button>\n\n <div class=\"ca-dropdown-content rounded shadow-sm\">\n @for (btn of configModel().customActions; track btn) {\n <upd-button [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n }\n </div>\n } @else {\n <upd-button [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n </upd-button>\n }\n </div>\n </td>\n }\n </tr>\n } @empty {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n [(currentPage)]=\"currentPage\"\n [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n </upd-paginator>\n </div>\n\n <ng-template #actionsTpl>\n <div class=\"ms-auto d-flex gap-2\">\n @if (!!activeSavedView()) {\n @if (activeSavedView()!.isDefault) {\n <div class=\"ribbon ribbon-top ribbon-start\">\n <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n </div>\n }\n <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n updPopover=\"{{ t('CurrentSavedView') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n </div>\n }\n @if (hiddenColumns() > 0) {\n <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ hiddenColumns() }}</span>\n </div>\n }\n @if (!!activeSavedView() || hiddenColumns() > 0) {\n <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canSaveViews) {\n <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canManageColumns) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('ColumnsManagerButton') }}\n </upd-button>\n }\n @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('SavedViews.ButtonTitle') }}\n </upd-button>\n <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n @if (savedViewsOptions().length < 1) {\n <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n }\n </upd-dropdown>\n }\n </div>\n </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"] }]
|
|
1240
|
+
args: [{ selector: 'upd-table', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n <div class=\"card\">\n @if (!!configModel().title || !configModel().canSearch) {\n <div class=\"card-header\">\n @if (!!configModel().title) {\n <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n }\n <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n </div>\n }\n\n @if (configModel().customHeaderActions.length > 0) {\n <div class=\"card-body py-3 d-flex flex-column gap-2\">\n <div class=\"ms-auto d-flex gap-2\">\n @for (btn of configModel().customHeaderActions; track btn) {\n <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n }\n </div>\n </div>\n }\n\n @if (configModel().canSearch) {\n <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n </upd-search-section>\n }\n\n <div [class.table-responsive]=\"configModel().isResponsive\">\n <!-- TODO: implement pixel sized table -->\n <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n [class.pixel-sized]=\"isWidthInPixels\">\n <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <th class=\"checkbox-selector\">\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n [(isChecked)]=\"isMainCheckboxChecked\"\n [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n </th>\n }\n\n @for (col of columns(); track col) {\n <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n {{ textService.getText(col.title) }}\n @if (canSortColumn(col.name)) {\n <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n </upd-icon>\n }\n </th>\n }\n\n @if (!!pendingWidthColClass) {\n <th [ngClass]=\"pendingWidthColClass\"></th>\n }\n\n @if (configModel().customActions.length > 0) {\n <th class=\"custom-actions\"></th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (isSearching()) {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n <div class=\"progress progress-sm w-25\">\n <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n </div>\n </div>\n </td>\n </tr>\n } @else {\n @for (record of data(); track record) {\n <tr>\n @if (configModel().hasCheckboxColumn) {\n <td class=\"checkbox-selector\">\n <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n </td>\n }\n\n @for (col of columns(); track col) {\n <td [style.width.px]=\"col.pixelsSize\">\n <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n </td>\n }\n\n @if (!!pendingWidthColClass) {\n <td></td>\n }\n\n @if (configModel().customActions.length > 0) {\n <td style=\"overflow: unset\">\n <div class=\"grow-left d-flex\">\n @if (configModel().customActions.length > 1) {\n <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\" [isIcon]=\"true\"\n [isLink]=\"true\" size=\"small\"></upd-button>\n\n <div class=\"ca-dropdown-content rounded shadow-sm\">\n @for (btn of configModel().customActions; track btn) {\n <upd-button [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n }\n </div>\n } @else {\n <upd-button [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n </upd-button>\n }\n </div>\n </td>\n }\n </tr>\n } @empty {\n <tr>\n <td [colSpan]=\"numberOfColumns\">\n <div class=\"empty\">\n <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n [(currentPage)]=\"currentPage\"\n [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n </upd-paginator>\n </div>\n\n <ng-template #actionsTpl>\n <div class=\"ms-auto d-flex gap-2\">\n @if (!!activeSavedView()) {\n @if (activeSavedView()!.isDefault) {\n <div class=\"ribbon ribbon-top ribbon-start\">\n <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n </div>\n }\n <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n updPopover=\"{{ t('CurrentSavedView') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n </div>\n }\n @if (hiddenColumns() > 0) {\n <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n [updPopoverActAsTooltip]=\"true\">\n <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n <span class=\"me-1\">{{ hiddenColumns() }}</span>\n </div>\n }\n @if (!!activeSavedView() || hiddenColumns() > 0) {\n <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canSaveViews) {\n <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n </upd-button>\n }\n @if (configModel().canManageColumns) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('ColumnsManagerButton') }}\n </upd-button>\n }\n @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n {{ t('SavedViews.ButtonTitle') }}\n </upd-button>\n <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n @if (savedViewsOptions().length < 1) {\n <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n }\n </upd-dropdown>\n }\n </div>\n </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"] }]
|
|
1224
1241
|
}], ctorParameters: () => [] });
|
|
1225
1242
|
|
|
1226
1243
|
var UpDevs$1 = {
|
|
@@ -1750,5 +1767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
1750
1767
|
* Generated bundle index. Do not edit.
|
|
1751
1768
|
*/
|
|
1752
1769
|
|
|
1753
|
-
export { BaseColumnModel, BooleanColumnModel, ColumnTypeEnum, DateTimeColumnModel, FiltersOperandsService, GuidColumnModel, ImageColumnModel, NumberColumnModel, TableColumnDirective, TableComponent, TextColumnModel, UpdTableModule };
|
|
1770
|
+
export { BaseColumn, BaseColumnModel, BooleanColumnModel, ColumnTypeEnum, CustomColumnModel, DateTimeColumnModel, FiltersOperandsService, GuidColumnModel, ImageColumnModel, NumberColumnModel, TableColumnDirective, TableComponent, TextColumnModel, UpdTableModule };
|
|
1754
1771
|
//# sourceMappingURL=updevs-components-table.mjs.map
|