myrta-ui 17.0.8 → 17.0.10

package/esm2022/lib/components/modal/modal.component.mjs

@@ -56,8 +56,8 @@ export class ModalComponent {
     onExpanding() {
         this.isEmbed = !this.isEmbed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isEmbed: "isEmbed", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n  <div class=\"mrx-modal-header\">\r\n    <div class=\"mrx-modal-title\" [innerHTML]=\"title\" [style]=\"{padding: expandable ? '0 56px' : '0 24px'}\"></div>\r\n\r\n    <span\r\n        *ngIf=\"expandable\"\r\n        class=\"mrx-icon icon-font-24\"\r\n        [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n        (click)=\"onExpanding()\"\r\n    ></span>\r\n    <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n  </div>\r\n\r\n  <div class=\"mrx-modal-body\">\r\n    <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n      <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n      <span>{{ backText }}</span>\r\n    </div>\r\n\r\n    <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n\r\n  <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n    <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n      <mrx-button\r\n          [customClasses]=\"'mr-3'\"\r\n          [type]=\"'secondary'\"\r\n          [color]=\"getButtonColor\"\r\n          [size]=\"'medium'\"\r\n          (click)=\"onClose()\"\r\n      >{{closeText}}</mrx-button>\r\n\r\n      <mrx-button\r\n          [type]=\"'primary'\"\r\n          [size]=\"'medium'\"\r\n          [color]=\"getButtonColor\"\r\n          [iconPosition]=\"iconPosition\"\r\n          [isLoading]=\"isLoading\"\r\n          (click)=\"onOk()\"\r\n      >{{okText}}</mrx-button>\r\n    </ng-container>\r\n\r\n    <ng-template #footerContentTemplate>\r\n      <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-modal>*{display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:0 24px 24px}.mrx-modal-header{padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size);text-align:center}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse{position:absolute;top:16px;right:48px;cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover{transform:scale(1.1)}.mrx-modal-header .icon-close{position:absolute;top:16px;right:16px;cursor:pointer}.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isEmbed: "isEmbed", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n  <div class=\"mrx-modal-header\">\r\n    <div class=\"mrx-modal-title\" [innerHTML]=\"title\" [style]=\"{padding: expandable ? '0 56px' : '0 24px'}\"></div>\r\n\r\n    <span\r\n        *ngIf=\"expandable\"\r\n        class=\"mrx-icon icon-font-24\"\r\n        [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n        (click)=\"onExpanding()\"\r\n    ></span>\r\n    <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n  </div>\r\n\r\n  <div class=\"mrx-modal-body\">\r\n    <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n      <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n      <span>{{ backText }}</span>\r\n    </div>\r\n\r\n    <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n\r\n  <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n    <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n      <mrx-button\r\n          [customClasses]=\"'mr-3'\"\r\n          [type]=\"'secondary'\"\r\n          [color]=\"getButtonColor\"\r\n          [size]=\"'medium'\"\r\n          (click)=\"onClose()\"\r\n      >{{closeText}}</mrx-button>\r\n\r\n      <mrx-button\r\n          [type]=\"'primary'\"\r\n          [size]=\"'medium'\"\r\n          [color]=\"getButtonColor\"\r\n          [iconPosition]=\"iconPosition\"\r\n          [isLoading]=\"isLoading\"\r\n          (click)=\"onOk()\"\r\n      >{{okText}}</mrx-button>\r\n    </ng-container>\r\n\r\n    <ng-template #footerContentTemplate>\r\n      <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-modal>*{display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:0 24px 24px}.mrx-modal-header{padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size);text-align:center}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse{position:absolute;top:16px;right:48px;cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover{transform:scale(1.1)}.mrx-modal-header .icon-close{position:absolute;top:16px;right:16px;cursor:pointer}.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }], animations: [
             trigger('animateExpand', [
                 state('open', style({
                     height: '100%',
@@ -74,7 +74,7 @@ export class ModalComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('animateExpand', [

package/esm2022/lib/components/modal/modal.module.mjs

@@ -4,11 +4,11 @@ import { ModalComponent } from './modal.component';
 import { ButtonModule } from "../button/button.module";
 import * as i0 from "@angular/core";
 export class ModalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule, ButtonModule], exports: [ModalComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ModalModule, imports: [CommonModule, ButtonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule, ButtonModule], exports: [ModalComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalModule, imports: [CommonModule, ButtonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ModalComponent],

package/esm2022/lib/components/pages-nav/pages-nav.component.mjs

@@ -11,10 +11,10 @@ export class PagesNavComponent {
     get getTarget() {
         return `${PagesNavEnum[this.target]}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PagesNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PagesNavComponent, selector: "mrx-pages-nav", inputs: { prevLink: "prevLink", prevText: "prevText", nextLink: "nextLink", nextText: "nextText", target: "target" }, ngImport: i0, template: "<div *ngIf=\"prevLink || nextLink\" class=\"mrx-pages-nav\">\r\n  <a\r\n    *ngIf=\"prevLink\"\r\n    [href]=\"prevLink\"\r\n    [target]=\"getTarget\"\r\n    class=\"mrx-pages-nav__left\"\r\n  >\r\n    <div class=\"mrx-icon icon-font-24 icon-chevron-left\"></div>\r\n    {{prevText}}\r\n  </a>\r\n  <a\r\n    *ngIf=\"nextLink\"\r\n    [href]=\"nextLink\"\r\n    [target]=\"getTarget\"\r\n    class=\"mrx-pages-nav__right\"\r\n  >\r\n    {{nextText}}\r\n    <div class=\"mrx-icon icon-font-24 icon-chevron-right\"></div>\r\n  </a>\r\n</div>\r\n", styles: [".mrx-pages-nav{display:flex;justify-content:space-between;padding:12px 0}.mrx-pages-nav__left,.mrx-pages-nav__right{display:flex;align-items:flex-start;font-family:PT Sans;font-style:normal;font-weight:700;font-size:16px;line-height:20px;color:var(--brand-text-controls-default)}.mrx-pages-nav__left .mrx-icon,.mrx-pages-nav__right .mrx-icon{color:var(--brand-bg-primary-default)}.mrx-pages-nav__left{margin-left:0;margin-right:auto;padding-right:8px}.mrx-pages-nav__left .mrx-icon{margin-right:8px}.mrx-pages-nav__right{margin-left:auto;margin-right:0;padding-left:8px}.mrx-pages-nav__right .mrx-icon{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagesNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagesNavComponent, selector: "mrx-pages-nav", inputs: { prevLink: "prevLink", prevText: "prevText", nextLink: "nextLink", nextText: "nextText", target: "target" }, ngImport: i0, template: "<div *ngIf=\"prevLink || nextLink\" class=\"mrx-pages-nav\">\r\n  <a\r\n    *ngIf=\"prevLink\"\r\n    [href]=\"prevLink\"\r\n    [target]=\"getTarget\"\r\n    class=\"mrx-pages-nav__left\"\r\n  >\r\n    <div class=\"mrx-icon icon-font-24 icon-chevron-left\"></div>\r\n    {{prevText}}\r\n  </a>\r\n  <a\r\n    *ngIf=\"nextLink\"\r\n    [href]=\"nextLink\"\r\n    [target]=\"getTarget\"\r\n    class=\"mrx-pages-nav__right\"\r\n  >\r\n    {{nextText}}\r\n    <div class=\"mrx-icon icon-font-24 icon-chevron-right\"></div>\r\n  </a>\r\n</div>\r\n", styles: [".mrx-pages-nav{display:flex;justify-content:space-between;padding:12px 0}.mrx-pages-nav__left,.mrx-pages-nav__right{display:flex;align-items:flex-start;font-family:PT Sans;font-style:normal;font-weight:700;font-size:16px;line-height:20px;color:var(--brand-text-controls-default)}.mrx-pages-nav__left .mrx-icon,.mrx-pages-nav__right .mrx-icon{color:var(--brand-bg-primary-default)}.mrx-pages-nav__left{margin-left:0;margin-right:auto;padding-right:8px}.mrx-pages-nav__left .mrx-icon{margin-right:8px}.mrx-pages-nav__right{margin-left:auto;margin-right:0;padding-left:8px}.mrx-pages-nav__right .mrx-icon{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PagesNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagesNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-pages-nav', template: "<div *ngIf=\"prevLink || nextLink\" class=\"mrx-pages-nav\">\r\n  <a\r\n    *ngIf=\"prevLink\"\r\n    [href]=\"prevLink\"\r\n    [target]=\"getTarget\"\r\n    class=\"mrx-pages-nav__left\"\r\n  >\r\n    <div class=\"mrx-icon icon-font-24 icon-chevron-left\"></div>\r\n    {{prevText}}\r\n  </a>\r\n  <a\r\n    *ngIf=\"nextLink\"\r\n    [href]=\"nextLink\"\r\n    [target]=\"getTarget\"\r\n    class=\"mrx-pages-nav__right\"\r\n  >\r\n    {{nextText}}\r\n    <div class=\"mrx-icon icon-font-24 icon-chevron-right\"></div>\r\n  </a>\r\n</div>\r\n", styles: [".mrx-pages-nav{display:flex;justify-content:space-between;padding:12px 0}.mrx-pages-nav__left,.mrx-pages-nav__right{display:flex;align-items:flex-start;font-family:PT Sans;font-style:normal;font-weight:700;font-size:16px;line-height:20px;color:var(--brand-text-controls-default)}.mrx-pages-nav__left .mrx-icon,.mrx-pages-nav__right .mrx-icon{color:var(--brand-bg-primary-default)}.mrx-pages-nav__left{margin-left:0;margin-right:auto;padding-right:8px}.mrx-pages-nav__left .mrx-icon{margin-right:8px}.mrx-pages-nav__right{margin-left:auto;margin-right:0;padding-left:8px}.mrx-pages-nav__right .mrx-icon{margin-left:8px}\n"] }]
         }], propDecorators: { prevLink: [{

package/esm2022/lib/components/pages-nav/pages-nav.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { PagesNavComponent } from './pages-nav.component';
 import * as i0 from "@angular/core";
 export class PagesNavModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PagesNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PagesNavModule, declarations: [PagesNavComponent], imports: [CommonModule], exports: [PagesNavComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PagesNavModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagesNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PagesNavModule, declarations: [PagesNavComponent], imports: [CommonModule], exports: [PagesNavComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagesNavModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PagesNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagesNavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/lib/components/paginator/paginator.component.mjs

@@ -106,10 +106,10 @@ export class PaginatorComponent {
     trackByFn(index, item) {
         return item.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PaginatorComponent, selector: "mrx-paginator", inputs: { pageSizes: "pageSizes", currentPage: "currentPage", pageSize: "pageSize", total: "total", customClasses: "customClasses", isEmptyPaginator: "isEmptyPaginator", isPaginatorText: "isPaginatorText", paginatorText: "paginatorText", setPosition: ["position", "setPosition"], setWithPageSize: ["withPageSize", "setWithPageSize"] }, outputs: { dataStateChanged: "dataStateChanged" }, ngImport: i0, template: "<div class=\"mrx-paginator\" [class]=\"getClasses\" *ngIf=\"isEmptyPaginator || total\">\r\n  <ul class=\"mrx-paginator__list\">\r\n    <li\r\n      class=\"mrx-paginator__previous\"\r\n      [class.disabled]=\"currentPage <= 1\"\r\n      (click)=\"currentPage > 1 && onChangeCurrentPage(currentPage - 1)\">\r\n      <div class=\"mrx-icon icon-chevron-left icon-font-24\"></div>\r\n    </li>\r\n\r\n    <li *ngIf=\"getViewItems.length === 0\" class=\"mrx-paginator__item active\">1</li>\r\n\r\n    <li class=\"mrx-paginator__item\" *ngIf=\"currentPage > 3 && getItems > 5\" (click)=\"onChangeCurrentPage(1)\">1</li>\r\n    <li class=\"mrx-paginator__item dots\" *ngIf=\"currentPage > 3 && getItems > 5\">...</li>\r\n\r\n    <li\r\n      class=\"mrx-paginator__item\"\r\n      *ngFor=\"let item of getViewItems; trackBy: trackByFn\"\r\n      (click)=\"onChangeCurrentPage(item.index)\"\r\n      [class.active]=\"currentPage === item.index\"\r\n    >\r\n      {{item.index}}\r\n    </li>\r\n\r\n    <li class=\"mrx-paginator__item dots\" *ngIf=\"currentPage < getItems - 2 && getItems > 5\">...</li>\r\n    <li class=\"mrx-paginator__item\" *ngIf=\"currentPage < getItems - 2 && getItems > 5\"\r\n        (click)=\"onChangeCurrentPage(getItems)\">{{getItems}}</li>\r\n\r\n    <li\r\n      class=\"mrx-paginator__next\"\r\n      [class.disabled]=\"currentPage >= getItems\"\r\n      (click)=\"currentPage < getItems && onChangeCurrentPage(currentPage + 1)\">\r\n      <div class=\"mrx-icon icon-chevron-right icon-font-24\"></div>\r\n    </li>\r\n  </ul>\r\n\r\n  <ng-template #select>\r\n    <mrx-input-select\r\n      *ngIf=\"withPageSize\"\r\n      size=\"medium\"\r\n      [(ngModel)]=\"pageSize\"\r\n      [items]=\"pageSizes\"\r\n      [clearable]=\"false\"\r\n      [searchable]=\"false\"\r\n      (ngModelChange)=\"onChangePageSize($event)\"\r\n    ></mrx-input-select>\r\n<!--    <ng-select-->\r\n<!--      *ngIf=\"withPageSize\"-->\r\n<!--      [(ngModel)]=\"pageSize\"-->\r\n<!--      [items]=\"pageSizes\"-->\r\n<!--      [clearable]=\"false\"-->\r\n<!--      [searchable]=\"false\"-->\r\n<!--      (change)=\"onChangePageSize($event)\"-->\r\n<!--      class=\"ml-3\"-->\r\n<!--    ></ng-select>-->\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"select\"></ng-container>\r\n\r\n  <div *ngIf=\"isPaginatorText\" class=\"mrx-paginator__text\">\r\n    \u041E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u044B {{paginatorText}} {{getFirstNumberCurrentPage}} - {{getLastNumberCurrentPage}} \u0438\u0437 {{total}}\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-paginator{display:flex;align-items:center;list-style:none;padding-left:0;gap:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container{padding-left:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container .ng-value-container{min-width:36px;padding:0!important;min-height:auto}:host::ng-deep .mrx-paginator ul{display:flex;align-items:center;justify-content:center;list-style:none;padding:0;margin:0;gap:var(--spacing-1)}:host::ng-deep .mrx-paginator ul li{display:flex;align-items:center;justify-content:center;cursor:pointer}:host::ng-deep .mrx-paginator .mrx-paginator__item{padding-left:var(--spacing-3);padding-right:var(--spacing-3);min-width:32px;min-height:32px;border-radius:4px;font-weight:400;font-size:16px;line-height:24px;transition:.2s}:host::ng-deep .mrx-paginator .mrx-paginator__item.active{background-color:var(--brand-bg-primary-default);color:#fff}:host::ng-deep .mrx-paginator .mrx-paginator__item.dots,:host::ng-deep .mrx-paginator .mrx-paginator__item.disabled{cursor:default}:host::ng-deep .mrx-paginator .mrx-paginator__item:not(.dots,.active):hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-paginator .mrx-paginator__previous,:host::ng-deep .mrx-paginator .mrx-paginator__next{min-width:24px;min-height:24px}:host::ng-deep .mrx-paginator .mrx-paginator__previous.disabled .mrx-icon,:host::ng-deep .mrx-paginator .mrx-paginator__next.disabled .mrx-icon{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-paginator__text{font-size:16px;line-height:24px;color:var(--neutral-text-primary)}.mrx-paginator.mrx-paginator.paginator-centered{justify-content:center}.mrx-paginator.mrx-paginator.paginator-left{justify-content:flex-start}.mrx-paginator.mrx-paginator.paginator-right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.InputSelectComponent, selector: "mrx-input-select", inputs: ["fields", "size", "selected", "bindValue", "bindLabel", "customClasses", "wrapperCustomClasses", "multiple", "loading", "addTag", "clearable", "items", "groupBy", "emptyValue", "virtualScroll", "trackByFn", "displayValue", "disabledFromDisplay", "maxLength", "customSearchFn", "isBottomLabel", "search", "required", "disabled", "readonly", "showEmptyFields", "placeholder", "searchable", "loadLabel", "notFoundText", "closeOnSelect", "multiCollapseCount", "invalid", "invalidMessage", "checkInvalid", "label", "labelRequiredHidden", "labelExtraClass", "tooltip", "tooltipHidden", "tooltipVisible", "maxSelectedItems"], outputs: ["changed", "modelChange", "searched"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginatorComponent, selector: "mrx-paginator", inputs: { pageSizes: "pageSizes", currentPage: "currentPage", pageSize: "pageSize", total: "total", customClasses: "customClasses", isEmptyPaginator: "isEmptyPaginator", isPaginatorText: "isPaginatorText", paginatorText: "paginatorText", setPosition: ["position", "setPosition"], setWithPageSize: ["withPageSize", "setWithPageSize"] }, outputs: { dataStateChanged: "dataStateChanged" }, ngImport: i0, template: "<div class=\"mrx-paginator\" [class]=\"getClasses\" *ngIf=\"isEmptyPaginator || total\">\r\n  <ul class=\"mrx-paginator__list\">\r\n    <li\r\n      class=\"mrx-paginator__previous\"\r\n      [class.disabled]=\"currentPage <= 1\"\r\n      (click)=\"currentPage > 1 && onChangeCurrentPage(currentPage - 1)\">\r\n      <div class=\"mrx-icon icon-chevron-left icon-font-24\"></div>\r\n    </li>\r\n\r\n    <li *ngIf=\"getViewItems.length === 0\" class=\"mrx-paginator__item active\">1</li>\r\n\r\n    <li class=\"mrx-paginator__item\" *ngIf=\"currentPage > 3 && getItems > 5\" (click)=\"onChangeCurrentPage(1)\">1</li>\r\n    <li class=\"mrx-paginator__item dots\" *ngIf=\"currentPage > 3 && getItems > 5\">...</li>\r\n\r\n    <li\r\n      class=\"mrx-paginator__item\"\r\n      *ngFor=\"let item of getViewItems; trackBy: trackByFn\"\r\n      (click)=\"onChangeCurrentPage(item.index)\"\r\n      [class.active]=\"currentPage === item.index\"\r\n    >\r\n      {{item.index}}\r\n    </li>\r\n\r\n    <li class=\"mrx-paginator__item dots\" *ngIf=\"currentPage < getItems - 2 && getItems > 5\">...</li>\r\n    <li class=\"mrx-paginator__item\" *ngIf=\"currentPage < getItems - 2 && getItems > 5\"\r\n        (click)=\"onChangeCurrentPage(getItems)\">{{getItems}}</li>\r\n\r\n    <li\r\n      class=\"mrx-paginator__next\"\r\n      [class.disabled]=\"currentPage >= getItems\"\r\n      (click)=\"currentPage < getItems && onChangeCurrentPage(currentPage + 1)\">\r\n      <div class=\"mrx-icon icon-chevron-right icon-font-24\"></div>\r\n    </li>\r\n  </ul>\r\n\r\n  <ng-template #select>\r\n    <mrx-input-select\r\n      *ngIf=\"withPageSize\"\r\n      size=\"medium\"\r\n      [(ngModel)]=\"pageSize\"\r\n      [items]=\"pageSizes\"\r\n      [clearable]=\"false\"\r\n      [searchable]=\"false\"\r\n      (ngModelChange)=\"onChangePageSize($event)\"\r\n    ></mrx-input-select>\r\n<!--    <ng-select-->\r\n<!--      *ngIf=\"withPageSize\"-->\r\n<!--      [(ngModel)]=\"pageSize\"-->\r\n<!--      [items]=\"pageSizes\"-->\r\n<!--      [clearable]=\"false\"-->\r\n<!--      [searchable]=\"false\"-->\r\n<!--      (change)=\"onChangePageSize($event)\"-->\r\n<!--      class=\"ml-3\"-->\r\n<!--    ></ng-select>-->\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"select\"></ng-container>\r\n\r\n  <div *ngIf=\"isPaginatorText\" class=\"mrx-paginator__text\">\r\n    \u041E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u044B {{paginatorText}} {{getFirstNumberCurrentPage}} - {{getLastNumberCurrentPage}} \u0438\u0437 {{total}}\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-paginator{display:flex;align-items:center;list-style:none;padding-left:0;gap:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container{padding-left:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container .ng-value-container{min-width:36px;padding:0!important;min-height:auto}:host::ng-deep .mrx-paginator ul{display:flex;align-items:center;justify-content:center;list-style:none;padding:0;margin:0;gap:var(--spacing-1)}:host::ng-deep .mrx-paginator ul li{display:flex;align-items:center;justify-content:center;cursor:pointer}:host::ng-deep .mrx-paginator .mrx-paginator__item{padding-left:var(--spacing-3);padding-right:var(--spacing-3);min-width:32px;min-height:32px;border-radius:4px;font-weight:400;font-size:16px;line-height:24px;transition:.2s}:host::ng-deep .mrx-paginator .mrx-paginator__item.active{background-color:var(--brand-bg-primary-default);color:#fff}:host::ng-deep .mrx-paginator .mrx-paginator__item.dots,:host::ng-deep .mrx-paginator .mrx-paginator__item.disabled{cursor:default}:host::ng-deep .mrx-paginator .mrx-paginator__item:not(.dots,.active):hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-paginator .mrx-paginator__previous,:host::ng-deep .mrx-paginator .mrx-paginator__next{min-width:24px;min-height:24px}:host::ng-deep .mrx-paginator .mrx-paginator__previous.disabled .mrx-icon,:host::ng-deep .mrx-paginator .mrx-paginator__next.disabled .mrx-icon{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-paginator__text{font-size:16px;line-height:24px;color:var(--neutral-text-primary)}.mrx-paginator.mrx-paginator.paginator-centered{justify-content:center}.mrx-paginator.mrx-paginator.paginator-left{justify-content:flex-start}.mrx-paginator.mrx-paginator.paginator-right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.InputSelectComponent, selector: "mrx-input-select", inputs: ["fields", "size", "selected", "bindValue", "bindLabel", "customClasses", "wrapperCustomClasses", "multiple", "loading", "addTag", "clearable", "items", "groupBy", "emptyValue", "virtualScroll", "trackByFn", "displayValue", "disabledFromDisplay", "maxLength", "customSearchFn", "isBottomLabel", "search", "required", "disabled", "readonly", "showEmptyFields", "placeholder", "searchable", "loadLabel", "notFoundText", "closeOnSelect", "multiCollapseCount", "invalid", "invalidMessage", "checkInvalid", "label", "labelRequiredHidden", "labelExtraClass", "tooltip", "tooltipHidden", "tooltipVisible", "maxSelectedItems"], outputs: ["changed", "modelChange", "searched"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-paginator', template: "<div class=\"mrx-paginator\" [class]=\"getClasses\" *ngIf=\"isEmptyPaginator || total\">\r\n  <ul class=\"mrx-paginator__list\">\r\n    <li\r\n      class=\"mrx-paginator__previous\"\r\n      [class.disabled]=\"currentPage <= 1\"\r\n      (click)=\"currentPage > 1 && onChangeCurrentPage(currentPage - 1)\">\r\n      <div class=\"mrx-icon icon-chevron-left icon-font-24\"></div>\r\n    </li>\r\n\r\n    <li *ngIf=\"getViewItems.length === 0\" class=\"mrx-paginator__item active\">1</li>\r\n\r\n    <li class=\"mrx-paginator__item\" *ngIf=\"currentPage > 3 && getItems > 5\" (click)=\"onChangeCurrentPage(1)\">1</li>\r\n    <li class=\"mrx-paginator__item dots\" *ngIf=\"currentPage > 3 && getItems > 5\">...</li>\r\n\r\n    <li\r\n      class=\"mrx-paginator__item\"\r\n      *ngFor=\"let item of getViewItems; trackBy: trackByFn\"\r\n      (click)=\"onChangeCurrentPage(item.index)\"\r\n      [class.active]=\"currentPage === item.index\"\r\n    >\r\n      {{item.index}}\r\n    </li>\r\n\r\n    <li class=\"mrx-paginator__item dots\" *ngIf=\"currentPage < getItems - 2 && getItems > 5\">...</li>\r\n    <li class=\"mrx-paginator__item\" *ngIf=\"currentPage < getItems - 2 && getItems > 5\"\r\n        (click)=\"onChangeCurrentPage(getItems)\">{{getItems}}</li>\r\n\r\n    <li\r\n      class=\"mrx-paginator__next\"\r\n      [class.disabled]=\"currentPage >= getItems\"\r\n      (click)=\"currentPage < getItems && onChangeCurrentPage(currentPage + 1)\">\r\n      <div class=\"mrx-icon icon-chevron-right icon-font-24\"></div>\r\n    </li>\r\n  </ul>\r\n\r\n  <ng-template #select>\r\n    <mrx-input-select\r\n      *ngIf=\"withPageSize\"\r\n      size=\"medium\"\r\n      [(ngModel)]=\"pageSize\"\r\n      [items]=\"pageSizes\"\r\n      [clearable]=\"false\"\r\n      [searchable]=\"false\"\r\n      (ngModelChange)=\"onChangePageSize($event)\"\r\n    ></mrx-input-select>\r\n<!--    <ng-select-->\r\n<!--      *ngIf=\"withPageSize\"-->\r\n<!--      [(ngModel)]=\"pageSize\"-->\r\n<!--      [items]=\"pageSizes\"-->\r\n<!--      [clearable]=\"false\"-->\r\n<!--      [searchable]=\"false\"-->\r\n<!--      (change)=\"onChangePageSize($event)\"-->\r\n<!--      class=\"ml-3\"-->\r\n<!--    ></ng-select>-->\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"select\"></ng-container>\r\n\r\n  <div *ngIf=\"isPaginatorText\" class=\"mrx-paginator__text\">\r\n    \u041E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u044B {{paginatorText}} {{getFirstNumberCurrentPage}} - {{getLastNumberCurrentPage}} \u0438\u0437 {{total}}\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-paginator{display:flex;align-items:center;list-style:none;padding-left:0;gap:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container{padding-left:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container .ng-value-container{min-width:36px;padding:0!important;min-height:auto}:host::ng-deep .mrx-paginator ul{display:flex;align-items:center;justify-content:center;list-style:none;padding:0;margin:0;gap:var(--spacing-1)}:host::ng-deep .mrx-paginator ul li{display:flex;align-items:center;justify-content:center;cursor:pointer}:host::ng-deep .mrx-paginator .mrx-paginator__item{padding-left:var(--spacing-3);padding-right:var(--spacing-3);min-width:32px;min-height:32px;border-radius:4px;font-weight:400;font-size:16px;line-height:24px;transition:.2s}:host::ng-deep .mrx-paginator .mrx-paginator__item.active{background-color:var(--brand-bg-primary-default);color:#fff}:host::ng-deep .mrx-paginator .mrx-paginator__item.dots,:host::ng-deep .mrx-paginator .mrx-paginator__item.disabled{cursor:default}:host::ng-deep .mrx-paginator .mrx-paginator__item:not(.dots,.active):hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-paginator .mrx-paginator__previous,:host::ng-deep .mrx-paginator .mrx-paginator__next{min-width:24px;min-height:24px}:host::ng-deep .mrx-paginator .mrx-paginator__previous.disabled .mrx-icon,:host::ng-deep .mrx-paginator .mrx-paginator__next.disabled .mrx-icon{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-paginator__text{font-size:16px;line-height:24px;color:var(--neutral-text-primary)}.mrx-paginator.mrx-paginator.paginator-centered{justify-content:center}.mrx-paginator.mrx-paginator.paginator-left{justify-content:flex-start}.mrx-paginator.mrx-paginator.paginator-right{justify-content:flex-end}\n"] }]
         }], propDecorators: { pageSizes: [{

package/esm2022/lib/components/paginator/paginator.module.mjs

@@ -5,15 +5,15 @@ import { FormsModule } from "@angular/forms";
 import { InputSelectModule } from '../form/input-select/input-select.module';
 import * as i0 from "@angular/core";
 export class PaginatorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PaginatorModule, declarations: [PaginatorComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PaginatorModule, declarations: [PaginatorComponent], imports: [CommonModule,
             FormsModule,
             InputSelectModule], exports: [PaginatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PaginatorModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorModule, imports: [CommonModule,
             FormsModule,
             InputSelectModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [