@stemy/ngx-utils 19.3.2 → 19.3.3
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.
|
@@ -6707,11 +6707,11 @@ class DynamicTableComponent {
|
|
|
6707
6707
|
});
|
|
6708
6708
|
}
|
|
6709
6709
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6710
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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\">\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 (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, 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;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;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}.dynamic-table .table-features-row:not(:empty){margin-bottom:20px}.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:calc(100% - 24px)}.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", "attachToRoot", "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 }); }
|
|
6710
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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\">\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 (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, 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;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;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:calc(100% - 24px)}.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", "attachToRoot", "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 }); }
|
|
6711
6711
|
}
|
|
6712
6712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
6713
6713
|
type: Component,
|
|
6714
|
-
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 (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, 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;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;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}.dynamic-table .table-features-row:not(:empty){margin-bottom:20px}.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:calc(100% - 24px)}.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"] }]
|
|
6714
|
+
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 (dragstart)=\"onDragStart($event, elem, context.item)\"\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\n (dragleave)=\"onDragLeave($event, elem)\"\n (drop)=\"onDrop($event, elem, 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;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;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:calc(100% - 24px)}.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"] }]
|
|
6715
6715
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
|
|
6716
6716
|
type: Input
|
|
6717
6717
|
}], data: [{
|