myrta-ui 17.1.46 → 17.1.48

package/fesm2022/myrta-ui.mjs

@@ -16,7 +16,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { createPopper } from '@popperjs/core';
 import * as i6$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { Subscription, asyncScheduler, delay, of, timer, Subject, filter, BehaviorSubject, EMPTY } from 'rxjs';
+import { Subscription, asyncScheduler, delay, of, timer, Subject, filter, BehaviorSubject, fromEvent, EMPTY } from 'rxjs';
 import isEqual from 'lodash-es/isEqual';
 import * as i1$4 from '@angular/common/http';
 import { HttpEventType, HttpClientModule, HttpHeaders } from '@angular/common/http';
@@ -3563,7 +3563,8 @@ const toastrDefaultConfig = {
         warning: 'mrx-toaster-attention',
     },
     autoDismiss: true,
-    toastClass: 'mrx-toaster'
+    toastClass: 'mrx-toaster',
+    preventDuplicates: true,
 };
 
 class ToasterServiceModule {
@@ -5076,6 +5077,10 @@ class TableComponent {
     paginatorSettings = {
         substrate: false
     };
+    loaderSettings = {
+        size: 'large',
+        color: 'brand'
+    };
     // Проверить и вырезать
     selectedItem = 1;
     set setPageable(value) {
@@ -5218,7 +5223,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 class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n            <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n              <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyItemTemplate>\r\n              <div class=\"td-content-wrapper h-100\">\r\n                <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n      <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n        <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n      </ng-container>\r\n\r\n      <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n  <mrx-paginator\r\n    *ngIf=\"pageable\"\r\n    [total]=\"total\"\r\n    [pageSize]=\"pageSize\"\r\n    [position]=\"pageable.position\"\r\n    [pageSizes]=\"pageable.pageSizes\"\r\n    [currentPage]=\"currentPage\"\r\n    [withPageSize]=\"pageable.withPageSize\"\r\n    (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n  </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n  <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n    {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n  <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n    <div class=\"mrx-table-sort-scale\">\r\n      <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n        <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n        <div class=\"mrx-table-sort-scale__icon\">\r\n          <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n          <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n        <span>{{ selectedSort }}</span>\r\n        <span\r\n          class=\"mrx-icon icon-font-16\"\r\n          [class.icon-chevron-up]=\"isOpenSort\"\r\n          [class.icon-chevron-down]=\"!isOpenSort\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of colArray; track item) {\r\n        <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n  <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n    <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n    <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"mrx-table-toggle\">\r\n    <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n      <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n    </div>\r\n    <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n      <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n  {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "dropdownPosition", "popupPosition", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", popupPosition: "popupPosition", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", loaderSettings: "loaderSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n  <ng-container *ngIf=\"headerSettings\">\r\n    <div\r\n      class=\"mrx-table-card-header py-12px mb-3\"\r\n      [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n      *ngIf=\"headerSettings.type === 'default'\"\r\n    >\r\n      <div class=\"row\">\r\n        <div\r\n          class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n          <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n            <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n      [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n      *ngIf=\"headerSettings.type === 'second'\"\r\n    >\r\n      <div class=\"row\">\r\n        <div\r\n          class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n         [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n      <table\r\n        [class.table-striped]=\"striped\"\r\n        [class.table-solid]=\"!striped\"\r\n        [class.mt-2]=\"contentSettings.substrate\"\r\n        [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n      >\r\n        <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n        <tr>\r\n          <th\r\n            *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n            [class]=\"col.customClasses\">\r\n            <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n              <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n                <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n                  <span>{{ col.label }}</span>\r\n                  <svg\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    [class]=\"columnSortedDir(col.name)\"\r\n                    class=\"mrx-table__sort-icon\">\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n                  </svg>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #defaultHeadCol>\r\n                <div><span>{{ col.label }}</span></div>\r\n              </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-template #headerItemTemplate>\r\n              <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n                <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n                  <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n                  <svg\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    [class]=\"columnSortedDir(col.name)\"\r\n                    class=\"mrx-table__sort-icon\">\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n                  </svg>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #defaultHeadCol>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n              </ng-template>\r\n            </ng-template>\r\n          </th>\r\n        </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n        <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n            [class.-hovered]=\"hovered\">\r\n          <td\r\n            #tableTD\r\n            class=\"p-0\"\r\n            *ngFor=\"let col of contentChildren\"\r\n            [class]=\"col.customClasses\"\r\n          >\r\n            <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n            <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n              <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyItemTemplate>\r\n              <div class=\"td-content-wrapper h-100\">\r\n                <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n      <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n        <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n      </ng-container>\r\n\r\n      <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n  <mrx-paginator\r\n    *ngIf=\"pageable\"\r\n    [total]=\"total\"\r\n    [pageSize]=\"pageSize\"\r\n    [position]=\"pageable.position\"\r\n    [pageSizes]=\"pageable.pageSizes\"\r\n    [currentPage]=\"currentPage\"\r\n    [withPageSize]=\"pageable.withPageSize\"\r\n    (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n  </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n  <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n    {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n  <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n    <div class=\"mrx-table-sort-scale\">\r\n      <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n        <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n        <div class=\"mrx-table-sort-scale__icon\">\r\n          <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n          <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n        <span>{{ selectedSort }}</span>\r\n        <span\r\n          class=\"mrx-icon icon-font-16\"\r\n          [class.icon-chevron-up]=\"isOpenSort\"\r\n          [class.icon-chevron-down]=\"!isOpenSort\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of colArray; track item) {\r\n        <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n  <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n    <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n    <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"mrx-table-toggle\">\r\n    <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n      <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n    </div>\r\n    <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n      <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n  {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "dropdownPosition", "popupPosition", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }], animations: [
             trigger('visibleLoading', [
                 state('in', style({ opacity: 1, visibility: 'visible' })),
                 state('out', style({ opacity: 0, visibility: 'hidden' })),
@@ -5248,7 +5253,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 class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n            <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n              <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyItemTemplate>\r\n              <div class=\"td-content-wrapper h-100\">\r\n                <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n      <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n        <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n      </ng-container>\r\n\r\n      <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n  <mrx-paginator\r\n    *ngIf=\"pageable\"\r\n    [total]=\"total\"\r\n    [pageSize]=\"pageSize\"\r\n    [position]=\"pageable.position\"\r\n    [pageSizes]=\"pageable.pageSizes\"\r\n    [currentPage]=\"currentPage\"\r\n    [withPageSize]=\"pageable.withPageSize\"\r\n    (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n  </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n  <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n    {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n  <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n    <div class=\"mrx-table-sort-scale\">\r\n      <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n        <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n        <div class=\"mrx-table-sort-scale__icon\">\r\n          <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n          <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n        <span>{{ selectedSort }}</span>\r\n        <span\r\n          class=\"mrx-icon icon-font-16\"\r\n          [class.icon-chevron-up]=\"isOpenSort\"\r\n          [class.icon-chevron-down]=\"!isOpenSort\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of colArray; track item) {\r\n        <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n  <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n    <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n    <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"mrx-table-toggle\">\r\n    <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n      <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n    </div>\r\n    <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n      <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n  {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
+                    ], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n  <ng-container *ngIf=\"headerSettings\">\r\n    <div\r\n      class=\"mrx-table-card-header py-12px mb-3\"\r\n      [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n      *ngIf=\"headerSettings.type === 'default'\"\r\n    >\r\n      <div class=\"row\">\r\n        <div\r\n          class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n          <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n            <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n      [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n      *ngIf=\"headerSettings.type === 'second'\"\r\n    >\r\n      <div class=\"row\">\r\n        <div\r\n          class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n          <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n         [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n      <table\r\n        [class.table-striped]=\"striped\"\r\n        [class.table-solid]=\"!striped\"\r\n        [class.mt-2]=\"contentSettings.substrate\"\r\n        [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n      >\r\n        <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n        <tr>\r\n          <th\r\n            *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n            [class]=\"col.customClasses\">\r\n            <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n              <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n                <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n                  <span>{{ col.label }}</span>\r\n                  <svg\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    [class]=\"columnSortedDir(col.name)\"\r\n                    class=\"mrx-table__sort-icon\">\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n                  </svg>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #defaultHeadCol>\r\n                <div><span>{{ col.label }}</span></div>\r\n              </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-template #headerItemTemplate>\r\n              <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n                <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n                  <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n                  <svg\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    [class]=\"columnSortedDir(col.name)\"\r\n                    class=\"mrx-table__sort-icon\">\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n                  </svg>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #defaultHeadCol>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n              </ng-template>\r\n            </ng-template>\r\n          </th>\r\n        </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n        <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n            [class.-hovered]=\"hovered\">\r\n          <td\r\n            #tableTD\r\n            class=\"p-0\"\r\n            *ngFor=\"let col of contentChildren\"\r\n            [class]=\"col.customClasses\"\r\n          >\r\n            <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n            <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n              <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyItemTemplate>\r\n              <div class=\"td-content-wrapper h-100\">\r\n                <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n      <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n        <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n      </ng-container>\r\n\r\n      <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n        <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n        <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n  <mrx-paginator\r\n    *ngIf=\"pageable\"\r\n    [total]=\"total\"\r\n    [pageSize]=\"pageSize\"\r\n    [position]=\"pageable.position\"\r\n    [pageSizes]=\"pageable.pageSizes\"\r\n    [currentPage]=\"currentPage\"\r\n    [withPageSize]=\"pageable.withPageSize\"\r\n    (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n  </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n  <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n    {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n  <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n    <div class=\"mrx-table-sort-scale\">\r\n      <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n        <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n        <div class=\"mrx-table-sort-scale__icon\">\r\n          <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n          <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n        <span>{{ selectedSort }}</span>\r\n        <span\r\n          class=\"mrx-icon icon-font-16\"\r\n          [class.icon-chevron-up]=\"isOpenSort\"\r\n          [class.icon-chevron-down]=\"!isOpenSort\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of colArray; track item) {\r\n        <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n  <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n    <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n    <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"mrx-table-toggle\">\r\n    <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n      <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n    </div>\r\n    <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n      <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n  {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contentChildren: [{
                 type: ContentChildren,
                 args: [ColumnComponent]
@@ -5296,6 +5301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], paginatorSettings: [{
                 type: Input
+            }], loaderSettings: [{
+                type: Input
             }], setPageable: [{
                 type: Input,
                 args: ['pageable']
@@ -9129,7 +9136,7 @@ const markPosition$2 = (start, end, pattern = 'date') => {
     }
 };
 
-const cleanDate$2 = (value, format) => {
+const cleanDate$3 = (value, format) => {
     return dayjs(value).format(format);
 };
 
@@ -9401,7 +9408,7 @@ class InputDatepickerComponent {
     }
     writeValue(outsideValue) {
         if (outsideValue) {
-            this.value = cleanDate$2(outsideValue, this.format);
+            this.value = cleanDate$3(outsideValue, this.format);
             this.dateModel = dateModelValueParse$1(outsideValue, this.format);
             this.timeModel = timeModelValueParse$2(outsideValue, this.format);
             this.checkingInvalid(outsideValue, this.maxDate, this.minDate);
@@ -9540,6 +9547,295 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+function formatDate(date, format) {
+    const pad = (n) => n.toString().padStart(2, '0');
+    const map = {
+        'DD': pad(date.getDate()),
+        'MM': pad(date.getMonth() + 1),
+        'YYYY': date.getFullYear().toString()
+    };
+    return format.replace(/DD|MM|YYYY/g, match => map[match]);
+}
+function toOutputFormat(date) {
+    const pad = (n) => n.toString().padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function isValidDate(date) {
+    return date instanceof Date && !isNaN(date.getTime());
+}
+function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+function isDateInRange(date, minDate, maxDate) {
+    const min = minDate ? cleanDate$2(minDate) : null;
+    const max = maxDate ? cleanDate$2(maxDate) : null;
+    return (!min || date >= min) && (!max || date <= max);
+}
+function clampDate(date, minDate, maxDate) {
+    const min = minDate ? cleanDate$2(minDate) : null;
+    const max = maxDate ? cleanDate$2(maxDate) : null;
+    if (min && date < min)
+        return new Date(min);
+    if (max && date > max)
+        return new Date(max);
+    return date;
+}
+function getRangeErrorMessage(date, minDate, maxDate) {
+    const min = minDate ? cleanDate$2(minDate) : null;
+    const max = maxDate ? cleanDate$2(maxDate) : null;
+    if (min && date < min)
+        return 'Дата меньше минимальной';
+    if (max && date > max)
+        return 'Дата больше максимальной';
+    return '';
+}
+function parseInputDate(dateStr) {
+    if (dateStr) {
+        const [year, month, day] = dateStr.split('-').map(Number);
+        const date = new Date(year, month - 1, day);
+        return isValidDate(date) ? date : null;
+    }
+    else {
+        return null;
+    }
+}
+function adjustInvalidDate(year, month, day) {
+    const maxDays = getDaysInMonth(year, month);
+    if (day > maxDays) {
+        month += 1;
+        if (month > 11) {
+            month = 0;
+            year += 1;
+        }
+        day = 1;
+    }
+    year = Math.min(Math.max(year, 1900), 9999);
+    month = Math.min(Math.max(month, 0), 11);
+    return { year, month, day };
+}
+const cleanDate$2 = (date) => {
+    return new Date(new Date(date).setHours(0, 0, 0, 0));
+};
+
+class DateCalendarComponent {
+    _detector;
+    selectedDate = null;
+    dateSelected = new EventEmitter();
+    close = new EventEmitter();
+    currentMonth = new Date().getMonth();
+    currentYear = new Date().getFullYear();
+    view = 'days';
+    monthNames = [
+        'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
+        'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
+    ];
+    daysOfWeek = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+    months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+    _minDate = null;
+    _maxDate = null;
+    _minDateStr = null;
+    _maxDateStr = null;
+    calendarDaysCache = null;
+    constructor(_detector) {
+        this._detector = _detector;
+    }
+    ngOnInit() {
+        if (this.selectedDate) {
+            this.currentMonth = this.selectedDate.getMonth();
+            this.currentYear = this.selectedDate.getFullYear();
+        }
+        this.updateDateBounds();
+    }
+    set minDate(value) {
+        if (this._minDateStr !== value) {
+            this._minDateStr = value;
+            this.updateDateBounds();
+            this._detector.markForCheck();
+        }
+    }
+    get minDate() {
+        return this._minDateStr;
+    }
+    set maxDate(value) {
+        if (this._maxDateStr !== value) {
+            this._maxDateStr = value;
+            this.updateDateBounds();
+            this._detector.markForCheck();
+        }
+    }
+    get maxDate() {
+        return this._maxDateStr;
+    }
+    updateDateBounds() {
+        this._minDate = this._minDateStr ? cleanDate$2(this._minDateStr) : null;
+        this._maxDate = this._maxDateStr ? cleanDate$2(this._maxDateStr) : null;
+    }
+    get headerText() {
+        switch (this.view) {
+            case 'days':
+                return `${this.monthNames[this.currentMonth]} ${this.currentYear}`;
+            case 'months':
+                return `${this.currentYear}`;
+            default:
+                return 'Выберите год';
+        }
+    }
+    switchView() {
+        this.view = this.view === 'days' ? 'months' : this.view === 'months' ? 'years' : 'days';
+        this._detector.markForCheck();
+    }
+    getCalendarDays() {
+        if (this.calendarDaysCache?.month === this.currentMonth && this.calendarDaysCache?.year === this.currentYear) {
+            return this.calendarDaysCache.days;
+        }
+        const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
+        const prevMonthDays = new Date(this.currentYear, this.currentMonth, 0).getDate();
+        const days = [];
+        const prevDaysCount = 2;
+        const prevMonth = this.currentMonth === 0 ? 11 : this.currentMonth - 1;
+        const prevYear = this.currentMonth === 0 ? this.currentYear - 1 : this.currentYear;
+        const nextMonth = this.currentMonth === 11 ? 0 : this.currentMonth + 1;
+        const nextYear = this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
+        for (let i = 0; i < prevDaysCount; i++) {
+            days.push({ day: prevMonthDays - prevDaysCount + 1 + i, month: prevMonth, year: prevYear });
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push({ day: i, month: this.currentMonth, year: this.currentYear });
+        }
+        const remainingDays = 35 - days.length;
+        for (let i = 1; i <= remainingDays; i++) {
+            days.push({ day: i, month: nextMonth, year: nextYear });
+        }
+        this.calendarDaysCache = { month: this.currentMonth, year: this.currentYear, days };
+        return days;
+    }
+    getYears() {
+        const centerYear = this.selectedDate?.getFullYear() ?? this.currentYear;
+        const startYear = centerYear - 5;
+        return Array.from({ length: 12 }, (_, i) => startYear + i);
+    }
+    isSelected(day) {
+        if (!this.selectedDate)
+            return false;
+        return (day.day === this.selectedDate.getDate() &&
+            day.month === this.selectedDate.getMonth() &&
+            day.year === this.selectedDate.getFullYear());
+    }
+    isMonthSelected(month) {
+        return this.selectedDate?.getMonth() === month && this.selectedDate?.getFullYear() === this.currentYear;
+    }
+    isYearSelected(year) {
+        return this.selectedDate?.getFullYear() === year;
+    }
+    isDateEnabled(day) {
+        const date = new Date(day.year, day.month, day.day);
+        return ((!this._minDate || date >= this._minDate) &&
+            (!this._maxDate || date <= this._maxDate));
+    }
+    isMonthDisabled(month) {
+        if (!this._minDate && !this._maxDate)
+            return false;
+        const startOfMonth = new Date(this.currentYear, month, 1);
+        const endOfMonth = new Date(this.currentYear, month + 1, 0);
+        return ((!!this._minDate && !isNaN(this._minDate.getTime()) && endOfMonth < this._minDate) ||
+            (!!this._maxDate && !isNaN(this._maxDate.getTime()) && startOfMonth > this._maxDate));
+    }
+    isYearDisabled(year) {
+        if (!this._minDate && !this._maxDate)
+            return false;
+        const minYear = this._minDate && !isNaN(this._minDate.getTime()) ? this._minDate.getFullYear() : null;
+        const maxYear = this._maxDate && !isNaN(this._maxDate.getTime()) ? this._maxDate.getFullYear() : null;
+        return (minYear !== null && year < minYear) || (maxYear !== null && year > maxYear);
+    }
+    selectDate(day) {
+        if (!this.isDateEnabled(day))
+            return;
+        const date = new Date(day.year, day.month, day.day);
+        this.dateSelected.emit(date);
+        const needsUpdate = day.month !== this.currentMonth || day.year !== this.currentYear;
+        if (needsUpdate) {
+            setTimeout(() => {
+                this.currentMonth = day.month;
+                this.currentYear = day.year;
+                this._detector.markForCheck();
+            });
+        }
+    }
+    selectMonth(month) {
+        if (this.isMonthDisabled(month))
+            return;
+        setTimeout(() => {
+            this.currentMonth = month;
+            this.view = 'days';
+            this._detector.markForCheck();
+        });
+    }
+    selectYear(year) {
+        if (this.isYearDisabled(year))
+            return;
+        setTimeout(() => {
+            this.currentYear = year;
+            this.view = 'months';
+            this._detector.markForCheck();
+        });
+    }
+    changeMonth(offset) {
+        let newMonth = this.currentMonth + offset;
+        let newYear = this.currentYear;
+        if (newMonth < 0) {
+            newMonth = 11;
+            newYear--;
+        }
+        else if (newMonth > 11) {
+            newMonth = 0;
+            newYear++;
+        }
+        this.currentMonth = newMonth;
+        this.currentYear = newYear;
+        this._detector.markForCheck();
+    }
+    changeYearRange(offset) {
+        this.currentYear += offset * 12;
+        this._detector.markForCheck();
+    }
+    isPreviousMonthDisabled() {
+        if (!this._minDate)
+            return false;
+        return new Date(this.currentYear, this.currentMonth, 0) < this._minDate;
+    }
+    isNextMonthDisabled() {
+        if (!this._maxDate)
+            return false;
+        return new Date(this.currentYear, this.currentMonth + 1, 1) > this._maxDate;
+    }
+    isPreviousYearRangeDisabled() {
+        if (!this._minDate)
+            return false;
+        return this.getYears()[0] <= this._minDate.getFullYear();
+    }
+    isNextYearRangeDisabled() {
+        if (!this._maxDate)
+            return false;
+        return this.getYears()[this.getYears().length - 1] >= this._maxDate.getFullYear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateCalendarComponent, selector: "mrx-date-calendar", inputs: { selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateSelected: "dateSelected", close: "close" }, ngImport: i0, template: "<div class=\"calendar\">\r\n  <div class=\"calendar-header\">\r\n    @if (view === 'days') {\r\n      <button class=\"nav-button\" (click)=\"changeMonth(-1)\" [disabled]=\"isPreviousMonthDisabled()\">\r\n        \u276E\r\n      </button>\r\n    }\r\n\r\n    @if (view === 'years') {\r\n      <button class=\"nav-button\" (click)=\"changeYearRange(-1)\" [disabled]=\"isPreviousYearRangeDisabled()\">\r\n        \u276E\r\n      </button>\r\n    }\r\n\r\n    <button class=\"header-button\" (click)=\"switchView()\">\r\n      {{ headerText }}\r\n    </button>\r\n\r\n    @if (view === 'days') {\r\n      <button class=\"nav-button\" (click)=\"changeMonth(1)\" [disabled]=\"isNextMonthDisabled()\">\r\n        \u276F\r\n      </button>\r\n    }\r\n\r\n    @if (view === 'years') {\r\n      <button class=\"nav-button\" (click)=\"changeYearRange(1)\" [disabled]=\"isNextYearRangeDisabled()\">\r\n        \u276F\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @switch (view) {\r\n    @case ('years') {\r\n      <div class=\"year-grid\">\r\n        @for (year of getYears(); track year) {\r\n          <div\r\n            class=\"year\"\r\n            [class.selected]=\"isYearSelected(year)\"\r\n            [class.disabled]=\"isYearDisabled(year)\"\r\n            [class.hoverable]=\"!isYearDisabled(year)\"\r\n            (click)=\"selectYear(year)\"\r\n          >\r\n            {{ year }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('months') {\r\n      <div class=\"month-grid\">\r\n        @for (month of months; track month) {\r\n          <div\r\n            class=\"month\"\r\n            [class.selected]=\"isMonthSelected(month)\"\r\n            [class.disabled]=\"isMonthDisabled(month)\"\r\n            [class.hoverable]=\"!isMonthDisabled(month)\"\r\n            (click)=\"selectMonth(month)\"\r\n          >\r\n            {{ monthNames[month] }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @default {\r\n      <div class=\"calendar-grid\">\r\n        @for (day of daysOfWeek; track day) {\r\n          <div class=\"day-header\">{{ day }}</div>\r\n        }\r\n\r\n        @for (day of getCalendarDays(); track day) {\r\n          <div\r\n            class=\"day\"\r\n            [class.selected]=\"isSelected(day)\"\r\n            [class.other-month]=\"day.month !== currentMonth\"\r\n            [class.disabled]=\"!isDateEnabled(day)\"\r\n            [class.hoverable]=\"isDateEnabled(day)\"\r\n            (click)=\"selectDate(day)\"\r\n          >\r\n            {{ day.day }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".calendar{width:280px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:16px;font-family:Arial,sans-serif}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}.header-button{background:none;border:none;font-weight:600;font-size:16px;color:#1f2937;cursor:pointer;padding:4px 8px;text-align:center;flex-grow:1}.header-button:hover{background:#f3f4f6;border-radius:4px}.nav-button{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;color:#374151}.nav-button:disabled{cursor:not-allowed;opacity:.5}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;max-height:190px;overflow-y:auto}.day-header{font-size:12px;font-weight:500;color:#6b7280;padding:4px}.day,.month,.year{padding:8px;font-size:14px;border-radius:4px;color:#374151}.day.hoverable,.month.hoverable,.year.hoverable{cursor:pointer}.day.hoverable:hover,.month.hoverable:hover,.year.hoverable:hover{background:#f3f4f6}.day.selected,.month.selected,.year.selected{background:#3b82f6;color:#fff}.day.other-month,.month.other-month,.year.other-month{color:#9ca3af}.day.disabled,.month.disabled,.year.disabled{color:#d1d5db;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mrx-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar\">\r\n  <div class=\"calendar-header\">\r\n    @if (view === 'days') {\r\n      <button class=\"nav-button\" (click)=\"changeMonth(-1)\" [disabled]=\"isPreviousMonthDisabled()\">\r\n        \u276E\r\n      </button>\r\n    }\r\n\r\n    @if (view === 'years') {\r\n      <button class=\"nav-button\" (click)=\"changeYearRange(-1)\" [disabled]=\"isPreviousYearRangeDisabled()\">\r\n        \u276E\r\n      </button>\r\n    }\r\n\r\n    <button class=\"header-button\" (click)=\"switchView()\">\r\n      {{ headerText }}\r\n    </button>\r\n\r\n    @if (view === 'days') {\r\n      <button class=\"nav-button\" (click)=\"changeMonth(1)\" [disabled]=\"isNextMonthDisabled()\">\r\n        \u276F\r\n      </button>\r\n    }\r\n\r\n    @if (view === 'years') {\r\n      <button class=\"nav-button\" (click)=\"changeYearRange(1)\" [disabled]=\"isNextYearRangeDisabled()\">\r\n        \u276F\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @switch (view) {\r\n    @case ('years') {\r\n      <div class=\"year-grid\">\r\n        @for (year of getYears(); track year) {\r\n          <div\r\n            class=\"year\"\r\n            [class.selected]=\"isYearSelected(year)\"\r\n            [class.disabled]=\"isYearDisabled(year)\"\r\n            [class.hoverable]=\"!isYearDisabled(year)\"\r\n            (click)=\"selectYear(year)\"\r\n          >\r\n            {{ year }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('months') {\r\n      <div class=\"month-grid\">\r\n        @for (month of months; track month) {\r\n          <div\r\n            class=\"month\"\r\n            [class.selected]=\"isMonthSelected(month)\"\r\n            [class.disabled]=\"isMonthDisabled(month)\"\r\n            [class.hoverable]=\"!isMonthDisabled(month)\"\r\n            (click)=\"selectMonth(month)\"\r\n          >\r\n            {{ monthNames[month] }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @default {\r\n      <div class=\"calendar-grid\">\r\n        @for (day of daysOfWeek; track day) {\r\n          <div class=\"day-header\">{{ day }}</div>\r\n        }\r\n\r\n        @for (day of getCalendarDays(); track day) {\r\n          <div\r\n            class=\"day\"\r\n            [class.selected]=\"isSelected(day)\"\r\n            [class.other-month]=\"day.month !== currentMonth\"\r\n            [class.disabled]=\"!isDateEnabled(day)\"\r\n            [class.hoverable]=\"isDateEnabled(day)\"\r\n            (click)=\"selectDate(day)\"\r\n          >\r\n            {{ day.day }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".calendar{width:280px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:16px;font-family:Arial,sans-serif}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}.header-button{background:none;border:none;font-weight:600;font-size:16px;color:#1f2937;cursor:pointer;padding:4px 8px;text-align:center;flex-grow:1}.header-button:hover{background:#f3f4f6;border-radius:4px}.nav-button{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;color:#374151}.nav-button:disabled{cursor:not-allowed;opacity:.5}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;max-height:190px;overflow-y:auto}.day-header{font-size:12px;font-weight:500;color:#6b7280;padding:4px}.day,.month,.year{padding:8px;font-size:14px;border-radius:4px;color:#374151}.day.hoverable,.month.hoverable,.year.hoverable{cursor:pointer}.day.hoverable:hover,.month.hoverable:hover,.year.hoverable:hover{background:#f3f4f6}.day.selected,.month.selected,.year.selected{background:#3b82f6;color:#fff}.day.other-month,.month.other-month,.year.other-month{color:#9ca3af}.day.disabled,.month.disabled,.year.disabled{color:#d1d5db;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedDate: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }] } });
+
 var InputDateSizesEnum$1;
 (function (InputDateSizesEnum) {
     InputDateSizesEnum["small"] = "mrx-input-date-sm";
@@ -9547,6 +9843,332 @@ var InputDateSizesEnum$1;
     InputDateSizesEnum["large"] = "mrx-input-date-lg";
 })(InputDateSizesEnum$1 || (InputDateSizesEnum$1 = {}));
 
+class InputDateComponent {
+    _overlay;
+    _detector;
+    _elementRef;
+    _clickSubscription;
+    _overlayRef = null;
+    displayValue = '';
+    selectedDate = null;
+    mask = '';
+    errorMessage = null;
+    // SAVE STATE
+    uuid = v4();
+    fields = [];
+    format = 'DD.MM.YYYY';
+    minDate = null;
+    maxDate = null;
+    isSilentValidation = true;
+    isManualInput = true;
+    closeAfterSelect = true;
+    required = false;
+    size = 'large';
+    customClasses = '';
+    disabled = false;
+    readonly = false;
+    placeholder = 'дд.мм.гггг';
+    popupPosition = 'bottom-start';
+    invalid = false;
+    invalidMessage = '';
+    checkInvalid = null;
+    changed = new EventEmitter();
+    modelChange = new EventEmitter();
+    blurred = new EventEmitter();
+    dateInput;
+    onChange = () => {
+    };
+    onTouched = () => {
+    };
+    constructor(_overlay, _detector, _elementRef) {
+        this._overlay = _overlay;
+        this._detector = _detector;
+        this._elementRef = _elementRef;
+    }
+    ngOnInit() {
+        this.mask = this.format.replace(/[DMY]/g, '0');
+    }
+    ngOnDestroy() {
+        this._clickSubscription.unsubscribe();
+    }
+    get checkValidClasses() {
+        if (!this.required) {
+            return '';
+        }
+        else {
+            return this.checkInvalid === false ? 'mrx-input-checked-success' : this.checkInvalid === true ? 'mrx-input-checked-error' : '';
+        }
+    }
+    get getClasses() {
+        return `${InputDateSizesEnum$1[this.size]} ${this.customClasses} ${this.checkValidClasses}`;
+    }
+    get isViewCleanIcon() {
+        return !!this.dateInput?.nativeElement.value;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    set value(value) {
+        const date = parseInputDate(value);
+        if (date && isDateInRange(date, this.minDate, this.maxDate)) {
+            this.selectedDate = date;
+            this.displayValue = formatDate(date, this.format);
+            this.errorMessage = null;
+            this.updateValue(value);
+        }
+        else if (this.isSilentValidation && date) {
+            const clampedDate = clampDate(date, this.minDate, this.maxDate);
+            this.selectedDate = clampedDate;
+            this.displayValue = formatDate(clampedDate, this.format);
+            this.errorMessage = null;
+            const clampedValue = toOutputFormat(clampedDate);
+            this.updateValue(clampedValue);
+        }
+        else {
+            this.selectedDate = null;
+            this.displayValue = date ? formatDate(date, this.format) : '';
+            this.errorMessage = date ? getRangeErrorMessage(date, this.minDate, this.maxDate) : null;
+        }
+    }
+    onInput(event) {
+        const inputElement = event.target;
+        const inputValue = inputElement.value;
+        this.processInput(inputValue);
+    }
+    processInput(inputValue) {
+        this.displayValue = inputValue;
+        this.errorMessage = null;
+        if (inputValue.length === this.format.length) {
+            const separator = this.format.match(/[^DMY]/)?.[0] || '.';
+            const regex = new RegExp(`^(\\d{2})${separator}(\\d{2})${separator}(\\d{4})$`);
+            const match = inputValue.match(regex);
+            if (!match)
+                return;
+            let day, month, year;
+            if (this.format.startsWith('DD')) {
+                [day, month, year] = [match[1], match[2], match[3]].map(Number);
+            }
+            else if (this.format.startsWith('MM')) {
+                [month, day, year] = [match[1], match[2], match[3]].map(Number);
+            }
+            else {
+                [year, month, day] = [match[1], match[2], match[3]].map(Number);
+            }
+            month -= 1;
+            let date = new Date(year, month, day);
+            if (isValidDate(date) && isDateInRange(date, this.minDate, this.maxDate)) {
+                this.selectedDate = date;
+                this.value = toOutputFormat(date);
+            }
+            else {
+                const { year: adjYear, month: adjMonth, day: adjDay } = adjustInvalidDate(year, month, day);
+                date = new Date(adjYear, adjMonth, adjDay);
+                if (isDateInRange(date, this.minDate, this.maxDate)) {
+                    this.selectedDate = date;
+                    this.displayValue = formatDate(date, this.format);
+                    this.value = toOutputFormat(date);
+                }
+                else if (this.isSilentValidation) {
+                    const clampedDate = clampDate(date, this.minDate, this.maxDate);
+                    this.selectedDate = clampedDate;
+                    this.displayValue = formatDate(clampedDate, this.format);
+                    this.value = toOutputFormat(clampedDate);
+                }
+                else {
+                    this.selectedDate = null;
+                    this.errorMessage = getRangeErrorMessage(date, this.minDate, this.maxDate);
+                }
+            }
+        }
+    }
+    onBlur() {
+        this.onTouched();
+        if (this.displayValue.length > 0 && this.displayValue.length < this.format.length) {
+            this.displayValue = '';
+            this.selectedDate = null;
+            this.value = '';
+            this.errorMessage = null;
+        }
+    }
+    openCalendar() {
+        if (this.disabled || this._overlayRef)
+            return;
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this.dateInput)
+            .withPositions(PositionStrategyEnum[this.popupPosition]);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            hasBackdrop: false
+        });
+        const portal = new ComponentPortal(DateCalendarComponent);
+        const componentRef = this._overlayRef.attach(portal);
+        componentRef.instance.selectedDate = this.selectedDate;
+        componentRef.instance.minDate = this.minDate;
+        componentRef.instance.maxDate = this.maxDate;
+        componentRef.instance.dateSelected.subscribe((date) => this.onDateSelected(date));
+        componentRef.instance.close.subscribe(() => this.closeCalendar());
+        this._clickSubscription = fromEvent(document, 'click')
+            .pipe(filter((event) => {
+            const clickTarget = event.target;
+            return (!!this._overlayRef &&
+                !this._overlayRef.overlayElement.contains(clickTarget) &&
+                !this._elementRef.nativeElement.contains(clickTarget));
+        }))
+            .subscribe(() => this.closeCalendar());
+    }
+    onDateSelected(date) {
+        const clampedDate = clampDate(date, this.minDate, this.maxDate);
+        this.selectedDate = clampedDate;
+        this.displayValue = formatDate(clampedDate, this.format);
+        this.value = toOutputFormat(clampedDate);
+        this.errorMessage = null;
+        if (this.closeAfterSelect) {
+            this.closeCalendar();
+        }
+        this._detector.detectChanges();
+    }
+    closeCalendar() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this.errorMessage = null;
+    }
+    clickToIconCalendar() {
+        this.openCalendar();
+    }
+    clickToIconClear() {
+        this.value = '';
+        this.closeCalendar();
+        this.updateValue('');
+    }
+    updateValue(insideValue) {
+        this.changed.emit(insideValue);
+        this.modelChange.emit({ value: insideValue, id: this.uuid });
+        this.onChange(insideValue);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputDateComponent, selector: "mrx-input-date", inputs: { fields: "fields", format: "format", minDate: "minDate", maxDate: "maxDate", isSilentValidation: "isSilentValidation", isManualInput: "isManualInput", closeAfterSelect: "closeAfterSelect", required: "required", size: "size", customClasses: "customClasses", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", popupPosition: "popupPosition", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputDateComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-date\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-readonly]=\"readonly\"\r\n  [class]=\"getClasses\"\r\n>\r\n  <div class=\"mrx-input-date__wrapper\">\r\n    <input\r\n      #dateInput\r\n      type=\"text\"\r\n      autocomplete=\"nope\"\r\n      class=\"mrx-input-date__input mrx-input-date__date\"\r\n      [ngModel]=\"displayValue\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"!isManualInput\"\r\n      [mask]=\"mask\"\r\n      [leadZeroDateTime]=\"true\"\r\n      [dropSpecialCharacters]=\"false\"\r\n      [placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n\r\n    @if (!disabled) {\r\n      <div class=\"mrx-input-date__icons\">\r\n        @if (isViewCleanIcon) {\r\n          <span\r\n            class=\"mrx-icon icon-close\"\r\n            (click)=\"clickToIconClear()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        }\r\n\r\n        <span\r\n          class=\"mrx-icon icon-calendar\"\r\n          (click)=\"clickToIconCalendar()\"\r\n          [class.icon-font-16]=\"size === 'small'\"\r\n          [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (invalid) {\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  } @else {\r\n    @if (errorMessage) {\r\n      <mrx-error-message [invalidMessage]=\"errorMessage\"></mrx-error-message>\r\n    }\r\n  }\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"], dependencies: [{ kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mrx-input-date', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputDateComponent),
+                            multi: true
+                        }
+                    ], template: "<div\r\n  class=\"mrx-input-date\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-readonly]=\"readonly\"\r\n  [class]=\"getClasses\"\r\n>\r\n  <div class=\"mrx-input-date__wrapper\">\r\n    <input\r\n      #dateInput\r\n      type=\"text\"\r\n      autocomplete=\"nope\"\r\n      class=\"mrx-input-date__input mrx-input-date__date\"\r\n      [ngModel]=\"displayValue\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"!isManualInput\"\r\n      [mask]=\"mask\"\r\n      [leadZeroDateTime]=\"true\"\r\n      [dropSpecialCharacters]=\"false\"\r\n      [placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n\r\n    @if (!disabled) {\r\n      <div class=\"mrx-input-date__icons\">\r\n        @if (isViewCleanIcon) {\r\n          <span\r\n            class=\"mrx-icon icon-close\"\r\n            (click)=\"clickToIconClear()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        }\r\n\r\n        <span\r\n          class=\"mrx-icon icon-calendar\"\r\n          (click)=\"clickToIconCalendar()\"\r\n          [class.icon-font-16]=\"size === 'small'\"\r\n          [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (invalid) {\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  } @else {\r\n    @if (errorMessage) {\r\n      <mrx-error-message [invalidMessage]=\"errorMessage\"></mrx-error-message>\r\n    }\r\n  }\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { fields: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], isSilentValidation: [{
+                type: Input
+            }], isManualInput: [{
+                type: Input
+            }], closeAfterSelect: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], customClasses: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], popupPosition: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidMessage: [{
+                type: Input
+            }], checkInvalid: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }], modelChange: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }], dateInput: [{
+                type: ViewChild,
+                args: ['dateInput']
+            }] } });
+
+class InputDateModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InputDateModule, declarations: [InputDateComponent,
+            DateCalendarComponent], imports: [CommonModule,
+            NgxMaskDirective,
+            FormsModule,
+            ErrorMessageModule,
+            LabelModule,
+            SaveStateModule], exports: [InputDateComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateModule, providers: [
+            provideNgxMask(),
+        ], imports: [CommonModule,
+            FormsModule,
+            ErrorMessageModule,
+            LabelModule,
+            SaveStateModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        InputDateComponent,
+                        DateCalendarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgxMaskDirective,
+                        FormsModule,
+                        ErrorMessageModule,
+                        LabelModule,
+                        SaveStateModule
+                    ],
+                    exports: [
+                        InputDateComponent
+                    ],
+                    providers: [
+                        provideNgxMask(),
+                    ]
+                }]
+        }] });
+
+var InputDateTimeSizesEnum;
+(function (InputDateTimeSizesEnum) {
+    InputDateTimeSizesEnum["small"] = "mrx-input-date-sm";
+    InputDateTimeSizesEnum["medium"] = "mrx-input-date-md";
+    InputDateTimeSizesEnum["large"] = "mrx-input-date-lg";
+})(InputDateTimeSizesEnum || (InputDateTimeSizesEnum = {}));
+
 dayjs.extend(customParseFormat);
 const validateDateModel = (value) => {
     const splitDateAndTime = value.split(' ');
@@ -9852,7 +10474,7 @@ class InputDateTimeComponent {
         return `${this.dateModel.view}${this.timeModel.view ? ' ' + this.timeModel.view : ''}`;
     }
     get getClasses() {
-        return `${InputDateSizesEnum$1[this.size]} ${this.customClasses} ${this.checkValidClasses}`;
+        return `${InputDateTimeSizesEnum[this.size]} ${this.customClasses} ${this.checkValidClasses}`;
     }
     get isValidModels() {
         return !this.dateModel.invalid && (this.timepicker ? !this.timeModel.invalid : true);
@@ -10494,13 +11116,13 @@ class InputTimepickerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputTimepickerComponent, selector: "mrx-input-timepicker", inputs: { fields: "fields", size: "size", format: "format", customClasses: "customClasses", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", minValue: "minValue", maxValue: "maxValue", inline: "inline", closable: "closable", leadZeroDateTime: "leadZeroDateTime", mask: "mask", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputTimepickerComponent), multi: true }
-        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"mrx-input-date\"\r\n    [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n    [class.mrx-input-readonly]=\"readonly\"\r\n    [class]=\"getClasses\"\r\n>\r\n  <div class=\"\">\r\n    <div class=\"mrx-input-date__wrapper\">\r\n      <input\r\n          #dateInput\r\n          type=\"text\"\r\n          autocomplete=\"nope\"\r\n          class=\"mrx-input-date__input mrx-input-date__date\"\r\n          [placeholder]=\"placeholder\"\r\n          [ngModel]=\"getDateValue\"\r\n          [mask]=\"mask\"\r\n          [leadZeroDateTime]=\"true\"\r\n          [validation]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          (input)=\"updateDateValue(dateInput)\"\r\n          (click)=\"clickToInput(dateInput)\"\r\n      />\r\n      <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n          <span\r\n              class=\"mrx-icon icon-close\"\r\n              *ngIf=\"isViewCleanIcon\"\r\n              (click)=\"clickToIconClear()\"\r\n              [class.icon-font-16]=\"size === 'small'\"\r\n              [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        <span\r\n            class=\"mrx-icon icon-calendar\"\r\n            (click)=\"clickToIconCalendar()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <mrx-error-message\r\n        *ngIf=\"invalid; else innerInvalidTemplate\"\r\n        [invalidMessage]=\"invalidMessage\"\r\n    ></mrx-error-message>\r\n\r\n  <ng-template #innerInvalidTemplate>\r\n    <mrx-error-message\r\n        *ngIf=\"innerInvalid\"\r\n        [invalidMessage]=\"innerInvalidMessage\"\r\n    ></mrx-error-message>\r\n  </ng-template>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
+        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"mrx-input-date\"\r\n    [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n    [class.mrx-input-readonly]=\"readonly\"\r\n    [class]=\"getClasses\"\r\n>\r\n  <div class=\"\">\r\n    <div class=\"mrx-input-date__wrapper\">\r\n      <input\r\n          #dateInput\r\n          type=\"text\"\r\n          autocomplete=\"nope\"\r\n          class=\"mrx-input-date__input mrx-input-date__date\"\r\n          [placeholder]=\"placeholder\"\r\n          [ngModel]=\"getDateValue\"\r\n          [mask]=\"mask\"\r\n          [leadZeroDateTime]=\"true\"\r\n          [validation]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          (input)=\"updateDateValue(dateInput)\"\r\n          (click)=\"clickToInput(dateInput)\"\r\n      />\r\n      <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n          <span\r\n              class=\"mrx-icon icon-close\"\r\n              *ngIf=\"isViewCleanIcon\"\r\n              (click)=\"clickToIconClear()\"\r\n              [class.icon-font-16]=\"size === 'small'\"\r\n              [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        <span\r\n            class=\"mrx-icon icon-calendar\"\r\n            (click)=\"clickToIconCalendar()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <mrx-error-message\r\n        *ngIf=\"invalid; else innerInvalidTemplate\"\r\n        [invalidMessage]=\"invalidMessage\"\r\n    ></mrx-error-message>\r\n\r\n  <ng-template #innerInvalidTemplate>\r\n    <mrx-error-message\r\n        *ngIf=\"innerInvalid\"\r\n        [invalidMessage]=\"innerInvalidMessage\"\r\n    ></mrx-error-message>\r\n  </ng-template>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-timepicker', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputTimepickerComponent), multi: true }
-                    ], template: "<div\r\n    class=\"mrx-input-date\"\r\n    [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n    [class.mrx-input-readonly]=\"readonly\"\r\n    [class]=\"getClasses\"\r\n>\r\n  <div class=\"\">\r\n    <div class=\"mrx-input-date__wrapper\">\r\n      <input\r\n          #dateInput\r\n          type=\"text\"\r\n          autocomplete=\"nope\"\r\n          class=\"mrx-input-date__input mrx-input-date__date\"\r\n          [placeholder]=\"placeholder\"\r\n          [ngModel]=\"getDateValue\"\r\n          [mask]=\"mask\"\r\n          [leadZeroDateTime]=\"true\"\r\n          [validation]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          (input)=\"updateDateValue(dateInput)\"\r\n          (click)=\"clickToInput(dateInput)\"\r\n      />\r\n      <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n          <span\r\n              class=\"mrx-icon icon-close\"\r\n              *ngIf=\"isViewCleanIcon\"\r\n              (click)=\"clickToIconClear()\"\r\n              [class.icon-font-16]=\"size === 'small'\"\r\n              [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        <span\r\n            class=\"mrx-icon icon-calendar\"\r\n            (click)=\"clickToIconCalendar()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <mrx-error-message\r\n        *ngIf=\"invalid; else innerInvalidTemplate\"\r\n        [invalidMessage]=\"invalidMessage\"\r\n    ></mrx-error-message>\r\n\r\n  <ng-template #innerInvalidTemplate>\r\n    <mrx-error-message\r\n        *ngIf=\"innerInvalid\"\r\n        [invalidMessage]=\"innerInvalidMessage\"\r\n    ></mrx-error-message>\r\n  </ng-template>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n" }]
+                    ], template: "<div\r\n    class=\"mrx-input-date\"\r\n    [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n    [class.mrx-input-readonly]=\"readonly\"\r\n    [class]=\"getClasses\"\r\n>\r\n  <div class=\"\">\r\n    <div class=\"mrx-input-date__wrapper\">\r\n      <input\r\n          #dateInput\r\n          type=\"text\"\r\n          autocomplete=\"nope\"\r\n          class=\"mrx-input-date__input mrx-input-date__date\"\r\n          [placeholder]=\"placeholder\"\r\n          [ngModel]=\"getDateValue\"\r\n          [mask]=\"mask\"\r\n          [leadZeroDateTime]=\"true\"\r\n          [validation]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          (input)=\"updateDateValue(dateInput)\"\r\n          (click)=\"clickToInput(dateInput)\"\r\n      />\r\n      <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n          <span\r\n              class=\"mrx-icon icon-close\"\r\n              *ngIf=\"isViewCleanIcon\"\r\n              (click)=\"clickToIconClear()\"\r\n              [class.icon-font-16]=\"size === 'small'\"\r\n              [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        <span\r\n            class=\"mrx-icon icon-calendar\"\r\n            (click)=\"clickToIconCalendar()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <mrx-error-message\r\n        *ngIf=\"invalid; else innerInvalidTemplate\"\r\n        [invalidMessage]=\"invalidMessage\"\r\n    ></mrx-error-message>\r\n\r\n  <ng-template #innerInvalidTemplate>\r\n    <mrx-error-message\r\n        *ngIf=\"innerInvalid\"\r\n        [invalidMessage]=\"innerInvalidMessage\"\r\n    ></mrx-error-message>\r\n  </ng-template>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fields: [{
                 type: Input
             }], size: [{
@@ -18425,7 +19047,7 @@ const countryData = [
         CountriesISO.Uzbekistan,
         '998',
         0,
-        [],
+        ['69'],
         CountriesRusLabel[CountriesISO.Uzbekistan]
     ],
     [
@@ -19404,5 +20026,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertColorClasses, AlertComponent, AlertIconClasses, AlertModule, AutoSaveStore, BadgeColorClassesEnum, BadgeComponent, BadgeGroupComponent, BadgeSizeEnum, BadgeTagTypeClassesEnum, BadgeTargetTypesEnum, BadgeTypeEnum, BadgesModule, BreadcrumbsComponent, BreadcrumbsModule, BreadcrumbsTypeEnum, ButtonColorsEnum, ButtonComponent, ButtonIconPositionEnum, ButtonModule, ButtonSizesEnum, ButtonTypesEnum, CdkTooltipDirective, CdkTooltipModule, CharsLeftComponent, CharsLeftModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, CodeEditorComponent, CodeEditorModule, CodeEditorOptions, ColumnComponent, ContentTitleWrapperComponent, ContentTitleWrapperModule, ContentWrapperComponent, ContentWrapperModule, ContentWrapperTypeEnum, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountriesISO, CountriesRusLabel, CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, FormulaEditorComponent, FormulaEditorModule, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateSizesEnum$1 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDatepickerComponent, InputDatepickerModule, InputDatepickerSizesEnum, InputEditorModeEnum, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTelSizesEnum, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, MODAL_CONFIG, MODAL_DATA, ModalAlignButtonsEnum, ModalBackdropTypeClasses, ModalColorEnum, ModalComponent, ModalModule, ModalRef, ModalService, ModalServiceComponent, ModalServiceModule, ModalSizesEnum, ModalType, ModalTypeClasses, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PopupComponent, PopupItemComponent, PopupModule, PopupTriggerDirective, PositionEnum, PositionStrategyEnum, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SelectComponent, SelectModule, SelectSizeEnum, SidePageComponent, SidePageHeaderSizesEnum, SidePageModule, SidePagePositionEnum, SidePageSizesEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone$1 as Timezone, ToasterPosition, ToasterService, ToasterServiceModule, ToasterType, Tooltip, TooltipComponent, TooltipModule, TooltipService, TooltipTextPositionEnum, TooltipTriggerComponent, TooltipTriggerEnum, TruncateDirective, TruncateDirectiveModule, TruncateModule, TruncatePipe, TruncateTextComponent, TruncateTextModule, ValidationMethodsEnum, ValidationOptionsEnum, ValidationTypesEnum, WarningMessageComponent, WarningMessageModule, WidgetWrapperComponent, WidgetWrapperModule, convertBase64ToFile, countryData, dateTimeFormat, defaultConfig, defaultCustomConfig, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, innerListToList, sHashCode, sliceDate, toBytes, toDate, toNumberFormat, toastrDefaultConfig, wordForm };
+export { AlertColorClasses, AlertComponent, AlertIconClasses, AlertModule, AutoSaveStore, BadgeColorClassesEnum, BadgeComponent, BadgeGroupComponent, BadgeSizeEnum, BadgeTagTypeClassesEnum, BadgeTargetTypesEnum, BadgeTypeEnum, BadgesModule, BreadcrumbsComponent, BreadcrumbsModule, BreadcrumbsTypeEnum, ButtonColorsEnum, ButtonComponent, ButtonIconPositionEnum, ButtonModule, ButtonSizesEnum, ButtonTypesEnum, CdkTooltipDirective, CdkTooltipModule, CharsLeftComponent, CharsLeftModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, CodeEditorComponent, CodeEditorModule, CodeEditorOptions, ColumnComponent, ContentTitleWrapperComponent, ContentTitleWrapperModule, ContentWrapperComponent, ContentWrapperModule, ContentWrapperTypeEnum, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountriesISO, CountriesRusLabel, CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, FormulaEditorComponent, FormulaEditorModule, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateComponent, InputDateModule, InputDateTimeComponent, InputDateTimeModule, InputDateTimeSizesEnum, InputDatepickerComponent, InputDatepickerModule, InputDatepickerSizesEnum, InputEditorModeEnum, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTelSizesEnum, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, MODAL_CONFIG, MODAL_DATA, ModalAlignButtonsEnum, ModalBackdropTypeClasses, ModalColorEnum, ModalComponent, ModalModule, ModalRef, ModalService, ModalServiceComponent, ModalServiceModule, ModalSizesEnum, ModalType, ModalTypeClasses, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PopupComponent, PopupItemComponent, PopupModule, PopupTriggerDirective, PositionEnum, PositionStrategyEnum, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SelectComponent, SelectModule, SelectSizeEnum, SidePageComponent, SidePageHeaderSizesEnum, SidePageModule, SidePagePositionEnum, SidePageSizesEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone$1 as Timezone, ToasterPosition, ToasterService, ToasterServiceModule, ToasterType, Tooltip, TooltipComponent, TooltipModule, TooltipService, TooltipTextPositionEnum, TooltipTriggerComponent, TooltipTriggerEnum, TruncateDirective, TruncateDirectiveModule, TruncateModule, TruncatePipe, TruncateTextComponent, TruncateTextModule, ValidationMethodsEnum, ValidationOptionsEnum, ValidationTypesEnum, WarningMessageComponent, WarningMessageModule, WidgetWrapperComponent, WidgetWrapperModule, convertBase64ToFile, countryData, dateTimeFormat, defaultConfig, defaultCustomConfig, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, innerListToList, sHashCode, sliceDate, toBytes, toDate, toNumberFormat, toastrDefaultConfig, wordForm };
 //# sourceMappingURL=myrta-ui.mjs.map