@stemy/ngx-utils 19.9.14 → 19.9.16

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.
@@ -5,7 +5,7 @@ import 'reflect-metadata';
5
5
  import * as i2 from '@angular/router';
6
6
  import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
7
7
  import { BehaviorSubject, Observable, firstValueFrom, isObservable, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, of, lastValueFrom } from 'rxjs';
8
- import { skipWhile, debounceTime, distinctUntilChanged, map, filter, mergeMap, timeout } from 'rxjs/operators';
8
+ import { skipWhile, debounceTime, distinctUntilChanged, map, filter, mergeMap, takeUntil, timeout } from 'rxjs/operators';
9
9
  import * as i1$3 from '@angular/common';
10
10
  import { isPlatformBrowser, isPlatformServer, DOCUMENT, AsyncPipe, APP_BASE_HREF, CommonModule } from '@angular/common';
11
11
  import * as i1 from 'ngx-device-detector';
@@ -2873,6 +2873,9 @@ function impatientPromise(factory) {
2873
2873
  return lastPromise;
2874
2874
  };
2875
2875
  }
2876
+ function promiseTimeout(time = 1000) {
2877
+ return new Promise(resolve => setTimeout(resolve, time));
2878
+ }
2876
2879
 
2877
2880
  function svgToDataUri(svgString) {
2878
2881
  // Encode as UTF-8, then to Base64
@@ -3690,7 +3693,7 @@ class BaseHttpService {
3690
3693
  return `request-${hash}`;
3691
3694
  }
3692
3695
  toPromise(url, requestOptions, listener) {
3693
- const { cache, read, ...options } = requestOptions;
3696
+ const { read, cache, controller, ...options } = requestOptions;
3694
3697
  const absoluteUrl = this.absoluteUrl(url, options);
3695
3698
  const cacheKey = this.makeCacheKey(absoluteUrl, read, requestOptions);
3696
3699
  const issueContext = { url: absoluteUrl };
@@ -3717,7 +3720,23 @@ class BaseHttpService {
3717
3720
  }
3718
3721
  this.toastWarning(`${url} endpoint error is not handled properly! Click here, to quickly create an issue.`, issueContext, reason, options);
3719
3722
  }, (resolve, reject) => {
3720
- const request = this.client.request(options.method, absoluteUrl, options);
3723
+ const canceler = new Subject();
3724
+ const signal = controller?.signal;
3725
+ const onAbort = () => {
3726
+ canceler.next(`Request for '${url}' is aborted.`);
3727
+ canceler.complete();
3728
+ };
3729
+ // Set up abort logic
3730
+ if (signal) {
3731
+ if (signal.aborted) {
3732
+ reject(new Error(`Request for '${url}' is already aborted.`));
3733
+ return;
3734
+ }
3735
+ signal.addEventListener("abort", onAbort, { once: true });
3736
+ }
3737
+ // Make request
3738
+ const request = this.client.request(options.method, absoluteUrl)
3739
+ .pipe(takeUntil(canceler));
3721
3740
  const finalRequest = ObjectUtils.isNumber(options.timeout) && options.timeout > 0
3722
3741
  ? request.pipe(timeout(options.timeout)) : request;
3723
3742
  finalRequest.subscribe({
@@ -3764,7 +3783,11 @@ class BaseHttpService {
3764
3783
  return;
3765
3784
  }
3766
3785
  }
3786
+ signal?.removeEventListener("abort", onAbort);
3767
3787
  reject(response);
3788
+ },
3789
+ complete: () => {
3790
+ signal?.removeEventListener("abort", onAbort);
3768
3791
  }
3769
3792
  });
3770
3793
  }), cache);
@@ -6592,6 +6615,7 @@ class PaginationDirective {
6592
6615
  this.pageChange = new EventEmitter();
6593
6616
  this.onRefresh = new EventEmitter();
6594
6617
  this.updateTimer = TimerUtils.createTimeout(() => this.loadData(), this.updateTime);
6618
+ this.controller = new AbortController();
6595
6619
  }
