trm-tmpl 3.3.0 → 3.3.2

package/fesm2022/trm-tmpl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, ChangeDetectorRef, CSP_NONCE, NgModule, TemplateRef, Directive, Component, ContentChild, HostListener, ElementRef, Renderer2, Pipe, EventEmitter, forwardRef, ChangeDetectionStrategy, Input, Output, SecurityContext, ViewContainerRef, Injector, DestroyRef, ViewChild, ViewChildren } from '@angular/core';
+import { InjectionToken, inject, Injectable, ChangeDetectorRef, CSP_NONCE, NgModule, Directive, TemplateRef, Component, ContentChild, HostListener, ElementRef, Renderer2, Pipe, EventEmitter, forwardRef, ChangeDetectionStrategy, Input, Output, SecurityContext, ViewContainerRef, Injector, DestroyRef, ViewChild, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule, Router, NavigationEnd, NavigationCancel, NavigationError, RouterOutlet, ActivatedRoute } from '@angular/router';
 import { registerLocaleData, DOCUMENT, AsyncPipe, NgTemplateOutlet, NgClass, CommonModule, CurrencyPipe, getCurrencySymbol, Location } from '@angular/common';
@@ -3485,7 +3485,6 @@ class SessionDataSource {
         this.data$ = new BehaviorSubject(undefined);
         this.loading$ = new BehaviorSubject(true);
         this.loadingMethodInfo$ = new BehaviorSubject(true);
-        this.loadingConfirm$ = new BehaviorSubject(null);
         this.configurations = new Map();
         this.feeChangeable = !!this.terminalApi.getFee;
     }
