@evotor-dev/ui-kit 6.5.1 → 6.7.0

package/bundles/evotor-dev-ui-kit.umd.js

@@ -2782,7 +2782,7 @@
       return EvoAutocompleteDefaultOptionComponent;
   }());
   EvoAutocompleteDefaultOptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoAutocompleteDefaultOptionComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EvoAutocompleteDefaultOptionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoAutocompleteDefaultOptionComponent, selector: "evo-autocomplete-default-option", inputs: { hasCheckbox: "hasCheckbox", label: "label", description: "description", isDisabled: "isDisabled", isSelected: "isSelected" }, host: { properties: { "class.has-checkbox": "this.hasCheckboxClass" } }, ngImport: i0__namespace, template: "<div class=\"option option_has-checkbox\" *ngIf=\"hasCheckbox\">\n    <evo-checkbox\n        [ngModel]=\"isSelected\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [disabled]=\"isDisabled\"\n        (click)=\"onCheckboxClick($event)\"\n        (change)=\"onCheckboxClick($event)\"\n        (ngModelChange)=\"onSelectedChange($event)\"\n    >{{ label }}</evo-checkbox>\n    <ng-container *ngIf=\"description\">\n        <div class=\"option__description\">{{ description }}</div>\n    </ng-container>\n</div>\n<div class=\"option\" *ngIf=\"!hasCheckbox\">\n    <div class=\"option__label\">{{ label }}</div>\n    <ng-container *ngIf=\"description\">\n        <div class=\"option__description\">{{ description }}</div>\n    </ng-container>\n</div>\n", styles: [":host{display:block;color:inherit;white-space:var(--evo-autocomplete-option-white-space, nowrap)}.option{position:relative;z-index:1}.option__label{display:block;margin-bottom:0;overflow:var(--evo-autocomplete-option-overflow, hidden);color:inherit;font-size:14px;line-height:22px;text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option__description{display:block;overflow:var(--evo-autocomplete-option-overflow, hidden);color:#9b9b9b;font-size:12px;line-height:18px;text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}evo-checkbox+.option__description{padding-left:32px}.option_has-checkbox{background-color:inherit}:host-context(.ng-option.ng-option-selected) .option_has-checkbox{background-color:#e1ecef!important}:host-context(.ng-option.ng-option-disabled){padding:0}:host-context(.ng-option.ng-option-disabled) .option__description,:host-context(.ng-option.ng-option-disabled) .option__label,:host-context(.ng-option.ng-option-disabled) evo-checkbox{color:#c6c6c6}:host-context(.ng-option.ng-option-selected){padding:0}:host-context(.ng-option.ng-option-selected) .option:not(.option_has-checkbox) .option__description,:host-context(.ng-option.ng-option-selected) .option:not(.option_has-checkbox) .option__label{color:#fff}:host-context(.ng-option.ng-option-marked) .option_has-checkbox{background:#F4F6F8}\n"], components: [{ type: EvoCheckboxComponent, selector: "evo-checkbox", inputs: ["indeterminate"], outputs: ["indeterminateChange"] }], directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  EvoAutocompleteDefaultOptionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoAutocompleteDefaultOptionComponent, selector: "evo-autocomplete-default-option", inputs: { hasCheckbox: "hasCheckbox", label: "label", description: "description", isDisabled: "isDisabled", isSelected: "isSelected" }, host: { properties: { "class.has-checkbox": "this.hasCheckboxClass" } }, ngImport: i0__namespace, template: "<div class=\"option option_has-checkbox\" *ngIf=\"hasCheckbox\">\n    <evo-checkbox\n        [ngModel]=\"isSelected\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [disabled]=\"isDisabled\"\n        (click)=\"onCheckboxClick($event)\"\n        (change)=\"onCheckboxClick($event)\"\n        (ngModelChange)=\"onSelectedChange($event)\"\n    >{{ label }}</evo-checkbox>\n    <ng-container *ngIf=\"description\">\n        <div class=\"option__description\">{{ description }}</div>\n    </ng-container>\n</div>\n<div class=\"option\" *ngIf=\"!hasCheckbox\">\n    <div class=\"option__label\">{{ label }}</div>\n    <ng-container *ngIf=\"description\">\n        <div class=\"option__description\">{{ description }}</div>\n    </ng-container>\n</div>\n", styles: [":host{display:block;color:inherit;white-space:var(--evo-autocomplete-option-white-space, nowrap)}.option{position:relative;z-index:1}.option__label{display:block;margin-bottom:0;overflow:var(--evo-autocomplete-option-overflow, hidden);color:inherit;font-size:14px;line-height:22px;text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option__description{display:block;overflow:var(--evo-autocomplete-option-overflow, hidden);color:#9b9b9b;font-size:12px;line-height:18px;text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}evo-checkbox+.option__description{padding-left:32px}.option_has-checkbox{background-color:inherit}:host-context(.ng-option.ng-option-selected) .option_has-checkbox{background-color:#e1ecef!important}:host-context(.ng-option.ng-option-disabled){padding:0}:host-context(.ng-option.ng-option-disabled) .option__description,:host-context(.ng-option.ng-option-disabled) .option__label,:host-context(.ng-option.ng-option-disabled) evo-checkbox{color:#c6c6c6}:host-context(.ng-option.ng-option-selected){padding:0}:host-context(.ng-option.ng-option-marked) .option_has-checkbox{background:#F4F6F8}\n"], components: [{ type: EvoCheckboxComponent, selector: "evo-checkbox", inputs: ["indeterminate"], outputs: ["indeterminateChange"] }], directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoAutocompleteDefaultOptionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3174,11 +3174,181 @@
                   }]
           }] });
 