6596
6620
  ngOnChanges(changes) {
6597
6621
  if (!changes.loader && !changes.itemsPerPage && !changes.page)
@@ -6602,22 +6626,24 @@ class PaginationDirective {
6602
6626
  this.refresh();
6603
6627
  }
6604
6628
  refresh(time) {
6629
+ this.renderer.addClass(this.element.nativeElement, "loading");
6605
6630
  time = isNaN(time) || time <= 0 ? this.updateTime : time;
6606
- this.updateTimer.time = isNaN(time) || time <= 0 ? 100 : time;
6631
+ this.updateTimer.time = isNaN(time) || time <= 0 ? 350 : time;
6607
6632
  Promise.resolve(this.waitFor).then(() => {
6608
6633
  this.updateTimer.run();
6609
6634
  });
6610
6635
  }
6611
- paginate(page) {
6636
+ paginate(page, time) {
6612
6637
  this.page = page;
6613
6638
  this.pageChange.emit(page);
6614
- this.refresh();
6639
+ this.refresh(time);
6615
6640
  }
6616
6641
  loadData() {
6617
6642
  if (!this.loader)
6618
6643
  return;
6619
- this.renderer.addClass(this.element.nativeElement, "loading");
6620
- this.loader(this.page, this.itemsPerPage).then(data => {
6644
+ this.controller.abort("new data");
6645
+ this.controller = new AbortController();
6646
+ this.loader(this.page, this.itemsPerPage, this.controller).then(data => {
6621
6647
  this.maxPage = !data || data.total <= 0 ? 1 : Math.floor((data.total - 1) / this.itemsPerPage) + 1;
6622
6648
  this.data = data;
6623
6649
  const baseIndex = (this.page - 1) * this.itemsPerPage;
@@ -8012,10 +8038,10 @@ class DynamicTableComponent {
8012
8038
  }, {});
8013
8039
  });
8014
8040
  this.onClick = output();
8015
- this.loadData = async (page, itemsPerPage) => {
8041
+ this.loadData = async (page, itemsPerPage, controller) => {
8016
8042
  const orderBy = this.columnDefs[this.orderBy]?.sort;
8017
8043
  const dataLoader = this.dataLoader || this.loadLocalData;
8018
- return dataLoader.call(this, page, itemsPerPage, orderBy, this.orderDescending, this.filter, this.query);
8044
+ return dataLoader.call(this, page, itemsPerPage, orderBy, this.orderDescending, this.filter, this.query, controller);
8019
8045
  };
8020
8046
  this.placeholder = "";
8021
8047
  this.tableId = UniqueUtils.uuid();
@@ -8135,13 +8161,11 @@ class DynamicTableComponent {
8135
8161
  elem.classList.add("dropped");
8136
8162
  }
8137
8163
  refresh(time) {
8138
- if (!this.pagination)
8139
- return;
8140
- this.pagination.refresh(time);
8164
+ this.pagination?.refresh(time);
8141
8165
  }
8142
8166
  setFilter(filter) {
8143
8167
  this.filter = filter;
8144
- this.refresh(this.filterTime ?? 300);
8168
+ this.pagination?.paginate(0, this.filterTime);
8145
8169
  }
8146
8170
  setSorting(column, toggle) {
8147
8171
  if (toggle) {
@@ -8172,11 +8196,11 @@ class DynamicTableComponent {
8172
8196
  this.query[c] = Array.from(set);
8173
8197
  break;
8174
8198
  case "checkbox":
8175
- if (this.query[c]) {
8199
+ if (this.query[c] === false) {
8176
8200
  delete this.query[c];
8177
8201
  break;
8178
8202
  }
8179
- this.query[c] = true;
8203
+ this.query[c] = !this.query[c];
8180
8204
  break;
8181
8205
  default:
8182
8206
  if (!value) {
@@ -8186,7 +8210,7 @@ class DynamicTableComponent {
8186
8210
  this.query[c] = value;
8187
8211
  break;
8188
8212
  }
8189
- this.refresh(this.filterTime ?? 300);
8213
+ this.pagination?.paginate(0, this.filterTime);
8190
8214
  }
8191
8215
  setItemsPerPage(count) {
8192
8216
  this.itemsPerPage = count;
@@ -8214,8 +8238,6 @@ class DynamicTableComponent {
8214
8238
  });
8215
8239
  };
8216
8240
  filterFn = Object.entries(query).reduce((fn, [key, filterValue]) => {
8217
- if (!filterValue)
8218
- return fn;
8219
8241
  const column = this.columnDefs[key];
8220
8242
  if (!column)
8221
8243
  return fn;
@@ -8227,12 +8249,12 @@ class DynamicTableComponent {
8227
8249
  return filterArr.includes(value) && fn(ctx);
8228
8250
  };
8229
8251
  case "checkbox":
8230
- return (ctx) => {
8252
+ return ObjectUtils.isBoolean(filterValue) ? (ctx) => {
8231
8253
  const value = ctx.item[key];
8232
- return !!value && fn(ctx);
8233
- };
8254
+ return !!value === filterValue && fn(ctx);
8255
+ } : fn;
8234
8256
  }
8235
- const filterRx = new RegExp(`${filterValue}`, "gi");
8257
+ const filterRx = new RegExp(`${filterValue || ""}`, "gi");
8236
8258
  return (ctx) => {
8237
8259
  const value = ctx.item[key];
8238
8260
  return `${value}`.match(filterRx) && fn(ctx);
@@ -8251,11 +8273,11 @@ class DynamicTableComponent {
8251
8273
  };
8252
8274
  }
8253
8275
  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 }); }
8254
- 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 <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"columnDefs[column].filter\" [ngSwitch]=\"columnDefs[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'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\" [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\">&nbsp;|&nbsp;</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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\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 </ng-container>\r\n <ng-container *ngSwitchDefault>\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 </ng-container>\r\n </ng-container>\r\n </th>\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 </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: [".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{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}.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,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\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: 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 }); }
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\">&nbsp;|&nbsp;</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 }); }
8255
8277
  }
8256
8278
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, decorators: [{
8257
8279
  type: Component,
8258
- 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 <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"columnDefs[column].filter\" [ngSwitch]=\"columnDefs[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'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\" [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\">&nbsp;|&nbsp;</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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\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 </ng-container>\r\n <ng-container *ngSwitchDefault>\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 </ng-container>\r\n </ng-container>\r\n </th>\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 </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: [".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{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}.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,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
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\">&nbsp;|&nbsp;</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"] }]
8259
8281
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
8260
8282
  type: Input
8261
8283
  }], data: [{
@@ -9141,11 +9163,11 @@ class UnorderedListComponent {
9141
9163
  this.cdr.detectChanges();
9142
9164
  }
9143
9165
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UnorderedListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
9144
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UnorderedListComponent, isStandalone: false, selector: "unordered-list", inputs: { data: "data", keyPrefix: "keyPrefix", listStyle: "listStyle", path: "path", level: "level", templates: "templates" }, queries: [{ propertyName: "templateDirectives", predicate: UnorderedListTemplateDirective }], viewQueries: [{ propertyName: "defaultKeyTemplate", first: true, predicate: ["defaultKeyTemplate"], descendants: true }, { propertyName: "defaultValueTemplate", first: true, predicate: ["defaultValueTemplate"], descendants: true }, { propertyName: "defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template let-keyPrefix=\"keyPrefix\" let-key=\"item.key\" #defaultKeyTemplate>\n {{ (keyPrefix ? keyPrefix + key : key) | translate }}:\n</ng-template>\n<ng-template let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-key=\"item.key\" let-value=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-type=\"valueType\" #defaultValueTemplate>\n @if (type === 'enum') {\n <span [ngClass]=\"`list-enum enum-${key} enum-value-${value}`\">\n <span>{{ `${key}.${value}` | translate }}</span>\n </span>\n }\n @else if (type === 'object' || type === 'array') {\n <unordered-list [data]=\"value\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"></unordered-list>\n } @else {\n <span [innerHTML]=\"value\"></span>\n }\n</ng-template>\n<ng-template let-item=\"item\" let-data=\"data\" let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-path=\"path\" let-level=\"level\" let-templates=\"templates\" #defaultItemTemplate>\n <ng-template #itemKey>\n <ng-container [unorderedListItem]=\"item\"\n type=\"key\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-template #itemValue>\n <ng-container [unorderedListItem]=\"item\"\n type=\"value\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"!isArray\">\n <th *ngIf=\"listStyle == 'table'; else itemKey\">\n <ng-container [ngTemplateOutlet]=\"itemKey\"></ng-container>\n </th>\n </ng-container>\n <td *ngIf=\"listStyle == 'table'; else itemValue\">\n <ng-container [ngTemplateOutlet]=\"itemValue\"></ng-container>\n </td>\n</ng-template>\n<ng-template #value>\n <span [innerHTML]=\"data\"></span>\n</ng-template>\n<ng-container *ngIf=\"(isObject || isArray); else value\" [ngSwitch]=\"listStyle\">\n <ul [ngClass]=\"'level-' + level\" *ngSwitchCase=\"'list'\">\n <li *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </li>\n </ul>\n <table [ngClass]=\"'level-' + level\" *ngSwitchDefault>\n <tr *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </tr>\n </table>\n</ng-container>\n", styles: [".unordered-list *{box-sizing:border-box}.list-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.list-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\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: UnorderedListItemDirective, selector: "[unorderedListItem]", inputs: ["unorderedListItem", "type", "data", "keyPrefix", "listStyle", "path", "level", "templates", "defaultTemplates"] }, { kind: "component", type: UnorderedListComponent, selector: "unordered-list", inputs: ["data", "keyPrefix", "listStyle", "path", "level", "templates"] }, { kind: "pipe", type: EntriesPipe, name: "entries" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
9166
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UnorderedListComponent, isStandalone: false, selector: "unordered-list", inputs: { data: "data", keyPrefix: "keyPrefix", listStyle: "listStyle", path: "path", level: "level", templates: "templates" }, queries: [{ propertyName: "templateDirectives", predicate: UnorderedListTemplateDirective }], viewQueries: [{ propertyName: "defaultKeyTemplate", first: true, predicate: ["defaultKeyTemplate"], descendants: true }, { propertyName: "defaultValueTemplate", first: true, predicate: ["defaultValueTemplate"], descendants: true }, { propertyName: "defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template let-keyPrefix=\"keyPrefix\" let-key=\"item.key\" #defaultKeyTemplate>\n {{ (keyPrefix ? keyPrefix + key : key) | translate }}:\n</ng-template>\n<ng-template let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-key=\"item.key\" let-value=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-type=\"valueType\" #defaultValueTemplate>\n @if (type === 'enum') {\n <span [ngClass]=\"`list-enum enum-${key} enum-value-${value}`\">\n <span>{{ `${key}.${value}` | translate }}</span>\n </span>\n }\n @else if (type === 'object' || type === 'array') {\n <unordered-list [data]=\"value\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"></unordered-list>\n } @else {\n <span [innerHTML]=\"value\"></span>\n }\n</ng-template>\n<ng-template let-item=\"item\" let-data=\"data\" let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-path=\"path\" let-level=\"level\" let-templates=\"templates\" #defaultItemTemplate>\n <ng-template #itemKey>\n <ng-container [unorderedListItem]=\"item\"\n type=\"key\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-template #itemValue>\n <ng-container [unorderedListItem]=\"item\"\n type=\"value\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"!isArray\">\n <th *ngIf=\"listStyle == 'table'; else itemKey\">\n <ng-container [ngTemplateOutlet]=\"itemKey\"></ng-container>\n </th>\n </ng-container>\n <td *ngIf=\"listStyle == 'table'; else itemValue\">\n <ng-container [ngTemplateOutlet]=\"itemValue\"></ng-container>\n </td>\n</ng-template>\n<ng-template #value>\n <span [innerHTML]=\"data\"></span>\n</ng-template>\n<ng-container *ngIf=\"(isObject || isArray); else value\" [ngSwitch]=\"listStyle\">\n <ul [ngClass]=\"'level-' + level\" *ngSwitchCase=\"'list'\">\n <li *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </li>\n </ul>\n <table [ngClass]=\"'level-' + level\" *ngSwitchDefault>\n <tr *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </tr>\n </table>\n</ng-container>\n", styles: [".unordered-list *{box-sizing:border-box}.list-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.list-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}\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: UnorderedListItemDirective, selector: "[unorderedListItem]", inputs: ["unorderedListItem", "type", "data", "keyPrefix", "listStyle", "path", "level", "templates", "defaultTemplates"] }, { kind: "component", type: UnorderedListComponent, selector: "unordered-list", inputs: ["data", "keyPrefix", "listStyle", "path", "level", "templates"] }, { kind: "pipe", type: EntriesPipe, name: "entries" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
9145
9167
  }
9146
9168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UnorderedListComponent, decorators: [{
9147
9169
  type: Component,
9148
- args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "unordered-list", template: "<ng-template let-keyPrefix=\"keyPrefix\" let-key=\"item.key\" #defaultKeyTemplate>\n {{ (keyPrefix ? keyPrefix + key : key) | translate }}:\n</ng-template>\n<ng-template let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-key=\"item.key\" let-value=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-type=\"valueType\" #defaultValueTemplate>\n @if (type === 'enum') {\n <span [ngClass]=\"`list-enum enum-${key} enum-value-${value}`\">\n <span>{{ `${key}.${value}` | translate }}</span>\n </span>\n }\n @else if (type === 'object' || type === 'array') {\n <unordered-list [data]=\"value\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"></unordered-list>\n } @else {\n <span [innerHTML]=\"value\"></span>\n }\n</ng-template>\n<ng-template let-item=\"item\" let-data=\"data\" let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-path=\"path\" let-level=\"level\" let-templates=\"templates\" #defaultItemTemplate>\n <ng-template #itemKey>\n <ng-container [unorderedListItem]=\"item\"\n type=\"key\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-template #itemValue>\n <ng-container [unorderedListItem]=\"item\"\n type=\"value\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"!isArray\">\n <th *ngIf=\"listStyle == 'table'; else itemKey\">\n <ng-container [ngTemplateOutlet]=\"itemKey\"></ng-container>\n </th>\n </ng-container>\n <td *ngIf=\"listStyle == 'table'; else itemValue\">\n <ng-container [ngTemplateOutlet]=\"itemValue\"></ng-container>\n </td>\n</ng-template>\n<ng-template #value>\n <span [innerHTML]=\"data\"></span>\n</ng-template>\n<ng-container *ngIf=\"(isObject || isArray); else value\" [ngSwitch]=\"listStyle\">\n <ul [ngClass]=\"'level-' + level\" *ngSwitchCase=\"'list'\">\n <li *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </li>\n </ul>\n <table [ngClass]=\"'level-' + level\" *ngSwitchDefault>\n <tr *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </tr>\n </table>\n</ng-container>\n", styles: [".unordered-list *{box-sizing:border-box}.list-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.list-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
9170
+ args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "unordered-list", template: "<ng-template let-keyPrefix=\"keyPrefix\" let-key=\"item.key\" #defaultKeyTemplate>\n {{ (keyPrefix ? keyPrefix + key : key) | translate }}:\n</ng-template>\n<ng-template let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-key=\"item.key\" let-value=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-type=\"valueType\" #defaultValueTemplate>\n @if (type === 'enum') {\n <span [ngClass]=\"`list-enum enum-${key} enum-value-${value}`\">\n <span>{{ `${key}.${value}` | translate }}</span>\n </span>\n }\n @else if (type === 'object' || type === 'array') {\n <unordered-list [data]=\"value\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"></unordered-list>\n } @else {\n <span [innerHTML]=\"value\"></span>\n }\n</ng-template>\n<ng-template let-item=\"item\" let-data=\"data\" let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-path=\"path\" let-level=\"level\" let-templates=\"templates\" #defaultItemTemplate>\n <ng-template #itemKey>\n <ng-container [unorderedListItem]=\"item\"\n type=\"key\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-template #itemValue>\n <ng-container [unorderedListItem]=\"item\"\n type=\"value\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"!isArray\">\n <th *ngIf=\"listStyle == 'table'; else itemKey\">\n <ng-container [ngTemplateOutlet]=\"itemKey\"></ng-container>\n </th>\n </ng-container>\n <td *ngIf=\"listStyle == 'table'; else itemValue\">\n <ng-container [ngTemplateOutlet]=\"itemValue\"></ng-container>\n </td>\n</ng-template>\n<ng-template #value>\n <span [innerHTML]=\"data\"></span>\n</ng-template>\n<ng-container *ngIf=\"(isObject || isArray); else value\" [ngSwitch]=\"listStyle\">\n <ul [ngClass]=\"'level-' + level\" *ngSwitchCase=\"'list'\">\n <li *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </li>\n </ul>\n <table [ngClass]=\"'level-' + level\" *ngSwitchDefault>\n <tr *ngFor=\"let item of data | entries\" [ngClass]=\"item.classList\">\n <ng-container type=\"item\"\n [unorderedListItem]=\"item\"\n [data]=\"data\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path ? path + '.' + item.key : item.key\"\n [level]=\"level\"\n [templates]=\"templates\"\n [defaultTemplates]=\"defaultTemplates\"></ng-container>\n </tr>\n </table>\n</ng-container>\n", styles: [".unordered-list *{box-sizing:border-box}.list-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.list-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}\n"] }]
9149
9171
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
9150
9172
  type: Input
9151
9173
  }], keyPrefix: [{
@@ -9846,5 +9868,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
9846
9868
  * Generated bundle index. Do not edit.
9847
9869
  */
9848
9870
 
9849
- export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableCellComponent, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, Enum, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HitZoneRenderer, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, RequestBag, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, RulerCanvasRenderer, SCHEMA_SELECTOR, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShapeGroup, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, SyncAsyncPipe, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, WysiwygComponent, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, diffEntities, distance, distanceSq, dividePts, dotProduct, ensurePoint, eqPts, getComponentDef, getCssVariables, getRoot, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lengthSq$1 as lengthSq, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, scalePt, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
9871
+ export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableCellComponent, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, Enum, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HitZoneRenderer, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, RequestBag, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, RulerCanvasRenderer, SCHEMA_SELECTOR, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShapeGroup, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, SyncAsyncPipe, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, WysiwygComponent, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, diffEntities, distance, distanceSq, dividePts, dotProduct, ensurePoint, eqPts, getComponentDef, getCssVariables, getRoot, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lengthSq$1 as lengthSq, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, promiseTimeout, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, scalePt, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
9850
9872
  //# sourceMappingURL=stemy-ngx-utils.mjs.map