@stemy/ngx-utils 19.9.16 → 19.9.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.
|
@@ -3693,7 +3693,7 @@ class BaseHttpService {
|
|
|
3693
3693
|
return `request-${hash}`;
|
|
3694
3694
|
}
|
|
3695
3695
|
toPromise(url, requestOptions, listener) {
|
|
3696
|
-
const { read, cache, controller, ...options } = requestOptions;
|
|
3696
|
+
const { read, cache, controller, timeout: timeout$1, ...options } = requestOptions;
|
|
3697
3697
|
const absoluteUrl = this.absoluteUrl(url, options);
|
|
3698
3698
|
const cacheKey = this.makeCacheKey(absoluteUrl, read, requestOptions);
|
|
3699
3699
|
const issueContext = { url: absoluteUrl };
|
|
@@ -3735,10 +3735,10 @@ class BaseHttpService {
|
|
|
3735
3735
|
signal.addEventListener("abort", onAbort, { once: true });
|
|
3736
3736
|
}
|
|
3737
3737
|
// Make request
|
|
3738
|
-
const request = this.client.request(options.method, absoluteUrl)
|
|
3738
|
+
const request = this.client.request(options.method, absoluteUrl, options)
|
|
3739
3739
|
.pipe(takeUntil(canceler));
|
|
3740
|
-
const finalRequest = ObjectUtils.isNumber(
|
|
3741
|
-
? request.pipe(timeout(
|
|
3740
|
+
const finalRequest = ObjectUtils.isNumber(timeout$1) && timeout$1 > 0
|
|
3741
|
+
? request.pipe(timeout(timeout$1)) : request;
|
|
3742
3742
|
finalRequest.subscribe({
|
|
3743
3743
|
next: event => {
|
|
3744
3744
|
if (options.reportProgress && event?.type === HttpEventType.UploadProgress) {
|
|
@@ -4911,10 +4911,12 @@ class ComponentLoaderService {
|
|
|
4911
4911
|
throw new Error(`Module with id '${location.moduleId}' has been declared more than once.`);
|
|
4912
4912
|
}
|
|
4913
4913
|
const moduleInfo = moduleInfoList[0];
|
|
4914
|
-
if (
|
|
4914
|
+
if (moduleInfo) {
|
|
4915
|
+
await this.loadModule(moduleInfo);
|
|
4916
|
+
}
|
|
4917
|
+
else if (!location.fallback) {
|
|
4915
4918
|
throw new Error(`Module with id '${location.moduleId}' not found.`);
|
|
4916
4919
|
}
|
|
4917
|
-
await this.loadModule(moduleInfo);
|
|
4918
4920
|
return this.findComponentType(location.selector, location.moduleId);
|
|
4919
4921
|
}
|
|
4920
4922
|
createComponent(componentType, projectableNodes, injector, split) {
|
|
@@ -7921,7 +7923,7 @@ class DynamicTableCellComponent {
|
|
|
7921
7923
|
this.context = computed(() => {
|
|
7922
7924
|
const item = this.item();
|
|
7923
7925
|
const id = this.id();
|
|
7924
|
-
const value = ObjectUtils.getValue(item, id,
|
|
7926
|
+
const value = ObjectUtils.getValue(item, id, null);
|
|
7925
7927
|
return {
|
|
7926
7928
|
item, id, value,
|
|
7927
7929
|
column: this.column(),
|
|
@@ -8096,7 +8098,7 @@ class DynamicTableComponent {
|
|
|
8096
8098
|
this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
|
|
8097
8099
|
this.query = this.cols.reduce((res, col) => {
|
|
8098
8100
|
const value = query[col];
|
|
8099
|
-
if (
|
|
8101
|
+
if (ObjectUtils.isNullOrUndefined(value))
|
|
8100
8102
|
return res;
|
|
8101
8103
|
res[col] = value;
|
|
8102
8104
|
return res;
|
|
@@ -8273,11 +8275,11 @@ class DynamicTableComponent {
|
|
|
8273
8275
|
};
|
|
8274
8276
|
}
|
|
8275
8277
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: { classPropertyName: "dataLoader", publicName: "dataLoader", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: false, isRequired: false, transformFunction: null }, parallelData: { classPropertyName: "parallelData", publicName: "parallelData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showItems: { classPropertyName: "showItems", publicName: "showItems", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: null }, updateTime: { classPropertyName: "updateTime", publicName: "updateTime", isSignal: false, isRequired: false, transformFunction: null }, filterTime: { classPropertyName: "filterTime", publicName: "filterTime", isSignal: false, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: false, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: false, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: false, isRequired: false, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: false, isRequired: false, transformFunction: null }, orderDescending: { classPropertyName: "orderDescending", publicName: "orderDescending", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: false, isRequired: false, transformFunction: null }, dragStartFn: { classPropertyName: "dragStartFn", publicName: "dragStartFn", isSignal: false, isRequired: false, transformFunction: null }, dragEnterFn: { classPropertyName: "dragEnterFn", publicName: "dragEnterFn", isSignal: false, isRequired: false, transformFunction: null }, dropFn: { classPropertyName: "dropFn", publicName: "dropFn", isSignal: false, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "fallbackTemplate", first: true, predicate: ["fallbackTemplate"], descendants: true, isSignal: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }], 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: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n @for (column of cols; track column) {\r\n @let columnDef = columnDefs[column];\r\n <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n @if (columnDef.filter) {\r\n @switch (columnDef.filterType) {\r\n @case ('enum') {\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\"\r\n [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @case ('checkbox') {\r\n <input type=\"checkbox\"\r\n class=\"table-checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [checked]=\"query[column] === true\"\r\n [indeterminate]=\"query[column] === undefined\"\r\n (click)=\"setQueryValue(column)\"/>\r\n }\r\n @default {\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n <tr>\r\n <!-- Just an anchor/helper row for the loading state -->\r\n <td colspan=\"100%\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.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,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:13px;line-height:1rem;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\"}input.table-checkbox:indeterminate:after{content:\"\\2014\";font-weight:900;font-size:14px}\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: 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.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: DynamicTableCellComponent, selector: "dynamic-table-cell", inputs: ["item", "column", "id", "globalTemplatePrefix", "fallbackTemplate"] }, { 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 }); }
|
|
8278
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: { classPropertyName: "dataLoader", publicName: "dataLoader", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: false, isRequired: false, transformFunction: null }, parallelData: { classPropertyName: "parallelData", publicName: "parallelData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showItems: { classPropertyName: "showItems", publicName: "showItems", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: null }, updateTime: { classPropertyName: "updateTime", publicName: "updateTime", isSignal: false, isRequired: false, transformFunction: null }, filterTime: { classPropertyName: "filterTime", publicName: "filterTime", isSignal: false, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: false, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: false, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: false, isRequired: false, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: false, isRequired: false, transformFunction: null }, orderDescending: { classPropertyName: "orderDescending", publicName: "orderDescending", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: false, isRequired: false, transformFunction: null }, dragStartFn: { classPropertyName: "dragStartFn", publicName: "dragStartFn", isSignal: false, isRequired: false, transformFunction: null }, dragEnterFn: { classPropertyName: "dragEnterFn", publicName: "dragEnterFn", isSignal: false, isRequired: false, transformFunction: null }, dropFn: { classPropertyName: "dropFn", publicName: "dropFn", isSignal: false, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "fallbackTemplate", first: true, predicate: ["fallbackTemplate"], descendants: true, isSignal: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }], 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: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n @for (column of cols; track column) {\r\n @let columnDef = columnDefs[column];\r\n <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n @if (columnDef.filter) {\r\n @switch (columnDef.filterType) {\r\n @case ('enum') {\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\"\r\n [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @case ('checkbox') {\r\n <input type=\"checkbox\"\r\n class=\"table-checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [checked]=\"query[column] === true\"\r\n [indeterminate]=\"query[column] === undefined\"\r\n (click)=\"setQueryValue(column)\"/>\r\n }\r\n @default {\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n <tr>\r\n <!-- Just an anchor/helper row for the loading state -->\r\n <td colspan=\"100%\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.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,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:11px;line-height:11px;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\\fe0e\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\\fe0e\"}input.table-checkbox:indeterminate:after{content:\"\\2501\"}\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: 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.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: DynamicTableCellComponent, selector: "dynamic-table-cell", inputs: ["item", "column", "id", "globalTemplatePrefix", "fallbackTemplate"] }, { 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 }); }
|
|
8277
8279
|
}
|
|
8278
8280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
8279
8281
|
type: Component,
|
|
8280
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n @for (column of cols; track column) {\r\n @let columnDef = columnDefs[column];\r\n <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n @if (columnDef.filter) {\r\n @switch (columnDef.filterType) {\r\n @case ('enum') {\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\"\r\n [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @case ('checkbox') {\r\n <input type=\"checkbox\"\r\n class=\"table-checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [checked]=\"query[column] === true\"\r\n [indeterminate]=\"query[column] === undefined\"\r\n (click)=\"setQueryValue(column)\"/>\r\n }\r\n @default {\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n <tr>\r\n <!-- Just an anchor/helper row for the loading state -->\r\n <td colspan=\"100%\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.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,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:13px;line-height:1rem;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\"}input.table-checkbox:indeterminate:after{content:\"\\2014\";font-weight:900;font-size:14px}\n"] }]
|
|
8282
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n @for (column of cols; track column) {\r\n @let columnDef = columnDefs[column];\r\n <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n @if (columnDef.filter) {\r\n @switch (columnDef.filterType) {\r\n @case ('enum') {\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\"\r\n [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @case ('checkbox') {\r\n <input type=\"checkbox\"\r\n class=\"table-checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [checked]=\"query[column] === true\"\r\n [indeterminate]=\"query[column] === undefined\"\r\n (click)=\"setQueryValue(column)\"/>\r\n }\r\n @default {\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n <tr>\r\n <!-- Just an anchor/helper row for the loading state -->\r\n <td colspan=\"100%\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.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,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:11px;line-height:11px;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\\fe0e\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\\fe0e\"}input.table-checkbox:indeterminate:after{content:\"\\2501\"}\n"] }]
|
|
8281
8283
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
|
|
8282
8284
|
type: Input
|
|
8283
8285
|
}], data: [{
|