@stemy/ngx-utils 19.4.16 → 19.4.18
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.
|
@@ -129,15 +129,22 @@ class ObjectUtils {
|
|
|
129
129
|
return !obj || Object.keys(obj).length == 0;
|
|
130
130
|
}
|
|
131
131
|
static iterate(obj, cb) {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
132
|
+
const keys = Array.isArray(obj)
|
|
133
|
+
? Array.from(obj.keys())
|
|
134
|
+
: (ObjectUtils.isObject(obj) ? Object.keys(obj) : []);
|
|
135
135
|
keys.forEach(
|
|
136
136
|
// @dynamic
|
|
137
137
|
key => {
|
|
138
138
|
cb(obj[key], key);
|
|
139
139
|
});
|
|
140
140
|
}
|
|
141
|
+
static iterateRecursive(obj, cb, path = "") {
|
|
142
|
+
return ObjectUtils.iterate(obj, (value, key) => {
|
|
143
|
+
const subPath = !path ? key : `${path}.${key}`;
|
|
144
|
+
cb(value, key, subPath, obj);
|
|
145
|
+
ObjectUtils.iterateRecursive(value, cb, subPath);
|
|
146
|
+
});
|
|
147
|
+
}
|
|
141
148
|
static getValue(obj, key, defaultValue, treeFallback = false) {
|
|
142
149
|
key = key || "";
|
|
143
150
|
const keys = key.split(".");
|
|
@@ -2105,6 +2112,11 @@ class TimerUtils {
|
|
|
2105
2112
|
// @dynamic
|
|
2106
2113
|
const run = (timer) => {
|
|
2107
2114
|
timer.clear();
|
|
2115
|
+
// If the time is zero or less, we run the function immediately because setTimeout puts it into the next "frame"
|
|
2116
|
+
if (timer.time <= 0) {
|
|
2117
|
+
timer.func();
|
|
2118
|
+
return;
|
|
2119
|
+
}
|
|
2108
2120
|
timer.id = setTimeout(() => {
|
|
2109
2121
|
timer.id = null;
|
|
2110
2122
|
timer.func();
|
|
@@ -2123,7 +2135,7 @@ class TimerUtils {
|
|
|
2123
2135
|
// @dynamic
|
|
2124
2136
|
const run = (timer) => {
|
|
2125
2137
|
timer.clear();
|
|
2126
|
-
timer.id = setInterval(timer.func, timer.time);
|
|
2138
|
+
timer.id = setInterval(timer.func, Math.max(timer.time, 5));
|
|
2127
2139
|
};
|
|
2128
2140
|
// @dynamic
|
|
2129
2141
|
const clear = (timer) => {
|
|
@@ -2767,7 +2779,7 @@ class BaseHttpService {
|
|
|
2767
2779
|
page: (page - 1),
|
|
2768
2780
|
limit: itemsPerPage
|
|
2769
2781
|
};
|
|
2770
|
-
if (!ObjectUtils.isNullOrUndefined(orderBy)
|
|
2782
|
+
if (!ObjectUtils.isNullOrUndefined(orderBy)) {
|
|
2771
2783
|
params.sort = `${orderDescending ? "-" : ""}${orderBy}`;
|
|
2772
2784
|
}
|
|
2773
2785
|
if (!ObjectUtils.isNullOrUndefined(filter)) {
|
|
@@ -6634,11 +6646,14 @@ class DynamicTableComponent {
|
|
|
6634
6646
|
this.element = element;
|
|
6635
6647
|
this.loadData = (page, itemsPerPage) => {
|
|
6636
6648
|
const orderBy = this.realColumns[this.orderBy]?.sort;
|
|
6649
|
+
console.log("load data", page, itemsPerPage, orderBy, this.orderBy, this.orderDescending, this.filter, this.query);
|
|
6637
6650
|
return this.dataLoader(page, itemsPerPage, orderBy, this.orderDescending, this.filter, this.query);
|
|
6638
6651
|
};
|
|
6639
6652
|
this.dataLoader = this.loadLocalData;
|
|
6640
6653
|
this.placeholder = "";
|
|
6641
6654
|
this.tableId = UniqueUtils.uuid();
|
|
6655
|
+
this.orderBy = "";
|
|
6656
|
+
this.orderDescending = false;
|
|
6642
6657
|
this.templates = {};
|
|
6643
6658
|
this.filter = "";
|
|
6644
6659
|
this.query = {};
|
|
@@ -6671,6 +6686,7 @@ class DynamicTableComponent {
|
|
|
6671
6686
|
this.rowTemplate = this.rowTemplate || this.defaultRowTemplate;
|
|
6672
6687
|
}
|
|
6673
6688
|
ngOnChanges(changes) {
|
|
6689
|
+
const orderBy = this.orderBy;
|
|
6674
6690
|
if (changes.columns) {
|
|
6675
6691
|
const columns = changes.columns.currentValue || [];
|
|
6676
6692
|
this.realColumns = ObjectUtils.isArray(columns) ? columns.reduce((result, column) => {
|
|
@@ -6703,8 +6719,10 @@ class DynamicTableComponent {
|
|
|
6703
6719
|
const sortable = this.cols.filter(c => this.realColumns[c].sort);
|
|
6704
6720
|
this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
|
|
6705
6721
|
}
|
|
6706
|
-
|
|
6722
|
+
console.log(Object.keys(changes), orderBy, this.orderBy);
|
|
6723
|
+
if (!changes.data && !changes.parallelData && !changes.dataLoader && !changes.itemsPerPage && !changes.orderDescending && orderBy === this.orderBy)
|
|
6707
6724
|
return;
|
|
6725
|
+
console.log("Refreshing");
|
|
6708
6726
|
this.refresh();
|
|
6709
6727
|
}
|
|
6710
6728
|
onDragStart(ev, elem, item) {
|
|
@@ -6838,11 +6856,11 @@ class DynamicTableComponent {
|
|
|
6838
6856
|
});
|
|
6839
6857
|
}
|
|
6840
6858
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6841
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr draggable=\"true\"\n #elem\n [ngClass]=\"{active: selected === context.item}\"\n (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, context.item)\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <ng-template #emptyCol>\n <span>-</span>\n </ng-template>\n <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <div class=\"table-content-row\"\n #pagination=\"pagination\"\n [pagination]=\"loadData\"\n [page]=\"page\"\n [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6859
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr #elem\n [draggable]=\"!!dragStartFn\"\n [ngClass]=\"{active: selected === context.item}\"\n (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, context.item)\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <ng-template #emptyCol>\n <span>-</span>\n </ng-template>\n <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <div class=\"table-content-row\"\n #pagination=\"pagination\"\n [pagination]=\"loadData\"\n [page]=\"page\"\n [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6842
6860
|
}
|
|
6843
6861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
6844
6862
|
type: Component,
|
|
6845
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr draggable=\"true\"\n #elem\n [ngClass]=\"{active: selected === context.item}\"\n (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, context.item)\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <ng-template #emptyCol>\n <span>-</span>\n </ng-template>\n <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <div class=\"table-content-row\"\n #pagination=\"pagination\"\n [pagination]=\"loadData\"\n [page]=\"page\"\n [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
|
|
6863
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr #elem\n [draggable]=\"!!dragStartFn\"\n [ngClass]=\"{active: selected === context.item}\"\n (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, context.item)\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <ng-template #emptyCol>\n <span>-</span>\n </ng-template>\n <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <div class=\"table-content-row\"\n #pagination=\"pagination\"\n [pagination]=\"loadData\"\n [page]=\"page\"\n [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
|
|
6846
6864
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
|
|
6847
6865
|
type: Input
|
|
6848
6866
|
}], data: [{
|