npm - myrta-ui - Versions diffs - 17.1.5 → 17.1.7 - Mend

myrta-ui 17.1.5 → 17.1.7

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.

Files changed (6) hide show

package/fesm2022/myrta-ui.mjs CHANGED Viewed

@@ -5136,7 +5136,7 @@ class TableComponent {
         this.isOpenSort = isOpen;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    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\r\n              class=\"link-wrapper td-content-wrapper\"\r\n              [href]=\"getLinkForStroke(link, dataItem)\"\r\n              *ngIf=\"link && col['isLink']; else defaultTemplate\"\r\n            >\r\n              <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n                <div class=\"p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n              </ng-container>\r\n\r\n              <ng-template #bodyItemTemplate>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n              </ng-template>\r\n            </a>\r\n\r\n            <ng-template #defaultTemplate>\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\r\n                    *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n                </div>\r\n              </ng-template>\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\"\r\n     *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 table td{height:1px}.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}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%}.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"] }], animations: [
+    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\r\n              class=\"link-wrapper td-content-wrapper\"\r\n              [href]=\"getLinkForStroke(link, dataItem)\"\r\n              *ngIf=\"link && col['isLink']; else defaultTemplate\"\r\n            ></a>\r\n\r\n            <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n              <div class=\"p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyItemTemplate>\r\n              <ng-container\r\n                *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n            </ng-template>\r\n\r\n            <ng-template #defaultTemplate>\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\r\n                    *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n                </div>\r\n              </ng-template>\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\"\r\n     *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"] }], animations: [
             trigger('visibleLoading', [
                 state('in', style({ opacity: 1, visibility: 'visible' })),
                 state('out', style({ opacity: 0, visibility: 'hidden' })),
@@ -5166,7 +5166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                     animate('300ms ease-in-out', style({ opacity: 1 }))
                                 ])])
                         ])
-                    ], 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\r\n              class=\"link-wrapper td-content-wrapper\"\r\n              [href]=\"getLinkForStroke(link, dataItem)\"\r\n              *ngIf=\"link && col['isLink']; else defaultTemplate\"\r\n            >\r\n              <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n                <div class=\"p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n              </ng-container>\r\n\r\n              <ng-template #bodyItemTemplate>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n              </ng-template>\r\n            </a>\r\n\r\n            <ng-template #defaultTemplate>\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\r\n                    *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n                </div>\r\n              </ng-template>\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\"\r\n     *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 table td{height:1px}.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}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%}.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"] }]
+                    ], 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\r\n              class=\"link-wrapper td-content-wrapper\"\r\n              [href]=\"getLinkForStroke(link, dataItem)\"\r\n              *ngIf=\"link && col['isLink']; else defaultTemplate\"\r\n            ></a>\r\n\r\n            <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n              <div class=\"p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyItemTemplate>\r\n              <ng-container\r\n                *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n            </ng-template>\r\n\r\n            <ng-template #defaultTemplate>\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\r\n                    *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n                </div>\r\n              </ng-template>\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\"\r\n     *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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contentChildren: [{
                 type: ContentChildren,
                 args: [ColumnComponent]
@@ -16097,11 +16097,11 @@ class InputFileComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3$1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .ngx-file-drop__drop-zone,:host::ng-deep .ngx-file-drop__content{height:auto!important;min-height:100px!important}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3$1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-input-file', template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"] }]
+            args: [{ selector: 'mrx-input-file', template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .ngx-file-drop__drop-zone,:host::ng-deep .ngx-file-drop__content{height:auto!important;min-height:100px!important}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"] }]
         }], ctorParameters: () => [{ type: FileUploadService }], propDecorators: { autoUpload: [{
                 type: Input
             }], required: [{