@stemy/ngx-utils 17.3.4 → 17.3.6
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.
|
@@ -4452,6 +4452,7 @@ class TranslatePipe {
|
|
|
4452
4452
|
this.lastValue = query;
|
|
4453
4453
|
return this.lastValue;
|
|
4454
4454
|
}
|
|
4455
|
+
this.lastValue = this.language.getTranslationSync(query, this.params);
|
|
4455
4456
|
this.language.getTranslation(query, this.params).then(value => {
|
|
4456
4457
|
this.lastValue = value;
|
|
4457
4458
|
if (!this.cdr["destroyed"]) {
|
|
@@ -5899,11 +5900,11 @@ class DynamicTableComponent {
|
|
|
5899
5900
|
});
|
|
5900
5901
|
}
|
|
5901
5902
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicTableComponent, 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" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr draggable=\"true\"\n #elem\n [ngClass]=\"{active: selected === context.item}\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n</ng-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n", 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 .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 }); }
|
|
5903
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicTableComponent, 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" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr draggable=\"true\"\n #elem\n [ngClass]=\"{active: selected === context.item}\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <ng-template #emptyCol>\n <span>-</span>\n </ng-template>\n <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n", 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 .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 }); }
|
|
5903
5904
|
}
|
|
5904
5905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
5905
5906
|
type: Component,
|
|
5906
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr draggable=\"true\"\n #elem\n [ngClass]=\"{active: selected === context.item}\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n</ng-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n", 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 .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"] }]
|
|
5907
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n </ng-template>\n <ng-template #pureTemplate>\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n </ng-template>\n <td [ngClass]=\"'column-' + column\"\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n *ngIf=\"!template || !template.pure; else pureTemplate\">\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n [context]=\"context\"></ng-container>\n </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n <ng-container *ngFor=\"let column of cols\"\n [ngxTemplateOutlet]=\"columnTemplate\"\n [context]=\"context\"\n [additionalContext]=\"{\n template: templates[column],\n column: column\n }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n <tr draggable=\"true\"\n #elem\n [ngClass]=\"{active: selected === context.item}\">\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n <ng-template #defaultCol>\n <span>{{ realColumns[column].title | translate }}</span>\n </ng-template>\n <ng-template #emptyCol>\n <span>-</span>\n </ng-template>\n <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n (click)=\"setSorting(column, toggle)\">\n <span>{{ realColumns[column].title | translate }}</span>\n </a>\n </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n [updateTime]=\"updateTime\">\n <div class=\"table-features-row\">\n <ng-content select=\"[table-features-before]\"></ng-content>\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n {{ filterLabel | translate }}\n </label>\n <input type=\"text\"\n class=\"search-input\"\n [attr.id]=\"tableId\"\n [attr.data-testid]=\"testId + '-filter-input'\"\n [placeholder]=\"placeholder | translate\"\n [ngModel]=\"filter\"\n (ngModelChange)=\"setFilter($event)\"/>\n </div>\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n <ng-container toggle-content\n [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n <ul>\n <ng-container *ngFor=\"let column of cols\">\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n <label>\n {{ 'label.items.before' | translate }}\n </label>\n <dropdown-box>\n <ng-container toggle-content>\n {{ itemsPerPage }}\n </ng-container>\n <ul>\n <ng-container *ngFor=\"let count of showItems\">\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n {{ count }}\n </li>\n </ng-container>\n </ul>\n </dropdown-box>\n <label>\n {{ 'label.items.after' | translate }}\n </label>\n </div>\n <ng-content select=\"[table-features-after]\"></ng-content>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n <div class=\"table-responsive\">\n <ng-template #defaultWrapperTemplate>\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n </th>\n </tr>\n <tr *ngIf=\"hasQuery\">\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n <ng-container *ngSwitchCase=\"'enum'\">\n <ng-template #optionItem let-option=\"option\">\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n </ng-template>\n <dropdown-box componentClass=\"filter-box\"\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n <ng-container toggle-content>\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n {{ realColumns[column].title | translate }}\n </span>\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n *ngFor=\"let option of query[column] | values; let ix = index\">\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </span>\n </ng-container>\n <ul>\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n (click)=\"setQueryValue(column, option)\"\n *ngFor=\"let option of realColumns[column].enum\">\n <a [ngClass]=\"'toggle-link-' + column\">\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n <ng-container [ngTemplateOutlet]=\"optionItem\"\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n </a>\n </li>\n </ul>\n </dropdown-box>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input type=\"checkbox\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <input class=\"search-input\"\n type=\"text\"\n [attr.data-testid]=\"testId + '-filter-' + column\"\n [placeholder]=\"realColumns[column].title | translate\"\n [ngModel]=\"query[column]\"\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container *paginationItem=\"let context\"\n [ngxTemplateOutlet]=\"rowTemplate\"\n [context]=\"context\"\n [additionalContext]=\"this\"></ng-container>\n </tbody>\n </table>\n </ng-template>\n\n <div class=\"table-wrapper\">\n <ng-content select=\"[table-top]\"></ng-content>\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n [context]=\"this\"></ng-container>\n <ng-content select=\"[table-bottom]\"></ng-content>\n </div>\n </div>\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n", 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 .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"] }]
|
|
5907
5908
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
|
|
5908
5909
|
type: Input
|
|
5909
5910
|
}], data: [{
|