@stemy/ngx-utils 19.2.8 → 19.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/stemy-ngx-utils.mjs +19 -13
- package/fesm2022/stemy-ngx-utils.mjs.map +1 -1
- package/ngx-utils/common-types.d.ts +2 -2
- package/ngx-utils/components/dynamic-table/dynamic-table.component.d.ts +4 -2
- package/ngx-utils/ngx-utils.imports.d.ts +1 -1
- package/ngx-utils/services/base-toaster.service.d.ts +14 -14
- package/ngx-utils/services/config.service.d.ts +2 -2
- package/ngx-utils/services/static-language.service.d.ts +4 -4
- package/ngx-utils/utils/loader.utils.d.ts +2 -2
- package/ngx-utils/utils/object.utils.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1892,7 +1892,7 @@ class JSONfn {
|
|
|
1892
1892
|
class LoaderUtils {
|
|
1893
1893
|
static { this.scriptPromises = {}; }
|
|
1894
1894
|
static { this.stylePromises = {}; }
|
|
1895
|
-
static loadScript(src, async = false, type = "text/javascript") {
|
|
1895
|
+
static loadScript(src, async = false, type = "text/javascript", parent) {
|
|
1896
1896
|
this.scriptPromises[src] = this.scriptPromises[src] || new Promise((resolve, reject) => {
|
|
1897
1897
|
// Load script
|
|
1898
1898
|
const script = document.createElement("script");
|
|
@@ -1913,11 +1913,11 @@ class LoaderUtils {
|
|
|
1913
1913
|
script.onload = () => resolve(script);
|
|
1914
1914
|
}
|
|
1915
1915
|
script.onerror = (error) => reject(error);
|
|
1916
|
-
document.body.appendChild(script);
|
|
1916
|
+
(parent || document.body).appendChild(script);
|
|
1917
1917
|
});
|
|
1918
1918
|
return this.scriptPromises[src];
|
|
1919
1919
|
}
|
|
1920
|
-
static loadStyle(src) {
|
|
1920
|
+
static loadStyle(src, parent) {
|
|
1921
1921
|
this.stylePromises[src] = this.stylePromises[src] || new Promise((resolve, reject) => {
|
|
1922
1922
|
// Load script
|
|
1923
1923
|
const link = document.createElement("link");
|
|
@@ -1938,7 +1938,7 @@ class LoaderUtils {
|
|
|
1938
1938
|
link.onload = () => resolve(link);
|
|
1939
1939
|
}
|
|
1940
1940
|
link.onerror = (error) => reject(error);
|
|
1941
|
-
document.body.appendChild(link);
|
|
1941
|
+
(parent || document.body).appendChild(link);
|
|
1942
1942
|
});
|
|
1943
1943
|
return this.stylePromises[src];
|
|
1944
1944
|
}
|
|
@@ -3083,7 +3083,7 @@ class ConfigService {
|
|
|
3083
3083
|
});
|
|
3084
3084
|
return clone;
|
|
3085
3085
|
}
|
|
3086
|
-
return this.rootElement
|
|
3086
|
+
return this.rootElement;
|
|
3087
3087
|
}
|
|
3088
3088
|
prepareUrl(url, ending) {
|
|
3089
3089
|
const project = !this.loadedConfig ? "" : this.loadedConfig.project;
|
|
@@ -3110,7 +3110,7 @@ class ConfigService {
|
|
|
3110
3110
|
}
|
|
3111
3111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfigService, decorators: [{
|
|
3112
3112
|
type: Injectable
|
|
3113
|
-
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: UniversalService }, { type: i0.Injector }, { type:
|
|
3113
|
+
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: UniversalService }, { type: i0.Injector }, { type: HTMLElement, decorators: [{
|
|
3114
3114
|
type: Inject,
|
|
3115
3115
|
args: [ROOT_ELEMENT]
|
|
3116
3116
|
}] }, { type: undefined, decorators: [{
|
|
@@ -3709,15 +3709,15 @@ class BaseToasterService {
|
|
|
3709
3709
|
}
|
|
3710
3710
|
translate(message, params, type) {
|
|
3711
3711
|
this.language.getTranslation(message, params).then(str => {
|
|
3712
|
-
this.show(str, type);
|
|
3712
|
+
this.show(str, type, params);
|
|
3713
3713
|
});
|
|
3714
3714
|
}
|
|
3715
3715
|
async translatePromised(message, params, type) {
|
|
3716
3716
|
const str = await this.language.getTranslation(message, params);
|
|
3717
|
-
return this.show(str, type);
|
|
3717
|
+
return this.show(str, type, params);
|
|
3718
3718
|
}
|
|
3719
|
-
show(message, type) {
|
|
3720
|
-
console.log(message, `background: ${this.colorMap[type]}; color: #ffffff
|
|
3719
|
+
show(message, type, params) {
|
|
3720
|
+
console.log(message, `background: ${this.colorMap[type]}; color: #ffffff`, params);
|
|
3721
3721
|
return null;
|
|
3722
3722
|
}
|
|
3723
3723
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseToasterService, deps: [{ token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
@@ -5783,7 +5783,11 @@ class DynamicTableComponent {
|
|
|
5783
5783
|
this.filter = filter;
|
|
5784
5784
|
this.refresh(this.filterTime ?? 300);
|
|
5785
5785
|
}
|
|
5786
|
-
|
|
5786
|
+
setSorting(column, toggle) {
|
|
5787
|
+
if (toggle) {
|
|
5788
|
+
this.sortOpen = !this.sortOpen;
|
|
5789
|
+
return;
|
|
5790
|
+
}
|
|
5787
5791
|
this.orderDescending = column == this.orderBy && !this.orderDescending;
|
|
5788
5792
|
this.orderBy = column;
|
|
5789
5793
|
this.refresh();
|
|
@@ -5834,11 +5838,11 @@ class DynamicTableComponent {
|
|
|
5834
5838
|
});
|
|
5835
5839
|
}
|
|
5836
5840
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", 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: "filterTemplate", first: true, predicate: ["filterTemplate"], 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: "defaultFilterTemplate", first: true, predicate: ["defaultFilterTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <ng-template #defaultFilterTemplate let-table>\r\n <div class=\"table-filter\" *ngIf=\"table.showFilter\">\r\n <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\r\n <input type=\"text\"\r\n class=\"form-control\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"table.filter\"\r\n (ngModelChange)=\"table.setFilter($event)\"/>\r\n <ng-content select=\"[table-filter]\"></ng-content>\r\n </div>\r\n </ng-template>\r\n <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <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\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [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 draggable=\"true\"\r\n #elem\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 #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\r\n <ng-template #defaultCol>\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </ng-template>\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n (click)=\"setOrder(column)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n <i *ngIf=\"orderBy == column\"\r\n [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n </a>\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\">\r\n <input class=\"form-control\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [type]=\"realColumns[column].filterType || 'text'\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"updateQuery(column, $event)\"/>\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\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35)}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter{margin-bottom:25px;display:flex;gap:10px}.dynamic-table .table-filter>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}\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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { 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: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", 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: "filterTemplate", first: true, predicate: ["filterTemplate"], 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: "defaultFilterTemplate", first: true, predicate: ["defaultFilterTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <ng-template #defaultFilterTemplate let-table>\r\n <div class=\"table-filter\">\r\n <ng-container *ngIf=\"table.showFilter\">\r\n <label *ngIf=\"label\" [attr.for]=\"tableId\">\r\n {{ label | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"form-control\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"table.filter\"\r\n (ngModelChange)=\"table.setFilter($event)\"/>\r\n </ng-container>\r\n <ng-content select=\"[table-filter]\"></ng-content>\r\n </div>\r\n </ng-template>\r\n <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <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\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [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 draggable=\"true\"\r\n #elem\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 <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n <i *ngIf=\"orderBy == column\"\r\n [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n </a>\r\n </ng-template>\r\n\r\n <ng-template #defaultWrapperTemplate>\r\n <div class=\"sort-toggle\" *ngIf=\"orderBy\">\r\n <div class=\"sort-toggle-content\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: true}\"></ng-container>\r\n </div>\r\n </div>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr [ngClass]=\"{'header': true, 'sort-open': sortOpen}\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column, toggle: false}\"></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\">\r\n <input class=\"form-control\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [type]=\"realColumns[column].filterType || 'text'\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"updateQuery(column, $event)\"/>\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\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35)}.dynamic-table .sort-toggle{display:none}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter:not(:empty){display:flex;gap:10px;margin-bottom:20px}.dynamic-table .table-filter:not(:empty)>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { 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: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5838
5842
|
}
|
|
5839
5843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
5840
5844
|
type: Component,
|
|
5841
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <ng-template #defaultFilterTemplate let-table>\r\n <div class=\"table-filter\" *ngIf=\"table.showFilter\">\r\n
|
|
5845
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <ng-template #defaultFilterTemplate let-table>\r\n <div class=\"table-filter\">\r\n <ng-container *ngIf=\"table.showFilter\">\r\n <label *ngIf=\"label\" [attr.for]=\"tableId\">\r\n {{ label | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"form-control\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"table.filter\"\r\n (ngModelChange)=\"table.setFilter($event)\"/>\r\n </ng-container>\r\n <ng-content select=\"[table-filter]\"></ng-content>\r\n </div>\r\n </ng-template>\r\n <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <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\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [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 draggable=\"true\"\r\n #elem\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 <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n <i *ngIf=\"orderBy == column\"\r\n [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n </a>\r\n </ng-template>\r\n\r\n <ng-template #defaultWrapperTemplate>\r\n <div class=\"sort-toggle\" *ngIf=\"orderBy\">\r\n <div class=\"sort-toggle-content\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: true}\"></ng-container>\r\n </div>\r\n </div>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr [ngClass]=\"{'header': true, 'sort-open': sortOpen}\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column, toggle: false}\"></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\">\r\n <input class=\"form-control\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [type]=\"realColumns[column].filterType || 'text'\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"updateQuery(column, $event)\"/>\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\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35)}.dynamic-table .sort-toggle{display:none}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter:not(:empty){display:flex;gap:10px;margin-bottom:20px}.dynamic-table .table-filter:not(:empty)>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}\n"] }]
|
|
5842
5846
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
5843
5847
|
type: Input
|
|
5844
5848
|
}], placeholder: [{
|
|
@@ -5847,6 +5851,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
5847
5851
|
type: Input
|
|
5848
5852
|
}], data: [{
|
|
5849
5853
|
type: Input
|
|
5854
|
+
}], selected: [{
|
|
5855
|
+
type: Input
|
|
5850
5856
|
}], page: [{
|
|
5851
5857
|
type: Input
|
|
5852
5858
|
}], urlParam: [{
|