@@ -3566,7 +3565,7 @@ class SessionDataSource {
         }));
     }
     getMethodInfo(currency, typeId) {
-        if (this.loadingMethodInfo$.getValue() !== null) {
+        if (!this.loadingMethodInfo$.getValue()) {
             this.loadingMethodInfo$.next(true);
         }
         if (!typeId || !currency) {
@@ -3585,7 +3584,6 @@ class SessionDataSource {
                 this.payment_token = method.payment_token;
             }
             this.loadingMethodInfo$.next(false);
-            this.loadingConfirm$.next(false);
         }));
     }
     catchError(loading$) {
@@ -3597,20 +3595,14 @@ class SessionDataSource {
         };
     }
     prepare(data) {
-        if (!this.loadingConfirm$.getValue()) {
-            this.loadingConfirm$.next(true);
-        }
         return this.terminalApi
             .postTerminalPaymentPrepare({
             token: this.token,
             terminalPaymentPrepareRequest: data
         })
-            .pipe(delay(2000), catchError(this.catchError(this.loadingConfirm$)), tap(() => this.loadingConfirm$.next(false)));
+            .pipe(delay(2000), catchError(this.catchError()));
     }
     confirm() {
-        if (!this.loadingConfirm$.getValue()) {
-            this.loadingConfirm$.next(true);
-        }
         return this.terminalApi
             .postTerminalPaymentConfirm({
             token: this.token,
@@ -3619,24 +3611,19 @@ class SessionDataSource {
                 gaCookie: this.cookieSrv.get('_ga') || null
             }
         })
-            .pipe(catchError(this.catchError(this.loadingConfirm$)), tap((resp) => {
+            .pipe(catchError(this.catchError()), tap((resp) => {
             this.redirectUrl = resp.redirectUrl;
-            this.loadingConfirm$.next(false);
         }));
     }
     close() {
-        if (!this.loadingConfirm$.getValue()) {
-            this.loadingConfirm$.next(true);
-        }
         return this.terminalApi
             .postTerminalClose({
             token: this.token
         })
-            .pipe(catchError(this.catchError(this.loadingConfirm$)), map(() => {
+            .pipe(catchError(this.catchError()), map(() => {
             if (!this.returnBack()) {
                 const error = { code: I18N_KEY.SESSION_CLOSED };
                 this.apiErrorsSrv.setLocalError(error);
-                this.loadingConfirm$?.next(false);
                 this.cd.markForCheck();
                 throw error;
             }
@@ -3799,9 +3786,6 @@ const provideTerminal = () => {
 };
 
 class FeeTemplateDirective {
-    constructor() {
-        this.tml = inject(TemplateRef);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FeeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: FeeTemplateDirective, isStandalone: true, selector: "[terminalFee]", ngImport: i0 }); }
 }
@@ -3843,13 +3827,13 @@ class TerminalTplComponent {
         this.unSubscriber.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalTplComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalTplComponent, isStandalone: true, selector: "terminal", host: { listeners: { "document:keydown.arrowDown": "next($event,$event.currentTarget)", "document:keydown.arrowUp": "prev($event,$event.currentTarget)" }, classAttribute: "trm" }, queries: [{ propertyName: "feeTpl", first: true, predicate: FeeTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (ready$ | async) {\r\n  <div class=\"app__container\">\r\n    <router-outlet></router-outlet>\r\n  </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalTplComponent, isStandalone: true, selector: "terminal", host: { listeners: { "document:keydown.arrowDown": "next($event,$event.currentTarget)", "document:keydown.arrowUp": "prev($event,$event.currentTarget)" }, classAttribute: "trm" }, queries: [{ propertyName: "feeTpl", first: true, predicate: FeeTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (ready$ | async) {\n  <div class=\"app__container\">\n    <router-outlet></router-outlet>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalTplComponent, decorators: [{
             type: Component,
             args: [{ selector: 'terminal', host: {
                         class: 'trm'
-                    }, standalone: true, imports: [RouterOutlet, AsyncPipe], template: "@if (ready$ | async) {\r\n  <div class=\"app__container\">\r\n    <router-outlet></router-outlet>\r\n  </div>\r\n}\r\n" }]
+                    }, standalone: true, imports: [RouterOutlet, AsyncPipe], template: "@if (ready$ | async) {\n  <div class=\"app__container\">\n    <router-outlet></router-outlet>\n  </div>\n}\n" }]
         }], propDecorators: { feeTpl: [{
                 type: ContentChild,
                 args: [FeeTemplateDirective, { read: TemplateRef, static: false }]
@@ -4114,7 +4098,7 @@ class TrmSelectComponent {
                 useExisting: forwardRef(() => TrmSelectComponent),
                 multi: true,
             }
-        ], queries: [{ propertyName: "labelTeplate", first: true, predicate: TrmSelectLabelTemplateDirective, descendants: true }], ngImport: i0, template: "@if (label) {\r\n  <label class=\"trm-label\"\r\n         [for]=\"name\"\r\n         (click)=\"toggle()\"\r\n  > {{ label }} </label>\r\n}\r\n<div class=\"trm-select\"\r\n     [class.trm-select--noBordered]=\"!hasBorder\"\r\n     [class.trm-select--opened]=\"opened\"\r\n     [class.trm-select--disabled]=\"disabled\"\r\n     [tabindex]=\"tabIndex\"\r\n     (blur)=\"onBlur()\"\r\n     [id]=\"name\"\r\n     (keydown.enter)=\"toggle()\"\r\n>\r\n  @if (labelTpl) {\r\n    <div class=\"trm-select-value\"\r\n         (click)=\"toggle()\">\r\n      @if (selected && selectedItem) {\r\n        <ng-container *ngTemplateOutlet=\"labelTpl; context: {item: selectedItem}\"></ng-container>\r\n      }\r\n      @if (!selected) {\r\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\r\n      }\r\n      <span class=\"trm-select-value__arrow\"\r\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\r\n      @if (data === false) {\r\n        <div class=\"trm-spinner\"></div>\r\n      }\r\n    </div>\r\n    @if (opened && hasScrollbar) {\r\n      <ul class=\"trm-select-list\" @insertRemove>\r\n        <ng-scrollbar appearance=\"compact\" class=\"trm-select-list-scrollbar\" appScrollbarSelectHeight>\r\n          <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\r\n        </ng-scrollbar>\r\n      </ul>\r\n    }\r\n    @if (opened && !hasScrollbar) {\r\n      <ul class=\"trm-select-list\" @insertRemove>\r\n        <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\r\n      </ul>\r\n    }\r\n    <ng-template #listTpl>\r\n      @if (searchable) {\r\n        <li class=\"trm-select-list__item trm-select-list__search\">\r\n          <input class=\"trm-form-field\"\r\n                 [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\r\n                 [tabindex]=\"tabIndex\"\r\n                 (keydown.enter)=\"$event.stopPropagation(); $event.preventDefault();\"\r\n                 [formControl]=\"searchControl\">\r\n        </li>\r\n      }\r\n      @if (searchable && searchControl.value && list.length === 0) {\r\n        <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\r\n        >\r\n          {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\r\n        </li>\r\n      }\r\n      @for (item of list; track getItemValue(item)) {\r\n        <li class=\"trm-select-list__item\"\r\n            (click)=\"select(item)\"\r\n            (keydown.enter)=\"$event.stopPropagation(); select(item)\"\r\n            [tabindex]=\"tabIndex\"\r\n            (blur)=\"onBlur()\">\r\n          @if (item) {\r\n            <ng-container *ngTemplateOutlet=\"labelTpl; context: {item}\"></ng-container>\r\n          }\r\n        </li>\r\n      }\r\n    </ng-template>\r\n  } @else {\r\n    <div class=\"trm-select-value\"\r\n         (click)=\"toggle()\"\r\n         (keydown.enter)=\"toggle()\">\r\n      {{ selectedLabel }}\r\n      @if (!selected) {\r\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\r\n      }\r\n      <span class=\"trm-select-value__arrow\"\r\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\r\n      @if (data === false) {\r\n        <div class=\"trm-spinner\"></div>\r\n      }\r\n    </div>\r\n    @if (opened) {\r\n      <ul class=\"trm-select-list\" @insertRemove>\r\n        <ng-scrollbar class=\"gm-select-list-scrollbar\" appScrollbarSelectHeight>\r\n          @if (searchable) {\r\n            <li class=\"trm-select-list__item trm-select-list__search\">\r\n              <input class=\"trm-form-field\"\r\n                     [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\r\n                     [tabindex]=\"tabIndex\"\r\n                     (keydown.enter)=\"$event.stopPropagation();\"\r\n                     [formControl]=\"searchControl\">\r\n            </li>\r\n          }\r\n          @if (searchable && searchControl.value && list.length === 0) {\r\n            <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\r\n            >\r\n              {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\r\n            </li>\r\n          }\r\n          @for (item of list; track getItemValue(item)) {\r\n            <li class=\"trm-select-list__item\"\r\n                [tabindex]=\"tabIndex\"\r\n                (click)=\"select(item)\"\r\n                (keydown.enter)=\"$event.stopPropagation(); select(item)\"\r\n                (blur)=\"onBlur()\">\r\n              {{ getItemLabel(item) }}\r\n            </li>\r\n          }\r\n        </ng-scrollbar>\r\n      </ul>\r\n    }\r\n  }\r\n</div>\r\n<ng-content select=\"[app-trm-select-hint]\"></ng-content>\r\n", styles: [":host{display:block;--trm-select-border-color: var(--color-base-200);--trm-select-border-color--hover: var(--color-base-250);--trm-select-border-color--focus: var(--color-primary-500);--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-primary-500);--trm-select-border-color--disabled: var(--color-base-200);--trm-select-bg-color--disabled: var(--color-base-50)}:host.ng-invalid.ng-touched.ng-dirty{--trm-select-border-color: var(--color-red-500);--trm-select-border-color--hover: var(--color-red-500);--trm-select-border-color--focus: transparent;--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-base-350)}.trm-select{position:relative;background:var(--trm-select-bg-color, white)}.trm-select:hover .trm-select-value{border-color:var(--trm-select-border-color--hover)}.trm-select:focus,.trm-select:active,.trm-select.trm-select--opened{outline:none}.trm-select:focus .trm-select-value,.trm-select:active .trm-select-value,.trm-select.trm-select--opened .trm-select-value{box-shadow:0 0 0 2px var(--trm-select-border-color--focus);outline:none}.trm-select:focus .trm-select-value__arrow,.trm-select:active .trm-select-value__arrow,.trm-select.trm-select--opened .trm-select-value__arrow{background:var(--trm-select-arrow-color--focus)}.trm-select.trm-select--noBordered{background-color:transparent!important}.trm-select.trm-select--noBordered .trm-select-value{border-color:transparent!important;background-color:transparent!important;box-shadow:none!important;min-height:30px}.trm-select.trm-select--disabled{pointer-events:none}.trm-select.trm-select--disabled .trm-select-value{background:var(--trm-select-bg-color--disabled);outline:none;border:1px solid var(--trm-select-border-color--disabled)}.trm-select.trm-select--disabled .trm-select-value__arrow{display:none}.trm-select-placeholder{font-weight:500;font-size:14px;line-height:20px;color:var(--color-base-350)}@media (min-width: 768px){.trm-select-placeholder{font-weight:500;font-size:15px;line-height:22px;color:var(--color-base-350)}}.trm-select-value{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center;border:1px solid var(--trm-select-border-color);border-radius:var(--trm-select-border-radius, 10px);width:100%;box-sizing:border-box;cursor:pointer;position:relative;min-height:46px;padding:0 var(--trm-select-padding-right, 30px) 0 13px;font-weight:500;font-size:14px;line-height:20px;color:#000}@media (min-width: 768px){.trm-select-value{min-height:50px;padding:0 var(--trm-select-padding-right, 30px) 0 15px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-value__arrow{mask-repeat:no-repeat;mask-size:contain;background:var(--trm-select-arrow-color, black);display:inline-block;height:6px;width:10px;position:absolute;right:var(--trm-select-arrow-right, 15px);top:50%;transform:translateY(-50%);transition:transform ease-in-out .2s}.trm-select-value__arrow-top{transform:translateY(-50%) rotate(180deg)}.trm-select-list{position:absolute;inset:auto auto -10px 0;min-width:100%;margin:0;list-style:none;z-index:100;border:1px solid var(--color-base-150);background:#fff;box-shadow:0 4px 18px #0000000d;border-radius:10px;transform:translateY(100%);box-sizing:border-box;padding:6px;overflow:auto}.trm-select-list__item{box-sizing:border-box;width:100%;padding:9px 10px;border-radius:4px;font-weight:500;font-size:15px;line-height:22px;color:#000;display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center}.trm-select-list__item:hover:not(.trm-select-list__search),.trm-select-list__item:focus:not(.trm-select-list__search),.trm-select-list__item:active:not(.trm-select-list__search){cursor:pointer;background:var(--color-base-50);outline:none}.trm-select-list__item input.trm-form-field{-webkit-appearance:none;border:1px solid var(--trm-input-border-color);border-radius:10px;width:100%;box-sizing:border-box;min-height:46px;padding:12px 20px;font-weight:500;font-size:14px;line-height:20px;color:#000;--trm-input-border-color: var(--color-base-200);--trm-input-border-color--hover: var(--color-base-250);--trm-input-border-color--focus: var(--color-primary-500);--trm-input-border-color--disabled: var(--color-base-200);--trm-input-bg-color--disabled: var(--color-base-50)}@media (min-width: 768px){.trm-select-list__item input.trm-form-field{min-height:50px;padding:13px 20px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-list__item input.trm-form-field:hover{border-color:var(--trm-input-border-color--hover)}.trm-select-list__item input.trm-form-field:focus,.trm-select-list__item input.trm-form-field:active{box-shadow:0 0 0 2px var(--trm-input-border-color--focus);outline:none}.trm-select-list__item.trm-select-list__search-text{justify-content:center;opacity:.8;padding:20px}.trm-select-list-scrollbar{--scrollbar-padding: 0px}.trm-select .trm-spinner{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollbarSelectHeightDirective, selector: "ng-scrollbar[appScrollbarSelectHeight]" }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "labelTeplate", first: true, predicate: TrmSelectLabelTemplateDirective, descendants: true }], ngImport: i0, template: "@if (label) {\n  <label class=\"trm-label\"\n         [for]=\"name\"\n         (click)=\"toggle()\"\n  > {{ label }} </label>\n}\n<div class=\"trm-select\"\n     [class.trm-select--noBordered]=\"!hasBorder\"\n     [class.trm-select--opened]=\"opened\"\n     [class.trm-select--disabled]=\"disabled\"\n     [tabindex]=\"tabIndex\"\n     (blur)=\"onBlur()\"\n     [id]=\"name\"\n     (keydown.enter)=\"toggle()\"\n>\n  @if (labelTpl) {\n    <div class=\"trm-select-value\"\n         (click)=\"toggle()\">\n      @if (selected && selectedItem) {\n        <ng-container *ngTemplateOutlet=\"labelTpl; context: {item: selectedItem}\"></ng-container>\n      }\n      @if (!selected) {\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\n      }\n      <span class=\"trm-select-value__arrow\"\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\n      @if (data === false) {\n        <div class=\"trm-spinner\"></div>\n      }\n    </div>\n    @if (opened && hasScrollbar) {\n      <ul class=\"trm-select-list\" @insertRemove>\n        <ng-scrollbar appearance=\"compact\" class=\"trm-select-list-scrollbar\" appScrollbarSelectHeight>\n          <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\n        </ng-scrollbar>\n      </ul>\n    }\n    @if (opened && !hasScrollbar) {\n      <ul class=\"trm-select-list\" @insertRemove>\n        <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\n      </ul>\n    }\n    <ng-template #listTpl>\n      @if (searchable) {\n        <li class=\"trm-select-list__item trm-select-list__search\">\n          <input class=\"trm-form-field\"\n                 [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\n                 [tabindex]=\"tabIndex\"\n                 (keydown.enter)=\"$event.stopPropagation(); $event.preventDefault();\"\n                 [formControl]=\"searchControl\">\n        </li>\n      }\n      @if (searchable && searchControl.value && list.length === 0) {\n        <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\n        >\n          {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\n        </li>\n      }\n      @for (item of list; track getItemValue(item)) {\n        <li class=\"trm-select-list__item\"\n            (click)=\"select(item)\"\n            (keydown.enter)=\"$event.stopPropagation(); select(item)\"\n            [tabindex]=\"tabIndex\"\n            (blur)=\"onBlur()\">\n          @if (item) {\n            <ng-container *ngTemplateOutlet=\"labelTpl; context: {item}\"></ng-container>\n          }\n        </li>\n      }\n    </ng-template>\n  } @else {\n    <div class=\"trm-select-value\"\n         (click)=\"toggle()\"\n         (keydown.enter)=\"toggle()\">\n      {{ selectedLabel }}\n      @if (!selected) {\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\n      }\n      <span class=\"trm-select-value__arrow\"\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\n      @if (data === false) {\n        <div class=\"trm-spinner\"></div>\n      }\n    </div>\n    @if (opened) {\n      <ul class=\"trm-select-list\" @insertRemove>\n        <ng-scrollbar class=\"gm-select-list-scrollbar\" appScrollbarSelectHeight>\n          @if (searchable) {\n            <li class=\"trm-select-list__item trm-select-list__search\">\n              <input class=\"trm-form-field\"\n                     [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\n                     [tabindex]=\"tabIndex\"\n                     (keydown.enter)=\"$event.stopPropagation();\"\n                     [formControl]=\"searchControl\">\n            </li>\n          }\n          @if (searchable && searchControl.value && list.length === 0) {\n            <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\n            >\n              {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\n            </li>\n          }\n          @for (item of list; track getItemValue(item)) {\n            <li class=\"trm-select-list__item\"\n                [tabindex]=\"tabIndex\"\n                (click)=\"select(item)\"\n                (keydown.enter)=\"$event.stopPropagation(); select(item)\"\n                (blur)=\"onBlur()\">\n              {{ getItemLabel(item) }}\n            </li>\n          }\n        </ng-scrollbar>\n      </ul>\n    }\n  }\n</div>\n<ng-content select=\"[app-trm-select-hint]\"></ng-content>\n", styles: [":host{display:block;--trm-select-border-color: var(--color-base-200);--trm-select-border-color--hover: var(--color-base-250);--trm-select-border-color--focus: var(--color-primary-500);--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-primary-500);--trm-select-border-color--disabled: var(--color-base-200);--trm-select-bg-color--disabled: var(--color-base-50)}:host.ng-invalid.ng-touched.ng-dirty{--trm-select-border-color: var(--color-red-500);--trm-select-border-color--hover: var(--color-red-500);--trm-select-border-color--focus: transparent;--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-base-350)}:host.constructor-field-inner .trm-select-value{min-height:44px;border-top-width:0;border-right-width:0;border-bottom-width:0;border-color:var(--trm-select-border-color)!important}@media (min-width: 768px){:host.constructor-field-inner .trm-select-value{min-height:48px}}.trm-select{position:relative;background:var(--trm-select-bg-color, white)}.trm-select:hover .trm-select-value{border-color:var(--trm-select-border-color--hover)}.trm-select:focus,.trm-select:active,.trm-select.trm-select--opened{outline:none}.trm-select:focus .trm-select-value,.trm-select:active .trm-select-value,.trm-select.trm-select--opened .trm-select-value{box-shadow:0 0 0 2px var(--trm-select-border-color--focus);outline:none}.trm-select:focus .trm-select-value__arrow,.trm-select:active .trm-select-value__arrow,.trm-select.trm-select--opened .trm-select-value__arrow{background:var(--trm-select-arrow-color--focus)}.trm-select.trm-select--noBordered{background-color:transparent!important}.trm-select.trm-select--noBordered .trm-select-value{border-color:transparent!important;background-color:transparent!important;box-shadow:none!important;min-height:30px}.trm-select.trm-select--disabled{pointer-events:none}.trm-select.trm-select--disabled .trm-select-value{background:var(--trm-select-bg-color--disabled);outline:none;border:1px solid var(--trm-select-border-color--disabled)}.trm-select.trm-select--disabled .trm-select-value__arrow{display:none}.trm-select-placeholder{font-weight:500;font-size:14px;line-height:20px;color:var(--color-base-350)}@media (min-width: 768px){.trm-select-placeholder{font-weight:500;font-size:15px;line-height:22px;color:var(--color-base-350)}}.trm-select-value{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center;border:1px solid var(--trm-select-border-color);border-radius:var(--trm-select-border-radius, 10px);width:100%;box-sizing:border-box;cursor:pointer;position:relative;min-height:46px;padding:0 var(--trm-select-padding-right, 30px) 0 13px;font-weight:500;font-size:14px;line-height:20px;color:#000}@media (min-width: 768px){.trm-select-value{min-height:50px;padding:0 var(--trm-select-padding-right, 30px) 0 15px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-value__arrow{mask-repeat:no-repeat;mask-size:contain;background:var(--trm-select-arrow-color, black);display:inline-block;height:6px;width:10px;position:absolute;right:var(--trm-select-arrow-right, 15px);top:50%;transform:translateY(-50%);transition:transform ease-in-out .2s}.trm-select-value__arrow-top{transform:translateY(-50%) rotate(180deg)}.trm-select-list{position:absolute;inset:auto auto -10px 0;min-width:100%;margin:0;list-style:none;z-index:100;border:1px solid var(--color-base-150);background:#fff;box-shadow:0 4px 18px #0000000d;border-radius:10px;transform:translateY(100%);box-sizing:border-box;padding:6px;overflow:auto}.trm-select-list__item{box-sizing:border-box;width:100%;padding:9px 10px;border-radius:4px;font-weight:500;font-size:15px;line-height:22px;color:#000;display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center}.trm-select-list__item:hover:not(.trm-select-list__search),.trm-select-list__item:focus:not(.trm-select-list__search),.trm-select-list__item:active:not(.trm-select-list__search){cursor:pointer;background:var(--color-base-50);outline:none}.trm-select-list__item input.trm-form-field{-webkit-appearance:none;border:1px solid var(--trm-input-border-color);border-radius:10px;width:100%;box-sizing:border-box;min-height:46px;padding:12px 20px;font-weight:500;font-size:14px;line-height:20px;color:#000;--trm-input-border-color: var(--color-base-200);--trm-input-border-color--hover: var(--color-base-250);--trm-input-border-color--focus: var(--color-primary-500);--trm-input-border-color--disabled: var(--color-base-200);--trm-input-bg-color--disabled: var(--color-base-50)}@media (min-width: 768px){.trm-select-list__item input.trm-form-field{min-height:50px;padding:13px 20px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-list__item input.trm-form-field:hover{border-color:var(--trm-input-border-color--hover)}.trm-select-list__item input.trm-form-field:focus,.trm-select-list__item input.trm-form-field:active{box-shadow:0 0 0 2px var(--trm-input-border-color--focus);outline:none}.trm-select-list__item.trm-select-list__search-text{justify-content:center;opacity:.8;padding:20px}.trm-select-list-scrollbar{--scrollbar-padding: 0px}.trm-select .trm-spinner{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollbarSelectHeightDirective, selector: "ng-scrollbar[appScrollbarSelectHeight]" }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TrmSelectComponent, decorators: [{
             type: Component,
@@ -4124,7 +4108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useExisting: forwardRef(() => TrmSelectComponent),
                             multi: true,
                         }
-                    ], animations: [insertRemoveTrigger], standalone: true, imports: [NgTemplateOutlet, NgClass, ScrollbarSelectHeightDirective, NgScrollbar, FormsModule, ReactiveFormsModule, TranslateByKeyPipe], template: "@if (label) {\r\n  <label class=\"trm-label\"\r\n         [for]=\"name\"\r\n         (click)=\"toggle()\"\r\n  > {{ label }} </label>\r\n}\r\n<div class=\"trm-select\"\r\n     [class.trm-select--noBordered]=\"!hasBorder\"\r\n     [class.trm-select--opened]=\"opened\"\r\n     [class.trm-select--disabled]=\"disabled\"\r\n     [tabindex]=\"tabIndex\"\r\n     (blur)=\"onBlur()\"\r\n     [id]=\"name\"\r\n     (keydown.enter)=\"toggle()\"\r\n>\r\n  @if (labelTpl) {\r\n    <div class=\"trm-select-value\"\r\n         (click)=\"toggle()\">\r\n      @if (selected && selectedItem) {\r\n        <ng-container *ngTemplateOutlet=\"labelTpl; context: {item: selectedItem}\"></ng-container>\r\n      }\r\n      @if (!selected) {\r\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\r\n      }\r\n      <span class=\"trm-select-value__arrow\"\r\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\r\n      @if (data === false) {\r\n        <div class=\"trm-spinner\"></div>\r\n      }\r\n    </div>\r\n    @if (opened && hasScrollbar) {\r\n      <ul class=\"trm-select-list\" @insertRemove>\r\n        <ng-scrollbar appearance=\"compact\" class=\"trm-select-list-scrollbar\" appScrollbarSelectHeight>\r\n          <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\r\n        </ng-scrollbar>\r\n      </ul>\r\n    }\r\n    @if (opened && !hasScrollbar) {\r\n      <ul class=\"trm-select-list\" @insertRemove>\r\n        <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\r\n      </ul>\r\n    }\r\n    <ng-template #listTpl>\r\n      @if (searchable) {\r\n        <li class=\"trm-select-list__item trm-select-list__search\">\r\n          <input class=\"trm-form-field\"\r\n                 [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\r\n                 [tabindex]=\"tabIndex\"\r\n                 (keydown.enter)=\"$event.stopPropagation(); $event.preventDefault();\"\r\n                 [formControl]=\"searchControl\">\r\n        </li>\r\n      }\r\n      @if (searchable && searchControl.value && list.length === 0) {\r\n        <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\r\n        >\r\n          {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\r\n        </li>\r\n      }\r\n      @for (item of list; track getItemValue(item)) {\r\n        <li class=\"trm-select-list__item\"\r\n            (click)=\"select(item)\"\r\n            (keydown.enter)=\"$event.stopPropagation(); select(item)\"\r\n            [tabindex]=\"tabIndex\"\r\n            (blur)=\"onBlur()\">\r\n          @if (item) {\r\n            <ng-container *ngTemplateOutlet=\"labelTpl; context: {item}\"></ng-container>\r\n          }\r\n        </li>\r\n      }\r\n    </ng-template>\r\n  } @else {\r\n    <div class=\"trm-select-value\"\r\n         (click)=\"toggle()\"\r\n         (keydown.enter)=\"toggle()\">\r\n      {{ selectedLabel }}\r\n      @if (!selected) {\r\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\r\n      }\r\n      <span class=\"trm-select-value__arrow\"\r\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\r\n      @if (data === false) {\r\n        <div class=\"trm-spinner\"></div>\r\n      }\r\n    </div>\r\n    @if (opened) {\r\n      <ul class=\"trm-select-list\" @insertRemove>\r\n        <ng-scrollbar class=\"gm-select-list-scrollbar\" appScrollbarSelectHeight>\r\n          @if (searchable) {\r\n            <li class=\"trm-select-list__item trm-select-list__search\">\r\n              <input class=\"trm-form-field\"\r\n                     [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\r\n                     [tabindex]=\"tabIndex\"\r\n                     (keydown.enter)=\"$event.stopPropagation();\"\r\n                     [formControl]=\"searchControl\">\r\n            </li>\r\n          }\r\n          @if (searchable && searchControl.value && list.length === 0) {\r\n            <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\r\n            >\r\n              {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\r\n            </li>\r\n          }\r\n          @for (item of list; track getItemValue(item)) {\r\n            <li class=\"trm-select-list__item\"\r\n                [tabindex]=\"tabIndex\"\r\n                (click)=\"select(item)\"\r\n                (keydown.enter)=\"$event.stopPropagation(); select(item)\"\r\n                (blur)=\"onBlur()\">\r\n              {{ getItemLabel(item) }}\r\n            </li>\r\n          }\r\n        </ng-scrollbar>\r\n      </ul>\r\n    }\r\n  }\r\n</div>\r\n<ng-content select=\"[app-trm-select-hint]\"></ng-content>\r\n", styles: [":host{display:block;--trm-select-border-color: var(--color-base-200);--trm-select-border-color--hover: var(--color-base-250);--trm-select-border-color--focus: var(--color-primary-500);--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-primary-500);--trm-select-border-color--disabled: var(--color-base-200);--trm-select-bg-color--disabled: var(--color-base-50)}:host.ng-invalid.ng-touched.ng-dirty{--trm-select-border-color: var(--color-red-500);--trm-select-border-color--hover: var(--color-red-500);--trm-select-border-color--focus: transparent;--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-base-350)}.trm-select{position:relative;background:var(--trm-select-bg-color, white)}.trm-select:hover .trm-select-value{border-color:var(--trm-select-border-color--hover)}.trm-select:focus,.trm-select:active,.trm-select.trm-select--opened{outline:none}.trm-select:focus .trm-select-value,.trm-select:active .trm-select-value,.trm-select.trm-select--opened .trm-select-value{box-shadow:0 0 0 2px var(--trm-select-border-color--focus);outline:none}.trm-select:focus .trm-select-value__arrow,.trm-select:active .trm-select-value__arrow,.trm-select.trm-select--opened .trm-select-value__arrow{background:var(--trm-select-arrow-color--focus)}.trm-select.trm-select--noBordered{background-color:transparent!important}.trm-select.trm-select--noBordered .trm-select-value{border-color:transparent!important;background-color:transparent!important;box-shadow:none!important;min-height:30px}.trm-select.trm-select--disabled{pointer-events:none}.trm-select.trm-select--disabled .trm-select-value{background:var(--trm-select-bg-color--disabled);outline:none;border:1px solid var(--trm-select-border-color--disabled)}.trm-select.trm-select--disabled .trm-select-value__arrow{display:none}.trm-select-placeholder{font-weight:500;font-size:14px;line-height:20px;color:var(--color-base-350)}@media (min-width: 768px){.trm-select-placeholder{font-weight:500;font-size:15px;line-height:22px;color:var(--color-base-350)}}.trm-select-value{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center;border:1px solid var(--trm-select-border-color);border-radius:var(--trm-select-border-radius, 10px);width:100%;box-sizing:border-box;cursor:pointer;position:relative;min-height:46px;padding:0 var(--trm-select-padding-right, 30px) 0 13px;font-weight:500;font-size:14px;line-height:20px;color:#000}@media (min-width: 768px){.trm-select-value{min-height:50px;padding:0 var(--trm-select-padding-right, 30px) 0 15px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-value__arrow{mask-repeat:no-repeat;mask-size:contain;background:var(--trm-select-arrow-color, black);display:inline-block;height:6px;width:10px;position:absolute;right:var(--trm-select-arrow-right, 15px);top:50%;transform:translateY(-50%);transition:transform ease-in-out .2s}.trm-select-value__arrow-top{transform:translateY(-50%) rotate(180deg)}.trm-select-list{position:absolute;inset:auto auto -10px 0;min-width:100%;margin:0;list-style:none;z-index:100;border:1px solid var(--color-base-150);background:#fff;box-shadow:0 4px 18px #0000000d;border-radius:10px;transform:translateY(100%);box-sizing:border-box;padding:6px;overflow:auto}.trm-select-list__item{box-sizing:border-box;width:100%;padding:9px 10px;border-radius:4px;font-weight:500;font-size:15px;line-height:22px;color:#000;display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center}.trm-select-list__item:hover:not(.trm-select-list__search),.trm-select-list__item:focus:not(.trm-select-list__search),.trm-select-list__item:active:not(.trm-select-list__search){cursor:pointer;background:var(--color-base-50);outline:none}.trm-select-list__item input.trm-form-field{-webkit-appearance:none;border:1px solid var(--trm-input-border-color);border-radius:10px;width:100%;box-sizing:border-box;min-height:46px;padding:12px 20px;font-weight:500;font-size:14px;line-height:20px;color:#000;--trm-input-border-color: var(--color-base-200);--trm-input-border-color--hover: var(--color-base-250);--trm-input-border-color--focus: var(--color-primary-500);--trm-input-border-color--disabled: var(--color-base-200);--trm-input-bg-color--disabled: var(--color-base-50)}@media (min-width: 768px){.trm-select-list__item input.trm-form-field{min-height:50px;padding:13px 20px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-list__item input.trm-form-field:hover{border-color:var(--trm-input-border-color--hover)}.trm-select-list__item input.trm-form-field:focus,.trm-select-list__item input.trm-form-field:active{box-shadow:0 0 0 2px var(--trm-input-border-color--focus);outline:none}.trm-select-list__item.trm-select-list__search-text{justify-content:center;opacity:.8;padding:20px}.trm-select-list-scrollbar{--scrollbar-padding: 0px}.trm-select .trm-spinner{margin-left:auto}\n"] }]
+                    ], animations: [insertRemoveTrigger], standalone: true, imports: [NgTemplateOutlet, NgClass, ScrollbarSelectHeightDirective, NgScrollbar, FormsModule, ReactiveFormsModule, TranslateByKeyPipe], template: "@if (label) {\n  <label class=\"trm-label\"\n         [for]=\"name\"\n         (click)=\"toggle()\"\n  > {{ label }} </label>\n}\n<div class=\"trm-select\"\n     [class.trm-select--noBordered]=\"!hasBorder\"\n     [class.trm-select--opened]=\"opened\"\n     [class.trm-select--disabled]=\"disabled\"\n     [tabindex]=\"tabIndex\"\n     (blur)=\"onBlur()\"\n     [id]=\"name\"\n     (keydown.enter)=\"toggle()\"\n>\n  @if (labelTpl) {\n    <div class=\"trm-select-value\"\n         (click)=\"toggle()\">\n      @if (selected && selectedItem) {\n        <ng-container *ngTemplateOutlet=\"labelTpl; context: {item: selectedItem}\"></ng-container>\n      }\n      @if (!selected) {\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\n      }\n      <span class=\"trm-select-value__arrow\"\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\n      @if (data === false) {\n        <div class=\"trm-spinner\"></div>\n      }\n    </div>\n    @if (opened && hasScrollbar) {\n      <ul class=\"trm-select-list\" @insertRemove>\n        <ng-scrollbar appearance=\"compact\" class=\"trm-select-list-scrollbar\" appScrollbarSelectHeight>\n          <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\n        </ng-scrollbar>\n      </ul>\n    }\n    @if (opened && !hasScrollbar) {\n      <ul class=\"trm-select-list\" @insertRemove>\n        <ng-container *ngTemplateOutlet=\"listTpl\"></ng-container>\n      </ul>\n    }\n    <ng-template #listTpl>\n      @if (searchable) {\n        <li class=\"trm-select-list__item trm-select-list__search\">\n          <input class=\"trm-form-field\"\n                 [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\n                 [tabindex]=\"tabIndex\"\n                 (keydown.enter)=\"$event.stopPropagation(); $event.preventDefault();\"\n                 [formControl]=\"searchControl\">\n        </li>\n      }\n      @if (searchable && searchControl.value && list.length === 0) {\n        <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\n        >\n          {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\n        </li>\n      }\n      @for (item of list; track getItemValue(item)) {\n        <li class=\"trm-select-list__item\"\n            (click)=\"select(item)\"\n            (keydown.enter)=\"$event.stopPropagation(); select(item)\"\n            [tabindex]=\"tabIndex\"\n            (blur)=\"onBlur()\">\n          @if (item) {\n            <ng-container *ngTemplateOutlet=\"labelTpl; context: {item}\"></ng-container>\n          }\n        </li>\n      }\n    </ng-template>\n  } @else {\n    <div class=\"trm-select-value\"\n         (click)=\"toggle()\"\n         (keydown.enter)=\"toggle()\">\n      {{ selectedLabel }}\n      @if (!selected) {\n        <span class=\"trm-select-placeholder\">{{ placeholder }}</span>\n      }\n      <span class=\"trm-select-value__arrow\"\n            [ngClass]=\"{'trm-select-value__arrow-top': opened}\"></span>\n      @if (data === false) {\n        <div class=\"trm-spinner\"></div>\n      }\n    </div>\n    @if (opened) {\n      <ul class=\"trm-select-list\" @insertRemove>\n        <ng-scrollbar class=\"gm-select-list-scrollbar\" appScrollbarSelectHeight>\n          @if (searchable) {\n            <li class=\"trm-select-list__item trm-select-list__search\">\n              <input class=\"trm-form-field\"\n                     [placeholder]=\"I18N_KEY.SELECT_SEARCH | trans\"\n                     [tabindex]=\"tabIndex\"\n                     (keydown.enter)=\"$event.stopPropagation();\"\n                     [formControl]=\"searchControl\">\n            </li>\n          }\n          @if (searchable && searchControl.value && list.length === 0) {\n            <li class=\"trm-select-list__item trm-select-list__search trm-select-list__search-text\"\n            >\n              {{ I18N_KEY.SELECT_EMPTY_LIST | trans }}\n            </li>\n          }\n          @for (item of list; track getItemValue(item)) {\n            <li class=\"trm-select-list__item\"\n                [tabindex]=\"tabIndex\"\n                (click)=\"select(item)\"\n                (keydown.enter)=\"$event.stopPropagation(); select(item)\"\n                (blur)=\"onBlur()\">\n              {{ getItemLabel(item) }}\n            </li>\n          }\n        </ng-scrollbar>\n      </ul>\n    }\n  }\n</div>\n<ng-content select=\"[app-trm-select-hint]\"></ng-content>\n", styles: [":host{display:block;--trm-select-border-color: var(--color-base-200);--trm-select-border-color--hover: var(--color-base-250);--trm-select-border-color--focus: var(--color-primary-500);--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-primary-500);--trm-select-border-color--disabled: var(--color-base-200);--trm-select-bg-color--disabled: var(--color-base-50)}:host.ng-invalid.ng-touched.ng-dirty{--trm-select-border-color: var(--color-red-500);--trm-select-border-color--hover: var(--color-red-500);--trm-select-border-color--focus: transparent;--trm-select-arrow-color: var(--color-base-350);--trm-select-arrow-color--focus: var(--color-base-350)}:host.constructor-field-inner .trm-select-value{min-height:44px;border-top-width:0;border-right-width:0;border-bottom-width:0;border-color:var(--trm-select-border-color)!important}@media (min-width: 768px){:host.constructor-field-inner .trm-select-value{min-height:48px}}.trm-select{position:relative;background:var(--trm-select-bg-color, white)}.trm-select:hover .trm-select-value{border-color:var(--trm-select-border-color--hover)}.trm-select:focus,.trm-select:active,.trm-select.trm-select--opened{outline:none}.trm-select:focus .trm-select-value,.trm-select:active .trm-select-value,.trm-select.trm-select--opened .trm-select-value{box-shadow:0 0 0 2px var(--trm-select-border-color--focus);outline:none}.trm-select:focus .trm-select-value__arrow,.trm-select:active .trm-select-value__arrow,.trm-select.trm-select--opened .trm-select-value__arrow{background:var(--trm-select-arrow-color--focus)}.trm-select.trm-select--noBordered{background-color:transparent!important}.trm-select.trm-select--noBordered .trm-select-value{border-color:transparent!important;background-color:transparent!important;box-shadow:none!important;min-height:30px}.trm-select.trm-select--disabled{pointer-events:none}.trm-select.trm-select--disabled .trm-select-value{background:var(--trm-select-bg-color--disabled);outline:none;border:1px solid var(--trm-select-border-color--disabled)}.trm-select.trm-select--disabled .trm-select-value__arrow{display:none}.trm-select-placeholder{font-weight:500;font-size:14px;line-height:20px;color:var(--color-base-350)}@media (min-width: 768px){.trm-select-placeholder{font-weight:500;font-size:15px;line-height:22px;color:var(--color-base-350)}}.trm-select-value{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center;border:1px solid var(--trm-select-border-color);border-radius:var(--trm-select-border-radius, 10px);width:100%;box-sizing:border-box;cursor:pointer;position:relative;min-height:46px;padding:0 var(--trm-select-padding-right, 30px) 0 13px;font-weight:500;font-size:14px;line-height:20px;color:#000}@media (min-width: 768px){.trm-select-value{min-height:50px;padding:0 var(--trm-select-padding-right, 30px) 0 15px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-value__arrow{mask-repeat:no-repeat;mask-size:contain;background:var(--trm-select-arrow-color, black);display:inline-block;height:6px;width:10px;position:absolute;right:var(--trm-select-arrow-right, 15px);top:50%;transform:translateY(-50%);transition:transform ease-in-out .2s}.trm-select-value__arrow-top{transform:translateY(-50%) rotate(180deg)}.trm-select-list{position:absolute;inset:auto auto -10px 0;min-width:100%;margin:0;list-style:none;z-index:100;border:1px solid var(--color-base-150);background:#fff;box-shadow:0 4px 18px #0000000d;border-radius:10px;transform:translateY(100%);box-sizing:border-box;padding:6px;overflow:auto}.trm-select-list__item{box-sizing:border-box;width:100%;padding:9px 10px;border-radius:4px;font-weight:500;font-size:15px;line-height:22px;color:#000;display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:center}.trm-select-list__item:hover:not(.trm-select-list__search),.trm-select-list__item:focus:not(.trm-select-list__search),.trm-select-list__item:active:not(.trm-select-list__search){cursor:pointer;background:var(--color-base-50);outline:none}.trm-select-list__item input.trm-form-field{-webkit-appearance:none;border:1px solid var(--trm-input-border-color);border-radius:10px;width:100%;box-sizing:border-box;min-height:46px;padding:12px 20px;font-weight:500;font-size:14px;line-height:20px;color:#000;--trm-input-border-color: var(--color-base-200);--trm-input-border-color--hover: var(--color-base-250);--trm-input-border-color--focus: var(--color-primary-500);--trm-input-border-color--disabled: var(--color-base-200);--trm-input-bg-color--disabled: var(--color-base-50)}@media (min-width: 768px){.trm-select-list__item input.trm-form-field{min-height:50px;padding:13px 20px;font-weight:500;font-size:15px;line-height:22px;color:#000}}.trm-select-list__item input.trm-form-field:hover{border-color:var(--trm-input-border-color--hover)}.trm-select-list__item input.trm-form-field:focus,.trm-select-list__item input.trm-form-field:active{box-shadow:0 0 0 2px var(--trm-input-border-color--focus);outline:none}.trm-select-list__item.trm-select-list__search-text{justify-content:center;opacity:.8;padding:20px}.trm-select-list-scrollbar{--scrollbar-padding: 0px}.trm-select .trm-spinner{margin-left:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], hasBorder: [{
@@ -4186,11 +4170,11 @@ class TerminalLangSwitcherComponent {
         this.unSubscriber.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLangSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalLangSwitcherComponent, isStandalone: true, selector: "app-terminal-lang-switcher", inputs: { loading: "loading", tabIndex: "tabIndex" }, outputs: { langChange: "langChange" }, ngImport: i0, template: "@if (!loading) {\r\n  <app-trm-select class=\"lang-switcher\"\r\n    [hasBorder]=\"false\"\r\n    [searchable]=\"false\"\r\n    [hasScrollbar]=\"false\"\r\n    [data]=\"langs\"\r\n    [ngModel]=\"lang\"\r\n    [tabIndex]=\"tabIndex\"\r\n    (ngModelChange)=\"changeLang($event)\"\r\n    >\r\n    <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n      <span class=\"fi\" [ngClass]=\"'fi-' + translation_keys[item].code\"></span>\r\n      <span> {{translation_keys[item].name | translate}}</span>\r\n    </ng-template>\r\n  </app-trm-select>\r\n} @else {\r\n  <gm-skeleton [count]=\"1\" [size]=\"30\"></gm-skeleton>\r\n}\r\n", styles: [":host{display:block}@media (min-width: 768px){:host{min-width:108px}}.lang-switcher{--trm-select-padding-right: 20px;--trm-select-arrow-right: 0;width:100%}.fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.fi~span{display:none}@media (min-width: 768px){.fi~span{display:inline}}.trm-skeleton{min-width:70px}.trm-skeleton .loader,.trm-skeleton .skeleton-loader{height:30px}\n"], dependencies: [{ kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TrmSelectLabelTemplateDirective, selector: "[trmSelectLabelTemplate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalLangSwitcherComponent, isStandalone: true, selector: "app-terminal-lang-switcher", inputs: { loading: "loading", tabIndex: "tabIndex" }, outputs: { langChange: "langChange" }, ngImport: i0, template: "@if (!loading) {\n  <app-trm-select class=\"lang-switcher\"\n    [hasBorder]=\"false\"\n    [searchable]=\"false\"\n    [hasScrollbar]=\"false\"\n    [data]=\"langs\"\n    [ngModel]=\"lang\"\n    [tabIndex]=\"tabIndex\"\n    (ngModelChange)=\"changeLang($event)\"\n    >\n    <ng-template trmSelectLabelTemplate let-item=\"item\">\n      <span class=\"fi\" [ngClass]=\"'fi-' + translation_keys[item].code\"></span>\n      <span> {{translation_keys[item].name | translate}}</span>\n    </ng-template>\n  </app-trm-select>\n} @else {\n  <gm-skeleton [count]=\"1\" [size]=\"30\"></gm-skeleton>\n}\n", styles: [":host{display:block}@media (min-width: 768px){:host{min-width:108px}}.lang-switcher{--trm-select-padding-right: 20px;--trm-select-arrow-right: 0;width:100%}.fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.fi~span{display:none}@media (min-width: 768px){.fi~span{display:inline}}.trm-skeleton{min-width:70px}.trm-skeleton .loader,.trm-skeleton .skeleton-loader{height:30px}\n"], dependencies: [{ kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TrmSelectLabelTemplateDirective, selector: "[trmSelectLabelTemplate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLangSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-terminal-lang-switcher', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TrmSelectComponent, FormsModule, TrmSelectLabelTemplateDirective, NgClass, TranslateModule, GmSkeletonComponent], template: "@if (!loading) {\r\n  <app-trm-select class=\"lang-switcher\"\r\n    [hasBorder]=\"false\"\r\n    [searchable]=\"false\"\r\n    [hasScrollbar]=\"false\"\r\n    [data]=\"langs\"\r\n    [ngModel]=\"lang\"\r\n    [tabIndex]=\"tabIndex\"\r\n    (ngModelChange)=\"changeLang($event)\"\r\n    >\r\n    <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n      <span class=\"fi\" [ngClass]=\"'fi-' + translation_keys[item].code\"></span>\r\n      <span> {{translation_keys[item].name | translate}}</span>\r\n    </ng-template>\r\n  </app-trm-select>\r\n} @else {\r\n  <gm-skeleton [count]=\"1\" [size]=\"30\"></gm-skeleton>\r\n}\r\n", styles: [":host{display:block}@media (min-width: 768px){:host{min-width:108px}}.lang-switcher{--trm-select-padding-right: 20px;--trm-select-arrow-right: 0;width:100%}.fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.fi~span{display:none}@media (min-width: 768px){.fi~span{display:inline}}.trm-skeleton{min-width:70px}.trm-skeleton .loader,.trm-skeleton .skeleton-loader{height:30px}\n"] }]
+            args: [{ selector: 'app-terminal-lang-switcher', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TrmSelectComponent, FormsModule, TrmSelectLabelTemplateDirective, NgClass, TranslateModule, GmSkeletonComponent], template: "@if (!loading) {\n  <app-trm-select class=\"lang-switcher\"\n    [hasBorder]=\"false\"\n    [searchable]=\"false\"\n    [hasScrollbar]=\"false\"\n    [data]=\"langs\"\n    [ngModel]=\"lang\"\n    [tabIndex]=\"tabIndex\"\n    (ngModelChange)=\"changeLang($event)\"\n    >\n    <ng-template trmSelectLabelTemplate let-item=\"item\">\n      <span class=\"fi\" [ngClass]=\"'fi-' + translation_keys[item].code\"></span>\n      <span> {{translation_keys[item].name | translate}}</span>\n    </ng-template>\n  </app-trm-select>\n} @else {\n  <gm-skeleton [count]=\"1\" [size]=\"30\"></gm-skeleton>\n}\n", styles: [":host{display:block}@media (min-width: 768px){:host{min-width:108px}}.lang-switcher{--trm-select-padding-right: 20px;--trm-select-arrow-right: 0;width:100%}.fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.fi~span{display:none}@media (min-width: 768px){.fi~span{display:inline}}.trm-skeleton{min-width:70px}.trm-skeleton .loader,.trm-skeleton .skeleton-loader{height:30px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { loading: [{
                 type: Input
             }], langChange: [{
@@ -4228,11 +4212,11 @@ class TerminalLayoutTplComponent {
         this.unSubscriber.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLayoutTplComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalLayoutTplComponent, isStandalone: true, selector: "app-terminal-layout-tpl", inputs: { projectName: "projectName", description: "description", loading: "loading" }, ngImport: i0, template: "<ng-scrollbar appearance=\"compact\">\r\n  <div class=\"terminal-layout\">\r\n    <section class=\"terminal\">\r\n      <div class=\"terminal__content\">\r\n        <header class=\"terminal__header\">\r\n          <i class=\"terminal__header-logo\"\r\n          [class]=\"logoClass\"></i>\r\n          <div class=\"terminal__header-lang\">\r\n            @if (hasChoice) {\r\n              <app-terminal-lang-switcher\r\n                [loading]=\"loading\"\r\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\r\n            }\r\n          </div>\r\n        </header>\r\n        <div class=\"terminal__form\">\r\n          <ng-content selector=\"[terminal-layout-status]\"></ng-content>\r\n          <ng-content selector=\"[terminal-layout-form]\"></ng-content>\r\n          @if (loading) {\r\n            <div class=\"trm-skeleton-group\">\r\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <footer class=\"terminal-footer\">\r\n      <i class=\"terminal-footer__logo\"></i>\r\n      <p class=\"terminal-footer__txt\">\r\n        {{footerText}}\r\n      </p>\r\n    </footer>\r\n  </div>\r\n</ng-scrollbar>\r\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;min-height:300px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}@media (min-width: 768px){.terminal__header-logo{width:143px;height:30px}}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%;margin:auto}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: TerminalLangSwitcherComponent, selector: "app-terminal-lang-switcher", inputs: ["loading", "tabIndex"], outputs: ["langChange"] }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalLayoutTplComponent, isStandalone: true, selector: "app-terminal-layout-tpl", inputs: { projectName: "projectName", description: "description", loading: "loading" }, ngImport: i0, template: "<ng-scrollbar appearance=\"compact\">\n  <div class=\"terminal-layout\">\n    <section class=\"terminal\">\n      <div class=\"terminal__content\">\n        <header class=\"terminal__header\">\n          <i class=\"terminal__header-logo\"\n          [class]=\"logoClass\"></i>\n          <div class=\"terminal__header-lang\">\n            @if (hasChoice) {\n              <app-terminal-lang-switcher\n                [loading]=\"loading\"\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\n            }\n          </div>\n        </header>\n        <div class=\"terminal__form\">\n          <ng-content selector=\"[terminal-layout-status]\"></ng-content>\n          <ng-content selector=\"[terminal-layout-form]\"></ng-content>\n          @if (loading) {\n            <div class=\"trm-skeleton-group\">\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n    <footer class=\"terminal-footer\">\n      <i class=\"terminal-footer__logo\"></i>\n      <p class=\"terminal-footer__txt\">\n        {{footerText}}\n      </p>\n    </footer>\n  </div>\n</ng-scrollbar>\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;min-height:300px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}@media (min-width: 768px){.terminal__header-logo{width:143px;height:30px}}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%;margin:auto}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: TerminalLangSwitcherComponent, selector: "app-terminal-lang-switcher", inputs: ["loading", "tabIndex"], outputs: ["langChange"] }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLayoutTplComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-terminal-layout-tpl', standalone: true, imports: [NgScrollbar, TerminalLangSwitcherComponent, GmSkeletonComponent], template: "<ng-scrollbar appearance=\"compact\">\r\n  <div class=\"terminal-layout\">\r\n    <section class=\"terminal\">\r\n      <div class=\"terminal__content\">\r\n        <header class=\"terminal__header\">\r\n          <i class=\"terminal__header-logo\"\r\n          [class]=\"logoClass\"></i>\r\n          <div class=\"terminal__header-lang\">\r\n            @if (hasChoice) {\r\n              <app-terminal-lang-switcher\r\n                [loading]=\"loading\"\r\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\r\n            }\r\n          </div>\r\n        </header>\r\n        <div class=\"terminal__form\">\r\n          <ng-content selector=\"[terminal-layout-status]\"></ng-content>\r\n          <ng-content selector=\"[terminal-layout-form]\"></ng-content>\r\n          @if (loading) {\r\n            <div class=\"trm-skeleton-group\">\r\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <footer class=\"terminal-footer\">\r\n      <i class=\"terminal-footer__logo\"></i>\r\n      <p class=\"terminal-footer__txt\">\r\n        {{footerText}}\r\n      </p>\r\n    </footer>\r\n  </div>\r\n</ng-scrollbar>\r\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;min-height:300px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}@media (min-width: 768px){.terminal__header-logo{width:143px;height:30px}}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%;margin:auto}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"] }]
+            args: [{ selector: 'app-terminal-layout-tpl', standalone: true, imports: [NgScrollbar, TerminalLangSwitcherComponent, GmSkeletonComponent], template: "<ng-scrollbar appearance=\"compact\">\n  <div class=\"terminal-layout\">\n    <section class=\"terminal\">\n      <div class=\"terminal__content\">\n        <header class=\"terminal__header\">\n          <i class=\"terminal__header-logo\"\n          [class]=\"logoClass\"></i>\n          <div class=\"terminal__header-lang\">\n            @if (hasChoice) {\n              <app-terminal-lang-switcher\n                [loading]=\"loading\"\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\n            }\n          </div>\n        </header>\n        <div class=\"terminal__form\">\n          <ng-content selector=\"[terminal-layout-status]\"></ng-content>\n          <ng-content selector=\"[terminal-layout-form]\"></ng-content>\n          @if (loading) {\n            <div class=\"trm-skeleton-group\">\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n    <footer class=\"terminal-footer\">\n      <i class=\"terminal-footer__logo\"></i>\n      <p class=\"terminal-footer__txt\">\n        {{footerText}}\n      </p>\n    </footer>\n  </div>\n</ng-scrollbar>\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;min-height:300px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}@media (min-width: 768px){.terminal__header-logo{width:143px;height:30px}}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%;margin:auto}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectName: [{
                 type: Input
             }], description: [{
@@ -4273,11 +4257,11 @@ class ConstructorStatusComponent {
         return this.versionSrv.supportEmail;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorStatusComponent, isStandalone: true, selector: "app-constructor-status", inputs: { failed: "failed", inProgress: "inProgress", animation: "animation", message: "message", failTitle: "failTitle", progressTitle: "progressTitle", successTitle: "successTitle", tabIndex: "tabIndex", backUrl: "backUrl", backUrlTitle: "backUrlTitle", hasSupportHint: "hasSupportHint" }, ngImport: i0, template: "<div class=\"c-status\">\r\n  <div class=\"c-status__content\"\r\n    [class.c-status--failed]=\"failed\"\r\n    [class.c-status--progress]=\"inProgress\"\r\n    [class.c-status--live]=\"animation\"\r\n    >\r\n    <i class=\"c-status__img\"></i>\r\n    <h5 class=\"c-status__title\">\r\n      @if (inProgress) {\r\n        {{ progressTitle || (I18N_KEY.PROGRESS_TITLE | trans) }}\r\n      } @else {\r\n        @if (failed) {\r\n          {{ failTitle || (I18N_KEY.TERMINAL_SESSION_BREAK | trans) }}\r\n        }\r\n        @if (!failed) {\r\n          {{ successTitle || (I18N_KEY.TERMINAL_SESSION_SUCCESS | trans) }}\r\n        }\r\n      }\r\n    </h5>\r\n    <div class=\"c-status__msg\" [innerHTML]=\"message | sanitize: SecurityContext.HTML\"> {{ message }}</div>\r\n    @if (hasSupportHint) {\r\n      <div class=\"c-status__hint\">\r\n        {{ I18N_KEY.TERMINAL_SESSION_SUPPORT | trans }}:\r\n        @if (supportEmail) {\r\n          <a [href]=\"'mailto:' + supportEmail\"> {{ supportEmail }} </a>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!!backUrl) {\r\n    <div class=\"c-status__actions\">\r\n      <a class=\"trm-button trm-button--primary\"\r\n        [tabindex]=\"tabIndex\"\r\n      [href]=\"backUrl | sanitize: SecurityContext.URL\"> {{ backUrlTitle || (I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans) }}</a>\r\n      <div class=\"c-status__hint c-status__hint-button\">\r\n        <ng-content constructor-status-button-hint></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.c-status{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.c-status__content{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:stretch}.c-status--progress.c-status--live~.c-status__actions{display:none}.c-status__img{flex:none;margin-bottom:10px;align-self:center;border:0}.c-status__title{text-align:center;align-self:center}.c-status__msg{align-self:center;white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis}.c-status__msg,.c-status__hint{text-align:center;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.c-status__hint-button{font-size:14px}.c-status__actions{display:flex;flex-direction:column;gap:4px;justify-content:stretch;align-items:stretch}.c-status__actions .trm-button{color:#fff!important}\n"], dependencies: [{ kind: "pipe", type: SanitizerPipe, name: "sanitize" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorStatusComponent, isStandalone: true, selector: "app-constructor-status", inputs: { failed: "failed", inProgress: "inProgress", animation: "animation", message: "message", failTitle: "failTitle", progressTitle: "progressTitle", successTitle: "successTitle", tabIndex: "tabIndex", backUrl: "backUrl", backUrlTitle: "backUrlTitle", hasSupportHint: "hasSupportHint" }, ngImport: i0, template: "<div class=\"c-status\">\n  <div class=\"c-status__content\"\n    [class.c-status--failed]=\"failed\"\n    [class.c-status--progress]=\"inProgress\"\n    [class.c-status--live]=\"animation\"\n    >\n    <i class=\"c-status__img\"></i>\n    <h5 class=\"c-status__title\">\n      @if (inProgress) {\n        {{ progressTitle || (I18N_KEY.PROGRESS_TITLE | trans) }}\n      } @else {\n        @if (failed) {\n          {{ failTitle || (I18N_KEY.TERMINAL_SESSION_BREAK | trans) }}\n        }\n        @if (!failed) {\n          {{ successTitle || (I18N_KEY.TERMINAL_SESSION_SUCCESS | trans) }}\n        }\n      }\n    </h5>\n    <div class=\"c-status__msg\" [innerHTML]=\"message | sanitize: SecurityContext.HTML\"> {{ message }}</div>\n    @if (hasSupportHint) {\n      <div class=\"c-status__hint\">\n        {{ I18N_KEY.TERMINAL_SESSION_SUPPORT | trans }}:\n        @if (supportEmail) {\n          <a [href]=\"'mailto:' + supportEmail\"> {{ supportEmail }} </a>\n        }\n      </div>\n    }\n  </div>\n  @if (!!backUrl) {\n    <div class=\"c-status__actions\">\n      <a class=\"trm-button trm-button--primary\"\n        [tabindex]=\"tabIndex\"\n      [href]=\"backUrl | sanitize: SecurityContext.URL\"> {{ backUrlTitle || (I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans) }}</a>\n      <div class=\"c-status__hint c-status__hint-button\">\n        <ng-content constructor-status-button-hint></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.c-status{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.c-status__content{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:stretch}.c-status--progress.c-status--live~.c-status__actions{display:none}.c-status__img{flex:none;margin-bottom:10px;align-self:center;border:0}.c-status__title{text-align:center;align-self:center}.c-status__msg{align-self:center;white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis}.c-status__msg,.c-status__hint{text-align:center;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.c-status__hint-button{font-size:14px}.c-status__actions{display:flex;flex-direction:column;gap:4px;justify-content:stretch;align-items:stretch}.c-status__actions .trm-button{color:#fff!important}\n"], dependencies: [{ kind: "pipe", type: SanitizerPipe, name: "sanitize" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-constructor-status', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SanitizerPipe, TranslateByKeyPipe], template: "<div class=\"c-status\">\r\n  <div class=\"c-status__content\"\r\n    [class.c-status--failed]=\"failed\"\r\n    [class.c-status--progress]=\"inProgress\"\r\n    [class.c-status--live]=\"animation\"\r\n    >\r\n    <i class=\"c-status__img\"></i>\r\n    <h5 class=\"c-status__title\">\r\n      @if (inProgress) {\r\n        {{ progressTitle || (I18N_KEY.PROGRESS_TITLE | trans) }}\r\n      } @else {\r\n        @if (failed) {\r\n          {{ failTitle || (I18N_KEY.TERMINAL_SESSION_BREAK | trans) }}\r\n        }\r\n        @if (!failed) {\r\n          {{ successTitle || (I18N_KEY.TERMINAL_SESSION_SUCCESS | trans) }}\r\n        }\r\n      }\r\n    </h5>\r\n    <div class=\"c-status__msg\" [innerHTML]=\"message | sanitize: SecurityContext.HTML\"> {{ message }}</div>\r\n    @if (hasSupportHint) {\r\n      <div class=\"c-status__hint\">\r\n        {{ I18N_KEY.TERMINAL_SESSION_SUPPORT | trans }}:\r\n        @if (supportEmail) {\r\n          <a [href]=\"'mailto:' + supportEmail\"> {{ supportEmail }} </a>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!!backUrl) {\r\n    <div class=\"c-status__actions\">\r\n      <a class=\"trm-button trm-button--primary\"\r\n        [tabindex]=\"tabIndex\"\r\n      [href]=\"backUrl | sanitize: SecurityContext.URL\"> {{ backUrlTitle || (I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans) }}</a>\r\n      <div class=\"c-status__hint c-status__hint-button\">\r\n        <ng-content constructor-status-button-hint></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.c-status{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.c-status__content{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:stretch}.c-status--progress.c-status--live~.c-status__actions{display:none}.c-status__img{flex:none;margin-bottom:10px;align-self:center;border:0}.c-status__title{text-align:center;align-self:center}.c-status__msg{align-self:center;white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis}.c-status__msg,.c-status__hint{text-align:center;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.c-status__hint-button{font-size:14px}.c-status__actions{display:flex;flex-direction:column;gap:4px;justify-content:stretch;align-items:stretch}.c-status__actions .trm-button{color:#fff!important}\n"] }]
+            args: [{ selector: 'app-constructor-status', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SanitizerPipe, TranslateByKeyPipe], template: "<div class=\"c-status\">\n  <div class=\"c-status__content\"\n    [class.c-status--failed]=\"failed\"\n    [class.c-status--progress]=\"inProgress\"\n    [class.c-status--live]=\"animation\"\n    >\n    <i class=\"c-status__img\"></i>\n    <h5 class=\"c-status__title\">\n      @if (inProgress) {\n        {{ progressTitle || (I18N_KEY.PROGRESS_TITLE | trans) }}\n      } @else {\n        @if (failed) {\n          {{ failTitle || (I18N_KEY.TERMINAL_SESSION_BREAK | trans) }}\n        }\n        @if (!failed) {\n          {{ successTitle || (I18N_KEY.TERMINAL_SESSION_SUCCESS | trans) }}\n        }\n      }\n    </h5>\n    <div class=\"c-status__msg\" [innerHTML]=\"message | sanitize: SecurityContext.HTML\"> {{ message }}</div>\n    @if (hasSupportHint) {\n      <div class=\"c-status__hint\">\n        {{ I18N_KEY.TERMINAL_SESSION_SUPPORT | trans }}:\n        @if (supportEmail) {\n          <a [href]=\"'mailto:' + supportEmail\"> {{ supportEmail }} </a>\n        }\n      </div>\n    }\n  </div>\n  @if (!!backUrl) {\n    <div class=\"c-status__actions\">\n      <a class=\"trm-button trm-button--primary\"\n        [tabindex]=\"tabIndex\"\n      [href]=\"backUrl | sanitize: SecurityContext.URL\"> {{ backUrlTitle || (I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans) }}</a>\n      <div class=\"c-status__hint c-status__hint-button\">\n        <ng-content constructor-status-button-hint></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.c-status{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.c-status__content{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:stretch}.c-status--progress.c-status--live~.c-status__actions{display:none}.c-status__img{flex:none;margin-bottom:10px;align-self:center;border:0}.c-status__title{text-align:center;align-self:center}.c-status__msg{align-self:center;white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis}.c-status__msg,.c-status__hint{text-align:center;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.c-status__hint-button{font-size:14px}.c-status__actions{display:flex;flex-direction:column;gap:4px;justify-content:stretch;align-items:stretch}.c-status__actions .trm-button{color:#fff!important}\n"] }]
         }], propDecorators: { failed: [{
                 type: Input
             }], inProgress: [{
@@ -4431,12 +4415,6 @@ class ConstructorFormService extends FormGroup {
     get methodInfoLoading() {
         return this.sessionDS.loadingMethodInfo$.getValue();
     }
-    continueLoaderOn() {
-        this.sessionDS.loadingConfirm$.next(true);
-    }
-    continueLoaderOff() {
-        this.sessionDS.loadingConfirm$.next(false);
-    }
     get paymentFormFieldNames() {
         return Object.keys(this.payment.controls);
     }
@@ -4972,7 +4950,7 @@ class ConstructorFieldIframeComponent {
                 multi: true,
             },
             CardSdkService,
-        ], hostDirectives: [{ directive: IframeValidatorDirectiveDirective }], ngImport: i0, template: "@if (!status) {\r\n  <div\r\n    class=\"iframe-container\"\r\n    [id]=\"ID_CDE_CONTAINER\"\r\n    [hidden]=\"loading\"\r\n    [class.iframe-container--ready]=\"viewReady\"\r\n  ></div>\r\n} @else if (!loading) {\r\n  <p class=\"iframe-warning text--warn\">{{ status | trans }}</p>\r\n}\r\n\r\n@if (loading) {\r\n  <div class=\"trm-skeleton-fields\">\r\n    @for (i of [1,2]; track i) {\r\n      <div class=\"trm-skeleton-field\">\r\n        <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\r\n        <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:relative}.iframe-container{position:absolute;width:100%;visibility:hidden}.iframe-container--ready{position:relative;visibility:visible}.iframe-warning{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}\n"], dependencies: [{ kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], hostDirectives: [{ directive: IframeValidatorDirectiveDirective }], ngImport: i0, template: "@if (!status) {\n  <div\n    class=\"iframe-container\"\n    [id]=\"ID_CDE_CONTAINER\"\n    [class.iframe-container--ready]=\"viewReady\"\n  ></div>\n} @else if (!loading) {\n  <p class=\"iframe-warning text--warn\">{{ status | trans }}</p>\n}\n\n@if (loading) {\n  <div class=\"trm-skeleton-fields\">\n    @for (i of [1,2]; track i) {\n      <div class=\"trm-skeleton-field\">\n        <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\n        <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:relative}.iframe-container{position:absolute;width:100%;visibility:hidden}.iframe-container--ready{position:relative;visibility:visible}.iframe-warning{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}\n"], dependencies: [{ kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldIframeComponent, decorators: [{
             type: Component,
@@ -4987,7 +4965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         {
                             directive: IframeValidatorDirectiveDirective,
                         },
-                    ], template: "@if (!status) {\r\n  <div\r\n    class=\"iframe-container\"\r\n    [id]=\"ID_CDE_CONTAINER\"\r\n    [hidden]=\"loading\"\r\n    [class.iframe-container--ready]=\"viewReady\"\r\n  ></div>\r\n} @else if (!loading) {\r\n  <p class=\"iframe-warning text--warn\">{{ status | trans }}</p>\r\n}\r\n\r\n@if (loading) {\r\n  <div class=\"trm-skeleton-fields\">\r\n    @for (i of [1,2]; track i) {\r\n      <div class=\"trm-skeleton-field\">\r\n        <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\r\n        <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:relative}.iframe-container{position:absolute;width:100%;visibility:hidden}.iframe-container--ready{position:relative;visibility:visible}.iframe-warning{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}\n"] }]
+                    ], template: "@if (!status) {\n  <div\n    class=\"iframe-container\"\n    [id]=\"ID_CDE_CONTAINER\"\n    [class.iframe-container--ready]=\"viewReady\"\n  ></div>\n} @else if (!loading) {\n  <p class=\"iframe-warning text--warn\">{{ status | trans }}</p>\n}\n\n@if (loading) {\n  <div class=\"trm-skeleton-fields\">\n    @for (i of [1,2]; track i) {\n      <div class=\"trm-skeleton-field\">\n        <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\n        <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:relative}.iframe-container{position:absolute;width:100%;visibility:hidden}.iframe-container--ready{position:relative;visibility:visible}.iframe-warning{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}\n"] }]
         }], propDecorators: { tabIndex: [{
                 type: Input
             }] } });
@@ -5120,7 +5098,7 @@ class PsSelectComponent {
             },
             MethodTitlePipe,
             TranslatePipe
-        ], ngImport: i0, template: "<label class=\"trm-label\">\r\n  {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}}\r\n</label>\r\n<ul class=\"methods\">\r\n  @for (method of popularMethods; track method.id) {\r\n    <li class=\"method\"\r\n      [class.method--selected]=\"selectedType === method.id\"\r\n      [tabindex]=\"tabIndex\"\r\n      (keydown.enter)=\"$event.stopPropagation(); selectMethod(method.id)\"\r\n      (blur)=\"onTouch()\"\r\n      (click)=\"selectMethod(method.id)\"\r\n      >\r\n      <span class=\"method__icon\"\r\n        [ngClass]=\"'ps-icon-'+method.name\"\r\n      ></span>\r\n      <span class=\"method__name\" [title]=\"method.name | trans\" > {{method.name | method_title | trans}} </span>\r\n    </li>\r\n  }\r\n  @if (searchString || otherMethods.length) {\r\n    <li class=\"methods__other\">\r\n      <app-trm-select [data]=\"otherMethods\"\r\n        idLabel=\"method\"\r\n        (search)=\"search($event)\"\r\n        [tabIndex]=\"tabIndex\"\r\n        (open)=\"onTouch()\"\r\n        [formControl]=\"otherMethodControl\"\r\n        [placeholder]=\"I18N_KEY.CONSTRUCTOR_PLACEHOLDER_PS | trans\"\r\n        class=\"c-field-select trm-form-field\"\r\n        >\r\n        <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n          <span class=\"method__icon\"\r\n          [ngClass]=\"'ps-icon-'+item.name\"></span>\r\n          <span class=\"method__name\"\r\n          [title]=\"item.name | trans\" >{{item.name | method_title | trans}}</span>\r\n        </ng-template>\r\n      </app-trm-select>\r\n    </li>\r\n  }\r\n</ul>\r\n<ng-content select=\"[app-ps-select-hint]\"></ng-content>\r\n<ng-content select=\"[app-ps-select-error]\"></ng-content>\r\n\r\n", styles: [":host{display:block}.methods{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:flex-start;list-style:none;flex-wrap:wrap;margin:0;padding:0}.methods .method{--method-color: var(--ps-select-color, var(--color-base-350));--method-border-color: var(--ps-select-border-color, var(--color-base-200));display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start;box-sizing:border-box;flex:100%;max-width:calc(50% - 5px);padding:16px;border:1px solid var(--method-border-color);border-radius:10px;outline:0;align-self:stretch}.methods .method:hover,.methods .method:focus{--method-color: var(--ps-select-color--hover, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--hover, var(--color-primary-500));cursor:pointer;box-shadow:0 0 15px -1px #a378ff26}.methods .method.method--selected{--method-color: var(--ps-select-color--active, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--active, var(--color-primary-500));cursor:default;box-shadow:0 0 0 2px var(--method-border-color);outline:none}.methods .method__icon{background:transparent no-repeat 100% 100%;background-size:contain;width:24px;height:24px;flex-shrink:0}.methods .method__name{font-weight:600;font-size:14px;line-height:18px;color:var(--method-color);white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis;flex-shrink:0}.methods__other{box-sizing:border-box;flex:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: TabIndexFocusDirective, selector: "[tabindex]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TrmSelectLabelTemplateDirective, selector: "[trmSelectLabelTemplate]" }, { kind: "pipe", type: MethodTitlePipe, name: "method_title" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"trm-label\">\n  {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}}\n</label>\n<ul class=\"methods\">\n  @for (method of popularMethods; track method.id) {\n    <li class=\"method\"\n      [class.method--selected]=\"selectedType === method.id\"\n      [tabindex]=\"tabIndex\"\n      (keydown.enter)=\"$event.stopPropagation(); selectMethod(method.id)\"\n      (blur)=\"onTouch()\"\n      (click)=\"selectMethod(method.id)\"\n      >\n      <span class=\"method__icon\"\n        [ngClass]=\"'ps-icon-'+method.name\"\n      ></span>\n      <span class=\"method__name\" [title]=\"method.name | trans\" > {{method.name | method_title | trans}} </span>\n    </li>\n  }\n  @if (searchString || otherMethods.length) {\n    <li class=\"methods__other\">\n      <app-trm-select [data]=\"otherMethods\"\n        idLabel=\"method\"\n        (search)=\"search($event)\"\n        [tabIndex]=\"tabIndex\"\n        (open)=\"onTouch()\"\n        [formControl]=\"otherMethodControl\"\n        [placeholder]=\"I18N_KEY.CONSTRUCTOR_PLACEHOLDER_PS | trans\"\n        class=\"c-field-select trm-form-field\"\n        >\n        <ng-template trmSelectLabelTemplate let-item=\"item\">\n          <span class=\"method__icon\"\n          [ngClass]=\"'ps-icon-'+item.name\"></span>\n          <span class=\"method__name\"\n          [title]=\"item.name | trans\" >{{item.name | method_title | trans}}</span>\n        </ng-template>\n      </app-trm-select>\n    </li>\n  }\n</ul>\n<ng-content select=\"[app-ps-select-hint]\"></ng-content>\n<ng-content select=\"[app-ps-select-error]\"></ng-content>\n\n", styles: [":host{display:block}.methods{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:flex-start;list-style:none;flex-wrap:wrap;margin:0;padding:0}.methods .method{--method-color: var(--ps-select-color, var(--color-base-350));--method-border-color: var(--ps-select-border-color, var(--color-base-200));display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start;box-sizing:border-box;flex:100%;max-width:calc(50% - 5px);padding:16px;border:1px solid var(--method-border-color);border-radius:10px;outline:0;align-self:stretch}.methods .method:hover,.methods .method:focus{--method-color: var(--ps-select-color--hover, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--hover, var(--color-primary-500));cursor:pointer;box-shadow:0 0 15px -1px #a378ff26}.methods .method.method--selected{--method-color: var(--ps-select-color--active, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--active, var(--color-primary-500));cursor:default;box-shadow:0 0 0 2px var(--method-border-color);outline:none}.methods .method__icon{background:transparent no-repeat 100% 100%;background-size:contain;width:24px;height:24px;flex-shrink:0}.methods .method__name{font-weight:600;font-size:14px;line-height:18px;color:var(--method-color);white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis;flex-shrink:0}.methods__other{box-sizing:border-box;flex:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: TabIndexFocusDirective, selector: "[tabindex]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TrmSelectLabelTemplateDirective, selector: "[trmSelectLabelTemplate]" }, { kind: "pipe", type: MethodTitlePipe, name: "method_title" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PsSelectComponent, decorators: [{
             type: Component,
@@ -5132,7 +5110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         },
                         MethodTitlePipe,
                         TranslatePipe
-                    ], standalone: true, imports: [TabIndexFocusDirective, NgClass, TrmSelectComponent, FormsModule, ReactiveFormsModule, TrmSelectLabelTemplateDirective, MethodTitlePipe, TranslateByKeyPipe], template: "<label class=\"trm-label\">\r\n  {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}}\r\n</label>\r\n<ul class=\"methods\">\r\n  @for (method of popularMethods; track method.id) {\r\n    <li class=\"method\"\r\n      [class.method--selected]=\"selectedType === method.id\"\r\n      [tabindex]=\"tabIndex\"\r\n      (keydown.enter)=\"$event.stopPropagation(); selectMethod(method.id)\"\r\n      (blur)=\"onTouch()\"\r\n      (click)=\"selectMethod(method.id)\"\r\n      >\r\n      <span class=\"method__icon\"\r\n        [ngClass]=\"'ps-icon-'+method.name\"\r\n      ></span>\r\n      <span class=\"method__name\" [title]=\"method.name | trans\" > {{method.name | method_title | trans}} </span>\r\n    </li>\r\n  }\r\n  @if (searchString || otherMethods.length) {\r\n    <li class=\"methods__other\">\r\n      <app-trm-select [data]=\"otherMethods\"\r\n        idLabel=\"method\"\r\n        (search)=\"search($event)\"\r\n        [tabIndex]=\"tabIndex\"\r\n        (open)=\"onTouch()\"\r\n        [formControl]=\"otherMethodControl\"\r\n        [placeholder]=\"I18N_KEY.CONSTRUCTOR_PLACEHOLDER_PS | trans\"\r\n        class=\"c-field-select trm-form-field\"\r\n        >\r\n        <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n          <span class=\"method__icon\"\r\n          [ngClass]=\"'ps-icon-'+item.name\"></span>\r\n          <span class=\"method__name\"\r\n          [title]=\"item.name | trans\" >{{item.name | method_title | trans}}</span>\r\n        </ng-template>\r\n      </app-trm-select>\r\n    </li>\r\n  }\r\n</ul>\r\n<ng-content select=\"[app-ps-select-hint]\"></ng-content>\r\n<ng-content select=\"[app-ps-select-error]\"></ng-content>\r\n\r\n", styles: [":host{display:block}.methods{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:flex-start;list-style:none;flex-wrap:wrap;margin:0;padding:0}.methods .method{--method-color: var(--ps-select-color, var(--color-base-350));--method-border-color: var(--ps-select-border-color, var(--color-base-200));display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start;box-sizing:border-box;flex:100%;max-width:calc(50% - 5px);padding:16px;border:1px solid var(--method-border-color);border-radius:10px;outline:0;align-self:stretch}.methods .method:hover,.methods .method:focus{--method-color: var(--ps-select-color--hover, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--hover, var(--color-primary-500));cursor:pointer;box-shadow:0 0 15px -1px #a378ff26}.methods .method.method--selected{--method-color: var(--ps-select-color--active, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--active, var(--color-primary-500));cursor:default;box-shadow:0 0 0 2px var(--method-border-color);outline:none}.methods .method__icon{background:transparent no-repeat 100% 100%;background-size:contain;width:24px;height:24px;flex-shrink:0}.methods .method__name{font-weight:600;font-size:14px;line-height:18px;color:var(--method-color);white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis;flex-shrink:0}.methods__other{box-sizing:border-box;flex:100%;margin-top:10px}\n"] }]
+                    ], standalone: true, imports: [TabIndexFocusDirective, NgClass, TrmSelectComponent, FormsModule, ReactiveFormsModule, TrmSelectLabelTemplateDirective, MethodTitlePipe, TranslateByKeyPipe], template: "<label class=\"trm-label\">\n  {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}}\n</label>\n<ul class=\"methods\">\n  @for (method of popularMethods; track method.id) {\n    <li class=\"method\"\n      [class.method--selected]=\"selectedType === method.id\"\n      [tabindex]=\"tabIndex\"\n      (keydown.enter)=\"$event.stopPropagation(); selectMethod(method.id)\"\n      (blur)=\"onTouch()\"\n      (click)=\"selectMethod(method.id)\"\n      >\n      <span class=\"method__icon\"\n        [ngClass]=\"'ps-icon-'+method.name\"\n      ></span>\n      <span class=\"method__name\" [title]=\"method.name | trans\" > {{method.name | method_title | trans}} </span>\n    </li>\n  }\n  @if (searchString || otherMethods.length) {\n    <li class=\"methods__other\">\n      <app-trm-select [data]=\"otherMethods\"\n        idLabel=\"method\"\n        (search)=\"search($event)\"\n        [tabIndex]=\"tabIndex\"\n        (open)=\"onTouch()\"\n        [formControl]=\"otherMethodControl\"\n        [placeholder]=\"I18N_KEY.CONSTRUCTOR_PLACEHOLDER_PS | trans\"\n        class=\"c-field-select trm-form-field\"\n        >\n        <ng-template trmSelectLabelTemplate let-item=\"item\">\n          <span class=\"method__icon\"\n          [ngClass]=\"'ps-icon-'+item.name\"></span>\n          <span class=\"method__name\"\n          [title]=\"item.name | trans\" >{{item.name | method_title | trans}}</span>\n        </ng-template>\n      </app-trm-select>\n    </li>\n  }\n</ul>\n<ng-content select=\"[app-ps-select-hint]\"></ng-content>\n<ng-content select=\"[app-ps-select-error]\"></ng-content>\n\n", styles: [":host{display:block}.methods{display:flex;flex-direction:row;gap:10px;justify-content:flex-start;align-items:flex-start;list-style:none;flex-wrap:wrap;margin:0;padding:0}.methods .method{--method-color: var(--ps-select-color, var(--color-base-350));--method-border-color: var(--ps-select-border-color, var(--color-base-200));display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start;box-sizing:border-box;flex:100%;max-width:calc(50% - 5px);padding:16px;border:1px solid var(--method-border-color);border-radius:10px;outline:0;align-self:stretch}.methods .method:hover,.methods .method:focus{--method-color: var(--ps-select-color--hover, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--hover, var(--color-primary-500));cursor:pointer;box-shadow:0 0 15px -1px #a378ff26}.methods .method.method--selected{--method-color: var(--ps-select-color--active, var(--color-primary-500));--method-border-color: var(--ps-select-border-color--active, var(--color-primary-500));cursor:default;box-shadow:0 0 0 2px var(--method-border-color);outline:none}.methods .method__icon{background:transparent no-repeat 100% 100%;background-size:contain;width:24px;height:24px;flex-shrink:0}.methods .method__name{font-weight:600;font-size:14px;line-height:18px;color:var(--method-color);white-space:normal;overflow:hidden;max-width:100%;text-overflow:ellipsis;flex-shrink:0}.methods__other{box-sizing:border-box;flex:100%;margin-top:10px}\n"] }]
         }], propDecorators: { methods: [{
                 type: Input
             }], tabIndex: [{
@@ -5192,7 +5170,7 @@ class ConstructorFieldSelectComponent {
                 useExisting: forwardRef(() => ConstructorFieldSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@if (control) {\r\n  <app-trm-select [data]=\"data\"\r\n                  [placeholder]=\"config.placeholder | trans\"\r\n                  [label]=\"config.label | trans\"\r\n                  [name]=\"config.name\"\r\n                  (search)=\"search($event)\"\r\n                  (open)=\"onTouch()\"\r\n                  [formControl]=\"control\"\r\n                  [tabIndex]=\"tabIndex\"\r\n                  class=\"c-field-select trm-form-field\"\r\n  ></app-trm-select>\r\n  @if (control.hasError('required') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ apiError | trans }}\r\n    </div>\r\n  }\r\n\r\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ control.getError('custom_error') | trans }}\r\n    </div>\r\n  }\r\n\r\n}\r\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (control) {\n  <app-trm-select [data]=\"data\"\n                  [placeholder]=\"config.placeholder | trans\"\n                  [label]=\"config.label | trans\"\n                  [name]=\"config.name\"\n                  (search)=\"search($event)\"\n                  (open)=\"onTouch()\"\n                  [formControl]=\"control\"\n                  [tabIndex]=\"tabIndex\"\n                  class=\"c-field-select trm-form-field\"\n  ></app-trm-select>\n  @if (control.hasError('required') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\n    </div>\n  }\n  @if (control.hasError('error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ apiError | trans }}\n    </div>\n  }\n\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ control.getError('custom_error') | trans }}\n    </div>\n  }\n\n}\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldSelectComponent, decorators: [{
             type: Component,
@@ -5202,7 +5180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useExisting: forwardRef(() => ConstructorFieldSelectComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [TrmSelectComponent, FormsModule, ReactiveFormsModule, TranslateByKeyPipe], template: "@if (control) {\r\n  <app-trm-select [data]=\"data\"\r\n                  [placeholder]=\"config.placeholder | trans\"\r\n                  [label]=\"config.label | trans\"\r\n                  [name]=\"config.name\"\r\n                  (search)=\"search($event)\"\r\n                  (open)=\"onTouch()\"\r\n                  [formControl]=\"control\"\r\n                  [tabIndex]=\"tabIndex\"\r\n                  class=\"c-field-select trm-form-field\"\r\n  ></app-trm-select>\r\n  @if (control.hasError('required') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ apiError | trans }}\r\n    </div>\r\n  }\r\n\r\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ control.getError('custom_error') | trans }}\r\n    </div>\r\n  }\r\n\r\n}\r\n", styles: [":host{display:block;width:100%}\n"] }]
+                    ], standalone: true, imports: [TrmSelectComponent, FormsModule, ReactiveFormsModule, TranslateByKeyPipe], template: "@if (control) {\n  <app-trm-select [data]=\"data\"\n                  [placeholder]=\"config.placeholder | trans\"\n                  [label]=\"config.label | trans\"\n                  [name]=\"config.name\"\n                  (search)=\"search($event)\"\n                  (open)=\"onTouch()\"\n                  [formControl]=\"control\"\n                  [tabIndex]=\"tabIndex\"\n                  class=\"c-field-select trm-form-field\"\n  ></app-trm-select>\n  @if (control.hasError('required') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\n    </div>\n  }\n  @if (control.hasError('error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ apiError | trans }}\n    </div>\n  }\n\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ control.getError('custom_error') | trans }}\n    </div>\n  }\n\n}\n", styles: [":host{display:block;width:100%}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], items: [{
@@ -5406,7 +5384,7 @@ class ConstructorFieldTextComponent {
                 useExisting: forwardRef(() => ConstructorFieldTextComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dir", first: true, predicate: NgxMaskDirective, descendants: true }], ngImport: i0, template: "@if (control) {\r\n  <label class=\"trm-label\"\r\n         [for]=\"config.name\"\r\n  > {{ config.label | trans }} </label>\r\n  <div class=\"input-wrapper trm-form-field-wrapper c-text\"\r\n       [class.c-text--disabled]=\"disabled\"\r\n       [class.c-text--uppercase]=\"config.uppercase\">\r\n    @if (!matDatepicker) {\r\n      <input\r\n        class=\"trm-form-field trm-input\"\r\n        [class.trm-form-field--disabled]=\"disabled\"\r\n        [placeholder]=\"config.placeholder | trans\"\r\n        (blur)=\"onTouch()\"\r\n        [formControl]=\"control\"\r\n        (input)=\"onInput($event)\"\r\n        (paste)=\"onPaste($event)\"\r\n        [type]=\"type\"\r\n        [name]=\"name\"\r\n        [id]=\"name\"\r\n        [mask]=\"mask\"\r\n        [attr.inputmode]=\"inputmode\"\r\n        [patterns]=\"maskPatterns\"\r\n        [allowNegativeNumbers]=\"false\"\r\n        [thousandSeparator]=\"' '\"\r\n        [decimalMarker]=\"'.'\"\r\n        [validation]=\"config.maskValidation || false\"\r\n        [specialCharacters]=\"specialCharacters\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [tabindex]=\"tabIndex\"\r\n      />\r\n    } @else {\r\n      <input class=\"trm-form-field trm-input\"\r\n             [matDatepicker]=\"matDatepicker\"\r\n             [formControl]=\"control\"\r\n             [placeholder]=\"config.placeholder | trans\"\r\n             (input)=\"onDateInput($event)\"\r\n             [attr.inputmode]=\"inputmode\"\r\n             (blur)=\"onTouch()\"\r\n             [min]=\"config?.options?.min\"\r\n             [max]=\"config?.options?.max\"\r\n             [tabindex]=\"tabIndex\"\r\n             type=\"text\"\r\n             [name]=\"name\"\r\n             [id]=\"name\"\r\n      />\r\n    }\r\n    <ng-content select=\"[app-c-text-suffix]\"></ng-content>\r\n  </div>\r\n  @if (config.description) {\r\n    <div class=\"c-text__hint\"\r\n         [innerHTML]=\"config.description | trans\"></div>\r\n  }\r\n  <ng-content select=\"[app-c-text-hint]\"></ng-content>\r\n  @if (control.hasError('required') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('email') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_EMAIL | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('min') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_MIN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('max') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_MAX | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('pattern') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('mask') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('matDatepickerParse') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('matDatepickerMin') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ (I18N_KEY.VALIDATION_DATE_MIN | trans) + ' ' + control.getError('matDatepickerMin').min.format(FORMAT_DATE) }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('matDatepickerMax') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ (I18N_KEY.VALIDATION_DATE_MAX | trans) + ' ' + control.getError('matDatepickerMax').max.format(FORMAT_DATE) }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ apiError | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ control.getError('custom_error') | trans }}\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block}.c-text{position:relative}.c-text.c-text--disabled input.trm-form-field{border:1px solid var(--trm-input-border-color--disabled);background:var(--trm-input-bg-color--disabled);pointer-events:none}.c-text.c-text--uppercase input.trm-form-field{text-transform:uppercase}.c-text__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-text~.c-text__hint{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: InputMaskCorrector, selector: "input[mask]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TabIndexFocusDirective, selector: "[tabindex]" }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dir", first: true, predicate: NgxMaskDirective, descendants: true }], ngImport: i0, template: "@if (control) {\n  <label class=\"trm-label\"\n         [for]=\"config.name\"\n  > {{ config.label | trans }} </label>\n  <div class=\"input-wrapper trm-form-field-wrapper c-text\"\n       [class.c-text--disabled]=\"disabled\"\n       [class.c-text--uppercase]=\"config.uppercase\">\n    @if (!matDatepicker) {\n      <input\n        class=\"trm-form-field trm-input\"\n        [class.trm-form-field--disabled]=\"disabled\"\n        [placeholder]=\"config.placeholder | trans\"\n        (blur)=\"onTouch()\"\n        [formControl]=\"control\"\n        (input)=\"onInput($event)\"\n        (paste)=\"onPaste($event)\"\n        [type]=\"type\"\n        [name]=\"name\"\n        [id]=\"name\"\n        [mask]=\"mask\"\n        [attr.inputmode]=\"inputmode\"\n        [patterns]=\"maskPatterns\"\n        [allowNegativeNumbers]=\"false\"\n        [thousandSeparator]=\"' '\"\n        [decimalMarker]=\"'.'\"\n        [validation]=\"config.maskValidation || false\"\n        [specialCharacters]=\"specialCharacters\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [tabindex]=\"tabIndex\"\n      />\n    } @else {\n      <input class=\"trm-form-field trm-input\"\n             [matDatepicker]=\"matDatepicker\"\n             [formControl]=\"control\"\n             [placeholder]=\"config.placeholder | trans\"\n             (input)=\"onDateInput($event)\"\n             [attr.inputmode]=\"inputmode\"\n             (blur)=\"onTouch()\"\n             [min]=\"config?.options?.min\"\n             [max]=\"config?.options?.max\"\n             [tabindex]=\"tabIndex\"\n             type=\"text\"\n             [name]=\"name\"\n             [id]=\"name\"\n      />\n    }\n    <ng-content select=\"[app-c-text-suffix]\"></ng-content>\n  </div>\n  @if (config.description) {\n    <div class=\"c-text__hint\"\n         [innerHTML]=\"config.description | trans\"></div>\n  }\n  <ng-content select=\"[app-c-text-hint]\"></ng-content>\n  @if (control.hasError('required') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\n    </div>\n  }\n  @if (control.hasError('email') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_EMAIL | trans }}\n    </div>\n  }\n  @if (control.hasError('min') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_MIN | trans }}\n    </div>\n  }\n  @if (control.hasError('max') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_MAX | trans }}\n    </div>\n  }\n  @if (control.hasError('pattern') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\n    </div>\n  }\n  @if (control.hasError('mask') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\n    </div>\n  }\n  @if (control.hasError('matDatepickerParse') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\n    </div>\n  }\n  @if (control.hasError('matDatepickerMin') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ (I18N_KEY.VALIDATION_DATE_MIN | trans) + ' ' + control.getError('matDatepickerMin').min.format(FORMAT_DATE) }}\n    </div>\n  }\n  @if (control.hasError('matDatepickerMax') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ (I18N_KEY.VALIDATION_DATE_MAX | trans) + ' ' + control.getError('matDatepickerMax').max.format(FORMAT_DATE) }}\n    </div>\n  }\n  @if (control.hasError('error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ apiError | trans }}\n    </div>\n  }\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ control.getError('custom_error') | trans }}\n    </div>\n  }\n}\n", styles: [":host{display:block}.c-text{position:relative}.c-text.c-text--disabled input.trm-form-field{border:1px solid var(--trm-input-border-color--disabled);background:var(--trm-input-bg-color--disabled);pointer-events:none}.c-text.c-text--uppercase input.trm-form-field{text-transform:uppercase}.c-text__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-text~.c-text__hint{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: InputMaskCorrector, selector: "input[mask]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TabIndexFocusDirective, selector: "[tabindex]" }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldTextComponent, decorators: [{
             type: Component,
@@ -5416,7 +5394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useExisting: forwardRef(() => ConstructorFieldTextComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [FormsModule, NgxMaskDirective, InputMaskCorrector, ReactiveFormsModule, TabIndexFocusDirective, MatDatepickerInput, TranslateByKeyPipe], template: "@if (control) {\r\n  <label class=\"trm-label\"\r\n         [for]=\"config.name\"\r\n  > {{ config.label | trans }} </label>\r\n  <div class=\"input-wrapper trm-form-field-wrapper c-text\"\r\n       [class.c-text--disabled]=\"disabled\"\r\n       [class.c-text--uppercase]=\"config.uppercase\">\r\n    @if (!matDatepicker) {\r\n      <input\r\n        class=\"trm-form-field trm-input\"\r\n        [class.trm-form-field--disabled]=\"disabled\"\r\n        [placeholder]=\"config.placeholder | trans\"\r\n        (blur)=\"onTouch()\"\r\n        [formControl]=\"control\"\r\n        (input)=\"onInput($event)\"\r\n        (paste)=\"onPaste($event)\"\r\n        [type]=\"type\"\r\n        [name]=\"name\"\r\n        [id]=\"name\"\r\n        [mask]=\"mask\"\r\n        [attr.inputmode]=\"inputmode\"\r\n        [patterns]=\"maskPatterns\"\r\n        [allowNegativeNumbers]=\"false\"\r\n        [thousandSeparator]=\"' '\"\r\n        [decimalMarker]=\"'.'\"\r\n        [validation]=\"config.maskValidation || false\"\r\n        [specialCharacters]=\"specialCharacters\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [tabindex]=\"tabIndex\"\r\n      />\r\n    } @else {\r\n      <input class=\"trm-form-field trm-input\"\r\n             [matDatepicker]=\"matDatepicker\"\r\n             [formControl]=\"control\"\r\n             [placeholder]=\"config.placeholder | trans\"\r\n             (input)=\"onDateInput($event)\"\r\n             [attr.inputmode]=\"inputmode\"\r\n             (blur)=\"onTouch()\"\r\n             [min]=\"config?.options?.min\"\r\n             [max]=\"config?.options?.max\"\r\n             [tabindex]=\"tabIndex\"\r\n             type=\"text\"\r\n             [name]=\"name\"\r\n             [id]=\"name\"\r\n      />\r\n    }\r\n    <ng-content select=\"[app-c-text-suffix]\"></ng-content>\r\n  </div>\r\n  @if (config.description) {\r\n    <div class=\"c-text__hint\"\r\n         [innerHTML]=\"config.description | trans\"></div>\r\n  }\r\n  <ng-content select=\"[app-c-text-hint]\"></ng-content>\r\n  @if (control.hasError('required') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('email') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_EMAIL | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('min') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_MIN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('max') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_MAX | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('pattern') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('mask') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('matDatepickerParse') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('matDatepickerMin') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ (I18N_KEY.VALIDATION_DATE_MIN | trans) + ' ' + control.getError('matDatepickerMin').min.format(FORMAT_DATE) }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('matDatepickerMax') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ (I18N_KEY.VALIDATION_DATE_MAX | trans) + ' ' + control.getError('matDatepickerMax').max.format(FORMAT_DATE) }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ apiError | trans }}\r\n    </div>\r\n  }\r\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\r\n    <div class=\"trm-error\"\r\n         @insertRemove\r\n    >\r\n      {{ control.getError('custom_error') | trans }}\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block}.c-text{position:relative}.c-text.c-text--disabled input.trm-form-field{border:1px solid var(--trm-input-border-color--disabled);background:var(--trm-input-bg-color--disabled);pointer-events:none}.c-text.c-text--uppercase input.trm-form-field{text-transform:uppercase}.c-text__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-text~.c-text__hint{margin-top:8px}\n"] }]
+                    ], standalone: true, imports: [FormsModule, NgxMaskDirective, InputMaskCorrector, ReactiveFormsModule, TabIndexFocusDirective, MatDatepickerInput, TranslateByKeyPipe], template: "@if (control) {\n  <label class=\"trm-label\"\n         [for]=\"config.name\"\n  > {{ config.label | trans }} </label>\n  <div class=\"input-wrapper trm-form-field-wrapper c-text\"\n       [class.c-text--disabled]=\"disabled\"\n       [class.c-text--uppercase]=\"config.uppercase\">\n    @if (!matDatepicker) {\n      <input\n        class=\"trm-form-field trm-input\"\n        [class.trm-form-field--disabled]=\"disabled\"\n        [placeholder]=\"config.placeholder | trans\"\n        (blur)=\"onTouch()\"\n        [formControl]=\"control\"\n        (input)=\"onInput($event)\"\n        (paste)=\"onPaste($event)\"\n        [type]=\"type\"\n        [name]=\"name\"\n        [id]=\"name\"\n        [mask]=\"mask\"\n        [attr.inputmode]=\"inputmode\"\n        [patterns]=\"maskPatterns\"\n        [allowNegativeNumbers]=\"false\"\n        [thousandSeparator]=\"' '\"\n        [decimalMarker]=\"'.'\"\n        [validation]=\"config.maskValidation || false\"\n        [specialCharacters]=\"specialCharacters\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [tabindex]=\"tabIndex\"\n      />\n    } @else {\n      <input class=\"trm-form-field trm-input\"\n             [matDatepicker]=\"matDatepicker\"\n             [formControl]=\"control\"\n             [placeholder]=\"config.placeholder | trans\"\n             (input)=\"onDateInput($event)\"\n             [attr.inputmode]=\"inputmode\"\n             (blur)=\"onTouch()\"\n             [min]=\"config?.options?.min\"\n             [max]=\"config?.options?.max\"\n             [tabindex]=\"tabIndex\"\n             type=\"text\"\n             [name]=\"name\"\n             [id]=\"name\"\n      />\n    }\n    <ng-content select=\"[app-c-text-suffix]\"></ng-content>\n  </div>\n  @if (config.description) {\n    <div class=\"c-text__hint\"\n         [innerHTML]=\"config.description | trans\"></div>\n  }\n  <ng-content select=\"[app-c-text-hint]\"></ng-content>\n  @if (control.hasError('required') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\n    </div>\n  }\n  @if (control.hasError('email') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_EMAIL | trans }}\n    </div>\n  }\n  @if (control.hasError('min') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_MIN | trans }}\n    </div>\n  }\n  @if (control.hasError('max') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_MAX | trans }}\n    </div>\n  }\n  @if (control.hasError('pattern') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\n    </div>\n  }\n  @if (control.hasError('mask') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\n    </div>\n  }\n  @if (control.hasError('matDatepickerParse') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ I18N_KEY.VALIDATION_PATTERN | trans }}\n    </div>\n  }\n  @if (control.hasError('matDatepickerMin') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ (I18N_KEY.VALIDATION_DATE_MIN | trans) + ' ' + control.getError('matDatepickerMin').min.format(FORMAT_DATE) }}\n    </div>\n  }\n  @if (control.hasError('matDatepickerMax') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ (I18N_KEY.VALIDATION_DATE_MAX | trans) + ' ' + control.getError('matDatepickerMax').max.format(FORMAT_DATE) }}\n    </div>\n  }\n  @if (control.hasError('error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ apiError | trans }}\n    </div>\n  }\n  @if (control.hasError('custom_error') && control.touched && control.dirty) {\n    <div class=\"trm-error\"\n         @insertRemove\n    >\n      {{ control.getError('custom_error') | trans }}\n    </div>\n  }\n}\n", styles: [":host{display:block}.c-text{position:relative}.c-text.c-text--disabled input.trm-form-field{border:1px solid var(--trm-input-border-color--disabled);background:var(--trm-input-bg-color--disabled);pointer-events:none}.c-text.c-text--uppercase input.trm-form-field{text-transform:uppercase}.c-text__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-text~.c-text__hint{margin-top:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], matDatepicker: [{
@@ -5495,13 +5473,13 @@ class MethodAmountHintComponent {
         return this.mainTpl.feeTpl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MethodAmountHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: MethodAmountHintComponent, isStandalone: true, selector: "app-method-amount-hint", inputs: { loading: "loading", options: "options" }, host: { properties: { "hidden": "!loading && (!options || (!options.fee && !options.fixedFee && !options.minFixedFee && !options.min && !options.max))" } }, providers: [CurrencyPipe], ngImport: i0, template: "<div class=\"c-method-hint\" @insertRemove>\r\n  @if (loading) {\r\n    <span class=\"trm-spinner\" @insertRemove></span>\r\n  }\r\n  @if (options.fee || options.fixedFee) {\r\n    <div @insertRemove>\r\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_FEE | trans) }}\r\n      @if (options.fee) {\r\n        <span class=\"trm-amount\">\r\n            <span class=\"trm-amount__value\">{{ options.fee }}<span class=\"trm-currency\">%</span></span>\r\n          </span>\r\n      }\r\n      @if (options.fixedFee && options.fee) {\r\n        <span> + </span>\r\n      }\r\n      @if (options.fixedFee) {\r\n        <span\r\n          [innerHTML]=\"options.fixedFee | trm_currency: options.currency | sanitizeHtml\"></span>\r\n      }\r\n      @if (options.minFixedFee) {\r\n        ({{ I18N_KEY.CONSTRUCTOR_LABEL_MIN_FIXED_FEE | trans }}<span\r\n          [innerHTML]=\"options.minFixedFee | trm_currency: options.currency | sanitizeHtml\"></span>)\r\n      }\r\n    </div>\r\n  }\r\n  @if (options.min) {\r\n    <div @insertRemove>\r\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MIN_AMOUNT | trans) }}\r\n      <span [innerHTML]=\"options.min | trm_currency: options.currency\"></span>\r\n    </div>\r\n  }\r\n  @if (options.max) {\r\n    <div @insertRemove>\r\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MAX_AMOUNT | trans) }}\r\n      <span [innerHTML]=\"options.max | trm_currency: options.currency\"></span>\r\n    </div>\r\n  }\r\n\r\n  @if (feeTpl) {\r\n    <div *ngTemplateOutlet=\"feeTpl; context: {options}\" @insertRemove></div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;position:relative}.trm-spinner{position:absolute;right:10px}.c-method-hint{position:relative;font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-method-hint:first-letter,.c-method-hint>div:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "pipe", type: TrmCurrencyPipe, name: "trm_currency" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "pipe", type: HtmlSanitizerPipe, name: "sanitizeHtml" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [insertRemoveTrigger] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: MethodAmountHintComponent, isStandalone: true, selector: "app-method-amount-hint", inputs: { loading: "loading", options: "options" }, host: { properties: { "hidden": "!loading && (!options || (!options.fee && !options.fixedFee && !options.minFixedFee && !options.min && !options.max))" } }, providers: [CurrencyPipe], ngImport: i0, template: "<div class=\"c-method-hint\" @insertRemove>\n  @if (loading) {\n    <span class=\"trm-spinner\" @insertRemove></span>\n  }\n  @if (options.fee || options.fixedFee) {\n    <div @insertRemove>\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_FEE | trans) }}\n      @if (options.fee) {\n        <span class=\"trm-amount\">\n            <span class=\"trm-amount__value\">{{ options.fee }}<span class=\"trm-currency\">%</span></span>\n          </span>\n      }\n      @if (options.fixedFee && options.fee) {\n        <span> + </span>\n      }\n      @if (options.fixedFee) {\n        <span\n          [innerHTML]=\"options.fixedFee | trm_currency: options.currency | sanitizeHtml\"></span>\n      }\n      @if (options.minFixedFee) {\n        ({{ I18N_KEY.CONSTRUCTOR_LABEL_MIN_FIXED_FEE | trans }}<span\n          [innerHTML]=\"options.minFixedFee | trm_currency: options.currency | sanitizeHtml\"></span>)\n      }\n    </div>\n  }\n  @if (options.min) {\n    <div @insertRemove>\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MIN_AMOUNT | trans) }}\n      <span [innerHTML]=\"options.min | trm_currency: options.currency\"></span>\n    </div>\n  }\n  @if (options.max) {\n    <div @insertRemove>\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MAX_AMOUNT | trans) }}\n      <span [innerHTML]=\"options.max | trm_currency: options.currency\"></span>\n    </div>\n  }\n\n  @if (feeTpl) {\n    <div *ngTemplateOutlet=\"feeTpl; context: {options}\" @insertRemove></div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.trm-spinner{position:absolute;right:10px}.c-method-hint{position:relative;font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-method-hint:first-letter,.c-method-hint>div:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "pipe", type: TrmCurrencyPipe, name: "trm_currency" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "pipe", type: HtmlSanitizerPipe, name: "sanitizeHtml" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [insertRemoveTrigger] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MethodAmountHintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-method-amount-hint', standalone: true, animations: [insertRemoveTrigger], providers: [CurrencyPipe], imports: [TrmCurrencyPipe, TranslateByKeyPipe, HtmlSanitizerPipe, NgTemplateOutlet], host: {
                         '[hidden]': '!loading && (!options || (!options.fee && !options.fixedFee && !options.minFixedFee && !options.min && !options.max))'
-                    }, template: "<div class=\"c-method-hint\" @insertRemove>\r\n  @if (loading) {\r\n    <span class=\"trm-spinner\" @insertRemove></span>\r\n  }\r\n  @if (options.fee || options.fixedFee) {\r\n    <div @insertRemove>\r\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_FEE | trans) }}\r\n      @if (options.fee) {\r\n        <span class=\"trm-amount\">\r\n            <span class=\"trm-amount__value\">{{ options.fee }}<span class=\"trm-currency\">%</span></span>\r\n          </span>\r\n      }\r\n      @if (options.fixedFee && options.fee) {\r\n        <span> + </span>\r\n      }\r\n      @if (options.fixedFee) {\r\n        <span\r\n          [innerHTML]=\"options.fixedFee | trm_currency: options.currency | sanitizeHtml\"></span>\r\n      }\r\n      @if (options.minFixedFee) {\r\n        ({{ I18N_KEY.CONSTRUCTOR_LABEL_MIN_FIXED_FEE | trans }}<span\r\n          [innerHTML]=\"options.minFixedFee | trm_currency: options.currency | sanitizeHtml\"></span>)\r\n      }\r\n    </div>\r\n  }\r\n  @if (options.min) {\r\n    <div @insertRemove>\r\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MIN_AMOUNT | trans) }}\r\n      <span [innerHTML]=\"options.min | trm_currency: options.currency\"></span>\r\n    </div>\r\n  }\r\n  @if (options.max) {\r\n    <div @insertRemove>\r\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MAX_AMOUNT | trans) }}\r\n      <span [innerHTML]=\"options.max | trm_currency: options.currency\"></span>\r\n    </div>\r\n  }\r\n\r\n  @if (feeTpl) {\r\n    <div *ngTemplateOutlet=\"feeTpl; context: {options}\" @insertRemove></div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;position:relative}.trm-spinner{position:absolute;right:10px}.c-method-hint{position:relative;font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-method-hint:first-letter,.c-method-hint>div:first-letter{text-transform:uppercase}\n"] }]
+                    }, template: "<div class=\"c-method-hint\" @insertRemove>\n  @if (loading) {\n    <span class=\"trm-spinner\" @insertRemove></span>\n  }\n  @if (options.fee || options.fixedFee) {\n    <div @insertRemove>\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_FEE | trans) }}\n      @if (options.fee) {\n        <span class=\"trm-amount\">\n            <span class=\"trm-amount__value\">{{ options.fee }}<span class=\"trm-currency\">%</span></span>\n          </span>\n      }\n      @if (options.fixedFee && options.fee) {\n        <span> + </span>\n      }\n      @if (options.fixedFee) {\n        <span\n          [innerHTML]=\"options.fixedFee | trm_currency: options.currency | sanitizeHtml\"></span>\n      }\n      @if (options.minFixedFee) {\n        ({{ I18N_KEY.CONSTRUCTOR_LABEL_MIN_FIXED_FEE | trans }}<span\n          [innerHTML]=\"options.minFixedFee | trm_currency: options.currency | sanitizeHtml\"></span>)\n      }\n    </div>\n  }\n  @if (options.min) {\n    <div @insertRemove>\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MIN_AMOUNT | trans) }}\n      <span [innerHTML]=\"options.min | trm_currency: options.currency\"></span>\n    </div>\n  }\n  @if (options.max) {\n    <div @insertRemove>\n      {{ (I18N_KEY.CONSTRUCTOR_LABEL_MAX_AMOUNT | trans) }}\n      <span [innerHTML]=\"options.max | trm_currency: options.currency\"></span>\n    </div>\n  }\n\n  @if (feeTpl) {\n    <div *ngTemplateOutlet=\"feeTpl; context: {options}\" @insertRemove></div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.trm-spinner{position:absolute;right:10px}.c-method-hint{position:relative;font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350)}.c-method-hint:first-letter,.c-method-hint>div:first-letter{text-transform:uppercase}\n"] }]
         }], propDecorators: { loading: [{
                 type: Input
             }], options: [{
@@ -5558,7 +5536,7 @@ class ConstructorFieldDateComponent {
                 useExisting: forwardRef(() => ConstructorFieldDateComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@if (control) {\r\n  <app-constructor-field-text\r\n      class=\"c-date__input\"\r\n      [tabIndex]=\"tabIndex\"\r\n      [config]=\"config\"\r\n      [formControl]=\"control\"\r\n      [matDatepicker]=\"picker\">\r\n      <mat-datepicker-toggle [for]=\"picker\"\r\n                             app-c-text-suffix\r\n                             class=\"date__toggle\"\r\n                             [tabIndex]=\"tabIndex\"\r\n      >\r\n          <div class=\"date__toggleIcon\"\r\n               matDatepickerToggleIcon\r\n               app-c-text-suffix></div>\r\n      </mat-datepicker-toggle>\r\n  </app-constructor-field-text>\r\n\r\n  <mat-datepicker #picker [tabIndex]=\"tabIndex\" [startAt]=\"startCalendarDate\"></mat-datepicker>\r\n}\r\n", styles: [":host{display:block}.date__toggle{position:absolute;top:50%;right:-20px;transform:translate(-50%,-50%);flex-shrink:0}.date__toggleIcon{display:block;mask-repeat:no-repeat;mask-size:contain}\n"], dependencies: [{ kind: "component", type: ConstructorFieldTextComponent, selector: "app-constructor-field-text", inputs: ["config", "matDatepicker", "tabIndex"], outputs: ["maskedValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (control) {\n  <app-constructor-field-text\n      class=\"c-date__input\"\n      [tabIndex]=\"tabIndex\"\n      [config]=\"config\"\n      [formControl]=\"control\"\n      [matDatepicker]=\"picker\">\n      <mat-datepicker-toggle [for]=\"picker\"\n                             app-c-text-suffix\n                             class=\"date__toggle\"\n                             [tabIndex]=\"tabIndex\"\n      >\n          <div class=\"date__toggleIcon\"\n               matDatepickerToggleIcon\n               app-c-text-suffix></div>\n      </mat-datepicker-toggle>\n  </app-constructor-field-text>\n\n  <mat-datepicker #picker [tabIndex]=\"tabIndex\" [startAt]=\"startCalendarDate\"></mat-datepicker>\n}\n", styles: [":host{display:block}.date__toggle{position:absolute;top:50%;right:-20px;transform:translate(-50%,-50%);flex-shrink:0}.date__toggleIcon{display:block;mask-repeat:no-repeat;mask-size:contain}\n"], dependencies: [{ kind: "component", type: ConstructorFieldTextComponent, selector: "app-constructor-field-text", inputs: ["config", "matDatepicker", "tabIndex"], outputs: ["maskedValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldDateComponent, decorators: [{
             type: Component,
@@ -5568,7 +5546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useExisting: forwardRef(() => ConstructorFieldDateComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [ConstructorFieldTextComponent, FormsModule, ReactiveFormsModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker], template: "@if (control) {\r\n  <app-constructor-field-text\r\n      class=\"c-date__input\"\r\n      [tabIndex]=\"tabIndex\"\r\n      [config]=\"config\"\r\n      [formControl]=\"control\"\r\n      [matDatepicker]=\"picker\">\r\n      <mat-datepicker-toggle [for]=\"picker\"\r\n                             app-c-text-suffix\r\n                             class=\"date__toggle\"\r\n                             [tabIndex]=\"tabIndex\"\r\n      >\r\n          <div class=\"date__toggleIcon\"\r\n               matDatepickerToggleIcon\r\n               app-c-text-suffix></div>\r\n      </mat-datepicker-toggle>\r\n  </app-constructor-field-text>\r\n\r\n  <mat-datepicker #picker [tabIndex]=\"tabIndex\" [startAt]=\"startCalendarDate\"></mat-datepicker>\r\n}\r\n", styles: [":host{display:block}.date__toggle{position:absolute;top:50%;right:-20px;transform:translate(-50%,-50%);flex-shrink:0}.date__toggleIcon{display:block;mask-repeat:no-repeat;mask-size:contain}\n"] }]
+                    ], standalone: true, imports: [ConstructorFieldTextComponent, FormsModule, ReactiveFormsModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker], template: "@if (control) {\n  <app-constructor-field-text\n      class=\"c-date__input\"\n      [tabIndex]=\"tabIndex\"\n      [config]=\"config\"\n      [formControl]=\"control\"\n      [matDatepicker]=\"picker\">\n      <mat-datepicker-toggle [for]=\"picker\"\n                             app-c-text-suffix\n                             class=\"date__toggle\"\n                             [tabIndex]=\"tabIndex\"\n      >\n          <div class=\"date__toggleIcon\"\n               matDatepickerToggleIcon\n               app-c-text-suffix></div>\n      </mat-datepicker-toggle>\n  </app-constructor-field-text>\n\n  <mat-datepicker #picker [tabIndex]=\"tabIndex\" [startAt]=\"startCalendarDate\"></mat-datepicker>\n}\n", styles: [":host{display:block}.date__toggle{position:absolute;top:50%;right:-20px;transform:translate(-50%,-50%);flex-shrink:0}.date__toggleIcon{display:block;mask-repeat:no-repeat;mask-size:contain}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], tabIndex: [{
@@ -5581,11 +5559,11 @@ class ConstructorPreparationComponent {
         this.I18N_KEY = I18N_KEY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorPreparationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorPreparationComponent, isStandalone: true, selector: "app-constructor-preparation", inputs: { maskedWallet: "maskedWallet", wallet: "wallet", confirmationText: "confirmationText", methodName: "methodName", currency: "currency", amount: "amount", total: "total" }, providers: [CurrencyPipe], ngImport: i0, template: "<div class=\"confirmation\">\r\n  <h5> {{ I18N_KEY.CONSTRUCTOR_PREPARATION_HEADER | trans }} </h5>\r\n  <div class=\"confirmation__content\">\r\n    <ul class=\"confirmation__list\">\r\n      <li class=\"confirmation__list__item\">\r\n        <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}} </div>\r\n        <div class=\"confirmation__value\"> {{methodName | trans}}  </div>\r\n      </li>\r\n\r\n      @if (maskedWallet || wallet) {\r\n        <li class=\"confirmation__list__item\">\r\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_WALLET | trans}} </div>\r\n          <div class=\"confirmation__value\"> {{ maskedWallet || wallet}} </div>\r\n        </li>\r\n      }\r\n\r\n      @if (amount) {\r\n        <li class=\"confirmation__list__item\">\r\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT | trans}} </div>\r\n          <div class=\"confirmation__value\" [innerHtml]=\"amount | trm_currency: currency\">  </div>\r\n        </li>\r\n      }\r\n\r\n      @if (total) {\r\n        <li class=\"confirmation__list__item\">\r\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT_FEE | trans}} </div>\r\n          <div class=\"confirmation__value\" [innerHtml]=\"total | trm_currency: currency\"> </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n    @if (confirmationText) {\r\n      <p\r\n      class=\"confirmation__text\" [innerHTML]=\"confirmationText | trans | sanitizeHtml\"></p>\r\n    }\r\n    <ng-content selector=\"[app-constructor-preparation-error]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".confirmation{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.confirmation__content{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.confirmation__text{font-weight:600;font-size:15px;line-height:22px;color:var(--color-base-350);margin:0}.confirmation__list{list-style:none;margin:0;padding:0}.confirmation__list__item{border-radius:10px;padding:15px 20px;display:flex;justify-content:space-between}.confirmation__list__item:nth-child(odd){background:#f5f5f5}.confirmation__header{font-weight:400;font-size:15px;line-height:20px;color:var(--color-base-350)}.confirmation__value{font-weight:500;font-size:15px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "pipe", type: TrmCurrencyPipe, name: "trm_currency" }, { kind: "pipe", type: HtmlSanitizerPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorPreparationComponent, isStandalone: true, selector: "app-constructor-preparation", inputs: { maskedWallet: "maskedWallet", wallet: "wallet", confirmationText: "confirmationText", methodName: "methodName", currency: "currency", amount: "amount", total: "total" }, providers: [CurrencyPipe], ngImport: i0, template: "<div class=\"confirmation\">\n  <h5> {{ I18N_KEY.CONSTRUCTOR_PREPARATION_HEADER | trans }} </h5>\n  <div class=\"confirmation__content\">\n    <ul class=\"confirmation__list\">\n      <li class=\"confirmation__list__item\">\n        <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}} </div>\n        <div class=\"confirmation__value\"> {{methodName | trans}}  </div>\n      </li>\n\n      @if (maskedWallet || wallet) {\n        <li class=\"confirmation__list__item\">\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_WALLET | trans}} </div>\n          <div class=\"confirmation__value\"> {{ maskedWallet || wallet}} </div>\n        </li>\n      }\n\n      @if (amount) {\n        <li class=\"confirmation__list__item\">\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT | trans}} </div>\n          <div class=\"confirmation__value\" [innerHtml]=\"amount | trm_currency: currency\">  </div>\n        </li>\n      }\n\n      @if (total) {\n        <li class=\"confirmation__list__item\">\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT_FEE | trans}} </div>\n          <div class=\"confirmation__value\" [innerHtml]=\"total | trm_currency: currency\"> </div>\n        </li>\n      }\n    </ul>\n    @if (confirmationText) {\n      <p\n      class=\"confirmation__text\" [innerHTML]=\"confirmationText | trans | sanitizeHtml\"></p>\n    }\n    <ng-content selector=\"[app-constructor-preparation-error]\"></ng-content>\n  </div>\n</div>\n", styles: [".confirmation{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.confirmation__content{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.confirmation__text{font-weight:600;font-size:15px;line-height:22px;color:var(--color-base-350);margin:0}.confirmation__list{list-style:none;margin:0;padding:0}.confirmation__list__item{border-radius:10px;padding:15px 20px;display:flex;justify-content:space-between}.confirmation__list__item:nth-child(odd){background:#f5f5f5}.confirmation__header{font-weight:400;font-size:15px;line-height:20px;color:var(--color-base-350)}.confirmation__value{font-weight:500;font-size:15px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "pipe", type: TrmCurrencyPipe, name: "trm_currency" }, { kind: "pipe", type: HtmlSanitizerPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorPreparationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-constructor-preparation', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, providers: [CurrencyPipe], imports: [TrmCurrencyPipe, HtmlSanitizerPipe, TranslateByKeyPipe], template: "<div class=\"confirmation\">\r\n  <h5> {{ I18N_KEY.CONSTRUCTOR_PREPARATION_HEADER | trans }} </h5>\r\n  <div class=\"confirmation__content\">\r\n    <ul class=\"confirmation__list\">\r\n      <li class=\"confirmation__list__item\">\r\n        <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}} </div>\r\n        <div class=\"confirmation__value\"> {{methodName | trans}}  </div>\r\n      </li>\r\n\r\n      @if (maskedWallet || wallet) {\r\n        <li class=\"confirmation__list__item\">\r\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_WALLET | trans}} </div>\r\n          <div class=\"confirmation__value\"> {{ maskedWallet || wallet}} </div>\r\n        </li>\r\n      }\r\n\r\n      @if (amount) {\r\n        <li class=\"confirmation__list__item\">\r\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT | trans}} </div>\r\n          <div class=\"confirmation__value\" [innerHtml]=\"amount | trm_currency: currency\">  </div>\r\n        </li>\r\n      }\r\n\r\n      @if (total) {\r\n        <li class=\"confirmation__list__item\">\r\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT_FEE | trans}} </div>\r\n          <div class=\"confirmation__value\" [innerHtml]=\"total | trm_currency: currency\"> </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n    @if (confirmationText) {\r\n      <p\r\n      class=\"confirmation__text\" [innerHTML]=\"confirmationText | trans | sanitizeHtml\"></p>\r\n    }\r\n    <ng-content selector=\"[app-constructor-preparation-error]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".confirmation{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.confirmation__content{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.confirmation__text{font-weight:600;font-size:15px;line-height:22px;color:var(--color-base-350);margin:0}.confirmation__list{list-style:none;margin:0;padding:0}.confirmation__list__item{border-radius:10px;padding:15px 20px;display:flex;justify-content:space-between}.confirmation__list__item:nth-child(odd){background:#f5f5f5}.confirmation__header{font-weight:400;font-size:15px;line-height:20px;color:var(--color-base-350)}.confirmation__value{font-weight:500;font-size:15px;line-height:20px;color:#000}\n"] }]
+            args: [{ selector: 'app-constructor-preparation', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, providers: [CurrencyPipe], imports: [TrmCurrencyPipe, HtmlSanitizerPipe, TranslateByKeyPipe], template: "<div class=\"confirmation\">\n  <h5> {{ I18N_KEY.CONSTRUCTOR_PREPARATION_HEADER | trans }} </h5>\n  <div class=\"confirmation__content\">\n    <ul class=\"confirmation__list\">\n      <li class=\"confirmation__list__item\">\n        <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_PS | trans}} </div>\n        <div class=\"confirmation__value\"> {{methodName | trans}}  </div>\n      </li>\n\n      @if (maskedWallet || wallet) {\n        <li class=\"confirmation__list__item\">\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_WALLET | trans}} </div>\n          <div class=\"confirmation__value\"> {{ maskedWallet || wallet}} </div>\n        </li>\n      }\n\n      @if (amount) {\n        <li class=\"confirmation__list__item\">\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT | trans}} </div>\n          <div class=\"confirmation__value\" [innerHtml]=\"amount | trm_currency: currency\">  </div>\n        </li>\n      }\n\n      @if (total) {\n        <li class=\"confirmation__list__item\">\n          <div class=\"confirmation__header\"> {{I18N_KEY.CONSTRUCTOR_LABEL_AMOUNT_FEE | trans}} </div>\n          <div class=\"confirmation__value\" [innerHtml]=\"total | trm_currency: currency\"> </div>\n        </li>\n      }\n    </ul>\n    @if (confirmationText) {\n      <p\n      class=\"confirmation__text\" [innerHTML]=\"confirmationText | trans | sanitizeHtml\"></p>\n    }\n    <ng-content selector=\"[app-constructor-preparation-error]\"></ng-content>\n  </div>\n</div>\n", styles: [".confirmation{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.confirmation__content{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.confirmation__text{font-weight:600;font-size:15px;line-height:22px;color:var(--color-base-350);margin:0}.confirmation__list{list-style:none;margin:0;padding:0}.confirmation__list__item{border-radius:10px;padding:15px 20px;display:flex;justify-content:space-between}.confirmation__list__item:nth-child(odd){background:#f5f5f5}.confirmation__header{font-weight:400;font-size:15px;line-height:20px;color:var(--color-base-350)}.confirmation__value{font-weight:500;font-size:15px;line-height:20px;color:#000}\n"] }]
         }], propDecorators: { maskedWallet: [{
                 type: Input
             }], wallet: [{
@@ -5895,14 +5873,14 @@ class ConstructorFormComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorFormComponent, isStandalone: true, selector: "app-constructor-form", inputs: { step: "step", error: "error", response: "response", feeLoading: "feeLoading", feeOptions: "feeOptions", currency: "currency", userCurrency: "userCurrency", loading: "loading", types: "types", canReturnToProject: "canReturnToProject", tabIndex: "tabIndex" }, outputs: { amountChanged: "amountChanged", back: "back", prepare: "prepare", confirm: "confirm", onPaymentChanged: "onPaymentChanged" }, providers: [
             ConstructorFormService,
             CountryTranslatePipe, CountriesSortPipe
-        ], viewQueries: [{ propertyName: "requisites", first: true, predicate: ["paymentRequisites"], descendants: true }, { propertyName: "hintMethod", first: true, predicate: ["hintMethod"], descendants: true }, { propertyName: "sdkList", predicate: CardSdkService, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form class=\"constructor\"\r\n  [formGroup]=\"form\"\r\n  (ngSubmit)=\"submit()\"\r\n  >\r\n  @if (loading !== null) {\r\n    @if (step === TERMINAL_STEP.Prepare) {\r\n      <div class=\"constructor__fields\">\r\n        @if (countrySearchString || countriesList.length > 1) {\r\n          <div class=\"constructor__field\">\r\n            <app-trm-select [data]=\"countriesList\"\r\n                            @insertRemove\r\n              name=\"country\"\r\n              [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_COUNTRY | trans\"\r\n              formControlName=\"country\"\r\n              class=\"c-field-select trm-form-field\"\r\n              (search)=\"searchCountry($event)\"\r\n              [tabIndex]=\"tabIndex\"\r\n              >\r\n              <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n                <span class=\"fi\"\r\n                [ngClass]=\"'fi-' + item.toLowerCase()\"></span>\r\n                <span class=\"method__name\">{{item | country_translate: lang}}</span>\r\n              </ng-template>\r\n            </app-trm-select>\r\n          </div>\r\n        }\r\n        @if (form.country.value) {\r\n          <app-ps-select [methods]=\"methodsList\"\r\n                         @insertRemove\r\n            formControlName=\"method\"\r\n            [tabIndex]=\"tabIndex\"\r\n            >\r\n            @if (form.config?.description) {\r\n              <div class=\"constructor__hint text--warn\"\r\n                app-ps-select-hint\r\n                #hintMethod\r\n                @insertRemove\r\n                >\r\n                {{description | trans }}\r\n              </div>\r\n            }\r\n          </app-ps-select>\r\n\r\n          @if (\r\n            form.method?.hasError('required') &&\r\n            form.method.touched &&\r\n            form.method.dirty\r\n            ) {\r\n            <div class=\"gm-error\" @insertRemove>\r\n              {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\r\n            </div>\r\n          }\r\n        }\r\n\r\n        @if (form.ready) {\r\n            <div formGroupName=\"payment\"\r\n                 @insertRemove\r\n              #paymentRequisites\r\n              class=\"constructor__fields constructor__fields--reverse\">\r\n              @if (form.method.value && form.amountDynamic) {\r\n                <ng-container *ngTemplateOutlet=\"currencyTpl; context: {label: I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans, tabIndex: 0}\"></ng-container>\r\n              }\r\n              @for (field of form.fields; track field.name; let i = $index) {\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Iframe) {\r\n                  @if (form.payment.get(field.name)?.hasError('cde_error')) {\r\n                    <div class=\"constructor__hint cde-error\" @insertRemove>\r\n                      {{\r\n                        form.payment.get(field.name).getError('cde_error')\r\n                          | trans\r\n                      }}\r\n                    </div>\r\n                  }\r\n                  <app-constructor-field-iframe\r\n                    [formControlName]=\"field.name\"\r\n                    @insertRemove\r\n                    [hidden]=\"\r\n                        form.payment.get(field.name)?.hasError('cde_error')\r\n                      \"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\r\n                  >\r\n                  </app-constructor-field-iframe>\r\n                }\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Select) {\r\n                  <app-constructor-field-select\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [items]=\"field?.options?.items\"\r\n                    [formControlName]=\"field.name\"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\r\n                  ></app-constructor-field-select>\r\n                }\r\n                @if ([CONSTRUCTOR_FIELD_TYPES.Text, CONSTRUCTOR_FIELD_TYPES.Number, CONSTRUCTOR_FIELD_TYPES.Email].includes(field.type)) {\r\n                  <app-constructor-field-text\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [formControlName]=\"field.name\"\r\n                    (maskedValueChange)=\"changeTextFieldValue($event, field)\"\r\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-text>\r\n                }\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Amount) {\r\n                  <app-constructor-field-text\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [formControlName]=\"field.name\"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\">\r\n                    <app-method-amount-hint app-c-text-hint\r\n                      class=\"constructor__hint\"\r\n                      [loading]=\"feeLoading\"\r\n                      [options]=\"feeOptions || field.options\"\r\n                    ></app-method-amount-hint>\r\n                    <div app-c-text-suffix\r\n                      class=\"constructor__currency\"\r\n                      [class.constructor__currency--transparent]=\"form.isAmountEditable\"\r\n                      >\r\n                      <ng-container *ngTemplateOutlet=\"currencyTpl; context: {tabIndex: form.fields.length - i + tabIndex}\"></ng-container>\r\n                    </div>\r\n                  </app-constructor-field-text>\r\n                  @if (hasCurrencyMethodSelector) {\r\n                    <app-trm-select\r\n                      @insertRemove\r\n                      class=\"constructor-field\"\r\n                      [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans\"\r\n                      [formControl]=\"form.currency\"\r\n                      [searchable]=\"false\"\r\n                      [data]=\"currenciesList\"\r\n                      [tabIndex]=\"form.fields.length - i + tabIndex\"\r\n                      >\r\n                      <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n                        <span class=\"trm-icon\" [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\r\n                        [title]=\"item\"></span>\r\n                        {{item}}\r\n                      </ng-template>\r\n                    </app-trm-select>\r\n                  }\r\n                }\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Date) {\r\n                  <app-constructor-field-date\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [formControlName]=\"field.name\"\r\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-date>\r\n                }\r\n              }\r\n              <ng-template #currencyTpl let-label=\"label\" let-tabIndex=\"tabIndex\">\r\n                <app-trm-select\r\n                  @insertRemove\r\n                  [label]=\"label\"\r\n                  [formControl]=\"form.userCurrency\"\r\n                  [searchable]=\"false\"\r\n                  [data]=\"userCurrenciesList\"\r\n                  [tabIndex]=\"tabIndex\"\r\n                  >\r\n                  <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n                    <span class=\"trm-icon\"\r\n                      [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\r\n                    [title]=\"item\"></span>\r\n                    {{item}}\r\n                  </ng-template>\r\n                </app-trm-select>\r\n              </ng-template>\r\n            </div>\r\n        } @else {\r\n          <div class=\"trm-skeleton-fields\">\r\n            @for (i of skeletonLength; track $index) {\r\n              <div class=\"trm-skeleton-field\">\r\n                <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\r\n                <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n        @if (error && !form.methodInfoLoading) {\r\n          <div class=\"trm-error\"\r\n            @insertRemove\r\n            >\r\n            {{ error | trans }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @if (step === TERMINAL_STEP.Confirmation) {\r\n      <app-constructor-preparation\r\n        @insertRemove\r\n        [currency]=\"response?.currency\"\r\n        [methodName]=\"form.getTypeNameById(response.typeId)\"\r\n        [wallet]=\"response.wallet\"\r\n        [maskedWallet]=\"maskedWallet\"\r\n        [amount]=\"response.amount\"\r\n        [total]=\"response.total\"\r\n        [confirmationText]=\"form.config?.confirmation\"\r\n        >\r\n        @if (error && !form.payment.pending) {\r\n          <div class=\"trm-error\"\r\n            app-constructor-preparation-error\r\n            @insertRemove\r\n            >\r\n            {{ error | trans }}\r\n          </div>\r\n        }\r\n      </app-constructor-preparation>\r\n    }\r\n    <div class=\"constructor__actions\"\r\n         @insertRemove>\r\n      <button class=\"trm-button trm-button--primary constructor__actions-continue\"\r\n        type=\"submit\"\r\n        [tabindex]=\"form.fields.length + tabIndex\">\r\n        {{I18N_KEY.CONSTRUCTOR_LABEL_CONTINUE | trans}}\r\n        @if (loading) {\r\n          <span class=\"trm-spinner trm-spinner-white\"></span>\r\n        }\r\n      </button>\r\n      <button class=\"trm-button trm-button--secondary constructor__actions-back\"\r\n        type=\"button\"\r\n        [tabindex]=\"form.fields.length + tabIndex\"\r\n      (click)=\"back.emit()\"> {{ backBtnLabel | trans}}</button>\r\n    </div>\r\n  } @else {\r\n    <div class=\"trm-skeleton-group\">\r\n      <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\r\n      <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block}.constructor{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.constructor__fields{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.constructor__fields--reverse{flex-direction:column-reverse}.constructor__fields .fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.constructor__fields .fi-other{border-color:transparent}.constructor__currency{--trm-select-border-radius: 0 10px 10px 0;display:flex;align-items:center;position:absolute;bottom:0;right:0;flex-shrink:0;min-height:46px}@media (min-width: 768px){.constructor__currency{min-height:50px}}.constructor__currency .trm-divider{margin:5px 0;align-self:stretch}.constructor__currency--transparent{--trm-select-bg-color: transparent;--trm-select-bg-color--disabled: transparent;--trm-select-border-color: transparent;--trm-select-border-color--hover: transparent;--trm-select-border-color--focus: transparent}.constructor__actions{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.constructor__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}.constructor__hint.cde-error{font-weight:500;font-size:14px;line-height:20px;color:var(--color-red-500)}.constructor .constructor__actions-continue{position:relative}.constructor .constructor__actions-continue .trm-spinner{position:absolute;right:15px}\n"], dependencies: [{ kind: "pipe", type: CountryTranslatePipe, name: "country_translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "directive", type: TrmSelectLabelTemplateDirective, selector: "[trmSelectLabelTemplate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PsSelectComponent, selector: "app-ps-select", inputs: ["methods", "tabIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ConstructorFieldIframeComponent, selector: "app-constructor-field-iframe", inputs: ["tabIndex"] }, { kind: "component", type: ConstructorFieldSelectComponent, selector: "app-constructor-field-select", inputs: ["config", "items", "tabIndex"] }, { kind: "component", type: ConstructorFieldTextComponent, selector: "app-constructor-field-text", inputs: ["config", "matDatepicker", "tabIndex"], outputs: ["maskedValueChange"] }, { kind: "component", type: MethodAmountHintComponent, selector: "app-method-amount-hint", inputs: ["loading", "options"] }, { kind: "component", type: ConstructorFieldDateComponent, selector: "app-constructor-field-date", inputs: ["config", "tabIndex"] }, { kind: "component", type: ConstructorPreparationComponent, selector: "app-constructor-preparation", inputs: ["maskedWallet", "wallet", "confirmationText", "methodName", "currency", "amount", "total"] }, { kind: "directive", type: TabIndexFocusDirective, selector: "[tabindex]" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "requisites", first: true, predicate: ["paymentRequisites"], descendants: true }, { propertyName: "hintMethod", first: true, predicate: ["hintMethod"], descendants: true }, { propertyName: "sdkList", predicate: CardSdkService, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form class=\"constructor\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submit()\"\n  >\n  @if (loading !== null) {\n    @if (step === TERMINAL_STEP.Prepare) {\n      <div class=\"constructor__fields\">\n        @if (countrySearchString || countriesList.length > 1) {\n          <div class=\"constructor__field\">\n            <app-trm-select [data]=\"countriesList\"\n                            @insertRemove\n              name=\"country\"\n              [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_COUNTRY | trans\"\n              formControlName=\"country\"\n              class=\"c-field-select trm-form-field\"\n              (search)=\"searchCountry($event)\"\n              [tabIndex]=\"tabIndex\"\n              >\n              <ng-template trmSelectLabelTemplate let-item=\"item\">\n                <span class=\"fi\"\n                [ngClass]=\"'fi-' + item.toLowerCase()\"></span>\n                <span class=\"method__name\">{{item | country_translate: lang}}</span>\n              </ng-template>\n            </app-trm-select>\n          </div>\n        }\n        @if (form.country.value) {\n          <app-ps-select [methods]=\"methodsList\"\n                         @insertRemove\n            formControlName=\"method\"\n            [tabIndex]=\"tabIndex\"\n            >\n            @if (form.config?.description) {\n              <div class=\"constructor__hint text--warn\"\n                app-ps-select-hint\n                #hintMethod\n                @insertRemove\n                >\n                {{description | trans }}\n              </div>\n            }\n          </app-ps-select>\n\n          @if (\n            form.method?.hasError('required') &&\n            form.method.touched &&\n            form.method.dirty\n            ) {\n            <div class=\"gm-error\" @insertRemove>\n              {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\n            </div>\n          }\n        }\n\n        @if (form.ready) {\n            <div formGroupName=\"payment\"\n                 @insertRemove\n              #paymentRequisites\n              class=\"constructor__fields constructor__fields--reverse\">\n              @if (form.method.value && form.amountDynamic) {\n                <ng-container *ngTemplateOutlet=\"currencyTpl; context: {label: I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans, tabIndex: 0}\"></ng-container>\n              }\n              @for (field of form.fields; track field.name; let i = $index) {\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Iframe) {\n                  @if (form.payment.get(field.name)?.hasError('cde_error')) {\n                    <div class=\"constructor__hint cde-error\" @insertRemove>\n                      {{\n                        form.payment.get(field.name).getError('cde_error')\n                          | trans\n                      }}\n                    </div>\n                  }\n                  <app-constructor-field-iframe\n                    [formControlName]=\"field.name\"\n                    @insertRemove\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\n                  >\n                  </app-constructor-field-iframe>\n                }\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Select) {\n                  <app-constructor-field-select\n                    @insertRemove\n                    [config]=\"field\"\n                    [items]=\"field?.options?.items\"\n                    [formControlName]=\"field.name\"\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\n                  ></app-constructor-field-select>\n                }\n                @if ([CONSTRUCTOR_FIELD_TYPES.Text, CONSTRUCTOR_FIELD_TYPES.Number, CONSTRUCTOR_FIELD_TYPES.Email].includes(field.type)) {\n                  <app-constructor-field-text\n                    @insertRemove\n                    [config]=\"field\"\n                    [formControlName]=\"field.name\"\n                    (maskedValueChange)=\"changeTextFieldValue($event, field)\"\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-text>\n                }\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Amount) {\n                  <app-constructor-field-text\n                    @insertRemove\n                    [config]=\"field\"\n                    [formControlName]=\"field.name\"\n                    [tabIndex]=\"form.fields.length - i + tabIndex\">\n                    <app-method-amount-hint app-c-text-hint\n                      class=\"constructor__hint\"\n                      [loading]=\"feeLoading\"\n                      [options]=\"feeOptions || field.options\"\n                    ></app-method-amount-hint>\n                    @if (!hasCurrencyMethodSelector) {\n                      <div app-c-text-suffix\n                        class=\"constructor__currency\"\n                        [class.constructor__currency--transparent]=\"form.isAmountEditable\"\n                        >\n                        <ng-container *ngTemplateOutlet=\"currencyTpl; context: {tabIndex: form.fields.length - i + tabIndex}\"></ng-container>\n                      </div>\n                    }\n                  </app-constructor-field-text>\n                  @if (hasCurrencyMethodSelector) {\n                    <app-trm-select\n                      @insertRemove\n                      class=\"constructor-field\"\n                      [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans\"\n                      [formControl]=\"form.currency\"\n                      [searchable]=\"false\"\n                      [data]=\"currenciesList\"\n                      [tabIndex]=\"form.fields.length - i + tabIndex\"\n                      >\n                      <ng-template trmSelectLabelTemplate let-item=\"item\">\n                        <span class=\"trm-icon\" [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\n                        [title]=\"item\"></span>\n                        {{item}}\n                      </ng-template>\n                    </app-trm-select>\n                  }\n                }\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Date) {\n                  <app-constructor-field-date\n                    @insertRemove\n                    [config]=\"field\"\n                    [formControlName]=\"field.name\"\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-date>\n                }\n              }\n              <ng-template #currencyTpl let-label=\"label\" let-tabIndex=\"tabIndex\">\n                <app-trm-select\n                  class=\"constructor-field-inner\"\n                  @insertRemove\n                  [label]=\"label\"\n                  [formControl]=\"form.userCurrency\"\n                  [searchable]=\"false\"\n                  [data]=\"userCurrenciesList\"\n                  [tabIndex]=\"tabIndex\"\n                  >\n                  <ng-template trmSelectLabelTemplate let-item=\"item\">\n                    <span class=\"trm-icon\"\n                      [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\n                    [title]=\"item\"></span>\n                    {{item}}\n                  </ng-template>\n                </app-trm-select>\n              </ng-template>\n            </div>\n        } @else {\n          <div class=\"trm-skeleton-fields\">\n            @for (i of skeletonLength; track $index) {\n              <div class=\"trm-skeleton-field\">\n                <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\n                <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\n              </div>\n            }\n          </div>\n        }\n        @if (error && !form.methodInfoLoading) {\n          <div class=\"trm-error\"\n            @insertRemove\n            >\n            {{ error | trans }}\n          </div>\n        }\n      </div>\n    }\n    @if (step === TERMINAL_STEP.Confirmation) {\n      <app-constructor-preparation\n        @insertRemove\n        [currency]=\"response?.currency\"\n        [methodName]=\"form.getTypeNameById(response.typeId)\"\n        [wallet]=\"response.wallet\"\n        [maskedWallet]=\"maskedWallet\"\n        [amount]=\"response.amount\"\n        [total]=\"response.total\"\n        [confirmationText]=\"form.config?.confirmation\"\n        >\n        @if (error && !form.payment.pending) {\n          <div class=\"trm-error\"\n            app-constructor-preparation-error\n            @insertRemove\n            >\n            {{ error | trans }}\n          </div>\n        }\n      </app-constructor-preparation>\n    }\n    <div class=\"constructor__actions\"\n         @insertRemove>\n      <button class=\"trm-button trm-button--primary constructor__actions-continue\"\n        type=\"submit\"\n        [tabindex]=\"form.fields.length + tabIndex\">\n        {{I18N_KEY.CONSTRUCTOR_LABEL_CONTINUE | trans}}\n        @if (loading) {\n          <span class=\"trm-spinner trm-spinner-white\"></span>\n        }\n      </button>\n      <button class=\"trm-button trm-button--secondary constructor__actions-back\"\n        type=\"button\"\n        [tabindex]=\"form.fields.length + tabIndex\"\n      (click)=\"back.emit()\"> {{ backBtnLabel | trans}}</button>\n    </div>\n  } @else {\n    <div class=\"trm-skeleton-group\">\n      <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\n      <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\n    </div>\n  }\n</form>\n", styles: [":host{display:block}.constructor{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.constructor__fields{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.constructor__fields--reverse{flex-direction:column-reverse}.constructor__fields .fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.constructor__fields .fi-other{border-color:transparent}.constructor__currency{--trm-select-border-radius: 0 10px 10px 0;display:flex;align-items:center;position:absolute;bottom:1px;right:1px;flex-shrink:0;min-height:44px}@media (min-width: 768px){.constructor__currency{min-height:48px}}.constructor__currency .trm-divider{margin:5px 0;align-self:stretch}.constructor__currency--transparent{--trm-select-bg-color: transparent;--trm-select-bg-color--disabled: transparent;--trm-select-border-color: transparent;--trm-select-border-color--hover: transparent;--trm-select-border-color--focus: transparent}.constructor__actions{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.constructor__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}.constructor__hint.cde-error{font-weight:500;font-size:14px;line-height:20px;color:var(--color-red-500)}.constructor .constructor__actions-continue{position:relative}.constructor .constructor__actions-continue .trm-spinner{position:absolute;right:15px}\n"], dependencies: [{ kind: "pipe", type: CountryTranslatePipe, name: "country_translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: TrmSelectComponent, selector: "app-trm-select", inputs: ["label", "hasBorder", "data", "tabIndex", "name", "placeholder", "searchable", "hasScrollbar", "nameId", "nameLabel"], outputs: ["open", "search"] }, { kind: "directive", type: TrmSelectLabelTemplateDirective, selector: "[trmSelectLabelTemplate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PsSelectComponent, selector: "app-ps-select", inputs: ["methods", "tabIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ConstructorFieldIframeComponent, selector: "app-constructor-field-iframe", inputs: ["tabIndex"] }, { kind: "component", type: ConstructorFieldSelectComponent, selector: "app-constructor-field-select", inputs: ["config", "items", "tabIndex"] }, { kind: "component", type: ConstructorFieldTextComponent, selector: "app-constructor-field-text", inputs: ["config", "matDatepicker", "tabIndex"], outputs: ["maskedValueChange"] }, { kind: "component", type: MethodAmountHintComponent, selector: "app-method-amount-hint", inputs: ["loading", "options"] }, { kind: "component", type: ConstructorFieldDateComponent, selector: "app-constructor-field-date", inputs: ["config", "tabIndex"] }, { kind: "component", type: ConstructorPreparationComponent, selector: "app-constructor-preparation", inputs: ["maskedWallet", "wallet", "confirmationText", "methodName", "currency", "amount", "total"] }, { kind: "directive", type: TabIndexFocusDirective, selector: "[tabindex]" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }], animations: [insertRemoveTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-constructor-form', changeDetection: ChangeDetectionStrategy.OnPush, animations: [insertRemoveTrigger], providers: [
                         ConstructorFormService,
                         CountryTranslatePipe, CountriesSortPipe
-                    ], standalone: true, imports: [CountryTranslatePipe, CountriesSortPipe, FormsModule, ReactiveFormsModule, TrmSelectComponent, TrmSelectLabelTemplateDirective, NgClass, PsSelectComponent, NgTemplateOutlet, ConstructorFieldIframeComponent, ConstructorFieldSelectComponent, ConstructorFieldTextComponent, MethodAmountHintComponent, ConstructorFieldDateComponent, ConstructorPreparationComponent, TabIndexFocusDirective, CountryTranslatePipe, TranslateByKeyPipe, GmSkeletonComponent], template: "<form class=\"constructor\"\r\n  [formGroup]=\"form\"\r\n  (ngSubmit)=\"submit()\"\r\n  >\r\n  @if (loading !== null) {\r\n    @if (step === TERMINAL_STEP.Prepare) {\r\n      <div class=\"constructor__fields\">\r\n        @if (countrySearchString || countriesList.length > 1) {\r\n          <div class=\"constructor__field\">\r\n            <app-trm-select [data]=\"countriesList\"\r\n                            @insertRemove\r\n              name=\"country\"\r\n              [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_COUNTRY | trans\"\r\n              formControlName=\"country\"\r\n              class=\"c-field-select trm-form-field\"\r\n              (search)=\"searchCountry($event)\"\r\n              [tabIndex]=\"tabIndex\"\r\n              >\r\n              <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n                <span class=\"fi\"\r\n                [ngClass]=\"'fi-' + item.toLowerCase()\"></span>\r\n                <span class=\"method__name\">{{item | country_translate: lang}}</span>\r\n              </ng-template>\r\n            </app-trm-select>\r\n          </div>\r\n        }\r\n        @if (form.country.value) {\r\n          <app-ps-select [methods]=\"methodsList\"\r\n                         @insertRemove\r\n            formControlName=\"method\"\r\n            [tabIndex]=\"tabIndex\"\r\n            >\r\n            @if (form.config?.description) {\r\n              <div class=\"constructor__hint text--warn\"\r\n                app-ps-select-hint\r\n                #hintMethod\r\n                @insertRemove\r\n                >\r\n                {{description | trans }}\r\n              </div>\r\n            }\r\n          </app-ps-select>\r\n\r\n          @if (\r\n            form.method?.hasError('required') &&\r\n            form.method.touched &&\r\n            form.method.dirty\r\n            ) {\r\n            <div class=\"gm-error\" @insertRemove>\r\n              {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\r\n            </div>\r\n          }\r\n        }\r\n\r\n        @if (form.ready) {\r\n            <div formGroupName=\"payment\"\r\n                 @insertRemove\r\n              #paymentRequisites\r\n              class=\"constructor__fields constructor__fields--reverse\">\r\n              @if (form.method.value && form.amountDynamic) {\r\n                <ng-container *ngTemplateOutlet=\"currencyTpl; context: {label: I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans, tabIndex: 0}\"></ng-container>\r\n              }\r\n              @for (field of form.fields; track field.name; let i = $index) {\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Iframe) {\r\n                  @if (form.payment.get(field.name)?.hasError('cde_error')) {\r\n                    <div class=\"constructor__hint cde-error\" @insertRemove>\r\n                      {{\r\n                        form.payment.get(field.name).getError('cde_error')\r\n                          | trans\r\n                      }}\r\n                    </div>\r\n                  }\r\n                  <app-constructor-field-iframe\r\n                    [formControlName]=\"field.name\"\r\n                    @insertRemove\r\n                    [hidden]=\"\r\n                        form.payment.get(field.name)?.hasError('cde_error')\r\n                      \"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\r\n                  >\r\n                  </app-constructor-field-iframe>\r\n                }\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Select) {\r\n                  <app-constructor-field-select\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [items]=\"field?.options?.items\"\r\n                    [formControlName]=\"field.name\"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\r\n                  ></app-constructor-field-select>\r\n                }\r\n                @if ([CONSTRUCTOR_FIELD_TYPES.Text, CONSTRUCTOR_FIELD_TYPES.Number, CONSTRUCTOR_FIELD_TYPES.Email].includes(field.type)) {\r\n                  <app-constructor-field-text\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [formControlName]=\"field.name\"\r\n                    (maskedValueChange)=\"changeTextFieldValue($event, field)\"\r\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-text>\r\n                }\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Amount) {\r\n                  <app-constructor-field-text\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [formControlName]=\"field.name\"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\">\r\n                    <app-method-amount-hint app-c-text-hint\r\n                      class=\"constructor__hint\"\r\n                      [loading]=\"feeLoading\"\r\n                      [options]=\"feeOptions || field.options\"\r\n                    ></app-method-amount-hint>\r\n                    <div app-c-text-suffix\r\n                      class=\"constructor__currency\"\r\n                      [class.constructor__currency--transparent]=\"form.isAmountEditable\"\r\n                      >\r\n                      <ng-container *ngTemplateOutlet=\"currencyTpl; context: {tabIndex: form.fields.length - i + tabIndex}\"></ng-container>\r\n                    </div>\r\n                  </app-constructor-field-text>\r\n                  @if (hasCurrencyMethodSelector) {\r\n                    <app-trm-select\r\n                      @insertRemove\r\n                      class=\"constructor-field\"\r\n                      [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans\"\r\n                      [formControl]=\"form.currency\"\r\n                      [searchable]=\"false\"\r\n                      [data]=\"currenciesList\"\r\n                      [tabIndex]=\"form.fields.length - i + tabIndex\"\r\n                      >\r\n                      <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n                        <span class=\"trm-icon\" [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\r\n                        [title]=\"item\"></span>\r\n                        {{item}}\r\n                      </ng-template>\r\n                    </app-trm-select>\r\n                  }\r\n                }\r\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Date) {\r\n                  <app-constructor-field-date\r\n                    @insertRemove\r\n                    [config]=\"field\"\r\n                    [formControlName]=\"field.name\"\r\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-date>\r\n                }\r\n              }\r\n              <ng-template #currencyTpl let-label=\"label\" let-tabIndex=\"tabIndex\">\r\n                <app-trm-select\r\n                  @insertRemove\r\n                  [label]=\"label\"\r\n                  [formControl]=\"form.userCurrency\"\r\n                  [searchable]=\"false\"\r\n                  [data]=\"userCurrenciesList\"\r\n                  [tabIndex]=\"tabIndex\"\r\n                  >\r\n                  <ng-template trmSelectLabelTemplate let-item=\"item\">\r\n                    <span class=\"trm-icon\"\r\n                      [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\r\n                    [title]=\"item\"></span>\r\n                    {{item}}\r\n                  </ng-template>\r\n                </app-trm-select>\r\n              </ng-template>\r\n            </div>\r\n        } @else {\r\n          <div class=\"trm-skeleton-fields\">\r\n            @for (i of skeletonLength; track $index) {\r\n              <div class=\"trm-skeleton-field\">\r\n                <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\r\n                <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n        @if (error && !form.methodInfoLoading) {\r\n          <div class=\"trm-error\"\r\n            @insertRemove\r\n            >\r\n            {{ error | trans }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @if (step === TERMINAL_STEP.Confirmation) {\r\n      <app-constructor-preparation\r\n        @insertRemove\r\n        [currency]=\"response?.currency\"\r\n        [methodName]=\"form.getTypeNameById(response.typeId)\"\r\n        [wallet]=\"response.wallet\"\r\n        [maskedWallet]=\"maskedWallet\"\r\n        [amount]=\"response.amount\"\r\n        [total]=\"response.total\"\r\n        [confirmationText]=\"form.config?.confirmation\"\r\n        >\r\n        @if (error && !form.payment.pending) {\r\n          <div class=\"trm-error\"\r\n            app-constructor-preparation-error\r\n            @insertRemove\r\n            >\r\n            {{ error | trans }}\r\n          </div>\r\n        }\r\n      </app-constructor-preparation>\r\n    }\r\n    <div class=\"constructor__actions\"\r\n         @insertRemove>\r\n      <button class=\"trm-button trm-button--primary constructor__actions-continue\"\r\n        type=\"submit\"\r\n        [tabindex]=\"form.fields.length + tabIndex\">\r\n        {{I18N_KEY.CONSTRUCTOR_LABEL_CONTINUE | trans}}\r\n        @if (loading) {\r\n          <span class=\"trm-spinner trm-spinner-white\"></span>\r\n        }\r\n      </button>\r\n      <button class=\"trm-button trm-button--secondary constructor__actions-back\"\r\n        type=\"button\"\r\n        [tabindex]=\"form.fields.length + tabIndex\"\r\n      (click)=\"back.emit()\"> {{ backBtnLabel | trans}}</button>\r\n    </div>\r\n  } @else {\r\n    <div class=\"trm-skeleton-group\">\r\n      <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\r\n      <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block}.constructor{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.constructor__fields{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.constructor__fields--reverse{flex-direction:column-reverse}.constructor__fields .fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.constructor__fields .fi-other{border-color:transparent}.constructor__currency{--trm-select-border-radius: 0 10px 10px 0;display:flex;align-items:center;position:absolute;bottom:0;right:0;flex-shrink:0;min-height:46px}@media (min-width: 768px){.constructor__currency{min-height:50px}}.constructor__currency .trm-divider{margin:5px 0;align-self:stretch}.constructor__currency--transparent{--trm-select-bg-color: transparent;--trm-select-bg-color--disabled: transparent;--trm-select-border-color: transparent;--trm-select-border-color--hover: transparent;--trm-select-border-color--focus: transparent}.constructor__actions{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.constructor__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}.constructor__hint.cde-error{font-weight:500;font-size:14px;line-height:20px;color:var(--color-red-500)}.constructor .constructor__actions-continue{position:relative}.constructor .constructor__actions-continue .trm-spinner{position:absolute;right:15px}\n"] }]
+                    ], standalone: true, imports: [CountryTranslatePipe, CountriesSortPipe, FormsModule, ReactiveFormsModule, TrmSelectComponent, TrmSelectLabelTemplateDirective, NgClass, PsSelectComponent, NgTemplateOutlet, ConstructorFieldIframeComponent, ConstructorFieldSelectComponent, ConstructorFieldTextComponent, MethodAmountHintComponent, ConstructorFieldDateComponent, ConstructorPreparationComponent, TabIndexFocusDirective, CountryTranslatePipe, TranslateByKeyPipe, GmSkeletonComponent], template: "<form class=\"constructor\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"submit()\"\n  >\n  @if (loading !== null) {\n    @if (step === TERMINAL_STEP.Prepare) {\n      <div class=\"constructor__fields\">\n        @if (countrySearchString || countriesList.length > 1) {\n          <div class=\"constructor__field\">\n            <app-trm-select [data]=\"countriesList\"\n                            @insertRemove\n              name=\"country\"\n              [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_COUNTRY | trans\"\n              formControlName=\"country\"\n              class=\"c-field-select trm-form-field\"\n              (search)=\"searchCountry($event)\"\n              [tabIndex]=\"tabIndex\"\n              >\n              <ng-template trmSelectLabelTemplate let-item=\"item\">\n                <span class=\"fi\"\n                [ngClass]=\"'fi-' + item.toLowerCase()\"></span>\n                <span class=\"method__name\">{{item | country_translate: lang}}</span>\n              </ng-template>\n            </app-trm-select>\n          </div>\n        }\n        @if (form.country.value) {\n          <app-ps-select [methods]=\"methodsList\"\n                         @insertRemove\n            formControlName=\"method\"\n            [tabIndex]=\"tabIndex\"\n            >\n            @if (form.config?.description) {\n              <div class=\"constructor__hint text--warn\"\n                app-ps-select-hint\n                #hintMethod\n                @insertRemove\n                >\n                {{description | trans }}\n              </div>\n            }\n          </app-ps-select>\n\n          @if (\n            form.method?.hasError('required') &&\n            form.method.touched &&\n            form.method.dirty\n            ) {\n            <div class=\"gm-error\" @insertRemove>\n              {{ I18N_KEY.VALIDATION_REQUIRED | trans }}\n            </div>\n          }\n        }\n\n        @if (form.ready) {\n            <div formGroupName=\"payment\"\n                 @insertRemove\n              #paymentRequisites\n              class=\"constructor__fields constructor__fields--reverse\">\n              @if (form.method.value && form.amountDynamic) {\n                <ng-container *ngTemplateOutlet=\"currencyTpl; context: {label: I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans, tabIndex: 0}\"></ng-container>\n              }\n              @for (field of form.fields; track field.name; let i = $index) {\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Iframe) {\n                  @if (form.payment.get(field.name)?.hasError('cde_error')) {\n                    <div class=\"constructor__hint cde-error\" @insertRemove>\n                      {{\n                        form.payment.get(field.name).getError('cde_error')\n                          | trans\n                      }}\n                    </div>\n                  }\n                  <app-constructor-field-iframe\n                    [formControlName]=\"field.name\"\n                    @insertRemove\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\n                  >\n                  </app-constructor-field-iframe>\n                }\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Select) {\n                  <app-constructor-field-select\n                    @insertRemove\n                    [config]=\"field\"\n                    [items]=\"field?.options?.items\"\n                    [formControlName]=\"field.name\"\n                    [tabIndex]=\"form.fields.length - i + tabIndex\"\n                  ></app-constructor-field-select>\n                }\n                @if ([CONSTRUCTOR_FIELD_TYPES.Text, CONSTRUCTOR_FIELD_TYPES.Number, CONSTRUCTOR_FIELD_TYPES.Email].includes(field.type)) {\n                  <app-constructor-field-text\n                    @insertRemove\n                    [config]=\"field\"\n                    [formControlName]=\"field.name\"\n                    (maskedValueChange)=\"changeTextFieldValue($event, field)\"\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-text>\n                }\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Amount) {\n                  <app-constructor-field-text\n                    @insertRemove\n                    [config]=\"field\"\n                    [formControlName]=\"field.name\"\n                    [tabIndex]=\"form.fields.length - i + tabIndex\">\n                    <app-method-amount-hint app-c-text-hint\n                      class=\"constructor__hint\"\n                      [loading]=\"feeLoading\"\n                      [options]=\"feeOptions || field.options\"\n                    ></app-method-amount-hint>\n                    @if (!hasCurrencyMethodSelector) {\n                      <div app-c-text-suffix\n                        class=\"constructor__currency\"\n                        [class.constructor__currency--transparent]=\"form.isAmountEditable\"\n                        >\n                        <ng-container *ngTemplateOutlet=\"currencyTpl; context: {tabIndex: form.fields.length - i + tabIndex}\"></ng-container>\n                      </div>\n                    }\n                  </app-constructor-field-text>\n                  @if (hasCurrencyMethodSelector) {\n                    <app-trm-select\n                      @insertRemove\n                      class=\"constructor-field\"\n                      [label]=\"I18N_KEY.CONSTRUCTOR_LABEL_CURRENCY | trans\"\n                      [formControl]=\"form.currency\"\n                      [searchable]=\"false\"\n                      [data]=\"currenciesList\"\n                      [tabIndex]=\"form.fields.length - i + tabIndex\"\n                      >\n                      <ng-template trmSelectLabelTemplate let-item=\"item\">\n                        <span class=\"trm-icon\" [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\n                        [title]=\"item\"></span>\n                        {{item}}\n                      </ng-template>\n                    </app-trm-select>\n                  }\n                }\n                @if (field.type === CONSTRUCTOR_FIELD_TYPES.Date) {\n                  <app-constructor-field-date\n                    @insertRemove\n                    [config]=\"field\"\n                    [formControlName]=\"field.name\"\n                  [tabIndex]=\"form.fields.length - i + tabIndex\"></app-constructor-field-date>\n                }\n              }\n              <ng-template #currencyTpl let-label=\"label\" let-tabIndex=\"tabIndex\">\n                <app-trm-select\n                  class=\"constructor-field-inner\"\n                  @insertRemove\n                  [label]=\"label\"\n                  [formControl]=\"form.userCurrency\"\n                  [searchable]=\"false\"\n                  [data]=\"userCurrenciesList\"\n                  [tabIndex]=\"tabIndex\"\n                  >\n                  <ng-template trmSelectLabelTemplate let-item=\"item\">\n                    <span class=\"trm-icon\"\n                      [ngClass]=\"'trm-curr-' + item.toLowerCase()\"\n                    [title]=\"item\"></span>\n                    {{item}}\n                  </ng-template>\n                </app-trm-select>\n              </ng-template>\n            </div>\n        } @else {\n          <div class=\"trm-skeleton-fields\">\n            @for (i of skeletonLength; track $index) {\n              <div class=\"trm-skeleton-field\">\n                <gm-skeleton [count]=\"1\" [shape]=\"'rect-md'\" [size]=\"18\"></gm-skeleton>\n                <gm-skeleton [count]=\"1\" [size]=\"50\"></gm-skeleton>\n              </div>\n            }\n          </div>\n        }\n        @if (error && !form.methodInfoLoading) {\n          <div class=\"trm-error\"\n            @insertRemove\n            >\n            {{ error | trans }}\n          </div>\n        }\n      </div>\n    }\n    @if (step === TERMINAL_STEP.Confirmation) {\n      <app-constructor-preparation\n        @insertRemove\n        [currency]=\"response?.currency\"\n        [methodName]=\"form.getTypeNameById(response.typeId)\"\n        [wallet]=\"response.wallet\"\n        [maskedWallet]=\"maskedWallet\"\n        [amount]=\"response.amount\"\n        [total]=\"response.total\"\n        [confirmationText]=\"form.config?.confirmation\"\n        >\n        @if (error && !form.payment.pending) {\n          <div class=\"trm-error\"\n            app-constructor-preparation-error\n            @insertRemove\n            >\n            {{ error | trans }}\n          </div>\n        }\n      </app-constructor-preparation>\n    }\n    <div class=\"constructor__actions\"\n         @insertRemove>\n      <button class=\"trm-button trm-button--primary constructor__actions-continue\"\n        type=\"submit\"\n        [tabindex]=\"form.fields.length + tabIndex\">\n        {{I18N_KEY.CONSTRUCTOR_LABEL_CONTINUE | trans}}\n        @if (loading) {\n          <span class=\"trm-spinner trm-spinner-white\"></span>\n        }\n      </button>\n      <button class=\"trm-button trm-button--secondary constructor__actions-back\"\n        type=\"button\"\n        [tabindex]=\"form.fields.length + tabIndex\"\n      (click)=\"back.emit()\"> {{ backBtnLabel | trans}}</button>\n    </div>\n  } @else {\n    <div class=\"trm-skeleton-group\">\n      <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\n      <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\n    </div>\n  }\n</form>\n", styles: [":host{display:block}.constructor{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.constructor__fields{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:stretch}.constructor__fields--reverse{flex-direction:column-reverse}.constructor__fields .fi{border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;background-origin:border-box;flex-shrink:0;height:15px}.constructor__fields .fi-other{border-color:transparent}.constructor__currency{--trm-select-border-radius: 0 10px 10px 0;display:flex;align-items:center;position:absolute;bottom:1px;right:1px;flex-shrink:0;min-height:44px}@media (min-width: 768px){.constructor__currency{min-height:48px}}.constructor__currency .trm-divider{margin:5px 0;align-self:stretch}.constructor__currency--transparent{--trm-select-bg-color: transparent;--trm-select-bg-color--disabled: transparent;--trm-select-border-color: transparent;--trm-select-border-color--hover: transparent;--trm-select-border-color--focus: transparent}.constructor__actions{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.constructor__hint{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}.constructor__hint.cde-error{font-weight:500;font-size:14px;line-height:20px;color:var(--color-red-500)}.constructor .constructor__actions-continue{position:relative}.constructor .constructor__actions-continue .trm-spinner{position:absolute;right:15px}\n"] }]
         }], propDecorators: { step: [{
                 type: Input
             }], error: [{
@@ -5966,6 +5944,7 @@ class TerminalLayoutComponent {
         this.TERMINAL_STEP = TerminalStep;
         this.types = [];
         this.step = TerminalStep.Prepare;
+        this.sessionLoading = null;
         this._submitted = false;
         this.feeCalculateSubject = new Subject();
         this.feeLoading = false;
@@ -6009,8 +5988,10 @@ class TerminalLayoutComponent {
             this.currency = sessionInfo.defaultCurrency;
             this.projectName = sessionInfo.projectName;
             this.description = sessionInfo.description;
+            this.sessionLoading = false;
             this.cd.markForCheck();
         }, () => {
+            this.sessionLoading = false;
             this.catchError();
         });
         this.pushState();
@@ -6026,6 +6007,7 @@ class TerminalLayoutComponent {
             return;
         }
         this._submitted = true;
+        this.sessionLoading = true;
         this.sessionDS
             .prepare(data)
             .subscribe((resp) => {
@@ -6037,9 +6019,11 @@ class TerminalLayoutComponent {
             this.data = resp;
             this.data.typeId = data.typeId;
             this._submitted = false;
+            this.sessionLoading = false;
             this.cd.markForCheck();
         }, () => {
             this._submitted = false;
+            this.sessionLoading = false;
             this.catchError();
         });
     }
@@ -6048,6 +6032,7 @@ class TerminalLayoutComponent {
             return;
         }
         this._submitted = true;
+        this.sessionLoading = true;
         this.sessionDS
             .confirm()
             .subscribe((resp) => {
@@ -6063,9 +6048,11 @@ class TerminalLayoutComponent {
                 this._statusText = resp.message;
             }
             this._submitted = false;
+            this.sessionLoading = false;
             this.cd.markForCheck();
         }, () => {
             this._submitted = false;
+            this.sessionLoading = false;
             this.catchError();
         });
     }
@@ -6083,8 +6070,12 @@ class TerminalLayoutComponent {
             this.location.back();
         }
         else {
+            this.sessionLoading = true;
             this.sessionDS.close()
-                .pipe(finalize(() => this.cd.markForCheck()))
+                .pipe(finalize(() => {
+                this.sessionLoading = false;
+                this.cd.markForCheck();
+            }))
                 .subscribe();
         }
     }
@@ -6142,7 +6133,7 @@ class TerminalLayoutComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TerminalLayoutComponent, isStandalone: true, selector: "app-terminal-layout", providers: [
             SessionDataSource,
             CurrencyPipe
-        ], viewQueries: [{ propertyName: "scrollComponent", first: true, predicate: ["scrollComponent"], descendants: true }], ngImport: i0, template: "<ng-scrollbar appearance=\"compact\">\r\n  <div class=\"terminal-layout\">\r\n    <section class=\"terminal\">\r\n      <div class=\"terminal__content\">\r\n        <header class=\"terminal__header\">\r\n          <i class=\"terminal__header-logo\"\r\n          [class]=\"logoClass\"></i>\r\n          <div class=\"terminal__header-lang\">\r\n            @if (hasChoice) {\r\n              <app-terminal-lang-switcher (langChange)=\"changeLang()\"\r\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\r\n            }\r\n          </div>\r\n        </header>\r\n        <div class=\"terminal__form\">\r\n          @if (sessionDS.loading$ | async) {\r\n            <div class=\"trm-skeleton-group\">\r\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\r\n            </div>\r\n          } @else {\r\n            @if (projectName) {\r\n              <div class=\"terminal__info\">\r\n                <h5 class=\"terminal__info__name\"> {{ projectName }} </h5>\r\n                @if (description) {\r\n                  <p class=\"terminal__info__desc\"> {{ description }} </p>\r\n                }\r\n              </div>\r\n            }\r\n            @if (step !== TERMINAL_STEP.Status && !hasStatusError) {\r\n              <app-constructor-form\r\n                [feeLoading]=\"feeLoading\"\r\n                [feeOptions]=\"feeOptions\"\r\n                [loading]=\"sessionDS.loadingConfirm$ | async\"\r\n                [step]=\"step\"\r\n                [types]=\"types\"\r\n                [currency]=\"currency\"\r\n                [response]=\"data\"\r\n                [error]=\"statusText\"\r\n                (prepare)=\"prepare($event)\"\r\n                (onPaymentChanged)=\"checkFatalError(); calculateFee($event)\"\r\n                (back)=\"back()\"\r\n                [canReturnToProject]=\"sessionDS.canReturnToProject\"\r\n                (confirm)=\"confirm()\"\r\n                [tabIndex]=\"2\"></app-constructor-form>\r\n            } @else {\r\n              <app-constructor-status class=\"terminal__status\"\r\n                [failed]=\"hasStatusError\"\r\n                [message]=\"statusText ? (statusText | trans) : ''\"\r\n                [backUrl]=\"returnBackUrl\"\r\n              ></app-constructor-status>\r\n            }\r\n          }\r\n\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <footer class=\"terminal-footer\">\r\n      <i class=\"terminal-footer__logo\"></i>\r\n      <p class=\"terminal-footer__txt\">\r\n        {{ footerText }}\r\n      </p>\r\n    </footer>\r\n  </div>\r\n</ng-scrollbar>\r\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0 84px;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%}.terminal__info{background:#f5f5f5;border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.terminal__info__name{margin:0;font-weight:500;font-size:16px;line-height:20px;color:#000}.terminal__info__desc{margin:0;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: TerminalLangSwitcherComponent, selector: "app-terminal-lang-switcher", inputs: ["loading", "tabIndex"], outputs: ["langChange"] }, { kind: "component", type: ConstructorFormComponent, selector: "app-constructor-form", inputs: ["step", "error", "response", "feeLoading", "feeOptions", "currency", "userCurrency", "loading", "types", "canReturnToProject", "tabIndex"], outputs: ["amountChanged", "back", "prepare", "confirm", "onPaymentChanged"] }, { kind: "component", type: ConstructorStatusComponent, selector: "app-constructor-status", inputs: ["failed", "inProgress", "animation", "message", "failTitle", "progressTitle", "successTitle", "tabIndex", "backUrl", "backUrlTitle", "hasSupportHint"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }] }); }
+        ], viewQueries: [{ propertyName: "scrollComponent", first: true, predicate: ["scrollComponent"], descendants: true }], ngImport: i0, template: "<ng-scrollbar appearance=\"compact\">\n  <div class=\"terminal-layout\">\n    <section class=\"terminal\">\n      <div class=\"terminal__content\">\n        <header class=\"terminal__header\">\n          <i class=\"terminal__header-logo\"\n          [class]=\"logoClass\"></i>\n          <div class=\"terminal__header-lang\">\n            @if (hasChoice) {\n              <app-terminal-lang-switcher (langChange)=\"changeLang()\"\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\n            }\n          </div>\n        </header>\n        <div class=\"terminal__form\">\n          @if (sessionDS.loading$ | async) {\n            <div class=\"trm-skeleton-group\">\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\n            </div>\n          } @else {\n            @if (projectName) {\n              <div class=\"terminal__info\">\n                <h5 class=\"terminal__info__name\"> {{ projectName }} </h5>\n                @if (description) {\n                  <p class=\"terminal__info__desc\"> {{ description }} </p>\n                }\n              </div>\n            }\n            @if (step !== TERMINAL_STEP.Status && !hasStatusError) {\n              <app-constructor-form\n                [feeLoading]=\"feeLoading\"\n                [feeOptions]=\"feeOptions\"\n                [loading]=\"sessionLoading\"\n                [step]=\"step\"\n                [types]=\"types\"\n                [currency]=\"currency\"\n                [response]=\"data\"\n                [error]=\"statusText\"\n                (prepare)=\"prepare($event)\"\n                (onPaymentChanged)=\"checkFatalError(); calculateFee($event)\"\n                (back)=\"back()\"\n                [canReturnToProject]=\"sessionDS.canReturnToProject\"\n                (confirm)=\"confirm()\"\n                [tabIndex]=\"2\"></app-constructor-form>\n            } @else {\n              <app-constructor-status class=\"terminal__status\"\n                [failed]=\"hasStatusError\"\n                [message]=\"statusText ? (statusText | trans) : ''\"\n                [backUrl]=\"returnBackUrl\"\n              ></app-constructor-status>\n            }\n          }\n\n        </div>\n      </div>\n    </section>\n    <footer class=\"terminal-footer\">\n      <i class=\"terminal-footer__logo\"></i>\n      <p class=\"terminal-footer__txt\">\n        {{ footerText }}\n      </p>\n    </footer>\n  </div>\n</ng-scrollbar>\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0 84px;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%}.terminal__info{background:#f5f5f5;border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.terminal__info__name{margin:0;font-weight:500;font-size:16px;line-height:20px;color:#000}.terminal__info__desc{margin:0;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: TerminalLangSwitcherComponent, selector: "app-terminal-lang-switcher", inputs: ["loading", "tabIndex"], outputs: ["langChange"] }, { kind: "component", type: ConstructorFormComponent, selector: "app-constructor-form", inputs: ["step", "error", "response", "feeLoading", "feeOptions", "currency", "userCurrency", "loading", "types", "canReturnToProject", "tabIndex"], outputs: ["amountChanged", "back", "prepare", "confirm", "onPaymentChanged"] }, { kind: "component", type: ConstructorStatusComponent, selector: "app-constructor-status", inputs: ["failed", "inProgress", "animation", "message", "failTitle", "progressTitle", "successTitle", "tabIndex", "backUrl", "backUrlTitle", "hasSupportHint"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }, { kind: "component", type: GmSkeletonComponent, selector: "gm-skeleton", inputs: ["shape", "orientation", "count", "size", "gap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLayoutComponent, decorators: [{
             type: Component,
@@ -6155,7 +6146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         ConstructorFormComponent, ConstructorStatusComponent,
                         AsyncPipe,
                         TranslateByKeyPipe, GmSkeletonComponent
-                    ], template: "<ng-scrollbar appearance=\"compact\">\r\n  <div class=\"terminal-layout\">\r\n    <section class=\"terminal\">\r\n      <div class=\"terminal__content\">\r\n        <header class=\"terminal__header\">\r\n          <i class=\"terminal__header-logo\"\r\n          [class]=\"logoClass\"></i>\r\n          <div class=\"terminal__header-lang\">\r\n            @if (hasChoice) {\r\n              <app-terminal-lang-switcher (langChange)=\"changeLang()\"\r\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\r\n            }\r\n          </div>\r\n        </header>\r\n        <div class=\"terminal__form\">\r\n          @if (sessionDS.loading$ | async) {\r\n            <div class=\"trm-skeleton-group\">\r\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\r\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\r\n            </div>\r\n          } @else {\r\n            @if (projectName) {\r\n              <div class=\"terminal__info\">\r\n                <h5 class=\"terminal__info__name\"> {{ projectName }} </h5>\r\n                @if (description) {\r\n                  <p class=\"terminal__info__desc\"> {{ description }} </p>\r\n                }\r\n              </div>\r\n            }\r\n            @if (step !== TERMINAL_STEP.Status && !hasStatusError) {\r\n              <app-constructor-form\r\n                [feeLoading]=\"feeLoading\"\r\n                [feeOptions]=\"feeOptions\"\r\n                [loading]=\"sessionDS.loadingConfirm$ | async\"\r\n                [step]=\"step\"\r\n                [types]=\"types\"\r\n                [currency]=\"currency\"\r\n                [response]=\"data\"\r\n                [error]=\"statusText\"\r\n                (prepare)=\"prepare($event)\"\r\n                (onPaymentChanged)=\"checkFatalError(); calculateFee($event)\"\r\n                (back)=\"back()\"\r\n                [canReturnToProject]=\"sessionDS.canReturnToProject\"\r\n                (confirm)=\"confirm()\"\r\n                [tabIndex]=\"2\"></app-constructor-form>\r\n            } @else {\r\n              <app-constructor-status class=\"terminal__status\"\r\n                [failed]=\"hasStatusError\"\r\n                [message]=\"statusText ? (statusText | trans) : ''\"\r\n                [backUrl]=\"returnBackUrl\"\r\n              ></app-constructor-status>\r\n            }\r\n          }\r\n\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <footer class=\"terminal-footer\">\r\n      <i class=\"terminal-footer__logo\"></i>\r\n      <p class=\"terminal-footer__txt\">\r\n        {{ footerText }}\r\n      </p>\r\n    </footer>\r\n  </div>\r\n</ng-scrollbar>\r\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0 84px;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%}.terminal__info{background:#f5f5f5;border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.terminal__info__name{margin:0;font-weight:500;font-size:16px;line-height:20px;color:#000}.terminal__info__desc{margin:0;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"] }]
+                    ], template: "<ng-scrollbar appearance=\"compact\">\n  <div class=\"terminal-layout\">\n    <section class=\"terminal\">\n      <div class=\"terminal__content\">\n        <header class=\"terminal__header\">\n          <i class=\"terminal__header-logo\"\n          [class]=\"logoClass\"></i>\n          <div class=\"terminal__header-lang\">\n            @if (hasChoice) {\n              <app-terminal-lang-switcher (langChange)=\"changeLang()\"\n              [tabIndex]=\"1\"></app-terminal-lang-switcher>\n            }\n          </div>\n        </header>\n        <div class=\"terminal__form\">\n          @if (sessionDS.loading$ | async) {\n            <div class=\"trm-skeleton-group\">\n              <gm-skeleton [count]=\"1\" [size]=\"120\"></gm-skeleton>\n              <gm-skeleton [count]=\"4\" [gap]=\"20\" [size]=\"80\"></gm-skeleton>\n              <gm-skeleton [count]=\"2\" [gap]=\"10\" [size]=\"48\"></gm-skeleton>\n            </div>\n          } @else {\n            @if (projectName) {\n              <div class=\"terminal__info\">\n                <h5 class=\"terminal__info__name\"> {{ projectName }} </h5>\n                @if (description) {\n                  <p class=\"terminal__info__desc\"> {{ description }} </p>\n                }\n              </div>\n            }\n            @if (step !== TERMINAL_STEP.Status && !hasStatusError) {\n              <app-constructor-form\n                [feeLoading]=\"feeLoading\"\n                [feeOptions]=\"feeOptions\"\n                [loading]=\"sessionLoading\"\n                [step]=\"step\"\n                [types]=\"types\"\n                [currency]=\"currency\"\n                [response]=\"data\"\n                [error]=\"statusText\"\n                (prepare)=\"prepare($event)\"\n                (onPaymentChanged)=\"checkFatalError(); calculateFee($event)\"\n                (back)=\"back()\"\n                [canReturnToProject]=\"sessionDS.canReturnToProject\"\n                (confirm)=\"confirm()\"\n                [tabIndex]=\"2\"></app-constructor-form>\n            } @else {\n              <app-constructor-status class=\"terminal__status\"\n                [failed]=\"hasStatusError\"\n                [message]=\"statusText ? (statusText | trans) : ''\"\n                [backUrl]=\"returnBackUrl\"\n              ></app-constructor-status>\n            }\n          }\n\n        </div>\n      </div>\n    </section>\n    <footer class=\"terminal-footer\">\n      <i class=\"terminal-footer__logo\"></i>\n      <p class=\"terminal-footer__txt\">\n        {{ footerText }}\n      </p>\n    </footer>\n  </div>\n</ng-scrollbar>\n", styles: [":host{display:flex;flex-direction:column;height:100vh;box-sizing:border-box}.terminal{box-sizing:border-box;width:100%;max-width:528px;min-width:320px;padding:0 10px}.terminal-layout{min-height:100vh;padding:42px 0 84px;display:flex;flex-direction:column;gap:42px;justify-content:flex-start;align-items:center}.terminal-footer{flex:auto 1 0;display:flex;flex-direction:column;gap:24px;justify-content:flex-end;align-items:center}.terminal-footer__txt{font-weight:400;font-size:14px;line-height:18px;color:var(--color-base-350);margin:0}.terminal__content{box-sizing:border-box;margin:auto;padding:20px;width:100%;background:#fff;border-radius:16px;display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}@media (min-width: 768px){.terminal__content{padding:32px}}.terminal__header{display:flex;flex-direction:row;gap:0;justify-content:flex-start;align-items:center}.terminal__header-lang{margin-left:auto}.terminal__form{display:flex;flex-direction:column;gap:24px;justify-content:flex-start;align-items:stretch;width:100%}.terminal__info{background:#f5f5f5;border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;justify-content:flex-start;align-items:flex-start}.terminal__info__name{margin:0;font-weight:500;font-size:16px;line-height:20px;color:#000}.terminal__info__desc{margin:0;font-weight:400;font-size:15px;line-height:22px;color:var(--color-base-350)}.terminal__status{margin-top:8px}.terminal .trm-skeleton-group{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:stretch}.terminal .trm-skeleton-group__form{gap:20px}.terminal .trm-skeleton-group__form .loader,.terminal .trm-skeleton-group__form .skeleton-loader{height:80px}.terminal .trm-skeleton-group__header .loader,.terminal .trm-skeleton-group__header .skeleton-loader{height:120px}.terminal .trm-skeleton-group__actions{gap:10px}.terminal .trm-skeleton-group__actions .loader,.terminal .trm-skeleton-group__actions .skeleton-loader{height:48px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollComponent: [{
                 type: ViewChild,
                 args: ['scrollComponent']
@@ -6171,7 +6162,7 @@ class ErrorComponent {
         this.I18N_KEY = I18N_KEY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ErrorComponent, isStandalone: true, selector: "app-error", ngImport: i0, template: "<app-terminal-layout-tpl [loading]=\"false\">\r\n    <app-constructor-status terminal-layout-status\r\n                            [failed]=\"true\"\r\n                            [failTitle]=\"(I18N_KEY.ERROR_OCCUR | trans)\"\r\n                            [hasSupportHint]=\"false\"\r\n    >\r\n    </app-constructor-status>\r\n</app-terminal-layout-tpl>\r\n", styles: [""], dependencies: [{ kind: "component", type: TerminalLayoutTplComponent, selector: "app-terminal-layout-tpl", inputs: ["projectName", "description", "loading"] }, { kind: "component", type: ConstructorStatusComponent, selector: "app-constructor-status", inputs: ["failed", "inProgress", "animation", "message", "failTitle", "progressTitle", "successTitle", "tabIndex", "backUrl", "backUrlTitle", "hasSupportHint"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ErrorComponent, isStandalone: true, selector: "app-error", ngImport: i0, template: "<app-terminal-layout-tpl [loading]=\"false\">\n    <app-constructor-status terminal-layout-status\n                            [failed]=\"true\"\n                            [failTitle]=\"(I18N_KEY.ERROR_OCCUR | trans)\"\n                            [hasSupportHint]=\"false\"\n    >\n    </app-constructor-status>\n</app-terminal-layout-tpl>\n", styles: [""], dependencies: [{ kind: "component", type: TerminalLayoutTplComponent, selector: "app-terminal-layout-tpl", inputs: ["projectName", "description", "loading"] }, { kind: "component", type: ConstructorStatusComponent, selector: "app-constructor-status", inputs: ["failed", "inProgress", "animation", "message", "failTitle", "progressTitle", "successTitle", "tabIndex", "backUrl", "backUrlTitle", "hasSupportHint"] }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
@@ -6179,7 +6170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         TerminalLayoutTplComponent,
                         ConstructorStatusComponent,
                         TranslateByKeyPipe,
-                    ], template: "<app-terminal-layout-tpl [loading]=\"false\">\r\n    <app-constructor-status terminal-layout-status\r\n                            [failed]=\"true\"\r\n                            [failTitle]=\"(I18N_KEY.ERROR_OCCUR | trans)\"\r\n                            [hasSupportHint]=\"false\"\r\n    >\r\n    </app-constructor-status>\r\n</app-terminal-layout-tpl>\r\n" }]
+                    ], template: "<app-terminal-layout-tpl [loading]=\"false\">\n    <app-constructor-status terminal-layout-status\n                            [failed]=\"true\"\n                            [failTitle]=\"(I18N_KEY.ERROR_OCCUR | trans)\"\n                            [hasSupportHint]=\"false\"\n    >\n    </app-constructor-status>\n</app-terminal-layout-tpl>\n" }]
         }] });
 
 var error_component = /*#__PURE__*/Object.freeze({
@@ -6533,7 +6524,7 @@ class CheckinPageComponent {
                 useFactory: (activatedRoute) => activatedRoute.snapshot.paramMap.get('mode')
             },
             CheckinDatasource
-        ], ngImport: i0, template: "<app-terminal-layout-tpl [loading]=\"loading | async\">\r\n  @if (!(loading | async)) {\r\n    <app-constructor-status terminal-layout-status\r\n      [inProgress]=\"inProgress\"\r\n      [failed]=\"hasStatusError\"\r\n      [animation]=\"animation\"\r\n      [progressTitle]=\"(I18N_KEY.PROGRESS_TITLE | trans)\"\r\n      [failTitle]=\"(I18N_KEY.FAIL_TITLE | trans)\"\r\n      [successTitle]=\"(I18N_KEY.SUCCESS_TITLE | trans)\"\r\n      [hasSupportHint]=\"false\"\r\n      [message]=\"(message | trans) + operationIdHint\"\r\n      [backUrl]=\"returnBackUrl\"\r\n      [backUrlTitle]=\"I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans\"\r\n      >\r\n      @if (redirectTimerStarted) {\r\n        <div constructor-status-button-hint>\r\n          {{ I18N_KEY.REDIRECT_TEXT | trans }}&nbsp;<b>{{redirectTime}}</b>\r\n        </div>\r\n      }\r\n    </app-constructor-status>\r\n  }\r\n</app-terminal-layout-tpl>\r\n", styles: [""], dependencies: [{ kind: "component", type: TerminalLayoutTplComponent, selector: "app-terminal-layout-tpl", inputs: ["projectName", "description", "loading"] }, { kind: "component", type: ConstructorStatusComponent, selector: "app-constructor-status", inputs: ["failed", "inProgress", "animation", "message", "failTitle", "progressTitle", "successTitle", "tabIndex", "backUrl", "backUrlTitle", "hasSupportHint"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }] }); }
+        ], ngImport: i0, template: "<app-terminal-layout-tpl [loading]=\"loading | async\">\n  @if (!(loading | async)) {\n    <app-constructor-status terminal-layout-status\n      [inProgress]=\"inProgress\"\n      [failed]=\"hasStatusError\"\n      [animation]=\"animation\"\n      [progressTitle]=\"(I18N_KEY.PROGRESS_TITLE | trans)\"\n      [failTitle]=\"(I18N_KEY.FAIL_TITLE | trans)\"\n      [successTitle]=\"(I18N_KEY.SUCCESS_TITLE | trans)\"\n      [hasSupportHint]=\"false\"\n      [message]=\"(message | trans) + operationIdHint\"\n      [backUrl]=\"returnBackUrl\"\n      [backUrlTitle]=\"I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans\"\n      >\n      @if (redirectTimerStarted) {\n        <div constructor-status-button-hint>\n          {{ I18N_KEY.REDIRECT_TEXT | trans }}&nbsp;<b>{{redirectTime}}</b>\n        </div>\n      }\n    </app-constructor-status>\n  }\n</app-terminal-layout-tpl>\n", styles: [""], dependencies: [{ kind: "component", type: TerminalLayoutTplComponent, selector: "app-terminal-layout-tpl", inputs: ["projectName", "description", "loading"] }, { kind: "component", type: ConstructorStatusComponent, selector: "app-constructor-status", inputs: ["failed", "inProgress", "animation", "message", "failTitle", "progressTitle", "successTitle", "tabIndex", "backUrl", "backUrlTitle", "hasSupportHint"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateByKeyPipe, name: "trans" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CheckinPageComponent, decorators: [{
             type: Component,
@@ -6544,7 +6535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useFactory: (activatedRoute) => activatedRoute.snapshot.paramMap.get('mode')
                         },
                         CheckinDatasource
-                    ], standalone: true, imports: [TerminalLayoutTplComponent, ConstructorStatusComponent, AsyncPipe, TranslateByKeyPipe], template: "<app-terminal-layout-tpl [loading]=\"loading | async\">\r\n  @if (!(loading | async)) {\r\n    <app-constructor-status terminal-layout-status\r\n      [inProgress]=\"inProgress\"\r\n      [failed]=\"hasStatusError\"\r\n      [animation]=\"animation\"\r\n      [progressTitle]=\"(I18N_KEY.PROGRESS_TITLE | trans)\"\r\n      [failTitle]=\"(I18N_KEY.FAIL_TITLE | trans)\"\r\n      [successTitle]=\"(I18N_KEY.SUCCESS_TITLE | trans)\"\r\n      [hasSupportHint]=\"false\"\r\n      [message]=\"(message | trans) + operationIdHint\"\r\n      [backUrl]=\"returnBackUrl\"\r\n      [backUrlTitle]=\"I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans\"\r\n      >\r\n      @if (redirectTimerStarted) {\r\n        <div constructor-status-button-hint>\r\n          {{ I18N_KEY.REDIRECT_TEXT | trans }}&nbsp;<b>{{redirectTime}}</b>\r\n        </div>\r\n      }\r\n    </app-constructor-status>\r\n  }\r\n</app-terminal-layout-tpl>\r\n" }]
+                    ], standalone: true, imports: [TerminalLayoutTplComponent, ConstructorStatusComponent, AsyncPipe, TranslateByKeyPipe], template: "<app-terminal-layout-tpl [loading]=\"loading | async\">\n  @if (!(loading | async)) {\n    <app-constructor-status terminal-layout-status\n      [inProgress]=\"inProgress\"\n      [failed]=\"hasStatusError\"\n      [animation]=\"animation\"\n      [progressTitle]=\"(I18N_KEY.PROGRESS_TITLE | trans)\"\n      [failTitle]=\"(I18N_KEY.FAIL_TITLE | trans)\"\n      [successTitle]=\"(I18N_KEY.SUCCESS_TITLE | trans)\"\n      [hasSupportHint]=\"false\"\n      [message]=\"(message | trans) + operationIdHint\"\n      [backUrl]=\"returnBackUrl\"\n      [backUrlTitle]=\"I18N_KEY.CONSTRUCTOR_LABEL_RETURN_TO_SHOP | trans\"\n      >\n      @if (redirectTimerStarted) {\n        <div constructor-status-button-hint>\n          {{ I18N_KEY.REDIRECT_TEXT | trans }}&nbsp;<b>{{redirectTime}}</b>\n        </div>\n      }\n    </app-constructor-status>\n  }\n</app-terminal-layout-tpl>\n" }]
         }], ctorParameters: () => [] });
 
 var checkinPage_component = /*#__PURE__*/Object.freeze({