npm - aeb-ui-kit - Versions diffs - 10.0.0-preview.1194 → 10.0.0-preview.1198 - Mend

aeb-ui-kit 10.0.0-preview.1194 → 10.0.0-preview.1198

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/fesm2022/aeb-ui-kit.mjs +359 -374
package/package.json +1 -1
package/types/aeb-ui-kit.d.ts +63 -49

package/fesm2022/aeb-ui-kit.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { signal, viewChild, input, computed, effect, ViewEncapsulation, Component, NgModule, Directive, inject, ElementRef, contentChild, ChangeDetectionStrategy, output, forwardRef, ViewChild, Input, ContentChild, EnvironmentInjector, ApplicationRef, RendererFactory2, createComponent, Injectable, Renderer2, Pipe, viewChildren, LOCALE_ID, ChangeDetectorRef, contentChildren, TemplateRef, Injector } from '@angular/core';
-import { NgClass, AsyncPipe, DOCUMENT, TitleCasePipe, DatePipe, NgStyle, NgTemplateOutlet, DecimalPipe, formatDate, formatNumber } from '@angular/common';
+import { signal, viewChild, input, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule, Directive, inject, ElementRef, contentChild, output, forwardRef, Input, EnvironmentInjector, ApplicationRef, RendererFactory2, createComponent, Injectable, Renderer2, DestroyRef, Pipe, viewChildren, LOCALE_ID, contentChildren, TemplateRef, Injector } from '@angular/core';
+import { NgClass, DOCUMENT, TitleCasePipe, DatePipe, NgStyle, NgTemplateOutlet, DecimalPipe, formatDate, formatNumber } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
 import { Subject, timer, map, takeUntil, Subscription, filter, fromEvent, debounce, debounceTime } from 'rxjs';
-import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
+import { trigger, transition, style, animate, state, query, stagger } from '@angular/animations';
 import '@angular/common/locales/global/ru';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -38,11 +38,11 @@ class Accordion {
         this._resizeObserver.observe(element);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Accordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: Accordion, isStandalone: true, selector: "aeb-accordion", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.aeb-accordion--open": "isOpen()", "class.aeb-accordion--primary": "type() === \"primary\"", "class.aeb-accordion--secondary": "type() === \"secondary\"" }, classAttribute: "aeb-accordion" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-accordion__header\" (click)=\"openHandler()\">\n  <span class=\"aeb-accordion__heading\"> {{ header() }} </span>\n  <div class=\"aeb-accordion__arrow-icon\">\n    <svg\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.66675 11.3333L15.6465 20.3131C15.8418 20.5083 16.1584 20.5083 16.3536 20.3131L25.3334 11.3333\"\n        stroke=\"#1F2632\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n</div>\n<div\n  class=\"aeb-accordion__content\"\n  [style.height]=\"isOpen() ? contentHeight() + 'px' : '0'\"\n>\n  <div #content class=\"aeb-accordion__content-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-accordion{display:block;box-sizing:border-box;width:100%;color:var(--c-t-primary);cursor:pointer;border-radius:32px;transition:background-color .2s;-webkit-user-select:none;user-select:none;overflow:hidden}@media screen and (max-width:599px){.aeb-accordion{border-radius:20px}}@media screen and (min-width:600px)and (max-width:1200px){.aeb-accordion{border-radius:24px}}.aeb-accordion--primary{background-color:var(--c-bg-light);box-shadow:0 2px 8px #27303e1a}.aeb-accordion--secondary{background-color:var(--c-bg-surface)}.aeb-accordion__header{display:flex;align-items:center;justify-content:space-between;padding:32px;font-size:22px;font-weight:500}.aeb-accordion__header:hover .aeb-accordion__heading{color:var(--c-t-secondary)}.aeb-accordion__header:hover .aeb-accordion__arrow-icon svg path{stroke:var(--c-i-secondary)}@media screen and (max-width:599px){.aeb-accordion__header{padding:20px;font-size:16px}}@media screen and (min-width:600px)and (max-width:1200px){.aeb-accordion__header{padding:24px;font-size:18px}}.aeb-accordion__arrow-icon{display:flex;align-items:center;transition:transform .4s ease-in-out;width:32px;height:32px}@media screen and (max-width:1200px){.aeb-accordion__arrow-icon{width:24px;height:24px}}.aeb-accordion__content{overflow:hidden;height:0;transition:height .4s ease-in-out;background-color:var(--c-bg-light)}.aeb-accordion__content-inner{padding:0 32px 32px;line-height:1.6;-webkit-user-select:text;user-select:text}@media screen and (max-width:599px){.aeb-accordion__content-inner{padding:0 20px 20px}}@media screen and (min-width:600px)and (max-width:1200px){.aeb-accordion__content-inner{padding:0 24px 24px}}.aeb-accordion--open .aeb-accordion__arrow-icon{transform:rotate(180deg)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: Accordion, isStandalone: true, selector: "aeb-accordion", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.aeb-accordion--open": "isOpen()", "class.aeb-accordion--primary": "type() === \"primary\"", "class.aeb-accordion--secondary": "type() === \"secondary\"" }, classAttribute: "aeb-accordion" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-accordion__header\" (click)=\"openHandler()\">\n  <span class=\"aeb-accordion__heading\"> {{ header() }} </span>\n  <div class=\"aeb-accordion__arrow-icon\">\n    <svg\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.66675 11.3333L15.6465 20.3131C15.8418 20.5083 16.1584 20.5083 16.3536 20.3131L25.3334 11.3333\"\n        stroke=\"#1F2632\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n</div>\n<div\n  class=\"aeb-accordion__content\"\n  [style.height]=\"isOpen() ? contentHeight() + 'px' : '0'\"\n>\n  <div #content class=\"aeb-accordion__content-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-accordion{display:block;box-sizing:border-box;width:100%;color:var(--c-t-primary);cursor:pointer;border-radius:32px;transition:background-color .2s;-webkit-user-select:none;user-select:none;overflow:hidden}@media screen and (max-width:599px){.aeb-accordion{border-radius:20px}}@media screen and (min-width:600px)and (max-width:1200px){.aeb-accordion{border-radius:24px}}.aeb-accordion--primary{background-color:var(--c-bg-light);box-shadow:0 2px 8px #27303e1a}.aeb-accordion--secondary{background-color:var(--c-bg-surface)}.aeb-accordion__header{display:flex;align-items:center;justify-content:space-between;padding:32px;font-size:22px;font-weight:500}.aeb-accordion__header:hover .aeb-accordion__heading{color:var(--c-t-secondary)}.aeb-accordion__header:hover .aeb-accordion__arrow-icon svg path{stroke:var(--c-i-secondary)}@media screen and (max-width:599px){.aeb-accordion__header{padding:20px;font-size:16px}}@media screen and (min-width:600px)and (max-width:1200px){.aeb-accordion__header{padding:24px;font-size:18px}}.aeb-accordion__arrow-icon{display:flex;align-items:center;transition:transform .4s ease-in-out;width:32px;height:32px}@media screen and (max-width:1200px){.aeb-accordion__arrow-icon{width:24px;height:24px}}.aeb-accordion__content{overflow:hidden;height:0;transition:height .4s ease-in-out;background-color:var(--c-bg-light)}.aeb-accordion__content-inner{padding:0 32px 32px;line-height:1.6;-webkit-user-select:text;user-select:text}@media screen and (max-width:599px){.aeb-accordion__content-inner{padding:0 20px 20px}}@media screen and (min-width:600px)and (max-width:1200px){.aeb-accordion__content-inner{padding:0 24px 24px}}.aeb-accordion--open .aeb-accordion__arrow-icon{transform:rotate(180deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-accordion', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'aeb-accordion', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'aeb-accordion',
                         '[class.aeb-accordion--open]': 'isOpen()',
                         '[class.aeb-accordion--primary]': 'type() === "primary"',
@@ -69,11 +69,11 @@ class ActionBar {
         this.zIndex = input(...(ngDevMode ? [undefined, { debugName: "zIndex" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ActionBar, isStandalone: true, selector: "aeb-action-bar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"aeb-action-bar\"\n  [style]=\"'z-index: ' + (zIndex() || 'var(--z-fixed)')\"\n  [ngClass]=\"{\n    'aeb-action-bar--open': isOpen()\n  }\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-action-bar{position:fixed;bottom:-90px;z-index:var(--z-fixed);width:100vw;height:90px;background-color:var(--color-mono-0);transition:position,.2s}.aeb-action-bar--open{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ActionBar, isStandalone: true, selector: "aeb-action-bar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"aeb-action-bar\"\n  [style]=\"'z-index: ' + (zIndex() || 'var(--z-fixed)')\"\n  [ngClass]=\"{\n    'aeb-action-bar--open': isOpen()\n  }\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-action-bar{position:fixed;bottom:-90px;z-index:var(--z-fixed);width:100vw;height:90px;background-color:var(--color-mono-0);transition:position,.2s}.aeb-action-bar--open{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ActionBar, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-action-bar', encapsulation: ViewEncapsulation.None, imports: [NgClass], template: "<div\n  class=\"aeb-action-bar\"\n  [style]=\"'z-index: ' + (zIndex() || 'var(--z-fixed)')\"\n  [ngClass]=\"{\n    'aeb-action-bar--open': isOpen()\n  }\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-action-bar{position:fixed;bottom:-90px;z-index:var(--z-fixed);width:100vw;height:90px;background-color:var(--color-mono-0);transition:position,.2s}.aeb-action-bar--open{bottom:0}\n"] }]
+            args: [{ selector: 'aeb-action-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\n  class=\"aeb-action-bar\"\n  [style]=\"'z-index: ' + (zIndex() || 'var(--z-fixed)')\"\n  [ngClass]=\"{\n    'aeb-action-bar--open': isOpen()\n  }\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-action-bar{position:fixed;bottom:-90px;z-index:var(--z-fixed);width:100vw;height:90px;background-color:var(--color-mono-0);transition:position,.2s}.aeb-action-bar--open{bottom:0}\n"] }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
 class ActionBarModule {
@@ -324,12 +324,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class CodeInput {
     get disabled() {
-        return this._disabled;
+        return this._disabled();
+    }
+    get inputValue() {
+        return this._inputValue();
+    }
+    set inputValue(value) {
+        this._inputValue.set(value);
+    }
+    get isFocus() {
+        return this._isFocus();
+    }
+    set isFocus(value) {
+        this._isFocus.set(value);
     }
     constructor() {
         this._destroy$ = new Subject();
-        // Internal state for ControlValueAccessor
-        this._disabled = false;
+        this._timerSub = null;
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._isFocus = signal(false, ...(ngDevMode ? [{ debugName: "_isFocus" }] : /* istanbul ignore next */ []));
+        this._inputValue = signal('', ...(ngDevMode ? [{ debugName: "_inputValue" }] : /* istanbul ignore next */ []));
+        this.input = viewChild('input', ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
         this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
         this.tip = input(...(ngDevMode ? [undefined, { debugName: "tip" }] : /* istanbul ignore next */ []));
         this.initialDisabled = input(false, ...(ngDevMode ? [{ debugName: "initialDisabled" }] : /* istanbul ignore next */ []));
@@ -342,14 +357,12 @@ class CodeInput {
         this.codeCompleted = output();
         this.timeOut = output();
         this.resendClick = output();
-        this.inputValue = '';
-        this.isFocus = false;
-        this.showTimer = false;
-        this.showCodeText = false;
+        this.showTimer = signal(false, ...(ngDevMode ? [{ debugName: "showTimer" }] : /* istanbul ignore next */ []));
+        this.showCodeText = signal(false, ...(ngDevMode ? [{ debugName: "showCodeText" }] : /* istanbul ignore next */ []));
+        this.seconds = signal(0, ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouch = () => { };
-        // Initialize from signal input
-        this._disabled = this.initialDisabled();
+        this._disabled.set(this.initialDisabled());
     }
     get arrayInputValue() {
         return this.inputValue.split('');
@@ -359,6 +372,7 @@ class CodeInput {
         this.handleAutofocus();
     }
     ngOnDestroy() {
+        this._timerSub?.unsubscribe();
         this._destroy$.next();
         this._destroy$.complete();
     }
@@ -380,14 +394,14 @@ class CodeInput {
         }
     }
     writeValue(value) {
-        this.inputValue = value || '';
+        this._inputValue.set(value || '');
         if (this.inputValue.length === this.codeLength() &&
             this.inputValue !== '') {
             this.codeCompleted.emit(this.inputValue);
         }
     }
     setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
+        this._disabled.set(isDisabled);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -396,38 +410,40 @@ class CodeInput {
         this.onTouch = fn;
     }
     startTimer() {
-        this.showTimer = true;
-        this.showCodeText = false;
-        this.seconds$ = timer(0, 1000).pipe(map((i) => this.secondsUntilRetry() - i), takeUntil(this._destroy$));
-        // Auto-stop timer when it reaches 0
-        this.seconds$.pipe(takeUntil(this._destroy$)).subscribe((seconds) => {
-            if (seconds <= 0) {
+        this._timerSub?.unsubscribe();
+        this.showTimer.set(true);
+        this.showCodeText.set(false);
+        this._timerSub = timer(0, 1000)
+            .pipe(map((i) => this.secondsUntilRetry() - i), takeUntil(this._destroy$))
+            .subscribe((sec) => {
+            this.seconds.set(sec);
+            if (sec <= 0) {
                 this.stopTimer();
             }
         });
     }
     stopTimer() {
-        this.showTimer = false;
-        this.showCodeText = true;
+        this.showTimer.set(false);
+        this.showCodeText.set(true);
         this.timeOut.emit();
     }
     clear() {
         this.inputValue = '';
     }
     resend() {
-        this.showCodeText = false;
+        this.showCodeText.set(false);
         this.clear();
         this.startTimer();
         this.resendClick.emit();
-        this.input.nativeElement.focus();
+        this.input().nativeElement.focus();
         this.isFocus = true;
     }
     handleInputBlur() {
         this.isFocus = false;
     }
     focus() {
-        if (this.input?.nativeElement) {
-            this.input.nativeElement.focus();
+        if (this.input()?.nativeElement) {
+            this.input().nativeElement.focus();
             this.isFocus = true;
         }
     }
@@ -443,7 +459,7 @@ class CodeInput {
                 useExisting: forwardRef(() => CodeInput),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (title()) {\n<h2 class=\"aeb-code-input__title\">{{ title() }}</h2>\n} @if (tip()) {\n<span class=\"aeb-code-input__tip\">{{ tip() }}</span>\n}\n<div\n  class=\"aeb-code-input__field-wrapper\"\n  (click)=\"input.focus(); isFocus = true\"\n>\n  <input\n    class=\"aeb-code-input__field\"\n    #input\n    [maxLength]=\"codeLength()\"\n    [value]=\"inputValue\"\n    [disabled]=\"disabled\"\n    inputmode=\"numeric\"\n    [autofocus]=\"isAutofocus()\"\n    autocomplete=\"one-time-code\"\n    pattern=\"[0-9]\"\n    (blur)=\"handleInputBlur()\"\n    (keypress)=\"numbersOnly($event)\"\n    (input)=\"inputChangeHandler($event)\"\n  />\n  @for (value of [].constructor(codeLength()); track $index) {\n  <span\n    class=\"aeb-code-input__field-input\"\n    [ngClass]=\"{\n        'aeb-code-input__field-input--active':\n          inputValue.length === $index && isFocus && !disabled,\n        'aeb-code-input__field-input--has-error': hasError()\n      }\"\n  >\n    {{ arrayInputValue[$index] }}\n    <div\n      [ngClass]=\"{\n          'aeb-code-input__field-input-caret':\n            inputValue.length === $index && isFocus && !disabled,\n          'aeb-code-input__field-input-caret--has-error':\n            inputValue.length === $index && isFocus && !disabled && hasError()\n        }\"\n    ></div>\n  </span>\n  }\n</div>\n@if (hasError() || isResendable()) {\n<div class=\"aeb-code-input__text\">\n  @if (hasError()) {\n  <span class=\"aeb-code-input__text-wrong\">{{ errorMessage() }}</span>\n  } @if (isResendable()) { @if (showTimer) {\n  <div class=\"aeb-code-input__text-wrapper\">\n    <span class=\"aeb-code-input__text-info\"\n      >\u0417\u0430\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u0443\u044E \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0443 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437\n    </span>\n    <span class=\"aeb-code-input__text-time\">{{ seconds$ | async }}</span>\n  </div>\n  } @if (showCodeText) {\n  <span class=\"aeb-code-input__text-again\" (click)=\"resend()\"\n    >\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434 \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E</span\n  >\n  } }\n</div>\n}\n", styles: [".aeb-code-input{display:flex;flex-direction:column;align-items:center;color:var(--c-t-primary);background-color:none}@media screen and (max-width:599px){.aeb-code-input{width:100%;box-sizing:border-box}}.aeb-code-input__field-wrapper{position:relative;display:flex;justify-content:center;gap:16px}.aeb-code-input__field{position:absolute;width:100%;height:56px;box-sizing:border-box;background:transparent;border:none;color:transparent;outline:none;-webkit-user-select:none;user-select:none;caret-color:transparent;z-index:var(--z-dropdown);pointer-events:none}.aeb-code-input__field::selection{background:transparent}.aeb-code-input__field-input{width:56px;height:64px;display:flex;justify-content:center;align-items:center;border:var(--border-skinny) solid var(--c-bg-surface-medium);border-radius:var(--border-rounded);box-sizing:border-box;font-size:var(--font-size-lm);font-weight:500;cursor:text}@media screen and (max-width:599px){.aeb-code-input__field-input{width:48px;height:56px;font-size:var(--font-size-l)}}.aeb-code-input__field-input--active{border:var(--border-skinny) solid var(--c-t-links)}.aeb-code-input__field-input--has-error{border:var(--border-skinny) solid var(--c-t-critical);background-color:var(--c-btn-ws-default)}.aeb-code-input__field-input-caret{width:2px;height:24px;background-color:var(--c-t-links);animation-name:flicker;animation-duration:1s;animation-iteration-count:infinite}.aeb-code-input__field-input-caret--has-error{background-color:var(--c-t-critical)}@keyframes flicker{0%{opacity:0}to{opacity:1}}.aeb-code-input__title{width:fit-content;margin:0 0 16px;font-size:var(--font-size-l);text-align:center;font-weight:500}@media screen and (max-width:599px){.aeb-code-input__title{font-size:18px;margin:0 0 8px}}.aeb-code-input__tip{margin-bottom:32px;text-align:center;color:var(--c-t-secondary)}@media screen and (max-width:599px){.aeb-code-input__tip{font-size:14px;margin-bottom:24px}}.aeb-code-input__text{display:flex;flex-direction:column;align-items:center;margin-top:32px;font-size:var(--font-size-s);line-height:20px}@media screen and (max-width:599px){.aeb-code-input__text{margin-top:24px;font-size:14px}}.aeb-code-input__text-wrapper{text-align:center}.aeb-code-input__text-info{color:var(--c-t-secondary)}.aeb-code-input__text-time{color:var(--c-t-links)}.aeb-code-input__text-again{color:var(--c-t-links);cursor:pointer}.aeb-code-input__text-wrong{color:var(--c-t-critical);text-align:center;font-size:16px}@media screen and (max-width:599px){.aeb-code-input__text-wrong{font-size:12px}}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (title()) {\n<h2 class=\"aeb-code-input__title\">{{ title() }}</h2>\n} @if (tip()) {\n<span class=\"aeb-code-input__tip\">{{ tip() }}</span>\n}\n<div\n  class=\"aeb-code-input__field-wrapper\"\n  (click)=\"input.focus(); isFocus = true\"\n>\n  <input\n    class=\"aeb-code-input__field\"\n    #input\n    [maxLength]=\"codeLength()\"\n    [value]=\"inputValue\"\n    [disabled]=\"disabled\"\n    inputmode=\"numeric\"\n    [autofocus]=\"isAutofocus()\"\n    autocomplete=\"one-time-code\"\n    pattern=\"[0-9]\"\n    (blur)=\"handleInputBlur()\"\n    (keypress)=\"numbersOnly($event)\"\n    (input)=\"inputChangeHandler($event)\"\n  />\n  @for (value of [].constructor(codeLength()); track $index) {\n  <span\n    class=\"aeb-code-input__field-input\"\n    [ngClass]=\"{\n        'aeb-code-input__field-input--active':\n          inputValue.length === $index && isFocus && !disabled,\n        'aeb-code-input__field-input--has-error': hasError()\n      }\"\n  >\n    {{ arrayInputValue[$index] }}\n    <div\n      [ngClass]=\"{\n          'aeb-code-input__field-input-caret':\n            inputValue.length === $index && isFocus && !disabled,\n          'aeb-code-input__field-input-caret--has-error':\n            inputValue.length === $index && isFocus && !disabled && hasError()\n        }\"\n    ></div>\n  </span>\n  }\n</div>\n@if (hasError() || isResendable()) {\n<div class=\"aeb-code-input__text\">\n  @if (hasError()) {\n  <span class=\"aeb-code-input__text-wrong\">{{ errorMessage() }}</span>\n  } @if (isResendable()) { @if (showTimer()) {\n  <div class=\"aeb-code-input__text-wrapper\">\n    <span class=\"aeb-code-input__text-info\"\n      >\u0417\u0430\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u0443\u044E \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0443 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437\n    </span>\n    <span class=\"aeb-code-input__text-time\">{{ seconds() }}</span>\n  </div>\n  } @if (showCodeText()) {\n  <span class=\"aeb-code-input__text-again\" (click)=\"resend()\"\n    >\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434 \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E</span\n  >\n  } }\n</div>\n}\n", styles: [".aeb-code-input{display:flex;flex-direction:column;align-items:center;color:var(--c-t-primary);background-color:none}@media screen and (max-width:599px){.aeb-code-input{width:100%;box-sizing:border-box}}.aeb-code-input__field-wrapper{position:relative;display:flex;justify-content:center;gap:16px}.aeb-code-input__field{position:absolute;width:100%;height:56px;box-sizing:border-box;background:transparent;border:none;color:transparent;outline:none;-webkit-user-select:none;user-select:none;caret-color:transparent;z-index:var(--z-dropdown);pointer-events:none}.aeb-code-input__field::selection{background:transparent}.aeb-code-input__field-input{width:56px;height:64px;display:flex;justify-content:center;align-items:center;border:var(--border-skinny) solid var(--c-bg-surface-medium);border-radius:var(--border-rounded);box-sizing:border-box;font-size:var(--font-size-lm);font-weight:500;cursor:text}@media screen and (max-width:599px){.aeb-code-input__field-input{width:48px;height:56px;font-size:var(--font-size-l)}}.aeb-code-input__field-input--active{border:var(--border-skinny) solid var(--c-t-links)}.aeb-code-input__field-input--has-error{border:var(--border-skinny) solid var(--c-t-critical);background-color:var(--c-btn-ws-default)}.aeb-code-input__field-input-caret{width:2px;height:24px;background-color:var(--c-t-links);animation-name:flicker;animation-duration:1s;animation-iteration-count:infinite}.aeb-code-input__field-input-caret--has-error{background-color:var(--c-t-critical)}@keyframes flicker{0%{opacity:0}to{opacity:1}}.aeb-code-input__title{width:fit-content;margin:0 0 16px;font-size:var(--font-size-l);text-align:center;font-weight:500}@media screen and (max-width:599px){.aeb-code-input__title{font-size:18px;margin:0 0 8px}}.aeb-code-input__tip{margin-bottom:32px;text-align:center;color:var(--c-t-secondary)}@media screen and (max-width:599px){.aeb-code-input__tip{font-size:14px;margin-bottom:24px}}.aeb-code-input__text{display:flex;flex-direction:column;align-items:center;margin-top:32px;font-size:var(--font-size-s);line-height:20px}@media screen and (max-width:599px){.aeb-code-input__text{margin-top:24px;font-size:14px}}.aeb-code-input__text-wrapper{text-align:center}.aeb-code-input__text-info{color:var(--c-t-secondary)}.aeb-code-input__text-time{color:var(--c-t-links)}.aeb-code-input__text-again{color:var(--c-t-links);cursor:pointer}.aeb-code-input__text-wrong{color:var(--c-t-critical);text-align:center;font-size:16px}@media screen and (max-width:599px){.aeb-code-input__text-wrong{font-size:12px}}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CodeInput, decorators: [{
             type: Component,
@@ -453,13 +469,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => CodeInput),
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, imports: [AutofocusDirective, NgClass, AsyncPipe], host: {
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AutofocusDirective, NgClass], host: {
                         class: 'aeb-code-input'
-                    }, template: "@if (title()) {\n<h2 class=\"aeb-code-input__title\">{{ title() }}</h2>\n} @if (tip()) {\n<span class=\"aeb-code-input__tip\">{{ tip() }}</span>\n}\n<div\n  class=\"aeb-code-input__field-wrapper\"\n  (click)=\"input.focus(); isFocus = true\"\n>\n  <input\n    class=\"aeb-code-input__field\"\n    #input\n    [maxLength]=\"codeLength()\"\n    [value]=\"inputValue\"\n    [disabled]=\"disabled\"\n    inputmode=\"numeric\"\n    [autofocus]=\"isAutofocus()\"\n    autocomplete=\"one-time-code\"\n    pattern=\"[0-9]\"\n    (blur)=\"handleInputBlur()\"\n    (keypress)=\"numbersOnly($event)\"\n    (input)=\"inputChangeHandler($event)\"\n  />\n  @for (value of [].constructor(codeLength()); track $index) {\n  <span\n    class=\"aeb-code-input__field-input\"\n    [ngClass]=\"{\n        'aeb-code-input__field-input--active':\n          inputValue.length === $index && isFocus && !disabled,\n        'aeb-code-input__field-input--has-error': hasError()\n      }\"\n  >\n    {{ arrayInputValue[$index] }}\n    <div\n      [ngClass]=\"{\n          'aeb-code-input__field-input-caret':\n            inputValue.length === $index && isFocus && !disabled,\n          'aeb-code-input__field-input-caret--has-error':\n            inputValue.length === $index && isFocus && !disabled && hasError()\n        }\"\n    ></div>\n  </span>\n  }\n</div>\n@if (hasError() || isResendable()) {\n<div class=\"aeb-code-input__text\">\n  @if (hasError()) {\n  <span class=\"aeb-code-input__text-wrong\">{{ errorMessage() }}</span>\n  } @if (isResendable()) { @if (showTimer) {\n  <div class=\"aeb-code-input__text-wrapper\">\n    <span class=\"aeb-code-input__text-info\"\n      >\u0417\u0430\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u0443\u044E \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0443 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437\n    </span>\n    <span class=\"aeb-code-input__text-time\">{{ seconds$ | async }}</span>\n  </div>\n  } @if (showCodeText) {\n  <span class=\"aeb-code-input__text-again\" (click)=\"resend()\"\n    >\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434 \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E</span\n  >\n  } }\n</div>\n}\n", styles: [".aeb-code-input{display:flex;flex-direction:column;align-items:center;color:var(--c-t-primary);background-color:none}@media screen and (max-width:599px){.aeb-code-input{width:100%;box-sizing:border-box}}.aeb-code-input__field-wrapper{position:relative;display:flex;justify-content:center;gap:16px}.aeb-code-input__field{position:absolute;width:100%;height:56px;box-sizing:border-box;background:transparent;border:none;color:transparent;outline:none;-webkit-user-select:none;user-select:none;caret-color:transparent;z-index:var(--z-dropdown);pointer-events:none}.aeb-code-input__field::selection{background:transparent}.aeb-code-input__field-input{width:56px;height:64px;display:flex;justify-content:center;align-items:center;border:var(--border-skinny) solid var(--c-bg-surface-medium);border-radius:var(--border-rounded);box-sizing:border-box;font-size:var(--font-size-lm);font-weight:500;cursor:text}@media screen and (max-width:599px){.aeb-code-input__field-input{width:48px;height:56px;font-size:var(--font-size-l)}}.aeb-code-input__field-input--active{border:var(--border-skinny) solid var(--c-t-links)}.aeb-code-input__field-input--has-error{border:var(--border-skinny) solid var(--c-t-critical);background-color:var(--c-btn-ws-default)}.aeb-code-input__field-input-caret{width:2px;height:24px;background-color:var(--c-t-links);animation-name:flicker;animation-duration:1s;animation-iteration-count:infinite}.aeb-code-input__field-input-caret--has-error{background-color:var(--c-t-critical)}@keyframes flicker{0%{opacity:0}to{opacity:1}}.aeb-code-input__title{width:fit-content;margin:0 0 16px;font-size:var(--font-size-l);text-align:center;font-weight:500}@media screen and (max-width:599px){.aeb-code-input__title{font-size:18px;margin:0 0 8px}}.aeb-code-input__tip{margin-bottom:32px;text-align:center;color:var(--c-t-secondary)}@media screen and (max-width:599px){.aeb-code-input__tip{font-size:14px;margin-bottom:24px}}.aeb-code-input__text{display:flex;flex-direction:column;align-items:center;margin-top:32px;font-size:var(--font-size-s);line-height:20px}@media screen and (max-width:599px){.aeb-code-input__text{margin-top:24px;font-size:14px}}.aeb-code-input__text-wrapper{text-align:center}.aeb-code-input__text-info{color:var(--c-t-secondary)}.aeb-code-input__text-time{color:var(--c-t-links)}.aeb-code-input__text-again{color:var(--c-t-links);cursor:pointer}.aeb-code-input__text-wrong{color:var(--c-t-critical);text-align:center;font-size:16px}@media screen and (max-width:599px){.aeb-code-input__text-wrong{font-size:12px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input']
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tip", required: false }] }], initialDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialDisabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], isResendable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResendable", required: false }] }], secondsUntilRetry: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsUntilRetry", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], codeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeLength", required: false }] }], isAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAutofocus", required: false }] }], codeCompleted: [{ type: i0.Output, args: ["codeCompleted"] }], timeOut: [{ type: i0.Output, args: ["timeOut"] }], resendClick: [{ type: i0.Output, args: ["resendClick"] }] } });
+                    }, template: "@if (title()) {\n<h2 class=\"aeb-code-input__title\">{{ title() }}</h2>\n} @if (tip()) {\n<span class=\"aeb-code-input__tip\">{{ tip() }}</span>\n}\n<div\n  class=\"aeb-code-input__field-wrapper\"\n  (click)=\"input.focus(); isFocus = true\"\n>\n  <input\n    class=\"aeb-code-input__field\"\n    #input\n    [maxLength]=\"codeLength()\"\n    [value]=\"inputValue\"\n    [disabled]=\"disabled\"\n    inputmode=\"numeric\"\n    [autofocus]=\"isAutofocus()\"\n    autocomplete=\"one-time-code\"\n    pattern=\"[0-9]\"\n    (blur)=\"handleInputBlur()\"\n    (keypress)=\"numbersOnly($event)\"\n    (input)=\"inputChangeHandler($event)\"\n  />\n  @for (value of [].constructor(codeLength()); track $index) {\n  <span\n    class=\"aeb-code-input__field-input\"\n    [ngClass]=\"{\n        'aeb-code-input__field-input--active':\n          inputValue.length === $index && isFocus && !disabled,\n        'aeb-code-input__field-input--has-error': hasError()\n      }\"\n  >\n    {{ arrayInputValue[$index] }}\n    <div\n      [ngClass]=\"{\n          'aeb-code-input__field-input-caret':\n            inputValue.length === $index && isFocus && !disabled,\n          'aeb-code-input__field-input-caret--has-error':\n            inputValue.length === $index && isFocus && !disabled && hasError()\n        }\"\n    ></div>\n  </span>\n  }\n</div>\n@if (hasError() || isResendable()) {\n<div class=\"aeb-code-input__text\">\n  @if (hasError()) {\n  <span class=\"aeb-code-input__text-wrong\">{{ errorMessage() }}</span>\n  } @if (isResendable()) { @if (showTimer()) {\n  <div class=\"aeb-code-input__text-wrapper\">\n    <span class=\"aeb-code-input__text-info\"\n      >\u0417\u0430\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u0443\u044E \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0443 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437\n    </span>\n    <span class=\"aeb-code-input__text-time\">{{ seconds() }}</span>\n  </div>\n  } @if (showCodeText()) {\n  <span class=\"aeb-code-input__text-again\" (click)=\"resend()\"\n    >\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434 \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E</span\n  >\n  } }\n</div>\n}\n", styles: [".aeb-code-input{display:flex;flex-direction:column;align-items:center;color:var(--c-t-primary);background-color:none}@media screen and (max-width:599px){.aeb-code-input{width:100%;box-sizing:border-box}}.aeb-code-input__field-wrapper{position:relative;display:flex;justify-content:center;gap:16px}.aeb-code-input__field{position:absolute;width:100%;height:56px;box-sizing:border-box;background:transparent;border:none;color:transparent;outline:none;-webkit-user-select:none;user-select:none;caret-color:transparent;z-index:var(--z-dropdown);pointer-events:none}.aeb-code-input__field::selection{background:transparent}.aeb-code-input__field-input{width:56px;height:64px;display:flex;justify-content:center;align-items:center;border:var(--border-skinny) solid var(--c-bg-surface-medium);border-radius:var(--border-rounded);box-sizing:border-box;font-size:var(--font-size-lm);font-weight:500;cursor:text}@media screen and (max-width:599px){.aeb-code-input__field-input{width:48px;height:56px;font-size:var(--font-size-l)}}.aeb-code-input__field-input--active{border:var(--border-skinny) solid var(--c-t-links)}.aeb-code-input__field-input--has-error{border:var(--border-skinny) solid var(--c-t-critical);background-color:var(--c-btn-ws-default)}.aeb-code-input__field-input-caret{width:2px;height:24px;background-color:var(--c-t-links);animation-name:flicker;animation-duration:1s;animation-iteration-count:infinite}.aeb-code-input__field-input-caret--has-error{background-color:var(--c-t-critical)}@keyframes flicker{0%{opacity:0}to{opacity:1}}.aeb-code-input__title{width:fit-content;margin:0 0 16px;font-size:var(--font-size-l);text-align:center;font-weight:500}@media screen and (max-width:599px){.aeb-code-input__title{font-size:18px;margin:0 0 8px}}.aeb-code-input__tip{margin-bottom:32px;text-align:center;color:var(--c-t-secondary)}@media screen and (max-width:599px){.aeb-code-input__tip{font-size:14px;margin-bottom:24px}}.aeb-code-input__text{display:flex;flex-direction:column;align-items:center;margin-top:32px;font-size:var(--font-size-s);line-height:20px}@media screen and (max-width:599px){.aeb-code-input__text{margin-top:24px;font-size:14px}}.aeb-code-input__text-wrapper{text-align:center}.aeb-code-input__text-info{color:var(--c-t-secondary)}.aeb-code-input__text-time{color:var(--c-t-links)}.aeb-code-input__text-again{color:var(--c-t-links);cursor:pointer}.aeb-code-input__text-wrong{color:var(--c-t-critical);text-align:center;font-size:16px}@media screen and (max-width:599px){.aeb-code-input__text-wrong{font-size:12px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tip", required: false }] }], initialDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialDisabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], isResendable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResendable", required: false }] }], secondsUntilRetry: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsUntilRetry", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], codeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeLength", required: false }] }], isAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAutofocus", required: false }] }], codeCompleted: [{ type: i0.Output, args: ["codeCompleted"] }], timeOut: [{ type: i0.Output, args: ["timeOut"] }], resendClick: [{ type: i0.Output, args: ["resendClick"] }] } });
 class CodeInputModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CodeInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -579,26 +592,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], propDecorators: { aebLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aebLabel", required: false }] }] } });
 class FormField {
-    set formField(value) {
-        this._formField = value;
-        this.applyDisabledState();
-    }
     constructor() {
+        this._formField = contentChild(FormFieldDirective, ...(ngDevMode ? [{ debugName: "_formField" }] : /* istanbul ignore next */ []));
         this.showDescription = input(false, ...(ngDevMode ? [{ debugName: "showDescription" }] : /* istanbul ignore next */ []));
         this.showErrorMessage = input(true, ...(ngDevMode ? [{ debugName: "showErrorMessage" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
         this.validateOnDirty = input(false, ...(ngDevMode ? [{ debugName: "validateOnDirty" }] : /* istanbul ignore next */ []));
-        // Effect to apply disabled state when disabled input changes
         effect(() => {
-            if (this.disabled() !== undefined) {
-                this.applyDisabledState();
-            }
+            this.applyDisabledState();
         });
     }
     get formField() {
-        return this._formField;
+        return this._formField();
     }
     get focused() {
         if (this.formField) {
@@ -649,33 +656,31 @@ class FormField {
         return false;
     }
     applyDisabledState() {
-        if (this.formField === undefined) {
+        const field = this.formField;
+        if (field === undefined) {
             return;
         }
         if (this.disabled()) {
-            this.formField.disable();
+            field.disable();
         }
         else {
-            this.formField.enable();
+            field.enable();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FormField, isStandalone: true, selector: "aeb-form-field", inputs: { showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessage: { classPropertyName: "showErrorMessage", publicName: "showErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, validateOnDirty: { classPropertyName: "validateOnDirty", publicName: "validateOnDirty", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.aeb-form-field--focused": "focused", "class.aeb-form-field--has-value": "hasValue", "class.aeb-form-field--error": "error", "class.aeb-form-field--disabled": "isDisabled", "class.aeb-form-field--has-icon": "hasIcon" }, classAttribute: "aeb-form-field" }, queries: [{ propertyName: "formField", first: true, predicate: FormFieldDirective, descendants: true }], ngImport: i0, template: "<ng-content />\n\n<div class=\"aeb-label__container\">\n  <ng-content select=\"[aebLabel]\" />\n</div>\n\n@if (showIcon()) {\n<ng-content select=\"[aebIcon]\" />\n} @if (showErrorMessage() && error && !disabled() && !isFocused) {\n<div\n  [@labelVisibility]=\"\n      showErrorMessage() && error && !disabled() && !isFocused ? 'visible' : 'void'\n    \"\n  class=\"aeb-form-field--error-message\"\n>\n  <ng-content select=\"[errorMessage]\" />\n</div>\n} @if (showDescription() && !error && !disabled()) {\n<div\n  [@labelVisibility]=\"\n      showDescription() && !error && !disabled() ? 'visible' : 'void'\n    \"\n  class=\"aeb-form-field--description\"\n>\n  <ng-content select=\"[description]\" />\n</div>\n}\n", styles: [".aeb-form-field{--border-color-default: var(--c-bg-surface-medium);--border-color-hovered: var(--c-bg-surface);--border-color-active: var(--c-btn-p-default);--border-color-disabled: var(--c-bg-surface-medium);--border-color-warning-default: var(--c-btn-ws-pressed);--border-color-warning-hovered: var(--c-btn-ws-default);--border-color-warning-focused: var(--c-btn-w-default);--border-color-warning-disabled: var(--c-btn-ws-pressed);--background-color-default: var(--c-bg-surface-medium);--background-color-hovered: var(--c-bg-surface);--background-color-focused: var(--c-bg-default);--background-color-disabled: var(--c-bg-surface-medium);--background-color-warning-default: var(--c-btn-ws-pressed);--background-color-warning-hovered: var(--c-btn-ws-default);--background-color-warning-focused: var(--c-bg-default);--background-color-warning-disabled: var(--c-btn-ws-pressed);--label-color-default: var(--c-t-secondary);--label-color-active: var(--c-t-secondary);--label-color-disabled: var(--c-t-secondary);--input-text-color-default: var(--c-t-primary);--input-text-color-disabled: var(--c-t-secondary);--error-text-color: var(--c-t-critical);position:relative;display:flex;flex-direction:column;color:var(--label-color-default)}.aeb-form-field.aeb-form-field--error .aeb-input{border-color:var(--border-color-warning-default);background-color:var(--background-color-warning-default)}.aeb-form-field.aeb-form-field--error .aeb-input:hover{border-color:var(--border-color-warning-hovered);background-color:var(--background-color-warning-hovered)}.aeb-form-field.aeb-form-field--error .aeb-input:focus{border-color:var(--border-color-warning-focused);background-color:var(--background-color-warning-focused)}.aeb-form-field.aeb-form-field--error .aeb-input:disabled{border-color:var(--border-color-warning-disabled);background-color:var(--background-color-warning-disabled)}.aeb-form-field.aeb-form-field--error .aeb-label__container{color:var(--label-color-error)}.aeb-form-field--focused .aeb-form-field--description{color:var(--label-color-active)}.aeb-form-field--error-message{padding:8px 0;font-size:var(--font-size-xxs);color:var(--error-text-color);overflow-wrap:break-word}.aeb-form-field--error-message:has(*:empty){display:none}.aeb-form-field--description{padding:8px 0;font-size:var(--font-size-xxs);color:var(--input-text-color-disabled);overflow-wrap:break-word}.aeb-form-field.aeb-form-field--disabled .aeb-input{border:var(--border-thin) solid var(--border-color-disabled);color:var(--input-text-color-disabled);background-color:var(--background-color-disabled)}.aeb-form-field.aeb-form-field--disabled .aeb-label__container{color:var(--label-color-disabled)}.aeb-form-field .aeb-input{display:block;box-sizing:border-box;width:100%;min-height:auto;color:var(--input-text-color-default);padding:24px 16px 7px;font-size:16px;border:var(--border-thin) solid var(--border-color-default);background-color:var(--background-color-default);border-radius:var(--border-medium-rounded);box-shadow:none;transition:all ease-in-out .2s linear;font-weight:300}.aeb-form-field .aeb-input:hover{background-color:var(--background-color-hovered);border:var(--border-thin) solid var(--border-color-hovered)}.aeb-form-field .aeb-input:focus{outline:none;background-color:var(--background-color-focused);border:var(--border-thin) solid var(--background-color-focused)}.aeb-form-field .aeb-input,.aeb-form-field .aeb-input::-webkit-search-cancel-button,.aeb-form-field .aeb-input::-webkit-search-decoration,.aeb-form-field .aeb-input::-webkit-search-results-button,.aeb-form-field .aeb-input::-webkit-search-results-decoration{appearance:none}.aeb-form-field .aeb-input::-webkit-contacts-auto-fill-button,.aeb-form-field .aeb-input::-webkit-caps-lock-indicator,.aeb-form-field .aeb-input::-webkit-credentials-auto-fill-button{visibility:hidden}.aeb-form-field .aeb-input::-webkit-outer-spin-button,.aeb-form-field .aeb-input::-webkit-inner-spin-button{appearance:none;margin:0}.aeb-form-field .aeb-input[type=number]{appearance:textfield}.aeb-form-field textarea{resize:vertical;cursor:auto;scroll-behavior:smooth}.aeb-form-field textarea.aeb-input{min-height:70px;scrollbar-color:var(--color-blue-50) transparent;scrollbar-width:thin}.aeb-form-field textarea.aeb-input::-webkit-scrollbar{width:16px}.aeb-form-field textarea.aeb-input::-webkit-scrollbar-thumb{border:6px solid rgba(0,0,0,0);background-color:var(--color-blue-50);background-clip:padding-box;border-radius:9999px}.aeb-form-field textarea.aeb-input::-webkit-scrollbar-corner{background-color:transparent}.aeb-form-field textarea.aeb-input::-webkit-resizer{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZD0iTTMuMjc5NTMgNC44Mzg1NkMzLjA2NDI3IDUuMDUzODEgMi43MTUyNyA1LjA1MzgxIDIuNTAwMDEgNC44Mzg1NkMyLjI4NDc1IDQuNjIzMyAyLjI4NDc1IDQuMjc0MyAyLjUwMDAxIDQuMDU5MDVMNC4wNTkwNCAyLjUwMDAzQzQuMjc0MyAyLjI4NDc3IDQuNjIzMyAyLjI4NDc3IDQuODM4NTYgMi41MDAwM0M1LjA1MzgxIDIuNzE1MjggNS4wNTM4MSAzLjA2NDI4IDQuODM4NTYgMy4yNzk1NEwzLjI3OTUzIDQuODM4NTZaIiBmaWxsPSIjM0I0MDRBIi8+DQo8cGF0aCBkPSJNMC45NDA5NTkgNC4wNTlDMC43MjU3MDIgNC4yNzQyNSAwLjM3NjcgNC4yNzQyNSAwLjE2MTQ0MyA0LjA1OUMtMC4wNTM4MTQzIDMuODQzNzQgLTAuMDUzODE0NCAzLjQ5NDc0IDAuMTYxNDQzIDMuMjc5NDlMMy4yNzk1MSAwLjE2MTQ0MkMzLjQ5NDc2IC0wLjA1MzgxNCAzLjg0Mzc2IC0wLjA1MzgxNCA0LjA1OTAyIDAuMTYxNDQyQzQuMjc0MjggMC4zNzY2OTggNC4yNzQyOCAwLjcyNTY5NyA0LjA1OTAyIDAuOTQwOTUzTDAuOTQwOTU5IDQuMDU5WiIgZmlsbD0iIzNCNDA0QSIvPg0KPC9zdmc+DQo=);background-repeat:no-repeat;background-position:center}.aeb-form-field .aeb-label__container{display:inline-block;position:absolute;top:16px;left:16px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;pointer-events:none;background-color:#0000;transition:all .2s ease-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-form-field.aeb-form-field--focused .aeb-label__container,.aeb-form-field.aeb-form-field--has-value .aeb-label__container{line-height:14px;top:8px;font-size:var(--font-size-xxs)}.aeb-form-field.aeb-form-field--focused .aeb-input{border-color:var(--border-color-active)}.aeb-form-field.aeb-form-field--focused .aeb-label__container{color:var(--label-color-active)}.aeb-form-field.aeb-form-field--has-icon .aeb-input{padding-right:38px}.aeb-form-field.aeb-form-field--has-icon .aeb-label__container{max-width:calc(100% - 56px)}.aeb-form-field *[aebIcon]{position:absolute;top:16px;right:12px;width:24px;height:24px;-webkit-user-select:none;user-select:none}.aeb-form-field *[aebIcon] img{width:24px;height:24px}\n"], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FormField, isStandalone: true, selector: "aeb-form-field", inputs: { showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessage: { classPropertyName: "showErrorMessage", publicName: "showErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, validateOnDirty: { classPropertyName: "validateOnDirty", publicName: "validateOnDirty", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.aeb-form-field--focused": "focused", "class.aeb-form-field--has-value": "hasValue", "class.aeb-form-field--error": "error", "class.aeb-form-field--disabled": "isDisabled", "class.aeb-form-field--has-icon": "hasIcon" }, classAttribute: "aeb-form-field" }, queries: [{ propertyName: "_formField", first: true, predicate: FormFieldDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n\n<div class=\"aeb-label__container\">\n  <ng-content select=\"[aebLabel]\" />\n</div>\n\n@if (showIcon()) {\n<ng-content select=\"[aebIcon]\" />\n} @if (showErrorMessage() && error && !disabled() && !isFocused) {\n<div\n  [@labelVisibility]=\"\n      showErrorMessage() && error && !disabled() && !isFocused ? 'visible' : 'void'\n    \"\n  class=\"aeb-form-field--error-message\"\n>\n  <ng-content select=\"[errorMessage]\" />\n</div>\n} @if (showDescription() && !error && !disabled()) {\n<div\n  [@labelVisibility]=\"\n      showDescription() && !error && !disabled() ? 'visible' : 'void'\n    \"\n  class=\"aeb-form-field--description\"\n>\n  <ng-content select=\"[description]\" />\n</div>\n}\n", styles: [".aeb-form-field{--border-color-default: var(--c-bg-surface-medium);--border-color-hovered: var(--c-bg-surface);--border-color-active: var(--c-btn-p-default);--border-color-disabled: var(--c-bg-surface-medium);--border-color-warning-default: var(--c-btn-ws-pressed);--border-color-warning-hovered: var(--c-btn-ws-default);--border-color-warning-focused: var(--c-btn-w-default);--border-color-warning-disabled: var(--c-btn-ws-pressed);--background-color-default: var(--c-bg-surface-medium);--background-color-hovered: var(--c-bg-surface);--background-color-focused: var(--c-bg-default);--background-color-disabled: var(--c-bg-surface-medium);--background-color-warning-default: var(--c-btn-ws-pressed);--background-color-warning-hovered: var(--c-btn-ws-default);--background-color-warning-focused: var(--c-bg-default);--background-color-warning-disabled: var(--c-btn-ws-pressed);--label-color-default: var(--c-t-secondary);--label-color-active: var(--c-t-secondary);--label-color-disabled: var(--c-t-secondary);--input-text-color-default: var(--c-t-primary);--input-text-color-disabled: var(--c-t-secondary);--error-text-color: var(--c-t-critical);position:relative;display:flex;flex-direction:column;color:var(--label-color-default)}.aeb-form-field.aeb-form-field--error .aeb-input{border-color:var(--border-color-warning-default);background-color:var(--background-color-warning-default)}.aeb-form-field.aeb-form-field--error .aeb-input:hover{border-color:var(--border-color-warning-hovered);background-color:var(--background-color-warning-hovered)}.aeb-form-field.aeb-form-field--error .aeb-input:focus{border-color:var(--border-color-warning-focused);background-color:var(--background-color-warning-focused)}.aeb-form-field.aeb-form-field--error .aeb-input:disabled{border-color:var(--border-color-warning-disabled);background-color:var(--background-color-warning-disabled)}.aeb-form-field.aeb-form-field--error .aeb-label__container{color:var(--label-color-error)}.aeb-form-field--focused .aeb-form-field--description{color:var(--label-color-active)}.aeb-form-field--error-message{padding:8px 0;font-size:var(--font-size-xxs);color:var(--error-text-color);overflow-wrap:break-word}.aeb-form-field--error-message:has(*:empty){display:none}.aeb-form-field--description{padding:8px 0;font-size:var(--font-size-xxs);color:var(--input-text-color-disabled);overflow-wrap:break-word}.aeb-form-field.aeb-form-field--disabled .aeb-input{border:var(--border-thin) solid var(--border-color-disabled);color:var(--input-text-color-disabled);background-color:var(--background-color-disabled)}.aeb-form-field.aeb-form-field--disabled .aeb-label__container{color:var(--label-color-disabled)}.aeb-form-field .aeb-input{display:block;box-sizing:border-box;width:100%;min-height:auto;color:var(--input-text-color-default);padding:24px 16px 7px;font-size:16px;border:var(--border-thin) solid var(--border-color-default);background-color:var(--background-color-default);border-radius:var(--border-medium-rounded);box-shadow:none;transition:all ease-in-out .2s linear;font-weight:300}.aeb-form-field .aeb-input:hover{background-color:var(--background-color-hovered);border:var(--border-thin) solid var(--border-color-hovered)}.aeb-form-field .aeb-input:focus{outline:none;background-color:var(--background-color-focused);border:var(--border-thin) solid var(--background-color-focused)}.aeb-form-field .aeb-input,.aeb-form-field .aeb-input::-webkit-search-cancel-button,.aeb-form-field .aeb-input::-webkit-search-decoration,.aeb-form-field .aeb-input::-webkit-search-results-button,.aeb-form-field .aeb-input::-webkit-search-results-decoration{appearance:none}.aeb-form-field .aeb-input::-webkit-contacts-auto-fill-button,.aeb-form-field .aeb-input::-webkit-caps-lock-indicator,.aeb-form-field .aeb-input::-webkit-credentials-auto-fill-button{visibility:hidden}.aeb-form-field .aeb-input::-webkit-outer-spin-button,.aeb-form-field .aeb-input::-webkit-inner-spin-button{appearance:none;margin:0}.aeb-form-field .aeb-input[type=number]{appearance:textfield}.aeb-form-field textarea{resize:vertical;cursor:auto;scroll-behavior:smooth}.aeb-form-field textarea.aeb-input{min-height:70px;scrollbar-color:var(--color-blue-50) transparent;scrollbar-width:thin}.aeb-form-field textarea.aeb-input::-webkit-scrollbar{width:16px}.aeb-form-field textarea.aeb-input::-webkit-scrollbar-thumb{border:6px solid rgba(0,0,0,0);background-color:var(--color-blue-50);background-clip:padding-box;border-radius:9999px}.aeb-form-field textarea.aeb-input::-webkit-scrollbar-corner{background-color:transparent}.aeb-form-field textarea.aeb-input::-webkit-resizer{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZD0iTTMuMjc5NTMgNC44Mzg1NkMzLjA2NDI3IDUuMDUzODEgMi43MTUyNyA1LjA1MzgxIDIuNTAwMDEgNC44Mzg1NkMyLjI4NDc1IDQuNjIzMyAyLjI4NDc1IDQuMjc0MyAyLjUwMDAxIDQuMDU5MDVMNC4wNTkwNCAyLjUwMDAzQzQuMjc0MyAyLjI4NDc3IDQuNjIzMyAyLjI4NDc3IDQuODM4NTYgMi41MDAwM0M1LjA1MzgxIDIuNzE1MjggNS4wNTM4MSAzLjA2NDI4IDQuODM4NTYgMy4yNzk1NEwzLjI3OTUzIDQuODM4NTZaIiBmaWxsPSIjM0I0MDRBIi8+DQo8cGF0aCBkPSJNMC45NDA5NTkgNC4wNTlDMC43MjU3MDIgNC4yNzQyNSAwLjM3NjcgNC4yNzQyNSAwLjE2MTQ0MyA0LjA1OUMtMC4wNTM4MTQzIDMuODQzNzQgLTAuMDUzODE0NCAzLjQ5NDc0IDAuMTYxNDQzIDMuMjc5NDlMMy4yNzk1MSAwLjE2MTQ0MkMzLjQ5NDc2IC0wLjA1MzgxNCAzLjg0Mzc2IC0wLjA1MzgxNCA0LjA1OTAyIDAuMTYxNDQyQzQuMjc0MjggMC4zNzY2OTggNC4yNzQyOCAwLjcyNTY5NyA0LjA1OTAyIDAuOTQwOTUzTDAuOTQwOTU5IDQuMDU5WiIgZmlsbD0iIzNCNDA0QSIvPg0KPC9zdmc+DQo=);background-repeat:no-repeat;background-position:center}.aeb-form-field .aeb-label__container{display:inline-block;position:absolute;top:16px;left:16px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;pointer-events:none;background-color:#0000;transition:all .2s ease-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-form-field.aeb-form-field--focused .aeb-label__container,.aeb-form-field.aeb-form-field--has-value .aeb-label__container{line-height:14px;top:8px;font-size:var(--font-size-xxs)}.aeb-form-field.aeb-form-field--focused .aeb-input{border-color:var(--border-color-active)}.aeb-form-field.aeb-form-field--focused .aeb-label__container{color:var(--label-color-active)}.aeb-form-field.aeb-form-field--has-icon .aeb-input{padding-right:38px}.aeb-form-field.aeb-form-field--has-icon .aeb-label__container{max-width:calc(100% - 56px)}.aeb-form-field *[aebIcon]{position:absolute;top:16px;right:12px;width:24px;height:24px;-webkit-user-select:none;user-select:none}.aeb-form-field *[aebIcon] img{width:24px;height:24px}\n"], animations: [
             trigger('labelVisibility', [
-                state('void', style({
-                    'font-size': '0'
-                })),
-                state('visible', style({
-                    'font-size': 'var(--font-size-xxs)'
-                })),
-                transition('void => visible', [animate('.1s')]),
-                transition('visible => void', [animate('.05s')])
+                transition(':enter', [
+                    style({ 'font-size': '0' }),
+                    animate('.1s', style({ 'font-size': 'var(--font-size-xxs)' }))
+                ]),
+                transition(':leave', [animate('.05s', style({ 'font-size': '0' }))])
             ])
-        ], encapsulation: i0.ViewEncapsulation.None }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FormField, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-form-field', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'aeb-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'aeb-form-field',
                         '[class.aeb-form-field--focused]': 'focused',
                         '[class.aeb-form-field--has-value]': 'hasValue',
@@ -684,20 +689,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[class.aeb-form-field--has-icon]': 'hasIcon'
                     }, animations: [
                         trigger('labelVisibility', [
-                            state('void', style({
-                                'font-size': '0'
-                            })),
-                            state('visible', style({
-                                'font-size': 'var(--font-size-xxs)'
-                            })),
-                            transition('void => visible', [animate('.1s')]),
-                            transition('visible => void', [animate('.05s')])
+                            transition(':enter', [
+                                style({ 'font-size': '0' }),
+                                animate('.1s', style({ 'font-size': 'var(--font-size-xxs)' }))
+                            ]),
+                            transition(':leave', [animate('.05s', style({ 'font-size': '0' }))])
                         ])
                     ], template: "<ng-content />\n\n<div class=\"aeb-label__container\">\n  <ng-content select=\"[aebLabel]\" />\n</div>\n\n@if (showIcon()) {\n<ng-content select=\"[aebIcon]\" />\n} @if (showErrorMessage() && error && !disabled() && !isFocused) {\n<div\n  [@labelVisibility]=\"\n      showErrorMessage() && error && !disabled() && !isFocused ? 'visible' : 'void'\n    \"\n  class=\"aeb-form-field--error-message\"\n>\n  <ng-content select=\"[errorMessage]\" />\n</div>\n} @if (showDescription() && !error && !disabled()) {\n<div\n  [@labelVisibility]=\"\n      showDescription() && !error && !disabled() ? 'visible' : 'void'\n    \"\n  class=\"aeb-form-field--description\"\n>\n  <ng-content select=\"[description]\" />\n</div>\n}\n", styles: [".aeb-form-field{--border-color-default: var(--c-bg-surface-medium);--border-color-hovered: var(--c-bg-surface);--border-color-active: var(--c-btn-p-default);--border-color-disabled: var(--c-bg-surface-medium);--border-color-warning-default: var(--c-btn-ws-pressed);--border-color-warning-hovered: var(--c-btn-ws-default);--border-color-warning-focused: var(--c-btn-w-default);--border-color-warning-disabled: var(--c-btn-ws-pressed);--background-color-default: var(--c-bg-surface-medium);--background-color-hovered: var(--c-bg-surface);--background-color-focused: var(--c-bg-default);--background-color-disabled: var(--c-bg-surface-medium);--background-color-warning-default: var(--c-btn-ws-pressed);--background-color-warning-hovered: var(--c-btn-ws-default);--background-color-warning-focused: var(--c-bg-default);--background-color-warning-disabled: var(--c-btn-ws-pressed);--label-color-default: var(--c-t-secondary);--label-color-active: var(--c-t-secondary);--label-color-disabled: var(--c-t-secondary);--input-text-color-default: var(--c-t-primary);--input-text-color-disabled: var(--c-t-secondary);--error-text-color: var(--c-t-critical);position:relative;display:flex;flex-direction:column;color:var(--label-color-default)}.aeb-form-field.aeb-form-field--error .aeb-input{border-color:var(--border-color-warning-default);background-color:var(--background-color-warning-default)}.aeb-form-field.aeb-form-field--error .aeb-input:hover{border-color:var(--border-color-warning-hovered);background-color:var(--background-color-warning-hovered)}.aeb-form-field.aeb-form-field--error .aeb-input:focus{border-color:var(--border-color-warning-focused);background-color:var(--background-color-warning-focused)}.aeb-form-field.aeb-form-field--error .aeb-input:disabled{border-color:var(--border-color-warning-disabled);background-color:var(--background-color-warning-disabled)}.aeb-form-field.aeb-form-field--error .aeb-label__container{color:var(--label-color-error)}.aeb-form-field--focused .aeb-form-field--description{color:var(--label-color-active)}.aeb-form-field--error-message{padding:8px 0;font-size:var(--font-size-xxs);color:var(--error-text-color);overflow-wrap:break-word}.aeb-form-field--error-message:has(*:empty){display:none}.aeb-form-field--description{padding:8px 0;font-size:var(--font-size-xxs);color:var(--input-text-color-disabled);overflow-wrap:break-word}.aeb-form-field.aeb-form-field--disabled .aeb-input{border:var(--border-thin) solid var(--border-color-disabled);color:var(--input-text-color-disabled);background-color:var(--background-color-disabled)}.aeb-form-field.aeb-form-field--disabled .aeb-label__container{color:var(--label-color-disabled)}.aeb-form-field .aeb-input{display:block;box-sizing:border-box;width:100%;min-height:auto;color:var(--input-text-color-default);padding:24px 16px 7px;font-size:16px;border:var(--border-thin) solid var(--border-color-default);background-color:var(--background-color-default);border-radius:var(--border-medium-rounded);box-shadow:none;transition:all ease-in-out .2s linear;font-weight:300}.aeb-form-field .aeb-input:hover{background-color:var(--background-color-hovered);border:var(--border-thin) solid var(--border-color-hovered)}.aeb-form-field .aeb-input:focus{outline:none;background-color:var(--background-color-focused);border:var(--border-thin) solid var(--background-color-focused)}.aeb-form-field .aeb-input,.aeb-form-field .aeb-input::-webkit-search-cancel-button,.aeb-form-field .aeb-input::-webkit-search-decoration,.aeb-form-field .aeb-input::-webkit-search-results-button,.aeb-form-field .aeb-input::-webkit-search-results-decoration{appearance:none}.aeb-form-field .aeb-input::-webkit-contacts-auto-fill-button,.aeb-form-field .aeb-input::-webkit-caps-lock-indicator,.aeb-form-field .aeb-input::-webkit-credentials-auto-fill-button{visibility:hidden}.aeb-form-field .aeb-input::-webkit-outer-spin-button,.aeb-form-field .aeb-input::-webkit-inner-spin-button{appearance:none;margin:0}.aeb-form-field .aeb-input[type=number]{appearance:textfield}.aeb-form-field textarea{resize:vertical;cursor:auto;scroll-behavior:smooth}.aeb-form-field textarea.aeb-input{min-height:70px;scrollbar-color:var(--color-blue-50) transparent;scrollbar-width:thin}.aeb-form-field textarea.aeb-input::-webkit-scrollbar{width:16px}.aeb-form-field textarea.aeb-input::-webkit-scrollbar-thumb{border:6px solid rgba(0,0,0,0);background-color:var(--color-blue-50);background-clip:padding-box;border-radius:9999px}.aeb-form-field textarea.aeb-input::-webkit-scrollbar-corner{background-color:transparent}.aeb-form-field textarea.aeb-input::-webkit-resizer{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZD0iTTMuMjc5NTMgNC44Mzg1NkMzLjA2NDI3IDUuMDUzODEgMi43MTUyNyA1LjA1MzgxIDIuNTAwMDEgNC44Mzg1NkMyLjI4NDc1IDQuNjIzMyAyLjI4NDc1IDQuMjc0MyAyLjUwMDAxIDQuMDU5MDVMNC4wNTkwNCAyLjUwMDAzQzQuMjc0MyAyLjI4NDc3IDQuNjIzMyAyLjI4NDc3IDQuODM4NTYgMi41MDAwM0M1LjA1MzgxIDIuNzE1MjggNS4wNTM4MSAzLjA2NDI4IDQuODM4NTYgMy4yNzk1NEwzLjI3OTUzIDQuODM4NTZaIiBmaWxsPSIjM0I0MDRBIi8+DQo8cGF0aCBkPSJNMC45NDA5NTkgNC4wNTlDMC43MjU3MDIgNC4yNzQyNSAwLjM3NjcgNC4yNzQyNSAwLjE2MTQ0MyA0LjA1OUMtMC4wNTM4MTQzIDMuODQzNzQgLTAuMDUzODE0NCAzLjQ5NDc0IDAuMTYxNDQzIDMuMjc5NDlMMy4yNzk1MSAwLjE2MTQ0MkMzLjQ5NDc2IC0wLjA1MzgxNCAzLjg0Mzc2IC0wLjA1MzgxNCA0LjA1OTAyIDAuMTYxNDQyQzQuMjc0MjggMC4zNzY2OTggNC4yNzQyOCAwLjcyNTY5NyA0LjA1OTAyIDAuOTQwOTUzTDAuOTQwOTU5IDQuMDU5WiIgZmlsbD0iIzNCNDA0QSIvPg0KPC9zdmc+DQo=);background-repeat:no-repeat;background-position:center}.aeb-form-field .aeb-label__container{display:inline-block;position:absolute;top:16px;left:16px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;pointer-events:none;background-color:#0000;transition:all .2s ease-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-form-field.aeb-form-field--focused .aeb-label__container,.aeb-form-field.aeb-form-field--has-value .aeb-label__container{line-height:14px;top:8px;font-size:var(--font-size-xxs)}.aeb-form-field.aeb-form-field--focused .aeb-input{border-color:var(--border-color-active)}.aeb-form-field.aeb-form-field--focused .aeb-label__container{color:var(--label-color-active)}.aeb-form-field.aeb-form-field--has-icon .aeb-input{padding-right:38px}.aeb-form-field.aeb-form-field--has-icon .aeb-label__container{max-width:calc(100% - 56px)}.aeb-form-field *[aebIcon]{position:absolute;top:16px;right:12px;width:24px;height:24px;-webkit-user-select:none;user-select:none}.aeb-form-field *[aebIcon] img{width:24px;height:24px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formField: [{
-                type: ContentChild,
-                args: [FormFieldDirective]
-            }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }], showErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], validateOnDirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateOnDirty", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { _formField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormFieldDirective), { isSignal: true }] }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }], showErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], validateOnDirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateOnDirty", required: false }] }] } });
 class FormFieldModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -738,45 +737,35 @@ class DomService {
         this._applicationRef = inject(ApplicationRef);
         this._document = inject(DOCUMENT);
         this._renderer = inject(RendererFactory2).createRenderer(null, null);
-        this._componentRef = null;
-        this._containerElement = null;
-    }
-    attachComponent(component, componentProps) {
-        // Create a container element for the component
-        this._containerElement = this._renderer.createElement('div');
-        this._renderer.appendChild(this._document.body, this._containerElement);
-        if (!this._containerElement) {
-            return null;
-        }
-        // Create component using modern API (Angular 14+)
-        // createComponent replaces the deprecated ComponentFactoryResolver
+        this._components = new Map();
+    }
+    attachComponent(key, component, componentProps) {
+        const containerElement = this._renderer.createElement('div');
+        this._renderer.appendChild(this._document.body, containerElement);
         const componentRef = createComponent(component, {
-            hostElement: this._containerElement,
+            hostElement: containerElement,
             environmentInjector: this._environmentInjector
         });
-        // Set component inputs
         if (componentProps && typeof componentRef.instance === 'object') {
-            for (const [key, value] of Object.entries(componentProps)) {
-                // Use Angular's setInput API to support both classic @Input and signal inputs
-                componentRef.setInput(key, value);
+            for (const [prop, value] of Object.entries(componentProps)) {
+                componentRef.setInput(prop, value);
             }
         }
-        // Attach the component view to the application for change detection
         this._applicationRef.attachView(componentRef.hostView);
-        this._componentRef = componentRef;
+        this._components.set(key, { componentRef, containerElement });
         return componentRef.instance;
     }
-    removeComponent() {
-        if (this._componentRef) {
-            this._applicationRef.detachView(this._componentRef.hostView);
-            this._componentRef.destroy();
-            this._componentRef = null;
+    removeComponent(key) {
+        const entry = this._components.get(key);
+        if (!entry) {
+            return;
         }
-        // Remove the container element
-        if (this._containerElement?.parentNode) {
-            this._renderer.removeChild(this._document.body, this._containerElement);
-            this._containerElement = null;
+        this._applicationRef.detachView(entry.componentRef.hostView);
+        entry.componentRef.destroy();
+        if (entry.containerElement?.parentNode) {
+            this._renderer.removeChild(this._document.body, entry.containerElement);
         }
+        this._components.delete(key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DomService, providedIn: 'root' }); }
@@ -791,6 +780,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Tooltip {
     constructor() {
         this._renderer = inject(Renderer2);
+        this.tooltipRef = viewChild.required('tooltip');
+        this.containerRef = viewChild.required('container');
         this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.data = input('', ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.html = input('', ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
@@ -799,33 +790,27 @@ class Tooltip {
     }
     ngAfterViewInit() {
         const el = this.contentEl();
-        if (el && this.container?.nativeElement) {
+        const container = this.containerRef();
+        if (el && container?.nativeElement) {
             const clone = el.cloneNode(true);
             this._renderer.setStyle(clone, 'display', '');
-            this._renderer.appendChild(this.container.nativeElement, clone);
-        }
-        else if (this.html()) {
-            // innerHTML binding in template will handle this
+            this._renderer.appendChild(container.nativeElement, clone);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Tooltip, isStandalone: true, selector: "aeb-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, contentEl: { classPropertyName: "contentEl", publicName: "contentEl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #tooltip [class]=\"'aeb-tooltip aeb-tooltip--' + type()\">\n  @if (title()) {\n  <p class=\"aeb-tooltip__title\">{{ title() }}</p>\n  }\n  <div\n    #container\n    class=\"aeb-tooltip__container\"\n    [innerHTML]=\"!contentEl() ? html() || data() : null\"\n  ></div>\n</div>\n", styles: ["@keyframes out{0%{transform:scale(0)}to{transform:scale(1)}}.aeb-tooltip{position:fixed;z-index:var(--z-tooltip);pointer-events:none;border-radius:20px;opacity:0;transition:opacity .2s;min-width:194px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;color:var(--c-t-primary)}.aeb-tooltip:before{position:absolute;width:14px;height:14px;content:\"\";transform:rotate(45deg);background-color:inherit}.aeb-tooltip--open{opacity:1;animation:out .2s}.aeb-tooltip--primary{background-color:var(--c-bg-light);box-shadow:0 0 12px #27303e1f}.aeb-tooltip--secondary{background-color:var(--c-bg-surface-medium)}.aeb-tooltip__title{font-weight:500;font-size:16px;margin:0 0 8px}.aeb-tooltip__container{position:relative;align-items:center;justify-content:center;width:100%;font-size:14px;word-break:keep-all;white-space:nowrap}.aeb-tooltip--top:before{bottom:-7px;left:calc(50% - 7px)}.aeb-tooltip--right:before{top:calc(50% - 7px);left:-7px}.aeb-tooltip--bottom:before{top:-7px;left:calc(50% - 7px)}.aeb-tooltip--left:before{top:calc(50% - 7px);left:calc(100% - 7px)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Tooltip, isStandalone: true, selector: "aeb-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, contentEl: { classPropertyName: "contentEl", publicName: "contentEl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #tooltip [class]=\"'aeb-tooltip aeb-tooltip--' + type()\">\n  @if (title()) {\n  <p class=\"aeb-tooltip__title\">{{ title() }}</p>\n  }\n  <div\n    #container\n    class=\"aeb-tooltip__container\"\n    [innerHTML]=\"!contentEl() ? html() || data() : null\"\n  ></div>\n</div>\n", styles: ["@keyframes out{0%{transform:scale(0)}to{transform:scale(1)}}.aeb-tooltip{position:absolute;z-index:var(--z-tooltip);pointer-events:none;border-radius:20px;opacity:0;transition:opacity .2s;min-width:194px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;color:var(--c-t-primary)}.aeb-tooltip:before{position:absolute;width:14px;height:14px;content:\"\";transform:rotate(45deg);background-color:inherit}.aeb-tooltip--open{opacity:1;animation:out .2s}.aeb-tooltip--primary{background-color:var(--c-bg-light);box-shadow:0 0 12px #27303e1f}.aeb-tooltip--secondary{background-color:var(--c-bg-surface-medium)}.aeb-tooltip__title{font-weight:500;font-size:16px;margin:0 0 8px}.aeb-tooltip__container{position:relative;align-items:center;justify-content:center;width:100%;font-size:14px;word-break:keep-all;white-space:nowrap}.aeb-tooltip--top:before{bottom:-7px;left:calc(50% - 7px)}.aeb-tooltip--right:before{top:calc(50% - 7px);left:-7px}.aeb-tooltip--bottom:before{top:-7px;left:calc(50% - 7px)}.aeb-tooltip--left:before{top:calc(50% - 7px);left:calc(100% - 7px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Tooltip, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-tooltip', encapsulation: ViewEncapsulation.None, template: "<div #tooltip [class]=\"'aeb-tooltip aeb-tooltip--' + type()\">\n  @if (title()) {\n  <p class=\"aeb-tooltip__title\">{{ title() }}</p>\n  }\n  <div\n    #container\n    class=\"aeb-tooltip__container\"\n    [innerHTML]=\"!contentEl() ? html() || data() : null\"\n  ></div>\n</div>\n", styles: ["@keyframes out{0%{transform:scale(0)}to{transform:scale(1)}}.aeb-tooltip{position:fixed;z-index:var(--z-tooltip);pointer-events:none;border-radius:20px;opacity:0;transition:opacity .2s;min-width:194px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;color:var(--c-t-primary)}.aeb-tooltip:before{position:absolute;width:14px;height:14px;content:\"\";transform:rotate(45deg);background-color:inherit}.aeb-tooltip--open{opacity:1;animation:out .2s}.aeb-tooltip--primary{background-color:var(--c-bg-light);box-shadow:0 0 12px #27303e1f}.aeb-tooltip--secondary{background-color:var(--c-bg-surface-medium)}.aeb-tooltip__title{font-weight:500;font-size:16px;margin:0 0 8px}.aeb-tooltip__container{position:relative;align-items:center;justify-content:center;width:100%;font-size:14px;word-break:keep-all;white-space:nowrap}.aeb-tooltip--top:before{bottom:-7px;left:calc(50% - 7px)}.aeb-tooltip--right:before{top:calc(50% - 7px);left:-7px}.aeb-tooltip--bottom:before{top:-7px;left:calc(50% - 7px)}.aeb-tooltip--left:before{top:calc(50% - 7px);left:calc(100% - 7px)}\n"] }]
-        }], propDecorators: { tooltip: [{
-                type: ViewChild,
-                args: ['tooltip']
-            }], container: [{
-                type: ViewChild,
-                args: ['container']
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], contentEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentEl", required: false }] }] } });
+            args: [{ selector: 'aeb-tooltip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tooltip [class]=\"'aeb-tooltip aeb-tooltip--' + type()\">\n  @if (title()) {\n  <p class=\"aeb-tooltip__title\">{{ title() }}</p>\n  }\n  <div\n    #container\n    class=\"aeb-tooltip__container\"\n    [innerHTML]=\"!contentEl() ? html() || data() : null\"\n  ></div>\n</div>\n", styles: ["@keyframes out{0%{transform:scale(0)}to{transform:scale(1)}}.aeb-tooltip{position:absolute;z-index:var(--z-tooltip);pointer-events:none;border-radius:20px;opacity:0;transition:opacity .2s;min-width:194px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;color:var(--c-t-primary)}.aeb-tooltip:before{position:absolute;width:14px;height:14px;content:\"\";transform:rotate(45deg);background-color:inherit}.aeb-tooltip--open{opacity:1;animation:out .2s}.aeb-tooltip--primary{background-color:var(--c-bg-light);box-shadow:0 0 12px #27303e1f}.aeb-tooltip--secondary{background-color:var(--c-bg-surface-medium)}.aeb-tooltip__title{font-weight:500;font-size:16px;margin:0 0 8px}.aeb-tooltip__container{position:relative;align-items:center;justify-content:center;width:100%;font-size:14px;word-break:keep-all;white-space:nowrap}.aeb-tooltip--top:before{bottom:-7px;left:calc(50% - 7px)}.aeb-tooltip--right:before{top:calc(50% - 7px);left:-7px}.aeb-tooltip--bottom:before{top:-7px;left:calc(50% - 7px)}.aeb-tooltip--left:before{top:calc(50% - 7px);left:calc(100% - 7px)}\n"] }]
+        }], propDecorators: { tooltipRef: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], contentEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentEl", required: false }] }] } });
 class TooltipDirective {
     constructor() {
         this._el = inject(ElementRef);
         this._dom = inject(DomService);
+        this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
         this._tooltipConfig = {
             right: (boundaries, tooltip) => {
                 const targetHalf = boundaries.top + boundaries.height / 2;
@@ -858,6 +843,7 @@ class TooltipDirective {
             }
         };
         this.tooltipOpen = false;
+        this._tooltipContent = contentChild('tooltipContent', ...(ngDevMode ? [{ debugName: "_tooltipContent" }] : /* istanbul ignore next */ []));
         this.tooltipTitle = input('', ...(ngDevMode ? [{ debugName: "tooltipTitle" }] : /* istanbul ignore next */ []));
         this.tooltipData = input('', ...(ngDevMode ? [{ debugName: "tooltipData" }] : /* istanbul ignore next */ []));
         this.tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
@@ -889,61 +875,61 @@ class TooltipDirective {
     orientationChangeHandler() {
         if (this.tooltipOpen) {
             this.hideTooltip();
-            if (this.tooltip?.tooltip?.nativeElement) {
-                this.tooltip.tooltip.nativeElement.setAttribute('style', '');
-            }
+            this._tooltipComponent
+                ?.tooltipRef()
+                ?.nativeElement?.setAttribute('style', '');
         }
     }
     ngOnDestroy() {
         this.hideTooltip();
-        this._dom.removeComponent();
-        this.removeListeners();
-    }
-    ngOnInit() {
-        this.tooltip = this._dom.attachComponent(Tooltip, {
-            title: this.tooltipTitle() || '',
-            data: this.tooltipData() || '',
-            type: this.tooltipType() || ''
-        });
-        this.initListeners();
+        this._dom.removeComponent(this._el.nativeElement);
     }
     ngAfterViewInit() {
-        if (this.tooltipContent) {
-            this.tooltip = this._dom.attachComponent(Tooltip, {
-                contentEl: this.tooltipContent.nativeElement,
-                html: this.tooltipContent.nativeElement.innerHTML,
-                type: this.tooltipType() || ''
+        const host = this._el.nativeElement;
+        const type = this.tooltipType() || '';
+        const content = this._tooltipContent();
+        if (content) {
+            this._tooltipComponent = this._dom.attachComponent(host, Tooltip, {
+                contentEl: content.nativeElement,
+                html: content.nativeElement.innerHTML,
+                type
+            });
+            content.nativeElement.style.display = 'none';
+        }
+        else {
+            this._tooltipComponent = this._dom.attachComponent(host, Tooltip, {
+                title: this.tooltipTitle() || '',
+                data: this.tooltipData() || '',
+                type
             });
-            this.tooltipContent.nativeElement.style.display = 'none';
         }
+        this.initListeners();
     }
     initListeners() {
-        document.addEventListener('touchstart', this.handleDocumentTouchstart);
-    }
-    removeListeners() {
-        document.removeEventListener('touchstart', this.handleDocumentTouchstart);
+        const cleanup = this._renderer.listen('document', 'touchstart', this.handleDocumentTouchstart);
+        this._destroyRef.onDestroy(() => cleanup());
     }
     showTooltip() {
         this.tooltipOpen = true;
-        const tooltipEl = this.tooltip?.tooltip?.nativeElement;
+        const tooltipEl = this._tooltipComponent?.tooltipRef()?.nativeElement;
         if (!tooltipEl) {
             return;
         }
         const boundaries = this._el.nativeElement.getBoundingClientRect();
         const [left, top] = this._tooltipConfig[this.tooltipPosition()](boundaries, tooltipEl);
-        tooltipEl.style.left = `${left}px`;
-        tooltipEl.style.top = `${top}px`;
+        tooltipEl.style.left = `${left + window.scrollX}px`;
+        tooltipEl.style.top = `${top + window.scrollY}px`;
         tooltipEl.className = `aeb-tooltip aeb-tooltip--open aeb-tooltip--${this.tooltipPosition()} aeb-tooltip--${this.tooltipType()}`;
     }
     hideTooltip() {
         this.tooltipOpen = false;
-        const tooltipEl = this.tooltip?.tooltip?.nativeElement;
+        const tooltipEl = this._tooltipComponent?.tooltipRef()?.nativeElement;
         if (tooltipEl) {
             tooltipEl.className = 'aeb-tooltip';
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TooltipDirective, isStandalone: true, selector: "[aebTooltip]", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, tooltipData: { classPropertyName: "tooltipData", publicName: "tooltipData", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipType: { classPropertyName: "tooltipType", publicName: "tooltipType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mouseenter": "onMouseEnter()", "touch": "onClick()", "window:orientationchange": "orientationChangeHandler()" } }, queries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.12", type: TooltipDirective, isStandalone: true, selector: "[aebTooltip]", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, tooltipData: { classPropertyName: "tooltipData", publicName: "tooltipData", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipType: { classPropertyName: "tooltipType", publicName: "tooltipType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mouseenter": "onMouseEnter()", "touch": "onClick()", "window:orientationchange": "orientationChangeHandler()" } }, queries: [{ propertyName: "_tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -956,10 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '(window:orientationchange)': 'orientationChangeHandler()'
                     }
                 }]
-        }], propDecorators: { tooltipContent: [{
-                type: ContentChild,
-                args: ['tooltipContent']
-            }], tooltipTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitle", required: false }] }], tooltipData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipData", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipType: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipType", required: false }] }], clickOutside: [{ type: i0.Output, args: ["clickOutside"] }] } });
+        }], propDecorators: { _tooltipContent: [{ type: i0.ContentChild, args: ['tooltipContent', { isSignal: true }] }], tooltipTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitle", required: false }] }], tooltipData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipData", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipType: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipType", required: false }] }], clickOutside: [{ type: i0.Output, args: ["clickOutside"] }] } });
 class TooltipModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1021,11 +1004,11 @@ class Comment {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Comment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Comment, isStandalone: true, selector: "aeb-comment", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { response: "response" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-comment\">\n  <div class=\"aeb-comment__avatar-column\">\n    <div class=\"aeb-comment__avatar\">\n      @if (comment()?.avatar) {\n      <img [src]=\"comment()?.avatar\" alt=\"Avatar\" />\n      } @else {\n      <div class=\"aeb-comment__initials\">\n        {{ comment()?.firstName?.slice(0, 1) }}{{ comment()?.lastName?.slice(0,\n        1) }}\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"aeb-comment__comment-column\">\n    <div class=\"aeb-comment__author-wrapper\">\n      <div class=\"aeb-comment__author-group\">\n        {{ comment()?.group }} @if (comment()?.parentName) {\n        <div class=\"aeb-comment__reply-icon\">\n          <svg\n            width=\"10\"\n            height=\"8\"\n            viewBox=\"0 0 10 8\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.68742 1.87519H3.7499V0.312666C3.7499 0.183289 3.67053 0.0676621 3.55052 0.0207864C3.43052 -0.0254644 3.29365 0.00703617 3.20614 0.102663L0.081095 3.54022C-0.0270317 3.65897 -0.0270317 3.84085 0.081095 3.96022L3.20614 7.39778C3.26677 7.46403 3.35115 7.50028 3.4374 7.50028C3.47552 7.50028 3.51365 7.4934 3.55052 7.47965C3.67053 7.43278 3.7499 7.31715 3.7499 7.18777V5.62525H4.61929C6.40307 5.62525 8.1306 6.26401 9.48437 7.42528C9.57624 7.50465 9.70812 7.52278 9.81812 7.47153C9.92937 7.4209 10 7.30965 10 7.18777C10 4.25835 7.61684 1.87519 4.68742 1.87519Z\"\n              fill=\"#A3AAAE\"\n            />\n          </svg>\n        </div>\n        <span class=\"aeb-comment__reply-host\">\n          {{ comment()?.parentName }}\n        </span>\n        }\n      </div>\n      <div class=\"aeb-comment__author-name\">\n        {{ comment()?.fullName }}\n        <div\n          aebTooltip\n          [tooltipPosition]=\"'right'\"\n          [tooltipData]=\"comment()?.aboutAuthor || ''\"\n          class=\"aeb-comment__author-info\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8Z\"\n              stroke=\"#27303E\"\n            />\n            <path\n              d=\"M5.8125 6.3584C5.83529 5.78223 6.03874 5.31348 6.42285 4.95215C6.81022 4.59082 7.3457 4.41016 8.0293 4.41016C8.66732 4.41016 9.18652 4.58105 9.58691 4.92285C9.9873 5.26139 10.1875 5.69434 10.1875 6.22168C10.1875 6.92806 9.8457 7.48633 9.16211 7.89648C8.84961 8.08203 8.63639 8.25456 8.52246 8.41406C8.40853 8.57031 8.35156 8.77539 8.35156 9.0293V9.32715H7.34082L7.33594 8.93652C7.32292 8.59798 7.39128 8.3099 7.54102 8.07227C7.69401 7.83464 7.93978 7.61328 8.27832 7.4082C8.5778 7.22917 8.78613 7.05664 8.90332 6.89062C9.02051 6.72461 9.0791 6.51628 9.0791 6.26562C9.0791 5.98568 8.97819 5.75618 8.77637 5.57715C8.57454 5.39811 8.30762 5.30859 7.97559 5.30859C7.6403 5.30859 7.37012 5.40299 7.16504 5.5918C6.95996 5.7806 6.84603 6.03613 6.82324 6.3584H5.8125ZM7.85352 11.5879C7.67448 11.5879 7.52311 11.5277 7.39941 11.4072C7.27572 11.2868 7.21387 11.137 7.21387 10.958C7.21387 10.779 7.27572 10.6292 7.39941 10.5088C7.52311 10.3883 7.67448 10.3281 7.85352 10.3281C8.03581 10.3281 8.1888 10.3883 8.3125 10.5088C8.4362 10.6292 8.49805 10.779 8.49805 10.958C8.49805 11.137 8.4362 11.2868 8.3125 11.4072C8.1888 11.5277 8.03581 11.5879 7.85352 11.5879Z\"\n              fill=\"#27303E\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-comment__comment-wrapper\">\n      <div class=\"aeb-comment__comment-header\">{{ comment()?.title }}</div>\n      <div class=\"aeb-comment__comment-txt\">{{ comment()?.content }}</div>\n    </div>\n    <div class=\"aeb-comment__date-response\">\n      <div class=\"aeb-comment__comment-date\">{{ comment()?.date }}</div>\n      <div class=\"aeb-comment__comment-response\" (click)=\"responseHandler()\">\n        \u041E\u0442\u0432\u0435\u0442\u0438\u0442\u044C\n      </div>\n    </div>\n    @if (onResponse) {\n    <form\n      class=\"aeb-comment__response-form\"\n      [formGroup]=\"responseForm\"\n      (submit)=\"nullTarget($event)\"\n    >\n      <div\n        class=\"aeb-comment__input\"\n        [ngClass]=\"{\n            'aeb-comment__input--error': titleError\n          }\"\n      >\n        <aeb-form-field>\n          <label aebLabel>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n          <label errorMessage>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n          <input aebInput type=\"text\" formControlName=\"title\" />\n        </aeb-form-field>\n      </div>\n      <div\n        class=\"aeb-comment__input\"\n        [ngClass]=\"{\n            'aeb-comment__input--error': contentError\n          }\"\n      >\n        <aeb-form-field>\n          <label errorMessage>\u041F\u043E\u043B\u0435 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n          <label aebLabel>\u041F\u043E\u043B\u0435 \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n          <textarea\n            aebTextarea\n            style=\"height: 140px\"\n            formControlName=\"content\"\n            required\n          >\n          </textarea>\n        </aeb-form-field>\n      </div>\n      <div class=\"aeb-comment__submit\">\n        <button aebButton (click)=\"submitHandler()\" [disabled]>\n          \u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C\n        </button>\n      </div>\n    </form>\n    } @if (comment()?.nestedComments && comment()!.nestedComments.length) {\n    <div (click)=\"expandHandler()\" class=\"aeb-comment__response-ctrls\">\n      <div class=\"aeb-comment__responses\">\u041E\u0442\u0432\u0435\u0442\u044B</div>\n      <div class=\"aeb-comment__response-counter\">\n        {{ comment()!.nestedComments.length }}\n      </div>\n      <div\n        class=\"aeb-comment__arrow-icon\"\n        [ngClass]=\"{\n            'aeb-comment__arrow-icon--active': isExpanded\n          }\"\n      >\n        <svg\n          width=\"10\"\n          height=\"6\"\n          viewBox=\"0 0 10 6\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0.999999 5L4.92929 1.07071C4.96834 1.03166 5.03166 1.03166 5.07071 1.07071L9 5\"\n            stroke=\"#2F88F0\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n    } @if ( comment()?.nestedComments && comment()!.nestedComments.length &&\n    isExpanded ) { @for (nestedComment of comment()!.nestedComments; track\n    nestedComment) {\n    <aeb-comment (response)=\"hoistHandler($event)\" [comment]=\"nestedComment\">\n    </aeb-comment>\n    } }\n  </div>\n</div>\n", styles: [".aeb-comment{display:flex;width:100%;color:var(--color-mono-900)}.aeb-comment__avatar-column{margin-right:12px}.aeb-comment__comment-column{flex-grow:1}.aeb-comment__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--color-blue-500);border-radius:50%}.aeb-comment__avatar img{width:90%;border-radius:50%}.aeb-comment__initials{position:relative;bottom:1px;color:var(--color-mono-0)}.aeb-comment__author-group{display:flex;align-items:center;margin-bottom:4px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.aeb-comment__reply-icon{position:relative;bottom:4px;margin-left:32px}.aeb-comment__reply-host{margin-left:8px;font-size:var(--font-size-xxs);color:var(--color-mono-300)}.aeb-comment__author-name{display:flex;align-items:center;font-size:var(--font-size-s);color:var(--color-mono-300)}.aeb-comment__author-info{position:relative;top:3px;margin-left:12px;cursor:pointer}.aeb-comment__author-wrapper{margin-bottom:20px}.aeb-comment__comment-wrapper{box-sizing:border-box;width:100%;padding:16px;background:var(--color-mono-10);border-radius:8px}.aeb-comment__comment-header{margin-bottom:10px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-mono-900)}.aeb-comment__date-response{display:flex;align-items:center;margin-top:20px;margin-bottom:25px}.aeb-comment__comment-date{margin-right:30px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__comment-response{font-size:var(--font-size-xs);color:var(--color-blue-500);cursor:pointer}.aeb-comment__response-ctrls{display:inline-flex;align-items:center;margin-bottom:28px;cursor:pointer}.aeb-comment__responses{margin-right:15px;font-size:var(--font-size-xs);color:var(--color-mono-900)}.aeb-comment__response-counter{margin-right:12px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__arrow-icon{position:relative;top:2px;transform:rotate(180deg)}.aeb-comment__arrow-icon--active{top:unset;bottom:3px;transform:none}.aeb-comment__input{margin-bottom:24px}.aeb-comment__submit{display:flex;justify-content:flex-end;width:100%;margin-top:24px}.aeb-comment__response-form{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: Comment, selector: "aeb-comment", inputs: ["comment"], outputs: ["response"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: TooltipDirective, selector: "[aebTooltip]", inputs: ["tooltipTitle", "tooltipData", "tooltipPosition", "tooltipType"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: ErrorMessageDirective, selector: "[errorMessage]", inputs: ["errorMessage"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Comment, isStandalone: true, selector: "aeb-comment", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { response: "response" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-comment\">\n  <div class=\"aeb-comment__avatar-column\">\n    <div class=\"aeb-comment__avatar\">\n      @if (comment()?.avatar) {\n      <img [src]=\"comment()?.avatar\" alt=\"Avatar\" />\n      } @else {\n      <div class=\"aeb-comment__initials\">\n        {{ comment()?.firstName?.slice(0, 1) }}{{ comment()?.lastName?.slice(0,\n        1) }}\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"aeb-comment__comment-column\">\n    <div class=\"aeb-comment__author-wrapper\">\n      <div class=\"aeb-comment__author-group\">\n        {{ comment()?.group }} @if (comment()?.parentName) {\n        <div class=\"aeb-comment__reply-icon\">\n          <svg\n            width=\"10\"\n            height=\"8\"\n            viewBox=\"0 0 10 8\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.68742 1.87519H3.7499V0.312666C3.7499 0.183289 3.67053 0.0676621 3.55052 0.0207864C3.43052 -0.0254644 3.29365 0.00703617 3.20614 0.102663L0.081095 3.54022C-0.0270317 3.65897 -0.0270317 3.84085 0.081095 3.96022L3.20614 7.39778C3.26677 7.46403 3.35115 7.50028 3.4374 7.50028C3.47552 7.50028 3.51365 7.4934 3.55052 7.47965C3.67053 7.43278 3.7499 7.31715 3.7499 7.18777V5.62525H4.61929C6.40307 5.62525 8.1306 6.26401 9.48437 7.42528C9.57624 7.50465 9.70812 7.52278 9.81812 7.47153C9.92937 7.4209 10 7.30965 10 7.18777C10 4.25835 7.61684 1.87519 4.68742 1.87519Z\"\n              fill=\"#A3AAAE\"\n            />\n          </svg>\n        </div>\n        <span class=\"aeb-comment__reply-host\">\n          {{ comment()?.parentName }}\n        </span>\n        }\n      </div>\n      <div class=\"aeb-comment__author-name\">\n        {{ comment()?.fullName }}\n        <div\n          aebTooltip\n          [tooltipPosition]=\"'right'\"\n          [tooltipData]=\"comment()?.aboutAuthor || ''\"\n          class=\"aeb-comment__author-info\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8Z\"\n              stroke=\"#27303E\"\n            />\n            <path\n              d=\"M5.8125 6.3584C5.83529 5.78223 6.03874 5.31348 6.42285 4.95215C6.81022 4.59082 7.3457 4.41016 8.0293 4.41016C8.66732 4.41016 9.18652 4.58105 9.58691 4.92285C9.9873 5.26139 10.1875 5.69434 10.1875 6.22168C10.1875 6.92806 9.8457 7.48633 9.16211 7.89648C8.84961 8.08203 8.63639 8.25456 8.52246 8.41406C8.40853 8.57031 8.35156 8.77539 8.35156 9.0293V9.32715H7.34082L7.33594 8.93652C7.32292 8.59798 7.39128 8.3099 7.54102 8.07227C7.69401 7.83464 7.93978 7.61328 8.27832 7.4082C8.5778 7.22917 8.78613 7.05664 8.90332 6.89062C9.02051 6.72461 9.0791 6.51628 9.0791 6.26562C9.0791 5.98568 8.97819 5.75618 8.77637 5.57715C8.57454 5.39811 8.30762 5.30859 7.97559 5.30859C7.6403 5.30859 7.37012 5.40299 7.16504 5.5918C6.95996 5.7806 6.84603 6.03613 6.82324 6.3584H5.8125ZM7.85352 11.5879C7.67448 11.5879 7.52311 11.5277 7.39941 11.4072C7.27572 11.2868 7.21387 11.137 7.21387 10.958C7.21387 10.779 7.27572 10.6292 7.39941 10.5088C7.52311 10.3883 7.67448 10.3281 7.85352 10.3281C8.03581 10.3281 8.1888 10.3883 8.3125 10.5088C8.4362 10.6292 8.49805 10.779 8.49805 10.958C8.49805 11.137 8.4362 11.2868 8.3125 11.4072C8.1888 11.5277 8.03581 11.5879 7.85352 11.5879Z\"\n              fill=\"#27303E\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-comment__comment-wrapper\">\n      <div class=\"aeb-comment__comment-header\">{{ comment()?.title }}</div>\n      <div class=\"aeb-comment__comment-txt\">{{ comment()?.content }}</div>\n    </div>\n    <div class=\"aeb-comment__date-response\">\n      <div class=\"aeb-comment__comment-date\">{{ comment()?.date }}</div>\n      <div class=\"aeb-comment__comment-response\" (click)=\"responseHandler()\">\n        \u041E\u0442\u0432\u0435\u0442\u0438\u0442\u044C\n      </div>\n    </div>\n    @if (onResponse) {\n    <form\n      class=\"aeb-comment__response-form\"\n      [formGroup]=\"responseForm\"\n      (submit)=\"nullTarget($event)\"\n    >\n      <div\n        class=\"aeb-comment__input\"\n        [ngClass]=\"{\n            'aeb-comment__input--error': titleError\n          }\"\n      >\n        <aeb-form-field>\n          <label aebLabel>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n          <label errorMessage>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n          <input aebInput type=\"text\" formControlName=\"title\" />\n        </aeb-form-field>\n      </div>\n      <div\n        class=\"aeb-comment__input\"\n        [ngClass]=\"{\n            'aeb-comment__input--error': contentError\n          }\"\n      >\n        <aeb-form-field>\n          <label errorMessage>\u041F\u043E\u043B\u0435 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n          <label aebLabel>\u041F\u043E\u043B\u0435 \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n          <textarea\n            aebTextarea\n            style=\"height: 140px\"\n            formControlName=\"content\"\n            required\n          >\n          </textarea>\n        </aeb-form-field>\n      </div>\n      <div class=\"aeb-comment__submit\">\n        <button aebButton (click)=\"submitHandler()\" [disabled]>\n          \u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C\n        </button>\n      </div>\n    </form>\n    } @if (comment()?.nestedComments && comment()!.nestedComments.length) {\n    <div (click)=\"expandHandler()\" class=\"aeb-comment__response-ctrls\">\n      <div class=\"aeb-comment__responses\">\u041E\u0442\u0432\u0435\u0442\u044B</div>\n      <div class=\"aeb-comment__response-counter\">\n        {{ comment()!.nestedComments.length }}\n      </div>\n      <div\n        class=\"aeb-comment__arrow-icon\"\n        [ngClass]=\"{\n            'aeb-comment__arrow-icon--active': isExpanded\n          }\"\n      >\n        <svg\n          width=\"10\"\n          height=\"6\"\n          viewBox=\"0 0 10 6\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0.999999 5L4.92929 1.07071C4.96834 1.03166 5.03166 1.03166 5.07071 1.07071L9 5\"\n            stroke=\"#2F88F0\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n    } @if ( comment()?.nestedComments && comment()!.nestedComments.length &&\n    isExpanded ) { @for (nestedComment of comment()!.nestedComments; track\n    nestedComment) {\n    <aeb-comment (response)=\"hoistHandler($event)\" [comment]=\"nestedComment\">\n    </aeb-comment>\n    } }\n  </div>\n</div>\n", styles: [".aeb-comment{display:flex;width:100%;color:var(--color-mono-900)}.aeb-comment__avatar-column{margin-right:12px}.aeb-comment__comment-column{flex-grow:1}.aeb-comment__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--color-blue-500);border-radius:50%}.aeb-comment__avatar img{width:90%;border-radius:50%}.aeb-comment__initials{position:relative;bottom:1px;color:var(--color-mono-0)}.aeb-comment__author-group{display:flex;align-items:center;margin-bottom:4px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.aeb-comment__reply-icon{position:relative;bottom:4px;margin-left:32px}.aeb-comment__reply-host{margin-left:8px;font-size:var(--font-size-xxs);color:var(--color-mono-300)}.aeb-comment__author-name{display:flex;align-items:center;font-size:var(--font-size-s);color:var(--color-mono-300)}.aeb-comment__author-info{position:relative;top:3px;margin-left:12px;cursor:pointer}.aeb-comment__author-wrapper{margin-bottom:20px}.aeb-comment__comment-wrapper{box-sizing:border-box;width:100%;padding:16px;background:var(--color-mono-10);border-radius:8px}.aeb-comment__comment-header{margin-bottom:10px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-mono-900)}.aeb-comment__date-response{display:flex;align-items:center;margin-top:20px;margin-bottom:25px}.aeb-comment__comment-date{margin-right:30px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__comment-response{font-size:var(--font-size-xs);color:var(--color-blue-500);cursor:pointer}.aeb-comment__response-ctrls{display:inline-flex;align-items:center;margin-bottom:28px;cursor:pointer}.aeb-comment__responses{margin-right:15px;font-size:var(--font-size-xs);color:var(--color-mono-900)}.aeb-comment__response-counter{margin-right:12px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__arrow-icon{position:relative;top:2px;transform:rotate(180deg)}.aeb-comment__arrow-icon--active{top:unset;bottom:3px;transform:none}.aeb-comment__input{margin-bottom:24px}.aeb-comment__submit{display:flex;justify-content:flex-end;width:100%;margin-top:24px}.aeb-comment__response-form{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: Comment, selector: "aeb-comment", inputs: ["comment"], outputs: ["response"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: TooltipDirective, selector: "[aebTooltip]", inputs: ["tooltipTitle", "tooltipData", "tooltipPosition", "tooltipType"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: ErrorMessageDirective, selector: "[errorMessage]", inputs: ["errorMessage"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Comment, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-comment', encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'aeb-comment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgClass,
                         FormsModule,
                         ReactiveFormsModule,
@@ -1055,11 +1038,11 @@ class CreditItemCard {
         this.infoClickEvent = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CreditItemCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CreditItemCard, isStandalone: true, selector: "aeb-credit-item-card", inputs: { cardInfo: { classPropertyName: "cardInfo", publicName: "cardInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent", infoClickEvent: "infoClickEvent" }, ngImport: i0, template: "<div\n  class=\"credit-item-card\"\n  [style.background-image]=\"'url(' + (cardInfo()?.image || '') + ')'\"\n  [style.background-color]=\"cardInfo()?.backgroundColor || ''\"\n>\n  <div\n    class=\"credit-item-card__info-icon\"\n    (click)=\"infoClickEvent.emit()\"\n  ></div>\n  <div\n    class=\"credit-item-card__title-wrapper\"\n    (click)=\"buttonClickEvent.emit()\"\n  >\n    <div class=\"credit-item-card__title\">\u00AB{{ cardInfo()?.title }}\u00BB</div>\n    <div class=\"credit-item-card__title-text\">{{ cardInfo()?.caption }}</div>\n  </div>\n  <div class=\"credit-item-card__details-wrapper\">\n    <div class=\"credit-item-card__credit-details\">\n      @if (cardInfo()?.details?.time) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\n          \u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.time }} {{ cardInfo()?.details?.timeMeasure\n          }}\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.rate) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\u0421\u0442\u0430\u0432\u043A\u0430</div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          {{ cardInfo()?.details?.rate }} %\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.amount) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"ccredit-item-card__credit-details-item-title\">\n          \u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.amount }} {{\n          cardInfo()?.details?.amountMeasure }}\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"credit-item-card__button-wrapper\">\n    <button aebButton (click)=\"buttonClickEvent.emit()\">\n      \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\n    </button>\n  </div>\n</div>\n", styles: [".credit-item-card{position:relative;box-sizing:border-box;width:100%;height:359px;padding:32px;color:var(--color-mono-900);zoom:98%;background-repeat:no-repeat;background-position:right;background-size:contain;border-radius:8px}@media screen and (max-width:767px){.credit-item-card{zoom:54%}}@media screen and (max-width:374px){.credit-item-card{zoom:48%}}.credit-item-card__info-icon{position:absolute;right:38px;width:27px;height:27px;cursor:pointer;background:url(/src/assets/images/info.svg);background-repeat:no-repeat;background-size:cover}.credit-item-card__title-wrapper{display:inline-flex;flex-direction:column;align-items:flex-start;cursor:pointer}.credit-item-card__title{display:inline-block;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);line-height:42px}.credit-item-card__title-text{display:inline-block;font-size:var(--font-size-m);line-height:42px}.credit-item-card__details-wrapper{width:375px;margin-top:48px}.credit-item-card__button-wrapper{margin-top:16px}.credit-item-card__credit-details{display:flex;justify-content:space-between;width:100%;height:90px}.credit-item-card__credit-details-item{display:flex;flex-direction:column;align-items:flex-start}.credit-item-card__credit-details-item-title{font-size:var(--font-size-s);line-height:20px}.credit-item-card__credit-details-item-separator{width:50px;height:2px;margin-top:16px;background-color:var(--color-mono-900)}.credit-item-card__credit-details-item-value{font-size:var(--font-size-l);font-weight:var(--font-weight-medium);line-height:52px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CreditItemCard, isStandalone: true, selector: "aeb-credit-item-card", inputs: { cardInfo: { classPropertyName: "cardInfo", publicName: "cardInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent", infoClickEvent: "infoClickEvent" }, ngImport: i0, template: "<div\n  class=\"credit-item-card\"\n  [style.background-image]=\"'url(' + (cardInfo()?.image || '') + ')'\"\n  [style.background-color]=\"cardInfo()?.backgroundColor || ''\"\n>\n  <div\n    class=\"credit-item-card__info-icon\"\n    (click)=\"infoClickEvent.emit()\"\n  ></div>\n  <div\n    class=\"credit-item-card__title-wrapper\"\n    (click)=\"buttonClickEvent.emit()\"\n  >\n    <div class=\"credit-item-card__title\">\u00AB{{ cardInfo()?.title }}\u00BB</div>\n    <div class=\"credit-item-card__title-text\">{{ cardInfo()?.caption }}</div>\n  </div>\n  <div class=\"credit-item-card__details-wrapper\">\n    <div class=\"credit-item-card__credit-details\">\n      @if (cardInfo()?.details?.time) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\n          \u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.time }} {{ cardInfo()?.details?.timeMeasure\n          }}\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.rate) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\u0421\u0442\u0430\u0432\u043A\u0430</div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          {{ cardInfo()?.details?.rate }} %\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.amount) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"ccredit-item-card__credit-details-item-title\">\n          \u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.amount }} {{\n          cardInfo()?.details?.amountMeasure }}\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"credit-item-card__button-wrapper\">\n    <button aebButton (click)=\"buttonClickEvent.emit()\">\n      \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\n    </button>\n  </div>\n</div>\n", styles: [".credit-item-card{position:relative;box-sizing:border-box;width:100%;height:359px;padding:32px;color:var(--color-mono-900);zoom:98%;background-repeat:no-repeat;background-position:right;background-size:contain;border-radius:8px}@media screen and (max-width:767px){.credit-item-card{zoom:54%}}@media screen and (max-width:374px){.credit-item-card{zoom:48%}}.credit-item-card__info-icon{position:absolute;right:38px;width:27px;height:27px;cursor:pointer;background:url(/src/assets/images/info.svg);background-repeat:no-repeat;background-size:cover}.credit-item-card__title-wrapper{display:inline-flex;flex-direction:column;align-items:flex-start;cursor:pointer}.credit-item-card__title{display:inline-block;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);line-height:42px}.credit-item-card__title-text{display:inline-block;font-size:var(--font-size-m);line-height:42px}.credit-item-card__details-wrapper{width:375px;margin-top:48px}.credit-item-card__button-wrapper{margin-top:16px}.credit-item-card__credit-details{display:flex;justify-content:space-between;width:100%;height:90px}.credit-item-card__credit-details-item{display:flex;flex-direction:column;align-items:flex-start}.credit-item-card__credit-details-item-title{font-size:var(--font-size-s);line-height:20px}.credit-item-card__credit-details-item-separator{width:50px;height:2px;margin-top:16px;background-color:var(--color-mono-900)}.credit-item-card__credit-details-item-value{font-size:var(--font-size-l);font-weight:var(--font-weight-medium);line-height:52px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CreditItemCard, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-credit-item-card', encapsulation: ViewEncapsulation.None, imports: [ButtonModule], template: "<div\n  class=\"credit-item-card\"\n  [style.background-image]=\"'url(' + (cardInfo()?.image || '') + ')'\"\n  [style.background-color]=\"cardInfo()?.backgroundColor || ''\"\n>\n  <div\n    class=\"credit-item-card__info-icon\"\n    (click)=\"infoClickEvent.emit()\"\n  ></div>\n  <div\n    class=\"credit-item-card__title-wrapper\"\n    (click)=\"buttonClickEvent.emit()\"\n  >\n    <div class=\"credit-item-card__title\">\u00AB{{ cardInfo()?.title }}\u00BB</div>\n    <div class=\"credit-item-card__title-text\">{{ cardInfo()?.caption }}</div>\n  </div>\n  <div class=\"credit-item-card__details-wrapper\">\n    <div class=\"credit-item-card__credit-details\">\n      @if (cardInfo()?.details?.time) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\n          \u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.time }} {{ cardInfo()?.details?.timeMeasure\n          }}\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.rate) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\u0421\u0442\u0430\u0432\u043A\u0430</div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          {{ cardInfo()?.details?.rate }} %\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.amount) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"ccredit-item-card__credit-details-item-title\">\n          \u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.amount }} {{\n          cardInfo()?.details?.amountMeasure }}\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"credit-item-card__button-wrapper\">\n    <button aebButton (click)=\"buttonClickEvent.emit()\">\n      \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\n    </button>\n  </div>\n</div>\n", styles: [".credit-item-card{position:relative;box-sizing:border-box;width:100%;height:359px;padding:32px;color:var(--color-mono-900);zoom:98%;background-repeat:no-repeat;background-position:right;background-size:contain;border-radius:8px}@media screen and (max-width:767px){.credit-item-card{zoom:54%}}@media screen and (max-width:374px){.credit-item-card{zoom:48%}}.credit-item-card__info-icon{position:absolute;right:38px;width:27px;height:27px;cursor:pointer;background:url(/src/assets/images/info.svg);background-repeat:no-repeat;background-size:cover}.credit-item-card__title-wrapper{display:inline-flex;flex-direction:column;align-items:flex-start;cursor:pointer}.credit-item-card__title{display:inline-block;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);line-height:42px}.credit-item-card__title-text{display:inline-block;font-size:var(--font-size-m);line-height:42px}.credit-item-card__details-wrapper{width:375px;margin-top:48px}.credit-item-card__button-wrapper{margin-top:16px}.credit-item-card__credit-details{display:flex;justify-content:space-between;width:100%;height:90px}.credit-item-card__credit-details-item{display:flex;flex-direction:column;align-items:flex-start}.credit-item-card__credit-details-item-title{font-size:var(--font-size-s);line-height:20px}.credit-item-card__credit-details-item-separator{width:50px;height:2px;margin-top:16px;background-color:var(--color-mono-900)}.credit-item-card__credit-details-item-value{font-size:var(--font-size-l);font-weight:var(--font-weight-medium);line-height:52px}\n"] }]
+            args: [{ selector: 'aeb-credit-item-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonModule], template: "<div\n  class=\"credit-item-card\"\n  [style.background-image]=\"'url(' + (cardInfo()?.image || '') + ')'\"\n  [style.background-color]=\"cardInfo()?.backgroundColor || ''\"\n>\n  <div\n    class=\"credit-item-card__info-icon\"\n    (click)=\"infoClickEvent.emit()\"\n  ></div>\n  <div\n    class=\"credit-item-card__title-wrapper\"\n    (click)=\"buttonClickEvent.emit()\"\n  >\n    <div class=\"credit-item-card__title\">\u00AB{{ cardInfo()?.title }}\u00BB</div>\n    <div class=\"credit-item-card__title-text\">{{ cardInfo()?.caption }}</div>\n  </div>\n  <div class=\"credit-item-card__details-wrapper\">\n    <div class=\"credit-item-card__credit-details\">\n      @if (cardInfo()?.details?.time) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\n          \u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.time }} {{ cardInfo()?.details?.timeMeasure\n          }}\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.rate) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"credit-item-card__credit-details-item-title\">\u0421\u0442\u0430\u0432\u043A\u0430</div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          {{ cardInfo()?.details?.rate }} %\n        </div>\n      </div>\n      } @if (cardInfo()?.details?.amount) {\n      <div class=\"credit-item-card__credit-details-item\">\n        <div class=\"ccredit-item-card__credit-details-item-title\">\n          \u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n        </div>\n        <div class=\"credit-item-card__credit-details-item-separator\"></div>\n        <div class=\"credit-item-card__credit-details-item-value\">\n          \u0434\u043E {{ cardInfo()?.details?.amount }} {{\n          cardInfo()?.details?.amountMeasure }}\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"credit-item-card__button-wrapper\">\n    <button aebButton (click)=\"buttonClickEvent.emit()\">\n      \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\n    </button>\n  </div>\n</div>\n", styles: [".credit-item-card{position:relative;box-sizing:border-box;width:100%;height:359px;padding:32px;color:var(--color-mono-900);zoom:98%;background-repeat:no-repeat;background-position:right;background-size:contain;border-radius:8px}@media screen and (max-width:767px){.credit-item-card{zoom:54%}}@media screen and (max-width:374px){.credit-item-card{zoom:48%}}.credit-item-card__info-icon{position:absolute;right:38px;width:27px;height:27px;cursor:pointer;background:url(/src/assets/images/info.svg);background-repeat:no-repeat;background-size:cover}.credit-item-card__title-wrapper{display:inline-flex;flex-direction:column;align-items:flex-start;cursor:pointer}.credit-item-card__title{display:inline-block;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);line-height:42px}.credit-item-card__title-text{display:inline-block;font-size:var(--font-size-m);line-height:42px}.credit-item-card__details-wrapper{width:375px;margin-top:48px}.credit-item-card__button-wrapper{margin-top:16px}.credit-item-card__credit-details{display:flex;justify-content:space-between;width:100%;height:90px}.credit-item-card__credit-details-item{display:flex;flex-direction:column;align-items:flex-start}.credit-item-card__credit-details-item-title{font-size:var(--font-size-s);line-height:20px}.credit-item-card__credit-details-item-separator{width:50px;height:2px;margin-top:16px;background-color:var(--color-mono-900)}.credit-item-card__credit-details-item-value{font-size:var(--font-size-l);font-weight:var(--font-weight-medium);line-height:52px}\n"] }]
         }], propDecorators: { cardInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardInfo", required: false }] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }], infoClickEvent: [{ type: i0.Output, args: ["infoClickEvent"] }] } });
 class CreditItemCardModule {
@@ -1075,33 +1058,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }] });
+class ClickOutsideService {
+    constructor() {
+        this._renderer = inject(RendererFactory2).createRenderer(null, null);
+        this.elements = new Map();
+        this.cleanup = null;
+        this.handler = (event) => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            for (const [element, callback] of this.elements) {
+                if (!element.contains(target)) {
+                    callback(event);
+                }
+            }
+        };
+    }
+    register(element, callback) {
+        if (this.elements.size === 0) {
+            this.cleanup = this._renderer.listen('document', 'click', this.handler);
+        }
+        this.elements.set(element, callback);
+    }
+    unregister(element) {
+        this.elements.delete(element);
+        if (this.elements.size === 0) {
+            this.cleanup?.();
+            this.cleanup = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ClickOutsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ClickOutsideService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ClickOutsideService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 class ClickOutsideDirective {
     constructor() {
         this._host = inject(ElementRef);
+        this._service = inject(ClickOutsideService);
+        this._destroyRef = inject(DestroyRef);
         this.clickOutside = output();
-    }
-    onClick(event) {
-        const clickedInside = this._host.nativeElement.contains(event.target);
-        if (!clickedInside) {
-            this.clickOutside.emit(event);
-        }
+        const host = this._host.nativeElement;
+        this._service.register(host, (event) => {
+            const clickedInside = host.contains(event.target);
+            if (!clickedInside) {
+                this.clickOutside.emit(event);
+            }
+        });
+        this._destroyRef.onDestroy(() => this._service.unregister(host));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ClickOutsideDirective }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Injectable
-        }, {
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
-                    standalone: true,
-                    host: {
-                        '(document:click)': 'onClick($event)'
-                    }
+                    standalone: true
                 }]
-        }], propDecorators: { clickOutside: [{ type: i0.Output, args: ["clickOutside"] }] } });
+        }], ctorParameters: () => [], propDecorators: { clickOutside: [{ type: i0.Output, args: ["clickOutside"] }] } });
 const weekLocal = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
@@ -1434,11 +1452,11 @@ class DatepickerMonth {
         this.setDate.emit(date);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerMonth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DatepickerMonth, isStandalone: true, selector: "div[aebDatepickerMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setDate: "setDate" }, ngImport: i0, template: "<div class=\"aeb-datepicker-month__header\">\n  @for (day of week(); track $index) {\n  <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n  }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n  @for (day of week; track $index) { @if (!!day) {\n  <div\n    class=\"aeb-datepicker-month__day\"\n    [ngClass]=\"{\n            'aeb-datepicker-month__day--today': day | isToday,\n            'aeb-datepicker-month__day--picked': day | isSameDate: (date() || null),\n            'aeb-datepicker-month__day--disabled':\n              day | isDisabled: (minDate() || null) : (maxDate() || null) : excludedDates()\n          }\"\n    (click)=\"emitDate(day)\"\n  >\n    {{ day | dateToStr }}\n  </div>\n  } @else {\n  <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n  } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DateToStrPipe, name: "dateToStr" }, { kind: "pipe", type: IsTodayPipe, name: "isToday" }, { kind: "pipe", type: IsSameDatePipe, name: "isSameDate" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DatepickerMonth, isStandalone: true, selector: "div[aebDatepickerMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setDate: "setDate" }, ngImport: i0, template: "<div class=\"aeb-datepicker-month__header\">\n  @for (day of week(); track $index) {\n  <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n  }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n  @for (day of week; track $index) { @if (!!day) {\n  <div\n    class=\"aeb-datepicker-month__day\"\n    [ngClass]=\"{\n            'aeb-datepicker-month__day--today': day | isToday,\n            'aeb-datepicker-month__day--picked': day | isSameDate: (date() || null),\n            'aeb-datepicker-month__day--disabled':\n              day | isDisabled: (minDate() || null) : (maxDate() || null) : excludedDates()\n          }\"\n    (click)=\"emitDate(day)\"\n  >\n    {{ day | dateToStr }}\n  </div>\n  } @else {\n  <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n  } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DateToStrPipe, name: "dateToStr" }, { kind: "pipe", type: IsTodayPipe, name: "isToday" }, { kind: "pipe", type: IsSameDatePipe, name: "isSameDate" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerMonth, decorators: [{
             type: Component,
-            args: [{ selector: 'div[aebDatepickerMonth]', encapsulation: ViewEncapsulation.None, imports: [NgClass, DateToStrPipe, IsTodayPipe, IsSameDatePipe, IsDisabledPipe], template: "<div class=\"aeb-datepicker-month__header\">\n  @for (day of week(); track $index) {\n  <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n  }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n  @for (day of week; track $index) { @if (!!day) {\n  <div\n    class=\"aeb-datepicker-month__day\"\n    [ngClass]=\"{\n            'aeb-datepicker-month__day--today': day | isToday,\n            'aeb-datepicker-month__day--picked': day | isSameDate: (date() || null),\n            'aeb-datepicker-month__day--disabled':\n              day | isDisabled: (minDate() || null) : (maxDate() || null) : excludedDates()\n          }\"\n    (click)=\"emitDate(day)\"\n  >\n    {{ day | dateToStr }}\n  </div>\n  } @else {\n  <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n  } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"] }]
+            args: [{ selector: 'div[aebDatepickerMonth]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, DateToStrPipe, IsTodayPipe, IsSameDatePipe, IsDisabledPipe], template: "<div class=\"aeb-datepicker-month__header\">\n  @for (day of week(); track $index) {\n  <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n  }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n  @for (day of week; track $index) { @if (!!day) {\n  <div\n    class=\"aeb-datepicker-month__day\"\n    [ngClass]=\"{\n            'aeb-datepicker-month__day--today': day | isToday,\n            'aeb-datepicker-month__day--picked': day | isSameDate: (date() || null),\n            'aeb-datepicker-month__day--disabled':\n              day | isDisabled: (minDate() || null) : (maxDate() || null) : excludedDates()\n          }\"\n    (click)=\"emitDate(day)\"\n  >\n    {{ day | dateToStr }}\n  </div>\n  } @else {\n  <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n  } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"] }]
         }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], excludedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedDates", required: false }] }], setDate: [{ type: i0.Output, args: ["setDate"] }] } });
 const monthsLocal = [
@@ -1507,13 +1525,13 @@ class DatepickerMonthTiles {
         this.setMonth.emit(month);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerMonthTiles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DatepickerMonthTiles, isStandalone: true, selector: "div[aebDatepickerMonthTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setMonth: "setMonth" }, host: { properties: { "class.aeb-datepicker-month-tiles": "true" } }, ngImport: i0, template: "@for (monthNum of months(); track monthNum; let i = $index) {\n<div\n  class=\"aeb-datepicker-month-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-month-tiles__tile--active': i === month(),\n      'aeb-datepicker-month-tiles__tile--disabled':\n        i | isMonthDisabled: woDays() : (year() || 0) : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitMonth(i)\"\n>\n  {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsMonthDisabledPipe, name: "isMonthDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DatepickerMonthTiles, isStandalone: true, selector: "div[aebDatepickerMonthTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setMonth: "setMonth" }, host: { properties: { "class.aeb-datepicker-month-tiles": "true" } }, ngImport: i0, template: "@for (monthNum of months(); track $index) {\n<div\n  class=\"aeb-datepicker-month-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-month-tiles__tile--active': $index === month(),\n      'aeb-datepicker-month-tiles__tile--disabled':\n        $index | isMonthDisabled: woDays() : (year() || 0) : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitMonth($index)\"\n>\n  {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsMonthDisabledPipe, name: "isMonthDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerMonthTiles, decorators: [{
             type: Component,
-            args: [{ selector: 'div[aebDatepickerMonthTiles]', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'div[aebDatepickerMonthTiles]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.aeb-datepicker-month-tiles]': 'true'
-                    }, imports: [NgClass, IsMonthDisabledPipe], template: "@for (monthNum of months(); track monthNum; let i = $index) {\n<div\n  class=\"aeb-datepicker-month-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-month-tiles__tile--active': i === month(),\n      'aeb-datepicker-month-tiles__tile--disabled':\n        i | isMonthDisabled: woDays() : (year() || 0) : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitMonth(i)\"\n>\n  {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
+                    }, imports: [NgClass, IsMonthDisabledPipe], template: "@for (monthNum of months(); track $index) {\n<div\n  class=\"aeb-datepicker-month-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-month-tiles__tile--active': $index === month(),\n      'aeb-datepicker-month-tiles__tile--disabled':\n        $index | isMonthDisabled: woDays() : (year() || 0) : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitMonth($index)\"\n>\n  {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
         }], propDecorators: { year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], woDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "woDays", required: false }] }], setMonth: [{ type: i0.Output, args: ["setMonth"] }] } });
 /**
@@ -1586,13 +1604,13 @@ class DatepickerYearTiles {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerYearTiles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DatepickerYearTiles, isStandalone: true, selector: "div[aebDatepickerYearTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setYear: "setYear" }, host: { properties: { "class.aeb-datepicker-year-tiles": "true" } }, viewQueries: [{ propertyName: "yearTiles", predicate: ["yearTile"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (yearNum of years(); track yearNum) {\n<div\n  #yearTile\n  class=\"aeb-datepicker-year-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n      'aeb-datepicker-year-tiles__tile--disabled':\n        yearNum | isYearDisabled: woDays() : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitYear(yearNum)\"\n>\n  {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsYearDisabledPipe, name: "isYearDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DatepickerYearTiles, isStandalone: true, selector: "div[aebDatepickerYearTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setYear: "setYear" }, host: { properties: { "class.aeb-datepicker-year-tiles": "true" } }, viewQueries: [{ propertyName: "yearTiles", predicate: ["yearTile"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (yearNum of years(); track $index) {\n<div\n  #yearTile\n  class=\"aeb-datepicker-year-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n      'aeb-datepicker-year-tiles__tile--disabled':\n        yearNum | isYearDisabled: woDays() : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitYear(yearNum)\"\n>\n  {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsYearDisabledPipe, name: "isYearDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerYearTiles, decorators: [{
             type: Component,
-            args: [{ selector: 'div[aebDatepickerYearTiles]', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'div[aebDatepickerYearTiles]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.aeb-datepicker-year-tiles]': 'true'
-                    }, imports: [NgClass, IsYearDisabledPipe], template: "@for (yearNum of years(); track yearNum) {\n<div\n  #yearTile\n  class=\"aeb-datepicker-year-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n      'aeb-datepicker-year-tiles__tile--disabled':\n        yearNum | isYearDisabled: woDays() : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitYear(yearNum)\"\n>\n  {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
+                    }, imports: [NgClass, IsYearDisabledPipe], template: "@for (yearNum of years(); track $index) {\n<div\n  #yearTile\n  class=\"aeb-datepicker-year-tiles__tile\"\n  [ngClass]=\"{\n      'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n      'aeb-datepicker-year-tiles__tile--disabled':\n        yearNum | isYearDisabled: woDays() : (minDate() || null) : (maxDate() || null)\n    }\"\n  (click)=\"emitYear(yearNum)\"\n>\n  {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
         }], propDecorators: { year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], woDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "woDays", required: false }] }], setYear: [{ type: i0.Output, args: ["setYear"] }], yearTiles: [{ type: i0.ViewChildren, args: ['yearTile', { isSignal: true }] }] } });
 class DatepickerCore {
@@ -1725,11 +1743,11 @@ class DatepickerCore {
         return new Date(year, 0, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerCore, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: DatepickerCore, isStandalone: true, selector: "div[aebDatepickerCore]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, withoutDays: { classPropertyName: "withoutDays", publicName: "withoutDays", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", woDaysMonth: "woDaysMonth", woDaysYear: "woDaysYear", woDaysMonthSubInc: "woDaysMonthSubInc" }, host: { properties: { "class.aeb-datepicker-core": "true", "class.aeb-datepicker-core--hidden": "hidden()" } }, providers: [{ provide: LOCALE_ID, useValue: 'ru' }], ngImport: i0, template: "<div class=\"aeb-datepicker-core__controls\">\n  <div class=\"aeb-datepicker-core__arrow\" (click)=\"subMonth()\">\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M15 5L8.35355 11.6464C8.15829 11.8417 8.15829 12.1583 8.35355 12.3536L15 19\"\n        stroke=\"#1F2632\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n  <div\n    class=\"aeb-datepicker-core__btn aeb-datepicker-core__btn--month\"\n    [class.aeb-datepicker-core__btn--active]=\"mode() === 'months'\"\n    (click)=\"showMonthsHandler()\"\n  >\n    {{ firstDay() | date: 'LLLL' | titlecase }}\n  </div>\n  <div\n    class=\"aeb-datepicker-core__btn\"\n    [class.aeb-datepicker-core__btn--active]=\"mode() === 'years'\"\n    (click)=\"showYearsHandler()\"\n  >\n    {{ firstDay() | date: 'yyyy' }}\n  </div>\n  <div class=\"aeb-datepicker-core__arrow\" (click)=\"addMonth()\">\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9 5L15.6464 11.6464C15.8417 11.8417 15.8417 12.1583 15.6464 12.3536L9 19\"\n        stroke=\"#1F2632\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n</div>\n<div\n  aebDatepickerMonth\n  [style.display]=\"mode() === 'none' ? 'block' : 'none'\"\n  [month]=\"month()\"\n  [date]=\"date()\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [excludedDates]=\"excludedDates()\"\n  (setDate)=\"setDate($event)\"\n></div>\n\n<div\n  aebDatepickerYearTiles\n  [style.display]=\"mode() === 'years' ? 'grid' : 'none'\"\n  [year]=\"currentYear()\"\n  [minYear]=\"minYear()\"\n  [maxYear]=\"maxYear()\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [woDays]=\"withoutDays()\"\n  (setYear)=\"setYear($event)\"\n></div>\n\n<div\n  aebDatepickerMonthTiles\n  [style.display]=\"mode() === 'months' ? 'grid' : 'none'\"\n  [year]=\"currentYear()\"\n  [month]=\"currentMonth()\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [woDays]=\"withoutDays()\"\n  (setMonth)=\"setMonth($event)\"\n></div>\n", styles: [".aeb-datepicker-core{z-index:var(--z-dropdown);-webkit-user-select:none;user-select:none;position:absolute;top:62px;background-color:var(--c-bg-light);padding:20px;border-radius:20px;box-shadow:0 4px 12px #27303e26;opacity:0;visibility:hidden;transform:scaleY(.8) rotateX(-60deg);transform-origin:top center;transition:all .3s cubic-bezier(.4,0,.2,1);transition-property:opacity,transform,visibility;perspective:1000px;transform-style:preserve-3d}.aeb-datepicker-core--hidden{opacity:0;visibility:hidden;transform:scaleY(.8) rotateX(-60deg)}.aeb-datepicker-core:not(.aeb-datepicker-core--hidden){opacity:1;visibility:visible;transform:scaleY(1) rotateX(0)}.aeb-datepicker-core__calendar{width:100%}.aeb-datepicker-core__controls{display:flex;align-items:center;justify-content:center;margin-bottom:16px}.aeb-datepicker-core__arrow{cursor:pointer;display:flex}.aeb-datepicker-core__btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:72px;height:32px;padding:6px 10px;margin-right:16px;font-size:14px;cursor:pointer;border-radius:8px;background-color:var(--c-bg-surface)}.aeb-datepicker-core__btn--month{width:112px;margin-right:8px;margin-left:16px}.aeb-datepicker-core__btn--active{color:var(--c-t-links)}\n"], dependencies: [{ kind: "component", type: DatepickerMonth, selector: "div[aebDatepickerMonth]", inputs: ["month", "date", "minDate", "maxDate", "excludedDates"], outputs: ["setDate"] }, { kind: "component", type: DatepickerMonthTiles, selector: "div[aebDatepickerMonthTiles]", inputs: ["year", "month", "minDate", "maxDate", "woDays"], outputs: ["setMonth"] }, { kind: "component", type: DatepickerYearTiles, selector: "div[aebDatepickerYearTiles]", inputs: ["year", "minYear", "maxYear", "minDate", "maxDate", "woDays"], outputs: ["setYear"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: DatepickerCore, isStandalone: true, selector: "div[aebDatepickerCore]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, withoutDays: { classPropertyName: "withoutDays", publicName: "withoutDays", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", woDaysMonth: "woDaysMonth", woDaysYear: "woDaysYear", woDaysMonthSubInc: "woDaysMonthSubInc" }, host: { properties: { "class.aeb-datepicker-core": "true", "class.aeb-datepicker-core--hidden": "hidden()" } }, providers: [{ provide: LOCALE_ID, useValue: 'ru' }], ngImport: i0, template: "<div class=\"aeb-datepicker-core__controls\">\n  <div class=\"aeb-datepicker-core__arrow\" (click)=\"subMonth()\">\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M15 5L8.35355 11.6464C8.15829 11.8417 8.15829 12.1583 8.35355 12.3536L15 19\"\n        stroke=\"#1F2632\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n  <div\n    class=\"aeb-datepicker-core__btn aeb-datepicker-core__btn--month\"\n    [class.aeb-datepicker-core__btn--active]=\"mode() === 'months'\"\n    (click)=\"showMonthsHandler()\"\n  >\n    {{ firstDay() | date: 'LLLL' | titlecase }}\n  </div>\n  <div\n    class=\"aeb-datepicker-core__btn\"\n    [class.aeb-datepicker-core__btn--active]=\"mode() === 'years'\"\n    (click)=\"showYearsHandler()\"\n  >\n    {{ firstDay() | date: 'yyyy' }}\n  </div>\n  <div class=\"aeb-datepicker-core__arrow\" (click)=\"addMonth()\">\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9 5L15.6464 11.6464C15.8417 11.8417 15.8417 12.1583 15.6464 12.3536L9 19\"\n        stroke=\"#1F2632\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n</div>\n<div\n  aebDatepickerMonth\n  [style.display]=\"mode() === 'none' ? 'block' : 'none'\"\n  [month]=\"month()\"\n  [date]=\"date()\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [excludedDates]=\"excludedDates()\"\n  (setDate)=\"setDate($event)\"\n></div>\n\n<div\n  aebDatepickerYearTiles\n  [style.display]=\"mode() === 'years' ? 'grid' : 'none'\"\n  [year]=\"currentYear()\"\n  [minYear]=\"minYear()\"\n  [maxYear]=\"maxYear()\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [woDays]=\"withoutDays()\"\n  (setYear)=\"setYear($event)\"\n></div>\n\n<div\n  aebDatepickerMonthTiles\n  [style.display]=\"mode() === 'months' ? 'grid' : 'none'\"\n  [year]=\"currentYear()\"\n  [month]=\"currentMonth()\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [woDays]=\"withoutDays()\"\n  (setMonth)=\"setMonth($event)\"\n></div>\n", styles: [".aeb-datepicker-core{z-index:var(--z-dropdown);-webkit-user-select:none;user-select:none;position:absolute;top:62px;background-color:var(--c-bg-light);padding:20px;border-radius:20px;box-shadow:0 4px 12px #27303e26;opacity:0;visibility:hidden;transform:scaleY(.8) rotateX(-60deg);transform-origin:top center;transition:all .3s cubic-bezier(.4,0,.2,1);transition-property:opacity,transform,visibility;perspective:1000px;transform-style:preserve-3d}.aeb-datepicker-core--hidden{opacity:0;visibility:hidden;transform:scaleY(.8) rotateX(-60deg)}.aeb-datepicker-core:not(.aeb-datepicker-core--hidden){opacity:1;visibility:visible;transform:scaleY(1) rotateX(0)}.aeb-datepicker-core__calendar{width:100%}.aeb-datepicker-core__controls{display:flex;align-items:center;justify-content:center;margin-bottom:16px}.aeb-datepicker-core__arrow{cursor:pointer;display:flex}.aeb-datepicker-core__btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:72px;height:32px;padding:6px 10px;margin-right:16px;font-size:14px;cursor:pointer;border-radius:8px;background-color:var(--c-bg-surface)}.aeb-datepicker-core__btn--month{width:112px;margin-right:8px;margin-left:16px}.aeb-datepicker-core__btn--active{color:var(--c-t-links)}\n"], dependencies: [{ kind: "component", type: DatepickerMonth, selector: "div[aebDatepickerMonth]", inputs: ["month", "date", "minDate", "maxDate", "excludedDates"], outputs: ["setDate"] }, { kind: "component", type: DatepickerMonthTiles, selector: "div[aebDatepickerMonthTiles]", inputs: ["year", "month", "minDate", "maxDate", "woDays"], outputs: ["setMonth"] }, { kind: "component", type: DatepickerYearTiles, selector: "div[aebDatepickerYearTiles]", inputs: ["year", "minYear", "maxYear", "minDate", "maxDate", "woDays"], outputs: ["setYear"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatepickerCore, decorators: [{
             type: Component,
-            args: [{ selector: 'div[aebDatepickerCore]', providers: [{ provide: LOCALE_ID, useValue: 'ru' }], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'div[aebDatepickerCore]', providers: [{ provide: LOCALE_ID, useValue: 'ru' }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.aeb-datepicker-core]': 'true',
                         '[class.aeb-datepicker-core--hidden]': 'hidden()'
                     }, imports: [
@@ -2218,11 +2236,11 @@ class Datepicker {
                 useExisting: forwardRef(() => Datepicker),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "core", first: true, predicate: DatepickerCore, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: FormFieldDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ClickOutsideDirective, outputs: ["clickOutside", "clickOutside"] }], ngImport: i0, template: "<aeb-form-field\n  class=\"aeb-datepicker__field\"\n  [ngClass]=\"{ 'aeb-datepicker__field--onerror': hasError() }\"\n>\n  <label aebLabel class=\"aeb-datepicker__label\">{{ placeholder() }}</label>\n  <input\n    aebInput\n    type=\"text\"\n    class=\"aeb-datepicker__input\"\n    [maxlength]=\"withoutDays() ? 7 : 10\"\n    [(ngModel)]=\"inputValue\"\n    (change)=\"handleInput($event)\"\n    (click)=\"clickInputHandler()\"\n    (input)=\"typeHandler()\"\n    (keydown)=\"keyDownHandler($event)\"\n    #input\n  />\n  <div class=\"aeb-datepicker__calendar-icon\" (click)=\"handleOpen()\">\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect\n        x=\"5\"\n        y=\"6\"\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        stroke=\"#BFC6D0\"\n        stroke-width=\"2\"\n      />\n      <rect x=\"4\" y=\"5\" width=\"16\" height=\"4\" rx=\"2\" fill=\"#BFC6D0\" />\n      <rect\n        x=\"9\"\n        y=\"3\"\n        width=\"3\"\n        height=\"2\"\n        rx=\"1\"\n        transform=\"rotate(90 9 3)\"\n        fill=\"#BFC6D0\"\n      />\n      <rect\n        x=\"17\"\n        y=\"3\"\n        width=\"3\"\n        height=\"2\"\n        rx=\"1\"\n        transform=\"rotate(90 17 3)\"\n        fill=\"#BFC6D0\"\n      />\n    </svg>\n  </div>\n</aeb-form-field>\n<div\n  aebDatepickerCore\n  [date]=\"internalDate ?? undefined\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [excludedDates]=\"excludedDates()\"\n  [minYear]=\"minYear()\"\n  [maxYear]=\"maxYear()\"\n  [withoutDays]=\"withoutDays()\"\n  [hidden]=\"!isOpen\"\n  (dateChange)=\"handleDateChange($event)\"\n  (woDaysMonth)=\"woDaysMonthSet($event)\"\n  (woDaysYear)=\"woDaysYearSet($event)\"\n  (woDaysMonthSubInc)=\"woMonthIncSub($event)\"\n  #core\n></div>\n", styles: [".aeb-datepicker{position:relative;width:100%;color:var(--c-t-primary)}.aeb-datepicker--disabled{pointer-events:none;opacity:.7}.aeb-datepicker__field{position:relative;min-width:312px}.aeb-datepicker__input{padding-right:35px!important}.aeb-datepicker__calendar-icon{position:absolute;top:16px;right:12px;width:24px;height:24px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerCore, selector: "div[aebDatepickerCore]", inputs: ["date", "minDate", "maxDate", "excludedDates", "minYear", "maxYear", "withoutDays", "hidden"], outputs: ["dateChange", "woDaysMonth", "woDaysYear", "woDaysMonthSubInc"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "core", first: true, predicate: DatepickerCore, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: FormFieldDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ClickOutsideDirective, outputs: ["clickOutside", "clickOutside"] }], ngImport: i0, template: "<aeb-form-field\n  class=\"aeb-datepicker__field\"\n  [ngClass]=\"{ 'aeb-datepicker__field--onerror': hasError() }\"\n>\n  <label aebLabel class=\"aeb-datepicker__label\">{{ placeholder() }}</label>\n  <input\n    aebInput\n    type=\"text\"\n    class=\"aeb-datepicker__input\"\n    [maxlength]=\"withoutDays() ? 7 : 10\"\n    [(ngModel)]=\"inputValue\"\n    (change)=\"handleInput($event)\"\n    (click)=\"clickInputHandler()\"\n    (input)=\"typeHandler()\"\n    (keydown)=\"keyDownHandler($event)\"\n    #input\n  />\n  <div class=\"aeb-datepicker__calendar-icon\" (click)=\"handleOpen()\">\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect\n        x=\"5\"\n        y=\"6\"\n        width=\"14\"\n        height=\"14\"\n        rx=\"1\"\n        stroke=\"#BFC6D0\"\n        stroke-width=\"2\"\n      />\n      <rect x=\"4\" y=\"5\" width=\"16\" height=\"4\" rx=\"2\" fill=\"#BFC6D0\" />\n      <rect\n        x=\"9\"\n        y=\"3\"\n        width=\"3\"\n        height=\"2\"\n        rx=\"1\"\n        transform=\"rotate(90 9 3)\"\n        fill=\"#BFC6D0\"\n      />\n      <rect\n        x=\"17\"\n        y=\"3\"\n        width=\"3\"\n        height=\"2\"\n        rx=\"1\"\n        transform=\"rotate(90 17 3)\"\n        fill=\"#BFC6D0\"\n      />\n    </svg>\n  </div>\n</aeb-form-field>\n<div\n  aebDatepickerCore\n  [date]=\"internalDate ?? undefined\"\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [excludedDates]=\"excludedDates()\"\n  [minYear]=\"minYear()\"\n  [maxYear]=\"maxYear()\"\n  [withoutDays]=\"withoutDays()\"\n  [hidden]=\"!isOpen\"\n  (dateChange)=\"handleDateChange($event)\"\n  (woDaysMonth)=\"woDaysMonthSet($event)\"\n  (woDaysYear)=\"woDaysYearSet($event)\"\n  (woDaysMonthSubInc)=\"woMonthIncSub($event)\"\n  #core\n></div>\n", styles: [".aeb-datepicker{position:relative;width:100%;color:var(--c-t-primary)}.aeb-datepicker--disabled{pointer-events:none;opacity:.7}.aeb-datepicker__field{position:relative;min-width:312px}.aeb-datepicker__input{padding-right:35px!important}.aeb-datepicker__calendar-icon{position:absolute;top:16px;right:12px;width:24px;height:24px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerCore, selector: "div[aebDatepickerCore]", inputs: ["date", "minDate", "maxDate", "excludedDates", "minYear", "maxYear", "withoutDays", "hidden"], outputs: ["dateChange", "woDaysMonth", "woDaysYear", "woDaysMonthSubInc"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Datepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-datepicker', encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'aeb-datepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => Datepicker),
@@ -2411,11 +2429,11 @@ class DropdownMenu {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DropdownMenu, isStandalone: true, selector: "aeb-dropdown-menu", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxShownOptions: { classPropertyName: "maxShownOptions", publicName: "maxShownOptions", isSignal: true, isRequired: false, transformFunction: null }, optionSize: { classPropertyName: "optionSize", publicName: "optionSize", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outsideClick: "outsideClick", optionSelect: "optionSelect" }, host: { listeners: { "clickOutside": "clickOutsideHandler($event)", "keydown": "onKeyDown($event)" }, properties: { "class.open": "isOpen()", "class.bottom": "direction() === \"bottom\"", "class.top": "direction() === \"top\"", "style.max-height": "maxHeight", "attr.role": "\"listbox\"", "attr.aria-label": "\"Dropdown options\"" }, classAttribute: "aeb-dropdown-menu" }, ngImport: i0, template: "@for (option of options(); track option.value; let i = $index) {\n<div\n  class=\"aeb-dropdown-menu__option\"\n  [class.active]=\"option === selectedOption()\"\n  [class.focused]=\"i === focusedIndex()\"\n  [class.has-additional]=\"option.additional\"\n  [style.height]=\"optionHeightPx() + 'px'\"\n  [attr.tabindex]=\"-1\"\n  [attr.role]=\"'option'\"\n  [attr.aria-selected]=\"i === focusedIndex()\"\n  (click)=\"selectOption(option.value)\"\n>\n  <div class=\"aeb-dropdown-menu__option-inner\">\n    <p>{{ option.label }}</p>\n    @if (option.additional) {\n    <small>{{ option.additional }}</small>\n    }\n  </div>\n</div>\n}\n<div class=\"aeb-dropdown-menu__spacer\"></div>\n", styles: [".aeb-dropdown-menu{position:absolute;z-index:var(--z-dropdown);width:100%;left:0;background:var(--c-bg-light);border-radius:12px;box-shadow:0 4px 12px #27303e26;overflow-y:auto;opacity:0;visibility:hidden;color:var(--c-t-primary);padding:8px 8px 0;box-sizing:border-box;transform:scaleY(.8) rotateX(-60deg);transform-origin:top center;transition:all .3s cubic-bezier(.4,0,.2,1);transition-property:opacity,transform,visibility;perspective:1000px;transform-style:preserve-3d}.aeb-dropdown-menu:empty{display:none}.aeb-dropdown-menu__option{padding:0 24px;box-sizing:border-box;line-height:20px;text-overflow:ellipsis;overflow:hidden;cursor:pointer;display:flex;justify-content:center;flex-direction:column;border-radius:12px;margin-bottom:2px}.aeb-dropdown-menu__option:last-child{margin-bottom:0}.aeb-dropdown-menu__option:hover,.aeb-dropdown-menu__option.active,.aeb-dropdown-menu__option.focused{background-color:var(--c-bg-surface)}.aeb-dropdown-menu__option p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__option.has-additional{padding:0 24px}.aeb-dropdown-menu__option.has-additional small{display:block;margin-top:4px;line-height:16px;font-size:14px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__spacer{height:8px;width:100%;flex-shrink:0}.aeb-dropdown-menu.bottom{top:calc(100% + 4px);transform-origin:top center;transform:scaleY(.8) rotateX(-60deg)}.aeb-dropdown-menu.top{bottom:calc(100% + 4px);top:auto;transform-origin:bottom center;transform:scaleY(.8) rotateX(60deg)}.aeb-dropdown-menu.open{opacity:1;visibility:visible;transform:scaleY(1) rotateX(0)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DropdownMenu, isStandalone: true, selector: "aeb-dropdown-menu", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxShownOptions: { classPropertyName: "maxShownOptions", publicName: "maxShownOptions", isSignal: true, isRequired: false, transformFunction: null }, optionSize: { classPropertyName: "optionSize", publicName: "optionSize", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outsideClick: "outsideClick", optionSelect: "optionSelect" }, host: { listeners: { "clickOutside": "clickOutsideHandler($event)", "keydown": "onKeyDown($event)" }, properties: { "class.open": "isOpen()", "class.bottom": "direction() === \"bottom\"", "class.top": "direction() === \"top\"", "style.max-height": "maxHeight", "attr.role": "\"listbox\"", "attr.aria-label": "\"Dropdown options\"" }, classAttribute: "aeb-dropdown-menu" }, ngImport: i0, template: "@for (option of options(); track $index) {\n<div\n  class=\"aeb-dropdown-menu__option\"\n  [class.active]=\"option === selectedOption()\"\n  [class.focused]=\"$index === focusedIndex()\"\n  [class.has-additional]=\"option.additional\"\n  [style.height]=\"optionHeightPx() + 'px'\"\n  [attr.tabindex]=\"-1\"\n  [attr.role]=\"'option'\"\n  [attr.aria-selected]=\"$index === focusedIndex()\"\n  (click)=\"selectOption(option.value)\"\n>\n  <div class=\"aeb-dropdown-menu__option-inner\">\n    <p>{{ option.label }}</p>\n    @if (option.additional) {\n    <small>{{ option.additional }}</small>\n    }\n  </div>\n</div>\n}\n<div class=\"aeb-dropdown-menu__spacer\"></div>\n", styles: [".aeb-dropdown-menu{position:absolute;z-index:var(--z-dropdown);width:100%;left:0;background:var(--c-bg-light);border-radius:12px;box-shadow:0 4px 12px #27303e26;overflow-y:auto;opacity:0;visibility:hidden;color:var(--c-t-primary);padding:8px 8px 0;box-sizing:border-box;transform:scaleY(.8) rotateX(-60deg);transform-origin:top center;transition:all .3s cubic-bezier(.4,0,.2,1);transition-property:opacity,transform,visibility;perspective:1000px;transform-style:preserve-3d}.aeb-dropdown-menu:empty{display:none}.aeb-dropdown-menu__option{padding:0 24px;box-sizing:border-box;line-height:20px;text-overflow:ellipsis;overflow:hidden;cursor:pointer;display:flex;justify-content:center;flex-direction:column;border-radius:12px;margin-bottom:2px}.aeb-dropdown-menu__option:last-child{margin-bottom:0}.aeb-dropdown-menu__option:hover,.aeb-dropdown-menu__option.active,.aeb-dropdown-menu__option.focused{background-color:var(--c-bg-surface)}.aeb-dropdown-menu__option p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__option.has-additional{padding:0 24px}.aeb-dropdown-menu__option.has-additional small{display:block;margin-top:4px;line-height:16px;font-size:14px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__spacer{height:8px;width:100%;flex-shrink:0}.aeb-dropdown-menu.bottom{top:calc(100% + 4px);transform-origin:top center;transform:scaleY(.8) rotateX(-60deg)}.aeb-dropdown-menu.top{bottom:calc(100% + 4px);top:auto;transform-origin:bottom center;transform:scaleY(.8) rotateX(60deg)}.aeb-dropdown-menu.open{opacity:1;visibility:visible;transform:scaleY(1) rotateX(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DropdownMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-dropdown-menu', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'aeb-dropdown-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'aeb-dropdown-menu',
                         '[class.open]': 'isOpen()',
                         '[class.bottom]': 'direction() === "bottom"',
@@ -2425,7 +2443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[attr.aria-label]': '"Dropdown options"',
                         '(clickOutside)': 'clickOutsideHandler($event)',
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "@for (option of options(); track option.value; let i = $index) {\n<div\n  class=\"aeb-dropdown-menu__option\"\n  [class.active]=\"option === selectedOption()\"\n  [class.focused]=\"i === focusedIndex()\"\n  [class.has-additional]=\"option.additional\"\n  [style.height]=\"optionHeightPx() + 'px'\"\n  [attr.tabindex]=\"-1\"\n  [attr.role]=\"'option'\"\n  [attr.aria-selected]=\"i === focusedIndex()\"\n  (click)=\"selectOption(option.value)\"\n>\n  <div class=\"aeb-dropdown-menu__option-inner\">\n    <p>{{ option.label }}</p>\n    @if (option.additional) {\n    <small>{{ option.additional }}</small>\n    }\n  </div>\n</div>\n}\n<div class=\"aeb-dropdown-menu__spacer\"></div>\n", styles: [".aeb-dropdown-menu{position:absolute;z-index:var(--z-dropdown);width:100%;left:0;background:var(--c-bg-light);border-radius:12px;box-shadow:0 4px 12px #27303e26;overflow-y:auto;opacity:0;visibility:hidden;color:var(--c-t-primary);padding:8px 8px 0;box-sizing:border-box;transform:scaleY(.8) rotateX(-60deg);transform-origin:top center;transition:all .3s cubic-bezier(.4,0,.2,1);transition-property:opacity,transform,visibility;perspective:1000px;transform-style:preserve-3d}.aeb-dropdown-menu:empty{display:none}.aeb-dropdown-menu__option{padding:0 24px;box-sizing:border-box;line-height:20px;text-overflow:ellipsis;overflow:hidden;cursor:pointer;display:flex;justify-content:center;flex-direction:column;border-radius:12px;margin-bottom:2px}.aeb-dropdown-menu__option:last-child{margin-bottom:0}.aeb-dropdown-menu__option:hover,.aeb-dropdown-menu__option.active,.aeb-dropdown-menu__option.focused{background-color:var(--c-bg-surface)}.aeb-dropdown-menu__option p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__option.has-additional{padding:0 24px}.aeb-dropdown-menu__option.has-additional small{display:block;margin-top:4px;line-height:16px;font-size:14px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__spacer{height:8px;width:100%;flex-shrink:0}.aeb-dropdown-menu.bottom{top:calc(100% + 4px);transform-origin:top center;transform:scaleY(.8) rotateX(-60deg)}.aeb-dropdown-menu.top{bottom:calc(100% + 4px);top:auto;transform-origin:bottom center;transform:scaleY(.8) rotateX(60deg)}.aeb-dropdown-menu.open{opacity:1;visibility:visible;transform:scaleY(1) rotateX(0)}\n"] }]
+                    }, template: "@for (option of options(); track $index) {\n<div\n  class=\"aeb-dropdown-menu__option\"\n  [class.active]=\"option === selectedOption()\"\n  [class.focused]=\"$index === focusedIndex()\"\n  [class.has-additional]=\"option.additional\"\n  [style.height]=\"optionHeightPx() + 'px'\"\n  [attr.tabindex]=\"-1\"\n  [attr.role]=\"'option'\"\n  [attr.aria-selected]=\"$index === focusedIndex()\"\n  (click)=\"selectOption(option.value)\"\n>\n  <div class=\"aeb-dropdown-menu__option-inner\">\n    <p>{{ option.label }}</p>\n    @if (option.additional) {\n    <small>{{ option.additional }}</small>\n    }\n  </div>\n</div>\n}\n<div class=\"aeb-dropdown-menu__spacer\"></div>\n", styles: [".aeb-dropdown-menu{position:absolute;z-index:var(--z-dropdown);width:100%;left:0;background:var(--c-bg-light);border-radius:12px;box-shadow:0 4px 12px #27303e26;overflow-y:auto;opacity:0;visibility:hidden;color:var(--c-t-primary);padding:8px 8px 0;box-sizing:border-box;transform:scaleY(.8) rotateX(-60deg);transform-origin:top center;transition:all .3s cubic-bezier(.4,0,.2,1);transition-property:opacity,transform,visibility;perspective:1000px;transform-style:preserve-3d}.aeb-dropdown-menu:empty{display:none}.aeb-dropdown-menu__option{padding:0 24px;box-sizing:border-box;line-height:20px;text-overflow:ellipsis;overflow:hidden;cursor:pointer;display:flex;justify-content:center;flex-direction:column;border-radius:12px;margin-bottom:2px}.aeb-dropdown-menu__option:last-child{margin-bottom:0}.aeb-dropdown-menu__option:hover,.aeb-dropdown-menu__option.active,.aeb-dropdown-menu__option.focused{background-color:var(--c-bg-surface)}.aeb-dropdown-menu__option p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__option.has-additional{padding:0 24px}.aeb-dropdown-menu__option.has-additional small{display:block;margin-top:4px;line-height:16px;font-size:14px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aeb-dropdown-menu__spacer{height:8px;width:100%;flex-shrink:0}.aeb-dropdown-menu.bottom{top:calc(100% + 4px);transform-origin:top center;transform:scaleY(.8) rotateX(-60deg)}.aeb-dropdown-menu.top{bottom:calc(100% + 4px);top:auto;transform-origin:bottom center;transform:scaleY(.8) rotateX(60deg)}.aeb-dropdown-menu.open{opacity:1;visibility:visible;transform:scaleY(1) rotateX(0)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], maxShownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxShownOptions", required: false }] }], optionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionSize", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], outsideClick: [{ type: i0.Output, args: ["outsideClick"] }], optionSelect: [{ type: i0.Output, args: ["optionSelect"] }] } });
 class Dropdown {
@@ -2931,22 +2949,21 @@ class FileAttach {
         this.changeListEvent = output();
         this.requirementViolatedError = output();
         this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.files = [];
-        this.showErrorMessageText = '';
-        this.showErrorMessageInternal = true; // Internal state (can be modified)
-        this.isFileInFocus = false;
+        this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        this.showErrorMessageText = signal('', ...(ngDevMode ? [{ debugName: "showErrorMessageText" }] : /* istanbul ignore next */ []));
+        this.showErrorMessageInternal = signal(true, ...(ngDevMode ? [{ debugName: "showErrorMessageInternal" }] : /* istanbul ignore next */ []));
+        this.isFileInFocus = signal(false, ...(ngDevMode ? [{ debugName: "isFileInFocus" }] : /* istanbul ignore next */ []));
         if (this._ngControl) {
             this._ngControl.valueAccessor = this;
         }
-        // Initialize from signal input
-        this.showErrorMessageInternal = this.showErrorMessage();
+        this.showErrorMessageInternal.set(this.showErrorMessage());
     }
     ngOnInit() {
         this._subscriptions.add(this.changeListEvent.subscribe(() => {
-            this.showErrorMessageText = '';
+            this.showErrorMessageText.set('');
         }));
         this._subscriptions.add(this.requirementViolatedError.subscribe((error) => {
-            this.showErrorMessageText = error.message;
+            this.showErrorMessageText.set(error.message);
         }));
         if (this._ngControl && this._ngControl.control) {
             this._subscriptions.add(this._ngControl.control.statusChanges
@@ -2957,27 +2974,24 @@ class FileAttach {
                         const control = this._ngControl?.control;
                         const errors = control?.errors;
                         if (errors.fileTooLarge) {
-                            this.showErrorMessageText =
-                                'Размер файлов превышает максимально допустимый';
+                            this.showErrorMessageText.set('Размер файлов превышает максимально допустимый');
                         }
                         else if (errors.incorrectExtension) {
-                            this.showErrorMessageText = 'Выбран недопустимый файл';
+                            this.showErrorMessageText.set('Выбран недопустимый файл');
                         }
                         else if (errors.tooMuchFiles) {
-                            this.showErrorMessageText =
-                                'Количество файлов превышает максимально допустимое';
+                            this.showErrorMessageText.set('Количество файлов превышает максимально допустимое');
                         }
                         else if (errors.other) {
-                            this.showErrorMessageText =
-                                'Требования к загружаемым файлам не выполнены';
+                            this.showErrorMessageText.set('Требования к загружаемым файлам не выполнены');
                         }
                         else if (errors.notEnoughFiles) {
-                            this.showErrorMessageText = 'Не все файлы были загружены';
+                            this.showErrorMessageText.set('Не все файлы были загружены');
                         }
-                        this.showErrorMessageInternal = true;
+                        this.showErrorMessageInternal.set(true);
                     }
                     else {
-                        this.showErrorMessageInternal = false;
+                        this.showErrorMessageInternal.set(false);
                     }
                 }
             }));
@@ -3001,10 +3015,10 @@ class FileAttach {
         return;
     }
     clearFileList() {
-        this.files = [];
+        this.files.set([]);
         this.onTouch();
-        this.onChange(this.files);
-        this.changeListEvent.emit(this.files);
+        this.onChange(this.files());
+        this.changeListEvent.emit(this.files());
     }
     chooseFile(files) {
         this.addFile(files);
@@ -3019,14 +3033,15 @@ class FileAttach {
         }
         this.addFile(files);
     }
-    checkFileInFocus(_isInFocus) {
+    checkFileInFocus(isInFocus) {
+        this.isFileInFocus.set(isInFocus);
         this.onTouch();
     }
     addFile(files) {
         const fileArray = this.fileListToArray(files);
         const requirement = this.requirement();
         if (requirement && requirement.isRequirementCompleted) {
-            const confirmationResult = requirement.isRequirementCompleted([...fileArray], [...this.files]);
+            const confirmationResult = requirement.isRequirementCompleted([...fileArray], [...this.files()]);
             if (!confirmationResult.status) {
                 if (confirmationResult.error === undefined) {
                     this.requirementViolatedError.emit(this._defaultRequirementViolatedError);
@@ -3037,18 +3052,14 @@ class FileAttach {
                 return;
             }
             else {
-                /**
-                 * Если установлен режим выбора только одного файла,
-                 * то при новом выборе файла удаляем предыдущий, чтобы заменить его на новый
-                 */
                 if (!this.multi()) {
-                    this.files = [];
+                    this.files.set([]);
                 }
             }
         }
-        this.files.push(...fileArray);
-        this.changeListEvent.emit(this.files);
-        this.onChange(this.files);
+        this.files.update((current) => [...current, ...fileArray]);
+        this.changeListEvent.emit(this.files());
+        this.onChange(this.files());
     }
     fileListToArray(fileList) {
         return Array.from(fileList);
@@ -3056,22 +3067,22 @@ class FileAttach {
     onChange(_value) { }
     onTouch() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FileAttach, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FileAttach, isStandalone: true, selector: "aeb-file-attach", inputs: { documentListText: { classPropertyName: "documentListText", publicName: "documentListText", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessage: { classPropertyName: "showErrorMessage", publicName: "showErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, attachButtonText: { classPropertyName: "attachButtonText", publicName: "attachButtonText", isSignal: true, isRequired: false, transformFunction: null }, attachButtonIcon: { classPropertyName: "attachButtonIcon", publicName: "attachButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, layoutMod: { classPropertyName: "layoutMod", publicName: "layoutMod", isSignal: true, isRequired: false, transformFunction: null }, attachmentDescription: { classPropertyName: "attachmentDescription", publicName: "attachmentDescription", isSignal: true, isRequired: false, transformFunction: null }, requirement: { classPropertyName: "requirement", publicName: "requirement", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeListEvent: "changeListEvent", requirementViolatedError: "requirementViolatedError" }, host: { listeners: { "filesChoosen": "dropFile($event)", "filesInFocus": "checkFileInFocus($event)" }, properties: { "class.aeb-attach--file-in-focus": "isFileInFocus", "class.aeb-attach--simple": "layoutMod() === \"simple\"" }, classAttribute: "aeb-attach" }, hostDirectives: [{ directive: DragAndDropDirective, outputs: ["filesChoosen", "filesChoosen", "filesInFocus", "filesInFocus"] }], ngImport: i0, template: "<ng-template #buttonTemplate>\n  <aeb-attach-button\n    [multi]=\"multi()\"\n    [filesAmount]=\"files.length\"\n    [attachButtonText]=\"attachButtonText()\"\n    [attachButtonIcon]=\"attachButtonIcon()\"\n    [showErrorMessage]=\"showErrorMessage()\"\n    [showErrorMessageText]=\"showErrorMessageText\"\n    [requirement]=\"requirement()\"\n    (buttonClick)=\"attachButtonClicked()\"\n    (fileChoosen)=\"chooseFile($event)\"\n    (fileListCleared)=\"clearFileList()\"\n  />\n</ng-template>\n@if (layoutMod() === 'default') {\n<aeb-default-body\n  [title]=\"title()\"\n  [attachmentDescription]=\"attachmentDescription()\"\n  [documentListText]=\"documentListText()\"\n>\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-default-body>\n} @if (layoutMod() === 'salaryPortal') {\n<aeb-salary-portal-body [title]=\"title()\">\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-salary-portal-body>\n} @if (layoutMod() === 'simple') {\n<ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n}\n", styles: [".aeb-attach{box-sizing:border-box;padding:calc(24px - var(--border-skinny));border:var(--border-skinny) dashed var(--color-mono-300);color:var(--color-mono-900);border-radius:var(--border-medium-rounded);display:flex;flex-direction:column}.aeb-attach--file-in-focus{border:var(--border-skinny) dashed var(--color-blue-500)}.aeb-attach--simple{box-sizing:border-box;width:100%;padding:0;color:var(--color-mono-900);border:var(--no-border)}\n"], dependencies: [{ kind: "component", type: AttachButton, selector: "aeb-attach-button", inputs: ["filesAmount", "requirement", "attachButtonText", "attachButtonIcon", "multi", "showErrorMessage", "showErrorMessageText"], outputs: ["fileChoosen", "buttonClick", "fileListCleared"] }, { kind: "component", type: DefaultBody, selector: "aeb-default-body", inputs: ["title", "attachmentDescription", "documentListText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SalaryPortalBody, selector: "aeb-salary-portal-body", inputs: ["title"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FileAttach, isStandalone: true, selector: "aeb-file-attach", inputs: { documentListText: { classPropertyName: "documentListText", publicName: "documentListText", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessage: { classPropertyName: "showErrorMessage", publicName: "showErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, attachButtonText: { classPropertyName: "attachButtonText", publicName: "attachButtonText", isSignal: true, isRequired: false, transformFunction: null }, attachButtonIcon: { classPropertyName: "attachButtonIcon", publicName: "attachButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, layoutMod: { classPropertyName: "layoutMod", publicName: "layoutMod", isSignal: true, isRequired: false, transformFunction: null }, attachmentDescription: { classPropertyName: "attachmentDescription", publicName: "attachmentDescription", isSignal: true, isRequired: false, transformFunction: null }, requirement: { classPropertyName: "requirement", publicName: "requirement", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeListEvent: "changeListEvent", requirementViolatedError: "requirementViolatedError" }, host: { listeners: { "filesChoosen": "dropFile($event)", "filesInFocus": "checkFileInFocus($event)" }, properties: { "class.aeb-attach--file-in-focus": "isFileInFocus()", "class.aeb-attach--simple": "layoutMod() === \"simple\"" }, classAttribute: "aeb-attach" }, hostDirectives: [{ directive: DragAndDropDirective, outputs: ["filesChoosen", "filesChoosen", "filesInFocus", "filesInFocus"] }], ngImport: i0, template: "<ng-template #buttonTemplate>\n  <aeb-attach-button\n    [multi]=\"multi()\"\n    [filesAmount]=\"files().length\"\n    [attachButtonText]=\"attachButtonText()\"\n    [attachButtonIcon]=\"attachButtonIcon()\"\n    [showErrorMessage]=\"showErrorMessage()\"\n    [showErrorMessageText]=\"showErrorMessageText()\"\n    [requirement]=\"requirement()\"\n    (buttonClick)=\"attachButtonClicked()\"\n    (fileChoosen)=\"chooseFile($event)\"\n    (fileListCleared)=\"clearFileList()\"\n  />\n</ng-template>\n@if (layoutMod() === 'default') {\n<aeb-default-body\n  [title]=\"title()\"\n  [attachmentDescription]=\"attachmentDescription()\"\n  [documentListText]=\"documentListText()\"\n>\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-default-body>\n} @if (layoutMod() === 'salaryPortal') {\n<aeb-salary-portal-body [title]=\"title()\">\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-salary-portal-body>\n} @if (layoutMod() === 'simple') {\n<ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n}\n", styles: [".aeb-attach{box-sizing:border-box;padding:calc(24px - var(--border-skinny));border:var(--border-skinny) dashed var(--color-mono-300);color:var(--color-mono-900);border-radius:var(--border-medium-rounded);display:flex;flex-direction:column}.aeb-attach--file-in-focus{border:var(--border-skinny) dashed var(--color-blue-500)}.aeb-attach--simple{box-sizing:border-box;width:100%;padding:0;color:var(--color-mono-900);border:var(--no-border)}\n"], dependencies: [{ kind: "component", type: AttachButton, selector: "aeb-attach-button", inputs: ["filesAmount", "requirement", "attachButtonText", "attachButtonIcon", "multi", "showErrorMessage", "showErrorMessageText"], outputs: ["fileChoosen", "buttonClick", "fileListCleared"] }, { kind: "component", type: DefaultBody, selector: "aeb-default-body", inputs: ["title", "attachmentDescription", "documentListText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SalaryPortalBody, selector: "aeb-salary-portal-body", inputs: ["title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FileAttach, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-file-attach', encapsulation: ViewEncapsulation.None, hostDirectives: [
+            args: [{ selector: 'aeb-file-attach', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: DragAndDropDirective,
                             outputs: ['filesChoosen', 'filesInFocus']
                         }
                     ], imports: [AttachButton, DefaultBody, NgTemplateOutlet, SalaryPortalBody], host: {
                         class: 'aeb-attach',
-                        '[class.aeb-attach--file-in-focus]': 'isFileInFocus',
+                        '[class.aeb-attach--file-in-focus]': 'isFileInFocus()',
                         '[class.aeb-attach--simple]': 'layoutMod() === "simple"',
                         '(filesChoosen)': 'dropFile($event)',
                         '(filesInFocus)': 'checkFileInFocus($event)'
-                    }, template: "<ng-template #buttonTemplate>\n  <aeb-attach-button\n    [multi]=\"multi()\"\n    [filesAmount]=\"files.length\"\n    [attachButtonText]=\"attachButtonText()\"\n    [attachButtonIcon]=\"attachButtonIcon()\"\n    [showErrorMessage]=\"showErrorMessage()\"\n    [showErrorMessageText]=\"showErrorMessageText\"\n    [requirement]=\"requirement()\"\n    (buttonClick)=\"attachButtonClicked()\"\n    (fileChoosen)=\"chooseFile($event)\"\n    (fileListCleared)=\"clearFileList()\"\n  />\n</ng-template>\n@if (layoutMod() === 'default') {\n<aeb-default-body\n  [title]=\"title()\"\n  [attachmentDescription]=\"attachmentDescription()\"\n  [documentListText]=\"documentListText()\"\n>\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-default-body>\n} @if (layoutMod() === 'salaryPortal') {\n<aeb-salary-portal-body [title]=\"title()\">\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-salary-portal-body>\n} @if (layoutMod() === 'simple') {\n<ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n}\n", styles: [".aeb-attach{box-sizing:border-box;padding:calc(24px - var(--border-skinny));border:var(--border-skinny) dashed var(--color-mono-300);color:var(--color-mono-900);border-radius:var(--border-medium-rounded);display:flex;flex-direction:column}.aeb-attach--file-in-focus{border:var(--border-skinny) dashed var(--color-blue-500)}.aeb-attach--simple{box-sizing:border-box;width:100%;padding:0;color:var(--color-mono-900);border:var(--no-border)}\n"] }]
+                    }, template: "<ng-template #buttonTemplate>\n  <aeb-attach-button\n    [multi]=\"multi()\"\n    [filesAmount]=\"files().length\"\n    [attachButtonText]=\"attachButtonText()\"\n    [attachButtonIcon]=\"attachButtonIcon()\"\n    [showErrorMessage]=\"showErrorMessage()\"\n    [showErrorMessageText]=\"showErrorMessageText()\"\n    [requirement]=\"requirement()\"\n    (buttonClick)=\"attachButtonClicked()\"\n    (fileChoosen)=\"chooseFile($event)\"\n    (fileListCleared)=\"clearFileList()\"\n  />\n</ng-template>\n@if (layoutMod() === 'default') {\n<aeb-default-body\n  [title]=\"title()\"\n  [attachmentDescription]=\"attachmentDescription()\"\n  [documentListText]=\"documentListText()\"\n>\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-default-body>\n} @if (layoutMod() === 'salaryPortal') {\n<aeb-salary-portal-body [title]=\"title()\">\n  <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-salary-portal-body>\n} @if (layoutMod() === 'simple') {\n<ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n}\n", styles: [".aeb-attach{box-sizing:border-box;padding:calc(24px - var(--border-skinny));border:var(--border-skinny) dashed var(--color-mono-300);color:var(--color-mono-900);border-radius:var(--border-medium-rounded);display:flex;flex-direction:column}.aeb-attach--file-in-focus{border:var(--border-skinny) dashed var(--color-blue-500)}.aeb-attach--simple{box-sizing:border-box;width:100%;padding:0;color:var(--color-mono-900);border:var(--no-border)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { documentListText: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentListText", required: false }] }], showErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorMessage", required: false }] }], attachButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachButtonText", required: false }] }], attachButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachButtonIcon", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], layoutMod: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutMod", required: false }] }], attachmentDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentDescription", required: false }] }], requirement: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirement", required: false }] }], changeListEvent: [{ type: i0.Output, args: ["changeListEvent"] }], requirementViolatedError: [{ type: i0.Output, args: ["requirementViolatedError"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
 class FileAttachModule {
@@ -3097,11 +3108,11 @@ class FilterTag {
         this.tagHandler.emit(tag);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: FilterTag, isStandalone: true, selector: "aeb-filter-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagHandler: "tagHandler" }, ngImport: i0, template: "<div\n  class=\"aeb-filter-tag\"\n  [ngClass]=\"{\n    'aeb-filter-tag--active': active()\n  }\"\n  (click)=\"clickHandler(value() || '')\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: FilterTag, isStandalone: true, selector: "aeb-filter-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagHandler: "tagHandler" }, ngImport: i0, template: "<div\n  class=\"aeb-filter-tag\"\n  [ngClass]=\"{\n    'aeb-filter-tag--active': active()\n  }\"\n  (click)=\"clickHandler(value() || '')\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTag, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-filter-tag', encapsulation: ViewEncapsulation.None, imports: [NgClass], template: "<div\n  class=\"aeb-filter-tag\"\n  [ngClass]=\"{\n    'aeb-filter-tag--active': active()\n  }\"\n  (click)=\"clickHandler(value() || '')\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"] }]
+            args: [{ selector: 'aeb-filter-tag', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\n  class=\"aeb-filter-tag\"\n  [ngClass]=\"{\n    'aeb-filter-tag--active': active()\n  }\"\n  (click)=\"clickHandler(value() || '')\"\n>\n  <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], tagHandler: [{ type: i0.Output, args: ["tagHandler"] }] } });
 class FilterTags {
@@ -3127,11 +3138,11 @@ class FilterTags {
         this.tagChange.emit(this._filterValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTags, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FilterTags, isStandalone: true, selector: "aeb-filter-tags", inputs: { initialFilterValue: { classPropertyName: "initialFilterValue", publicName: "initialFilterValue", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagChange: "tagChange" }, ngImport: i0, template: "<div class=\"aeb-filter-tags\">\n  @for (tag of tags(); track tag) {\n  <aeb-filter-tag\n    [value]=\"tag.value\"\n    [active]=\"filterValue.includes(tag.value)\"\n    (tagHandler)=\"tagHandler($event)\"\n  >\n    {{ tag.label }}\n  </aeb-filter-tag>\n  }\n</div>\n", styles: [".aeb-filter-tags{display:flex;flex-wrap:wrap;gap:20px}\n"], dependencies: [{ kind: "component", type: FilterTag, selector: "aeb-filter-tag", inputs: ["value", "active"], outputs: ["tagHandler"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FilterTags, isStandalone: true, selector: "aeb-filter-tags", inputs: { initialFilterValue: { classPropertyName: "initialFilterValue", publicName: "initialFilterValue", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagChange: "tagChange" }, ngImport: i0, template: "<div class=\"aeb-filter-tags\">\n  @for (tag of tags(); track tag) {\n  <aeb-filter-tag\n    [value]=\"tag.value\"\n    [active]=\"filterValue.includes(tag.value)\"\n    (tagHandler)=\"tagHandler($event)\"\n  >\n    {{ tag.label }}\n  </aeb-filter-tag>\n  }\n</div>\n", styles: [".aeb-filter-tags{display:flex;flex-wrap:wrap;gap:20px}\n"], dependencies: [{ kind: "component", type: FilterTag, selector: "aeb-filter-tag", inputs: ["value", "active"], outputs: ["tagHandler"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTags, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-filter-tags', encapsulation: ViewEncapsulation.None, imports: [FilterTag], template: "<div class=\"aeb-filter-tags\">\n  @for (tag of tags(); track tag) {\n  <aeb-filter-tag\n    [value]=\"tag.value\"\n    [active]=\"filterValue.includes(tag.value)\"\n    (tagHandler)=\"tagHandler($event)\"\n  >\n    {{ tag.label }}\n  </aeb-filter-tag>\n  }\n</div>\n", styles: [".aeb-filter-tags{display:flex;flex-wrap:wrap;gap:20px}\n"] }]
+            args: [{ selector: 'aeb-filter-tags', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterTag], template: "<div class=\"aeb-filter-tags\">\n  @for (tag of tags(); track tag) {\n  <aeb-filter-tag\n    [value]=\"tag.value\"\n    [active]=\"filterValue.includes(tag.value)\"\n    (tagHandler)=\"tagHandler($event)\"\n  >\n    {{ tag.label }}\n  </aeb-filter-tag>\n  }\n</div>\n", styles: [".aeb-filter-tags{display:flex;flex-wrap:wrap;gap:20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { initialFilterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilterValue", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], tagChange: [{ type: i0.Output, args: ["tagChange"] }] } });
 class FilterTagsModule {
@@ -3149,16 +3160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class BaseContentProjectableFooter {
     constructor() {
-        this.cdr = inject(ChangeDetectorRef);
         this.content = viewChild('content', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
-        this.hasContent = true;
+        this.hasContent = signal(true, ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
     }
     ngAfterViewInit() {
         const content = this.content();
         if (content) {
             const contentParentElement = content.nativeElement;
-            this.hasContent = !!contentParentElement.innerHTML;
-            this.cdr.detectChanges();
+            this.hasContent.set(!!contentParentElement.innerHTML);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseContentProjectableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3220,11 +3229,11 @@ class FooterBottom extends BaseContentProjectableFooter {
         this.year = input(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FooterBottom, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FooterBottom, isStandalone: true, selector: "aeb-footer-bottom", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-bottom\">\n  <div class=\"aeb-footer-bottom--copyrights-row\">\n    <p>\n      \u00A9 {{ year() }} \u0410\u041A\u0411 \u00AB\u0410\u043B\u043C\u0430\u0437\u044D\u0440\u0433\u0438\u044D\u043D\u0431\u0430\u043D\u043A\u00BB \u0410\u041E. \u0413\u0435\u043D\u0435\u0440\u0430\u043B\u044C\u043D\u0430\u044F \u043B\u0438\u0446\u0435\u043D\u0437\u0438\u044F \u0426\u0411 \u0420\u0424 \u21162602\n      \u043E\u0442 08.06.2015\n    </p>\n    <div class=\"aeb-footer-bottom__soc-networks\">\n      <a\n        href=\"https://t.me/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16969 33 1 25.8303 1 17C1 8.16968 8.16969 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M21.7075 24.8233C21.9651 25.0057 22.2971 25.0513 22.5931 24.9393C22.8891 24.8265 23.1067 24.5737 23.1723 24.2673C23.8675 21.0001 25.5539 12.7305 26.1867 9.75852C26.2347 9.53452 26.1547 9.30172 25.9787 9.15212C25.8027 9.00252 25.5587 8.95932 25.3411 9.04012C21.9867 10.2817 11.6563 14.1577 7.43392 15.7201C7.16592 15.8193 6.99152 16.0769 7.00032 16.3593C7.00992 16.6425 7.20032 16.8881 7.47472 16.9705C9.36832 17.5369 11.8539 18.3249 11.8539 18.3249C11.8539 18.3249 13.0155 21.8329 13.6211 23.6169C13.6971 23.8409 13.8723 24.0169 14.1035 24.0777C14.3339 24.1377 14.5803 24.0745 14.7523 23.9121C15.7251 22.9937 17.2291 21.5737 17.2291 21.5737C17.2291 21.5737 20.0867 23.6689 21.7075 24.8233ZM12.8995 17.8817L14.2427 22.3121L14.5411 19.5065C14.5411 19.5065 19.7307 14.8257 22.6891 12.1577C22.7755 12.0793 22.7875 11.9481 22.7155 11.8561C22.6443 11.7641 22.5131 11.7425 22.4147 11.8049C18.9859 13.9945 12.8995 17.8817 12.8995 17.8817Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </a>\n      <a\n        href=\"https://vk.com/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6877 23.4812C18.3614 23.4812 18.3614 22.5127 18.3614 22.1363C18.3614 21.4635 19.0326 20.7923 19.7062 20.7923C20.3799 20.7923 21.5328 21.9443 22.3968 22.8083C23.0705 23.482 23.0705 23.482 23.7425 23.482H25.761C25.761 23.482 27.1067 23.429 27.1067 22.1355C27.1067 21.7161 26.6452 21.0037 25.0881 19.4466C23.7425 18.1026 23.0519 18.7965 25.0881 16.0849C26.3277 14.4344 27.2305 12.938 27.0763 12.506C26.9273 12.0934 23.4789 11.4382 23.0705 12.0513C21.7248 14.0673 21.4772 14.5624 21.0519 15.4121C20.3799 16.7569 20.3126 17.4298 19.7062 17.4298C19.0949 17.4298 19.0326 16.1245 19.0326 15.4121C19.0326 13.1906 19.3559 11.6184 18.3606 11.3784H16.342C15.2591 11.3784 14.3243 12.0521 14.3243 12.0521C14.3243 12.0521 13.489 12.7022 13.6507 12.7233C13.8519 12.7511 14.9963 12.4454 14.9963 13.3961V14.7409C14.9963 14.7409 15.0031 17.4298 14.3243 17.4298C13.6507 17.4298 12.3058 14.7409 10.9601 12.7224C10.4321 11.9317 10.2865 12.0513 9.6153 12.0513C8.89446 12.0513 8.26961 12.0791 7.59593 12.0791C6.92393 12.0791 6.83719 12.5068 6.92393 12.7233C8.26961 16.0849 9.23551 18.1961 11.7913 20.8563C14.1374 23.2959 15.7029 23.4247 17.0157 23.4803C17.3517 23.4946 17.0157 23.4803 17.6877 23.4803V23.4812Z\"\n            fill=\"white\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16968 33 1 25.8303 1 17C1 8.16968 8.16968 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      </a>\n    </div>\n  </div>\n  @for (link of links(); track link) {\n  <span class=\"aeb-footer-bottom__link__inline-container\">\n    <div class=\"aeb-footer-bottom__link__block-container\">\n      <a class=\"aeb-footer-bottom__link\" [href]=\"link.link\">\n        {{ link.name }}\n      </a>\n    </div>\n  </span>\n  }\n</div>\n}\n", styles: [".aeb-footer-bottom{--soc-icons-hover-filter: brightness(0) saturate(100%) invert(89%) sepia(17%) saturate(608%) hue-rotate(177deg) brightness(95%) contrast(93%);position:relative;box-sizing:border-box;width:100%;padding-bottom:28px;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}.aeb-footer-bottom--copyrights-row{display:flex;justify-content:space-between;line-height:20px}@media screen and (max-width:992px){.aeb-footer-bottom--copyrights-row{display:block}}.aeb-footer-bottom p{padding:24px 0 20px;margin:0;font-size:var(--font-size-s);color:#fff3}@media screen and (max-width:992px){.aeb-footer-bottom p{padding:16px 0}}.aeb-footer-bottom__link{font-size:var(--font-size-xxs);color:var(--color-mono-0);text-decoration:none;line-height:14px}.aeb-footer-bottom__link__inline-container{display:block;line-height:0}.aeb-footer-bottom__link__block-container{width:fit-content;margin-bottom:12px}.aeb-footer-bottom__soc-networks{display:flex;align-items:center;justify-content:flex-end}@media screen and (max-width:992px){.aeb-footer-bottom__soc-networks{justify-content:flex-start;padding-bottom:16px}}.aeb-footer-bottom__soc-icon:not(:last-child){margin-right:24px}.aeb-footer-bottom a:hover.aeb-footer-bottom__soc-icon{content:\"\";filter:var(--soc-icons-hover-filter);display:block}@media screen and (max-width:992px){.aeb-footer-bottom{padding-bottom:4px}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FooterBottom, isStandalone: true, selector: "aeb-footer-bottom", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent()) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-bottom\">\n  <div class=\"aeb-footer-bottom--copyrights-row\">\n    <p>\n      \u00A9 {{ year() }} \u0410\u041A\u0411 \u00AB\u0410\u043B\u043C\u0430\u0437\u044D\u0440\u0433\u0438\u044D\u043D\u0431\u0430\u043D\u043A\u00BB \u0410\u041E. \u0413\u0435\u043D\u0435\u0440\u0430\u043B\u044C\u043D\u0430\u044F \u043B\u0438\u0446\u0435\u043D\u0437\u0438\u044F \u0426\u0411 \u0420\u0424 \u21162602\n      \u043E\u0442 08.06.2015\n    </p>\n    <div class=\"aeb-footer-bottom__soc-networks\">\n      <a\n        href=\"https://t.me/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16969 33 1 25.8303 1 17C1 8.16968 8.16969 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M21.7075 24.8233C21.9651 25.0057 22.2971 25.0513 22.5931 24.9393C22.8891 24.8265 23.1067 24.5737 23.1723 24.2673C23.8675 21.0001 25.5539 12.7305 26.1867 9.75852C26.2347 9.53452 26.1547 9.30172 25.9787 9.15212C25.8027 9.00252 25.5587 8.95932 25.3411 9.04012C21.9867 10.2817 11.6563 14.1577 7.43392 15.7201C7.16592 15.8193 6.99152 16.0769 7.00032 16.3593C7.00992 16.6425 7.20032 16.8881 7.47472 16.9705C9.36832 17.5369 11.8539 18.3249 11.8539 18.3249C11.8539 18.3249 13.0155 21.8329 13.6211 23.6169C13.6971 23.8409 13.8723 24.0169 14.1035 24.0777C14.3339 24.1377 14.5803 24.0745 14.7523 23.9121C15.7251 22.9937 17.2291 21.5737 17.2291 21.5737C17.2291 21.5737 20.0867 23.6689 21.7075 24.8233ZM12.8995 17.8817L14.2427 22.3121L14.5411 19.5065C14.5411 19.5065 19.7307 14.8257 22.6891 12.1577C22.7755 12.0793 22.7875 11.9481 22.7155 11.8561C22.6443 11.7641 22.5131 11.7425 22.4147 11.8049C18.9859 13.9945 12.8995 17.8817 12.8995 17.8817Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </a>\n      <a\n        href=\"https://vk.com/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6877 23.4812C18.3614 23.4812 18.3614 22.5127 18.3614 22.1363C18.3614 21.4635 19.0326 20.7923 19.7062 20.7923C20.3799 20.7923 21.5328 21.9443 22.3968 22.8083C23.0705 23.482 23.0705 23.482 23.7425 23.482H25.761C25.761 23.482 27.1067 23.429 27.1067 22.1355C27.1067 21.7161 26.6452 21.0037 25.0881 19.4466C23.7425 18.1026 23.0519 18.7965 25.0881 16.0849C26.3277 14.4344 27.2305 12.938 27.0763 12.506C26.9273 12.0934 23.4789 11.4382 23.0705 12.0513C21.7248 14.0673 21.4772 14.5624 21.0519 15.4121C20.3799 16.7569 20.3126 17.4298 19.7062 17.4298C19.0949 17.4298 19.0326 16.1245 19.0326 15.4121C19.0326 13.1906 19.3559 11.6184 18.3606 11.3784H16.342C15.2591 11.3784 14.3243 12.0521 14.3243 12.0521C14.3243 12.0521 13.489 12.7022 13.6507 12.7233C13.8519 12.7511 14.9963 12.4454 14.9963 13.3961V14.7409C14.9963 14.7409 15.0031 17.4298 14.3243 17.4298C13.6507 17.4298 12.3058 14.7409 10.9601 12.7224C10.4321 11.9317 10.2865 12.0513 9.6153 12.0513C8.89446 12.0513 8.26961 12.0791 7.59593 12.0791C6.92393 12.0791 6.83719 12.5068 6.92393 12.7233C8.26961 16.0849 9.23551 18.1961 11.7913 20.8563C14.1374 23.2959 15.7029 23.4247 17.0157 23.4803C17.3517 23.4946 17.0157 23.4803 17.6877 23.4803V23.4812Z\"\n            fill=\"white\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16968 33 1 25.8303 1 17C1 8.16968 8.16968 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      </a>\n    </div>\n  </div>\n  @for (link of links(); track link) {\n  <span class=\"aeb-footer-bottom__link__inline-container\">\n    <div class=\"aeb-footer-bottom__link__block-container\">\n      <a class=\"aeb-footer-bottom__link\" [href]=\"link.link\">\n        {{ link.name }}\n      </a>\n    </div>\n  </span>\n  }\n</div>\n}\n", styles: [".aeb-footer-bottom{--soc-icons-hover-filter: brightness(0) saturate(100%) invert(89%) sepia(17%) saturate(608%) hue-rotate(177deg) brightness(95%) contrast(93%);position:relative;box-sizing:border-box;width:100%;padding-bottom:28px;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}.aeb-footer-bottom--copyrights-row{display:flex;justify-content:space-between;line-height:20px}@media screen and (max-width:992px){.aeb-footer-bottom--copyrights-row{display:block}}.aeb-footer-bottom p{padding:24px 0 20px;margin:0;font-size:var(--font-size-s);color:#fff3}@media screen and (max-width:992px){.aeb-footer-bottom p{padding:16px 0}}.aeb-footer-bottom__link{font-size:var(--font-size-xxs);color:var(--color-mono-0);text-decoration:none;line-height:14px}.aeb-footer-bottom__link__inline-container{display:block;line-height:0}.aeb-footer-bottom__link__block-container{width:fit-content;margin-bottom:12px}.aeb-footer-bottom__soc-networks{display:flex;align-items:center;justify-content:flex-end}@media screen and (max-width:992px){.aeb-footer-bottom__soc-networks{justify-content:flex-start;padding-bottom:16px}}.aeb-footer-bottom__soc-icon:not(:last-child){margin-right:24px}.aeb-footer-bottom a:hover.aeb-footer-bottom__soc-icon{content:\"\";filter:var(--soc-icons-hover-filter);display:block}@media screen and (max-width:992px){.aeb-footer-bottom{padding-bottom:4px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FooterBottom, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-footer-bottom', encapsulation: ViewEncapsulation.None, template: "@if (hasContent) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-bottom\">\n  <div class=\"aeb-footer-bottom--copyrights-row\">\n    <p>\n      \u00A9 {{ year() }} \u0410\u041A\u0411 \u00AB\u0410\u043B\u043C\u0430\u0437\u044D\u0440\u0433\u0438\u044D\u043D\u0431\u0430\u043D\u043A\u00BB \u0410\u041E. \u0413\u0435\u043D\u0435\u0440\u0430\u043B\u044C\u043D\u0430\u044F \u043B\u0438\u0446\u0435\u043D\u0437\u0438\u044F \u0426\u0411 \u0420\u0424 \u21162602\n      \u043E\u0442 08.06.2015\n    </p>\n    <div class=\"aeb-footer-bottom__soc-networks\">\n      <a\n        href=\"https://t.me/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16969 33 1 25.8303 1 17C1 8.16968 8.16969 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M21.7075 24.8233C21.9651 25.0057 22.2971 25.0513 22.5931 24.9393C22.8891 24.8265 23.1067 24.5737 23.1723 24.2673C23.8675 21.0001 25.5539 12.7305 26.1867 9.75852C26.2347 9.53452 26.1547 9.30172 25.9787 9.15212C25.8027 9.00252 25.5587 8.95932 25.3411 9.04012C21.9867 10.2817 11.6563 14.1577 7.43392 15.7201C7.16592 15.8193 6.99152 16.0769 7.00032 16.3593C7.00992 16.6425 7.20032 16.8881 7.47472 16.9705C9.36832 17.5369 11.8539 18.3249 11.8539 18.3249C11.8539 18.3249 13.0155 21.8329 13.6211 23.6169C13.6971 23.8409 13.8723 24.0169 14.1035 24.0777C14.3339 24.1377 14.5803 24.0745 14.7523 23.9121C15.7251 22.9937 17.2291 21.5737 17.2291 21.5737C17.2291 21.5737 20.0867 23.6689 21.7075 24.8233ZM12.8995 17.8817L14.2427 22.3121L14.5411 19.5065C14.5411 19.5065 19.7307 14.8257 22.6891 12.1577C22.7755 12.0793 22.7875 11.9481 22.7155 11.8561C22.6443 11.7641 22.5131 11.7425 22.4147 11.8049C18.9859 13.9945 12.8995 17.8817 12.8995 17.8817Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </a>\n      <a\n        href=\"https://vk.com/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6877 23.4812C18.3614 23.4812 18.3614 22.5127 18.3614 22.1363C18.3614 21.4635 19.0326 20.7923 19.7062 20.7923C20.3799 20.7923 21.5328 21.9443 22.3968 22.8083C23.0705 23.482 23.0705 23.482 23.7425 23.482H25.761C25.761 23.482 27.1067 23.429 27.1067 22.1355C27.1067 21.7161 26.6452 21.0037 25.0881 19.4466C23.7425 18.1026 23.0519 18.7965 25.0881 16.0849C26.3277 14.4344 27.2305 12.938 27.0763 12.506C26.9273 12.0934 23.4789 11.4382 23.0705 12.0513C21.7248 14.0673 21.4772 14.5624 21.0519 15.4121C20.3799 16.7569 20.3126 17.4298 19.7062 17.4298C19.0949 17.4298 19.0326 16.1245 19.0326 15.4121C19.0326 13.1906 19.3559 11.6184 18.3606 11.3784H16.342C15.2591 11.3784 14.3243 12.0521 14.3243 12.0521C14.3243 12.0521 13.489 12.7022 13.6507 12.7233C13.8519 12.7511 14.9963 12.4454 14.9963 13.3961V14.7409C14.9963 14.7409 15.0031 17.4298 14.3243 17.4298C13.6507 17.4298 12.3058 14.7409 10.9601 12.7224C10.4321 11.9317 10.2865 12.0513 9.6153 12.0513C8.89446 12.0513 8.26961 12.0791 7.59593 12.0791C6.92393 12.0791 6.83719 12.5068 6.92393 12.7233C8.26961 16.0849 9.23551 18.1961 11.7913 20.8563C14.1374 23.2959 15.7029 23.4247 17.0157 23.4803C17.3517 23.4946 17.0157 23.4803 17.6877 23.4803V23.4812Z\"\n            fill=\"white\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16968 33 1 25.8303 1 17C1 8.16968 8.16968 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      </a>\n    </div>\n  </div>\n  @for (link of links(); track link) {\n  <span class=\"aeb-footer-bottom__link__inline-container\">\n    <div class=\"aeb-footer-bottom__link__block-container\">\n      <a class=\"aeb-footer-bottom__link\" [href]=\"link.link\">\n        {{ link.name }}\n      </a>\n    </div>\n  </span>\n  }\n</div>\n}\n", styles: [".aeb-footer-bottom{--soc-icons-hover-filter: brightness(0) saturate(100%) invert(89%) sepia(17%) saturate(608%) hue-rotate(177deg) brightness(95%) contrast(93%);position:relative;box-sizing:border-box;width:100%;padding-bottom:28px;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}.aeb-footer-bottom--copyrights-row{display:flex;justify-content:space-between;line-height:20px}@media screen and (max-width:992px){.aeb-footer-bottom--copyrights-row{display:block}}.aeb-footer-bottom p{padding:24px 0 20px;margin:0;font-size:var(--font-size-s);color:#fff3}@media screen and (max-width:992px){.aeb-footer-bottom p{padding:16px 0}}.aeb-footer-bottom__link{font-size:var(--font-size-xxs);color:var(--color-mono-0);text-decoration:none;line-height:14px}.aeb-footer-bottom__link__inline-container{display:block;line-height:0}.aeb-footer-bottom__link__block-container{width:fit-content;margin-bottom:12px}.aeb-footer-bottom__soc-networks{display:flex;align-items:center;justify-content:flex-end}@media screen and (max-width:992px){.aeb-footer-bottom__soc-networks{justify-content:flex-start;padding-bottom:16px}}.aeb-footer-bottom__soc-icon:not(:last-child){margin-right:24px}.aeb-footer-bottom a:hover.aeb-footer-bottom__soc-icon{content:\"\";filter:var(--soc-icons-hover-filter);display:block}@media screen and (max-width:992px){.aeb-footer-bottom{padding-bottom:4px}}\n"] }]
+            args: [{ selector: 'aeb-footer-bottom', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasContent()) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-bottom\">\n  <div class=\"aeb-footer-bottom--copyrights-row\">\n    <p>\n      \u00A9 {{ year() }} \u0410\u041A\u0411 \u00AB\u0410\u043B\u043C\u0430\u0437\u044D\u0440\u0433\u0438\u044D\u043D\u0431\u0430\u043D\u043A\u00BB \u0410\u041E. \u0413\u0435\u043D\u0435\u0440\u0430\u043B\u044C\u043D\u0430\u044F \u043B\u0438\u0446\u0435\u043D\u0437\u0438\u044F \u0426\u0411 \u0420\u0424 \u21162602\n      \u043E\u0442 08.06.2015\n    </p>\n    <div class=\"aeb-footer-bottom__soc-networks\">\n      <a\n        href=\"https://t.me/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16969 33 1 25.8303 1 17C1 8.16968 8.16969 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M21.7075 24.8233C21.9651 25.0057 22.2971 25.0513 22.5931 24.9393C22.8891 24.8265 23.1067 24.5737 23.1723 24.2673C23.8675 21.0001 25.5539 12.7305 26.1867 9.75852C26.2347 9.53452 26.1547 9.30172 25.9787 9.15212C25.8027 9.00252 25.5587 8.95932 25.3411 9.04012C21.9867 10.2817 11.6563 14.1577 7.43392 15.7201C7.16592 15.8193 6.99152 16.0769 7.00032 16.3593C7.00992 16.6425 7.20032 16.8881 7.47472 16.9705C9.36832 17.5369 11.8539 18.3249 11.8539 18.3249C11.8539 18.3249 13.0155 21.8329 13.6211 23.6169C13.6971 23.8409 13.8723 24.0169 14.1035 24.0777C14.3339 24.1377 14.5803 24.0745 14.7523 23.9121C15.7251 22.9937 17.2291 21.5737 17.2291 21.5737C17.2291 21.5737 20.0867 23.6689 21.7075 24.8233ZM12.8995 17.8817L14.2427 22.3121L14.5411 19.5065C14.5411 19.5065 19.7307 14.8257 22.6891 12.1577C22.7755 12.0793 22.7875 11.9481 22.7155 11.8561C22.6443 11.7641 22.5131 11.7425 22.4147 11.8049C18.9859 13.9945 12.8995 17.8817 12.8995 17.8817Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </a>\n      <a\n        href=\"https://vk.com/albankykt\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow external\"\n        class=\"aeb-footer-bottom__soc-icon\"\n      >\n        <svg\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6877 23.4812C18.3614 23.4812 18.3614 22.5127 18.3614 22.1363C18.3614 21.4635 19.0326 20.7923 19.7062 20.7923C20.3799 20.7923 21.5328 21.9443 22.3968 22.8083C23.0705 23.482 23.0705 23.482 23.7425 23.482H25.761C25.761 23.482 27.1067 23.429 27.1067 22.1355C27.1067 21.7161 26.6452 21.0037 25.0881 19.4466C23.7425 18.1026 23.0519 18.7965 25.0881 16.0849C26.3277 14.4344 27.2305 12.938 27.0763 12.506C26.9273 12.0934 23.4789 11.4382 23.0705 12.0513C21.7248 14.0673 21.4772 14.5624 21.0519 15.4121C20.3799 16.7569 20.3126 17.4298 19.7062 17.4298C19.0949 17.4298 19.0326 16.1245 19.0326 15.4121C19.0326 13.1906 19.3559 11.6184 18.3606 11.3784H16.342C15.2591 11.3784 14.3243 12.0521 14.3243 12.0521C14.3243 12.0521 13.489 12.7022 13.6507 12.7233C13.8519 12.7511 14.9963 12.4454 14.9963 13.3961V14.7409C14.9963 14.7409 15.0031 17.4298 14.3243 17.4298C13.6507 17.4298 12.3058 14.7409 10.9601 12.7224C10.4321 11.9317 10.2865 12.0513 9.6153 12.0513C8.89446 12.0513 8.26961 12.0791 7.59593 12.0791C6.92393 12.0791 6.83719 12.5068 6.92393 12.7233C8.26961 16.0849 9.23551 18.1961 11.7913 20.8563C14.1374 23.2959 15.7029 23.4247 17.0157 23.4803C17.3517 23.4946 17.0157 23.4803 17.6877 23.4803V23.4812Z\"\n            fill=\"white\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17 1C25.8303 1 33 8.16968 33 17C33 25.8303 25.8303 33 17 33C8.16968 33 1 25.8303 1 17C1 8.16968 8.16968 1 17 1Z\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      </a>\n    </div>\n  </div>\n  @for (link of links(); track link) {\n  <span class=\"aeb-footer-bottom__link__inline-container\">\n    <div class=\"aeb-footer-bottom__link__block-container\">\n      <a class=\"aeb-footer-bottom__link\" [href]=\"link.link\">\n        {{ link.name }}\n      </a>\n    </div>\n  </span>\n  }\n</div>\n}\n", styles: [".aeb-footer-bottom{--soc-icons-hover-filter: brightness(0) saturate(100%) invert(89%) sepia(17%) saturate(608%) hue-rotate(177deg) brightness(95%) contrast(93%);position:relative;box-sizing:border-box;width:100%;padding-bottom:28px;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}.aeb-footer-bottom--copyrights-row{display:flex;justify-content:space-between;line-height:20px}@media screen and (max-width:992px){.aeb-footer-bottom--copyrights-row{display:block}}.aeb-footer-bottom p{padding:24px 0 20px;margin:0;font-size:var(--font-size-s);color:#fff3}@media screen and (max-width:992px){.aeb-footer-bottom p{padding:16px 0}}.aeb-footer-bottom__link{font-size:var(--font-size-xxs);color:var(--color-mono-0);text-decoration:none;line-height:14px}.aeb-footer-bottom__link__inline-container{display:block;line-height:0}.aeb-footer-bottom__link__block-container{width:fit-content;margin-bottom:12px}.aeb-footer-bottom__soc-networks{display:flex;align-items:center;justify-content:flex-end}@media screen and (max-width:992px){.aeb-footer-bottom__soc-networks{justify-content:flex-start;padding-bottom:16px}}.aeb-footer-bottom__soc-icon:not(:last-child){margin-right:24px}.aeb-footer-bottom a:hover.aeb-footer-bottom__soc-icon{content:\"\";filter:var(--soc-icons-hover-filter);display:block}@media screen and (max-width:992px){.aeb-footer-bottom{padding-bottom:4px}}\n"] }]
         }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }] } });
 class FooterMenu extends BaseContentProjectableFooter {
@@ -3233,11 +3242,11 @@ class FooterMenu extends BaseContentProjectableFooter {
         this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FooterMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FooterMenu, isStandalone: true, selector: "aeb-footer-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-menu\">\n  <ul class=\"aeb-footer-menu__wrapper\">\n    @for (item of items(); track item) {\n    <li class=\"aeb-footer-menu__item\">\n      <a [href]=\"item.link\"> {{ item.name }} </a>\n    </li>\n    }\n    <div class=\"aeb-footer-menu__item--feedback\" style=\"cursor: pointer\">\n      <a href=\"https://www.albank.ru/ru/feedback\">\u0421\u0432\u044F\u0437\u044C \u0441 \u0411\u0430\u043D\u043A\u043E\u043C</a>\n    </div>\n  </ul>\n</div>\n}\n", styles: [".aeb-footer-menu{position:relative;box-sizing:border-box;display:flex;width:100%;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-menu{flex-direction:column;align-items:flex-start}}.aeb-footer-menu a{color:var(--color-mono-0);text-decoration:none}.aeb-footer-menu__wrapper{box-sizing:border-box;display:flex;flex:0 0 100%;padding-left:0;margin:0;font-size:var(--font-size-m);line-height:26px}@media screen and (max-width:992px){.aeb-footer-menu__wrapper{display:flex;flex-direction:column;align-items:flex-start;width:271px}}.aeb-footer-menu__item{font-size:var(--font-size-m);color:var(--color-mono-0);text-decoration:none;list-style:none}.aeb-footer-menu__item:not(:last-child){margin-right:36px}.aeb-footer-menu__item--feedback{box-sizing:border-box;margin-left:auto}@media screen and (max-width:992px){.aeb-footer-menu__item--feedback{margin-left:0}}@media screen and (max-width:992px){.aeb-footer-menu__item{margin-right:0}.aeb-footer-menu__item:not(:last-child){margin-bottom:24px}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FooterMenu, isStandalone: true, selector: "aeb-footer-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent()) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-menu\">\n  <ul class=\"aeb-footer-menu__wrapper\">\n    @for (item of items(); track item) {\n    <li class=\"aeb-footer-menu__item\">\n      <a [href]=\"item.link\"> {{ item.name }} </a>\n    </li>\n    }\n    <div class=\"aeb-footer-menu__item--feedback\" style=\"cursor: pointer\">\n      <a href=\"https://www.albank.ru/ru/feedback\">\u0421\u0432\u044F\u0437\u044C \u0441 \u0411\u0430\u043D\u043A\u043E\u043C</a>\n    </div>\n  </ul>\n</div>\n}\n", styles: [".aeb-footer-menu{position:relative;box-sizing:border-box;display:flex;width:100%;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-menu{flex-direction:column;align-items:flex-start}}.aeb-footer-menu a{color:var(--color-mono-0);text-decoration:none}.aeb-footer-menu__wrapper{box-sizing:border-box;display:flex;flex:0 0 100%;padding-left:0;margin:0;font-size:var(--font-size-m);line-height:26px}@media screen and (max-width:992px){.aeb-footer-menu__wrapper{display:flex;flex-direction:column;align-items:flex-start;width:271px}}.aeb-footer-menu__item{font-size:var(--font-size-m);color:var(--color-mono-0);text-decoration:none;list-style:none}.aeb-footer-menu__item:not(:last-child){margin-right:36px}.aeb-footer-menu__item--feedback{box-sizing:border-box;margin-left:auto}@media screen and (max-width:992px){.aeb-footer-menu__item--feedback{margin-left:0}}@media screen and (max-width:992px){.aeb-footer-menu__item{margin-right:0}.aeb-footer-menu__item:not(:last-child){margin-bottom:24px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FooterMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-footer-menu', encapsulation: ViewEncapsulation.None, template: "@if (hasContent) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-menu\">\n  <ul class=\"aeb-footer-menu__wrapper\">\n    @for (item of items(); track item) {\n    <li class=\"aeb-footer-menu__item\">\n      <a [href]=\"item.link\"> {{ item.name }} </a>\n    </li>\n    }\n    <div class=\"aeb-footer-menu__item--feedback\" style=\"cursor: pointer\">\n      <a href=\"https://www.albank.ru/ru/feedback\">\u0421\u0432\u044F\u0437\u044C \u0441 \u0411\u0430\u043D\u043A\u043E\u043C</a>\n    </div>\n  </ul>\n</div>\n}\n", styles: [".aeb-footer-menu{position:relative;box-sizing:border-box;display:flex;width:100%;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-menu{flex-direction:column;align-items:flex-start}}.aeb-footer-menu a{color:var(--color-mono-0);text-decoration:none}.aeb-footer-menu__wrapper{box-sizing:border-box;display:flex;flex:0 0 100%;padding-left:0;margin:0;font-size:var(--font-size-m);line-height:26px}@media screen and (max-width:992px){.aeb-footer-menu__wrapper{display:flex;flex-direction:column;align-items:flex-start;width:271px}}.aeb-footer-menu__item{font-size:var(--font-size-m);color:var(--color-mono-0);text-decoration:none;list-style:none}.aeb-footer-menu__item:not(:last-child){margin-right:36px}.aeb-footer-menu__item--feedback{box-sizing:border-box;margin-left:auto}@media screen and (max-width:992px){.aeb-footer-menu__item--feedback{margin-left:0}}@media screen and (max-width:992px){.aeb-footer-menu__item{margin-right:0}.aeb-footer-menu__item:not(:last-child){margin-bottom:24px}}\n"] }]
+            args: [{ selector: 'aeb-footer-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasContent()) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-menu\">\n  <ul class=\"aeb-footer-menu__wrapper\">\n    @for (item of items(); track item) {\n    <li class=\"aeb-footer-menu__item\">\n      <a [href]=\"item.link\"> {{ item.name }} </a>\n    </li>\n    }\n    <div class=\"aeb-footer-menu__item--feedback\" style=\"cursor: pointer\">\n      <a href=\"https://www.albank.ru/ru/feedback\">\u0421\u0432\u044F\u0437\u044C \u0441 \u0411\u0430\u043D\u043A\u043E\u043C</a>\n    </div>\n  </ul>\n</div>\n}\n", styles: [".aeb-footer-menu{position:relative;box-sizing:border-box;display:flex;width:100%;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-menu{flex-direction:column;align-items:flex-start}}.aeb-footer-menu a{color:var(--color-mono-0);text-decoration:none}.aeb-footer-menu__wrapper{box-sizing:border-box;display:flex;flex:0 0 100%;padding-left:0;margin:0;font-size:var(--font-size-m);line-height:26px}@media screen and (max-width:992px){.aeb-footer-menu__wrapper{display:flex;flex-direction:column;align-items:flex-start;width:271px}}.aeb-footer-menu__item{font-size:var(--font-size-m);color:var(--color-mono-0);text-decoration:none;list-style:none}.aeb-footer-menu__item:not(:last-child){margin-right:36px}.aeb-footer-menu__item--feedback{box-sizing:border-box;margin-left:auto}@media screen and (max-width:992px){.aeb-footer-menu__item--feedback{margin-left:0}}@media screen and (max-width:992px){.aeb-footer-menu__item{margin-right:0}.aeb-footer-menu__item:not(:last-child){margin-bottom:24px}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
 class FooterTop extends BaseContentProjectableFooter {
@@ -3246,11 +3255,11 @@ class FooterTop extends BaseContentProjectableFooter {
         this.onlyPhone = input(false, ...(ngDevMode ? [{ debugName: "onlyPhone" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FooterTop, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FooterTop, isStandalone: true, selector: "aeb-footer-top", inputs: { onlyPhone: { classPropertyName: "onlyPhone", publicName: "onlyPhone", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-top\">\n  <div class=\"aeb-footer-top__wrapper\">\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0411\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u0430\u044F \u0433\u043E\u0440\u044F\u0447\u0430\u044F \u043B\u0438\u043D\u0438\u044F</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+78001003422\">\n            8 800 100-34-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0422\u0435\u043B\u0435\u0444\u043E\u043D</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+74112342222\">\n            8 (4112) 34-22-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"mailto:bank@albank.ru\">\n            bank&#64;albank.ru\n          </a>\n        </div>\n      </div>\n    </div>\n    @if (!onlyPhone()) {\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u041D\u0430\u0448 \u0430\u0434\u0440\u0435\u0441</div>\n        <div class=\"aeb-footer-top__cell\">\u0433. \u042F\u043A\u0443\u0442\u0441\u043A, \u043F\u0440. \u041B\u0435\u043D\u0438\u043D\u0430, 1</div>\n      </div>\n    </div>\n    }\n  </div>\n  <a class=\"aeb-footer-top__app\" href=\"https://app.albank.ru/\">\n    <div class=\"aeb-footer-top__mobile-icon\">\n      <svg\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 48 48\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"48\" height=\"48\" rx=\"8\" fill=\"#2F88F0\" />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M26.5406 25.319L25.3223 26.5376L26.1321 28.4946L28.4972 26.129L26.5406 25.319ZM24.8708 26.724H23.1436L22.3337 28.681H25.6735L24.8708 26.724ZM26.7342 23.1398V24.8602L28.6835 25.6702V22.3297L26.7342 23.1398ZM22.6849 26.5376L21.4665 25.319L19.5171 26.129L21.8822 28.4946L22.6849 26.5376ZM26.1321 19.5054L25.3223 21.4624L26.5406 22.681L28.4972 21.871L26.1321 19.5054ZM23.1436 21.2688H24.8708L25.6735 19.319H22.3337L23.1436 21.2688ZM21.2802 24.8602V23.1398L19.3308 22.3297V25.6702L21.2802 24.8602ZM21.4665 22.681L22.6849 21.4624L21.8822 19.5054L19.5171 21.871L21.4665 22.681ZM22.7566 18.0358H34.5675C34.976 18.0358 35.3845 18.1935 35.6999 18.509C36.0152 18.8244 36.1729 19.233 36.1729 19.6416C36.1729 20.0502 36.0152 20.466 35.6999 20.7814L38.409 23.491C39.4697 22.4301 40 21.0323 40 19.6416C40 18.2509 39.4697 16.8602 38.409 15.7993C37.3483 14.7384 35.9579 14.2079 34.5675 14.2079H26.5837L22.7566 18.0358ZM27.3362 18.8961L35.6856 27.2545C35.9794 27.5412 36.1586 27.9427 36.1586 28.3871C36.1586 28.8315 35.9794 29.233 35.6856 29.5269C35.3989 29.8136 34.9975 29.9928 34.5532 29.9928V33.828C36.0511 33.828 37.4128 33.2186 38.3946 32.2366C39.3836 31.2473 39.9857 29.8925 39.9857 28.3871C39.9857 26.8889 39.3765 25.5269 38.3946 24.5376L32.7543 18.8961H27.3362ZM29.9664 22.7455V34.5591C29.9664 34.9677 29.8087 35.3835 29.4934 35.6989C29.1781 36.0072 28.7695 36.1649 28.361 36.1649C27.9525 36.1649 27.5368 36.0072 27.2287 35.6989L24.5124 38.4086C25.5803 39.4695 26.9707 40 28.361 40C29.7514 40 31.1418 39.4695 32.2096 38.4086C33.2703 37.3477 33.8007 35.9498 33.8007 34.5591L33.7935 26.5806L29.9664 22.7455ZM29.1064 27.3262L20.757 35.6846C20.4632 35.9713 20.0618 36.1505 19.6175 36.1505C19.1731 36.1505 18.7789 35.9713 18.4851 35.6846C18.1913 35.3907 18.0121 34.9892 18.0121 34.5448H14.1778C14.1778 36.0502 14.787 37.405 15.776 38.3943C16.7579 39.3763 18.1196 39.9857 19.6175 39.9857C21.1225 39.9857 22.477 39.3763 23.4661 38.3943L29.1064 32.7455V27.3262ZM25.2578 29.957H13.4468C13.0383 29.957 12.6226 29.7993 12.3144 29.491C11.9991 29.1756 11.8414 28.767 11.8414 28.3513C11.8414 27.9427 11.9991 27.534 12.3144 27.2186L9.60538 24.509C8.53751 25.5699 8.00717 26.9606 8.00717 28.3513C8.00717 29.7419 8.53751 31.1398 9.60538 32.2007C10.6661 33.2616 12.0564 33.7921 13.4468 33.7921H21.4307L25.2578 29.957ZM20.6567 29.0466L12.3073 20.6953C12.0134 20.4014 11.8343 20 11.8343 19.5556C11.8343 19.1111 12.0134 18.7097 12.3073 18.4229C12.594 18.129 12.9953 17.9498 13.4396 17.9498V14.1219C11.9418 14.1219 10.5801 14.7312 9.59821 15.7133C8.60918 16.6953 8 18.0573 8 19.5556C8 21.0609 8.60918 22.4158 9.59821 23.405L15.2385 29.0466H20.6567ZM18.0479 25.2473V13.4337C18.0479 13.0251 18.2056 12.6165 18.5209 12.3011C18.8291 11.9857 19.2448 11.8351 19.6533 11.828C20.0618 11.828 20.4703 11.9857 20.7857 12.3011L23.5019 9.5914C22.434 8.53047 21.0437 8 19.6533 8C18.2629 8 16.8726 8.53047 15.8047 9.5914C14.744 10.6523 14.2137 12.043 14.2137 13.4409V21.4194L18.0479 25.2473ZM18.908 20.6667L27.2573 12.3154C27.5512 12.0215 27.9525 11.8495 28.3969 11.8495C28.8412 11.8495 29.2354 12.0287 29.5292 12.3154C29.8231 12.6093 30.0022 13.0036 30.0022 13.4552H33.8365C33.8365 11.9498 33.2202 10.5878 32.2383 9.60573C31.2564 8.62366 29.8947 8.01434 28.3969 8.01434C26.8918 8.01434 25.5301 8.62366 24.5483 9.60573L18.908 15.2473V20.6667ZM24.9639 26.3082L26.3113 24.9534V23.0394L24.9639 21.6918H23.0504L21.6959 23.0394V24.9534L23.0504 26.3082H24.9639ZM21.8965 29.0968L18.908 26.1147V21.8853L21.8965 18.8961H26.1178L29.1064 21.8853V26.1147L26.1178 29.0968H21.8965Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-footer-top__row\">\n      <div class=\"aeb-footer-top__head\">\u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0434\u043B\u044F iOS \u0438 Android</div>\n      <div class=\"aeb-footer-top__cell\">\u0410\u042D\u0411 \u041E\u043D\u043B\u0430\u0439\u043D 3.0</div>\n    </div>\n  </a>\n</div>\n}\n", styles: [".aeb-footer-top{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-top{flex-direction:column;align-items:flex-start;padding:16px 0 24px}}.aeb-footer-top__columns{display:flex}.aeb-footer-top__column:not(:last-of-type){margin-right:64px}@media screen and (max-width:992px){.aeb-footer-top__column{width:100%;margin-right:0!important;margin-bottom:24px}}.aeb-footer-top__wrapper{display:flex}@media screen and (max-width:992px){.aeb-footer-top__wrapper{flex-direction:column;align-items:center;width:unset}}.aeb-footer-top__row{display:flex;flex-direction:column;justify-content:center}.aeb-footer-top__head{margin-bottom:6px;font-size:var(--font-size-xs);color:var(--color-mono-300);line-height:16px}.aeb-footer-top__cell{font-size:var(--font-size-m);color:var(--color-mono-0)}.aeb-footer-top a.aeb-footer-top__phone-number{border-bottom:none;color:inherit}.aeb-footer-top a:visited{color:inherit}.aeb-footer-top a:hover.aeb-footer-top__phone-number{border-bottom:none}.aeb-footer-top__app{top:24px;right:0;display:flex;cursor:pointer}.aeb-footer-top__mobile-icon{height:47px;margin-right:24px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FooterTop, isStandalone: true, selector: "aeb-footer-top", inputs: { onlyPhone: { classPropertyName: "onlyPhone", publicName: "onlyPhone", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent()) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-top\">\n  <div class=\"aeb-footer-top__wrapper\">\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0411\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u0430\u044F \u0433\u043E\u0440\u044F\u0447\u0430\u044F \u043B\u0438\u043D\u0438\u044F</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+78001003422\">\n            8 800 100-34-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0422\u0435\u043B\u0435\u0444\u043E\u043D</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+74112342222\">\n            8 (4112) 34-22-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"mailto:bank@albank.ru\">\n            bank&#64;albank.ru\n          </a>\n        </div>\n      </div>\n    </div>\n    @if (!onlyPhone()) {\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u041D\u0430\u0448 \u0430\u0434\u0440\u0435\u0441</div>\n        <div class=\"aeb-footer-top__cell\">\u0433. \u042F\u043A\u0443\u0442\u0441\u043A, \u043F\u0440. \u041B\u0435\u043D\u0438\u043D\u0430, 1</div>\n      </div>\n    </div>\n    }\n  </div>\n  <a class=\"aeb-footer-top__app\" href=\"https://app.albank.ru/\">\n    <div class=\"aeb-footer-top__mobile-icon\">\n      <svg\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 48 48\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"48\" height=\"48\" rx=\"8\" fill=\"#2F88F0\" />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M26.5406 25.319L25.3223 26.5376L26.1321 28.4946L28.4972 26.129L26.5406 25.319ZM24.8708 26.724H23.1436L22.3337 28.681H25.6735L24.8708 26.724ZM26.7342 23.1398V24.8602L28.6835 25.6702V22.3297L26.7342 23.1398ZM22.6849 26.5376L21.4665 25.319L19.5171 26.129L21.8822 28.4946L22.6849 26.5376ZM26.1321 19.5054L25.3223 21.4624L26.5406 22.681L28.4972 21.871L26.1321 19.5054ZM23.1436 21.2688H24.8708L25.6735 19.319H22.3337L23.1436 21.2688ZM21.2802 24.8602V23.1398L19.3308 22.3297V25.6702L21.2802 24.8602ZM21.4665 22.681L22.6849 21.4624L21.8822 19.5054L19.5171 21.871L21.4665 22.681ZM22.7566 18.0358H34.5675C34.976 18.0358 35.3845 18.1935 35.6999 18.509C36.0152 18.8244 36.1729 19.233 36.1729 19.6416C36.1729 20.0502 36.0152 20.466 35.6999 20.7814L38.409 23.491C39.4697 22.4301 40 21.0323 40 19.6416C40 18.2509 39.4697 16.8602 38.409 15.7993C37.3483 14.7384 35.9579 14.2079 34.5675 14.2079H26.5837L22.7566 18.0358ZM27.3362 18.8961L35.6856 27.2545C35.9794 27.5412 36.1586 27.9427 36.1586 28.3871C36.1586 28.8315 35.9794 29.233 35.6856 29.5269C35.3989 29.8136 34.9975 29.9928 34.5532 29.9928V33.828C36.0511 33.828 37.4128 33.2186 38.3946 32.2366C39.3836 31.2473 39.9857 29.8925 39.9857 28.3871C39.9857 26.8889 39.3765 25.5269 38.3946 24.5376L32.7543 18.8961H27.3362ZM29.9664 22.7455V34.5591C29.9664 34.9677 29.8087 35.3835 29.4934 35.6989C29.1781 36.0072 28.7695 36.1649 28.361 36.1649C27.9525 36.1649 27.5368 36.0072 27.2287 35.6989L24.5124 38.4086C25.5803 39.4695 26.9707 40 28.361 40C29.7514 40 31.1418 39.4695 32.2096 38.4086C33.2703 37.3477 33.8007 35.9498 33.8007 34.5591L33.7935 26.5806L29.9664 22.7455ZM29.1064 27.3262L20.757 35.6846C20.4632 35.9713 20.0618 36.1505 19.6175 36.1505C19.1731 36.1505 18.7789 35.9713 18.4851 35.6846C18.1913 35.3907 18.0121 34.9892 18.0121 34.5448H14.1778C14.1778 36.0502 14.787 37.405 15.776 38.3943C16.7579 39.3763 18.1196 39.9857 19.6175 39.9857C21.1225 39.9857 22.477 39.3763 23.4661 38.3943L29.1064 32.7455V27.3262ZM25.2578 29.957H13.4468C13.0383 29.957 12.6226 29.7993 12.3144 29.491C11.9991 29.1756 11.8414 28.767 11.8414 28.3513C11.8414 27.9427 11.9991 27.534 12.3144 27.2186L9.60538 24.509C8.53751 25.5699 8.00717 26.9606 8.00717 28.3513C8.00717 29.7419 8.53751 31.1398 9.60538 32.2007C10.6661 33.2616 12.0564 33.7921 13.4468 33.7921H21.4307L25.2578 29.957ZM20.6567 29.0466L12.3073 20.6953C12.0134 20.4014 11.8343 20 11.8343 19.5556C11.8343 19.1111 12.0134 18.7097 12.3073 18.4229C12.594 18.129 12.9953 17.9498 13.4396 17.9498V14.1219C11.9418 14.1219 10.5801 14.7312 9.59821 15.7133C8.60918 16.6953 8 18.0573 8 19.5556C8 21.0609 8.60918 22.4158 9.59821 23.405L15.2385 29.0466H20.6567ZM18.0479 25.2473V13.4337C18.0479 13.0251 18.2056 12.6165 18.5209 12.3011C18.8291 11.9857 19.2448 11.8351 19.6533 11.828C20.0618 11.828 20.4703 11.9857 20.7857 12.3011L23.5019 9.5914C22.434 8.53047 21.0437 8 19.6533 8C18.2629 8 16.8726 8.53047 15.8047 9.5914C14.744 10.6523 14.2137 12.043 14.2137 13.4409V21.4194L18.0479 25.2473ZM18.908 20.6667L27.2573 12.3154C27.5512 12.0215 27.9525 11.8495 28.3969 11.8495C28.8412 11.8495 29.2354 12.0287 29.5292 12.3154C29.8231 12.6093 30.0022 13.0036 30.0022 13.4552H33.8365C33.8365 11.9498 33.2202 10.5878 32.2383 9.60573C31.2564 8.62366 29.8947 8.01434 28.3969 8.01434C26.8918 8.01434 25.5301 8.62366 24.5483 9.60573L18.908 15.2473V20.6667ZM24.9639 26.3082L26.3113 24.9534V23.0394L24.9639 21.6918H23.0504L21.6959 23.0394V24.9534L23.0504 26.3082H24.9639ZM21.8965 29.0968L18.908 26.1147V21.8853L21.8965 18.8961H26.1178L29.1064 21.8853V26.1147L26.1178 29.0968H21.8965Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-footer-top__row\">\n      <div class=\"aeb-footer-top__head\">\u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0434\u043B\u044F iOS \u0438 Android</div>\n      <div class=\"aeb-footer-top__cell\">\u0410\u042D\u0411 \u041E\u043D\u043B\u0430\u0439\u043D 3.0</div>\n    </div>\n  </a>\n</div>\n}\n", styles: [".aeb-footer-top{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-top{flex-direction:column;align-items:flex-start;padding:16px 0 24px}}.aeb-footer-top__columns{display:flex}.aeb-footer-top__column:not(:last-of-type){margin-right:64px}@media screen and (max-width:992px){.aeb-footer-top__column{width:100%;margin-right:0!important;margin-bottom:24px}}.aeb-footer-top__wrapper{display:flex}@media screen and (max-width:992px){.aeb-footer-top__wrapper{flex-direction:column;align-items:center;width:unset}}.aeb-footer-top__row{display:flex;flex-direction:column;justify-content:center}.aeb-footer-top__head{margin-bottom:6px;font-size:var(--font-size-xs);color:var(--color-mono-300);line-height:16px}.aeb-footer-top__cell{font-size:var(--font-size-m);color:var(--color-mono-0)}.aeb-footer-top a.aeb-footer-top__phone-number{border-bottom:none;color:inherit}.aeb-footer-top a:visited{color:inherit}.aeb-footer-top a:hover.aeb-footer-top__phone-number{border-bottom:none}.aeb-footer-top__app{top:24px;right:0;display:flex;cursor:pointer}.aeb-footer-top__mobile-icon{height:47px;margin-right:24px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FooterTop, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-footer-top', encapsulation: ViewEncapsulation.None, template: "@if (hasContent) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-top\">\n  <div class=\"aeb-footer-top__wrapper\">\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0411\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u0430\u044F \u0433\u043E\u0440\u044F\u0447\u0430\u044F \u043B\u0438\u043D\u0438\u044F</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+78001003422\">\n            8 800 100-34-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0422\u0435\u043B\u0435\u0444\u043E\u043D</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+74112342222\">\n            8 (4112) 34-22-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"mailto:bank@albank.ru\">\n            bank&#64;albank.ru\n          </a>\n        </div>\n      </div>\n    </div>\n    @if (!onlyPhone()) {\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u041D\u0430\u0448 \u0430\u0434\u0440\u0435\u0441</div>\n        <div class=\"aeb-footer-top__cell\">\u0433. \u042F\u043A\u0443\u0442\u0441\u043A, \u043F\u0440. \u041B\u0435\u043D\u0438\u043D\u0430, 1</div>\n      </div>\n    </div>\n    }\n  </div>\n  <a class=\"aeb-footer-top__app\" href=\"https://app.albank.ru/\">\n    <div class=\"aeb-footer-top__mobile-icon\">\n      <svg\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 48 48\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"48\" height=\"48\" rx=\"8\" fill=\"#2F88F0\" />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M26.5406 25.319L25.3223 26.5376L26.1321 28.4946L28.4972 26.129L26.5406 25.319ZM24.8708 26.724H23.1436L22.3337 28.681H25.6735L24.8708 26.724ZM26.7342 23.1398V24.8602L28.6835 25.6702V22.3297L26.7342 23.1398ZM22.6849 26.5376L21.4665 25.319L19.5171 26.129L21.8822 28.4946L22.6849 26.5376ZM26.1321 19.5054L25.3223 21.4624L26.5406 22.681L28.4972 21.871L26.1321 19.5054ZM23.1436 21.2688H24.8708L25.6735 19.319H22.3337L23.1436 21.2688ZM21.2802 24.8602V23.1398L19.3308 22.3297V25.6702L21.2802 24.8602ZM21.4665 22.681L22.6849 21.4624L21.8822 19.5054L19.5171 21.871L21.4665 22.681ZM22.7566 18.0358H34.5675C34.976 18.0358 35.3845 18.1935 35.6999 18.509C36.0152 18.8244 36.1729 19.233 36.1729 19.6416C36.1729 20.0502 36.0152 20.466 35.6999 20.7814L38.409 23.491C39.4697 22.4301 40 21.0323 40 19.6416C40 18.2509 39.4697 16.8602 38.409 15.7993C37.3483 14.7384 35.9579 14.2079 34.5675 14.2079H26.5837L22.7566 18.0358ZM27.3362 18.8961L35.6856 27.2545C35.9794 27.5412 36.1586 27.9427 36.1586 28.3871C36.1586 28.8315 35.9794 29.233 35.6856 29.5269C35.3989 29.8136 34.9975 29.9928 34.5532 29.9928V33.828C36.0511 33.828 37.4128 33.2186 38.3946 32.2366C39.3836 31.2473 39.9857 29.8925 39.9857 28.3871C39.9857 26.8889 39.3765 25.5269 38.3946 24.5376L32.7543 18.8961H27.3362ZM29.9664 22.7455V34.5591C29.9664 34.9677 29.8087 35.3835 29.4934 35.6989C29.1781 36.0072 28.7695 36.1649 28.361 36.1649C27.9525 36.1649 27.5368 36.0072 27.2287 35.6989L24.5124 38.4086C25.5803 39.4695 26.9707 40 28.361 40C29.7514 40 31.1418 39.4695 32.2096 38.4086C33.2703 37.3477 33.8007 35.9498 33.8007 34.5591L33.7935 26.5806L29.9664 22.7455ZM29.1064 27.3262L20.757 35.6846C20.4632 35.9713 20.0618 36.1505 19.6175 36.1505C19.1731 36.1505 18.7789 35.9713 18.4851 35.6846C18.1913 35.3907 18.0121 34.9892 18.0121 34.5448H14.1778C14.1778 36.0502 14.787 37.405 15.776 38.3943C16.7579 39.3763 18.1196 39.9857 19.6175 39.9857C21.1225 39.9857 22.477 39.3763 23.4661 38.3943L29.1064 32.7455V27.3262ZM25.2578 29.957H13.4468C13.0383 29.957 12.6226 29.7993 12.3144 29.491C11.9991 29.1756 11.8414 28.767 11.8414 28.3513C11.8414 27.9427 11.9991 27.534 12.3144 27.2186L9.60538 24.509C8.53751 25.5699 8.00717 26.9606 8.00717 28.3513C8.00717 29.7419 8.53751 31.1398 9.60538 32.2007C10.6661 33.2616 12.0564 33.7921 13.4468 33.7921H21.4307L25.2578 29.957ZM20.6567 29.0466L12.3073 20.6953C12.0134 20.4014 11.8343 20 11.8343 19.5556C11.8343 19.1111 12.0134 18.7097 12.3073 18.4229C12.594 18.129 12.9953 17.9498 13.4396 17.9498V14.1219C11.9418 14.1219 10.5801 14.7312 9.59821 15.7133C8.60918 16.6953 8 18.0573 8 19.5556C8 21.0609 8.60918 22.4158 9.59821 23.405L15.2385 29.0466H20.6567ZM18.0479 25.2473V13.4337C18.0479 13.0251 18.2056 12.6165 18.5209 12.3011C18.8291 11.9857 19.2448 11.8351 19.6533 11.828C20.0618 11.828 20.4703 11.9857 20.7857 12.3011L23.5019 9.5914C22.434 8.53047 21.0437 8 19.6533 8C18.2629 8 16.8726 8.53047 15.8047 9.5914C14.744 10.6523 14.2137 12.043 14.2137 13.4409V21.4194L18.0479 25.2473ZM18.908 20.6667L27.2573 12.3154C27.5512 12.0215 27.9525 11.8495 28.3969 11.8495C28.8412 11.8495 29.2354 12.0287 29.5292 12.3154C29.8231 12.6093 30.0022 13.0036 30.0022 13.4552H33.8365C33.8365 11.9498 33.2202 10.5878 32.2383 9.60573C31.2564 8.62366 29.8947 8.01434 28.3969 8.01434C26.8918 8.01434 25.5301 8.62366 24.5483 9.60573L18.908 15.2473V20.6667ZM24.9639 26.3082L26.3113 24.9534V23.0394L24.9639 21.6918H23.0504L21.6959 23.0394V24.9534L23.0504 26.3082H24.9639ZM21.8965 29.0968L18.908 26.1147V21.8853L21.8965 18.8961H26.1178L29.1064 21.8853V26.1147L26.1178 29.0968H21.8965Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-footer-top__row\">\n      <div class=\"aeb-footer-top__head\">\u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0434\u043B\u044F iOS \u0438 Android</div>\n      <div class=\"aeb-footer-top__cell\">\u0410\u042D\u0411 \u041E\u043D\u043B\u0430\u0439\u043D 3.0</div>\n    </div>\n  </a>\n</div>\n}\n", styles: [".aeb-footer-top{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-top{flex-direction:column;align-items:flex-start;padding:16px 0 24px}}.aeb-footer-top__columns{display:flex}.aeb-footer-top__column:not(:last-of-type){margin-right:64px}@media screen and (max-width:992px){.aeb-footer-top__column{width:100%;margin-right:0!important;margin-bottom:24px}}.aeb-footer-top__wrapper{display:flex}@media screen and (max-width:992px){.aeb-footer-top__wrapper{flex-direction:column;align-items:center;width:unset}}.aeb-footer-top__row{display:flex;flex-direction:column;justify-content:center}.aeb-footer-top__head{margin-bottom:6px;font-size:var(--font-size-xs);color:var(--color-mono-300);line-height:16px}.aeb-footer-top__cell{font-size:var(--font-size-m);color:var(--color-mono-0)}.aeb-footer-top a.aeb-footer-top__phone-number{border-bottom:none;color:inherit}.aeb-footer-top a:visited{color:inherit}.aeb-footer-top a:hover.aeb-footer-top__phone-number{border-bottom:none}.aeb-footer-top__app{top:24px;right:0;display:flex;cursor:pointer}.aeb-footer-top__mobile-icon{height:47px;margin-right:24px}\n"] }]
+            args: [{ selector: 'aeb-footer-top', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasContent()) {\n<div #content>\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-top\">\n  <div class=\"aeb-footer-top__wrapper\">\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0411\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u0430\u044F \u0433\u043E\u0440\u044F\u0447\u0430\u044F \u043B\u0438\u043D\u0438\u044F</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+78001003422\">\n            8 800 100-34-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u0422\u0435\u043B\u0435\u0444\u043E\u043D</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"tel:+74112342222\">\n            8 (4112) 34-22-22\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430</div>\n        <div class=\"aeb-footer-top__cell\">\n          <a class=\"aeb-footer-top__phone-number\" href=\"mailto:bank@albank.ru\">\n            bank&#64;albank.ru\n          </a>\n        </div>\n      </div>\n    </div>\n    @if (!onlyPhone()) {\n    <div class=\"aeb-footer-top__column\">\n      <div class=\"aeb-footer-top__row\">\n        <div class=\"aeb-footer-top__head\">\u041D\u0430\u0448 \u0430\u0434\u0440\u0435\u0441</div>\n        <div class=\"aeb-footer-top__cell\">\u0433. \u042F\u043A\u0443\u0442\u0441\u043A, \u043F\u0440. \u041B\u0435\u043D\u0438\u043D\u0430, 1</div>\n      </div>\n    </div>\n    }\n  </div>\n  <a class=\"aeb-footer-top__app\" href=\"https://app.albank.ru/\">\n    <div class=\"aeb-footer-top__mobile-icon\">\n      <svg\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 48 48\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"48\" height=\"48\" rx=\"8\" fill=\"#2F88F0\" />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M26.5406 25.319L25.3223 26.5376L26.1321 28.4946L28.4972 26.129L26.5406 25.319ZM24.8708 26.724H23.1436L22.3337 28.681H25.6735L24.8708 26.724ZM26.7342 23.1398V24.8602L28.6835 25.6702V22.3297L26.7342 23.1398ZM22.6849 26.5376L21.4665 25.319L19.5171 26.129L21.8822 28.4946L22.6849 26.5376ZM26.1321 19.5054L25.3223 21.4624L26.5406 22.681L28.4972 21.871L26.1321 19.5054ZM23.1436 21.2688H24.8708L25.6735 19.319H22.3337L23.1436 21.2688ZM21.2802 24.8602V23.1398L19.3308 22.3297V25.6702L21.2802 24.8602ZM21.4665 22.681L22.6849 21.4624L21.8822 19.5054L19.5171 21.871L21.4665 22.681ZM22.7566 18.0358H34.5675C34.976 18.0358 35.3845 18.1935 35.6999 18.509C36.0152 18.8244 36.1729 19.233 36.1729 19.6416C36.1729 20.0502 36.0152 20.466 35.6999 20.7814L38.409 23.491C39.4697 22.4301 40 21.0323 40 19.6416C40 18.2509 39.4697 16.8602 38.409 15.7993C37.3483 14.7384 35.9579 14.2079 34.5675 14.2079H26.5837L22.7566 18.0358ZM27.3362 18.8961L35.6856 27.2545C35.9794 27.5412 36.1586 27.9427 36.1586 28.3871C36.1586 28.8315 35.9794 29.233 35.6856 29.5269C35.3989 29.8136 34.9975 29.9928 34.5532 29.9928V33.828C36.0511 33.828 37.4128 33.2186 38.3946 32.2366C39.3836 31.2473 39.9857 29.8925 39.9857 28.3871C39.9857 26.8889 39.3765 25.5269 38.3946 24.5376L32.7543 18.8961H27.3362ZM29.9664 22.7455V34.5591C29.9664 34.9677 29.8087 35.3835 29.4934 35.6989C29.1781 36.0072 28.7695 36.1649 28.361 36.1649C27.9525 36.1649 27.5368 36.0072 27.2287 35.6989L24.5124 38.4086C25.5803 39.4695 26.9707 40 28.361 40C29.7514 40 31.1418 39.4695 32.2096 38.4086C33.2703 37.3477 33.8007 35.9498 33.8007 34.5591L33.7935 26.5806L29.9664 22.7455ZM29.1064 27.3262L20.757 35.6846C20.4632 35.9713 20.0618 36.1505 19.6175 36.1505C19.1731 36.1505 18.7789 35.9713 18.4851 35.6846C18.1913 35.3907 18.0121 34.9892 18.0121 34.5448H14.1778C14.1778 36.0502 14.787 37.405 15.776 38.3943C16.7579 39.3763 18.1196 39.9857 19.6175 39.9857C21.1225 39.9857 22.477 39.3763 23.4661 38.3943L29.1064 32.7455V27.3262ZM25.2578 29.957H13.4468C13.0383 29.957 12.6226 29.7993 12.3144 29.491C11.9991 29.1756 11.8414 28.767 11.8414 28.3513C11.8414 27.9427 11.9991 27.534 12.3144 27.2186L9.60538 24.509C8.53751 25.5699 8.00717 26.9606 8.00717 28.3513C8.00717 29.7419 8.53751 31.1398 9.60538 32.2007C10.6661 33.2616 12.0564 33.7921 13.4468 33.7921H21.4307L25.2578 29.957ZM20.6567 29.0466L12.3073 20.6953C12.0134 20.4014 11.8343 20 11.8343 19.5556C11.8343 19.1111 12.0134 18.7097 12.3073 18.4229C12.594 18.129 12.9953 17.9498 13.4396 17.9498V14.1219C11.9418 14.1219 10.5801 14.7312 9.59821 15.7133C8.60918 16.6953 8 18.0573 8 19.5556C8 21.0609 8.60918 22.4158 9.59821 23.405L15.2385 29.0466H20.6567ZM18.0479 25.2473V13.4337C18.0479 13.0251 18.2056 12.6165 18.5209 12.3011C18.8291 11.9857 19.2448 11.8351 19.6533 11.828C20.0618 11.828 20.4703 11.9857 20.7857 12.3011L23.5019 9.5914C22.434 8.53047 21.0437 8 19.6533 8C18.2629 8 16.8726 8.53047 15.8047 9.5914C14.744 10.6523 14.2137 12.043 14.2137 13.4409V21.4194L18.0479 25.2473ZM18.908 20.6667L27.2573 12.3154C27.5512 12.0215 27.9525 11.8495 28.3969 11.8495C28.8412 11.8495 29.2354 12.0287 29.5292 12.3154C29.8231 12.6093 30.0022 13.0036 30.0022 13.4552H33.8365C33.8365 11.9498 33.2202 10.5878 32.2383 9.60573C31.2564 8.62366 29.8947 8.01434 28.3969 8.01434C26.8918 8.01434 25.5301 8.62366 24.5483 9.60573L18.908 15.2473V20.6667ZM24.9639 26.3082L26.3113 24.9534V23.0394L24.9639 21.6918H23.0504L21.6959 23.0394V24.9534L23.0504 26.3082H24.9639ZM21.8965 29.0968L18.908 26.1147V21.8853L21.8965 18.8961H26.1178L29.1064 21.8853V26.1147L26.1178 29.0968H21.8965Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-footer-top__row\">\n      <div class=\"aeb-footer-top__head\">\u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0434\u043B\u044F iOS \u0438 Android</div>\n      <div class=\"aeb-footer-top__cell\">\u0410\u042D\u0411 \u041E\u043D\u043B\u0430\u0439\u043D 3.0</div>\n    </div>\n  </a>\n</div>\n}\n", styles: [".aeb-footer-top{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-top{flex-direction:column;align-items:flex-start;padding:16px 0 24px}}.aeb-footer-top__columns{display:flex}.aeb-footer-top__column:not(:last-of-type){margin-right:64px}@media screen and (max-width:992px){.aeb-footer-top__column{width:100%;margin-right:0!important;margin-bottom:24px}}.aeb-footer-top__wrapper{display:flex}@media screen and (max-width:992px){.aeb-footer-top__wrapper{flex-direction:column;align-items:center;width:unset}}.aeb-footer-top__row{display:flex;flex-direction:column;justify-content:center}.aeb-footer-top__head{margin-bottom:6px;font-size:var(--font-size-xs);color:var(--color-mono-300);line-height:16px}.aeb-footer-top__cell{font-size:var(--font-size-m);color:var(--color-mono-0)}.aeb-footer-top a.aeb-footer-top__phone-number{border-bottom:none;color:inherit}.aeb-footer-top a:visited{color:inherit}.aeb-footer-top a:hover.aeb-footer-top__phone-number{border-bottom:none}.aeb-footer-top__app{top:24px;right:0;display:flex;cursor:pointer}.aeb-footer-top__mobile-icon{height:47px;margin-right:24px}\n"] }]
         }], propDecorators: { onlyPhone: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyPhone", required: false }] }] } });
 class Footer extends BaseContentProjectableFooter {
@@ -3261,13 +3270,13 @@ class Footer extends BaseContentProjectableFooter {
         this.year = input(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Footer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Footer, isStandalone: true, selector: "footer[aebFooter]", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "aeb-footer" }, usesInheritance: true, ngImport: i0, template: "@if (hasContent) {\n<div #content class=\"aeb-footer__content\">\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer__content\">\n  <aeb-footer-top></aeb-footer-top>\n  <aeb-footer-menu [items]=\"menuItems()\"></aeb-footer-menu>\n  <aeb-footer-bottom [links]=\"links()\" [year]=\"year()\"></aeb-footer-bottom>\n</div>\n}\n", styles: [".aeb-footer{display:flex;justify-content:center;max-width:100%;padding:0 16px;background-color:var(--color-mono-900)}@media screen and (max-width:1200px){.aeb-footer{margin:0 16px}}.aeb-footer__content{width:1200px}@media screen and (max-width:1200px){.aeb-footer__content{width:100%}}.aeb-footer a{border-bottom:var(--border-thin) solid transparent;transition:border .3s;text-decoration:none}.aeb-footer a:hover:not(:has(svg)){border-bottom:var(--border-thin) solid var(--color-mono-0)}\n"], dependencies: [{ kind: "component", type: FooterTop, selector: "aeb-footer-top", inputs: ["onlyPhone"] }, { kind: "component", type: FooterMenu, selector: "aeb-footer-menu", inputs: ["items"] }, { kind: "component", type: FooterBottom, selector: "aeb-footer-bottom", inputs: ["links", "year"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Footer, isStandalone: true, selector: "footer[aebFooter]", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "aeb-footer" }, usesInheritance: true, ngImport: i0, template: "@if (hasContent()) {\n<div #content class=\"aeb-footer__content\">\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer__content\">\n  <aeb-footer-top></aeb-footer-top>\n  <aeb-footer-menu [items]=\"menuItems()\"></aeb-footer-menu>\n  <aeb-footer-bottom [links]=\"links()\" [year]=\"year()\"></aeb-footer-bottom>\n</div>\n}\n", styles: [".aeb-footer{display:flex;justify-content:center;max-width:100%;padding:0 16px;background-color:var(--color-mono-900)}@media screen and (max-width:1200px){.aeb-footer{margin:0 16px}}.aeb-footer__content{width:1200px}@media screen and (max-width:1200px){.aeb-footer__content{width:100%}}.aeb-footer a{border-bottom:var(--border-thin) solid transparent;transition:border .3s;text-decoration:none}.aeb-footer a:hover:not(:has(svg)){border-bottom:var(--border-thin) solid var(--color-mono-0)}\n"], dependencies: [{ kind: "component", type: FooterTop, selector: "aeb-footer-top", inputs: ["onlyPhone"] }, { kind: "component", type: FooterMenu, selector: "aeb-footer-menu", inputs: ["items"] }, { kind: "component", type: FooterBottom, selector: "aeb-footer-bottom", inputs: ["links", "year"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Footer, decorators: [{
             type: Component,
-            args: [{ selector: 'footer[aebFooter]', encapsulation: ViewEncapsulation.None, imports: [FooterTop, FooterMenu, FooterBottom], host: {
+            args: [{ selector: 'footer[aebFooter]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FooterTop, FooterMenu, FooterBottom], host: {
                         class: 'aeb-footer'
-                    }, template: "@if (hasContent) {\n<div #content class=\"aeb-footer__content\">\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer__content\">\n  <aeb-footer-top></aeb-footer-top>\n  <aeb-footer-menu [items]=\"menuItems()\"></aeb-footer-menu>\n  <aeb-footer-bottom [links]=\"links()\" [year]=\"year()\"></aeb-footer-bottom>\n</div>\n}\n", styles: [".aeb-footer{display:flex;justify-content:center;max-width:100%;padding:0 16px;background-color:var(--color-mono-900)}@media screen and (max-width:1200px){.aeb-footer{margin:0 16px}}.aeb-footer__content{width:1200px}@media screen and (max-width:1200px){.aeb-footer__content{width:100%}}.aeb-footer a{border-bottom:var(--border-thin) solid transparent;transition:border .3s;text-decoration:none}.aeb-footer a:hover:not(:has(svg)){border-bottom:var(--border-thin) solid var(--color-mono-0)}\n"] }]
+                    }, template: "@if (hasContent()) {\n<div #content class=\"aeb-footer__content\">\n  <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer__content\">\n  <aeb-footer-top></aeb-footer-top>\n  <aeb-footer-menu [items]=\"menuItems()\"></aeb-footer-menu>\n  <aeb-footer-bottom [links]=\"links()\" [year]=\"year()\"></aeb-footer-bottom>\n</div>\n}\n", styles: [".aeb-footer{display:flex;justify-content:center;max-width:100%;padding:0 16px;background-color:var(--color-mono-900)}@media screen and (max-width:1200px){.aeb-footer{margin:0 16px}}.aeb-footer__content{width:1200px}@media screen and (max-width:1200px){.aeb-footer__content{width:100%}}.aeb-footer a{border-bottom:var(--border-thin) solid transparent;transition:border .3s;text-decoration:none}.aeb-footer a:hover:not(:has(svg)){border-bottom:var(--border-thin) solid var(--color-mono-0)}\n"] }]
         }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }] } });
 class FooterModule {
@@ -3285,11 +3294,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Header {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Header, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Header, isStandalone: true, selector: "header[aebHeader]", host: { classAttribute: "aeb-header" }, ngImport: i0, template: "<ng-content />\n", styles: [".aeb-header{position:fixed;top:0;left:0;z-index:var(--z-fixed);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:80px;padding:0 28px;background-color:var(--c-bg-light);border-bottom:1px solid var(--c-bor-default);color:var(--c-t-primary)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Header, isStandalone: true, selector: "header[aebHeader]", host: { classAttribute: "aeb-header" }, ngImport: i0, template: "<ng-content />\n", styles: [".aeb-header{position:fixed;top:0;left:0;z-index:var(--z-fixed);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:80px;padding:0 28px;background-color:var(--c-bg-light);border-bottom:1px solid var(--c-bor-default);color:var(--c-t-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Header, decorators: [{
             type: Component,
-            args: [{ selector: 'header[aebHeader]', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'header[aebHeader]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'aeb-header'
                     }, template: "<ng-content />\n", styles: [".aeb-header{position:fixed;top:0;left:0;z-index:var(--z-fixed);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:80px;padding:0 28px;background-color:var(--c-bg-light);border-bottom:1px solid var(--c-bor-default);color:var(--c-t-primary)}\n"] }]
         }] });
@@ -3299,11 +3308,11 @@ class Logo {
         this.iconPath = input('', ...(ngDevMode ? [{ debugName: "iconPath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Logo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Logo, isStandalone: true, selector: "a[aebLogo]", inputs: { iconPath: { classPropertyName: "iconPath", publicName: "iconPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "aeb-header-logo" }, ngImport: i0, template: "@if (iconPath()) {\n<img class=\"aeb-header-logo-icon\" [src]=\"iconPath()\" alt=\"\u041B\u043E\u0433\u043E\u0442\u0438\u043F\" />\n} @else {\n<svg\n  class=\"aeb-header-logo-icon\"\n  width=\"26\"\n  height=\"26\"\n  viewBox=\"0 0 26 26\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M0 0H6V6H0V0ZM0 10H6V16H0V10ZM6 20H0V26H6V20ZM10 0H16V6H10V0ZM16 10H10V16H16V10ZM10 20H16V26H10V20ZM26 0H20V6H26V0ZM20 10H26V16H20V10ZM26 20H20V26H26V20Z\"\n    fill=\"#2F88F0\"\n  />\n</svg>\n}\n\n<div class=\"aeb-header-logo-text\">\n  <ng-content />\n</div>\n", styles: [".aeb-header-logo{display:flex;align-items:center;color:var(--c-t-primary);cursor:pointer;margin-right:28px;text-decoration:none}.aeb-header-logo-icon{margin-right:18px;height:32px;width:32px}.aeb-header-logo-text{display:flex;align-items:center;font-size:24px;font-weight:500;line-height:28px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Logo, isStandalone: true, selector: "a[aebLogo]", inputs: { iconPath: { classPropertyName: "iconPath", publicName: "iconPath", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "aeb-header-logo" }, ngImport: i0, template: "@if (iconPath()) {\n<img class=\"aeb-header-logo-icon\" [src]=\"iconPath()\" alt=\"\u041B\u043E\u0433\u043E\u0442\u0438\u043F\" />\n} @else {\n<svg\n  class=\"aeb-header-logo-icon\"\n  width=\"26\"\n  height=\"26\"\n  viewBox=\"0 0 26 26\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M0 0H6V6H0V0ZM0 10H6V16H0V10ZM6 20H0V26H6V20ZM10 0H16V6H10V0ZM16 10H10V16H16V10ZM10 20H16V26H10V20ZM26 0H20V6H26V0ZM20 10H26V16H20V10ZM26 20H20V26H26V20Z\"\n    fill=\"#2F88F0\"\n  />\n</svg>\n}\n\n<div class=\"aeb-header-logo-text\">\n  <ng-content />\n</div>\n", styles: [".aeb-header-logo{display:flex;align-items:center;color:var(--c-t-primary);cursor:pointer;margin-right:28px;text-decoration:none}.aeb-header-logo-icon{margin-right:18px;height:32px;width:32px}.aeb-header-logo-text{display:flex;align-items:center;font-size:24px;font-weight:500;line-height:28px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Logo, decorators: [{
             type: Component,
-            args: [{ selector: 'a[aebLogo]', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'a[aebLogo]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'aeb-header-logo'
                     }, template: "@if (iconPath()) {\n<img class=\"aeb-header-logo-icon\" [src]=\"iconPath()\" alt=\"\u041B\u043E\u0433\u043E\u0442\u0438\u043F\" />\n} @else {\n<svg\n  class=\"aeb-header-logo-icon\"\n  width=\"26\"\n  height=\"26\"\n  viewBox=\"0 0 26 26\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M0 0H6V6H0V0ZM0 10H6V16H0V10ZM6 20H0V26H6V20ZM10 0H16V6H10V0ZM16 10H10V16H16V10ZM10 20H16V26H10V20ZM26 0H20V6H26V0ZM20 10H26V16H20V10ZM26 20H20V26H26V20Z\"\n    fill=\"#2F88F0\"\n  />\n</svg>\n}\n\n<div class=\"aeb-header-logo-text\">\n  <ng-content />\n</div>\n", styles: [".aeb-header-logo{display:flex;align-items:center;color:var(--c-t-primary);cursor:pointer;margin-right:28px;text-decoration:none}.aeb-header-logo-icon{margin-right:18px;height:32px;width:32px}.aeb-header-logo-text{display:flex;align-items:center;font-size:24px;font-weight:500;line-height:28px}\n"] }]
         }], propDecorators: { iconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPath", required: false }] }] } });
@@ -3330,11 +3339,11 @@ class Breadcrumps {
         this.routeClick.emit(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Breadcrumps, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Breadcrumps, isStandalone: true, selector: "aeb-breadcrumps", inputs: { routeSeq: { classPropertyName: "routeSeq", publicName: "routeSequence", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<div class=\"aeb-breadcrumps\">\n  @for (item of routeSeq(); track $index) {\n  <div class=\"aeb-breadcrumps__item\" (click)=\"clickHandler($index)\">\n    {{ item }} @if ($index !== routeSeq().length - 1) {\n    <span class=\"aeb-breadcrumps__icon\">\n      <svg\n        width=\"3\"\n        height=\"6\"\n        viewBox=\"0 0 3 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3 3L-6.28109e-09 5.59808L2.2085e-07 0.401924L3 3Z\"\n          fill=\"#A3AAAE\"\n        />\n      </svg>\n    </span>\n    }\n  </div>\n  }\n</div>\n", styles: [".aeb-breadcrumps{display:flex}.aeb-breadcrumps__item{font-size:var(--font-size-xs);color:var(--color-mono-300);cursor:pointer;transition:color,.2s}.aeb-breadcrumps__item:not(:last-child){margin-right:12px}.aeb-breadcrumps__item:hover{color:var(--color-blue-500)}.aeb-breadcrumps__icon{position:relative;bottom:3px;padding-bottom:10px;margin-left:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Breadcrumps, isStandalone: true, selector: "aeb-breadcrumps", inputs: { routeSeq: { classPropertyName: "routeSeq", publicName: "routeSequence", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<div class=\"aeb-breadcrumps\">\n  @for (item of routeSeq(); track $index) {\n  <div class=\"aeb-breadcrumps__item\" (click)=\"clickHandler($index)\">\n    {{ item }} @if ($index !== routeSeq().length - 1) {\n    <span class=\"aeb-breadcrumps__icon\">\n      <svg\n        width=\"3\"\n        height=\"6\"\n        viewBox=\"0 0 3 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3 3L-6.28109e-09 5.59808L2.2085e-07 0.401924L3 3Z\"\n          fill=\"#A3AAAE\"\n        />\n      </svg>\n    </span>\n    }\n  </div>\n  }\n</div>\n", styles: [".aeb-breadcrumps{display:flex}.aeb-breadcrumps__item{font-size:var(--font-size-xs);color:var(--color-mono-300);cursor:pointer;transition:color,.2s}.aeb-breadcrumps__item:not(:last-child){margin-right:12px}.aeb-breadcrumps__item:hover{color:var(--color-blue-500)}.aeb-breadcrumps__icon{position:relative;bottom:3px;padding-bottom:10px;margin-left:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Breadcrumps, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-breadcrumps', encapsulation: ViewEncapsulation.None, template: "<div class=\"aeb-breadcrumps\">\n  @for (item of routeSeq(); track $index) {\n  <div class=\"aeb-breadcrumps__item\" (click)=\"clickHandler($index)\">\n    {{ item }} @if ($index !== routeSeq().length - 1) {\n    <span class=\"aeb-breadcrumps__icon\">\n      <svg\n        width=\"3\"\n        height=\"6\"\n        viewBox=\"0 0 3 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3 3L-6.28109e-09 5.59808L2.2085e-07 0.401924L3 3Z\"\n          fill=\"#A3AAAE\"\n        />\n      </svg>\n    </span>\n    }\n  </div>\n  }\n</div>\n", styles: [".aeb-breadcrumps{display:flex}.aeb-breadcrumps__item{font-size:var(--font-size-xs);color:var(--color-mono-300);cursor:pointer;transition:color,.2s}.aeb-breadcrumps__item:not(:last-child){margin-right:12px}.aeb-breadcrumps__item:hover{color:var(--color-blue-500)}.aeb-breadcrumps__icon{position:relative;bottom:3px;padding-bottom:10px;margin-left:12px}\n"] }]
+            args: [{ selector: 'aeb-breadcrumps', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"aeb-breadcrumps\">\n  @for (item of routeSeq(); track $index) {\n  <div class=\"aeb-breadcrumps__item\" (click)=\"clickHandler($index)\">\n    {{ item }} @if ($index !== routeSeq().length - 1) {\n    <span class=\"aeb-breadcrumps__icon\">\n      <svg\n        width=\"3\"\n        height=\"6\"\n        viewBox=\"0 0 3 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3 3L-6.28109e-09 5.59808L2.2085e-07 0.401924L3 3Z\"\n          fill=\"#A3AAAE\"\n        />\n      </svg>\n    </span>\n    }\n  </div>\n  }\n</div>\n", styles: [".aeb-breadcrumps{display:flex}.aeb-breadcrumps__item{font-size:var(--font-size-xs);color:var(--color-mono-300);cursor:pointer;transition:color,.2s}.aeb-breadcrumps__item:not(:last-child){margin-right:12px}.aeb-breadcrumps__item:hover{color:var(--color-blue-500)}.aeb-breadcrumps__icon{position:relative;bottom:3px;padding-bottom:10px;margin-left:12px}\n"] }]
         }], propDecorators: { routeSeq: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeSequence", required: false }] }], routeClick: [{ type: i0.Output, args: ["routeClick"] }] } });
 class Heading {
@@ -3342,11 +3351,11 @@ class Heading {
         this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Heading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: Heading, isStandalone: true, selector: "aeb-heading", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h1 class=\"aeb-heading\">{{ header() }}</h1>\n", styles: [".aeb-heading{margin:0;font-size:var(--font-size-xxxl);font-weight:unset;color:var(--color-mono-900)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: Heading, isStandalone: true, selector: "aeb-heading", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h1 class=\"aeb-heading\">{{ header() }}</h1>\n", styles: [".aeb-heading{margin:0;font-size:var(--font-size-xxxl);font-weight:unset;color:var(--color-mono-900)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Heading, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-heading', encapsulation: ViewEncapsulation.None, template: "<h1 class=\"aeb-heading\">{{ header() }}</h1>\n", styles: [".aeb-heading{margin:0;font-size:var(--font-size-xxxl);font-weight:unset;color:var(--color-mono-900)}\n"] }]
+            args: [{ selector: 'aeb-heading', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 class=\"aeb-heading\">{{ header() }}</h1>\n", styles: [".aeb-heading{margin:0;font-size:var(--font-size-xxxl);font-weight:unset;color:var(--color-mono-900)}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }] } });
 class ProductTitle {
@@ -3358,11 +3367,11 @@ class ProductTitle {
         this.backHandler.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ProductTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ProductTitle, isStandalone: true, selector: "aeb-product-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backHandler: "backHandler" }, ngImport: i0, template: "<div class=\"aeb-product-title\">\n  <div class=\"aeb-product-title__title\">\n    <div class=\"aeb-product-title__back\" (click)=\"clickHandler()\">\n      <svg\n        width=\"42\"\n        height=\"42\"\n        viewBox=\"0 0 42 42\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"42\" height=\"42\" rx=\"10\" fill=\"white\" />\n        <line\n          x1=\"13\"\n          y1=\"21\"\n          x2=\"29\"\n          y2=\"21\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M18 14L12 21L18 28\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-product-title__heading\">{{ title() }}</div>\n  </div>\n  <ng-content />\n</div>\n", styles: [".aeb-product-title{color:var(--color-mono-900)}.aeb-product-title__title{display:flex;align-items:center;margin-bottom:20px}.aeb-product-title__back{width:42px;height:42px;margin-right:20px;cursor:pointer;border-radius:var(--border-medium-rounded)}.aeb-product-title__heading{font-size:var(--font-size-lm)}.aeb-product-desc{margin-bottom:70px;font-size:var(--font-size-m)}.aeb-product-table{width:100%}.aeb-product-table__row{display:flex}.aeb-product-table__head{display:flex;flex-direction:column;margin-right:65px}.aeb-product-table__sep{width:50px;height:2px;margin-top:12px;background:var(--color-mono-900)}.aeb-product-table__desc{margin-top:12px;font-weight:var(--font-weight-medium)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ProductTitle, isStandalone: true, selector: "aeb-product-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backHandler: "backHandler" }, ngImport: i0, template: "<div class=\"aeb-product-title\">\n  <div class=\"aeb-product-title__title\">\n    <div class=\"aeb-product-title__back\" (click)=\"clickHandler()\">\n      <svg\n        width=\"42\"\n        height=\"42\"\n        viewBox=\"0 0 42 42\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"42\" height=\"42\" rx=\"10\" fill=\"white\" />\n        <line\n          x1=\"13\"\n          y1=\"21\"\n          x2=\"29\"\n          y2=\"21\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M18 14L12 21L18 28\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-product-title__heading\">{{ title() }}</div>\n  </div>\n  <ng-content />\n</div>\n", styles: [".aeb-product-title{color:var(--color-mono-900)}.aeb-product-title__title{display:flex;align-items:center;margin-bottom:20px}.aeb-product-title__back{width:42px;height:42px;margin-right:20px;cursor:pointer;border-radius:var(--border-medium-rounded)}.aeb-product-title__heading{font-size:var(--font-size-lm)}.aeb-product-desc{margin-bottom:70px;font-size:var(--font-size-m)}.aeb-product-table{width:100%}.aeb-product-table__row{display:flex}.aeb-product-table__head{display:flex;flex-direction:column;margin-right:65px}.aeb-product-table__sep{width:50px;height:2px;margin-top:12px;background:var(--color-mono-900)}.aeb-product-table__desc{margin-top:12px;font-weight:var(--font-weight-medium)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ProductTitle, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-product-title', encapsulation: ViewEncapsulation.None, template: "<div class=\"aeb-product-title\">\n  <div class=\"aeb-product-title__title\">\n    <div class=\"aeb-product-title__back\" (click)=\"clickHandler()\">\n      <svg\n        width=\"42\"\n        height=\"42\"\n        viewBox=\"0 0 42 42\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"42\" height=\"42\" rx=\"10\" fill=\"white\" />\n        <line\n          x1=\"13\"\n          y1=\"21\"\n          x2=\"29\"\n          y2=\"21\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M18 14L12 21L18 28\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-product-title__heading\">{{ title() }}</div>\n  </div>\n  <ng-content />\n</div>\n", styles: [".aeb-product-title{color:var(--color-mono-900)}.aeb-product-title__title{display:flex;align-items:center;margin-bottom:20px}.aeb-product-title__back{width:42px;height:42px;margin-right:20px;cursor:pointer;border-radius:var(--border-medium-rounded)}.aeb-product-title__heading{font-size:var(--font-size-lm)}.aeb-product-desc{margin-bottom:70px;font-size:var(--font-size-m)}.aeb-product-table{width:100%}.aeb-product-table__row{display:flex}.aeb-product-table__head{display:flex;flex-direction:column;margin-right:65px}.aeb-product-table__sep{width:50px;height:2px;margin-top:12px;background:var(--color-mono-900)}.aeb-product-table__desc{margin-top:12px;font-weight:var(--font-weight-medium)}\n"] }]
+            args: [{ selector: 'aeb-product-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"aeb-product-title\">\n  <div class=\"aeb-product-title__title\">\n    <div class=\"aeb-product-title__back\" (click)=\"clickHandler()\">\n      <svg\n        width=\"42\"\n        height=\"42\"\n        viewBox=\"0 0 42 42\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"42\" height=\"42\" rx=\"10\" fill=\"white\" />\n        <line\n          x1=\"13\"\n          y1=\"21\"\n          x2=\"29\"\n          y2=\"21\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M18 14L12 21L18 28\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n    <div class=\"aeb-product-title__heading\">{{ title() }}</div>\n  </div>\n  <ng-content />\n</div>\n", styles: [".aeb-product-title{color:var(--color-mono-900)}.aeb-product-title__title{display:flex;align-items:center;margin-bottom:20px}.aeb-product-title__back{width:42px;height:42px;margin-right:20px;cursor:pointer;border-radius:var(--border-medium-rounded)}.aeb-product-title__heading{font-size:var(--font-size-lm)}.aeb-product-desc{margin-bottom:70px;font-size:var(--font-size-m)}.aeb-product-table{width:100%}.aeb-product-table__row{display:flex}.aeb-product-table__head{display:flex;flex-direction:column;margin-right:65px}.aeb-product-table__sep{width:50px;height:2px;margin-top:12px;background:var(--color-mono-900)}.aeb-product-table__desc{margin-top:12px;font-weight:var(--font-weight-medium)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backHandler: [{ type: i0.Output, args: ["backHandler"] }] } });
 class HeadingModule {
@@ -3380,11 +3389,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Label {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Label, isStandalone: true, selector: "aeb-filter-label", ngImport: i0, template: "<div class=\"aeb-label\">\n  <div class=\"aeb-label-text\">\n    <ng-content />\n  </div>\n  <div class=\"aeb-label-icon-close\">\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M14 1.4L12.6 0L7 5.6L1.4 0L0 1.4L5.6 7L0 12.6L1.4 14L7 8.4L12.6 14L14 12.6L8.4 7L14 1.4Z\"\n        fill=\"#2F88F0\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [".aeb-label{box-sizing:border-box;display:inline-block;height:32px;padding:7px 11px 7px 21px;background-color:var(--color-blue-50);border-radius:16px}.aeb-label-text{float:left;font-size:var(--font-size-s);line-height:18px;color:var(--color-blue-500)}.aeb-label-icon-close{box-sizing:border-box;float:right;height:14px;margin-top:1px;margin-left:11px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Label, isStandalone: true, selector: "aeb-filter-label", ngImport: i0, template: "<div class=\"aeb-label\">\n  <div class=\"aeb-label-text\">\n    <ng-content />\n  </div>\n  <div class=\"aeb-label-icon-close\">\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M14 1.4L12.6 0L7 5.6L1.4 0L0 1.4L5.6 7L0 12.6L1.4 14L7 8.4L12.6 14L14 12.6L8.4 7L14 1.4Z\"\n        fill=\"#2F88F0\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [".aeb-label{box-sizing:border-box;display:inline-block;height:32px;padding:7px 11px 7px 21px;background-color:var(--color-blue-50);border-radius:16px}.aeb-label-text{float:left;font-size:var(--font-size-s);line-height:18px;color:var(--color-blue-500)}.aeb-label-icon-close{box-sizing:border-box;float:right;height:14px;margin-top:1px;margin-left:11px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Label, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-filter-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"aeb-label\">\n  <div class=\"aeb-label-text\">\n    <ng-content />\n  </div>\n  <div class=\"aeb-label-icon-close\">\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M14 1.4L12.6 0L7 5.6L1.4 0L0 1.4L5.6 7L0 12.6L1.4 14L7 8.4L12.6 14L14 12.6L8.4 7L14 1.4Z\"\n        fill=\"#2F88F0\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [".aeb-label{box-sizing:border-box;display:inline-block;height:32px;padding:7px 11px 7px 21px;background-color:var(--color-blue-50);border-radius:16px}.aeb-label-text{float:left;font-size:var(--font-size-s);line-height:18px;color:var(--color-blue-500)}.aeb-label-icon-close{box-sizing:border-box;float:right;height:14px;margin-top:1px;margin-left:11px}\n"] }]
+            args: [{ selector: 'aeb-filter-label', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"aeb-label\">\n  <div class=\"aeb-label-text\">\n    <ng-content />\n  </div>\n  <div class=\"aeb-label-icon-close\">\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M14 1.4L12.6 0L7 5.6L1.4 0L0 1.4L5.6 7L0 12.6L1.4 14L7 8.4L12.6 14L14 12.6L8.4 7L14 1.4Z\"\n        fill=\"#2F88F0\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [".aeb-label{box-sizing:border-box;display:inline-block;height:32px;padding:7px 11px 7px 21px;background-color:var(--color-blue-50);border-radius:16px}.aeb-label-text{float:left;font-size:var(--font-size-s);line-height:18px;color:var(--color-blue-500)}.aeb-label-icon-close{box-sizing:border-box;float:right;height:14px;margin-top:1px;margin-left:11px}\n"] }]
         }] });
 class LabelModule {
@@ -3444,14 +3453,12 @@ class Modal {
                 ...(this.controlsConfig()?.rightBtn ?? {})
             }
         }), ...(ngDevMode ? [{ debugName: "controlsConfigTemplate" }] : /* istanbul ignore next */ []));
-        this.isMobileScreen = true;
-        this.checkScreen();
+        this.isMobileScreen = signal(window.innerWidth <= 599, ...(ngDevMode ? [{ debugName: "isMobileScreen" }] : /* istanbul ignore next */ []));
         fromEvent(window, 'resize')
             .pipe(debounce(() => timer(50)), takeUntilDestroyed())
             .subscribe(() => {
-            this.checkScreen();
+            this.isMobileScreen.set(window.innerWidth <= 599);
         });
-        // Effect to handle modal open/close based on isOpen input
         effect(() => {
             if (this._modalRef?.nativeElement) {
                 if (this.isOpen()) {
@@ -3481,24 +3488,16 @@ class Modal {
             this.onCloseClick();
         }
     }
-    checkScreen() {
-        if (window.innerWidth <= 599) {
-            this.isMobileScreen = true;
-        }
-        else {
-            this.isMobileScreen = false;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Modal, isStandalone: true, selector: "aeb-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, controlsConfig: { classPropertyName: "controlsConfig", publicName: "controlsConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftBtnClick: "leftBtnClick", rightBtnClick: "rightBtnClick", closeBtnClick: "closeBtnClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.aeb-modal--open": "isOpen()" }, classAttribute: "aeb-modal" }, ngImport: i0, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n  <div class=\"aeb-modal__header\">\n    <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n    @if (!controlsConfigTemplate().closeBtn.hidden) {\n    <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n      <svg\n        width=\"32\"\n        height=\"32\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M9.63074 9.63074L22.3692 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M22.3693 9.63074L9.63077 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n    }\n  </div>\n  <ng-content />\n  @if (!controlsConfigTemplate().leftBtn.hidden &&\n  !controlsConfigTemplate().rightBtn.hidden) {\n  <span class=\"aeb-modal__btn-group\">\n    @if (!controlsConfigTemplate().leftBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().leftBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().leftBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n      (click)=\"onCancelClick()\"\n    >\n      {{ controlsConfigTemplate().leftBtn.text }}\n    </button>\n    } @if (!controlsConfigTemplate().rightBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().rightBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().rightBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n      (click)=\"onSubmitClick()\"\n    >\n      {{ controlsConfigTemplate().rightBtn.text }}\n    </button>\n    }\n  </span>\n  }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Modal, isStandalone: true, selector: "aeb-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, controlsConfig: { classPropertyName: "controlsConfig", publicName: "controlsConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftBtnClick: "leftBtnClick", rightBtnClick: "rightBtnClick", closeBtnClick: "closeBtnClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.aeb-modal--open": "isOpen()" }, classAttribute: "aeb-modal" }, ngImport: i0, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n  <div class=\"aeb-modal__header\">\n    <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n    @if (!controlsConfigTemplate().closeBtn.hidden) {\n    <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n      <svg\n        width=\"32\"\n        height=\"32\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M9.63074 9.63074L22.3692 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M22.3693 9.63074L9.63077 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n    }\n  </div>\n  <ng-content />\n  @if (!controlsConfigTemplate().leftBtn.hidden &&\n  !controlsConfigTemplate().rightBtn.hidden) {\n  <span class=\"aeb-modal__btn-group\">\n    @if (!controlsConfigTemplate().leftBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen() ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen() ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().leftBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().leftBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n      (click)=\"onCancelClick()\"\n    >\n      {{ controlsConfigTemplate().leftBtn.text }}\n    </button>\n    } @if (!controlsConfigTemplate().rightBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen() ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen() ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().rightBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().rightBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n      (click)=\"onSubmitClick()\"\n    >\n      {{ controlsConfigTemplate().rightBtn.text }}\n    </button>\n    }\n  </span>\n  }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Modal, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-modal', encapsulation: ViewEncapsulation.None, imports: [Button], host: {
+            args: [{ selector: 'aeb-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [Button], host: {
                         class: 'aeb-modal',
                         '[class.aeb-modal--open]': 'isOpen()',
                         '(click)': 'onClick($event)'
-                    }, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n  <div class=\"aeb-modal__header\">\n    <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n    @if (!controlsConfigTemplate().closeBtn.hidden) {\n    <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n      <svg\n        width=\"32\"\n        height=\"32\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M9.63074 9.63074L22.3692 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M22.3693 9.63074L9.63077 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n    }\n  </div>\n  <ng-content />\n  @if (!controlsConfigTemplate().leftBtn.hidden &&\n  !controlsConfigTemplate().rightBtn.hidden) {\n  <span class=\"aeb-modal__btn-group\">\n    @if (!controlsConfigTemplate().leftBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().leftBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().leftBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n      (click)=\"onCancelClick()\"\n    >\n      {{ controlsConfigTemplate().leftBtn.text }}\n    </button>\n    } @if (!controlsConfigTemplate().rightBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().rightBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().rightBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n      (click)=\"onSubmitClick()\"\n    >\n      {{ controlsConfigTemplate().rightBtn.text }}\n    </button>\n    }\n  </span>\n  }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"] }]
+                    }, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n  <div class=\"aeb-modal__header\">\n    <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n    @if (!controlsConfigTemplate().closeBtn.hidden) {\n    <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n      <svg\n        width=\"32\"\n        height=\"32\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M9.63074 9.63074L22.3692 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M22.3693 9.63074L9.63077 22.3692\"\n          stroke=\"#7D8591\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n    }\n  </div>\n  <ng-content />\n  @if (!controlsConfigTemplate().leftBtn.hidden &&\n  !controlsConfigTemplate().rightBtn.hidden) {\n  <span class=\"aeb-modal__btn-group\">\n    @if (!controlsConfigTemplate().leftBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen() ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen() ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().leftBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().leftBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n      (click)=\"onCancelClick()\"\n    >\n      {{ controlsConfigTemplate().leftBtn.text }}\n    </button>\n    } @if (!controlsConfigTemplate().rightBtn.hidden) {\n    <button\n      aebButton\n      [size]=\"isMobileScreen() ? 'M' : 'L'\"\n      [fill]=\"isMobileScreen() ? true : false || size() === 'S'\"\n      [variant]=\"controlsConfigTemplate().rightBtn.variant || 'primary'\"\n      [isWarning]=\"controlsConfigTemplate().rightBtn.warning || false\"\n      [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n      (click)=\"onSubmitClick()\"\n    >\n      {{ controlsConfigTemplate().rightBtn.text }}\n    </button>\n    }\n  </span>\n  }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], controlsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsConfig", required: false }] }], leftBtnClick: [{ type: i0.Output, args: ["leftBtnClick"] }], rightBtnClick: [{ type: i0.Output, args: ["rightBtnClick"] }], closeBtnClick: [{ type: i0.Output, args: ["closeBtnClick"] }] } });
 class ModalModule {
@@ -3519,11 +3518,11 @@ class NewsCard {
         this.date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NewsCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: NewsCard, isStandalone: true, selector: "aeb-news-card", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"aeb-news-card\">\n  <div class=\"aeb-news-card__date\">{{ date() | date: 'd MMMM' }}</div>\n  <div class=\"aeb-news-card__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-news-card{box-sizing:border-box;max-width:320px;color:var(--color-mono-900)}.aeb-news-card__date{box-sizing:border-box;display:block;width:fit-content;padding:9px 10px;margin-bottom:16px;font-size:var(--font-size-xxs);border:var(--border-thin) solid var(--color-blue-50);border-radius:var(--border-rounded)}.aeb-news-card__content a{color:var(--color-blue-500);text-decoration:none}.aeb-news-card__content{max-width:320px;font-size:var(--font-size-s);text-decoration:none!important}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: NewsCard, isStandalone: true, selector: "aeb-news-card", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"aeb-news-card\">\n  <div class=\"aeb-news-card__date\">{{ date() | date: 'd MMMM' }}</div>\n  <div class=\"aeb-news-card__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-news-card{box-sizing:border-box;max-width:320px;color:var(--color-mono-900)}.aeb-news-card__date{box-sizing:border-box;display:block;width:fit-content;padding:9px 10px;margin-bottom:16px;font-size:var(--font-size-xxs);border:var(--border-thin) solid var(--color-blue-50);border-radius:var(--border-rounded)}.aeb-news-card__content a{color:var(--color-blue-500);text-decoration:none}.aeb-news-card__content{max-width:320px;font-size:var(--font-size-s);text-decoration:none!important}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NewsCard, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-news-card', encapsulation: ViewEncapsulation.None, imports: [DatePipe], template: "<div class=\"aeb-news-card\">\n  <div class=\"aeb-news-card__date\">{{ date() | date: 'd MMMM' }}</div>\n  <div class=\"aeb-news-card__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-news-card{box-sizing:border-box;max-width:320px;color:var(--color-mono-900)}.aeb-news-card__date{box-sizing:border-box;display:block;width:fit-content;padding:9px 10px;margin-bottom:16px;font-size:var(--font-size-xxs);border:var(--border-thin) solid var(--color-blue-50);border-radius:var(--border-rounded)}.aeb-news-card__content a{color:var(--color-blue-500);text-decoration:none}.aeb-news-card__content{max-width:320px;font-size:var(--font-size-s);text-decoration:none!important}\n"] }]
+            args: [{ selector: 'aeb-news-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DatePipe], template: "<div class=\"aeb-news-card\">\n  <div class=\"aeb-news-card__date\">{{ date() | date: 'd MMMM' }}</div>\n  <div class=\"aeb-news-card__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-news-card{box-sizing:border-box;max-width:320px;color:var(--color-mono-900)}.aeb-news-card__date{box-sizing:border-box;display:block;width:fit-content;padding:9px 10px;margin-bottom:16px;font-size:var(--font-size-xxs);border:var(--border-thin) solid var(--color-blue-50);border-radius:var(--border-rounded)}.aeb-news-card__content a{color:var(--color-blue-500);text-decoration:none}.aeb-news-card__content{max-width:320px;font-size:var(--font-size-s);text-decoration:none!important}\n"] }]
         }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }] } });
 class NewsCardModule {
@@ -3633,11 +3632,11 @@ class Notification {
                 transition('open => closed', [animate('2s ease-in')]),
                 transition('closed => open', [animate('0.3s ease-out')])
             ])
-        ], encapsulation: i0.ViewEncapsulation.None }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Notification, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-notification', encapsulation: ViewEncapsulation.None, animations: [
+            args: [{ selector: 'aeb-notification', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('notificationState', [
                             state('open', style({
                                 opacity: 1,
@@ -3695,11 +3694,11 @@ class Notifications {
                     ], { optional: true })
                 ])
             ])
-        ], encapsulation: i0.ViewEncapsulation.None }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Notifications, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-notifications', encapsulation: ViewEncapsulation.None, animations: [
+            args: [{ selector: 'aeb-notifications', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('listAnimation', [
                             transition('* => *', [
                                 query(':enter', [
@@ -3742,12 +3741,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Select {
     get disabled() {
-        return this._disabled;
+        return this._disabled();
     }
     constructor() {
-        // Internal mutable state for ControlValueAccessor
-        this._disabled = false;
-        this._cdr = inject(ChangeDetectorRef);
+        this._value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this.initialDisabled = input(false, ...(ngDevMode ? [{ debugName: "initialDisabled" }] : /* istanbul ignore next */ []));
         this.dropdownMenuRef = viewChild(DropdownMenu, ...(ngDevMode ? [{ debugName: "dropdownMenuRef" }] : /* istanbul ignore next */ []));
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
@@ -3755,29 +3753,28 @@ class Select {
         this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
         this.direction = input('bottom', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
         this.optionSelect = output();
-        this.isOpen = false;
-        this.maxShownItems = 5;
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouch = () => { };
-        this._disabled = this.initialDisabled();
+        this._disabled.set(this.initialDisabled());
     }
     get selectedOption() {
         const options = this.options();
         if (options) {
-            return options.find((option) => option.value === this._value) || null;
+            return options.find((option) => option.value === this._value()) || null;
         }
         return null;
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     set value(value) {
-        if (value === this._value) {
+        if (value === this._value()) {
             return;
         }
-        this._value = value;
+        this._value.set(value);
         if (typeof this.onChange === 'function') {
-            this.onChange(this._value);
+            this.onChange(this._value());
         }
         this.optionSelect.emit(value);
     }
@@ -3794,27 +3791,24 @@ class Select {
             case ' ':
             case 'Enter':
                 event.preventDefault();
-                if (!this.isOpen) {
+                if (!this.isOpen()) {
                     this.openDropdown();
                 }
                 else {
-                    // Let the dropdown menu handle navigation
                     this.handleDropdownKeyDown(event);
                 }
                 break;
             case 'Escape':
-                if (this.isOpen) {
+                if (this.isOpen()) {
                     event.preventDefault();
                     this.closeDropdown();
                 }
                 break;
             case 'Tab':
-                if (this.isOpen) {
+                if (this.isOpen()) {
                     event.preventDefault();
                     this.closeDropdown();
-                    // Focus will move to next focusable element naturally
                 }
-                // Allow default tab behavior when dropdown is closed
                 break;
         }
     }
@@ -3824,7 +3818,7 @@ class Select {
      * Не нужно вызывать этот метод, чтобы задать значение во вьюшке. Вместо него надо использовать `setValue`.
      */
     writeValue(value) {
-        this._value = value;
+        this._value.set(value);
         this.optionSelect.emit(value);
     }
     /**
@@ -3848,24 +3842,21 @@ class Select {
         if (this.disabled) {
             return;
         }
-        if (this.isOpen === true) {
+        if (this.isOpen()) {
             this.closeDropdown();
         }
         else {
-            this.isOpen = true;
+            this.isOpen.set(true);
         }
     }
     closeDropdown() {
-        this.isOpen = false;
+        this.isOpen.set(false);
     }
     handleClickOutside() {
-        if (this.isOpen) {
+        if (this.isOpen()) {
             this.closeDropdown();
         }
     }
-    ngAfterViewInit() {
-        this._cdr.detectChanges();
-    }
     handleDropdownKeyDown(event) {
         // Forward keyboard events to the dropdown menu
         const dropdownMenuRef = this.dropdownMenuRef();
@@ -3880,11 +3871,11 @@ class Select {
                 useExisting: forwardRef(() => Select),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownMenuRef", first: true, predicate: DropdownMenu, descendants: true, isSignal: true }], hostDirectives: [{ directive: ClickOutsideDirective, outputs: ["clickOutside", "clickOutside"] }], ngImport: i0, template: "<div\n  class=\"aeb-select__selected-item\"\n  [class.open]=\"isOpen\"\n  [class.error]=\"hasError()\"\n  [attr.tabindex]=\"disabled ? -1 : 0\"\n  [attr.role]=\"'combobox'\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-label]=\"label()\"\n  (click)=\"!disabled && openDropdown()\"\n>\n  <label\n    class=\"aeb-select__label\"\n    [class.float]=\"selectedOption\"\n    [class.placeholder]=\"!selectedOption\"\n  >\n    {{ label() }}\n  </label>\n\n  @if (selectedOption) {\n  <div class=\"aeb-select__selected-text\">{{ selectedOption.label }}</div>\n  }\n</div>\n\n<div class=\"aeb-select__icon\" [class.open]=\"isOpen\" [class.disabled]=\"disabled\">\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M8 10L11.9293 13.9293C11.9683 13.9683 12.0317 13.9683 12.0707 13.9293L16 10\"\n      stroke=\"#1F2632\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n\n<aeb-dropdown-menu\n  [options]=\"options()\"\n  [direction]=\"direction()\"\n  [isOpen]=\"isOpen\"\n  [selectedOption]=\"selectedOption\"\n  (optionSelect)=\"setValue($event)\"\n></aeb-dropdown-menu>\n", styles: [".aeb-select{position:relative;display:flex;width:100%;min-width:262px;font-size:16px;color:var(--c-t-primary);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-select.disabled{cursor:default;pointer-events:none;color:var(--c-t-secondary)}.aeb-select__selected-item{display:flex;align-items:center;width:100%;height:54px;padding:0 52px 0 14px;background:var(--c-bg-surface-medium);border-radius:12px;border:1px solid transparent;position:relative}.aeb-select__selected-item:focus{outline:none;border-color:var(--c-btn-p-default)}.aeb-select__selected-item:hover:not(.disabled){background-color:var(--c-bg-surface)}.aeb-select__selected-item.open{border-color:var(--c-btn-p-default);background-color:var(--c-bg-default)}.aeb-select__selected-item.error{background:var(--c-btn-ws-pressed);border-color:var(--c-btn-ws-pressed)}.aeb-select__selected-item.error:hover{background-color:var(--c-btn-ws-default);border-color:var(--c-btn-ws-default)}.aeb-select__selected-item.error.open{background-color:var(--c-bg-default);border-color:var(--c-btn-w-default)}.aeb-select__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;bottom:8px;left:16px;right:52px}.aeb-select__label{font-size:12px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.aeb-select__label.float{position:absolute;left:16px;top:8px;width:calc(100% - 68px)}.aeb-select__label.placeholder{color:var(--c-t-secondary);top:18px;font-size:16px;font-weight:300px;line-height:20px}.aeb-select__icon{position:absolute;top:16px;right:16px;width:24px;height:24px;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.aeb-select__icon.disabled svg path{stroke:var(--c-i-secondary)}.aeb-select__icon.open{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: DropdownMenu, selector: "aeb-dropdown-menu", inputs: ["isOpen", "direction", "maxShownOptions", "optionSize", "options", "selectedOption"], outputs: ["outsideClick", "optionSelect"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "dropdownMenuRef", first: true, predicate: DropdownMenu, descendants: true, isSignal: true }], hostDirectives: [{ directive: ClickOutsideDirective, outputs: ["clickOutside", "clickOutside"] }], ngImport: i0, template: "<div\n  class=\"aeb-select__selected-item\"\n  [class.open]=\"isOpen()\"\n  [class.error]=\"hasError()\"\n  [attr.tabindex]=\"disabled ? -1 : 0\"\n  [attr.role]=\"'combobox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-label]=\"label()\"\n  (click)=\"!disabled && openDropdown()\"\n>\n  <label\n    class=\"aeb-select__label\"\n    [class.float]=\"selectedOption\"\n    [class.placeholder]=\"!selectedOption\"\n  >\n    {{ label() }}\n  </label>\n\n  @if (selectedOption) {\n  <div class=\"aeb-select__selected-text\">{{ selectedOption.label }}</div>\n  }\n</div>\n\n<div class=\"aeb-select__icon\" [class.open]=\"isOpen()\" [class.disabled]=\"disabled\">\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M8 10L11.9293 13.9293C11.9683 13.9683 12.0317 13.9683 12.0707 13.9293L16 10\"\n      stroke=\"#1F2632\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n\n<aeb-dropdown-menu\n  [options]=\"options()\"\n  [direction]=\"direction()\"\n  [isOpen]=\"isOpen()\"\n  [selectedOption]=\"selectedOption\"\n  (optionSelect)=\"setValue($event)\"\n></aeb-dropdown-menu>\n", styles: [".aeb-select{position:relative;display:flex;width:100%;min-width:262px;font-size:16px;color:var(--c-t-primary);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-select.disabled{cursor:default;pointer-events:none;color:var(--c-t-secondary)}.aeb-select__selected-item{display:flex;align-items:center;width:100%;height:54px;padding:0 52px 0 14px;background:var(--c-bg-surface-medium);border-radius:12px;border:1px solid transparent;position:relative}.aeb-select__selected-item:focus{outline:none;border-color:var(--c-btn-p-default)}.aeb-select__selected-item:hover:not(.disabled){background-color:var(--c-bg-surface)}.aeb-select__selected-item.open{border-color:var(--c-btn-p-default);background-color:var(--c-bg-default)}.aeb-select__selected-item.error{background:var(--c-btn-ws-pressed);border-color:var(--c-btn-ws-pressed)}.aeb-select__selected-item.error:hover{background-color:var(--c-btn-ws-default);border-color:var(--c-btn-ws-default)}.aeb-select__selected-item.error.open{background-color:var(--c-bg-default);border-color:var(--c-btn-w-default)}.aeb-select__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;bottom:8px;left:16px;right:52px}.aeb-select__label{font-size:12px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.aeb-select__label.float{position:absolute;left:16px;top:8px;width:calc(100% - 68px)}.aeb-select__label.placeholder{color:var(--c-t-secondary);top:18px;font-size:16px;font-weight:300px;line-height:20px}.aeb-select__icon{position:absolute;top:16px;right:16px;width:24px;height:24px;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.aeb-select__icon.disabled svg path{stroke:var(--c-i-secondary)}.aeb-select__icon.open{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: DropdownMenu, selector: "aeb-dropdown-menu", inputs: ["isOpen", "direction", "maxShownOptions", "optionSize", "options", "selectedOption"], outputs: ["outsideClick", "optionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-select', encapsulation: ViewEncapsulation.None, hostDirectives: [
+            args: [{ selector: 'aeb-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: ClickOutsideDirective,
                             outputs: ['clickOutside']
@@ -3900,7 +3891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[class.disabled]': 'disabled',
                         '(clickOutside)': 'clickOutside()',
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "<div\n  class=\"aeb-select__selected-item\"\n  [class.open]=\"isOpen\"\n  [class.error]=\"hasError()\"\n  [attr.tabindex]=\"disabled ? -1 : 0\"\n  [attr.role]=\"'combobox'\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-label]=\"label()\"\n  (click)=\"!disabled && openDropdown()\"\n>\n  <label\n    class=\"aeb-select__label\"\n    [class.float]=\"selectedOption\"\n    [class.placeholder]=\"!selectedOption\"\n  >\n    {{ label() }}\n  </label>\n\n  @if (selectedOption) {\n  <div class=\"aeb-select__selected-text\">{{ selectedOption.label }}</div>\n  }\n</div>\n\n<div class=\"aeb-select__icon\" [class.open]=\"isOpen\" [class.disabled]=\"disabled\">\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M8 10L11.9293 13.9293C11.9683 13.9683 12.0317 13.9683 12.0707 13.9293L16 10\"\n      stroke=\"#1F2632\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n\n<aeb-dropdown-menu\n  [options]=\"options()\"\n  [direction]=\"direction()\"\n  [isOpen]=\"isOpen\"\n  [selectedOption]=\"selectedOption\"\n  (optionSelect)=\"setValue($event)\"\n></aeb-dropdown-menu>\n", styles: [".aeb-select{position:relative;display:flex;width:100%;min-width:262px;font-size:16px;color:var(--c-t-primary);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-select.disabled{cursor:default;pointer-events:none;color:var(--c-t-secondary)}.aeb-select__selected-item{display:flex;align-items:center;width:100%;height:54px;padding:0 52px 0 14px;background:var(--c-bg-surface-medium);border-radius:12px;border:1px solid transparent;position:relative}.aeb-select__selected-item:focus{outline:none;border-color:var(--c-btn-p-default)}.aeb-select__selected-item:hover:not(.disabled){background-color:var(--c-bg-surface)}.aeb-select__selected-item.open{border-color:var(--c-btn-p-default);background-color:var(--c-bg-default)}.aeb-select__selected-item.error{background:var(--c-btn-ws-pressed);border-color:var(--c-btn-ws-pressed)}.aeb-select__selected-item.error:hover{background-color:var(--c-btn-ws-default);border-color:var(--c-btn-ws-default)}.aeb-select__selected-item.error.open{background-color:var(--c-bg-default);border-color:var(--c-btn-w-default)}.aeb-select__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;bottom:8px;left:16px;right:52px}.aeb-select__label{font-size:12px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.aeb-select__label.float{position:absolute;left:16px;top:8px;width:calc(100% - 68px)}.aeb-select__label.placeholder{color:var(--c-t-secondary);top:18px;font-size:16px;font-weight:300px;line-height:20px}.aeb-select__icon{position:absolute;top:16px;right:16px;width:24px;height:24px;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.aeb-select__icon.disabled svg path{stroke:var(--c-i-secondary)}.aeb-select__icon.open{transform:rotate(180deg)}\n"] }]
+                    }, template: "<div\n  class=\"aeb-select__selected-item\"\n  [class.open]=\"isOpen()\"\n  [class.error]=\"hasError()\"\n  [attr.tabindex]=\"disabled ? -1 : 0\"\n  [attr.role]=\"'combobox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-label]=\"label()\"\n  (click)=\"!disabled && openDropdown()\"\n>\n  <label\n    class=\"aeb-select__label\"\n    [class.float]=\"selectedOption\"\n    [class.placeholder]=\"!selectedOption\"\n  >\n    {{ label() }}\n  </label>\n\n  @if (selectedOption) {\n  <div class=\"aeb-select__selected-text\">{{ selectedOption.label }}</div>\n  }\n</div>\n\n<div class=\"aeb-select__icon\" [class.open]=\"isOpen()\" [class.disabled]=\"disabled\">\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M8 10L11.9293 13.9293C11.9683 13.9683 12.0317 13.9683 12.0707 13.9293L16 10\"\n      stroke=\"#1F2632\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n\n<aeb-dropdown-menu\n  [options]=\"options()\"\n  [direction]=\"direction()\"\n  [isOpen]=\"isOpen()\"\n  [selectedOption]=\"selectedOption\"\n  (optionSelect)=\"setValue($event)\"\n></aeb-dropdown-menu>\n", styles: [".aeb-select{position:relative;display:flex;width:100%;min-width:262px;font-size:16px;color:var(--c-t-primary);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:300}.aeb-select.disabled{cursor:default;pointer-events:none;color:var(--c-t-secondary)}.aeb-select__selected-item{display:flex;align-items:center;width:100%;height:54px;padding:0 52px 0 14px;background:var(--c-bg-surface-medium);border-radius:12px;border:1px solid transparent;position:relative}.aeb-select__selected-item:focus{outline:none;border-color:var(--c-btn-p-default)}.aeb-select__selected-item:hover:not(.disabled){background-color:var(--c-bg-surface)}.aeb-select__selected-item.open{border-color:var(--c-btn-p-default);background-color:var(--c-bg-default)}.aeb-select__selected-item.error{background:var(--c-btn-ws-pressed);border-color:var(--c-btn-ws-pressed)}.aeb-select__selected-item.error:hover{background-color:var(--c-btn-ws-default);border-color:var(--c-btn-ws-default)}.aeb-select__selected-item.error.open{background-color:var(--c-bg-default);border-color:var(--c-btn-w-default)}.aeb-select__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;bottom:8px;left:16px;right:52px}.aeb-select__label{font-size:12px;color:var(--c-t-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.aeb-select__label.float{position:absolute;left:16px;top:8px;width:calc(100% - 68px)}.aeb-select__label.placeholder{color:var(--c-t-secondary);top:18px;font-size:16px;font-weight:300px;line-height:20px}.aeb-select__icon{position:absolute;top:16px;right:16px;width:24px;height:24px;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.aeb-select__icon.disabled svg path{stroke:var(--c-i-secondary)}.aeb-select__icon.open{transform:rotate(180deg)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { initialDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialDisabled", required: false }] }], dropdownMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownMenu), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], optionSelect: [{ type: i0.Output, args: ["optionSelect"] }] } });
 class SelectModule {
@@ -4066,11 +4057,11 @@ class PopUp {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PopUp, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: PopUp, isStandalone: true, selector: "aeb-pop-up", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popUp", first: true, predicate: ["popUp"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-pop-up\" #popUp>\n  <div class=\"aeb-pop-up__header\">\n    <div class=\"aeb-pop-up__heading\">{{ header() }}</div>\n    <div class=\"aeb-pop-up__close-icon\" (click)=\"hidePopUp()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63086 5.63074L18.3693 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3691 5.63074L5.63065 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"aeb-pop-up__container\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-pop-up{position:fixed;z-index:var(--z-popover);box-sizing:border-box;min-width:360px;padding:20px 16px;pointer-events:none;cursor:default;background-color:var(--color-mono-0);border-radius:var(--border-medium-rounded);box-shadow:0 3px 15px #00000040;opacity:var(--100-total);transition:opacity,.2s}.aeb-pop-up__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:15px;border-bottom:1px solid var(--color-mono-100)}.aeb-pop-up__heading{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.aeb-pop-up__close-icon{position:relative;top:1px;cursor:pointer}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: PopUp, isStandalone: true, selector: "aeb-pop-up", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popUp", first: true, predicate: ["popUp"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-pop-up\" #popUp>\n  <div class=\"aeb-pop-up__header\">\n    <div class=\"aeb-pop-up__heading\">{{ header() }}</div>\n    <div class=\"aeb-pop-up__close-icon\" (click)=\"hidePopUp()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63086 5.63074L18.3693 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3691 5.63074L5.63065 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"aeb-pop-up__container\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-pop-up{position:fixed;z-index:var(--z-popover);box-sizing:border-box;min-width:360px;padding:20px 16px;pointer-events:none;cursor:default;background-color:var(--color-mono-0);border-radius:var(--border-medium-rounded);box-shadow:0 3px 15px #00000040;opacity:var(--100-total);transition:opacity,.2s}.aeb-pop-up__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:15px;border-bottom:1px solid var(--color-mono-100)}.aeb-pop-up__heading{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.aeb-pop-up__close-icon{position:relative;top:1px;cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PopUp, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-pop-up', encapsulation: ViewEncapsulation.None, template: "<div class=\"aeb-pop-up\" #popUp>\n  <div class=\"aeb-pop-up__header\">\n    <div class=\"aeb-pop-up__heading\">{{ header() }}</div>\n    <div class=\"aeb-pop-up__close-icon\" (click)=\"hidePopUp()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63086 5.63074L18.3693 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3691 5.63074L5.63065 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"aeb-pop-up__container\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-pop-up{position:fixed;z-index:var(--z-popover);box-sizing:border-box;min-width:360px;padding:20px 16px;pointer-events:none;cursor:default;background-color:var(--color-mono-0);border-radius:var(--border-medium-rounded);box-shadow:0 3px 15px #00000040;opacity:var(--100-total);transition:opacity,.2s}.aeb-pop-up__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:15px;border-bottom:1px solid var(--color-mono-100)}.aeb-pop-up__heading{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.aeb-pop-up__close-icon{position:relative;top:1px;cursor:pointer}\n"] }]
+            args: [{ selector: 'aeb-pop-up', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"aeb-pop-up\" #popUp>\n  <div class=\"aeb-pop-up__header\">\n    <div class=\"aeb-pop-up__heading\">{{ header() }}</div>\n    <div class=\"aeb-pop-up__close-icon\" (click)=\"hidePopUp()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63086 5.63074L18.3693 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3691 5.63074L5.63065 18.3692\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"aeb-pop-up__container\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-pop-up{position:fixed;z-index:var(--z-popover);box-sizing:border-box;min-width:360px;padding:20px 16px;pointer-events:none;cursor:default;background-color:var(--color-mono-0);border-radius:var(--border-medium-rounded);box-shadow:0 3px 15px #00000040;opacity:var(--100-total);transition:opacity,.2s}.aeb-pop-up__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:15px;border-bottom:1px solid var(--color-mono-100)}.aeb-pop-up__heading{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.aeb-pop-up__close-icon{position:relative;top:1px;cursor:pointer}\n"] }]
         }], propDecorators: { popUp: [{ type: i0.ViewChild, args: ['popUp', { isSignal: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }] } });
 class PopUpDirective {
@@ -4211,11 +4202,11 @@ class RadioButtons {
                 useExisting: forwardRef(() => RadioButtons),
                 multi: true
             }
-        ], ngImport: i0, template: "<div\n  class=\"aeb-radio-buttons\"\n  [ngClass]=\"{\n    'aeb-radio-buttons--disabled': disabled,\n    'aeb-radio-buttons--error': hasError()\n  }\"\n>\n  @if (header()) {\n  <div class=\"aeb-radio-buttons__header\">{{ header() }}</div>\n  }\n  <div\n    class=\"aeb-radio-buttons__items\"\n    [ngClass]=\"{ horizontal: horizontal() }\"\n  >\n    @for (option of options(); track option) {\n    <div class=\"aeb-radio-buttons__item\" (click)=\"writeValue(option.value)\">\n      <div class=\"aeb-radio-buttons__circle-container\">\n        <div\n          class=\"aeb-radio-buttons__circle\"\n          [ngClass]=\"{\n              'aeb-radio-buttons__circle--active': value === option.value\n            }\"\n        ></div>\n      </div>\n      <span class=\"aeb-radio-buttons__label\"> {{ option.label }} </span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".aeb-radio-buttons{display:flex;flex-direction:column;align-items:flex-start;color:var(--color-mono-900)}.aeb-radio-buttons--disabled{color:var(--color-blue-100);pointer-events:none}.aeb-radio-buttons--disabled .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-blue-100)}.aeb-radio-buttons--disabled .aeb-radio-buttons__circle:after{background-color:var(--color-blue-100)}.aeb-radio-buttons--error{color:var(--color-red-500)}.aeb-radio-buttons--error .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-red-500)}.aeb-radio-buttons__header{margin-bottom:16px;font-size:var(--font-size-s);font-weight:500;line-height:20px;color:var(--color-mono-300)}.aeb-radio-buttons__items{display:inline-flex;flex-direction:column}.aeb-radio-buttons__items.horizontal{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}.aeb-radio-buttons__items.horizontal .aeb-radio-buttons__item{margin-bottom:0}.aeb-radio-buttons__item{display:inline-flex;cursor:pointer}.aeb-radio-buttons__item:not(:last-child){margin-bottom:16px}.aeb-radio-buttons__item:hover .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-blue-600)}.aeb-radio-buttons__item:hover .aeb-radio-buttons__circle:after{background-color:var(--color-blue-600)}.aeb-radio-buttons__item:active .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-blue-700)}.aeb-radio-buttons__item:active .aeb-radio-buttons__circle:after{background-color:var(--color-blue-700)}.aeb-radio-buttons__label{display:block;line-height:20px;font-size:var(--font-size-s);margin-top:2px}.aeb-radio-buttons__circle{position:relative;width:20px;height:20px;margin-right:12px;border:var(--border-skinny) solid var(--color-blue-500);border-radius:50%}.aeb-radio-buttons__circle--active:after{position:absolute;top:calc(50% - 6px);left:calc(50% - 6px);width:12px;height:12px;content:\"\";background-color:var(--color-blue-500);border-radius:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<div\n  class=\"aeb-radio-buttons\"\n  [ngClass]=\"{\n    'aeb-radio-buttons--disabled': disabled,\n    'aeb-radio-buttons--error': hasError()\n  }\"\n>\n  @if (header()) {\n  <div class=\"aeb-radio-buttons__header\">{{ header() }}</div>\n  }\n  <div\n    class=\"aeb-radio-buttons__items\"\n    [ngClass]=\"{ horizontal: horizontal() }\"\n  >\n    @for (option of options(); track option) {\n    <div class=\"aeb-radio-buttons__item\" (click)=\"writeValue(option.value)\">\n      <div class=\"aeb-radio-buttons__circle-container\">\n        <div\n          class=\"aeb-radio-buttons__circle\"\n          [ngClass]=\"{\n              'aeb-radio-buttons__circle--active': value === option.value\n            }\"\n        ></div>\n      </div>\n      <span class=\"aeb-radio-buttons__label\"> {{ option.label }} </span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".aeb-radio-buttons{display:flex;flex-direction:column;align-items:flex-start;color:var(--color-mono-900)}.aeb-radio-buttons--disabled{color:var(--color-blue-100);pointer-events:none}.aeb-radio-buttons--disabled .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-blue-100)}.aeb-radio-buttons--disabled .aeb-radio-buttons__circle:after{background-color:var(--color-blue-100)}.aeb-radio-buttons--error{color:var(--color-red-500)}.aeb-radio-buttons--error .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-red-500)}.aeb-radio-buttons__header{margin-bottom:16px;font-size:var(--font-size-s);font-weight:500;line-height:20px;color:var(--color-mono-300)}.aeb-radio-buttons__items{display:inline-flex;flex-direction:column}.aeb-radio-buttons__items.horizontal{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}.aeb-radio-buttons__items.horizontal .aeb-radio-buttons__item{margin-bottom:0}.aeb-radio-buttons__item{display:inline-flex;cursor:pointer}.aeb-radio-buttons__item:not(:last-child){margin-bottom:16px}.aeb-radio-buttons__item:hover .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-blue-600)}.aeb-radio-buttons__item:hover .aeb-radio-buttons__circle:after{background-color:var(--color-blue-600)}.aeb-radio-buttons__item:active .aeb-radio-buttons__circle{border:var(--border-skinny) solid var(--color-blue-700)}.aeb-radio-buttons__item:active .aeb-radio-buttons__circle:after{background-color:var(--color-blue-700)}.aeb-radio-buttons__label{display:block;line-height:20px;font-size:var(--font-size-s);margin-top:2px}.aeb-radio-buttons__circle{position:relative;width:20px;height:20px;margin-right:12px;border:var(--border-skinny) solid var(--color-blue-500);border-radius:50%}.aeb-radio-buttons__circle--active:after{position:absolute;top:calc(50% - 6px);left:calc(50% - 6px);width:12px;height:12px;content:\"\";background-color:var(--color-blue-500);border-radius:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: RadioButtons, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-radio-buttons', encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'aeb-radio-buttons', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RadioButtons),
@@ -4294,11 +4285,11 @@ class Search {
         this.inputChange.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Search, isStandalone: true, selector: "aeb-search", inputs: { examples: { classPropertyName: "examples", publicName: "examples", isSignal: true, isRequired: false, transformFunction: null }, initialOptions: { classPropertyName: "initialOptions", publicName: "initialOptions", isSignal: true, isRequired: false, transformFunction: null }, withoutBg: { classPropertyName: "withoutBg", publicName: "withoutBg", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div\n  class=\"aeb-search\"\n  [ngClass]=\"{\n    'aeb-search--plate': !withoutBg()\n  }\"\n>\n  <div class=\"aeb-search__input-wrapper\">\n    <div class=\"aeb-search__search-icon\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"#2F88F0\" stroke-width=\"2\" />\n        <path\n          d=\"M15 15.5L19.5 20\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    <input\n      class=\"aeb-search__input\"\n      clickOutside\n      [placeholder]=\"placeholder()\"\n      (input)=\"inputHandler($event)\"\n      (clickOutside)=\"blurHandler()\"\n      [value]=\"value\"\n      (focus)=\"focusHandler()\"\n      [ngClass]=\"{\n        'aeb-search__input--expanded': onShowOptions && options.length\n      }\"\n    />\n    @if (onShowOptions && options.length) {\n    <div class=\"aeb-search__options\">\n      @for (option of options; track option) {\n      <div\n        class=\"aeb-search__option-wrapper\"\n        (click)=\"selectHandler(option.value)\"\n      >\n        <div class=\"aeb-search__option\">\n          <div class=\"aeb-search__option-img\">\n            @if (option.image) {\n            <img [src]=\"option.image\" [alt]=\"option.description ?? 'option'\" />\n            } @else { {{ option.value[0].toUpperCase() }} }\n          </div>\n          <div class=\"aeb-search__option-content\">\n            <div\n              class=\"aeb-search__option-value\"\n              [innerHTML]=\"option.value | highlight: value\"\n            ></div>\n            <div class=\"aeb-search__option-desc\">{{ option.description }}</div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    } @if (!withoutBg()) { @if (examples().length) {\n    <div class=\"aeb-search__examples\">\n      \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440: @for (example of examples(); track example; let i = $index) {\n      <span class=\"aeb-search__example\" (click)=\"inputExample(example)\">\n        {{ example }} @if (i !== examples().length - 1) {\n        <span>,&nbsp;</span>\n        }\n      </span>\n      }\n    </div>\n    } } @if (value) {\n    <div class=\"aeb-search__close-icon\" (click)=\"clearInput()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63074 5.63086L18.3692 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3693 5.63086L5.63077 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".aeb-search{display:flex}.aeb-search--plate{align-items:center;justify-content:center;height:205px;padding:0 10px;background-image:url(/src/assets/images/background-search.png);background-position:center}.aeb-search__input-wrapper{position:relative;width:1200px}.aeb-search__input{box-sizing:border-box;width:100%;height:64px;padding:20px 68px;font-size:var(--font-size-md);border:var(--no-border);border-radius:14px;outline:none}.aeb-search__input::placeholder{color:var(--color-mono-300)}@media screen and (max-width:420px){.aeb-search__input{padding:20px 38px;font-size:var(--font-size-s)}}.aeb-search__input--expanded{border-radius:14px 14px 0 0}.aeb-search__search-icon{position:absolute;top:20px;left:23px}@media screen and (max-width:420px){.aeb-search__search-icon{left:8px}}.aeb-search__close-icon{position:absolute;top:20px;right:25px;cursor:pointer}@media screen and (max-width:420px){.aeb-search__close-icon{right:10px}}.aeb-search__examples{margin-top:12px;font-size:var(--font-size-xs);color:rgba(var(--color-mono-clear),70%)}.aeb-search__example{color:var(--color-mono-0);cursor:pointer}.aeb-search__options{position:absolute;top:64px;box-sizing:border-box;width:100%;background-color:var(--color-mono-0);border-radius:0 0 14px 14px;box-shadow:var(--light-theme-shadows-shadow-smooth-high)}.aeb-search__option-wrapper{box-sizing:border-box;padding:0 20px;cursor:pointer}.aeb-search__option-wrapper:hover{background-color:var(--color-mono-50)}.aeb-search__option-wrapper:last-child{border-radius:0 0 14px 14px}.aeb-search__option{box-sizing:border-box;display:flex;align-items:center;padding:24px 0;overflow:hidden;border-bottom:1px solid var(--color-mono-50)}.aeb-search__option-img{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:16px;font-size:var(--font-size-l);color:var(--color-mono-0);background-color:var(--color-blue-50);border-radius:50%}.aeb-search__option-img img{width:100%;height:100%;border-radius:50%}.aeb-search__option-value{margin-bottom:4px;font-size:var(--font-size-s);color:var(--color-mono-900)}.aeb-search__option-desc{font-size:var(--font-size-xs);color:var(--color-mono-300)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Search, isStandalone: true, selector: "aeb-search", inputs: { examples: { classPropertyName: "examples", publicName: "examples", isSignal: true, isRequired: false, transformFunction: null }, initialOptions: { classPropertyName: "initialOptions", publicName: "initialOptions", isSignal: true, isRequired: false, transformFunction: null }, withoutBg: { classPropertyName: "withoutBg", publicName: "withoutBg", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div\n  class=\"aeb-search\"\n  [ngClass]=\"{\n    'aeb-search--plate': !withoutBg()\n  }\"\n>\n  <div class=\"aeb-search__input-wrapper\">\n    <div class=\"aeb-search__search-icon\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"#2F88F0\" stroke-width=\"2\" />\n        <path\n          d=\"M15 15.5L19.5 20\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    <input\n      class=\"aeb-search__input\"\n      clickOutside\n      [placeholder]=\"placeholder()\"\n      (input)=\"inputHandler($event)\"\n      (clickOutside)=\"blurHandler()\"\n      [value]=\"value\"\n      (focus)=\"focusHandler()\"\n      [ngClass]=\"{\n        'aeb-search__input--expanded': onShowOptions && options.length\n      }\"\n    />\n    @if (onShowOptions && options.length) {\n    <div class=\"aeb-search__options\">\n      @for (option of options; track option) {\n      <div\n        class=\"aeb-search__option-wrapper\"\n        (click)=\"selectHandler(option.value)\"\n      >\n        <div class=\"aeb-search__option\">\n          <div class=\"aeb-search__option-img\">\n            @if (option.image) {\n            <img [src]=\"option.image\" [alt]=\"option.description ?? 'option'\" />\n            } @else { {{ option.value[0].toUpperCase() }} }\n          </div>\n          <div class=\"aeb-search__option-content\">\n            <div\n              class=\"aeb-search__option-value\"\n              [innerHTML]=\"option.value | highlight: value\"\n            ></div>\n            <div class=\"aeb-search__option-desc\">{{ option.description }}</div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    } @if (!withoutBg()) { @if (examples().length) {\n    <div class=\"aeb-search__examples\">\n      \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440: @for (example of examples(); track example; let i = $index) {\n      <span class=\"aeb-search__example\" (click)=\"inputExample(example)\">\n        {{ example }} @if (i !== examples().length - 1) {\n        <span>,&nbsp;</span>\n        }\n      </span>\n      }\n    </div>\n    } } @if (value) {\n    <div class=\"aeb-search__close-icon\" (click)=\"clearInput()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63074 5.63086L18.3692 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3693 5.63086L5.63077 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".aeb-search{display:flex}.aeb-search--plate{align-items:center;justify-content:center;height:205px;padding:0 10px;background-image:url(/src/assets/images/background-search.png);background-position:center}.aeb-search__input-wrapper{position:relative;width:1200px}.aeb-search__input{box-sizing:border-box;width:100%;height:64px;padding:20px 68px;font-size:var(--font-size-md);border:var(--no-border);border-radius:14px;outline:none}.aeb-search__input::placeholder{color:var(--color-mono-300)}@media screen and (max-width:420px){.aeb-search__input{padding:20px 38px;font-size:var(--font-size-s)}}.aeb-search__input--expanded{border-radius:14px 14px 0 0}.aeb-search__search-icon{position:absolute;top:20px;left:23px}@media screen and (max-width:420px){.aeb-search__search-icon{left:8px}}.aeb-search__close-icon{position:absolute;top:20px;right:25px;cursor:pointer}@media screen and (max-width:420px){.aeb-search__close-icon{right:10px}}.aeb-search__examples{margin-top:12px;font-size:var(--font-size-xs);color:rgba(var(--color-mono-clear),70%)}.aeb-search__example{color:var(--color-mono-0);cursor:pointer}.aeb-search__options{position:absolute;top:64px;box-sizing:border-box;width:100%;background-color:var(--color-mono-0);border-radius:0 0 14px 14px;box-shadow:var(--light-theme-shadows-shadow-smooth-high)}.aeb-search__option-wrapper{box-sizing:border-box;padding:0 20px;cursor:pointer}.aeb-search__option-wrapper:hover{background-color:var(--color-mono-50)}.aeb-search__option-wrapper:last-child{border-radius:0 0 14px 14px}.aeb-search__option{box-sizing:border-box;display:flex;align-items:center;padding:24px 0;overflow:hidden;border-bottom:1px solid var(--color-mono-50)}.aeb-search__option-img{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:16px;font-size:var(--font-size-l);color:var(--color-mono-0);background-color:var(--color-blue-50);border-radius:50%}.aeb-search__option-img img{width:100%;height:100%;border-radius:50%}.aeb-search__option-value{margin-bottom:4px;font-size:var(--font-size-s);color:var(--color-mono-900)}.aeb-search__option-desc{font-size:var(--font-size-xs);color:var(--color-mono-300)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Search, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-search', encapsulation: ViewEncapsulation.None, imports: [NgClass, ClickOutsideDirective, HighlightPipe], template: "<div\n  class=\"aeb-search\"\n  [ngClass]=\"{\n    'aeb-search--plate': !withoutBg()\n  }\"\n>\n  <div class=\"aeb-search__input-wrapper\">\n    <div class=\"aeb-search__search-icon\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"#2F88F0\" stroke-width=\"2\" />\n        <path\n          d=\"M15 15.5L19.5 20\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    <input\n      class=\"aeb-search__input\"\n      clickOutside\n      [placeholder]=\"placeholder()\"\n      (input)=\"inputHandler($event)\"\n      (clickOutside)=\"blurHandler()\"\n      [value]=\"value\"\n      (focus)=\"focusHandler()\"\n      [ngClass]=\"{\n        'aeb-search__input--expanded': onShowOptions && options.length\n      }\"\n    />\n    @if (onShowOptions && options.length) {\n    <div class=\"aeb-search__options\">\n      @for (option of options; track option) {\n      <div\n        class=\"aeb-search__option-wrapper\"\n        (click)=\"selectHandler(option.value)\"\n      >\n        <div class=\"aeb-search__option\">\n          <div class=\"aeb-search__option-img\">\n            @if (option.image) {\n            <img [src]=\"option.image\" [alt]=\"option.description ?? 'option'\" />\n            } @else { {{ option.value[0].toUpperCase() }} }\n          </div>\n          <div class=\"aeb-search__option-content\">\n            <div\n              class=\"aeb-search__option-value\"\n              [innerHTML]=\"option.value | highlight: value\"\n            ></div>\n            <div class=\"aeb-search__option-desc\">{{ option.description }}</div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    } @if (!withoutBg()) { @if (examples().length) {\n    <div class=\"aeb-search__examples\">\n      \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440: @for (example of examples(); track example; let i = $index) {\n      <span class=\"aeb-search__example\" (click)=\"inputExample(example)\">\n        {{ example }} @if (i !== examples().length - 1) {\n        <span>,&nbsp;</span>\n        }\n      </span>\n      }\n    </div>\n    } } @if (value) {\n    <div class=\"aeb-search__close-icon\" (click)=\"clearInput()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63074 5.63086L18.3692 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3693 5.63086L5.63077 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".aeb-search{display:flex}.aeb-search--plate{align-items:center;justify-content:center;height:205px;padding:0 10px;background-image:url(/src/assets/images/background-search.png);background-position:center}.aeb-search__input-wrapper{position:relative;width:1200px}.aeb-search__input{box-sizing:border-box;width:100%;height:64px;padding:20px 68px;font-size:var(--font-size-md);border:var(--no-border);border-radius:14px;outline:none}.aeb-search__input::placeholder{color:var(--color-mono-300)}@media screen and (max-width:420px){.aeb-search__input{padding:20px 38px;font-size:var(--font-size-s)}}.aeb-search__input--expanded{border-radius:14px 14px 0 0}.aeb-search__search-icon{position:absolute;top:20px;left:23px}@media screen and (max-width:420px){.aeb-search__search-icon{left:8px}}.aeb-search__close-icon{position:absolute;top:20px;right:25px;cursor:pointer}@media screen and (max-width:420px){.aeb-search__close-icon{right:10px}}.aeb-search__examples{margin-top:12px;font-size:var(--font-size-xs);color:rgba(var(--color-mono-clear),70%)}.aeb-search__example{color:var(--color-mono-0);cursor:pointer}.aeb-search__options{position:absolute;top:64px;box-sizing:border-box;width:100%;background-color:var(--color-mono-0);border-radius:0 0 14px 14px;box-shadow:var(--light-theme-shadows-shadow-smooth-high)}.aeb-search__option-wrapper{box-sizing:border-box;padding:0 20px;cursor:pointer}.aeb-search__option-wrapper:hover{background-color:var(--color-mono-50)}.aeb-search__option-wrapper:last-child{border-radius:0 0 14px 14px}.aeb-search__option{box-sizing:border-box;display:flex;align-items:center;padding:24px 0;overflow:hidden;border-bottom:1px solid var(--color-mono-50)}.aeb-search__option-img{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:16px;font-size:var(--font-size-l);color:var(--color-mono-0);background-color:var(--color-blue-50);border-radius:50%}.aeb-search__option-img img{width:100%;height:100%;border-radius:50%}.aeb-search__option-value{margin-bottom:4px;font-size:var(--font-size-s);color:var(--color-mono-900)}.aeb-search__option-desc{font-size:var(--font-size-xs);color:var(--color-mono-300)}\n"] }]
+            args: [{ selector: 'aeb-search', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ClickOutsideDirective, HighlightPipe], template: "<div\n  class=\"aeb-search\"\n  [ngClass]=\"{\n    'aeb-search--plate': !withoutBg()\n  }\"\n>\n  <div class=\"aeb-search__input-wrapper\">\n    <div class=\"aeb-search__search-icon\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"#2F88F0\" stroke-width=\"2\" />\n        <path\n          d=\"M15 15.5L19.5 20\"\n          stroke=\"#2F88F0\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    <input\n      class=\"aeb-search__input\"\n      clickOutside\n      [placeholder]=\"placeholder()\"\n      (input)=\"inputHandler($event)\"\n      (clickOutside)=\"blurHandler()\"\n      [value]=\"value\"\n      (focus)=\"focusHandler()\"\n      [ngClass]=\"{\n        'aeb-search__input--expanded': onShowOptions && options.length\n      }\"\n    />\n    @if (onShowOptions && options.length) {\n    <div class=\"aeb-search__options\">\n      @for (option of options; track option) {\n      <div\n        class=\"aeb-search__option-wrapper\"\n        (click)=\"selectHandler(option.value)\"\n      >\n        <div class=\"aeb-search__option\">\n          <div class=\"aeb-search__option-img\">\n            @if (option.image) {\n            <img [src]=\"option.image\" [alt]=\"option.description ?? 'option'\" />\n            } @else { {{ option.value[0].toUpperCase() }} }\n          </div>\n          <div class=\"aeb-search__option-content\">\n            <div\n              class=\"aeb-search__option-value\"\n              [innerHTML]=\"option.value | highlight: value\"\n            ></div>\n            <div class=\"aeb-search__option-desc\">{{ option.description }}</div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    } @if (!withoutBg()) { @if (examples().length) {\n    <div class=\"aeb-search__examples\">\n      \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440: @for (example of examples(); track example; let i = $index) {\n      <span class=\"aeb-search__example\" (click)=\"inputExample(example)\">\n        {{ example }} @if (i !== examples().length - 1) {\n        <span>,&nbsp;</span>\n        }\n      </span>\n      }\n    </div>\n    } } @if (value) {\n    <div class=\"aeb-search__close-icon\" (click)=\"clearInput()\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5.63074 5.63086L18.3692 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M18.3693 5.63086L5.63077 18.3693\"\n          stroke=\"#27303E\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".aeb-search{display:flex}.aeb-search--plate{align-items:center;justify-content:center;height:205px;padding:0 10px;background-image:url(/src/assets/images/background-search.png);background-position:center}.aeb-search__input-wrapper{position:relative;width:1200px}.aeb-search__input{box-sizing:border-box;width:100%;height:64px;padding:20px 68px;font-size:var(--font-size-md);border:var(--no-border);border-radius:14px;outline:none}.aeb-search__input::placeholder{color:var(--color-mono-300)}@media screen and (max-width:420px){.aeb-search__input{padding:20px 38px;font-size:var(--font-size-s)}}.aeb-search__input--expanded{border-radius:14px 14px 0 0}.aeb-search__search-icon{position:absolute;top:20px;left:23px}@media screen and (max-width:420px){.aeb-search__search-icon{left:8px}}.aeb-search__close-icon{position:absolute;top:20px;right:25px;cursor:pointer}@media screen and (max-width:420px){.aeb-search__close-icon{right:10px}}.aeb-search__examples{margin-top:12px;font-size:var(--font-size-xs);color:rgba(var(--color-mono-clear),70%)}.aeb-search__example{color:var(--color-mono-0);cursor:pointer}.aeb-search__options{position:absolute;top:64px;box-sizing:border-box;width:100%;background-color:var(--color-mono-0);border-radius:0 0 14px 14px;box-shadow:var(--light-theme-shadows-shadow-smooth-high)}.aeb-search__option-wrapper{box-sizing:border-box;padding:0 20px;cursor:pointer}.aeb-search__option-wrapper:hover{background-color:var(--color-mono-50)}.aeb-search__option-wrapper:last-child{border-radius:0 0 14px 14px}.aeb-search__option{box-sizing:border-box;display:flex;align-items:center;padding:24px 0;overflow:hidden;border-bottom:1px solid var(--color-mono-50)}.aeb-search__option-img{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:16px;font-size:var(--font-size-l);color:var(--color-mono-0);background-color:var(--color-blue-50);border-radius:50%}.aeb-search__option-img img{width:100%;height:100%;border-radius:50%}.aeb-search__option-value{margin-bottom:4px;font-size:var(--font-size-s);color:var(--color-mono-900)}.aeb-search__option-desc{font-size:var(--font-size-xs);color:var(--color-mono-300)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { examples: [{ type: i0.Input, args: [{ isSignal: true, alias: "examples", required: false }] }], initialOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOptions", required: false }] }], withoutBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "withoutBg", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }] } });
 class SearchModule {
@@ -4324,11 +4315,11 @@ class Sidebar {
         this.toggleClick.emit(this.isOpen());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: Sidebar, isStandalone: true, selector: "aeb-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isRight: { classPropertyName: "isRight", publicName: "isRight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleClick: "toggleClick" }, host: { properties: { "class.aeb-sidebar--open": "isOpen()", "class.aeb-sidebar--right": "isRight()" }, classAttribute: "aeb-sidebar" }, ngImport: i0, template: "<div class=\"aeb-sidebar__items\">\n  <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n</div>\n\n<button\n  type=\"button\"\n  class=\"aeb-sidebar__toggle-icon\"\n  (click)=\"handleToggleSidebar()\"\n>\n  <svg\n    width=\"28\"\n    height=\"28\"\n    viewBox=\"0 0 28 28\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M15.5359 6.30688L21.7602 13.3677C21.9199 13.5493 22 13.7653 22 14C22 14.2106 21.9341 14.4606 21.7515 14.6422L15.5318 21.6978C15.3721 21.8793 15.1534 22 14.8856 22C14.6176 22 14.399 21.8794 14.2394 21.6977C13.927 21.3423 13.9119 20.7814 14.244 20.4287L19.9121 14L14.2398 7.56653C13.9272 7.21101 13.9119 6.64939 14.2444 6.29664C14.4095 6.11179 14.6412 6 14.8921 6C15.1445 6 15.3769 6.1135 15.5359 6.30688Z\"\n      fill=\"#9CA8AF\"\n    />\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.53586 6.30688L13.7602 13.3677C13.9199 13.5493 14 13.7653 14 14C14 14.2106 13.9341 14.4606 13.7515 14.6422L7.53175 21.6978C7.37212 21.8793 7.15341 22 6.88558 22C6.61765 22 6.39904 21.8794 6.2394 21.6977C5.92703 21.3423 5.91188 20.7814 6.24398 20.4287L11.9121 14L6.23978 7.56653C5.92725 7.21101 5.91186 6.64939 6.24438 6.29664C6.4095 6.11179 6.64121 6 6.89212 6C7.14455 6 7.37688 6.1135 7.53586 6.30688Z\"\n      fill=\"#9CA8AF\"\n    />\n  </svg>\n</button>\n\n<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n", styles: [".aeb-sidebar{position:fixed;top:80px;left:0;z-index:var(--z-fixed);display:flex;flex-direction:column;justify-content:space-between;width:80px;height:calc(100vh - 80px);color:var(--c-t-primary);background-color:var(--c-bg-light);box-sizing:border-box;border-right:1px solid var(--c-bor-default);transition:width .23s ease}.aeb-sidebar--open{width:260px}.aeb-sidebar--open .aeb-sidebar__item-label{max-width:180px;opacity:1;margin-left:18px}.aeb-sidebar--open .aeb-sidebar__toggle-icon>svg{transform:scaleX(-1)}.aeb-sidebar--open .aeb-sidebar__toggle-icon:hover>svg,.aeb-sidebar--open .aeb-sidebar__toggle-icon:active>svg{transform:translate(-2px) scaleX(-1)}.aeb-sidebar--right{right:0;left:auto;border-right:none;border-left:1px solid var(--c-bor-default)}.aeb-sidebar--right .aeb-sidebar__toggle-icon{transform:scaleX(-1)}.aeb-sidebar--right .aeb-sidebar__item-label{margin-left:0}.aeb-sidebar--right .aeb-sidebar__item{justify-content:flex-end}.aeb-sidebar--right.open .aeb-sidebar__item-label{margin-left:0;margin-right:18px}.aeb-sidebar__items{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;padding:14px 0 0}.aeb-sidebar__item{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:100%;padding:14px 28px;text-decoration:none;-webkit-user-select:none;user-select:none}.aeb-sidebar__item-icon{display:flex;flex:0 0 auto;width:24px;height:24px;opacity:.8}.aeb-sidebar__item-icon img{object-fit:contain;width:100%}.aeb-sidebar__item-label{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;margin-left:0;font-size:16px;color:var(--c-t-primary);transition:max-width .23s ease,opacity .23s ease,margin-left .23s ease}.aeb-sidebar__item:hover{text-decoration:none;background-color:var(--c-bor-default)}.aeb-sidebar__item:hover>a{text-decoration:none}.aeb-sidebar__item.active{pointer-events:none}.aeb-sidebar__item.active .aeb-sidebar__item-label{color:var(--c-t-links)}.aeb-sidebar__item.active .aeb-sidebar__item-icon svg{fill:var(--c-t-links)}.aeb-sidebar__toggle-icon{box-sizing:border-box;display:flex;flex:0 0 auto;align-items:center;justify-content:center;height:50px;margin:16px 8px 10px;cursor:pointer;border:none;-webkit-user-select:none;user-select:none;border-radius:4px;transition:all linear .23s;background-color:var(--c-btn-ps-default)}.aeb-sidebar__toggle-icon>svg{transition:all ease .23s}.aeb-sidebar__toggle-icon:hover>svg,.aeb-sidebar__toggle-icon:active>svg{transform:translate(2px)}.aeb-sidebar__toggle-icon:hover{background-color:var(--c-btn-ps-hovered)}.aeb-sidebar__toggle-icon:active{background-color:var(--c-btn-ps-pressed)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: Sidebar, isStandalone: true, selector: "aeb-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isRight: { classPropertyName: "isRight", publicName: "isRight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleClick: "toggleClick" }, host: { properties: { "class.aeb-sidebar--open": "isOpen()", "class.aeb-sidebar--right": "isRight()" }, classAttribute: "aeb-sidebar" }, ngImport: i0, template: "<div class=\"aeb-sidebar__items\">\n  <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n</div>\n\n<button\n  type=\"button\"\n  class=\"aeb-sidebar__toggle-icon\"\n  (click)=\"handleToggleSidebar()\"\n>\n  <svg\n    width=\"28\"\n    height=\"28\"\n    viewBox=\"0 0 28 28\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M15.5359 6.30688L21.7602 13.3677C21.9199 13.5493 22 13.7653 22 14C22 14.2106 21.9341 14.4606 21.7515 14.6422L15.5318 21.6978C15.3721 21.8793 15.1534 22 14.8856 22C14.6176 22 14.399 21.8794 14.2394 21.6977C13.927 21.3423 13.9119 20.7814 14.244 20.4287L19.9121 14L14.2398 7.56653C13.9272 7.21101 13.9119 6.64939 14.2444 6.29664C14.4095 6.11179 14.6412 6 14.8921 6C15.1445 6 15.3769 6.1135 15.5359 6.30688Z\"\n      fill=\"#9CA8AF\"\n    />\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.53586 6.30688L13.7602 13.3677C13.9199 13.5493 14 13.7653 14 14C14 14.2106 13.9341 14.4606 13.7515 14.6422L7.53175 21.6978C7.37212 21.8793 7.15341 22 6.88558 22C6.61765 22 6.39904 21.8794 6.2394 21.6977C5.92703 21.3423 5.91188 20.7814 6.24398 20.4287L11.9121 14L6.23978 7.56653C5.92725 7.21101 5.91186 6.64939 6.24438 6.29664C6.4095 6.11179 6.64121 6 6.89212 6C7.14455 6 7.37688 6.1135 7.53586 6.30688Z\"\n      fill=\"#9CA8AF\"\n    />\n  </svg>\n</button>\n\n<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n", styles: [".aeb-sidebar{position:fixed;top:80px;left:0;z-index:var(--z-fixed);display:flex;flex-direction:column;justify-content:space-between;width:80px;height:calc(100vh - 80px);color:var(--c-t-primary);background-color:var(--c-bg-light);box-sizing:border-box;border-right:1px solid var(--c-bor-default);transition:width .23s ease}.aeb-sidebar--open{width:260px}.aeb-sidebar--open .aeb-sidebar__item-label{max-width:180px;opacity:1;margin-left:18px}.aeb-sidebar--open .aeb-sidebar__toggle-icon>svg{transform:scaleX(-1)}.aeb-sidebar--open .aeb-sidebar__toggle-icon:hover>svg,.aeb-sidebar--open .aeb-sidebar__toggle-icon:active>svg{transform:translate(-2px) scaleX(-1)}.aeb-sidebar--right{right:0;left:auto;border-right:none;border-left:1px solid var(--c-bor-default)}.aeb-sidebar--right .aeb-sidebar__toggle-icon{transform:scaleX(-1)}.aeb-sidebar--right .aeb-sidebar__item-label{margin-left:0}.aeb-sidebar--right .aeb-sidebar__item{justify-content:flex-end}.aeb-sidebar--right.open .aeb-sidebar__item-label{margin-left:0;margin-right:18px}.aeb-sidebar__items{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;padding:14px 0 0}.aeb-sidebar__item{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:100%;padding:14px 28px;text-decoration:none;-webkit-user-select:none;user-select:none}.aeb-sidebar__item-icon{display:flex;flex:0 0 auto;width:24px;height:24px;opacity:.8}.aeb-sidebar__item-icon img{object-fit:contain;width:100%}.aeb-sidebar__item-label{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;margin-left:0;font-size:16px;color:var(--c-t-primary);transition:max-width .23s ease,opacity .23s ease,margin-left .23s ease}.aeb-sidebar__item:hover{text-decoration:none;background-color:var(--c-bor-default)}.aeb-sidebar__item:hover>a{text-decoration:none}.aeb-sidebar__item.active{pointer-events:none}.aeb-sidebar__item.active .aeb-sidebar__item-label{color:var(--c-t-links)}.aeb-sidebar__item.active .aeb-sidebar__item-icon svg{fill:var(--c-t-links)}.aeb-sidebar__toggle-icon{box-sizing:border-box;display:flex;flex:0 0 auto;align-items:center;justify-content:center;height:50px;margin:16px 8px 10px;cursor:pointer;border:none;-webkit-user-select:none;user-select:none;border-radius:4px;transition:all linear .23s;background-color:var(--c-btn-ps-default)}.aeb-sidebar__toggle-icon>svg{transition:all ease .23s}.aeb-sidebar__toggle-icon:hover>svg,.aeb-sidebar__toggle-icon:active>svg{transform:translate(2px)}.aeb-sidebar__toggle-icon:hover{background-color:var(--c-btn-ps-hovered)}.aeb-sidebar__toggle-icon:active{background-color:var(--c-btn-ps-pressed)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Sidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-sidebar', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
+            args: [{ selector: 'aeb-sidebar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
                         class: 'aeb-sidebar',
                         '[class.aeb-sidebar--open]': 'isOpen()',
                         '[class.aeb-sidebar--right]': 'isRight()'
@@ -4476,17 +4467,17 @@ class Slider {
         this.handleEndDragging = (event) => {
             event.preventDefault();
             this.isPressed = false;
-            document.removeEventListener('mousemove', this.handleStartDragging);
-            document.removeEventListener('mouseup', this.handleEndDragging);
+            this._cleanupMouseMove?.();
+            this._cleanupMouseUp?.();
         };
         this.handleEndSwiping = (event) => {
             if (event.cancelable) {
                 event.preventDefault();
             }
             this.isPressed = false;
-            document.removeEventListener('touchmove', this.handleStartSwiping);
-            document.removeEventListener('touchend', this.handleEndSwiping);
-            document.removeEventListener('touchcancel', this.handleEndSwiping);
+            this._cleanupTouchMove?.();
+            this._cleanupTouchEnd?.();
+            this._cleanupTouchCancel?.();
         };
     }
     get isStandardMode() {
@@ -4550,17 +4541,15 @@ class Slider {
                 event.preventDefault();
             }
             this.handleStartSwiping(event);
-            document.addEventListener('touchmove', this.handleStartSwiping, {
-                passive: false
-            });
-            document.addEventListener('touchend', this.handleEndSwiping);
-            document.addEventListener('touchcancel', this.handleEndSwiping);
+            this._cleanupTouchMove = this._renderer.listen('document', 'touchmove', this.handleStartSwiping);
+            this._cleanupTouchEnd = this._renderer.listen('document', 'touchend', this.handleEndSwiping);
+            this._cleanupTouchCancel = this._renderer.listen('document', 'touchcancel', this.handleEndSwiping);
         });
         this._renderer.listen(slider.nativeElement, 'mousedown', (event) => {
             event.preventDefault();
             this.handleStartDragging(event);
-            document.addEventListener('mousemove', this.handleStartDragging, false);
-            document.addEventListener('mouseup', this.handleEndDragging, false);
+            this._cleanupMouseMove = this._renderer.listen('document', 'mousemove', this.handleStartDragging);
+            this._cleanupMouseUp = this._renderer.listen('document', 'mouseup', this.handleEndDragging);
         });
     }
     changeValueByInput(value) {
@@ -4632,11 +4621,11 @@ class Slider {
                 useExisting: forwardRef(() => Slider),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === 'standard') {\n<div class=\"aeb-slider__header\">\n  <div class=\"aeb-slider__label\">{{ label() }}</div>\n  <div class=\"aeb-slider__value\">\n    {{ value | number: '1.0-0' | replace: ',' : valueSeparator() }} {{ prefix()\n    }}\n  </div>\n</div>\n} @if (mode() === 'input') {\n<aeb-form-field>\n  <label aebLabel>{{ label() }}</label>\n  <input\n    type=\"string\"\n    aebInput\n    aebNumbersOnly\n    (focus)=\"setCurrentDisplayValue()\"\n    (blur)=\"onInputBlur()\"\n    [ngModel]=\"displayValue\"\n    (ngModelChange)=\"changeValueByInput($event)\"\n  />\n</aeb-form-field>\n}\n<div class=\"aeb-slider__line__container\" #slider>\n  <div class=\"aeb-slider__line__indicator\">\n    <div\n      class=\"aeb-slider__line\"\n      [ngStyle]=\"{\n        width: position + '%'\n      }\"\n      [ngClass]=\"{ 'aeb-slider__line--pressed': isPressed }\"\n    ></div>\n  </div>\n</div>\n<div class=\"aeb-slider__limits\">\n  <div>\n    {{ min() | number: '1.0-0' | replace: ',' : valueSeparator() }} {{ prefix()\n    }}\n  </div>\n  <div>\n    {{ max() | number: '1.0-0' | replace: ',' : valueSeparator() }} {{ prefix()\n    }}\n  </div>\n</div>\n", styles: [".aeb-slider{--standard-value-color: var(--color-mono-900);--line-background-color: var(--color-blue-500);display:block;color:var(--color-mono-900);padding:6px 0 8px}.aeb-slider__line{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--line-background-color);border-radius:2px}.aeb-slider__line:after{position:absolute;top:-8px;right:-10px;width:20px;height:20px;cursor:pointer;content:\"\";background-color:var(--line-background-color);border-radius:var(--border-medium-rounded)}.aeb-slider__line:hover{background-color:var(--color-turquoise-500)}.aeb-slider__line:hover:after{background-color:var(--color-turquoise-500)}.aeb-slider__line__container{margin-top:26px}.aeb-slider__line--pressed:after{top:-11px;right:-13px;width:26px;height:26px;transition:all .05s ease-in;background-color:var(--color-turquoise-500);border-radius:var(--border-rounded)}.aeb-slider__line--pressed{background-color:var(--color-turquoise-500)}.aeb-slider__line__indicator{position:relative;width:100%;height:4px;border-radius:2px;background-color:var(--color-mono-50)}.aeb-slider__line__wrapper{display:flex;justify-content:center;align-items:center;width:100%}.aeb-slider--standard .aeb-slider__header{display:flex;justify-content:space-between;align-items:center}.aeb-slider--standard .aeb-slider__label{display:flex;align-items:center;font-size:var(--font-size-s);line-height:20px;color:var(--color-mono-300)}.aeb-slider--standard .aeb-slider__value{font-size:var(--font-size-md);font-weight:700;line-height:var(--line-height-medium);color:var(--standard-value-color)}.aeb-slider--standard .aeb-slider__limits{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:var(--font-size-xxs);line-height:14px;color:var(--color-mono-300)}.aeb-slider--input .aeb-slider__field-wrapper{width:100%}.aeb-slider--input .aeb-slider__field-wrapper input:focus{outline:none}.aeb-slider--input .aeb-slider__line{border-top-left-radius:4px;border-bottom-left-radius:0}.aeb-slider--input .aeb-slider__line__indicator{position:absolute;background-color:transparent}.aeb-slider--input .aeb-slider__line__container{position:relative;margin-top:0;top:-4px;left:10px;width:calc(100% - 20px)}.aeb-slider--input .aeb-slider__line:after{width:10px;height:10px;top:-3px;right:-5px}.aeb-slider--input .aeb-slider__line--pressed:after{width:14px;height:14px;top:-5px;right:-7px;transition:all .05s ease-in}.aeb-slider--input .aeb-slider__limits{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding-bottom:8px;font-size:var(--font-size-xxs);line-height:14px;color:var(--color-mono-300)}body.dark .aeb-slider{--standard-value-color: var(--color-mono-0);--line-background-color: var(--color-mono-600)}\n"], dependencies: [{ kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NumbersOnlyDirective, selector: "[aebNumbersOnly]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: ReplacePipe, name: "replace" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === 'standard') {\n<div class=\"aeb-slider__header\">\n  <div class=\"aeb-slider__label\">{{ label() }}</div>\n  <div class=\"aeb-slider__value\">\n    {{ value | number: '1.0-0' | replace: ',' : valueSeparator() }} {{ prefix()\n    }}\n  </div>\n</div>\n} @if (mode() === 'input') {\n<aeb-form-field>\n  <label aebLabel>{{ label() }}</label>\n  <input\n    type=\"string\"\n    aebInput\n    aebNumbersOnly\n    (focus)=\"setCurrentDisplayValue()\"\n    (blur)=\"onInputBlur()\"\n    [ngModel]=\"displayValue\"\n    (ngModelChange)=\"changeValueByInput($event)\"\n  />\n</aeb-form-field>\n}\n<div class=\"aeb-slider__line__container\" #slider>\n  <div class=\"aeb-slider__line__indicator\">\n    <div\n      class=\"aeb-slider__line\"\n      [ngStyle]=\"{\n        width: position + '%'\n      }\"\n      [ngClass]=\"{ 'aeb-slider__line--pressed': isPressed }\"\n    ></div>\n  </div>\n</div>\n<div class=\"aeb-slider__limits\">\n  <div>\n    {{ min() | number: '1.0-0' | replace: ',' : valueSeparator() }} {{ prefix()\n    }}\n  </div>\n  <div>\n    {{ max() | number: '1.0-0' | replace: ',' : valueSeparator() }} {{ prefix()\n    }}\n  </div>\n</div>\n", styles: [".aeb-slider{--standard-value-color: var(--color-mono-900);--line-background-color: var(--color-blue-500);display:block;color:var(--color-mono-900);padding:6px 0 8px}.aeb-slider__line{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--line-background-color);border-radius:2px}.aeb-slider__line:after{position:absolute;top:-8px;right:-10px;width:20px;height:20px;cursor:pointer;content:\"\";background-color:var(--line-background-color);border-radius:var(--border-medium-rounded)}.aeb-slider__line:hover{background-color:var(--color-turquoise-500)}.aeb-slider__line:hover:after{background-color:var(--color-turquoise-500)}.aeb-slider__line__container{margin-top:26px}.aeb-slider__line--pressed:after{top:-11px;right:-13px;width:26px;height:26px;transition:all .05s ease-in;background-color:var(--color-turquoise-500);border-radius:var(--border-rounded)}.aeb-slider__line--pressed{background-color:var(--color-turquoise-500)}.aeb-slider__line__indicator{position:relative;width:100%;height:4px;border-radius:2px;background-color:var(--color-mono-50)}.aeb-slider__line__wrapper{display:flex;justify-content:center;align-items:center;width:100%}.aeb-slider--standard .aeb-slider__header{display:flex;justify-content:space-between;align-items:center}.aeb-slider--standard .aeb-slider__label{display:flex;align-items:center;font-size:var(--font-size-s);line-height:20px;color:var(--color-mono-300)}.aeb-slider--standard .aeb-slider__value{font-size:var(--font-size-md);font-weight:700;line-height:var(--line-height-medium);color:var(--standard-value-color)}.aeb-slider--standard .aeb-slider__limits{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:var(--font-size-xxs);line-height:14px;color:var(--color-mono-300)}.aeb-slider--input .aeb-slider__field-wrapper{width:100%}.aeb-slider--input .aeb-slider__field-wrapper input:focus{outline:none}.aeb-slider--input .aeb-slider__line{border-top-left-radius:4px;border-bottom-left-radius:0}.aeb-slider--input .aeb-slider__line__indicator{position:absolute;background-color:transparent}.aeb-slider--input .aeb-slider__line__container{position:relative;margin-top:0;top:-4px;left:10px;width:calc(100% - 20px)}.aeb-slider--input .aeb-slider__line:after{width:10px;height:10px;top:-3px;right:-5px}.aeb-slider--input .aeb-slider__line--pressed:after{width:14px;height:14px;top:-5px;right:-7px;transition:all .05s ease-in}.aeb-slider--input .aeb-slider__limits{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding-bottom:8px;font-size:var(--font-size-xxs);line-height:14px;color:var(--color-mono-300)}body.dark .aeb-slider{--standard-value-color: var(--color-mono-0);--line-background-color: var(--color-mono-600)}\n"], dependencies: [{ kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NumbersOnlyDirective, selector: "[aebNumbersOnly]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: ReplacePipe, name: "replace" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Slider, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-slider', encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'aeb-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => Slider),
@@ -4686,11 +4675,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Spinner {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Spinner, isStandalone: true, selector: "aeb-spinner", ngImport: i0, template: "<div class=\"spinner-wrap\">\n  <div class=\"spinner-circle\">\n    <svg class=\"spinner-circle-border\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg class=\"spinner-circle-border rotate\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg\n      class=\"spinner-circle-diamond\"\n      width=\"26\"\n      height=\"26\"\n      viewBox=\"0 0 26 26\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M19.2101 16.1713L16.2663 19.0952L18.223 23.7905L23.9375 18.1148L19.2101 16.1713ZM15.1754 19.5423H11.0021L9.0454 24.2376H17.1148L15.1754 19.5423ZM19.6776 10.9428V15.0706L24.3877 17.0141V8.9994L19.6776 10.9428ZM9.8939 19.0952L6.9501 16.1713L2.24 18.1148L7.9544 23.7905L9.8939 19.0952ZM18.223 2.223L16.2663 6.9183L19.2101 9.8421L23.9375 7.8986L18.223 2.223ZM11.0021 6.4539H15.1754L17.1148 1.7758H9.0454L11.0021 6.4539ZM6.4999 15.0706V10.9428L1.7898 8.9994V17.0141L6.4999 15.0706ZM6.9501 9.8421L9.8939 6.9183L7.9544 2.223L2.24 7.8986L6.9501 9.8421ZM15.4005 18.5448L18.656 15.2942V10.7021L15.4005 7.4687H10.777L7.5042 10.7021V15.2942L10.777 18.5448H15.4005ZM7.9891 25.2352C5.2011 24.2154 1.7898 20.6463 0.768129 18.0804C-0.253521 15.5145 -0.258561 10.9428 0.768129 7.933C1.7948 4.9232 4.875 1.7758 7.9891 0.761051C11.1031 -0.253679 15.5877 -0.253689 18.1884 0.761051C20.7891 1.7758 24.896 5.9272 25.4094 7.933C25.9227 9.9389 26.431 15.5145 25.4094 18.0804C24.3877 20.6463 20.7213 24.2154 18.1884 25.2352C15.6556 26.2549 10.777 26.2549 7.9891 25.2352Z\"\n        fill=\"url(#paint0_linear)\"\n      />\n      <defs>\n        <linearGradient\n          id=\"paint0_linear\"\n          x1=\"13.9013\"\n          y1=\"26\"\n          x2=\"13.9013\"\n          y2=\"0\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#00B8FF\" />\n          <stop offset=\"1\" stop-color=\"#0079D6\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  </div>\n</div>\n", styles: [".spinner-wrap{position:relative;width:auto;height:auto}.spinner-circle{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:auto}.spinner-circle .spinner-circle-border{position:absolute;width:60px;height:60px;animation:spin .75s linear infinite}.spinner-circle .spinner-circle-border .path{stroke:#0079d6;stroke-linecap:round;animation:dash 1s ease-in-out infinite}.spinner-circle .spinner-circle-border .spinner-circle-border-mask{background-color:var(--color-mono-0)}.spinner-circle .rotate{animation:spin2 .75s linear infinite}.spinner-circle .rotate .path{stroke:#00b8ff}.spinner-circle .spinner-circle-diamond{animation:zoom .5s ease-in-out infinite alternate}@keyframes spin2{0%{transform:rotate(180deg)}to{transform:rotate(179deg)}}@keyframes zoom{0%{transform:scale(1.2)}to{transform:scale(.75)}}@keyframes spin{0%{transform:rotate(360deg)}to{transform:rotate(359deg)}}@keyframes dash{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:50,150;stroke-dashoffset:-35}to{stroke-dasharray:50,150;stroke-dashoffset:-124}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Spinner, isStandalone: true, selector: "aeb-spinner", ngImport: i0, template: "<div class=\"spinner-wrap\">\n  <div class=\"spinner-circle\">\n    <svg class=\"spinner-circle-border\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg class=\"spinner-circle-border rotate\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg\n      class=\"spinner-circle-diamond\"\n      width=\"26\"\n      height=\"26\"\n      viewBox=\"0 0 26 26\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M19.2101 16.1713L16.2663 19.0952L18.223 23.7905L23.9375 18.1148L19.2101 16.1713ZM15.1754 19.5423H11.0021L9.0454 24.2376H17.1148L15.1754 19.5423ZM19.6776 10.9428V15.0706L24.3877 17.0141V8.9994L19.6776 10.9428ZM9.8939 19.0952L6.9501 16.1713L2.24 18.1148L7.9544 23.7905L9.8939 19.0952ZM18.223 2.223L16.2663 6.9183L19.2101 9.8421L23.9375 7.8986L18.223 2.223ZM11.0021 6.4539H15.1754L17.1148 1.7758H9.0454L11.0021 6.4539ZM6.4999 15.0706V10.9428L1.7898 8.9994V17.0141L6.4999 15.0706ZM6.9501 9.8421L9.8939 6.9183L7.9544 2.223L2.24 7.8986L6.9501 9.8421ZM15.4005 18.5448L18.656 15.2942V10.7021L15.4005 7.4687H10.777L7.5042 10.7021V15.2942L10.777 18.5448H15.4005ZM7.9891 25.2352C5.2011 24.2154 1.7898 20.6463 0.768129 18.0804C-0.253521 15.5145 -0.258561 10.9428 0.768129 7.933C1.7948 4.9232 4.875 1.7758 7.9891 0.761051C11.1031 -0.253679 15.5877 -0.253689 18.1884 0.761051C20.7891 1.7758 24.896 5.9272 25.4094 7.933C25.9227 9.9389 26.431 15.5145 25.4094 18.0804C24.3877 20.6463 20.7213 24.2154 18.1884 25.2352C15.6556 26.2549 10.777 26.2549 7.9891 25.2352Z\"\n        fill=\"url(#paint0_linear)\"\n      />\n      <defs>\n        <linearGradient\n          id=\"paint0_linear\"\n          x1=\"13.9013\"\n          y1=\"26\"\n          x2=\"13.9013\"\n          y2=\"0\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#00B8FF\" />\n          <stop offset=\"1\" stop-color=\"#0079D6\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  </div>\n</div>\n", styles: [".spinner-wrap{position:relative;width:auto;height:auto}.spinner-circle{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:auto}.spinner-circle .spinner-circle-border{position:absolute;width:60px;height:60px;animation:spin .75s linear infinite}.spinner-circle .spinner-circle-border .path{stroke:#0079d6;stroke-linecap:round;animation:dash 1s ease-in-out infinite}.spinner-circle .spinner-circle-border .spinner-circle-border-mask{background-color:var(--color-mono-0)}.spinner-circle .rotate{animation:spin2 .75s linear infinite}.spinner-circle .rotate .path{stroke:#00b8ff}.spinner-circle .spinner-circle-diamond{animation:zoom .5s ease-in-out infinite alternate}@keyframes spin2{0%{transform:rotate(180deg)}to{transform:rotate(179deg)}}@keyframes zoom{0%{transform:scale(1.2)}to{transform:scale(.75)}}@keyframes spin{0%{transform:rotate(360deg)}to{transform:rotate(359deg)}}@keyframes dash{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:50,150;stroke-dashoffset:-35}to{stroke-dasharray:50,150;stroke-dashoffset:-124}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-spinner', encapsulation: ViewEncapsulation.None, template: "<div class=\"spinner-wrap\">\n  <div class=\"spinner-circle\">\n    <svg class=\"spinner-circle-border\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg class=\"spinner-circle-border rotate\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg\n      class=\"spinner-circle-diamond\"\n      width=\"26\"\n      height=\"26\"\n      viewBox=\"0 0 26 26\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M19.2101 16.1713L16.2663 19.0952L18.223 23.7905L23.9375 18.1148L19.2101 16.1713ZM15.1754 19.5423H11.0021L9.0454 24.2376H17.1148L15.1754 19.5423ZM19.6776 10.9428V15.0706L24.3877 17.0141V8.9994L19.6776 10.9428ZM9.8939 19.0952L6.9501 16.1713L2.24 18.1148L7.9544 23.7905L9.8939 19.0952ZM18.223 2.223L16.2663 6.9183L19.2101 9.8421L23.9375 7.8986L18.223 2.223ZM11.0021 6.4539H15.1754L17.1148 1.7758H9.0454L11.0021 6.4539ZM6.4999 15.0706V10.9428L1.7898 8.9994V17.0141L6.4999 15.0706ZM6.9501 9.8421L9.8939 6.9183L7.9544 2.223L2.24 7.8986L6.9501 9.8421ZM15.4005 18.5448L18.656 15.2942V10.7021L15.4005 7.4687H10.777L7.5042 10.7021V15.2942L10.777 18.5448H15.4005ZM7.9891 25.2352C5.2011 24.2154 1.7898 20.6463 0.768129 18.0804C-0.253521 15.5145 -0.258561 10.9428 0.768129 7.933C1.7948 4.9232 4.875 1.7758 7.9891 0.761051C11.1031 -0.253679 15.5877 -0.253689 18.1884 0.761051C20.7891 1.7758 24.896 5.9272 25.4094 7.933C25.9227 9.9389 26.431 15.5145 25.4094 18.0804C24.3877 20.6463 20.7213 24.2154 18.1884 25.2352C15.6556 26.2549 10.777 26.2549 7.9891 25.2352Z\"\n        fill=\"url(#paint0_linear)\"\n      />\n      <defs>\n        <linearGradient\n          id=\"paint0_linear\"\n          x1=\"13.9013\"\n          y1=\"26\"\n          x2=\"13.9013\"\n          y2=\"0\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#00B8FF\" />\n          <stop offset=\"1\" stop-color=\"#0079D6\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  </div>\n</div>\n", styles: [".spinner-wrap{position:relative;width:auto;height:auto}.spinner-circle{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:auto}.spinner-circle .spinner-circle-border{position:absolute;width:60px;height:60px;animation:spin .75s linear infinite}.spinner-circle .spinner-circle-border .path{stroke:#0079d6;stroke-linecap:round;animation:dash 1s ease-in-out infinite}.spinner-circle .spinner-circle-border .spinner-circle-border-mask{background-color:var(--color-mono-0)}.spinner-circle .rotate{animation:spin2 .75s linear infinite}.spinner-circle .rotate .path{stroke:#00b8ff}.spinner-circle .spinner-circle-diamond{animation:zoom .5s ease-in-out infinite alternate}@keyframes spin2{0%{transform:rotate(180deg)}to{transform:rotate(179deg)}}@keyframes zoom{0%{transform:scale(1.2)}to{transform:scale(.75)}}@keyframes spin{0%{transform:rotate(360deg)}to{transform:rotate(359deg)}}@keyframes dash{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:50,150;stroke-dashoffset:-35}to{stroke-dasharray:50,150;stroke-dashoffset:-124}}\n"] }]
+            args: [{ selector: 'aeb-spinner', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner-wrap\">\n  <div class=\"spinner-circle\">\n    <svg class=\"spinner-circle-border\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg class=\"spinner-circle-border rotate\" viewBox=\"0 0 50 50\">\n      <circle\n        class=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"2\"\n      ></circle>\n    </svg>\n    <svg\n      class=\"spinner-circle-diamond\"\n      width=\"26\"\n      height=\"26\"\n      viewBox=\"0 0 26 26\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M19.2101 16.1713L16.2663 19.0952L18.223 23.7905L23.9375 18.1148L19.2101 16.1713ZM15.1754 19.5423H11.0021L9.0454 24.2376H17.1148L15.1754 19.5423ZM19.6776 10.9428V15.0706L24.3877 17.0141V8.9994L19.6776 10.9428ZM9.8939 19.0952L6.9501 16.1713L2.24 18.1148L7.9544 23.7905L9.8939 19.0952ZM18.223 2.223L16.2663 6.9183L19.2101 9.8421L23.9375 7.8986L18.223 2.223ZM11.0021 6.4539H15.1754L17.1148 1.7758H9.0454L11.0021 6.4539ZM6.4999 15.0706V10.9428L1.7898 8.9994V17.0141L6.4999 15.0706ZM6.9501 9.8421L9.8939 6.9183L7.9544 2.223L2.24 7.8986L6.9501 9.8421ZM15.4005 18.5448L18.656 15.2942V10.7021L15.4005 7.4687H10.777L7.5042 10.7021V15.2942L10.777 18.5448H15.4005ZM7.9891 25.2352C5.2011 24.2154 1.7898 20.6463 0.768129 18.0804C-0.253521 15.5145 -0.258561 10.9428 0.768129 7.933C1.7948 4.9232 4.875 1.7758 7.9891 0.761051C11.1031 -0.253679 15.5877 -0.253689 18.1884 0.761051C20.7891 1.7758 24.896 5.9272 25.4094 7.933C25.9227 9.9389 26.431 15.5145 25.4094 18.0804C24.3877 20.6463 20.7213 24.2154 18.1884 25.2352C15.6556 26.2549 10.777 26.2549 7.9891 25.2352Z\"\n        fill=\"url(#paint0_linear)\"\n      />\n      <defs>\n        <linearGradient\n          id=\"paint0_linear\"\n          x1=\"13.9013\"\n          y1=\"26\"\n          x2=\"13.9013\"\n          y2=\"0\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#00B8FF\" />\n          <stop offset=\"1\" stop-color=\"#0079D6\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  </div>\n</div>\n", styles: [".spinner-wrap{position:relative;width:auto;height:auto}.spinner-circle{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:auto}.spinner-circle .spinner-circle-border{position:absolute;width:60px;height:60px;animation:spin .75s linear infinite}.spinner-circle .spinner-circle-border .path{stroke:#0079d6;stroke-linecap:round;animation:dash 1s ease-in-out infinite}.spinner-circle .spinner-circle-border .spinner-circle-border-mask{background-color:var(--color-mono-0)}.spinner-circle .rotate{animation:spin2 .75s linear infinite}.spinner-circle .rotate .path{stroke:#00b8ff}.spinner-circle .spinner-circle-diamond{animation:zoom .5s ease-in-out infinite alternate}@keyframes spin2{0%{transform:rotate(180deg)}to{transform:rotate(179deg)}}@keyframes zoom{0%{transform:scale(1.2)}to{transform:scale(.75)}}@keyframes spin{0%{transform:rotate(360deg)}to{transform:rotate(359deg)}}@keyframes dash{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:50,150;stroke-dashoffset:-35}to{stroke-dasharray:50,150;stroke-dashoffset:-124}}\n"] }]
         }] });
 class SpinnerModule {
@@ -4724,22 +4713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }] });
 class StepperStep {
-    get isActive() {
-        return this._isActive;
-    }
-    set isActive(value) {
-        this._isActive = value;
-    }
-    get isCompleted() {
-        return this._isCompleted;
-    }
-    set isCompleted(value) {
-        this._isCompleted = value;
-    }
     constructor() {
-        // Internal mutable state (can be modified by parent Stepper component)
-        this._isActive = false;
-        this._isCompleted = false;
         this.initialIsActive = input(false, ...(ngDevMode ? [{ debugName: "initialIsActive" }] : /* istanbul ignore next */ []));
         this.initialIsCompleted = input(false, ...(ngDevMode ? [{ debugName: "initialIsCompleted" }] : /* istanbul ignore next */ []));
         this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
@@ -4749,16 +4723,17 @@ class StepperStep {
         this.nextClicked = output();
         this.prevClicked = output();
         this.completeClicked = output();
-        // Initialize from signal inputs
-        this._isActive = this.initialIsActive();
-        this._isCompleted = this.initialIsCompleted();
+        this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.isCompleted = signal(false, ...(ngDevMode ? [{ debugName: "isCompleted" }] : /* istanbul ignore next */ []));
+        this.isActive.set(this.initialIsActive());
+        this.isCompleted.set(this.initialIsCompleted());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: StepperStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: StepperStep, isStandalone: true, selector: "aeb-stepper-step", inputs: { initialIsActive: { classPropertyName: "initialIsActive", publicName: "initialIsActive", isSignal: true, isRequired: false, transformFunction: null }, initialIsCompleted: { classPropertyName: "initialIsCompleted", publicName: "initialIsCompleted", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showPrev: { classPropertyName: "showPrev", publicName: "showPrev", isSignal: true, isRequired: false, transformFunction: null }, showNext: { classPropertyName: "showNext", publicName: "showNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nextClicked: "nextClicked", prevClicked: "prevClicked", completeClicked: "completeClicked" }, ngImport: i0, template: "@if (isActive) {\n<div>\n  <ng-content />\n</div>\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: StepperStep, isStandalone: true, selector: "aeb-stepper-step", inputs: { initialIsActive: { classPropertyName: "initialIsActive", publicName: "initialIsActive", isSignal: true, isRequired: false, transformFunction: null }, initialIsCompleted: { classPropertyName: "initialIsCompleted", publicName: "initialIsCompleted", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showPrev: { classPropertyName: "showPrev", publicName: "showPrev", isSignal: true, isRequired: false, transformFunction: null }, showNext: { classPropertyName: "showNext", publicName: "showNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nextClicked: "nextClicked", prevClicked: "prevClicked", completeClicked: "completeClicked" }, ngImport: i0, template: "@if (isActive()) {\n<div>\n  <ng-content />\n</div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: StepperStep, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-stepper-step', encapsulation: ViewEncapsulation.None, template: "@if (isActive) {\n<div>\n  <ng-content />\n</div>\n}\n" }]
+            args: [{ selector: 'aeb-stepper-step', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n<div>\n  <ng-content />\n</div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { initialIsActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIsActive", required: false }] }], initialIsCompleted: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIsCompleted", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], showPrev: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrev", required: false }] }], showNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNext", required: false }] }], nextClicked: [{ type: i0.Output, args: ["nextClicked"] }], prevClicked: [{ type: i0.Output, args: ["prevClicked"] }], completeClicked: [{ type: i0.Output, args: ["completeClicked"] }] } });
 class Stepper {
@@ -4766,12 +4741,12 @@ class Stepper {
         this.stepChanged = output();
         this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.stepperSteps = contentChildren(StepperStep, ...(ngDevMode ? [{ debugName: "stepperSteps" }] : /* istanbul ignore next */ []));
-        this.screenWidth = window.innerWidth;
+        this.screenWidth = signal(window.innerWidth, ...(ngDevMode ? [{ debugName: "screenWidth" }] : /* istanbul ignore next */ []));
         this.steps = [];
         fromEvent(window, 'resize')
             .pipe(debounceTime(50), takeUntilDestroyed())
             .subscribe((event) => {
-            this.screenWidth = event.target.innerWidth;
+            this.screenWidth.set(event.target.innerWidth);
         });
     }
     get activeStepIndex() {
@@ -4779,7 +4754,7 @@ class Stepper {
         return active ? this.steps.indexOf(active) : -1;
     }
     get completedSteps() {
-        return this.steps.filter((step) => step.isCompleted);
+        return this.steps.filter((step) => step.isCompleted());
     }
     get hasNextStep() {
         return this.activeStepIndex < this.steps.length - 1;
@@ -4788,15 +4763,15 @@ class Stepper {
         return this.activeStepIndex > 0;
     }
     get activeStep() {
-        return this.steps.find((step) => step.isActive);
+        return this.steps.find((step) => step.isActive());
     }
     set activeStep(step) {
         const currentActive = this.activeStep;
         if (step !== currentActive) {
             if (currentActive) {
-                currentActive.isActive = false;
+                currentActive.isActive.set(false);
             }
-            step.isActive = true;
+            step.isActive.set(true);
             this.stepChanged.emit(step);
         }
     }
@@ -4819,15 +4794,15 @@ class Stepper {
             return;
         }
         const currentActive = this.activeStep;
-        if (!this.hasNextStep && currentActive?.isCompleted) {
+        if (!this.hasNextStep && currentActive?.isCompleted()) {
             if (currentActive) {
-                currentActive.isCompleted = false;
+                currentActive.isCompleted.set(false);
             }
             return;
         }
         const nextStep = this.steps[this.activeStepIndex - 1];
         if (nextStep) {
-            nextStep.isCompleted = false;
+            nextStep.isCompleted.set(false);
         }
         if (currentActive) {
             currentActive.prevClicked.emit();
@@ -4849,16 +4824,16 @@ class Stepper {
         const currentActive = this.activeStep;
         if (currentActive) {
             currentActive.completeClicked.emit();
-            currentActive.isCompleted = true;
+            currentActive.isCompleted.set(true);
         }
         this.goToNextStep();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Stepper, isStandalone: true, selector: "aeb-stepper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChanged: "stepChanged" }, queries: [{ propertyName: "stepperSteps", predicate: StepperStep, isSignal: true }], ngImport: i0, template: "<div class=\"stepper\">\n  <div class=\"stepper-steps\">\n    @for (step of steps; track step; let i = $index) {\n    <div\n      class=\"stepper-step\"\n      [ngStyle]=\"{ width: 100 / steps.length + '%' }\"\n      [ngClass]=\"{\n          active: step.isActive,\n          completed: step.isCompleted,\n          disabled: isDisabled()\n        }\"\n    >\n      <div class=\"stepper-step-index\">\n        @if (step.isCompleted) {\n        <div>\n          <svg\n            width=\"28\"\n            height=\"28\"\n            viewBox=\"0 0 28 28\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M25.4674 5.47186C26.1505 6.12666 26.1805 7.21877 25.5345 7.91115L11.9594 22.4601C11.3279 23.1369 10.2805 23.1835 9.59296 22.5654L2.5728 16.2545C1.8694 15.6222 1.80492 14.5316 2.42878 13.8186C3.05264 13.1057 4.1286 13.0403 4.832 13.6726L10.6186 18.8746L23.0608 5.53988C23.7068 4.84751 24.7843 4.81705 25.4674 5.47186Z\"\n              fill=\"#FAFAFA\"\n            />\n          </svg>\n        </div>\n        } @else {\n        <span class=\"stepper-step-index--prefix\">\u0428\u0430\u0433</span>\n        <span> {{ i + 1 }} </span>\n        <span class=\"stepper-step-index--postfix\">\u0438\u0437 {{ steps.length }}</span>\n        }\n      </div>\n      <div\n        class=\"stepper-step-title\"\n        [ngClass]=\"{\n            disabled: isDisabled()\n          }\"\n      >\n        {{ step.title() }}\n      </div>\n    </div>\n    }\n    <div class=\"stepper-steps-line\">\n      @if (isDisabled() === false) {\n      <div\n        class=\"stepper-steps-line-active\"\n        [ngStyle]=\"{\n            width: screenWidth | lineWidth: steps.length : completedSteps.length\n          }\"\n      ></div>\n      }\n    </div>\n  </div>\n  <div class=\"stepper-steps-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".stepper{-webkit-user-select:none;user-select:none}.stepper-steps{position:relative;display:flex}.stepper-steps-line{position:absolute;top:27px;right:0;left:0;width:66%;height:6px;margin:0 auto;overflow:hidden;background-color:var(--color-mono-100)}.stepper-steps-line-active{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-blue-500);transition:width,.4s}.stepper-step{position:relative;z-index:var(--z-dropdown);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.stepper-step-index{display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:12px;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);color:var(--white-primary);background-color:var(--color-mono-100);border-radius:30px}.stepper-step-index>div{display:flex}.stepper-step-index>span:first-child+span{display:flex;align-items:center}.stepper-step-index--prefix,.stepper-step-index--postfix{display:none}.stepper-step-title{font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--color-mono-300);text-align:center}.stepper-step-title.disabled{color:var(--color-mono-100)}.stepper-step.active .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.active .stepper-step-title{color:var(--color-blue-500)}.stepper-step.completed .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.disabled .stepper-step-index{background-color:var(--color-mono-100)}.stepper-step.disabled .stepper-step-title{color:var(--color-mono-100)}@media(max-width:767px){.stepper-steps{height:78px}.stepper-steps-line{top:unset;bottom:0;width:100%;background-color:var(--color-mono-100);border-radius:3px}.stepper-steps-line-active{border-radius:3px}.stepper-step{display:none;width:auto!important}.stepper-step-index{width:auto;height:auto;margin-bottom:0;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22.4px;color:var(--color-blue-500);background-color:unset}.stepper-step-index--prefix,.stepper-step-index--postfix,.stepper-step-index>span:first-child+span{display:inline}.stepper-step-title{display:none}.stepper-step.active{display:block}.stepper-step.active .stepper-step-index{display:block;background-color:unset}.stepper-step.active .stepper-step-title{display:block;margin-top:8px;font-weight:var(--font-weight-medium);color:var(--color-mono-900);text-align:left}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LineWidthPipe, name: "lineWidth" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Stepper, isStandalone: true, selector: "aeb-stepper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChanged: "stepChanged" }, queries: [{ propertyName: "stepperSteps", predicate: StepperStep, isSignal: true }], ngImport: i0, template: "<div class=\"stepper\">\n  <div class=\"stepper-steps\">\n    @for (step of steps; track step; let i = $index) {\n    <div\n      class=\"stepper-step\"\n      [ngStyle]=\"{ width: 100 / steps.length + '%' }\"\n      [ngClass]=\"{\n          active: step.isActive(),\n          completed: step.isCompleted(),\n          disabled: isDisabled()\n        }\"\n    >\n      <div class=\"stepper-step-index\">\n        @if (step.isCompleted()) {\n        <div>\n          <svg\n            width=\"28\"\n            height=\"28\"\n            viewBox=\"0 0 28 28\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M25.4674 5.47186C26.1505 6.12666 26.1805 7.21877 25.5345 7.91115L11.9594 22.4601C11.3279 23.1369 10.2805 23.1835 9.59296 22.5654L2.5728 16.2545C1.8694 15.6222 1.80492 14.5316 2.42878 13.8186C3.05264 13.1057 4.1286 13.0403 4.832 13.6726L10.6186 18.8746L23.0608 5.53988C23.7068 4.84751 24.7843 4.81705 25.4674 5.47186Z\"\n              fill=\"#FAFAFA\"\n            />\n          </svg>\n        </div>\n        } @else {\n        <span class=\"stepper-step-index--prefix\">\u0428\u0430\u0433</span>\n        <span> {{ i + 1 }} </span>\n        <span class=\"stepper-step-index--postfix\">\u0438\u0437 {{ steps.length }}</span>\n        }\n      </div>\n      <div\n        class=\"stepper-step-title\"\n        [ngClass]=\"{\n            disabled: isDisabled()\n          }\"\n      >\n        {{ step.title() }}\n      </div>\n    </div>\n    }\n    <div class=\"stepper-steps-line\">\n      @if (isDisabled() === false) {\n      <div\n        class=\"stepper-steps-line-active\"\n        [ngStyle]=\"{\n            width: screenWidth() | lineWidth: steps.length : completedSteps.length\n          }\"\n      ></div>\n      }\n    </div>\n  </div>\n  <div class=\"stepper-steps-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".stepper{-webkit-user-select:none;user-select:none}.stepper-steps{position:relative;display:flex}.stepper-steps-line{position:absolute;top:27px;right:0;left:0;width:66%;height:6px;margin:0 auto;overflow:hidden;background-color:var(--color-mono-100)}.stepper-steps-line-active{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-blue-500);transition:width,.4s}.stepper-step{position:relative;z-index:var(--z-dropdown);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.stepper-step-index{display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:12px;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);color:var(--white-primary);background-color:var(--color-mono-100);border-radius:30px}.stepper-step-index>div{display:flex}.stepper-step-index>span:first-child+span{display:flex;align-items:center}.stepper-step-index--prefix,.stepper-step-index--postfix{display:none}.stepper-step-title{font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--color-mono-300);text-align:center}.stepper-step-title.disabled{color:var(--color-mono-100)}.stepper-step.active .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.active .stepper-step-title{color:var(--color-blue-500)}.stepper-step.completed .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.disabled .stepper-step-index{background-color:var(--color-mono-100)}.stepper-step.disabled .stepper-step-title{color:var(--color-mono-100)}@media(max-width:767px){.stepper-steps{height:78px}.stepper-steps-line{top:unset;bottom:0;width:100%;background-color:var(--color-mono-100);border-radius:3px}.stepper-steps-line-active{border-radius:3px}.stepper-step{display:none;width:auto!important}.stepper-step-index{width:auto;height:auto;margin-bottom:0;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22.4px;color:var(--color-blue-500);background-color:unset}.stepper-step-index--prefix,.stepper-step-index--postfix,.stepper-step-index>span:first-child+span{display:inline}.stepper-step-title{display:none}.stepper-step.active{display:block}.stepper-step.active .stepper-step-index{display:block;background-color:unset}.stepper-step.active .stepper-step-title{display:block;margin-top:8px;font-weight:var(--font-weight-medium);color:var(--color-mono-900);text-align:left}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LineWidthPipe, name: "lineWidth" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Stepper, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-stepper', encapsulation: ViewEncapsulation.None, imports: [NgStyle, NgClass, LineWidthPipe], template: "<div class=\"stepper\">\n  <div class=\"stepper-steps\">\n    @for (step of steps; track step; let i = $index) {\n    <div\n      class=\"stepper-step\"\n      [ngStyle]=\"{ width: 100 / steps.length + '%' }\"\n      [ngClass]=\"{\n          active: step.isActive,\n          completed: step.isCompleted,\n          disabled: isDisabled()\n        }\"\n    >\n      <div class=\"stepper-step-index\">\n        @if (step.isCompleted) {\n        <div>\n          <svg\n            width=\"28\"\n            height=\"28\"\n            viewBox=\"0 0 28 28\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M25.4674 5.47186C26.1505 6.12666 26.1805 7.21877 25.5345 7.91115L11.9594 22.4601C11.3279 23.1369 10.2805 23.1835 9.59296 22.5654L2.5728 16.2545C1.8694 15.6222 1.80492 14.5316 2.42878 13.8186C3.05264 13.1057 4.1286 13.0403 4.832 13.6726L10.6186 18.8746L23.0608 5.53988C23.7068 4.84751 24.7843 4.81705 25.4674 5.47186Z\"\n              fill=\"#FAFAFA\"\n            />\n          </svg>\n        </div>\n        } @else {\n        <span class=\"stepper-step-index--prefix\">\u0428\u0430\u0433</span>\n        <span> {{ i + 1 }} </span>\n        <span class=\"stepper-step-index--postfix\">\u0438\u0437 {{ steps.length }}</span>\n        }\n      </div>\n      <div\n        class=\"stepper-step-title\"\n        [ngClass]=\"{\n            disabled: isDisabled()\n          }\"\n      >\n        {{ step.title() }}\n      </div>\n    </div>\n    }\n    <div class=\"stepper-steps-line\">\n      @if (isDisabled() === false) {\n      <div\n        class=\"stepper-steps-line-active\"\n        [ngStyle]=\"{\n            width: screenWidth | lineWidth: steps.length : completedSteps.length\n          }\"\n      ></div>\n      }\n    </div>\n  </div>\n  <div class=\"stepper-steps-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".stepper{-webkit-user-select:none;user-select:none}.stepper-steps{position:relative;display:flex}.stepper-steps-line{position:absolute;top:27px;right:0;left:0;width:66%;height:6px;margin:0 auto;overflow:hidden;background-color:var(--color-mono-100)}.stepper-steps-line-active{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-blue-500);transition:width,.4s}.stepper-step{position:relative;z-index:var(--z-dropdown);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.stepper-step-index{display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:12px;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);color:var(--white-primary);background-color:var(--color-mono-100);border-radius:30px}.stepper-step-index>div{display:flex}.stepper-step-index>span:first-child+span{display:flex;align-items:center}.stepper-step-index--prefix,.stepper-step-index--postfix{display:none}.stepper-step-title{font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--color-mono-300);text-align:center}.stepper-step-title.disabled{color:var(--color-mono-100)}.stepper-step.active .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.active .stepper-step-title{color:var(--color-blue-500)}.stepper-step.completed .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.disabled .stepper-step-index{background-color:var(--color-mono-100)}.stepper-step.disabled .stepper-step-title{color:var(--color-mono-100)}@media(max-width:767px){.stepper-steps{height:78px}.stepper-steps-line{top:unset;bottom:0;width:100%;background-color:var(--color-mono-100);border-radius:3px}.stepper-steps-line-active{border-radius:3px}.stepper-step{display:none;width:auto!important}.stepper-step-index{width:auto;height:auto;margin-bottom:0;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22.4px;color:var(--color-blue-500);background-color:unset}.stepper-step-index--prefix,.stepper-step-index--postfix,.stepper-step-index>span:first-child+span{display:inline}.stepper-step-title{display:none}.stepper-step.active{display:block}.stepper-step.active .stepper-step-index{display:block;background-color:unset}.stepper-step.active .stepper-step-title{display:block;margin-top:8px;font-weight:var(--font-weight-medium);color:var(--color-mono-900);text-align:left}}\n"] }]
+            args: [{ selector: 'aeb-stepper', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, NgClass, LineWidthPipe], template: "<div class=\"stepper\">\n  <div class=\"stepper-steps\">\n    @for (step of steps; track step; let i = $index) {\n    <div\n      class=\"stepper-step\"\n      [ngStyle]=\"{ width: 100 / steps.length + '%' }\"\n      [ngClass]=\"{\n          active: step.isActive(),\n          completed: step.isCompleted(),\n          disabled: isDisabled()\n        }\"\n    >\n      <div class=\"stepper-step-index\">\n        @if (step.isCompleted()) {\n        <div>\n          <svg\n            width=\"28\"\n            height=\"28\"\n            viewBox=\"0 0 28 28\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M25.4674 5.47186C26.1505 6.12666 26.1805 7.21877 25.5345 7.91115L11.9594 22.4601C11.3279 23.1369 10.2805 23.1835 9.59296 22.5654L2.5728 16.2545C1.8694 15.6222 1.80492 14.5316 2.42878 13.8186C3.05264 13.1057 4.1286 13.0403 4.832 13.6726L10.6186 18.8746L23.0608 5.53988C23.7068 4.84751 24.7843 4.81705 25.4674 5.47186Z\"\n              fill=\"#FAFAFA\"\n            />\n          </svg>\n        </div>\n        } @else {\n        <span class=\"stepper-step-index--prefix\">\u0428\u0430\u0433</span>\n        <span> {{ i + 1 }} </span>\n        <span class=\"stepper-step-index--postfix\">\u0438\u0437 {{ steps.length }}</span>\n        }\n      </div>\n      <div\n        class=\"stepper-step-title\"\n        [ngClass]=\"{\n            disabled: isDisabled()\n          }\"\n      >\n        {{ step.title() }}\n      </div>\n    </div>\n    }\n    <div class=\"stepper-steps-line\">\n      @if (isDisabled() === false) {\n      <div\n        class=\"stepper-steps-line-active\"\n        [ngStyle]=\"{\n            width: screenWidth() | lineWidth: steps.length : completedSteps.length\n          }\"\n      ></div>\n      }\n    </div>\n  </div>\n  <div class=\"stepper-steps-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".stepper{-webkit-user-select:none;user-select:none}.stepper-steps{position:relative;display:flex}.stepper-steps-line{position:absolute;top:27px;right:0;left:0;width:66%;height:6px;margin:0 auto;overflow:hidden;background-color:var(--color-mono-100)}.stepper-steps-line-active{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-blue-500);transition:width,.4s}.stepper-step{position:relative;z-index:var(--z-dropdown);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.stepper-step-index{display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:12px;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);color:var(--white-primary);background-color:var(--color-mono-100);border-radius:30px}.stepper-step-index>div{display:flex}.stepper-step-index>span:first-child+span{display:flex;align-items:center}.stepper-step-index--prefix,.stepper-step-index--postfix{display:none}.stepper-step-title{font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--color-mono-300);text-align:center}.stepper-step-title.disabled{color:var(--color-mono-100)}.stepper-step.active .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.active .stepper-step-title{color:var(--color-blue-500)}.stepper-step.completed .stepper-step-index{background-color:var(--color-blue-500)}.stepper-step.disabled .stepper-step-index{background-color:var(--color-mono-100)}.stepper-step.disabled .stepper-step-title{color:var(--color-mono-100)}@media(max-width:767px){.stepper-steps{height:78px}.stepper-steps-line{top:unset;bottom:0;width:100%;background-color:var(--color-mono-100);border-radius:3px}.stepper-steps-line-active{border-radius:3px}.stepper-step{display:none;width:auto!important}.stepper-step-index{width:auto;height:auto;margin-bottom:0;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22.4px;color:var(--color-blue-500);background-color:unset}.stepper-step-index--prefix,.stepper-step-index--postfix,.stepper-step-index>span:first-child+span{display:inline}.stepper-step-title{display:none}.stepper-step.active{display:block}.stepper-step.active .stepper-step-index{display:block;background-color:unset}.stepper-step.active .stepper-step-title{display:block;margin-top:8px;font-weight:var(--font-weight-medium);color:var(--color-mono-900);text-align:left}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { stepChanged: [{ type: i0.Output, args: ["stepChanged"] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], stepperSteps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepperStep), { isSignal: true }] }] } });
 class StepperModule {
@@ -4907,11 +4882,11 @@ class Table {
         this.action.emit(userAction);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Table, isStandalone: true, selector: "aeb-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, tableContent: { classPropertyName: "tableContent", publicName: "tableContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "@if (tableConfig(); as config) {\n<table class=\"table\">\n  <thead>\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <th align=\"{{ columnHead.align || 'left' }}\" class=\"table-title\">\n        {{ columnHead.title }}\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (columnData of tableContent(); track columnData.id) {\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <td align=\"{{ columnHead.align || 'left' }}\">\n        @switch (columnHead.dataField) { @case ('ROW_ACTION') {\n        <div class=\"table-action\">\n          @for (action of config.rowActions; track action.actionToPerform ||\n          action.logoImageUrl) {\n          <img\n            src=\"{{ action.logoImageUrl }}\"\n            (click)=\"\n                        onRowActionClicked(action.actionToPerform, columnData.id)\n                      \"\n          />\n          }\n        </div>\n        } @case ('STATUS') {\n        <div>\n          @for (status of config.status; track status.label || $index; let i =\n          $index) { @if ($any(columnData)[columnHead.dataProperty] === i) {\n          <div\n            (click)=\"\n                  onRowActionClicked(\n                    columnHead.action || 'SHOW',\n                    columnData.id\n                  )\n                \"\n            class=\"table-status\"\n            [style.color]=\"status.color\"\n          >\n            <img src=\"{{ status.iconUrl }}\" />\n            <span>{{ status.label }}</span>\n          </div>\n          } }\n        </div>\n        } @default {\n        <div\n          (click)=\"\n            onRowActionClicked(columnHead.action || 'SHOW', columnData.id)\n          \"\n          [innerHTML]=\"\n                    $any(columnData)[columnHead.dataProperty]\n                      | formatTable\n                        : columnHead.format?.type ?? ''\n                        : columnHead.format?.placeholder ?? ''\n                        : columnHead.format?.local\n                  \"\n        ></div>\n        } }\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</table>\n}\n", styles: [".table{width:100%}.table-title{padding:16px 0;font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:16px;color:var(--primary-gray)}.table tr td{padding:16px 0;font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--primary-dark);cursor:pointer;border-top:1px solid var(--color-mono-50)}.table tr:last-child td{border-bottom:1px solid var(--color-mono-50)}.table-price{font-size:var(--font-size-s);font-weight:700;line-height:20px}.table-status{display:inline-flex}.table-status>span{margin-left:1rem}.table .table-action{display:flex;justify-content:flex-end}.table .table-action>div{padding:5px}\n"], dependencies: [{ kind: "pipe", type: FormatTablePipe, name: "formatTable" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Table, isStandalone: true, selector: "aeb-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, tableContent: { classPropertyName: "tableContent", publicName: "tableContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "@if (tableConfig(); as config) {\n<table class=\"table\">\n  <thead>\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <th align=\"{{ columnHead.align || 'left' }}\" class=\"table-title\">\n        {{ columnHead.title }}\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (columnData of tableContent(); track columnData.id) {\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <td align=\"{{ columnHead.align || 'left' }}\">\n        @switch (columnHead.dataField) { @case ('ROW_ACTION') {\n        <div class=\"table-action\">\n          @for (action of config.rowActions; track action.actionToPerform ||\n          action.logoImageUrl) {\n          <img\n            src=\"{{ action.logoImageUrl }}\"\n            (click)=\"\n                        onRowActionClicked(action.actionToPerform, columnData.id)\n                      \"\n          />\n          }\n        </div>\n        } @case ('STATUS') {\n        <div>\n          @for (status of config.status; track status.label || $index; let i =\n          $index) { @if ($any(columnData)[columnHead.dataProperty] === i) {\n          <div\n            (click)=\"\n                  onRowActionClicked(\n                    columnHead.action || 'SHOW',\n                    columnData.id\n                  )\n                \"\n            class=\"table-status\"\n            [style.color]=\"status.color\"\n          >\n            <img src=\"{{ status.iconUrl }}\" />\n            <span>{{ status.label }}</span>\n          </div>\n          } }\n        </div>\n        } @default {\n        <div\n          (click)=\"\n            onRowActionClicked(columnHead.action || 'SHOW', columnData.id)\n          \"\n          [innerHTML]=\"\n                    $any(columnData)[columnHead.dataProperty]\n                      | formatTable\n                        : columnHead.format?.type ?? ''\n                        : columnHead.format?.placeholder ?? ''\n                        : columnHead.format?.local\n                  \"\n        ></div>\n        } }\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</table>\n}\n", styles: [".table{width:100%}.table-title{padding:16px 0;font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:16px;color:var(--primary-gray)}.table tr td{padding:16px 0;font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--primary-dark);cursor:pointer;border-top:1px solid var(--color-mono-50)}.table tr:last-child td{border-bottom:1px solid var(--color-mono-50)}.table-price{font-size:var(--font-size-s);font-weight:700;line-height:20px}.table-status{display:inline-flex}.table-status>span{margin-left:1rem}.table .table-action{display:flex;justify-content:flex-end}.table .table-action>div{padding:5px}\n"], dependencies: [{ kind: "pipe", type: FormatTablePipe, name: "formatTable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-table', encapsulation: ViewEncapsulation.None, imports: [FormatTablePipe], template: "@if (tableConfig(); as config) {\n<table class=\"table\">\n  <thead>\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <th align=\"{{ columnHead.align || 'left' }}\" class=\"table-title\">\n        {{ columnHead.title }}\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (columnData of tableContent(); track columnData.id) {\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <td align=\"{{ columnHead.align || 'left' }}\">\n        @switch (columnHead.dataField) { @case ('ROW_ACTION') {\n        <div class=\"table-action\">\n          @for (action of config.rowActions; track action.actionToPerform ||\n          action.logoImageUrl) {\n          <img\n            src=\"{{ action.logoImageUrl }}\"\n            (click)=\"\n                        onRowActionClicked(action.actionToPerform, columnData.id)\n                      \"\n          />\n          }\n        </div>\n        } @case ('STATUS') {\n        <div>\n          @for (status of config.status; track status.label || $index; let i =\n          $index) { @if ($any(columnData)[columnHead.dataProperty] === i) {\n          <div\n            (click)=\"\n                  onRowActionClicked(\n                    columnHead.action || 'SHOW',\n                    columnData.id\n                  )\n                \"\n            class=\"table-status\"\n            [style.color]=\"status.color\"\n          >\n            <img src=\"{{ status.iconUrl }}\" />\n            <span>{{ status.label }}</span>\n          </div>\n          } }\n        </div>\n        } @default {\n        <div\n          (click)=\"\n            onRowActionClicked(columnHead.action || 'SHOW', columnData.id)\n          \"\n          [innerHTML]=\"\n                    $any(columnData)[columnHead.dataProperty]\n                      | formatTable\n                        : columnHead.format?.type ?? ''\n                        : columnHead.format?.placeholder ?? ''\n                        : columnHead.format?.local\n                  \"\n        ></div>\n        } }\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</table>\n}\n", styles: [".table{width:100%}.table-title{padding:16px 0;font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:16px;color:var(--primary-gray)}.table tr td{padding:16px 0;font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--primary-dark);cursor:pointer;border-top:1px solid var(--color-mono-50)}.table tr:last-child td{border-bottom:1px solid var(--color-mono-50)}.table-price{font-size:var(--font-size-s);font-weight:700;line-height:20px}.table-status{display:inline-flex}.table-status>span{margin-left:1rem}.table .table-action{display:flex;justify-content:flex-end}.table .table-action>div{padding:5px}\n"] }]
+            args: [{ selector: 'aeb-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormatTablePipe], template: "@if (tableConfig(); as config) {\n<table class=\"table\">\n  <thead>\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <th align=\"{{ columnHead.align || 'left' }}\" class=\"table-title\">\n        {{ columnHead.title }}\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (columnData of tableContent(); track columnData.id) {\n    <tr>\n      @for (columnHead of config.columns; track columnHead.dataField ||\n      columnHead.title) {\n      <td align=\"{{ columnHead.align || 'left' }}\">\n        @switch (columnHead.dataField) { @case ('ROW_ACTION') {\n        <div class=\"table-action\">\n          @for (action of config.rowActions; track action.actionToPerform ||\n          action.logoImageUrl) {\n          <img\n            src=\"{{ action.logoImageUrl }}\"\n            (click)=\"\n                        onRowActionClicked(action.actionToPerform, columnData.id)\n                      \"\n          />\n          }\n        </div>\n        } @case ('STATUS') {\n        <div>\n          @for (status of config.status; track status.label || $index; let i =\n          $index) { @if ($any(columnData)[columnHead.dataProperty] === i) {\n          <div\n            (click)=\"\n                  onRowActionClicked(\n                    columnHead.action || 'SHOW',\n                    columnData.id\n                  )\n                \"\n            class=\"table-status\"\n            [style.color]=\"status.color\"\n          >\n            <img src=\"{{ status.iconUrl }}\" />\n            <span>{{ status.label }}</span>\n          </div>\n          } }\n        </div>\n        } @default {\n        <div\n          (click)=\"\n            onRowActionClicked(columnHead.action || 'SHOW', columnData.id)\n          \"\n          [innerHTML]=\"\n                    $any(columnData)[columnHead.dataProperty]\n                      | formatTable\n                        : columnHead.format?.type ?? ''\n                        : columnHead.format?.placeholder ?? ''\n                        : columnHead.format?.local\n                  \"\n        ></div>\n        } }\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</table>\n}\n", styles: [".table{width:100%}.table-title{padding:16px 0;font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:16px;color:var(--primary-gray)}.table tr td{padding:16px 0;font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--primary-dark);cursor:pointer;border-top:1px solid var(--color-mono-50)}.table tr:last-child td{border-bottom:1px solid var(--color-mono-50)}.table-price{font-size:var(--font-size-s);font-weight:700;line-height:20px}.table-status{display:inline-flex}.table-status>span{margin-left:1rem}.table .table-action{display:flex;justify-content:flex-end}.table .table-action>div{padding:5px}\n"] }]
         }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: false }] }], tableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableContent", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 class TableModule {
@@ -4993,11 +4968,11 @@ class Tabs {
         this.moveThumb(this.templateTabs()[tab].nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Tabs, isStandalone: true, selector: "aeb-tabs", inputs: { compactMode: { classPropertyName: "compactMode", publicName: "compactMode", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, host: { listeners: { "window:resize": "redrawThumb()" } }, queries: [{ propertyName: "tabs", predicate: TabDirective, isSignal: true }], viewQueries: [{ propertyName: "templateTabs", predicate: ["rtab"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"aeb-tabs\"\n  [ngClass]=\"{\n    'aeb-tabs--compact': compactMode()\n  }\"\n>\n  <div class=\"aeb-tabs__wrapper\">\n    @for (tab of tabs(); track tab) {\n    <div\n      class=\"aeb-tabs__tab\"\n      (click)=\"tabHandler($event, tab)\"\n      [ngClass]=\"{\n          'aeb-tabs__tab--active': tab === currentTab\n        }\"\n      #rtab\n    >\n      {{ tab.name() }}\n    </div>\n    }\n  </div>\n\n  <div class=\"aeb-tabs__thumb\" #thumb></div>\n</div>\n\n@if (currentTab) {\n<ng-template [ngTemplateOutlet]=\"currentTab.template\" />\n}\n", styles: [".aeb-tabs{position:relative;width:100%;padding-bottom:2px;margin-bottom:25px;color:var(--color-mono-900);border-bottom:1px solid var(--color-mono-100)}.aeb-tabs__wrapper{display:flex;width:100%}.aeb-tabs__tab{box-sizing:border-box;padding-bottom:25px;margin-right:50px;cursor:pointer}.aeb-tabs__thumb{position:absolute;left:0;width:0;border-bottom:2px solid var(--color-blue-500);transition:left,width,.1s}.aeb-tabs--compact{padding-bottom:3px}.aeb-tabs--compact .aeb-tabs__tab{padding-bottom:0;margin-right:32px;margin-bottom:8px}.aeb-tabs--compact .aeb-tabs__tab--active{font-weight:var(--font-weight-medium)}.aeb-tabs--compact .aeb-tabs__thumb{border-bottom:4px solid var(--color-blue-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Tabs, isStandalone: true, selector: "aeb-tabs", inputs: { compactMode: { classPropertyName: "compactMode", publicName: "compactMode", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, host: { listeners: { "window:resize": "redrawThumb()" } }, queries: [{ propertyName: "tabs", predicate: TabDirective, isSignal: true }], viewQueries: [{ propertyName: "templateTabs", predicate: ["rtab"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"aeb-tabs\"\n  [ngClass]=\"{\n    'aeb-tabs--compact': compactMode()\n  }\"\n>\n  <div class=\"aeb-tabs__wrapper\">\n    @for (tab of tabs(); track tab) {\n    <div\n      class=\"aeb-tabs__tab\"\n      (click)=\"tabHandler($event, tab)\"\n      [ngClass]=\"{\n          'aeb-tabs__tab--active': tab === currentTab\n        }\"\n      #rtab\n    >\n      {{ tab.name() }}\n    </div>\n    }\n  </div>\n\n  <div class=\"aeb-tabs__thumb\" #thumb></div>\n</div>\n\n@if (currentTab) {\n<ng-template [ngTemplateOutlet]=\"currentTab.template\" />\n}\n", styles: [".aeb-tabs{position:relative;width:100%;padding-bottom:2px;margin-bottom:25px;color:var(--color-mono-900);border-bottom:1px solid var(--color-mono-100)}.aeb-tabs__wrapper{display:flex;width:100%}.aeb-tabs__tab{box-sizing:border-box;padding-bottom:25px;margin-right:50px;cursor:pointer}.aeb-tabs__thumb{position:absolute;left:0;width:0;border-bottom:2px solid var(--color-blue-500);transition:left,width,.1s}.aeb-tabs--compact{padding-bottom:3px}.aeb-tabs--compact .aeb-tabs__tab{padding-bottom:0;margin-right:32px;margin-bottom:8px}.aeb-tabs--compact .aeb-tabs__tab--active{font-weight:var(--font-weight-medium)}.aeb-tabs--compact .aeb-tabs__thumb{border-bottom:4px solid var(--color-blue-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-tabs', encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], host: {
+            args: [{ selector: 'aeb-tabs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgTemplateOutlet], host: {
                         '(window:resize)': 'redrawThumb()'
                     }, template: "<div\n  #container\n  class=\"aeb-tabs\"\n  [ngClass]=\"{\n    'aeb-tabs--compact': compactMode()\n  }\"\n>\n  <div class=\"aeb-tabs__wrapper\">\n    @for (tab of tabs(); track tab) {\n    <div\n      class=\"aeb-tabs__tab\"\n      (click)=\"tabHandler($event, tab)\"\n      [ngClass]=\"{\n          'aeb-tabs__tab--active': tab === currentTab\n        }\"\n      #rtab\n    >\n      {{ tab.name() }}\n    </div>\n    }\n  </div>\n\n  <div class=\"aeb-tabs__thumb\" #thumb></div>\n</div>\n\n@if (currentTab) {\n<ng-template [ngTemplateOutlet]=\"currentTab.template\" />\n}\n", styles: [".aeb-tabs{position:relative;width:100%;padding-bottom:2px;margin-bottom:25px;color:var(--color-mono-900);border-bottom:1px solid var(--color-mono-100)}.aeb-tabs__wrapper{display:flex;width:100%}.aeb-tabs__tab{box-sizing:border-box;padding-bottom:25px;margin-right:50px;cursor:pointer}.aeb-tabs__thumb{position:absolute;left:0;width:0;border-bottom:2px solid var(--color-blue-500);transition:left,width,.1s}.aeb-tabs--compact{padding-bottom:3px}.aeb-tabs--compact .aeb-tabs__tab{padding-bottom:0;margin-right:32px;margin-bottom:8px}.aeb-tabs--compact .aeb-tabs__tab--active{font-weight:var(--font-weight-medium)}.aeb-tabs--compact .aeb-tabs__thumb{border-bottom:4px solid var(--color-blue-500)}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabDirective), { isSignal: true }] }], templateTabs: [{ type: i0.ViewChildren, args: ['rtab', { isSignal: true }] }], thumb: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], compactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMode", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
@@ -5021,11 +4996,11 @@ class TagTab {
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TagTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TagTab, isStandalone: true, selector: "aeb-tag-tab", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tag\" [ngClass]=\"{ 'tag--active': isActive() }\">{{ label() }}</div>\n", styles: [".tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-around;height:48px;padding:14px 24px;margin-right:16px;font-size:var(--font-size-s);line-height:20px;color:var(--color-blue-500);vertical-align:baseline;cursor:pointer;background:var(--color-mono-0);border:var(--border-skinny) solid var(--color-blue-500);border-radius:64px}.tag--active{color:var(--color-mono-0);background:var(--color-blue-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TagTab, isStandalone: true, selector: "aeb-tag-tab", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tag\" [ngClass]=\"{ 'tag--active': isActive() }\">{{ label() }}</div>\n", styles: [".tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-around;height:48px;padding:14px 24px;margin-right:16px;font-size:var(--font-size-s);line-height:20px;color:var(--color-blue-500);vertical-align:baseline;cursor:pointer;background:var(--color-mono-0);border:var(--border-skinny) solid var(--color-blue-500);border-radius:64px}.tag--active{color:var(--color-mono-0);background:var(--color-blue-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TagTab, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-tag-tab', encapsulation: ViewEncapsulation.None, imports: [NgClass], template: "<div class=\"tag\" [ngClass]=\"{ 'tag--active': isActive() }\">{{ label() }}</div>\n", styles: [".tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-around;height:48px;padding:14px 24px;margin-right:16px;font-size:var(--font-size-s);line-height:20px;color:var(--color-blue-500);vertical-align:baseline;cursor:pointer;background:var(--color-mono-0);border:var(--border-skinny) solid var(--color-blue-500);border-radius:64px}.tag--active{color:var(--color-mono-0);background:var(--color-blue-500)}\n"] }]
+            args: [{ selector: 'aeb-tag-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"tag\" [ngClass]=\"{ 'tag--active': isActive() }\">{{ label() }}</div>\n", styles: [".tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-around;height:48px;padding:14px 24px;margin-right:16px;font-size:var(--font-size-s);line-height:20px;color:var(--color-blue-500);vertical-align:baseline;cursor:pointer;background:var(--color-mono-0);border:var(--border-skinny) solid var(--color-blue-500);border-radius:64px}.tag--active{color:var(--color-mono-0);background:var(--color-blue-500)}\n"] }]
         }], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 class TagTabModule {
@@ -5060,11 +5035,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Visa {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Visa, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Visa, isStandalone: true, selector: "aeb-visa", ngImport: i0, template: "<div class=\"aeb-visa\">\n  <h3>\u0412\u0438\u0437\u044B</h3>\n  <div class=\"aeb-visa-timeline\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-visa{box-sizing:border-box;width:100%;padding:24px 22px;color:var(--color-mono-900);background:var(--color-mono-0);border-radius:var(--border-base-rounded)}.aeb-visa>h3{margin:0;font-size:var(--font-size-md);font-weight:700;line-height:23px}.aeb-visa .aeb-visa-timeline{margin-top:3rem}.aeb-visa .aeb-visa-timeline>aeb-visa-item{display:flex;margin-bottom:2rem}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child{margin-bottom:0}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child .aeb-visa-progress{display:none}.aeb-visa .aeb-visa-timeline .aeb-visa-icon{position:relative;z-index:var(--z-dropdown);display:block;flex:none;width:20px;height:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-icon>svg{width:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-progress{position:relative;top:-9px;left:9px;z-index:-1;width:2px;height:70px;background:#e7eaec}.aeb-visa .aeb-visa-timeline .aeb-visa-progress.agreed{background:var(--color-green-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-title{font-size:var(--font-size-s);line-height:22px;color:var(--color-mono-900)}.aeb-visa .aeb-visa-timeline .aeb-visa-status{margin-left:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isReturned .aeb-visa-title{color:var(--color-red-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isAgreed .aeb-visa-title{color:var(--color-green-500)}.aeb-visa-subtitle{display:block;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22px;color:#9ca8af}@media(max-width:767px){.aeb-visa>h3{font-size:var(--font-size-xs)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: Visa, isStandalone: true, selector: "aeb-visa", ngImport: i0, template: "<div class=\"aeb-visa\">\n  <h3>\u0412\u0438\u0437\u044B</h3>\n  <div class=\"aeb-visa-timeline\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-visa{box-sizing:border-box;width:100%;padding:24px 22px;color:var(--color-mono-900);background:var(--color-mono-0);border-radius:var(--border-base-rounded)}.aeb-visa>h3{margin:0;font-size:var(--font-size-md);font-weight:700;line-height:23px}.aeb-visa .aeb-visa-timeline{margin-top:3rem}.aeb-visa .aeb-visa-timeline>aeb-visa-item{display:flex;margin-bottom:2rem}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child{margin-bottom:0}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child .aeb-visa-progress{display:none}.aeb-visa .aeb-visa-timeline .aeb-visa-icon{position:relative;z-index:var(--z-dropdown);display:block;flex:none;width:20px;height:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-icon>svg{width:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-progress{position:relative;top:-9px;left:9px;z-index:-1;width:2px;height:70px;background:#e7eaec}.aeb-visa .aeb-visa-timeline .aeb-visa-progress.agreed{background:var(--color-green-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-title{font-size:var(--font-size-s);line-height:22px;color:var(--color-mono-900)}.aeb-visa .aeb-visa-timeline .aeb-visa-status{margin-left:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isReturned .aeb-visa-title{color:var(--color-red-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isAgreed .aeb-visa-title{color:var(--color-green-500)}.aeb-visa-subtitle{display:block;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22px;color:#9ca8af}@media(max-width:767px){.aeb-visa>h3{font-size:var(--font-size-xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Visa, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-visa', encapsulation: ViewEncapsulation.None, template: "<div class=\"aeb-visa\">\n  <h3>\u0412\u0438\u0437\u044B</h3>\n  <div class=\"aeb-visa-timeline\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-visa{box-sizing:border-box;width:100%;padding:24px 22px;color:var(--color-mono-900);background:var(--color-mono-0);border-radius:var(--border-base-rounded)}.aeb-visa>h3{margin:0;font-size:var(--font-size-md);font-weight:700;line-height:23px}.aeb-visa .aeb-visa-timeline{margin-top:3rem}.aeb-visa .aeb-visa-timeline>aeb-visa-item{display:flex;margin-bottom:2rem}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child{margin-bottom:0}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child .aeb-visa-progress{display:none}.aeb-visa .aeb-visa-timeline .aeb-visa-icon{position:relative;z-index:var(--z-dropdown);display:block;flex:none;width:20px;height:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-icon>svg{width:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-progress{position:relative;top:-9px;left:9px;z-index:-1;width:2px;height:70px;background:#e7eaec}.aeb-visa .aeb-visa-timeline .aeb-visa-progress.agreed{background:var(--color-green-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-title{font-size:var(--font-size-s);line-height:22px;color:var(--color-mono-900)}.aeb-visa .aeb-visa-timeline .aeb-visa-status{margin-left:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isReturned .aeb-visa-title{color:var(--color-red-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isAgreed .aeb-visa-title{color:var(--color-green-500)}.aeb-visa-subtitle{display:block;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22px;color:#9ca8af}@media(max-width:767px){.aeb-visa>h3{font-size:var(--font-size-xs)}}\n"] }]
+            args: [{ selector: 'aeb-visa', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"aeb-visa\">\n  <h3>\u0412\u0438\u0437\u044B</h3>\n  <div class=\"aeb-visa-timeline\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".aeb-visa{box-sizing:border-box;width:100%;padding:24px 22px;color:var(--color-mono-900);background:var(--color-mono-0);border-radius:var(--border-base-rounded)}.aeb-visa>h3{margin:0;font-size:var(--font-size-md);font-weight:700;line-height:23px}.aeb-visa .aeb-visa-timeline{margin-top:3rem}.aeb-visa .aeb-visa-timeline>aeb-visa-item{display:flex;margin-bottom:2rem}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child{margin-bottom:0}.aeb-visa .aeb-visa-timeline aeb-visa-item:last-child .aeb-visa-progress{display:none}.aeb-visa .aeb-visa-timeline .aeb-visa-icon{position:relative;z-index:var(--z-dropdown);display:block;flex:none;width:20px;height:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-icon>svg{width:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-progress{position:relative;top:-9px;left:9px;z-index:-1;width:2px;height:70px;background:#e7eaec}.aeb-visa .aeb-visa-timeline .aeb-visa-progress.agreed{background:var(--color-green-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-title{font-size:var(--font-size-s);line-height:22px;color:var(--color-mono-900)}.aeb-visa .aeb-visa-timeline .aeb-visa-status{margin-left:20px}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isReturned .aeb-visa-title{color:var(--color-red-500)}.aeb-visa .aeb-visa-timeline .aeb-visa-status.isAgreed .aeb-visa-title{color:var(--color-green-500)}.aeb-visa-subtitle{display:block;font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:22px;color:#9ca8af}@media(max-width:767px){.aeb-visa>h3{font-size:var(--font-size-xs)}}\n"] }]
         }] });
 class VisaItem {
@@ -5072,11 +5047,11 @@ class VisaItem {
         this.status = input('isReturned', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VisaItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: VisaItem, isStandalone: true, selector: "aeb-visa-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"aeb-visa-icon\">\n  @switch (status()) { @case ('isReturned') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#FF3055\" />\n    <rect\n      x=\"5\"\n      y=\"5.88379\"\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"rotate(-45 5 5.88379)\"\n      fill=\"white\"\n    />\n    <rect\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"matrix(-0.707107 -0.707107 -0.707107 0.707107 14.7229 5.88379)\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } @case ('isAgreed') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M10.0283 0.0283264C4.5298 0.0127068 0.0439644 4.47313 0.0283447 9.97167C0.012725 15.4702 4.47315 19.9561 9.97169 19.9717C15.4702 19.9873 19.9561 15.5269 19.9717 10.0283C19.9873 4.52978 15.5269 0.0439461 10.0283 0.0283264Z\"\n      fill=\"#00BF41\"\n    />\n    <path\n      d=\"M13.109 6.98264L9.52446 11.2591L7.67997 9.40447C7.35682 9.07906 6.82998 9.07756 6.50498 9.40114C6.17956 9.72471 6.17807 10.2507 6.50164 10.5761L8.98748 13.0761C9.14367 13.2328 9.35491 13.3206 9.5747 13.3213C9.58716 13.3213 9.60004 13.3213 9.61251 13.3205C9.84563 13.3108 10.0641 13.203 10.2141 13.0239L14.3832 8.04991C14.6779 7.69799 14.6316 7.17435 14.2801 6.87918C13.9282 6.58485 13.4037 6.63072 13.109 6.98264Z\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress agreed\"></div>\n  } @case ('isProgress') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#E7EAEC\" />\n    <path\n      d=\"M10 3C6.1402 3 3 6.1402 3 10C3 13.8598 6.1402 17 10 17C13.8598 17 17 13.8598 17 10C17 6.1402 13.8598 3 10 3ZM10 15.5105C6.96153 15.5105 4.48934 13.0386 4.48934 10C4.48934 6.96138 6.96153 4.48948 10 4.48948C13.0385 4.48948 15.5107 6.96138 15.5107 10C15.5107 13.0386 13.0385 15.5105 10 15.5105Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M13.4088 9.95425H10.1823V6.52288C10.1823 6.23412 9.91762 6 9.59116 6C9.26469 6 9 6.23412 9 6.52288V10.4771C9 10.7659 9.26469 11 9.59116 11H13.4088C13.7353 11 14 10.7659 14 10.4771C14 10.1884 13.7353 9.95425 13.4088 9.95425Z\"\n      fill=\"white\"\n      stroke=\"white\"\n      stroke-width=\"0.3\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } }\n</div>\n<div class=\"aeb-visa-status {{ status() }}\">\n  <ng-content />\n</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: VisaItem, isStandalone: true, selector: "aeb-visa-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"aeb-visa-icon\">\n  @switch (status()) { @case ('isReturned') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#FF3055\" />\n    <rect\n      x=\"5\"\n      y=\"5.88379\"\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"rotate(-45 5 5.88379)\"\n      fill=\"white\"\n    />\n    <rect\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"matrix(-0.707107 -0.707107 -0.707107 0.707107 14.7229 5.88379)\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } @case ('isAgreed') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M10.0283 0.0283264C4.5298 0.0127068 0.0439644 4.47313 0.0283447 9.97167C0.012725 15.4702 4.47315 19.9561 9.97169 19.9717C15.4702 19.9873 19.9561 15.5269 19.9717 10.0283C19.9873 4.52978 15.5269 0.0439461 10.0283 0.0283264Z\"\n      fill=\"#00BF41\"\n    />\n    <path\n      d=\"M13.109 6.98264L9.52446 11.2591L7.67997 9.40447C7.35682 9.07906 6.82998 9.07756 6.50498 9.40114C6.17956 9.72471 6.17807 10.2507 6.50164 10.5761L8.98748 13.0761C9.14367 13.2328 9.35491 13.3206 9.5747 13.3213C9.58716 13.3213 9.60004 13.3213 9.61251 13.3205C9.84563 13.3108 10.0641 13.203 10.2141 13.0239L14.3832 8.04991C14.6779 7.69799 14.6316 7.17435 14.2801 6.87918C13.9282 6.58485 13.4037 6.63072 13.109 6.98264Z\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress agreed\"></div>\n  } @case ('isProgress') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#E7EAEC\" />\n    <path\n      d=\"M10 3C6.1402 3 3 6.1402 3 10C3 13.8598 6.1402 17 10 17C13.8598 17 17 13.8598 17 10C17 6.1402 13.8598 3 10 3ZM10 15.5105C6.96153 15.5105 4.48934 13.0386 4.48934 10C4.48934 6.96138 6.96153 4.48948 10 4.48948C13.0385 4.48948 15.5107 6.96138 15.5107 10C15.5107 13.0386 13.0385 15.5105 10 15.5105Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M13.4088 9.95425H10.1823V6.52288C10.1823 6.23412 9.91762 6 9.59116 6C9.26469 6 9 6.23412 9 6.52288V10.4771C9 10.7659 9.26469 11 9.59116 11H13.4088C13.7353 11 14 10.7659 14 10.4771C14 10.1884 13.7353 9.95425 13.4088 9.95425Z\"\n      fill=\"white\"\n      stroke=\"white\"\n      stroke-width=\"0.3\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } }\n</div>\n<div class=\"aeb-visa-status {{ status() }}\">\n  <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VisaItem, decorators: [{
             type: Component,
-            args: [{ selector: 'aeb-visa-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"aeb-visa-icon\">\n  @switch (status()) { @case ('isReturned') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#FF3055\" />\n    <rect\n      x=\"5\"\n      y=\"5.88379\"\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"rotate(-45 5 5.88379)\"\n      fill=\"white\"\n    />\n    <rect\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"matrix(-0.707107 -0.707107 -0.707107 0.707107 14.7229 5.88379)\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } @case ('isAgreed') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M10.0283 0.0283264C4.5298 0.0127068 0.0439644 4.47313 0.0283447 9.97167C0.012725 15.4702 4.47315 19.9561 9.97169 19.9717C15.4702 19.9873 19.9561 15.5269 19.9717 10.0283C19.9873 4.52978 15.5269 0.0439461 10.0283 0.0283264Z\"\n      fill=\"#00BF41\"\n    />\n    <path\n      d=\"M13.109 6.98264L9.52446 11.2591L7.67997 9.40447C7.35682 9.07906 6.82998 9.07756 6.50498 9.40114C6.17956 9.72471 6.17807 10.2507 6.50164 10.5761L8.98748 13.0761C9.14367 13.2328 9.35491 13.3206 9.5747 13.3213C9.58716 13.3213 9.60004 13.3213 9.61251 13.3205C9.84563 13.3108 10.0641 13.203 10.2141 13.0239L14.3832 8.04991C14.6779 7.69799 14.6316 7.17435 14.2801 6.87918C13.9282 6.58485 13.4037 6.63072 13.109 6.98264Z\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress agreed\"></div>\n  } @case ('isProgress') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#E7EAEC\" />\n    <path\n      d=\"M10 3C6.1402 3 3 6.1402 3 10C3 13.8598 6.1402 17 10 17C13.8598 17 17 13.8598 17 10C17 6.1402 13.8598 3 10 3ZM10 15.5105C6.96153 15.5105 4.48934 13.0386 4.48934 10C4.48934 6.96138 6.96153 4.48948 10 4.48948C13.0385 4.48948 15.5107 6.96138 15.5107 10C15.5107 13.0386 13.0385 15.5105 10 15.5105Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M13.4088 9.95425H10.1823V6.52288C10.1823 6.23412 9.91762 6 9.59116 6C9.26469 6 9 6.23412 9 6.52288V10.4771C9 10.7659 9.26469 11 9.59116 11H13.4088C13.7353 11 14 10.7659 14 10.4771C14 10.1884 13.7353 9.95425 13.4088 9.95425Z\"\n      fill=\"white\"\n      stroke=\"white\"\n      stroke-width=\"0.3\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } }\n</div>\n<div class=\"aeb-visa-status {{ status() }}\">\n  <ng-content />\n</div>\n" }]
+            args: [{ selector: 'aeb-visa-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"aeb-visa-icon\">\n  @switch (status()) { @case ('isReturned') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#FF3055\" />\n    <rect\n      x=\"5\"\n      y=\"5.88379\"\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"rotate(-45 5 5.88379)\"\n      fill=\"white\"\n    />\n    <rect\n      width=\"1.75\"\n      height=\"12.5\"\n      rx=\"0.875\"\n      transform=\"matrix(-0.707107 -0.707107 -0.707107 0.707107 14.7229 5.88379)\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } @case ('isAgreed') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M10.0283 0.0283264C4.5298 0.0127068 0.0439644 4.47313 0.0283447 9.97167C0.012725 15.4702 4.47315 19.9561 9.97169 19.9717C15.4702 19.9873 19.9561 15.5269 19.9717 10.0283C19.9873 4.52978 15.5269 0.0439461 10.0283 0.0283264Z\"\n      fill=\"#00BF41\"\n    />\n    <path\n      d=\"M13.109 6.98264L9.52446 11.2591L7.67997 9.40447C7.35682 9.07906 6.82998 9.07756 6.50498 9.40114C6.17956 9.72471 6.17807 10.2507 6.50164 10.5761L8.98748 13.0761C9.14367 13.2328 9.35491 13.3206 9.5747 13.3213C9.58716 13.3213 9.60004 13.3213 9.61251 13.3205C9.84563 13.3108 10.0641 13.203 10.2141 13.0239L14.3832 8.04991C14.6779 7.69799 14.6316 7.17435 14.2801 6.87918C13.9282 6.58485 13.4037 6.63072 13.109 6.98264Z\"\n      fill=\"white\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress agreed\"></div>\n  } @case ('isProgress') {\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#E7EAEC\" />\n    <path\n      d=\"M10 3C6.1402 3 3 6.1402 3 10C3 13.8598 6.1402 17 10 17C13.8598 17 17 13.8598 17 10C17 6.1402 13.8598 3 10 3ZM10 15.5105C6.96153 15.5105 4.48934 13.0386 4.48934 10C4.48934 6.96138 6.96153 4.48948 10 4.48948C13.0385 4.48948 15.5107 6.96138 15.5107 10C15.5107 13.0386 13.0385 15.5105 10 15.5105Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M13.4088 9.95425H10.1823V6.52288C10.1823 6.23412 9.91762 6 9.59116 6C9.26469 6 9 6.23412 9 6.52288V10.4771C9 10.7659 9.26469 11 9.59116 11H13.4088C13.7353 11 14 10.7659 14 10.4771C14 10.1884 13.7353 9.95425 13.4088 9.95425Z\"\n      fill=\"white\"\n      stroke=\"white\"\n      stroke-width=\"0.3\"\n    />\n  </svg>\n  <div class=\"aeb-visa-progress\"></div>\n  } }\n</div>\n<div class=\"aeb-visa-status {{ status() }}\">\n  <ng-content />\n</div>\n" }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
 class VisaModule {
@@ -5307,20 +5282,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class Switch {
     constructor() {
         this._renderer = inject(Renderer2);
-        this._cdr = inject(ChangeDetectorRef);
         this._injector = inject(Injector);
+        this._tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : /* istanbul ignore next */ []));
+        this._checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this.switchInput = viewChild.required('switchInput');
         this.changed = output();
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
         this.warning = input(false, ...(ngDevMode ? [{ debugName: "warning" }] : /* istanbul ignore next */ []));
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.pressed = false;
-        this.checked = false;
-        this.disabled = false;
+        this.pressed = signal(false, ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
         this._onChange = () => { };
         this._onTouched = () => { };
     }
+    get checked() {
+        return this._checked();
+    }
+    set checked(value) {
+        this._checked.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
     toggle(event) {
         event.preventDefault();
         if (this.disabled) {
@@ -5331,20 +5318,19 @@ class Switch {
         this._onChange(this.checked);
         this._onTouched();
         this.changed.emit(this.checked);
-        this._cdr.markForCheck();
     }
     onSpace(event) {
         event.preventDefault();
         this.toggle(event);
     }
     onPressStart() {
-        this.pressed = true;
+        this.pressed.set(true);
     }
     onPressEndMouseUp() {
-        this.pressed = false;
+        this.pressed.set(false);
     }
     onPressEndMouseOut() {
-        this.pressed = false;
+        this.pressed.set(false);
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
@@ -5360,14 +5346,13 @@ class Switch {
         this._ngControl = this._injector.get(NgControl, undefined);
         if (this._ngControl) {
             this._ngControl.valueAccessor = this;
-            this._ngControl.statusChanges?.subscribe(() => this._cdr.markForCheck());
-            this._ngControl.valueChanges?.subscribe(() => this._cdr.markForCheck());
+            this._ngControl.statusChanges?.subscribe(() => this._tick.update((v) => v + 1));
+            this._ngControl.valueChanges?.subscribe(() => this._tick.update((v) => v + 1));
         }
     }
     writeValue(value) {
         this.checked = !!value;
         this._writeInputState();
-        this._cdr.markForCheck();
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -5387,7 +5372,7 @@ class Switch {
                 useExisting: forwardRef(() => Switch),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "switchInput", first: true, predicate: ["switchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"switch-wrapper\">\n  <label\n    class=\"switch\"\n    [class.switch--checked]=\"checked\"\n    [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n    [class.switch--disabled]=\"disabled\"\n    [class.switch--pressed]=\"pressed\"\n    tabindex=\"0\"\n  >\n    <input\n      #switchInput\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      class=\"visually-hidden\"\n      [disabled]=\"disabled\"\n      [checked]=\"checked\"\n    />\n\n    <span class=\"switch-slider\"></span>\n  </label>\n  @if (label()) {\n  <span class=\"switch-label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;outline:none}.switch .switch-slider{position:absolute;inset:0;background-color:var(--color-mono-100);border-radius:12px;transition:background-color .3s,filter .3s}.switch .switch-slider:before{content:\"\";position:absolute;width:18px;height:18px;top:3px;left:3px;background-color:var(--color-mono-0);border-radius:50%;transition:transform .3s}.switch--checked .switch-slider{background-color:var(--color-blue-500)}.switch--checked .switch-slider:before{transform:translate(16px)}.switch--warning .switch-slider{background-color:var(--color-red-100)}.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-500)}.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch--pressed .switch-slider{background-color:var(--color-mono-200)}.switch--pressed.switch--warning .switch-slider{background-color:var(--color-red-200)}.switch--pressed.switch--checked .switch-slider{background-color:var(--color-blue-600);filter:none}.switch--pressed.switch--checked .switch-slider:before{transform:translate(16px)}.switch--pressed.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-600);filter:none}.switch--pressed.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch-label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CodeInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "switchInput", first: true, predicate: ["switchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"switch-wrapper\">\n  <label\n    class=\"switch\"\n    [class.switch--checked]=\"checked\"\n    [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n    [class.switch--disabled]=\"disabled\"\n    [class.switch--pressed]=\"pressed()\"\n    tabindex=\"0\"\n  >\n    <input\n      #switchInput\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      class=\"visually-hidden\"\n      [disabled]=\"disabled\"\n      [checked]=\"checked\"\n    />\n\n    <span class=\"switch-slider\"></span>\n  </label>\n  @if (label()) {\n  <span class=\"switch-label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;outline:none}.switch .switch-slider{position:absolute;inset:0;background-color:var(--color-mono-100);border-radius:12px;transition:background-color .3s,filter .3s}.switch .switch-slider:before{content:\"\";position:absolute;width:18px;height:18px;top:3px;left:3px;background-color:var(--color-mono-0);border-radius:50%;transition:transform .3s}.switch--checked .switch-slider{background-color:var(--color-blue-500)}.switch--checked .switch-slider:before{transform:translate(16px)}.switch--warning .switch-slider{background-color:var(--color-red-100)}.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-500)}.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch--pressed .switch-slider{background-color:var(--color-mono-200)}.switch--pressed.switch--warning .switch-slider{background-color:var(--color-red-200)}.switch--pressed.switch--checked .switch-slider{background-color:var(--color-blue-600);filter:none}.switch--pressed.switch--checked .switch-slider:before{transform:translate(16px)}.switch--pressed.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-600);filter:none}.switch--pressed.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch-label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CodeInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Switch, decorators: [{
             type: Component,
@@ -5407,7 +5392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '(mousedown)': 'onPressStart()',
                         '(mouseup)': 'onPressEndMouseUp()',
                         '(mouseout)': 'onPressEndMouseOut()'
-                    }, template: "<div class=\"switch-wrapper\">\n  <label\n    class=\"switch\"\n    [class.switch--checked]=\"checked\"\n    [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n    [class.switch--disabled]=\"disabled\"\n    [class.switch--pressed]=\"pressed\"\n    tabindex=\"0\"\n  >\n    <input\n      #switchInput\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      class=\"visually-hidden\"\n      [disabled]=\"disabled\"\n      [checked]=\"checked\"\n    />\n\n    <span class=\"switch-slider\"></span>\n  </label>\n  @if (label()) {\n  <span class=\"switch-label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;outline:none}.switch .switch-slider{position:absolute;inset:0;background-color:var(--color-mono-100);border-radius:12px;transition:background-color .3s,filter .3s}.switch .switch-slider:before{content:\"\";position:absolute;width:18px;height:18px;top:3px;left:3px;background-color:var(--color-mono-0);border-radius:50%;transition:transform .3s}.switch--checked .switch-slider{background-color:var(--color-blue-500)}.switch--checked .switch-slider:before{transform:translate(16px)}.switch--warning .switch-slider{background-color:var(--color-red-100)}.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-500)}.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch--pressed .switch-slider{background-color:var(--color-mono-200)}.switch--pressed.switch--warning .switch-slider{background-color:var(--color-red-200)}.switch--pressed.switch--checked .switch-slider{background-color:var(--color-blue-600);filter:none}.switch--pressed.switch--checked .switch-slider:before{transform:translate(16px)}.switch--pressed.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-600);filter:none}.switch--pressed.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch-label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"] }]
+                    }, template: "<div class=\"switch-wrapper\">\n  <label\n    class=\"switch\"\n    [class.switch--checked]=\"checked\"\n    [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n    [class.switch--disabled]=\"disabled\"\n    [class.switch--pressed]=\"pressed()\"\n    tabindex=\"0\"\n  >\n    <input\n      #switchInput\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      class=\"visually-hidden\"\n      [disabled]=\"disabled\"\n      [checked]=\"checked\"\n    />\n\n    <span class=\"switch-slider\"></span>\n  </label>\n  @if (label()) {\n  <span class=\"switch-label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;outline:none}.switch .switch-slider{position:absolute;inset:0;background-color:var(--color-mono-100);border-radius:12px;transition:background-color .3s,filter .3s}.switch .switch-slider:before{content:\"\";position:absolute;width:18px;height:18px;top:3px;left:3px;background-color:var(--color-mono-0);border-radius:50%;transition:transform .3s}.switch--checked .switch-slider{background-color:var(--color-blue-500)}.switch--checked .switch-slider:before{transform:translate(16px)}.switch--warning .switch-slider{background-color:var(--color-red-100)}.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-500)}.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch--pressed .switch-slider{background-color:var(--color-mono-200)}.switch--pressed.switch--warning .switch-slider{background-color:var(--color-red-200)}.switch--pressed.switch--checked .switch-slider{background-color:var(--color-blue-600);filter:none}.switch--pressed.switch--checked .switch-slider:before{transform:translate(16px)}.switch--pressed.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-600);filter:none}.switch--pressed.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch-label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { switchInput: [{ type: i0.ViewChild, args: ['switchInput', { isSignal: true }] }], changed: [{ type: i0.Output, args: ["changed"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 class SwitchModule {
@@ -5431,5 +5416,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { Accordion, AccordionModule, ActionBar, ActionBarModule, AebUiKitModule, AutofocusDirective, Breadcrumps, Button, ButtonLeftIconDirective, ButtonModule, ButtonRightIconDirective, Checkbox, CheckboxGroup, CheckboxModule, ClickOutsideDirective, CodeInput, CodeInputModule, Comment, CommentModule, CreditItemCard, CreditItemCardModule, Datepicker, DatepickerModule, DragAndDropDirective, Dropdown, DropdownMenu, DropdownMenuModule, DropdownModule, ErrorMessageDirective, FileAttach, FileAttachModule, FilterTag, FilterTags, FilterTagsModule, Footer, FooterBottom, FooterMenu, FooterModule, FooterTop, FormField, FormFieldDirective, FormFieldModule, Header, HeaderModule, Heading, HeadingModule, IconDirective, Label, LabelDirective, LabelModule, Logo, Modal, ModalModule, NewsCard, NewsCardModule, Notification, Notifications, NotificationsModule, Pagination, PaginationModule, PopUp, PopUpDirective, PopUpModule, ProductTitle, RadioButtons, RadioButtonsModule, Search, SearchModule, Select, SelectModule, Sidebar, SidebarModule, Slider, SliderModule, SpanSubtitleDirective, SpanTitleDirective, Spinner, SpinnerModule, Stepper, StepperModule, StepperStep, Switch, SwitchModule, TabDirective, Table, TableModule, Tabs, TabsModule, TagTab, TagTabModule, Tooltip, TooltipDirective, TooltipModule, Visa, VisaItem, VisaModule };
+export { Accordion, AccordionModule, ActionBar, ActionBarModule, AebUiKitModule, AutofocusDirective, Breadcrumps, Button, ButtonLeftIconDirective, ButtonModule, ButtonRightIconDirective, Checkbox, CheckboxGroup, CheckboxModule, ClickOutsideDirective, ClickOutsideService, CodeInput, CodeInputModule, Comment, CommentModule, CreditItemCard, CreditItemCardModule, Datepicker, DatepickerModule, DragAndDropDirective, Dropdown, DropdownMenu, DropdownMenuModule, DropdownModule, ErrorMessageDirective, FileAttach, FileAttachModule, FilterTag, FilterTags, FilterTagsModule, Footer, FooterBottom, FooterMenu, FooterModule, FooterTop, FormField, FormFieldDirective, FormFieldModule, Header, HeaderModule, Heading, HeadingModule, IconDirective, Label, LabelDirective, LabelModule, Logo, Modal, ModalModule, NewsCard, NewsCardModule, Notification, Notifications, NotificationsModule, Pagination, PaginationModule, PopUp, PopUpDirective, PopUpModule, ProductTitle, RadioButtons, RadioButtonsModule, Search, SearchModule, Select, SelectModule, Sidebar, SidebarModule, Slider, SliderModule, SpanSubtitleDirective, SpanTitleDirective, Spinner, SpinnerModule, Stepper, StepperModule, StepperStep, Switch, SwitchModule, TabDirective, Table, TableModule, Tabs, TabsModule, TagTab, TagTabModule, Tooltip, TooltipDirective, TooltipModule, Visa, VisaItem, VisaModule };
 //# sourceMappingURL=aeb-ui-kit.mjs.map