+  var EVO_BUTTON_THEMES_MAP = new Map([
+      [
+          'rectangle-outline',
+          {
+              shape: 'rectangle',
+              isOutline: true,
+          },
+      ],
+      [
+          'rounded-outline',
+          {
+              shape: 'rounded',
+              isOutline: true,
+          },
+      ],
+      [
+          'rounded-solid',
+          {
+              shape: 'rounded',
+              isOutline: false,
+          },
+      ],
+      [
+          'semi-rectangle-solid',
+          {
+              shape: 'semi-rectangle',
+              isOutline: false,
+          },
+      ],
+  ]);
+
+  var defaultId = "clip-path-";
+  var EvoCircularLoaderComponent = /** @class */ (function () {
+      function EvoCircularLoaderComponent() {
+          this.clipPathId = defaultId;
+      }
+      EvoCircularLoaderComponent.prototype.ngOnInit = function () {
+          this.clipPathId += "" + defaultId + Math.random().toString(36).substring(2);
+      };
+      return EvoCircularLoaderComponent;
+  }());
+  EvoCircularLoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoCircularLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  EvoCircularLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoCircularLoaderComponent, selector: "evo-circular-loader", ngImport: i0__namespace, template: "<div class=\"wrapper\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <clipPath [attr.id]=\"clipPathId\">\n            <path d=\"M12 20C10.4178 20 8.87103 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60896 15.0615C4.00346 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12L18 12C18 10.8133 17.6481 9.65327 16.9888 8.66658C16.3295 7.67988 15.3925 6.91085 14.2961 6.45672C13.1997 6.0026 11.9933 5.88378 10.8295 6.11529C9.66557 6.3468 8.59647 6.91824 7.75736 7.75736C6.91824 8.59647 6.3468 9.66557 6.11529 10.8295C5.88378 11.9933 6.0026 13.1997 6.45672 14.2961C6.91085 15.3925 7.67988 16.3295 8.66658 16.9888C9.65327 17.6481 10.8133 18 12 18L12 20Z\"/>\n        </clipPath>\n        <foreignObject x=\"0\" y=\"0\" width=\"17\" height=\"16\" [attr.clip-path]=\"'url(#' + clipPathId + ')'\">\n            <xhtml:div class=\"loader\"></xhtml:div>\n        </foreignObject>\n    </svg>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}:host{display:block;width:24px;height:24px;--evo-circular-loader-animate: spin 1s linear infinite;--evo-circular-loader-color: #C6C6C6 }.wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.wrapper svg{display:block;width:100%;height:100%;animation:var(--evo-circular-loader-animate);fill:none}.wrapper svg .loader{width:100%;height:100%;color:inherit;background:conic-gradient(from 180deg,transparent 0%,var(--evo-circular-loader-color) 100%)}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoCircularLoaderComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'evo-circular-loader',
+                      templateUrl: './evo-circular-loader.component.html',
+                      styleUrls: ['./evo-circular-loader.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                  }]
+          }] });
+
+  var EvoButtonComponent = /** @class */ (function () {
+      function EvoButtonComponent(elRef) {
+          this.elRef = elRef;
+          this.size = 'normal';
+          this.color = 'success';
+          this.shape = 'rounded';
+          this._isOutline = false;
+          this._isDisabled = false;
+          this._isLoading = false;
+      }
+      Object.defineProperty(EvoButtonComponent.prototype, "theme", {
+          /**
+           * `theme` is a complex prop, that sets a number of inner parameters, described in `EvoButtonThemeParams`
+           */
+          set: function (value) {
+              var _a;
+              var selectedTheme = (_a = EVO_BUTTON_THEMES_MAP.get(value)) !== null && _a !== void 0 ? _a : EVO_BUTTON_THEMES_MAP.get('rounded-solid');
+              this.shape = selectedTheme.shape;
+              this._isOutline = selectedTheme.isOutline;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(EvoButtonComponent.prototype, "disabled", {
+          set: function (value) {
+              this._isDisabled = value;
+              if (!this.isLoading) {
+                  this.elRef.nativeElement.disabled = value;
+              }
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(EvoButtonComponent.prototype, "loading", {
+          set: function (value) {
+              this._isLoading = value;
+              if (!this._isDisabled) {
+                  this.elRef.nativeElement.disabled = value;
+              }
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(EvoButtonComponent.prototype, "isLoading", {
+          get: function () {
+              return this._isLoading;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(EvoButtonComponent.prototype, "buttonClasses", {
+          get: function () {
+              var classes = [];
+              if (this.color) {
+                  classes.push("color_" + this.color);
+              }
+              if (this.shape) {
+                  classes.push("shape_" + this.shape);
+              }
+              if (this.size) {
+                  classes.push("size_" + this.size);
+              }
+              if (this._isOutline) {
+                  classes.push("is-outline");
+              }
+              if (this._isDisabled) {
+                  classes.push('is-disabled');
+              }
+              if (this.isLoading) {
+                  classes.push('is-loading');
+              }
+              return classes;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(EvoButtonComponent.prototype, "buttonStyles", {
+          get: function () {
+              var result = {};
+              if (this.isLoading) {
+                  result['visibility'] = 'hidden';
+              }
+              return result;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      return EvoButtonComponent;
+  }());
+  EvoButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  EvoButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: { size: "size", color: "color", theme: "theme", disabled: "disabled", loading: "loading" }, ngImport: i0__namespace, template: "<div class=\"evo-button\" [evoUiClass]=\"buttonClasses\">\n    <span class=\"evo-button__content\" [ngStyle]=\"buttonStyles\">\n        <ng-content></ng-content>\n    </span>\n    <evo-circular-loader class=\"evo-button__loader\" *ngIf=\"isLoading\"></evo-circular-loader>\n</div>\n", styles: [":host{display:inline-block;margin:0;padding:0;vertical-align:top;background:none;border:0;outline:none;--evo-button-background-gradient: none;--evo-button-text-color: none;--evo-button-border-color: none;--evo-button-hover-text-color: none;--evo-button-hover-shadow: none;--evo-button-overflow: hidden}.evo-button{--inner-button-primary-color: #21C68B;--inner-button-secondary-color: #FFFFFF;--inner-text-color: var(--inner-button-secondary-color);--inner-background-color: var(--inner-button-primary-color);--inner-border-color: var(--inner-button-primary-color);display:flex;justify-content:center;align-items:center;height:40px;padding:0 24px;font-size:16px;line-height:1;white-space:nowrap;text-align:center;color:var(--inner-text-color);fill:var(--inner-text-color);border:none;outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;box-sizing:border-box;z-index:auto;transition:box-shadow .3s,color .3s}.evo-button__content{position:relative;display:flex;flex-flow:row nowrap;align-items:center;overflow:var(--evo-button-overflow);z-index:3}.evo-button__loader{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:4px 0;z-index:2;--evo-circular-loader-color: var(--inner-text-color)}.evo-button:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-color:var(--inner-background-color);border:solid 1px var(--inner-border-color);border-radius:inherit;transition:background .3s,color .3s,border .3s}.evo-button:after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;opacity:0;transition:opacity .3s,background-color .3s}.evo-button:hover{box-shadow:var(--evo-button-hover-shadow)}.evo-button:hover:after{opacity:.2;background-color:#fff}.evo-button:focus:after,.evo-button:active:after{opacity:.1;background-color:#000}.evo-button:disabled,.evo-button_is-disabled{--inner-text-color: #FFFFFF !important;--inner-background-color: #C6C6C6 !important;--inner-border-color: transparent !important;pointer-events:none}.evo-button:disabled .evo-button:after,.evo-button_is-disabled .evo-button:after{display:none}.evo-button_is-outline:not(.evo-button_is-outline:hover):not(.evo-button_is-outline_is-disabled):not(.evo-button_is-outline:active){--inner-text-color: var(--inner-button-primary-color);--inner-background-color: transparent;--inner-border-color: var(--inner-button-primary-color)}.evo-button_is-outline:hover{--inner-text-color: var(--inner-button-secondary-color);--inner-background-color: var(--inner-button-primary-color)}.evo-button_is-outline:hover:not(:focus):not(:active):after{background:transparent;border:none}.evo-button_is-loading{position:relative;pointer-events:none}.evo-button.evo-button_shape_rounded{border-radius:30px;font-weight:500;font-family:var(--evo-font-secondary);text-transform:uppercase}.evo-button.evo-button_shape_rectangle{border-radius:4px;padding:0 12px;font-weight:600;font-family:var(--evo-font);text-transform:unset}.evo-button.evo-button_shape_semi-rectangle{border-radius:8px;padding:0 8px;font-weight:700;font-family:var(--evo-font);text-transform:unset}.evo-button.evo-button_color_secondary{--inner-button-primary-color: #231F20;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_color_success{--inner-button-primary-color: #21C68B;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_color_bonus{--inner-button-primary-color: #C72AAE;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_color_text{--inner-button-primary-color: #212121;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_color_link{--inner-button-primary-color: #0986E2;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_color_error{--inner-button-primary-color: #FF1817;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_color_white{--inner-button-primary-color: #FFFFFF;--inner-button-secondary-color: #212121}.evo-button.evo-button_color_primary{--inner-button-primary-color: #F05023;--inner-button-secondary-color: #FFFFFF}.evo-button.evo-button_size_small.evo-button_shape_rounded{height:32px;font-size:14px;line-height:20px;padding:0 16px}.evo-button.evo-button_size_small.evo-button_shape_rectangle{height:32px;font-size:14px;line-height:24px}.evo-button.evo-button_size_small.evo-button_shape_semi-rectangle{height:24px;font-size:12px;line-height:18px}.evo-button.evo-button_size_normal.evo-button_shape_rounded{height:40px;font-size:18px;line-height:20px;padding:0 24px}.evo-button.evo-button_size_normal.evo-button_shape_rectangle{height:32px;font-size:14px;line-height:24px}.evo-button.evo-button_size_normal.evo-button_shape_semi-rectangle{height:24px;font-size:12px;line-height:18px}.evo-button.evo-button_size_large.evo-button_shape_rounded{height:56px;font-size:18px;line-height:20px;padding:0 40px}.evo-button.evo-button_size_large.evo-button_shape_rectangle{height:32px;font-size:14px;line-height:24px}.evo-button.evo-button_size_large.evo-button_shape_semi-rectangle{height:24px;font-size:12px;line-height:18px}.evo-button.evo-button_color_white.evo-button_shape_rounded:not(.evo-button.evo-button_color_white.evo-button_shape_rounded:disabled):is(.evo-button.evo-button_color_white.evo-button_shape_rounded:hover):after{z-index:3}.evo-button.evo-button_color_custom:not(.evo-button_is-disabled):not(.evo-button_is-outline){--inner-button-secondary-color: var(--evo-button-text-color)}.evo-button.evo-button_color_custom:not(.evo-button_is-disabled):not(.evo-button_is-outline):hover{--inner-button-secondary-color: var(--evo-button-hover-text-color)}.evo-button.evo-button_color_custom:not(.evo-button_is-disabled):not(.evo-button_is-outline):before{background-image:var(--evo-button-background-gradient);border-color:transparent}.evo-button.evo-button_color_custom:not(.evo-button_is-disabled).evo-button_is-outline{--inner-button-primary-color: var(--evo-button-border-color)}.evo-button.evo-button_color_custom:not(.evo-button_is-disabled).evo-button_is-outline:hover:before,.evo-button.evo-button_color_custom:not(.evo-button_is-disabled).evo-button_is-outline:active:before{background-color:transparent;background-image:var(--evo-button-background-gradient)}\n"], components: [{ type: EvoCircularLoaderComponent, selector: "evo-circular-loader" }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'button[evoButton], a[evoButton]',
+                      templateUrl: './evo-button.component.html',
+                      styleUrls: ['./evo-button.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { size: [{
+                  type: i0.Input
+              }], color: [{
+                  type: i0.Input
+              }], theme: [{
+                  type: i0.Input
+              }], disabled: [{
+                  type: i0.Input
+              }], loading: [{
+                  type: i0.Input
+              }] } });
+
+  /**
+   * @deprecated use EvoButtonComponent
+   */
   exports.EvoButtonSizes = void 0;
   (function (EvoButtonSizes) {
       EvoButtonSizes["small"] = "small";
       EvoButtonSizes["large"] = "large";
   })(exports.EvoButtonSizes || (exports.EvoButtonSizes = {}));
+  /**
+   * @deprecated use EvoButtonColor with EvoButtonTheme
+   */
   exports.EvoButtonStyles = void 0;
   (function (EvoButtonStyles) {
       EvoButtonStyles["lined"] = "lined";
@@ -3189,13 +3359,16 @@
       EvoButtonStyles["purple"] = "purple";
       EvoButtonStyles["red"] = "red";
   })(exports.EvoButtonStyles || (exports.EvoButtonStyles = {}));
-  var EvoButtonComponent = /** @class */ (function () {
-      function EvoButtonComponent(elRef) {
+  /**
+   * @deprecated use EvoButtonComponent
+   */
+  var EvoButtonOldComponent = /** @class */ (function () {
+      function EvoButtonOldComponent(elRef) {
           this.elRef = elRef;
           this._disabled = false;
           this._loading = false;
       }
-      Object.defineProperty(EvoButtonComponent.prototype, "disabled", {
+      Object.defineProperty(EvoButtonOldComponent.prototype, "disabled", {
           get: function () {
               return this._disabled;
           },
@@ -3208,7 +3381,7 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(EvoButtonComponent.prototype, "loading", {
+      Object.defineProperty(EvoButtonOldComponent.prototype, "loading", {
           get: function () {
               return this._loading;
           },
@@ -3221,7 +3394,7 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(EvoButtonComponent.prototype, "totalClasses", {
+      Object.defineProperty(EvoButtonOldComponent.prototype, "totalClasses", {
           get: function () {
               var classes = [];
               if (this.size) {
@@ -3241,7 +3414,7 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(EvoButtonComponent.prototype, "totalStyles", {
+      Object.defineProperty(EvoButtonOldComponent.prototype, "totalStyles", {
           get: function () {
               var result = {};
               if (this.loading) {
@@ -3252,16 +3425,16 @@
           enumerable: false,
           configurable: true
       });
-      return EvoButtonComponent;
+      return EvoButtonOldComponent;
   }());
-  EvoButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EvoButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoButtonComponent, selector: "evo-button, button[evo-button]", inputs: { color: "color", size: "size", disabled: "disabled", loading: "loading" }, ngImport: i0__namespace, template: "<div class=\"evo-button\" [evoUiClass]=\"totalClasses\">\n    <span [ngStyle]=\"totalStyles\">\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"loading\" class=\"evo-button__dots\">\n        <span class=\"evo-button__dot\"></span>\n        <span class=\"evo-button__dot\"></span>\n        <span class=\"evo-button__dot\"></span>\n    </span>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}.evo-button{display:flex;justify-content:center;align-items:center;min-width:96px;height:40px;padding:0 24px;color:#fff;font-weight:500;font-size:16px;font-family:var(--evo-font-secondary);line-height:1;white-space:nowrap;text-align:center;text-transform:uppercase;background:#F05023 none;border:solid 1px transparent;border-radius:30px;outline:none;cursor:pointer;transition:background-color .3s,color .3s,border .3s;-webkit-user-select:none;user-select:none}.evo-button:hover{color:#fff;background-color:#f3734f}.evo-button:active,.evo-button:focus{color:#fff;background-color:#d8481f;outline:none}.evo-button:disabled,.evo-button_disabled{color:#fff!important;background:rgba(0,0,0,.16)!important;border-color:transparent!important;pointer-events:none}.evo-button_lined{color:#f05023;background-color:#fff;border:1px solid #F05023}.evo-button_lined:hover{color:#fff;background-color:#f05023}.evo-button_lined:active,.evo-button_lined:focus{color:#fff;background-color:#d8481f;border-color:#d8481f}.evo-button_darkblue{background-color:#546e7a}.evo-button_darkblue:hover{background-color:#7596a5}.evo-button_darkblue:active,.evo-button_darkblue:focus{background-color:#283239}.evo-button_darkblue-lined{color:#403c3d;background-color:#fff;border:1px solid #403C3D}.evo-button_darkblue-lined:hover{color:#fff;background-color:#403c3d}.evo-button_darkblue-lined:active,.evo-button_darkblue-lined:focus{color:#fff;background-color:#343031;border-color:#343031}.evo-button_green{background-color:#21c68b}.evo-button_green:hover{background-color:#4cd2a2}.evo-button_green:active,.evo-button_green:focus{background-color:#1c9e6e}.evo-button_green-lined{color:#21c68b;background-color:#fff;border:1px solid #21C68B}.evo-button_green-lined:hover{color:#fff;background-color:#21c68b}.evo-button_green-lined:active,.evo-button_green-lined:focus{color:#fff;background-color:#1c9e6e;border-color:#1c9e6e}.evo-button_red{color:#fff;background-color:#ff1817}.evo-button_red:hover{background-color:#ff4645}.evo-button_red:active,.evo-button_red:focus{background-color:#e51715}.evo-button_purple{background-color:#c72aae}.evo-button_purple:hover{background-color:#d255be}.evo-button_purple:active,.evo-button_purple:focus{background-color:#9f228b}.evo-button_white{background-color:transparent;border:1px solid #FFFFFF}.evo-button_white:hover{color:#403c3d;background-color:#fff}.evo-button_white:active,.evo-button_white:focus{color:#fff;background-color:transparent}.evo-button_small{min-width:72px;height:32px;padding:0 16px;font-size:14px}.evo-button_large{min-width:120px;height:56px;padding:0 40px;font-size:18px}.evo-button_icon{display:inline-flex;align-items:center;padding-right:22px;padding-left:22px}.evo-button_loading{position:relative;pointer-events:none}.evo-button__dots{position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-30px}.evo-button__dot{float:left;width:10px;height:10px;margin:0 5px;background:currentColor;border-radius:50%;transform:scale(0);animation:evo-fx-blink 1s ease infinite 0ms}.evo-button__dot:nth-child(2){animation:evo-fx-blink 1s ease infinite .3s}.evo-button__dot:nth-child(3){animation:evo-fx-blink 1s ease infinite .6s}:host{display:inline-block;margin:0;padding:0;vertical-align:top;background:none;border:0;outline:none}\n"], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonComponent, decorators: [{
+  EvoButtonOldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonOldComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  EvoButtonOldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoButtonOldComponent, selector: "evo-button, button[evo-button]", inputs: { color: "color", size: "size", disabled: "disabled", loading: "loading" }, ngImport: i0__namespace, template: "<div class=\"evo-button\" [evoUiClass]=\"totalClasses\">\n    <span [ngStyle]=\"totalStyles\">\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"loading\" class=\"evo-button__dots\">\n        <span class=\"evo-button__dot\"></span>\n        <span class=\"evo-button__dot\"></span>\n        <span class=\"evo-button__dot\"></span>\n    </span>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}.evo-button{display:flex;justify-content:center;align-items:center;min-width:96px;height:40px;padding:0 24px;color:#fff;font-weight:500;font-size:16px;font-family:var(--evo-font-secondary);line-height:1;white-space:nowrap;text-align:center;text-transform:uppercase;background:#F05023 none;border:solid 1px transparent;border-radius:30px;outline:none;cursor:pointer;transition:background-color .3s,color .3s,border .3s;-webkit-user-select:none;user-select:none}.evo-button:hover{color:#fff;background-color:#f3734f}.evo-button:active,.evo-button:focus{color:#fff;background-color:#d8481f;outline:none}.evo-button:disabled,.evo-button_disabled{color:#fff!important;background:rgba(0,0,0,.16)!important;border-color:transparent!important;pointer-events:none}.evo-button_lined{color:#f05023;background-color:#fff;border:1px solid #F05023}.evo-button_lined:hover{color:#fff;background-color:#f05023}.evo-button_lined:active,.evo-button_lined:focus{color:#fff;background-color:#d8481f;border-color:#d8481f}.evo-button_darkblue{background-color:#546e7a}.evo-button_darkblue:hover{background-color:#7596a5}.evo-button_darkblue:active,.evo-button_darkblue:focus{background-color:#283239}.evo-button_darkblue-lined{color:#403c3d;background-color:#fff;border:1px solid #403C3D}.evo-button_darkblue-lined:hover{color:#fff;background-color:#403c3d}.evo-button_darkblue-lined:active,.evo-button_darkblue-lined:focus{color:#fff;background-color:#343031;border-color:#343031}.evo-button_green{background-color:#21c68b}.evo-button_green:hover{background-color:#4cd2a2}.evo-button_green:active,.evo-button_green:focus{background-color:#1c9e6e}.evo-button_green-lined{color:#21c68b;background-color:#fff;border:1px solid #21C68B}.evo-button_green-lined:hover{color:#fff;background-color:#21c68b}.evo-button_green-lined:active,.evo-button_green-lined:focus{color:#fff;background-color:#1c9e6e;border-color:#1c9e6e}.evo-button_red{color:#fff;background-color:#ff1817}.evo-button_red:hover{background-color:#ff4645}.evo-button_red:active,.evo-button_red:focus{background-color:#e51715}.evo-button_purple{background-color:#c72aae}.evo-button_purple:hover{background-color:#d255be}.evo-button_purple:active,.evo-button_purple:focus{background-color:#9f228b}.evo-button_white{background-color:transparent;border:1px solid #FFFFFF}.evo-button_white:hover{color:#403c3d;background-color:#fff}.evo-button_white:active,.evo-button_white:focus{color:#fff;background-color:transparent}.evo-button_small{min-width:72px;height:32px;padding:0 16px;font-size:14px}.evo-button_large{min-width:120px;height:56px;padding:0 40px;font-size:18px}.evo-button_icon{display:inline-flex;align-items:center;padding-right:22px;padding-left:22px}.evo-button_loading{position:relative;pointer-events:none}.evo-button__dots{position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-30px}.evo-button__dot{float:left;width:10px;height:10px;margin:0 5px;background:currentColor;border-radius:50%;transform:scale(0);animation:evo-fx-blink 1s ease infinite 0ms}.evo-button__dot:nth-child(2){animation:evo-fx-blink 1s ease infinite .3s}.evo-button__dot:nth-child(3){animation:evo-fx-blink 1s ease infinite .6s}:host{display:inline-block;margin:0;padding:0;vertical-align:top;background:none;border:0;outline:none}\n"], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonOldComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'evo-button, button[evo-button]',
-                      templateUrl: './evo-button.component.html',
-                      styleUrls: ['./evo-button.component.scss'],
+                      templateUrl: './evo-button-old.component.html',
+                      styleUrls: ['./evo-button-old.component.scss'],
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
           }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { color: [{
@@ -3274,27 +3447,79 @@
                   type: i0.Input
               }] } });
 
-  var EvoButtonModule = /** @class */ (function () {
-      function EvoButtonModule() {
+  exports.EvoLoaderStyles = void 0;
+  (function (EvoLoaderStyles) {
+      EvoLoaderStyles["darkblue"] = "darkblue";
+      EvoLoaderStyles["green"] = "green";
+      EvoLoaderStyles["white"] = "white";
+  })(exports.EvoLoaderStyles || (exports.EvoLoaderStyles = {}));
+  /**
+   * @deprecated use `EvoCircularLoaderComponent`
+   */
+  var EvoLoaderComponent = /** @class */ (function () {
+      function EvoLoaderComponent() {
+          this.color = exports.EvoLoaderStyles.darkblue;
       }
-      return EvoButtonModule;
+      EvoLoaderComponent.prototype.ngOnInit = function () { };
+      return EvoLoaderComponent;
   }());
-  EvoButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  EvoButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, declarations: [EvoButtonComponent], imports: [i1.CommonModule,
-          EvoUiKitModule], exports: [EvoButtonComponent] });
-  EvoButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, imports: [[
+  EvoLoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  EvoLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoLoaderComponent, selector: "evo-loader", inputs: { color: "color" }, ngImport: i0__namespace, template: "<div class=\"evo-loader\" [evoUiClass]=\"color\">\n    <span class=\"evo-loader__dot\"></span>\n    <span class=\"evo-loader__dot\"></span>\n    <span class=\"evo-loader__dot\"></span>\n</div>\n", styles: ["@keyframes fx{50%{transform:scale(1);opacity:1}to{opacity:0}}.evo-loader{position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-30px}.evo-loader_darkblue{color:#546e7a}.evo-loader_green{color:#21c68b}.evo-loader_white{color:#fff}.evo-loader__dot{float:left;width:10px;height:10px;margin:0 5px;background:currentColor;border-radius:50%;transform:scale(0);animation:fx 1s ease infinite 0ms}.evo-loader__dot:nth-child(2){animation:fx 1s ease infinite .3s}.evo-loader__dot:nth-child(3){animation:fx 1s ease infinite .6s}\n"], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'evo-loader',
+                      templateUrl: './evo-loader.component.html',
+                      styleUrls: ['./evo-loader.component.scss'],
+                  }]
+          }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                  type: i0.Input
+              }] } });
+
+  var bundle = [
+      EvoLoaderComponent,
+      EvoCircularLoaderComponent,
+  ];
+  var EvoLoaderModule = /** @class */ (function () {
+      function EvoLoaderModule() {
+      }
+      return EvoLoaderModule;
+  }());
+  EvoLoaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  EvoLoaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, declarations: [EvoLoaderComponent,
+          EvoCircularLoaderComponent], imports: [i1.CommonModule,
+          EvoUiKitModule], exports: [EvoLoaderComponent,
+          EvoCircularLoaderComponent] });
+  EvoLoaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, imports: [[
               i1.CommonModule,
               EvoUiKitModule,
           ]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, decorators: [{
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
                           i1.CommonModule,
                           EvoUiKitModule,
                       ],
-                      declarations: [EvoButtonComponent],
-                      exports: [EvoButtonComponent],
+                      declarations: __spreadArray([], __read(bundle)),
+                      exports: __spreadArray([], __read(bundle)),
+                  }]
+          }] });
+
+  var EvoButtonModule = /** @class */ (function () {
+      function EvoButtonModule() {
+      }
+      return EvoButtonModule;
+  }());
+  EvoButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  EvoButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, declarations: [EvoButtonComponent, EvoButtonOldComponent], imports: [i1.CommonModule, EvoUiKitModule, EvoLoaderModule], exports: [EvoButtonComponent, EvoButtonOldComponent] });
+  EvoButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, imports: [[i1.CommonModule, EvoUiKitModule, EvoLoaderModule]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoButtonModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      imports: [i1.CommonModule, EvoUiKitModule, EvoLoaderModule],
+                      declarations: [EvoButtonComponent, EvoButtonOldComponent],
+                      exports: [EvoButtonComponent, EvoButtonOldComponent],
                   }]
           }] });
 
@@ -4222,6 +4447,9 @@
   var EvoIconButtonComponent = /** @class */ (function () {
       function EvoIconButtonComponent() {
           this.color = exports.EvoIconButtonColor.link;
+          /**
+           * @deprecated instead of rectangle theme use `EvoNavigationButtonComponent`
+           */
           this.theme = 'default';
           this.classes = [];
       }
@@ -4539,87 +4767,6 @@
                   }]
           }] });
 
-  exports.EvoLoaderStyles = void 0;
-  (function (EvoLoaderStyles) {
-      EvoLoaderStyles["darkblue"] = "darkblue";
-      EvoLoaderStyles["green"] = "green";
-      EvoLoaderStyles["white"] = "white";
-  })(exports.EvoLoaderStyles || (exports.EvoLoaderStyles = {}));
-  /**
-   * @deprecated use `EvoCircularLoaderComponent`
-   */
-  var EvoLoaderComponent = /** @class */ (function () {
-      function EvoLoaderComponent() {
-          this.color = exports.EvoLoaderStyles.darkblue;
-      }
-      EvoLoaderComponent.prototype.ngOnInit = function () { };
-      return EvoLoaderComponent;
-  }());
-  EvoLoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EvoLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoLoaderComponent, selector: "evo-loader", inputs: { color: "color" }, ngImport: i0__namespace, template: "<div class=\"evo-loader\" [evoUiClass]=\"color\">\n    <span class=\"evo-loader__dot\"></span>\n    <span class=\"evo-loader__dot\"></span>\n    <span class=\"evo-loader__dot\"></span>\n</div>\n", styles: ["@keyframes fx{50%{transform:scale(1);opacity:1}to{opacity:0}}.evo-loader{position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-30px}.evo-loader_darkblue{color:#546e7a}.evo-loader_green{color:#21c68b}.evo-loader_white{color:#fff}.evo-loader__dot{float:left;width:10px;height:10px;margin:0 5px;background:currentColor;border-radius:50%;transform:scale(0);animation:fx 1s ease infinite 0ms}.evo-loader__dot:nth-child(2){animation:fx 1s ease infinite .3s}.evo-loader__dot:nth-child(3){animation:fx 1s ease infinite .6s}\n"], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'evo-loader',
-                      templateUrl: './evo-loader.component.html',
-                      styleUrls: ['./evo-loader.component.scss'],
-                  }]
-          }], ctorParameters: function () { return []; }, propDecorators: { color: [{
-                  type: i0.Input
-              }] } });
-
-  var defaultId = "clip-path-";
-  var EvoCircularLoaderComponent = /** @class */ (function () {
-      function EvoCircularLoaderComponent() {
-          this.clipPathId = defaultId;
-      }
-      EvoCircularLoaderComponent.prototype.ngOnInit = function () {
-          this.clipPathId += "" + defaultId + Math.random().toString(36).substring(2);
-      };
-      return EvoCircularLoaderComponent;
-  }());
-  EvoCircularLoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoCircularLoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EvoCircularLoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoCircularLoaderComponent, selector: "evo-circular-loader", ngImport: i0__namespace, template: "<div class=\"wrapper\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <clipPath [attr.id]=\"clipPathId\">\n            <path d=\"M12 20C10.4178 20 8.87103 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60896 15.0615C4.00346 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12L18 12C18 10.8133 17.6481 9.65327 16.9888 8.66658C16.3295 7.67988 15.3925 6.91085 14.2961 6.45672C13.1997 6.0026 11.9933 5.88378 10.8295 6.11529C9.66557 6.3468 8.59647 6.91824 7.75736 7.75736C6.91824 8.59647 6.3468 9.66557 6.11529 10.8295C5.88378 11.9933 6.0026 13.1997 6.45672 14.2961C6.91085 15.3925 7.67988 16.3295 8.66658 16.9888C9.65327 17.6481 10.8133 18 12 18L12 20Z\"/>\n        </clipPath>\n        <foreignObject x=\"0\" y=\"0\" width=\"17\" height=\"16\" [attr.clip-path]=\"'url(#' + clipPathId + ')'\">\n            <xhtml:div class=\"loader\"></xhtml:div>\n        </foreignObject>\n    </svg>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}:host{display:block;width:24px;height:24px;--evo-circular-loader-animate: spin 1s linear infinite;--evo-circular-loader-color: #C6C6C6 }.wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.wrapper svg{display:block;width:100%;height:100%;animation:var(--evo-circular-loader-animate);fill:none}.wrapper svg .loader{width:100%;height:100%;color:inherit;background:conic-gradient(from 180deg,transparent 0%,var(--evo-circular-loader-color) 100%)}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoCircularLoaderComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'evo-circular-loader',
-                      templateUrl: './evo-circular-loader.component.html',
-                      styleUrls: ['./evo-circular-loader.component.scss'],
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                  }]
-          }] });
-
-  var bundle = [
-      EvoLoaderComponent,
-      EvoCircularLoaderComponent,
-  ];
-  var EvoLoaderModule = /** @class */ (function () {
-      function EvoLoaderModule() {
-      }
-      return EvoLoaderModule;
-  }());
-  EvoLoaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  EvoLoaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, declarations: [EvoLoaderComponent,
-          EvoCircularLoaderComponent], imports: [i1.CommonModule,
-          EvoUiKitModule], exports: [EvoLoaderComponent,
-          EvoCircularLoaderComponent] });
-  EvoLoaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, imports: [[
-              i1.CommonModule,
-              EvoUiKitModule,
-          ]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoLoaderModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      imports: [
-                          i1.CommonModule,
-                          EvoUiKitModule,
-                      ],
-                      declarations: __spreadArray([], __read(bundle)),
-                      exports: __spreadArray([], __read(bundle)),
-                  }]
-          }] });
-
   var EvoModalService = /** @class */ (function () {
       function EvoModalService() {
           this.modalEvents$ = new i3.Subject();
@@ -4659,7 +4806,8 @@
       function EvoModalComponent(modalService, elRef) {
           this.modalService = modalService;
           this.elRef = elRef;
-          this.acceptButtonColor = 'green';
+          this.declineButtonColor = 'secondary';
+          this.declineButtonTheme = 'rounded-outline';
           this.isAcceptLoading = false;
           this.isDeclineDisabled = false;
           this.isVisible = false;
@@ -4676,7 +4824,7 @@
                   this.modalService.register(id);
               }
               else {
-                  throw new Error('EvoModal. Can\'t be registered, wrong id passed');
+                  throw new Error("EvoModal. Can't be registered, wrong id passed");
               }
           },
           enumerable: false,
@@ -4738,9 +4886,11 @@
       };
       EvoModalComponent.prototype.initKeyboardListener = function () {
           var _this = this;
-          return i3.fromEvent(document.body, 'keydown').pipe(operators.takeWhile(function () {
+          return i3.fromEvent(document.body, 'keydown')
+              .pipe(operators.takeWhile(function () {
               return _this.modalState.isOpen;
-          })).subscribe(function (event) {
+          }))
+              .subscribe(function (event) {
               if (_this.declineText && event.keyCode === tsKeycodeEnum.Key.Escape) {
                   _this.handleOnClose(false, _this.closeTargets.ESC);
               }
@@ -4749,7 +4899,7 @@
       return EvoModalComponent;
   }());
   EvoModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoModalComponent, deps: [{ token: EvoModalService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EvoModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoModalComponent, selector: "evo-modal", inputs: { id: "id", titleText: "titleText", acceptText: "acceptText", acceptButtonColor: "acceptButtonColor", declineText: "declineText", asyncAccept: "asyncAccept" }, ngImport: i0__namespace, template: "<div\n    class=\"evo-modal__background\"\n    *ngIf=\"modalState?.isOpen\"\n    [ngClass]=\"{'evo-modal__background_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n></div>\n<div\n    class=\"evo-modal__wrapper\"\n    *ngIf=\"modalState?.isOpen\"\n    [ngClass]=\"{'evo-modal_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n>\n    <div class=\"evo-modal\">\n        <div class=\"evo-modal__icon\">\n            <ng-content select=\"evo-icon\"></ng-content>\n        </div>\n        <h2 class=\"evo-modal__title\" *ngIf=\"titleText !== undefined\">{{ titleText }}</h2>\n        <div class=\"evo-modal__content\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"evo-modal__buttons\" [ngClass]=\"{'evo-modal__buttons_single-btn': !declineText || !acceptText}\">\n            <evo-button\n                class=\"evo-modal__button evo-modal__button_decline\"\n                *ngIf=\"declineText\"\n                (click)=\"handleOnClose(false, closeTargets.BUTTON)\"\n                [disabled]=\"isDeclineDisabled\"\n                color=\"darkblue-lined\"\n            >{{ declineText }}</evo-button>\n            <evo-button\n                class=\"evo-modal__button evo-modal__button_accept\"\n                *ngIf=\"acceptText\"\n                [color]=\"acceptButtonColor\"\n                (click)=\"handleOnClose(true, closeTargets.BUTTON)\"\n                [loading]=\"isAcceptLoading\"\n            >{{ acceptText }}</evo-button>\n        </div>\n    </div>\n</div>\n", styles: [".evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:738px;height:auto;max-height:100%;margin-top:50px;padding:56px 0 16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;opacity:0;transition:margin-top .25s,opacity .25s;transition-delay:50ms}.evo-modal_visible .evo-modal{margin-top:0;opacity:1}@media (min-width: 768px){.evo-modal{width:738px;height:auto;padding:32px 0}}.evo-modal__title{margin-top:0;margin-bottom:0;padding-right:32px;padding-left:32px;font-weight:bold;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;padding-right:16px;padding-left:16px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;padding:0 32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}@media (min-width: 768px){.evo-modal__content{padding:0 16px}}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}.evo-modal__background_visible{opacity:1}.evo-modal__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}.evo-modal__buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:56px;padding-right:32px;padding-left:32px}@media (min-width: 768px){.evo-modal__buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));grid-column-gap:32px;margin:32px auto 0;padding-right:16px;padding-left:16px}.evo-modal__buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal__button{display:block;width:100%}@media (min-width: 768px){.evo-modal__button{width:auto}}.evo-modal__button+.evo-modal__button{margin:0 0 16px}@media (min-width: 768px){.evo-modal__button+.evo-modal__button{margin:0}}\n"], components: [{ type: EvoButtonComponent, selector: "evo-button, button[evo-button]", inputs: ["color", "size", "disabled", "loading"] }], directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  EvoModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoModalComponent, selector: "evo-modal", inputs: { id: "id", titleText: "titleText", acceptText: "acceptText", acceptButtonColor: "acceptButtonColor", acceptButtonTheme: "acceptButtonTheme", declineText: "declineText", declineButtonColor: "declineButtonColor", declineButtonTheme: "declineButtonTheme", asyncAccept: "asyncAccept" }, ngImport: i0__namespace, template: "<div\n    *ngIf=\"modalState?.isOpen\"\n    class=\"evo-modal__background\"\n    [ngClass]=\"{'evo-modal__background_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n></div>\n<div\n    *ngIf=\"modalState?.isOpen\"\n    class=\"evo-modal__wrapper\"\n    [ngClass]=\"{'evo-modal_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n>\n    <div class=\"evo-modal\">\n        <div class=\"evo-modal__icon\">\n            <ng-content select=\"evo-icon\"></ng-content>\n        </div>\n        <h2 *ngIf=\"titleText !== undefined\" class=\"evo-modal__title\">{{ titleText }}</h2>\n        <div class=\"evo-modal__content\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"evo-modal__buttons\" [ngClass]=\"{'evo-modal__buttons_single-btn': !declineText || !acceptText}\">\n            <button\n                *ngIf=\"declineText\"\n                evoButton\n                class=\"evo-modal__button evo-modal__button_decline\"\n                [color]=\"declineButtonColor\"\n                [theme]=\"declineButtonTheme\"\n                [disabled]=\"isDeclineDisabled\"\n                (click)=\"handleOnClose(false, closeTargets.BUTTON)\"\n            >\n                {{ declineText }}\n            </button>\n            <button\n                *ngIf=\"acceptText\"\n                evoButton\n                class=\"evo-modal__button evo-modal__button_accept\"\n                [color]=\"acceptButtonColor\"\n                [theme]=\"acceptButtonTheme\"\n                [loading]=\"isAcceptLoading\"\n                (click)=\"handleOnClose(true, closeTargets.BUTTON)\"\n            >\n                {{ acceptText }}\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:738px;height:auto;max-height:100%;margin-top:50px;padding:56px 0 16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;opacity:0;transition:margin-top .25s,opacity .25s;transition-delay:50ms}.evo-modal_visible .evo-modal{margin-top:0;opacity:1}@media (min-width: 768px){.evo-modal{width:738px;height:auto;padding:32px 0}}.evo-modal__title{margin-top:0;margin-bottom:0;padding-right:32px;padding-left:32px;font-weight:bold;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;padding-right:16px;padding-left:16px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;padding:0 32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}@media (min-width: 768px){.evo-modal__content{padding:0 16px}}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}.evo-modal__background_visible{opacity:1}.evo-modal__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}.evo-modal__buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:56px;padding-right:32px;padding-left:32px}@media (min-width: 768px){.evo-modal__buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));grid-column-gap:32px;margin:32px auto 0;padding-right:16px;padding-left:16px}.evo-modal__buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal__button{display:block;width:100%}@media (min-width: 768px){.evo-modal__button{width:auto}}.evo-modal__button+.evo-modal__button{margin:0 0 16px}@media (min-width: 768px){.evo-modal__button+.evo-modal__button{margin:0}}\n"], components: [{ type: EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: ["size", "color", "theme", "disabled", "loading"] }], directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoModalComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4765,8 +4915,14 @@
                   type: i0.Input
               }], acceptButtonColor: [{
                   type: i0.Input
+              }], acceptButtonTheme: [{
+                  type: i0.Input
               }], declineText: [{
                   type: i0.Input
+              }], declineButtonColor: [{
+                  type: i0.Input
+              }], declineButtonTheme: [{
+                  type: i0.Input
               }], asyncAccept: [{
                   type: i0.Input
               }] } });
