@stemy/ngx-utils 19.8.12 → 19.9.0

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.
@@ -1,6 +1,6 @@
1
1
  import 'zone.js';
2
2
  import * as i0 from '@angular/core';
3
- import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, inject, untracked, computed, signal, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, Renderer2, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
3
+ import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, inject, untracked, computed, signal, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, contentChild, contentChildren, Renderer2, model, ContentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
4
4
  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';
@@ -21,6 +21,7 @@ import elementResizeDetectorMaker from 'element-resize-detector';
21
21
  import { shift, limitShift, autoPlacement, arrow, computePosition, autoUpdate } from '@floating-ui/dom';
22
22
  import * as i2$1 from '@angular/forms';
23
23
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
24
+ import { toSignal } from '@angular/core/rxjs-interop';
24
25
 
25
26
  class CanvasColor {
26
27
  constructor(r, g, b, a = 255) {
@@ -3988,6 +3989,7 @@ class BaseDialogService {
3988
3989
  dialog(config) {
3989
3990
  if (!config)
3990
3991
  return null;
3992
+ console.log(config.title, config.message);
3991
3993
  const button = !config.buttons ? null : config.buttons[0];
3992
3994
  if (!button)
3993
3995
  return null;
@@ -4130,7 +4132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
4130
4132
 
4131
4133
  class GlobalTemplateService {
4132
4134
  constructor() {
4133
- this.templatesUpdated = new EventEmitter();
4135
+ this.templatesUpdated = new BehaviorSubject([]);
4134
4136
  this.globalTemplates = {};
4135
4137
  this.componentModifiers = {};
4136
4138
  }
@@ -4146,11 +4148,11 @@ class GlobalTemplateService {
4146
4148
  }
4147
4149
  add(id, template) {
4148
4150
  this.globalTemplates[id] = template;
4149
- this.templatesUpdated.emit();
4151
+ this.templatesUpdated.next(Object.keys(this.globalTemplates));
4150
4152
  }
4151
4153
  remove(id) {
4152
4154
  delete this.globalTemplates[id];
4153
- this.templatesUpdated.emit();
4155
+ this.templatesUpdated.next(Object.keys(this.globalTemplates));
4154
4156
  }
4155
4157
  addComponentModifier(id, modifier) {
4156
4158
  this.componentModifiers[id] = modifier;
@@ -7783,11 +7785,11 @@ class DropdownBoxComponent {
7783
7785
  this.makeAutoPlacementOpts();
7784
7786
  }
7785
7787
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7786
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li a{color:var(--dd-text-color);text-decoration:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box-content li:hover a,.dropdown-box-content li.active a{color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
7788
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:-1px 0 0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li a{color:var(--dd-text-color);text-decoration:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box-content li:hover a,.dropdown-box-content li.active a{color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{margin-top:0;margin-bottom:-1px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
7787
7789
  }
7788
7790
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DropdownBoxComponent, decorators: [{
7789
7791
  type: Component,
7790
- args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li a{color:var(--dd-text-color);text-decoration:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box-content li:hover a,.dropdown-box-content li.active a{color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"] }]
7792
+ args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:-1px 0 0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li a{color:var(--dd-text-color);text-decoration:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box-content li:hover a,.dropdown-box-content li.active a{color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{margin-top:0;margin-bottom:-1px}\n"] }]
7791
7793
  }], ctorParameters: () => [], propDecorators: { closeInside: [{
7792
7794
  type: Input
7793
7795
  }], attachTo: [{
@@ -7809,6 +7811,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
7809
7811
  args: [DropdownContentDirective]
7810
7812
  }] } });
7811
7813
 
7814
+ class DynamicTableCellComponent {
7815
+ constructor() {
7816
+ this.language = inject(LANGUAGE_SERVICE);
7817
+ this.globalTemplates = inject(GlobalTemplateService);
7818
+ this.item = input({});
7819
+ this.column = input({ title: "" });
7820
+ this.id = input("");
7821
+ this.globalTemplatePrefix = input("dynamic-table");
7822
+ this.fallbackTemplate = input(null);
7823
+ this.templateKeys = toSignal(this.globalTemplates.templatesUpdated);
7824
+ this.template = computed(() => {
7825
+ const prefix = this.globalTemplatePrefix();
7826
+ const key = `${prefix}-col-${this.id}`;
7827
+ const keys = this.templateKeys();
7828
+ return !keys?.includes(key) ? null : this.globalTemplates.get(key);
7829
+ });
7830
+ this.value = computed(() => {
7831
+ return this.item()?.[this.id()];
7832
+ });
7833
+ this.context = computed(() => {
7834
+ const item = this.item();
7835
+ const id = this.id();
7836
+ const value = item?.[id] ?? "-";
7837
+ return {
7838
+ item, id, value,
7839
+ column: this.column(),
7840
+ multi: Array.isArray(value)
7841
+ };
7842
+ });
7843
+ }
7844
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7845
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableCellComponent, isStandalone: false, selector: "dynamic-table-cell", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null }, fallbackTemplate: { classPropertyName: "fallbackTemplate", publicName: "fallbackTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #fallback let-value=\"value\">\r\n {{ value ?? '-' }}\r\n</ng-template>\r\n<ng-template #defaultTemplate let-context let-column=\"column\" let-id=\"id\" let-value=\"value\">\r\n @switch (column.filterType) {\r\n @case ('checkbox') {\r\n <icon [name]=\"value ? 'check' : 'xmark'\"></icon>\r\n }\r\n @case ('enum') {\r\n <div [ngClass]=\"`table-enum enum-${id} enum-value-${value}`\">\r\n <span>{{ `${id}.${value}` | translate }}</span>\r\n </div>\r\n }\r\n @default {\r\n <ng-container [ngxTemplateOutlet]=\"fallbackTemplate() || fallback\"\r\n [context]=\"context\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n<ng-container [ngxTemplateOutlet]=\"template() || defaultTemplate\"\r\n [context]=\"context()\"\r\n [additionalContext]=\"{defaultTemplate}\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
7846
+ }
7847
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableCellComponent, decorators: [{
7848
+ type: Component,
7849
+ args: [{ standalone: false, selector: "dynamic-table-cell", encapsulation: ViewEncapsulation.None, template: "<ng-template #fallback let-value=\"value\">\r\n {{ value ?? '-' }}\r\n</ng-template>\r\n<ng-template #defaultTemplate let-context let-column=\"column\" let-id=\"id\" let-value=\"value\">\r\n @switch (column.filterType) {\r\n @case ('checkbox') {\r\n <icon [name]=\"value ? 'check' : 'xmark'\"></icon>\r\n }\r\n @case ('enum') {\r\n <div [ngClass]=\"`table-enum enum-${id} enum-value-${value}`\">\r\n <span>{{ `${id}.${value}` | translate }}</span>\r\n </div>\r\n }\r\n @default {\r\n <ng-container [ngxTemplateOutlet]=\"fallbackTemplate() || fallback\"\r\n [context]=\"context\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n<ng-container [ngxTemplateOutlet]=\"template() || defaultTemplate\"\r\n [context]=\"context()\"\r\n [additionalContext]=\"{defaultTemplate}\"></ng-container>\r\n" }]
7850
+ }] });
7851
+
7812
7852
  class PaginationMenuComponent {
7813
7853
  get hasPrev() {
7814
7854
  return this.pagination.page > 1;
@@ -7892,8 +7932,26 @@ class DynamicTableComponent {
7892
7932
  }
7893
7933
  constructor(element) {
7894
7934
  this.element = element;
7935
+ this.globalTemplatePrefix = input("dynamic-table");
7936
+ this.fallbackTemplate = contentChild("fallbackTemplate");
7937
+ this.templateDirectives = contentChildren(DynamicTableTemplateDirective);
7938
+ this.templates = computed(() => {
7939
+ return (this.templateDirectives() || []).reduce((result, directive) => {
7940
+ if (ObjectUtils.isArray(directive.column)) {
7941
+ directive.column.forEach(column => {
7942
+ result[column] = directive;
7943
+ });
7944
+ return result;
7945
+ }
7946
+ if (!ObjectUtils.isStringWithValue(directive.column))
7947
+ return result;
7948
+ result[directive.column] = directive;
7949
+ return result;
7950
+ }, {});
7951
+ });
7952
+ this.onClick = output();
7895
7953
  this.loadData = (page, itemsPerPage) => {
7896
- const orderBy = this.realColumns[this.orderBy]?.sort;
7954
+ const orderBy = this.columnDefs[this.orderBy]?.sort;
7897
7955
  return this.dataLoader(page, itemsPerPage, orderBy, this.orderDescending, this.filter, this.query);
7898
7956
  };
7899
7957
  this.dataLoader = this.loadLocalData;
@@ -7901,13 +7959,12 @@ class DynamicTableComponent {
7901
7959
  this.tableId = UniqueUtils.uuid();
7902
7960
  this.orderBy = "";
7903
7961
  this.orderDescending = false;
7904
- this.templates = {};
7905
7962
  this.filter = "";
7906
7963
  this.query = {};
7907
7964
  this.hasQuery = false;
7908
7965
  this.testId = "table";
7909
7966
  this.titlePrefix = "label";
7910
- this.realColumns = {};
7967
+ this.columnDefs = {};
7911
7968
  this.cols = [];
7912
7969
  this.sortable = false;
7913
7970
  this.localData = [];
@@ -7918,20 +7975,6 @@ class DynamicTableComponent {
7918
7975
  return;
7919
7976
  elem.style.setProperty(`--${name}`, value);
7920
7977
  }
7921
- ngAfterContentInit() {
7922
- this.templates = this.templateDirectives.reduce((result, directive) => {
7923
- if (ObjectUtils.isArray(directive.column)) {
7924
- directive.column.forEach(column => {
7925
- result[column] = directive;
7926
- });
7927
- return result;
7928
- }
7929
- if (!ObjectUtils.isString(directive.column) || directive.column.length == 0)
7930
- return result;
7931
- result[directive.column] = directive;
7932
- return result;
7933
- }, {});
7934
- }
7935
7978
  ngAfterViewInit() {
7936
7979
  this.rowTemplate = this.rowTemplate || this.defaultRowTemplate;
7937
7980
  }
@@ -7942,7 +7985,7 @@ class DynamicTableComponent {
7942
7985
  const orderBy = this.orderBy;
7943
7986
  if (changes.columns) {
7944
7987
  const columns = changes.columns.currentValue || [];
7945
- this.realColumns = ObjectUtils.isArray(columns) ? columns.reduce((result, column) => {
7988
+ this.columnDefs = ObjectUtils.isArray(columns) ? columns.reduce((result, column) => {
7946
7989
  if (!ObjectUtils.isString(column) || column.length == 0)
7947
7990
  return result;
7948
7991
  result[column] = { title: `${this.titlePrefix}.${column}`, sort: column };
@@ -7954,12 +7997,12 @@ class DynamicTableComponent {
7954
7997
  : value;
7955
7998
  return result;
7956
7999
  }, {});
7957
- this.cols = Object.keys(this.realColumns);
8000
+ this.cols = Object.keys(this.columnDefs);
7958
8001
  this.cols.forEach(col => {
7959
- const column = this.realColumns[col];
8002
+ const column = this.columnDefs[col];
7960
8003
  column.filterType = column.filterType || "text";
7961
8004
  });
7962
- const sortable = this.cols.filter(c => this.realColumns[c].sort);
8005
+ const sortable = this.cols.filter(c => this.columnDefs[c].sort);
7963
8006
  const query = this.query || {};
7964
8007
  this.sortable = sortable.length > 0;
7965
8008
  this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
@@ -7972,9 +8015,9 @@ class DynamicTableComponent {
7972
8015
  }, {});
7973
8016
  this.setProperty("cell-width", MathUtils.round(100 / this.cols.length, 4) + "%");
7974
8017
  }
7975
- this.hasQuery = this.cols.some(col => this.realColumns[col].filter);
7976
- if (changes.orderBy && this.realColumns && this.cols) {
7977
- const sortable = this.cols.filter(c => this.realColumns[c].sort);
8018
+ this.hasQuery = this.cols.some(col => this.columnDefs[col].filter);
8019
+ if (changes.orderBy && this.columnDefs && this.cols) {
8020
+ const sortable = this.cols.filter(c => this.columnDefs[c].sort);
7978
8021
  this.sortable = sortable.length > 0;
7979
8022
  this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
7980
8023
  }
@@ -8047,7 +8090,7 @@ class DynamicTableComponent {
8047
8090
  this.refresh();
8048
8091
  }
8049
8092
  setQueryValue(c, value) {
8050
- const col = this.realColumns[c];
8093
+ const col = this.columnDefs[c];
8051
8094
  if (!col?.filter)
8052
8095
  return;
8053
8096
  switch (col.filterType) {
@@ -8111,7 +8154,7 @@ class DynamicTableComponent {
8111
8154
  filterFn = Object.entries(query).reduce((fn, [key, filterValue]) => {
8112
8155
  if (!filterValue)
8113
8156
  return fn;
8114
- const column = this.realColumns[key];
8157
+ const column = this.columnDefs[key];
8115
8158
  if (!column)
8116
8159
  return fn;
8117
8160
  switch (column.filterType) {
@@ -8146,11 +8189,11 @@ class DynamicTableComponent {
8146
8189
  };
8147
8190
  }
8148
8191
  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 }); }
8149
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n </ng-template>\r\n <ng-template #pureTemplate>\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n </ng-template>\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\r\n *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\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: templates[column],\r\n column: 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 <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [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>{{ realColumns[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=\"realColumns[column]; else emptyCol\">\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[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=\"realColumns[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=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <ng-template #optionItem let-option=\"option\">\r\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\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 {{ realColumns[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n (click)=\"setQueryValue(column, option)\"\r\n *ngFor=\"let option of realColumns[column].enum\">\r\n <a [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 </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]=\"realColumns[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]=\"realColumns[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 .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
8192
+ 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 <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${column} enum-value-${option}`\">\r\n <span>{{ `${column}.${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\"> | </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{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 }); }
8150
8193
  }
8151
8194
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, decorators: [{
8152
8195
  type: Component,
8153
- args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n </ng-template>\r\n <ng-template #pureTemplate>\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n </ng-template>\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\r\n *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\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: templates[column],\r\n column: 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 <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [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>{{ realColumns[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=\"realColumns[column]; else emptyCol\">\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[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=\"realColumns[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=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <ng-template #optionItem let-option=\"option\">\r\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\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 {{ realColumns[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n (click)=\"setQueryValue(column, option)\"\r\n *ngFor=\"let option of realColumns[column].enum\">\r\n <a [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 </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]=\"realColumns[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]=\"realColumns[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 .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
8196
+ 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 <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${column} enum-value-${option}`\">\r\n <span>{{ `${column}.${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\"> | </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{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"] }]
8154
8197
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
8155
8198
  type: Input
8156
8199
  }], data: [{
@@ -8217,9 +8260,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
8217
8260
  }], pagination: [{
8218
8261
  type: ViewChild,
8219
8262
  args: ["pagination"]
8220
- }], templateDirectives: [{
8221
- type: ContentChildren,
8222
- args: [DynamicTableTemplateDirective]
8223
8263
  }] } });
8224
8264
 
8225
8265
  class FakeModuleComponent {
@@ -9029,11 +9069,11 @@ class UnorderedListComponent {
9029
9069
  this.cdr.detectChanges();
9030
9070
  }
9031
9071
  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 }); }
9032
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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\" let-isArray=\"isArray\" #defaultKeyTemplate>\n {{ (keyPrefix ? keyPrefix + key : key) | translate }}:\n</ng-template>\n<ng-template let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-val=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-isObject=\"valueIsObject\" let-isArray=\"valueIsArray\" #defaultValueTemplate>\n <ng-template #value>\n <span [innerHTML]=\"val\"></span>\n </ng-template>\n <unordered-list [data]=\"val\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"\n *ngIf=\"(isObject || isArray); else value\"></unordered-list>\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 [unorderedListItem]=\"item\"\n type=\"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 [unorderedListItem]=\"item\"\n type=\"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", 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" }] }); }
9072
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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-val=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-isObject=\"valueIsObject\" let-isArray=\"valueIsArray\" #defaultValueTemplate>\n <ng-template #value>\n <span [innerHTML]=\"val\"></span>\n </ng-template>\n <unordered-list [data]=\"val\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"\n *ngIf=\"(isObject || isArray); else value\"></unordered-list>\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" }] }); }
9033
9073
  }
9034
9074
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UnorderedListComponent, decorators: [{
9035
9075
  type: Component,
9036
- args: [{ standalone: false, selector: "unordered-list", template: "<ng-template let-keyPrefix=\"keyPrefix\" let-key=\"item.key\" let-isArray=\"isArray\" #defaultKeyTemplate>\n {{ (keyPrefix ? keyPrefix + key : key) | translate }}:\n</ng-template>\n<ng-template let-keyPrefix=\"keyPrefix\" let-listStyle=\"listStyle\" let-val=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-isObject=\"valueIsObject\" let-isArray=\"valueIsArray\" #defaultValueTemplate>\n <ng-template #value>\n <span [innerHTML]=\"val\"></span>\n </ng-template>\n <unordered-list [data]=\"val\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"\n *ngIf=\"(isObject || isArray); else value\"></unordered-list>\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 [unorderedListItem]=\"item\"\n type=\"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 [unorderedListItem]=\"item\"\n type=\"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" }]
9076
+ args: [{ standalone: false, 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-val=\"item.value\" let-path=\"path\"\n let-templates=\"templates\" let-isObject=\"valueIsObject\" let-isArray=\"valueIsArray\" #defaultValueTemplate>\n <ng-template #value>\n <span [innerHTML]=\"val\"></span>\n </ng-template>\n <unordered-list [data]=\"val\"\n [keyPrefix]=\"keyPrefix\"\n [listStyle]=\"listStyle\"\n [path]=\"path\"\n [level]=\"level + 1\"\n [templates]=\"templates\"\n *ngIf=\"(isObject || isArray); else value\"></unordered-list>\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"] }]
9037
9077
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
9038
9078
  type: Input
9039
9079
  }], keyPrefix: [{
@@ -9461,6 +9501,7 @@ const components = [
9461
9501
  DropListComponent,
9462
9502
  DropdownBoxComponent,
9463
9503
  DynamicTableComponent,
9504
+ DynamicTableCellComponent,
9464
9505
  FakeModuleComponent,
9465
9506
  PaginationMenuComponent,
9466
9507
  IconComponent,
@@ -9702,8 +9743,8 @@ class NgxUtilsModule {
9702
9743
  };
9703
9744
  }
9704
9745
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
9705
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, SyncAsyncPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, CloseBtnComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, WysiwygComponent], imports: [CommonModule,
9706
- FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, SyncAsyncPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, CloseBtnComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, WysiwygComponent, FormsModule] }); }
9746
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, SyncAsyncPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, CloseBtnComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, DynamicTableCellComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, WysiwygComponent], imports: [CommonModule,
9747
+ FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, SyncAsyncPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, CloseBtnComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, DynamicTableCellComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, WysiwygComponent, FormsModule] }); }
9707
9748
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
9708
9749
  FormsModule, FormsModule] }); }
9709
9750
  }
@@ -9733,5 +9774,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
9733
9774
  * Generated bundle index. Do not edit.
9734
9775
  */
9735
9776
 
9736
- 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, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, 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, gjkDistance, gjkIntersection, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
9777
+ 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, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, 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, gjkDistance, gjkIntersection, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
9737
9778
  //# sourceMappingURL=stemy-ngx-utils.mjs.map