@vendure/admin-ui 3.1.4 → 3.1.6
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/core/common/version.d.ts +1 -1
- package/core/shared/components/data-table-2/data-table2.component.d.ts +2 -1
- package/esm2022/catalog/components/collection-contents/collection-contents.component.mjs +1 -1
- package/esm2022/catalog/components/facet-list/facet-list.component.mjs +1 -1
- package/esm2022/catalog/components/product-list/product-list.component.mjs +1 -1
- package/esm2022/catalog/components/product-options-editor/product-options-editor.component.mjs +3 -3
- package/esm2022/catalog/components/product-variant-list/product-variant-list.component.mjs +1 -1
- package/esm2022/catalog/components/product-variants-editor/product-variants-editor.component.mjs +1 -1
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/core.module.mjs +1 -1
- package/esm2022/core/shared/components/data-table-2/data-table2.component.mjs +9 -9
- package/esm2022/customer/components/customer-detail/customer-detail.component.mjs +1 -1
- package/esm2022/customer/components/customer-group-list/customer-group-list.component.mjs +1 -1
- package/esm2022/customer/components/customer-group-member-list/customer-group-member-list.component.mjs +1 -1
- package/esm2022/customer/components/customer-list/customer-list.component.mjs +1 -1
- package/esm2022/dashboard/widgets/latest-orders-widget/latest-orders-widget.component.mjs +1 -1
- package/esm2022/marketing/components/promotion-list/promotion-list.component.mjs +1 -1
- package/esm2022/order/components/order-editor/order-editor.component.mjs +1 -1
- package/esm2022/order/components/order-list/order-list.component.mjs +1 -1
- package/esm2022/order/components/refund-order-dialog/refund-order-dialog.component.mjs +1 -1
- package/esm2022/settings/components/administrator-list/administrator-list.component.mjs +1 -1
- package/esm2022/settings/components/channel-list/channel-list.component.mjs +1 -1
- package/esm2022/settings/components/country-list/country-list.component.mjs +1 -1
- package/esm2022/settings/components/payment-method-list/payment-method-list.component.mjs +1 -1
- package/esm2022/settings/components/role-list/role-list.component.mjs +1 -1
- package/esm2022/settings/components/seller-list/seller-list.component.mjs +1 -1
- package/esm2022/settings/components/shipping-method-list/shipping-method-list.component.mjs +1 -1
- package/esm2022/settings/components/stock-location-list/stock-location-list.component.mjs +1 -1
- package/esm2022/settings/components/tax-category-list/tax-category-list.component.mjs +1 -1
- package/esm2022/settings/components/tax-rate-list/tax-rate-list.component.mjs +1 -1
- package/esm2022/settings/components/zone-list/zone-list.component.mjs +1 -1
- package/esm2022/settings/components/zone-member-list/zone-member-list.component.mjs +1 -1
- package/esm2022/system/components/job-list/job-list.component.mjs +1 -1
- package/fesm2022/vendure-admin-ui-catalog.mjs +7 -7
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +9 -9
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-customer.mjs +4 -4
- package/fesm2022/vendure-admin-ui-customer.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-dashboard.mjs +1 -1
- package/fesm2022/vendure-admin-ui-dashboard.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-marketing.mjs +1 -1
- package/fesm2022/vendure-admin-ui-marketing.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +3 -3
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-settings.mjs +12 -12
- package/fesm2022/vendure-admin-ui-settings.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-system.mjs +1 -1
- package/fesm2022/vendure-admin-ui-system.mjs.map +1 -1
- package/package.json +14 -14
|
@@ -7838,7 +7838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
7838
7838
|
}], ctorParameters: () => [{ type: AlertsService }] });
|
|
7839
7839
|
|
|
7840
7840
|
// Auto-generated by the set-version.js script.
|
|
7841
|
-
const ADMIN_UI_VERSION = '3.1.
|
|
7841
|
+
const ADMIN_UI_VERSION = '3.1.6';
|
|
7842
7842
|
|
|
7843
7843
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
7844
7844
|
class FormFieldControlDirective {
|
|
@@ -18232,6 +18232,7 @@ class DataTable2Component {
|
|
|
18232
18232
|
this.changeDetectorRef = changeDetectorRef;
|
|
18233
18233
|
this.dataService = dataService;
|
|
18234
18234
|
this.activeIndex = -1;
|
|
18235
|
+
this.trackByPath = 'id';
|
|
18235
18236
|
this.pageChange = new EventEmitter();
|
|
18236
18237
|
this.itemsPerPageChange = new EventEmitter();
|
|
18237
18238
|
this.visibleColumnsChange = new EventEmitter();
|
|
@@ -18377,12 +18378,9 @@ class DataTable2Component {
|
|
|
18377
18378
|
this.dataTableConfigService.setConfig(this.id, dataTableConfig);
|
|
18378
18379
|
}
|
|
18379
18380
|
trackByFn(index, item) {
|
|
18380
|
-
|
|
18381
|
-
return
|
|
18382
|
-
}
|
|
18383
|
-
else {
|
|
18384
|
-
return index;
|
|
18385
|
-
}
|
|
18381
|
+
return this.trackByPath.split('.').reduce((accu, val) => {
|
|
18382
|
+
return accu && accu[val];
|
|
18383
|
+
}, item) ?? index;
|
|
18386
18384
|
}
|
|
18387
18385
|
onToggleAllClick() {
|
|
18388
18386
|
this.selectionManager?.toggleSelectAll();
|
|
@@ -18391,11 +18389,11 @@ class DataTable2Component {
|
|
|
18391
18389
|
this.selectionManager?.toggleSelection(item, event);
|
|
18392
18390
|
}
|
|
18393
18391
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTable2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18394
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", visibleColumnsChange: "visibleColumnsChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n *ngIf=\"filters\"\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n <div class=\"bulk-actions\">\r\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n </div>\r\n <table class=\"\" [class.no-select]=\"disableSelect\">\r\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n <tr class=\"heading-row\">\r\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n (change)=\"onToggleAllClick()\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n [class.expand]=\"column.expand\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\r\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n </button>\r\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n </div>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"column-picker\">\r\n <vdr-data-table-colum-picker\r\n [uiLanguage]=\"uiLanguage$ | async\"\r\n [columns]=\"sortedColumns\"\r\n (reorder)=\"onColumnReorder($event)\"\r\n (resetColumns)=\"onColumnsReset()\"\r\n ></vdr-data-table-colum-picker>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n <th\r\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n class=\"filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n >\r\n <button\r\n class=\"button-ghost toggle-search-filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n (click)=\"toggleSearchFilterRow()\"\r\n [title]=\"'common.search-and-filter-list' | translate\"\r\n >\r\n <clr-icon shape=\"search\"></clr-icon>\r\n </button>\r\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n <ng-container *ngIf=\"filters\">\r\n <div class=\"filters\">\r\n <vdr-data-table-filters\r\n *ngFor=\"let activeFilter of filters.activeFilters\"\r\n [filterWithValue]=\"activeFilter\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-data-table-filters\r\n *ngIf=\"filters.length\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-add-filter-preset-button\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n ></vdr-add-filter-preset-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"\r\n let item of items\r\n | paginate\r\n : {\r\n id: id,\r\n itemsPerPage: itemsPerPage,\r\n currentPage: currentPage,\r\n totalItems: totalItems\r\n };\r\n index as i;\r\n trackBy: trackByFn\r\n \"\r\n >\r\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.isSelected(item)\"\r\n (click)=\"onRowClick(item, $event)\"\r\n />\r\n </td>\r\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <ng-container\r\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n ></ng-container>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n </tr>\r\n <ng-container>\r\n <tr *ngIf=\"!items?.length\">\r\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n <vdr-items-per-page-controls\r\n *ngIf=\"totalItems\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n ></vdr-items-per-page-controls>\r\n <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n </div>\r\n\r\n <vdr-pagination-controls\r\n *ngIf=\"totalItems\"\r\n [id]=\"id\"\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex", trackByPath: "trackByPath" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", visibleColumnsChange: "visibleColumnsChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n *ngIf=\"filters\"\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n <div class=\"bulk-actions\">\r\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n </div>\r\n <table class=\"\" [class.no-select]=\"disableSelect\">\r\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n <tr class=\"heading-row\">\r\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n (change)=\"onToggleAllClick()\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n [class.expand]=\"column.expand\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\r\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n </button>\r\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n </div>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"column-picker\">\r\n <vdr-data-table-colum-picker\r\n [uiLanguage]=\"uiLanguage$ | async\"\r\n [columns]=\"sortedColumns\"\r\n (reorder)=\"onColumnReorder($event)\"\r\n (resetColumns)=\"onColumnsReset()\"\r\n ></vdr-data-table-colum-picker>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n <th\r\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n class=\"filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n >\r\n <button\r\n class=\"button-ghost toggle-search-filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n (click)=\"toggleSearchFilterRow()\"\r\n [title]=\"'common.search-and-filter-list' | translate\"\r\n >\r\n <clr-icon shape=\"search\"></clr-icon>\r\n </button>\r\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n <ng-container *ngIf=\"filters\">\r\n <div class=\"filters\">\r\n <vdr-data-table-filters\r\n *ngFor=\"let activeFilter of filters.activeFilters\"\r\n [filterWithValue]=\"activeFilter\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-data-table-filters\r\n *ngIf=\"filters.length\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-add-filter-preset-button\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n ></vdr-add-filter-preset-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"\r\n let item of items\r\n | paginate\r\n : {\r\n id: id,\r\n itemsPerPage: itemsPerPage,\r\n currentPage: currentPage,\r\n totalItems: totalItems\r\n };\r\n index as i;\r\n trackBy: trackByFn.bind(this)\r\n \"\r\n >\r\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.isSelected(item)\"\r\n (click)=\"onRowClick(item, $event)\"\r\n />\r\n </td>\r\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <ng-container\r\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n ></ng-container>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n </tr>\r\n <ng-container>\r\n <tr *ngIf=\"!items?.length\">\r\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n <vdr-items-per-page-controls\r\n *ngIf=\"totalItems\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n ></vdr-items-per-page-controls>\r\n <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n </div>\r\n\r\n <vdr-pagination-controls\r\n *ngIf=\"totalItems\"\r\n [id]=\"id\"\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18395
18393
|
}
|
|
18396
18394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTable2Component, decorators: [{
|
|
18397
18395
|
type: Component,
|
|
18398
|
-
args: [{ selector: 'vdr-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService, FilterPresetService], template: "<vdr-data-table-filter-presets\r\n *ngIf=\"filters\"\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n <div class=\"bulk-actions\">\r\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n </div>\r\n <table class=\"\" [class.no-select]=\"disableSelect\">\r\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n <tr class=\"heading-row\">\r\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n (change)=\"onToggleAllClick()\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n [class.expand]=\"column.expand\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\r\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n </button>\r\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n </div>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"column-picker\">\r\n <vdr-data-table-colum-picker\r\n [uiLanguage]=\"uiLanguage$ | async\"\r\n [columns]=\"sortedColumns\"\r\n (reorder)=\"onColumnReorder($event)\"\r\n (resetColumns)=\"onColumnsReset()\"\r\n ></vdr-data-table-colum-picker>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n <th\r\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n class=\"filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n >\r\n <button\r\n class=\"button-ghost toggle-search-filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n (click)=\"toggleSearchFilterRow()\"\r\n [title]=\"'common.search-and-filter-list' | translate\"\r\n >\r\n <clr-icon shape=\"search\"></clr-icon>\r\n </button>\r\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n <ng-container *ngIf=\"filters\">\r\n <div class=\"filters\">\r\n <vdr-data-table-filters\r\n *ngFor=\"let activeFilter of filters.activeFilters\"\r\n [filterWithValue]=\"activeFilter\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-data-table-filters\r\n *ngIf=\"filters.length\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-add-filter-preset-button\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n ></vdr-add-filter-preset-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"\r\n let item of items\r\n | paginate\r\n : {\r\n id: id,\r\n itemsPerPage: itemsPerPage,\r\n currentPage: currentPage,\r\n totalItems: totalItems\r\n };\r\n index as i;\r\n trackBy: trackByFn\r\n \"\r\n >\r\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.isSelected(item)\"\r\n (click)=\"onRowClick(item, $event)\"\r\n />\r\n </td>\r\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <ng-container\r\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n ></ng-container>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n </tr>\r\n <ng-container>\r\n <tr *ngIf=\"!items?.length\">\r\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n <vdr-items-per-page-controls\r\n *ngIf=\"totalItems\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n ></vdr-items-per-page-controls>\r\n <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n </div>\r\n\r\n <vdr-pagination-controls\r\n *ngIf=\"totalItems\"\r\n [id]=\"id\"\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"] }]
|
|
18396
|
+
args: [{ selector: 'vdr-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService, FilterPresetService], template: "<vdr-data-table-filter-presets\r\n *ngIf=\"filters\"\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n <div class=\"bulk-actions\">\r\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n </div>\r\n <table class=\"\" [class.no-select]=\"disableSelect\">\r\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n <tr class=\"heading-row\">\r\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n (change)=\"onToggleAllClick()\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n [class.expand]=\"column.expand\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\r\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n </button>\r\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n </div>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"column-picker\">\r\n <vdr-data-table-colum-picker\r\n [uiLanguage]=\"uiLanguage$ | async\"\r\n [columns]=\"sortedColumns\"\r\n (reorder)=\"onColumnReorder($event)\"\r\n (resetColumns)=\"onColumnsReset()\"\r\n ></vdr-data-table-colum-picker>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n <th\r\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n class=\"filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n >\r\n <button\r\n class=\"button-ghost toggle-search-filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n (click)=\"toggleSearchFilterRow()\"\r\n [title]=\"'common.search-and-filter-list' | translate\"\r\n >\r\n <clr-icon shape=\"search\"></clr-icon>\r\n </button>\r\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n <ng-container *ngIf=\"filters\">\r\n <div class=\"filters\">\r\n <vdr-data-table-filters\r\n *ngFor=\"let activeFilter of filters.activeFilters\"\r\n [filterWithValue]=\"activeFilter\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-data-table-filters\r\n *ngIf=\"filters.length\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-add-filter-preset-button\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n ></vdr-add-filter-preset-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"\r\n let item of items\r\n | paginate\r\n : {\r\n id: id,\r\n itemsPerPage: itemsPerPage,\r\n currentPage: currentPage,\r\n totalItems: totalItems\r\n };\r\n index as i;\r\n trackBy: trackByFn.bind(this)\r\n \"\r\n >\r\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.isSelected(item)\"\r\n (click)=\"onRowClick(item, $event)\"\r\n />\r\n </td>\r\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <ng-container\r\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n ></ng-container>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n </tr>\r\n <ng-container>\r\n <tr *ngIf=\"!items?.length\">\r\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n <vdr-items-per-page-controls\r\n *ngIf=\"totalItems\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n ></vdr-items-per-page-controls>\r\n <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n </div>\r\n\r\n <vdr-pagination-controls\r\n *ngIf=\"totalItems\"\r\n [id]=\"id\"\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"] }]
|
|
18399
18397
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: DataService }], propDecorators: { id: [{
|
|
18400
18398
|
type: Input
|
|
18401
18399
|
}], items: [{
|
|
@@ -18412,6 +18410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
18412
18410
|
type: Input
|
|
18413
18411
|
}], activeIndex: [{
|
|
18414
18412
|
type: Input
|
|
18413
|
+
}], trackByPath: [{
|
|
18414
|
+
type: Input
|
|
18415
18415
|
}], pageChange: [{
|
|
18416
18416
|
type: Output
|
|
18417
18417
|
}], itemsPerPageChange: [{
|