@updevs/components 1.0.0-alpha.30 → 1.0.0-alpha.31
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/models/table-config.model.mjs +2 -1
- package/esm2022/table/models/table.config.mjs +1 -1
- package/esm2022/table/table.component.mjs +7 -3
- package/fesm2022/updevs-components-table.mjs +7 -2
- package/fesm2022/updevs-components-table.mjs.map +1 -1
- package/package.json +24 -24
- package/table/models/table-config.model.d.ts +2 -0
- package/table/models/table.config.d.ts +2 -0
- package/table/table.component.d.ts +1 -0
|
@@ -397,6 +397,7 @@ class TableConfigModel {
|
|
|
397
397
|
this.data = [];
|
|
398
398
|
this.preSelectedItems = [];
|
|
399
399
|
this.searchInputDebounceTime = 300;
|
|
400
|
+
this.customActions = [];
|
|
400
401
|
this.getIdFunction = (item) => item.id;
|
|
401
402
|
if (!!init) {
|
|
402
403
|
Object.assign(this, init);
|
|
@@ -1066,6 +1067,10 @@ class TableComponent extends BaseComponent {
|
|
|
1066
1067
|
});
|
|
1067
1068
|
this.searchRequestSubject.next({});
|
|
1068
1069
|
}
|
|
1070
|
+
reload() {
|
|
1071
|
+
this.shouldForceSearch = true;
|
|
1072
|
+
this.searchRequestSubject.next({});
|
|
1073
|
+
}
|
|
1069
1074
|
updateColumns(columns) {
|
|
1070
1075
|
this.columns.set(columns.filter(c => !c.isHidden).map(c => new BaseColumnModel(c.type, { ...c })));
|
|
1071
1076
|
}
|
|
@@ -1171,11 +1176,11 @@ class TableComponent extends BaseComponent {
|
|
|
1171
1176
|
};
|
|
1172
1177
|
}
|
|
1173
1178
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1174
|
-
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().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 </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 </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\" 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\" 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}\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"] }] }); }
|
|
1179
|
+
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().customActions.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().customActions; 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 </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 </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}\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"] }] }); }
|
|
1175
1180
|
}
|
|
1176
1181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
1177
1182
|
type: Component,
|
|
1178
|
-
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().canSearch) {\n <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n
|
|
1183
|
+
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().customActions.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().customActions; 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 </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 </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}\n"] }]
|
|
1179
1184
|
}], ctorParameters: () => [] });
|
|
1180
1185
|
|
|
1181
1186
|
var UpDevs$1 = {
|