myrta-ui 17.1.46 → 17.1.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/table/table.component.mjs +9 -3
- package/esm2022/lib/components/table/table.enum.mjs +1 -1
- package/fesm2022/myrta-ui.mjs +8 -2
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/table/table.component.d.ts +3 -2
- package/lib/components/table/table.enum.d.ts +5 -0
- package/package.json +1 -1
package/fesm2022/myrta-ui.mjs
CHANGED
|
@@ -5076,6 +5076,10 @@ class TableComponent {
|
|
|
5076
5076
|
paginatorSettings = {
|
|
5077
5077
|
substrate: false
|
|
5078
5078
|
};
|
|
5079
|
+
loaderSettings = {
|
|
5080
|
+
size: 'large',
|
|
5081
|
+
color: 'brand'
|
|
5082
|
+
};
|
|
5079
5083
|
// Проверить и вырезать
|
|
5080
5084
|
selectedItem = 1;
|
|
5081
5085
|
set setPageable(value) {
|
|
@@ -5218,7 +5222,7 @@ class TableComponent {
|
|
|
5218
5222
|
this.isOpenSort = isOpen;
|
|
5219
5223
|
}
|
|
5220
5224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5221
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", popupPosition: "popupPosition", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header py-12px mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th\r\n *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container\r\n *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "dropdownPosition", "popupPosition", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }], animations: [
|
|
5225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", popupPosition: "popupPosition", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", loaderSettings: "loaderSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header py-12px mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th\r\n *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container\r\n *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "dropdownPosition", "popupPosition", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }], animations: [
|
|
5222
5226
|
trigger('visibleLoading', [
|
|
5223
5227
|
state('in', style({ opacity: 1, visibility: 'visible' })),
|
|
5224
5228
|
state('out', style({ opacity: 0, visibility: 'hidden' })),
|
|
@@ -5248,7 +5252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5248
5252
|
animate('300ms ease-in-out', style({ opacity: 1 }))
|
|
5249
5253
|
])])
|
|
5250
5254
|
])
|
|
5251
|
-
], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header py-12px mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th\r\n *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container\r\n *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
|
|
5255
|
+
], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header py-12px mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th\r\n *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container\r\n *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
|
|
5252
5256
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contentChildren: [{
|
|
5253
5257
|
type: ContentChildren,
|
|
5254
5258
|
args: [ColumnComponent]
|
|
@@ -5296,6 +5300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5296
5300
|
type: Input
|
|
5297
5301
|
}], paginatorSettings: [{
|
|
5298
5302
|
type: Input
|
|
5303
|
+
}], loaderSettings: [{
|
|
5304
|
+
type: Input
|
|
5299
5305
|
}], setPageable: [{
|
|
5300
5306
|
type: Input,
|
|
5301
5307
|
args: ['pageable']
|