@@ -8153,7 +8309,7 @@
               useExisting: i0.forwardRef(function () { return EvoUploadComponent; }),
               multi: true,
           },
-      ], viewQueries: [{ propertyName: "inputFileElement", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"evo-upload\">\n    <label class=\"evo-upload__wrapper\"\n           [evoUiClass]=\"{over: states.isDragOver, disabled: isDisabled || loading}\"\n           (click)=\"onTouched()\"\n           (dragover)=\"handleDragOver($event)\"\n           (dragleave)=\"handleDragLeave($event)\"\n           (drop)=\"handleDrop($event)\">\n        <evo-icon class=\"evo-upload__upload-icon\" shape=\"upload\" [evoUiClass]=\"{disabled: isDisabled || loading}\"></evo-icon>\n        <span class=\"evo-upload__title\" [evoUiClass]=\"{disabled: isDisabled || loading}\">{{ dropZoneLabel }}</span>\n\n        <span class=\"evo-upload__hint\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\n            \u0438\u043B\u0438 <span class=\"evo-upload__fake-link\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435</span>\n            <ng-container *ngIf=\"dropZoneHint\">\n                (<span class=\"evo-upload__additional-hint\" [innerHTML]=\"dropZoneHint | safeHtml\"></span>)\n            </ng-container>\n        </span>\n\n        <input class=\"evo-upload__input\"\n               (change)=\"inputChange($event.target.files)\"\n               [accept]=\"accept\"\n               [disabled]=\"loading || isDisabled\"\n               [attr.multiple]=\"maxFiles === 1 ? null : true\"\n               type=\"file\"\n               #inputFile />\n    </label>\n\n    <evo-alert *ngIf=\"!earlyValidation && filesForm.errors?.maxFiles\" type=\"danger\">\n        <ng-container>\u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}</ng-container>\n    </evo-alert>\n    <evo-alert *ngIf=\"earlyValidation && filesForm.errors\" type=\"danger\">\n        <ul class=\"evo-list\">\n            <li *ngIf=\"filesForm.errors.maxFiles\">\u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}</li>\n            <li *ngIf=\"filesForm.errors.size\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 \u043E\u0434\u043D\u043E\u0433\u043E \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 {{ filesSizeLimitText }}</li>\n            <li *ngIf=\"filesForm.errors.extension\">\u0412\u044B\u0431\u0440\u0430\u043D \u0444\u0430\u0439\u043B \u043D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0433\u043E \u0444\u043E\u0440\u043C\u0430\u0442\u0430</li>\n        </ul>\n    </evo-alert>\n\n    <ul class=\"evo-upload__list\">\n        <li class=\"evo-upload__list-item\" *ngFor=\"let file of filesForm.controls; let i = index\">\n\n            <div class=\"evo-upload__item-inner\">\n                <evo-icon class=\"evo-upload__file-icon\"\n                    shape=\"file\"\n                    svgWidth=\"24\"\n                    svgHeight=\"24\"></evo-icon>\n\n                <span class=\"evo-upload__link evo-link\"\n                    *ngIf=\"clickableFiles\"\n                    (click)=\"clickFile.emit({ file: file.value, index: i })\"\n                    >{{ file.value.name }}</span>\n\n                <span *ngIf=\"!clickableFiles\"\n                    >{{ file.value.name }}</span>\n\n            </div>\n\n            <evo-icon class=\"evo-upload__button-remove\"\n                      shape=\"decline\"\n                      svgWidth=\"24\"\n                      svgHeight=\"24\"\n                      (click)=\"handleItemRemove(i)\"\n                      [evoUiClass]=\"{disabled: loading || isDisabled}\">\n            </evo-icon>\n\n            <div class=\"evo-upload__list-delimiter\"\n                 [evoUiClass]=\"{error: filesForm.controls[i].errors}\"\n                 [ngSwitch]=\"getControlError(filesForm.controls[i])\">\n                <ng-container *ngSwitchCase=\"'size'\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430 \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0439</ng-container>\n                <ng-container *ngSwitchCase=\"'extension'\">\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430</ng-container>\n            </div>\n        </li>\n    </ul>\n\n    <div class=\"evo-upload__controls\" *ngIf=\"filesForm.controls.length\">\n        <button *ngIf=\"!hideClearButton\"\n                evo-button\n                color=\"darkblue-lined\"\n                (click)=\"handleResetButtonClick()\"\n                [disabled]=\"loading || isDisabled\"\n                [loading]=\"loading\">\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u0441\u0451</button>\n        <button *ngIf=\"!hideSubmitButton\"\n                evo-button\n                class=\"evo-upload__submit\"\n                color=\"green\"\n                (click)=\"handleSubmitButtonClick()\"\n                [disabled]=\"filesForm.invalid || loading || isDisabled\"\n                [loading]=\"loading\">\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C</button>\n    </div>\n</div>\n", styles: [".evo-link,.evo-upload__fake-link{color:#0986e2;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}.evo-link:hover,.evo-upload__fake-link:hover{color:#0986e2;border-bottom-color:#0986e2}.evo-link:active,.evo-upload__fake-link:active{color:#0879cb}.evo-link_dashed{border-bottom:1px dashed}.evo-link_dashed:hover{text-decoration:none;border-bottom-color:transparent}.evo-link_danger{color:#ff1817}.evo-link_danger:hover{color:#ff4645;border-bottom-color:#ff4645}.evo-link_danger:active{color:#e51715;border-bottom-color:#e51715}.evo-upload{width:100%}.evo-upload__wrapper{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:24px;padding:32px 0;color:#231f20;background:#F4F6F8;border:2px solid transparent;border-radius:8px}@media (max-width: 767px){.evo-upload__wrapper{padding:16px}}.evo-upload__wrapper_disabled{pointer-events:none}.evo-upload__wrapper_over{border-color:#dbe3ea}.evo-upload__upload-icon{flex:0 0 48px;width:48px;height:48px;margin-bottom:24px;transition:fill .3s;fill:#91b1b8}.evo-upload__upload-icon_disabled{fill:#727272}@media (max-width: 767px){.evo-upload__upload-icon{margin-bottom:16px}}.evo-upload__title{margin-bottom:8px;font-weight:bold;font-size:24px;text-align:center;transition:color .3s}.evo-upload__title_disabled{color:#727272}@media (max-width: 767px){.evo-upload__title{font-size:16px}}.evo-upload__hint{font-size:18px;text-align:center;transition:color .3s}.evo-upload__hint_disabled{color:#727272}@media (max-width: 767px){.evo-upload__hint{font-size:14px}}.evo-upload__fake-link_disabled{color:#727272}.evo-upload__input{display:none}.evo-upload__list{margin-top:24px;margin-bottom:24px}.evo-upload__list:empty{display:none}.evo-upload__file-icon{margin-right:8px;fill:#91b1b8}.evo-upload__list-item{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:15px;color:#212121;font-weight:600;font-size:16px}.evo-upload__list-item:last-of-type{margin-bottom:24px}.evo-upload__item-inner{display:flex;flex-flow:row wrap;align-items:center}.evo-upload__list-delimiter{width:100%;margin-top:15px;color:#ff1817;font-size:14px;font-style:italic;line-height:22px;border-top:1px solid #C6C6C6}.evo-upload__list-delimiter_error{border-top-color:#ff1817}.evo-upload__button-remove{margin-left:auto;cursor:pointer;transition:fill .3s;fill:#91b1b8}.evo-upload__button-remove:not(.evo-upload__button-remove_disabled):hover{fill:#231f20}.evo-upload__button-remove_disabled{cursor:default;fill:#c6c6c6}.evo-upload__controls{display:flex;justify-content:space-between}.evo-upload__submit{margin-left:auto}.evo-upload__link{cursor:pointer}.evo-list{margin-bottom:0}.evo-list li:before{color:#fff}\n"], components: [{ type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }, { type: EvoAlertComponent, selector: "evo-alert", inputs: ["closable", "icon", "iconSrc", "type", "size"], outputs: ["close"] }, { type: EvoButtonComponent, selector: "evo-button, button[evo-button]", inputs: ["color", "size", "disabled", "loading"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "safeHtml": SafeHtmlPipe, "declination": DeclinationPipe } });
+      ], viewQueries: [{ propertyName: "inputFileElement", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"evo-upload\">\n    <label\n        class=\"evo-upload__wrapper\"\n        [evoUiClass]=\"{over: states.isDragOver, disabled: isDisabled || loading}\"\n        (click)=\"onTouched()\"\n        (dragover)=\"handleDragOver($event)\"\n        (dragleave)=\"handleDragLeave($event)\"\n        (drop)=\"handleDrop($event)\"\n    >\n        <evo-icon\n            shape=\"upload\"\n            class=\"evo-upload__upload-icon\"\n            [evoUiClass]=\"{disabled: isDisabled || loading}\"\n        ></evo-icon>\n        <span class=\"evo-upload__title\" [evoUiClass]=\"{disabled: isDisabled || loading}\">{{ dropZoneLabel }}</span>\n\n        <span class=\"evo-upload__hint\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\n            \u0438\u043B\u0438\n            <span class=\"evo-upload__fake-link\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435</span>\n            <ng-container *ngIf=\"dropZoneHint\">\n                (\n                <span class=\"evo-upload__additional-hint\" [innerHTML]=\"dropZoneHint | safeHtml\"></span>\n                )\n            </ng-container>\n        </span>\n\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"evo-upload__input\"\n            [accept]=\"accept\"\n            [disabled]=\"loading || isDisabled\"\n            [attr.multiple]=\"maxFiles === 1 ? null : true\"\n            (change)=\"inputChange($event.target.files)\"\n        />\n    </label>\n\n    <evo-alert *ngIf=\"!earlyValidation && filesForm.errors?.maxFiles\" type=\"danger\">\n        <ng-container>\n            \u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}\n        </ng-container>\n    </evo-alert>\n    <evo-alert *ngIf=\"earlyValidation && filesForm.errors\" type=\"danger\">\n        <ul class=\"evo-list\">\n            <li *ngIf=\"filesForm.errors.maxFiles\">\n                \u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}\n            </li>\n            <li *ngIf=\"filesForm.errors.size\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 \u043E\u0434\u043D\u043E\u0433\u043E \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 {{ filesSizeLimitText }}</li>\n            <li *ngIf=\"filesForm.errors.extension\">\u0412\u044B\u0431\u0440\u0430\u043D \u0444\u0430\u0439\u043B \u043D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0433\u043E \u0444\u043E\u0440\u043C\u0430\u0442\u0430</li>\n        </ul>\n    </evo-alert>\n\n    <ul class=\"evo-upload__list\">\n        <li *ngFor=\"let file of filesForm.controls; let i = index\" class=\"evo-upload__list-item\">\n            <div class=\"evo-upload__item-inner\">\n                <evo-icon shape=\"file\" svgWidth=\"24\" svgHeight=\"24\" class=\"evo-upload__file-icon\"></evo-icon>\n\n                <span\n                    *ngIf=\"clickableFiles\"\n                    class=\"evo-upload__link evo-link\"\n                    (click)=\"clickFile.emit({ file: file.value, index: i })\"\n                >\n                    {{ file.value.name }}\n                </span>\n\n                <span *ngIf=\"!clickableFiles\">{{ file.value.name }}</span>\n            </div>\n\n            <evo-icon\n                shape=\"decline\"\n                svgWidth=\"24\"\n                svgHeight=\"24\"\n                class=\"evo-upload__button-remove\"\n                [evoUiClass]=\"{disabled: loading || isDisabled}\"\n                (click)=\"handleItemRemove(i)\"\n            ></evo-icon>\n\n            <div\n                class=\"evo-upload__list-delimiter\"\n                [evoUiClass]=\"{error: filesForm.controls[i].errors}\"\n                [ngSwitch]=\"getControlError(filesForm.controls[i])\"\n            >\n                <ng-container *ngSwitchCase=\"'size'\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430 \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0439</ng-container>\n                <ng-container *ngSwitchCase=\"'extension'\">\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430</ng-container>\n            </div>\n        </li>\n    </ul>\n\n    <div *ngIf=\"filesForm.controls.length\" class=\"evo-upload__controls\">\n        <button\n            *ngIf=\"!hideClearButton\"\n            evoButton\n            color=\"secondary\"\n            theme=\"rounded-outline\"\n            [disabled]=\"loading || isDisabled\"\n            [loading]=\"loading\"\n            (click)=\"handleResetButtonClick()\"\n        >\n            \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u0441\u0451\n        </button>\n        <button\n            *ngIf=\"!hideSubmitButton\"\n            evoButton\n            color=\"success\"\n            class=\"evo-upload__submit\"\n            [disabled]=\"filesForm.invalid || loading || isDisabled\"\n            [loading]=\"loading\"\n            (click)=\"handleSubmitButtonClick()\"\n        >\n            \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C\n        </button>\n    </div>\n</div>\n", styles: [".evo-link,.evo-upload__fake-link{color:#0986e2;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}.evo-link:hover,.evo-upload__fake-link:hover{color:#0986e2;border-bottom-color:#0986e2}.evo-link:active,.evo-upload__fake-link:active{color:#0879cb}.evo-link_dashed{border-bottom:1px dashed}.evo-link_dashed:hover{text-decoration:none;border-bottom-color:transparent}.evo-link_danger{color:#ff1817}.evo-link_danger:hover{color:#ff4645;border-bottom-color:#ff4645}.evo-link_danger:active{color:#e51715;border-bottom-color:#e51715}.evo-upload{width:100%}.evo-upload__wrapper{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:24px;padding:32px 0;color:#231f20;background:#F4F6F8;border:2px solid transparent;border-radius:8px}@media (max-width: 767px){.evo-upload__wrapper{padding:16px}}.evo-upload__wrapper_disabled{pointer-events:none}.evo-upload__wrapper_over{border-color:#dbe3ea}.evo-upload__upload-icon{flex:0 0 48px;width:48px;height:48px;margin-bottom:24px;transition:fill .3s;fill:#91b1b8}.evo-upload__upload-icon_disabled{fill:#727272}@media (max-width: 767px){.evo-upload__upload-icon{margin-bottom:16px}}.evo-upload__title{margin-bottom:8px;font-weight:bold;font-size:24px;text-align:center;transition:color .3s}.evo-upload__title_disabled{color:#727272}@media (max-width: 767px){.evo-upload__title{font-size:16px}}.evo-upload__hint{font-size:18px;text-align:center;transition:color .3s}.evo-upload__hint_disabled{color:#727272}@media (max-width: 767px){.evo-upload__hint{font-size:14px}}.evo-upload__fake-link_disabled{color:#727272}.evo-upload__input{display:none}.evo-upload__list{margin-top:24px;margin-bottom:24px}.evo-upload__list:empty{display:none}.evo-upload__file-icon{margin-right:8px;fill:#91b1b8}.evo-upload__list-item{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:15px;color:#212121;font-weight:600;font-size:16px}.evo-upload__list-item:last-of-type{margin-bottom:24px}.evo-upload__item-inner{display:flex;flex-flow:row wrap;align-items:center}.evo-upload__list-delimiter{width:100%;margin-top:15px;color:#ff1817;font-size:14px;font-style:italic;line-height:22px;border-top:1px solid #C6C6C6}.evo-upload__list-delimiter_error{border-top-color:#ff1817}.evo-upload__button-remove{margin-left:auto;cursor:pointer;transition:fill .3s;fill:#91b1b8}.evo-upload__button-remove:not(.evo-upload__button-remove_disabled):hover{fill:#231f20}.evo-upload__button-remove_disabled{cursor:default;fill:#c6c6c6}.evo-upload__controls{display:flex;justify-content:space-between}.evo-upload__submit{margin-left:auto}.evo-upload__link{cursor:pointer}.evo-list{margin-bottom:0}.evo-list li:before{color:#fff}\n"], components: [{ type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }, { type: EvoAlertComponent, selector: "evo-alert", inputs: ["closable", "icon", "iconSrc", "type", "size"], outputs: ["close"] }, { type: EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: ["size", "color", "theme", "disabled", "loading"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "safeHtml": SafeHtmlPipe, "declination": DeclinationPipe } });
   __decorate([
       autobind__default["default"]
   ], EvoUploadComponent.prototype, "fileSizeValidator", null);
@@ -8636,6 +8792,64 @@
                   }]
           }] });
 
+  var EvoNavigationButtonComponent = /** @class */ (function () {
+      function EvoNavigationButtonComponent() {
+      }
+      return EvoNavigationButtonComponent;
+  }());
+  EvoNavigationButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoNavigationButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  EvoNavigationButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoNavigationButtonComponent, selector: "evo-navigation-button", ngImport: i0__namespace, template: "<button class=\"evo-navigation-button\">\n    <div class=\"evo-navigation-button__icon-wrapper\">\n        <evo-icon class=\"evo-navigation-button__icon\" shape=\"chevron-left\"></evo-icon>\n    </div>\n    <span class=\"evo-navigation-button__label\"><ng-content></ng-content></span>\n</button>\n", styles: [":host{display:inline-block;margin:0;padding:0;background:none;border:none;cursor:pointer}.evo-navigation-button{display:flex;flex-flow:row nowrap;align-items:center;grid-gap:4px;gap:4px;margin:0;padding:0;background:none;border:none;outline:none}.evo-navigation-button:hover .evo-navigation-button__icon{fill:#3a9ee8}.evo-navigation-button:hover .evo-navigation-button__label{color:#3a9ee8}.evo-navigation-button:active .evo-navigation-button__icon{fill:#0879cb}.evo-navigation-button:active .evo-navigation-button__label{color:#0879cb}.evo-navigation-button__icon-wrapper{width:24px;height:24px}.evo-navigation-button__icon{fill:#0986e2}.evo-navigation-button__label{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;color:#0986e2}\n"], components: [{ type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoNavigationButtonComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'evo-navigation-button',
+                      templateUrl: './evo-navigation-button.component.html',
+                      styleUrls: ['./evo-navigation-button.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                  }]
+          }] });
+
+  var EvoNavigationButtonModule = /** @class */ (function () {
+      function EvoNavigationButtonModule() {
+      }
+      return EvoNavigationButtonModule;
+  }());
+  EvoNavigationButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoNavigationButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  EvoNavigationButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoNavigationButtonModule, declarations: [EvoNavigationButtonComponent], imports: [i1.CommonModule, EvoIconModule], exports: [EvoNavigationButtonComponent] });
+  EvoNavigationButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoNavigationButtonModule, imports: [[
+              i1.CommonModule,
+              EvoIconModule.forRoot([
+                  {
+                      name: 'navigation',
+                      shapes: {
+                          'chevron-left': navigation.iconChevronLeft,
+                      },
+                  },
+              ]),
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EvoNavigationButtonModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      imports: [
+                          i1.CommonModule,
+                          EvoIconModule.forRoot([
+                              {
+                                  name: 'navigation',
+                                  shapes: {
+                                      'chevron-left': navigation.iconChevronLeft,
+                                  },
+                              },
+                          ]),
+                      ],
+                      declarations: [
+                          EvoNavigationButtonComponent,
+                      ],
+                      exports: [
+                          EvoNavigationButtonComponent,
+                      ]
+                  }]
+          }] });
+
   /*
    * Public API Surface of evo-ui-kit
    */
@@ -8674,6 +8888,7 @@
   exports.EvoBaseControl = EvoBaseControl;
   exports.EvoButtonComponent = EvoButtonComponent;
   exports.EvoButtonModule = EvoButtonModule;
+  exports.EvoButtonOldComponent = EvoButtonOldComponent;
   exports.EvoCheckboxComponent = EvoCheckboxComponent;
   exports.EvoCheckboxModule = EvoCheckboxModule;
   exports.EvoChipComponent = EvoChipComponent;
@@ -8718,6 +8933,8 @@
   exports.EvoNavbarComponent = EvoNavbarComponent;
   exports.EvoNavbarItemComponent = EvoNavbarItemComponent;
   exports.EvoNavbarModule = EvoNavbarModule;
+  exports.EvoNavigationButtonComponent = EvoNavigationButtonComponent;
+  exports.EvoNavigationButtonModule = EvoNavigationButtonModule;
   exports.EvoNoteComponent = EvoNoteComponent;
   exports.EvoNoteModule = EvoNoteModule;
   exports.EvoPaginatorComponent = EvoPaginatorComponent;