trm-tmpl 3.2.1 → 3.2.2

package/fesm2022/trm-tmpl.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, ChangeDetectorRef, CSP_NONCE, Component, HostListener, NgModule, TemplateRef, Directive, ElementRef, Renderer2, Pipe, EventEmitter, forwardRef, ChangeDetectionStrategy, Input, Output, ContentChild, SecurityContext, ViewContainerRef, Injector, ViewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, ChangeDetectorRef, CSP_NONCE, Component, HostListener, NgModule, TemplateRef, Directive, ElementRef, Renderer2, Pipe, EventEmitter, forwardRef, ChangeDetectionStrategy, Input, Output, ContentChild, SecurityContext, ViewContainerRef, Injector, DestroyRef, ViewChild, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, NavigationEnd, NavigationCancel, NavigationError, RouterOutlet, RouterModule, ActivatedRoute } from '@angular/router';
 import { registerLocale, getNames } from 'i18n-iso-countries';
-import { DOCUMENT, registerLocaleData, AsyncPipe, CommonModule, NgTemplateOutlet, NgClass, CurrencyPipe, getCurrencySymbol, Location } from '@angular/common';
-import { BehaviorSubject, of, throwError, Subject, combineLatest, merge, fromEvent, distinctUntilChanged, timer, interval } from 'rxjs';
+import { BehaviorSubject, of, throwError, Subject, merge, fromEvent, distinctUntilChanged, timer, interval } from 'rxjs';
+import { registerLocaleData, DOCUMENT, AsyncPipe, CommonModule, NgTemplateOutlet, NgClass, CurrencyPipe, getCurrencySymbol, Location } from '@angular/common';
 import localeRu from '@angular/common/locales/ru';
 import localeEn from '@angular/common/locales/en';
 import localeTr from '@angular/common/locales/tr';
@@ -18,18 +18,20 @@ import TR_COUNTRIES from 'i18n-iso-countries/langs/tr.json';
 import PT_COUNTRIES from 'i18n-iso-countries/langs/pt.json';
 import LT_COUNTRIES from 'i18n-iso-countries/langs/lt.json';
 import * as i2 from '@ngx-translate/core';
-import { TranslateService, TranslateModule, TranslateLoader, TranslatePipe } from '@ngx-translate/core';
-import { first, map, delay, catchError, tap, switchMap, takeUntil, filter, debounceTime, finalize } from 'rxjs/operators';
+import { TranslateService, TranslateModule, TranslatePipe, TranslateLoader } from '@ngx-translate/core';
+import { catchError, map, first, delay, tap, switchMap, takeUntil, filter, debounceTime, finalize } from 'rxjs/operators';
 import { CookieService } from 'ngx-cookie-service';
 import * as momentjs from 'moment-timezone';
 import momentjs__default from 'moment-timezone';
-import { NgxMaskService, NgxMaskPipe, NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { trigger, transition, style, animate } from '@angular/animations';
+import { NgxMaskService, NgxMaskPipe, NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { NgScrollbar } from 'ngx-scrollbar';
 import * as i1$1 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormGroup, Validators, FormControlName, NgControl } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormGroup, Validators, NG_ASYNC_VALIDATORS, NgControl } from '@angular/forms';
 import { GmSkeletonComponent } from '@gmmoney/gm-ui-kit';
 import { DomSanitizer, Title } from '@angular/platform-browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromPromise } from 'rxjs/internal/observable/innerFrom';
 import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 import { isMoment } from 'moment';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -104,6 +106,7 @@ var I18N_KEY;
     I18N_KEY["DEFAULT_ERROR_CODE"] = "error_api";
     I18N_KEY["DEFAULT_ERROR_CODE_GENERAL"] = "error_general";
     I18N_KEY["ERROR_OCCUR"] = "ERROR_OCCUR";
+    I18N_KEY["ERROR_OCCUR_SDK"] = "ERROR_OCCUR_SDK";
     I18N_KEY["PROGRESS_TITLE"] = "PROGRESS_TITLE";
     I18N_KEY["FAIL_TITLE"] = "FAIL_TITLE";
     I18N_KEY["SUCCESS_TITLE"] = "SUCCESS_TITLE";
@@ -270,7 +273,8 @@ const i18nMap = new Map([
     [I18N_KEY.TERMINAL_SESSION_SUCCESS, 'Операция прошла успешно!'],
     [I18N_KEY.TERMINAL_SESSION_SUPPORT, 'В случае возникновения проблем с платежом, обращайтесь в техническую поддержку магазина или к нам на почту'],
     [I18N_KEY.SELECT_SEARCH, 'Поиск'],
-    [I18N_KEY.SELECT_EMPTY_LIST, 'Список пуст']
+    [I18N_KEY.SELECT_EMPTY_LIST, 'Список пуст'],
+    [I18N_KEY.ERROR_OCCUR_SDK, 'Ошибка загрузки терминала']
 ]);
 const getI18Key = (key) => {
     return i18nMap.get(key);
@@ -292,7 +296,9 @@ const CSRF_COOKIE_NAME = 'TERMINAL-CSRF-KEY';
 const I18N_COUNTRIES = new InjectionToken('i18n-iso-countries');
 const SessionToken = new InjectionToken('SessionToken');
 const CheckinModeToken = new InjectionToken('CheckinModeToken');
-const FATAL_ERROR_LIST = new InjectionToken('FATAL_ERROR_LIST');
+const DEFAULT_COUNTRY_LOCALHOST_KEY = 'GM_TERMINAL_COUNTRY';
+const DEFAULT_METHOD_LOCALHOST_KEY = 'GM_TERMINAL_METHOD';
+const DEFAULT_CURRENCY_LOCALHOST_KEY = 'GM_TERMINAL_CURRENCY';
 
 var Mode;
 (function (Mode) {
@@ -310,13 +316,17 @@ class VersionServiceBase {
 }
 
 class ApiErrorsService {
-    ;
-    get ERROR_KEY() {
-        return `${this.token}_ERROR_DETAIL`;
-    }
     constructor() {
         this.token = inject(SessionToken, { optional: true }) || 'token';
-        this.FATAL_ERRORS = inject(FATAL_ERROR_LIST, { optional: true }) || [
+    }
+    clear() {
+        this._localError = null;
+    }
+    get hasError() {
+        return !!this._localError;
+    }
+    get hasFatalError() {
+        const formatErrors = [
             ApiErrors.FORMAT_PHONE,
             ApiErrors.FORMAT_DATE_BIRTH,
             ApiErrors.FORMAT_EMAIL,
@@ -327,38 +337,17 @@ class ApiErrorsService {
             ApiErrors.FORMAT_WALLET,
             ApiErrors.FORMAT_ZIP,
         ];
-        this.document = inject(DOCUMENT);
-    }
-    setError(err) {
-        let code = I18N_KEY.DEFAULT_ERROR_CODE;
-        if (err?.code) {
-            code = err.code;
+        if (formatErrors.includes(this._localError)) {
+            return false;
         }
-        this.document.defaultView.sessionStorage.setItem(this.ERROR_KEY, code);
-    }
-    getError() {
-        const code = this.document.defaultView.sessionStorage.getItem(this.ERROR_KEY) || null;
-        return getI18Key(code) || code;
-    }
-    clear() {
-        this.document.defaultView.sessionStorage.removeItem(this.ERROR_KEY);
-    }
-    get hasError() {
-        return !!this.document.defaultView.sessionStorage.getItem(this.ERROR_KEY);
-    }
-    get hasFatalError() {
-        const code = this.document.defaultView.sessionStorage.getItem(this.ERROR_KEY);
-        return this.FATAL_ERRORS?.includes(code) || false;
+        return !!this._localError;
     }
     setLocalError(err) {
         let code = I18N_KEY.DEFAULT_ERROR_CODE;
         if (err?.code) {
             code = err.code;
         }
-        this._localError = getI18Key(code);
-    }
-    clearLocal() {
-        this._localError = '';
+        this._localError = code;
     }
     get hasLocalError() {
         return !!this._localError;
@@ -423,105 +412,186 @@ const ENVIRONMENT = new InjectionToken('ENVIRONMENT');
 const TERMINAL_VERSION_SERVICE_TOKEN = new InjectionToken('TERMINAL_VERSION_SERVICE_TOKEN');
 const TERMINAL_SDK_FACTORY = new InjectionToken('TERMINAL_SDK_FACTORY');
 
+class LocalStorage {
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._supported = true;
+        try {
+            if (!this._document.defaultView.localStorage) {
+                this._supported = false;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        }
+        catch (error) {
+            this._supported = false;
+        }
+    }
+    get _storage() {
+        return this._document.defaultView.localStorage;
+    }
+    getItem(key) {
+        if (!this._supported) {
+            return null;
+        }
+        return this._storage.getItem(key);
+    }
+    setItem(key, value) {
+        if (!this._supported) {
+            return;
+        }
+        this._storage.setItem(key, value);
+    }
+    get defaultCountry() {
+        return (this._defaultCountry ||
+            this.getItem(DEFAULT_COUNTRY_LOCALHOST_KEY));
+    }
+    get defaultMethodName() {
+        return (this._defaultMethodName || this.getItem(DEFAULT_METHOD_LOCALHOST_KEY));
+    }
+    get defaultCurrency() {
+        return (this._defaultCurrency || this.getItem(DEFAULT_CURRENCY_LOCALHOST_KEY));
+    }
+    get defaultLang() {
+        return this._defaultLang || this.getItem(LOCAL_LANG_KEY);
+    }
+    saveDefaultCountry(value) {
+        this._defaultCountry = value;
+        this.setItem(DEFAULT_COUNTRY_LOCALHOST_KEY, value);
+    }
+    saveDefaultMethodName(value) {
+        this._defaultMethodName = value;
+        this.setItem(DEFAULT_METHOD_LOCALHOST_KEY, value);
+    }
+    saveDefaultCurrency(value) {
+        this._defaultCurrency = value;
+        this.setItem(DEFAULT_CURRENCY_LOCALHOST_KEY, value);
+    }
+    saveDefaultLang(value) {
+        this._defaultLang = value;
+        this.setItem(LOCAL_LANG_KEY, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LocalStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LocalStorage, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LocalStorage, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const TRANSLATION_LANG_KEYS = {
+    [LANGUAGE.RU]: {
+        code: 'ru',
+        name: 'Русский',
+        countries: [
+            'AZ',
+            'AM',
+            'BY',
+            'KZ',
+            'KG',
+            'MD',
+            'RU',
+            'TJ',
+            'TM',
+            'UZ',
+            'UA',
+        ],
+    },
+    [LANGUAGE.EN]: {
+        code: 'gb',
+        name: 'English',
+        countries: [],
+    },
+    [LANGUAGE.ES]: {
+        code: 'es',
+        name: 'Español',
+        countries: [
+            'BZ',
+            'GT',
+            'HN',
+            'CR',
+            'PA',
+            'NI',
+            'SV',
+            'AR',
+            'CL',
+            'CO',
+            'EC',
+            'PY',
+            'PE',
+            'GY',
+            'ES',
+        ],
+    },
+    [LANGUAGE.TR]: {
+        code: 'tr',
+        name: 'Türkçe',
+        countries: ['TR'],
+    },
+    [LANGUAGE.PT]: {
+        code: 'pt',
+        name: 'Português',
+        countries: ['PT', 'BR'],
+    },
+};
 class TranslateLangStorageService {
     constructor() {
+        this._storage = inject(LocalStorage);
+        this.versionSrv = inject(TERMINAL_VERSION_SERVICE_TOKEN);
         this.document = inject(DOCUMENT);
         this.translateSrv = inject(TranslateService);
-        this.versionSrv = inject(TERMINAL_VERSION_SERVICE_TOKEN);
-        this._isLanguageDetected = false;
-        this.TRANSLATION_LANG_KEYS = {
-            [LANGUAGE.RU]: {
-                code: 'ru',
-                name: 'Русский',
-                countries: ['AZ', 'AM', 'BY', 'KZ', 'KG', 'MD', 'RU', 'TJ', 'TM', 'UZ', 'UA']
-            },
-            [LANGUAGE.EN]: {
-                code: 'gb',
-                name: 'English',
-                countries: []
-            },
-            [LANGUAGE.LT]: {
-                code: 'lt',
-                name: 'Lietuvių',
-                countries: ['LT']
-            },
-            [LANGUAGE.ES]: {
-                code: 'es',
-                name: 'Español',
-                countries: ['BZ', 'GT', 'HN', 'CR', 'PA', 'NI', 'SV', 'AR', 'CL', 'CO', 'EC', 'PY', 'PE', 'GY', 'ES']
-            },
-            [LANGUAGE.TR]: {
-                code: 'tr',
-                name: 'Türkçe',
-                countries: ['TR']
-            },
-            [LANGUAGE.PT]: {
-                code: 'pt',
-                name: 'Português',
-                countries: ['PT', 'BR']
-            }
-        };
-        this.translations = this.TRANSLATION_LANG_KEYS;
+        this.TRANSLATION_LANG_KEYS = TRANSLATION_LANG_KEYS;
     }
     get languages() {
         return this.versionSrv.langs || [LANGUAGE.RU, LANGUAGE.EN, LANGUAGE.PT, LANGUAGE.TR, LANGUAGE.ES];
     }
-    get storage() {
-        return this.document.defaultView.localStorage;
-    }
     get location() {
         return this.document.defaultView.location;
     }
-    get defaultLang() {
-        const detectedLanguage = this.storage.getItem(LOCAL_LANG_KEY) || this.queryLang;
-        this._isLanguageDetected = !!detectedLanguage;
-        return detectedLanguage || DEFAULT_LANG;
-    }
     get onLangChange$() {
         return this.translateSrv.onLangChange;
     }
-    get isLanguageDetected() {
-        return this._isLanguageDetected;
-    }
     get currentLang() {
         return this.translateSrv.currentLang;
     }
-    setAvailableLanguages(langs = this.languages) {
-        if (!langs || !langs.length) {
-            this.translations = this.TRANSLATION_LANG_KEYS;
-            return;
-        }
-        this.translations = Object.keys(this.TRANSLATION_LANG_KEYS).reduce((value, c) => {
-            if (langs.includes(c)) {
-                value[c] = this.TRANSLATION_LANG_KEYS[c];
-            }
-            return value;
-        }, {});
-        if (!langs.includes(this.translateSrv.currentLang)) {
-            this.translateSrv
-                .use(langs[0]);
+    get queryLang() {
+        return new URL(this.location.href).searchParams.get('language');
+    }
+    get countryLanguage() {
+        const code = this._storage.defaultCountry?.toUpperCase();
+        if (!code) {
+            return null;
         }
+        return Object.keys(this.TRANSLATION_LANG_KEYS).find((lang) => {
+            const meta = this.TRANSLATION_LANG_KEYS[lang];
+            return meta?.countries.some((c) => c.includes(code.toUpperCase()));
+        });
     }
-    setLanguage$(lang, options = { save: true }) {
-        if (!lang) {
-            lang = this.defaultLang;
+    setLanguage$(options = { save: true }) {
+        const availableLanguages = Object.keys(this.TRANSLATION_LANG_KEYS);
+        let candidateLang = DEFAULT_LANG;
+        const lang = options?.lang?.toLowerCase();
+        const queryLang = this.queryLang?.toLowerCase();
+        const storageLang = this._storage.defaultLang?.toLowerCase();
+        const countryLang = this.countryLanguage?.toLowerCase();
+        if (availableLanguages.includes(lang)) {
+            candidateLang = lang;
         }
-        else if (options?.save) {
-            this.storage.setItem(LOCAL_LANG_KEY, lang);
+        else if (availableLanguages.includes(storageLang)) {
+            candidateLang = storageLang;
         }
-        return this.translateSrv
-            .use(lang);
-    }
-    get queryLang() {
-        return new URL(this.location.href).searchParams.get('language');
-    }
-    setLanguageByCountry(code) {
-        const country = Object.keys(this.TRANSLATION_LANG_KEYS)
-            .find((lang) => this.TRANSLATION_LANG_KEYS[lang].countries.some(c => c.includes(code))) || undefined;
-        if (!this.isLanguageDetected) {
-            this.setLanguage$(country, { save: false });
+        else if (availableLanguages.includes(queryLang)) {
+            candidateLang = queryLang;
+        }
+        else if (availableLanguages.includes(countryLang)) {
+            candidateLang = countryLang;
+        }
+        if (!this.versionSrv.langs.includes(candidateLang)) {
+            candidateLang = DEFAULT_LANG;
+        }
+        if (options?.save) {
+            this._storage.saveDefaultLang(candidateLang);
         }
-        return;
+        return this.translateSrv.use(candidateLang);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TranslateLangStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TranslateLangStorageService }); }
@@ -530,18 +600,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-var TerminalStep;
-(function (TerminalStep) {
-    TerminalStep[TerminalStep["Prepare"] = 0] = "Prepare";
-    TerminalStep[TerminalStep["Confirmation"] = 1] = "Confirmation";
-    TerminalStep[TerminalStep["Status"] = 2] = "Status";
-})(TerminalStep || (TerminalStep = {}));
+class CSRFResolver {
+    constructor() {
+        this.cookieSrv = inject(CookieService);
+        this.apiErrorsSrv = inject(ApiErrorsService);
+        this.configuration = inject(CONFIGURATION_TOKEN, { optional: true }) || { credentials: {} };
+        this.terminalApi = inject(TERMINAL_SERVICE_TOKEN);
+        this.token = inject(SessionToken, { optional: true }) || 'token';
+        this.environment = inject(ENVIRONMENT);
+        this.storage = inject(LocalStorage);
+    }
+    saveDefaultCountry(defaultCountryISOCode) {
+        if (defaultCountryISOCode) {
+            this.storage.saveDefaultCountry(defaultCountryISOCode);
+        }
+    }
+    resolve(route) {
+        const token = this.token;
+        if (!token) {
+            if (!this.apiErrorsSrv.hasError) {
+                this.apiErrorsSrv.setLocalError({ code: ApiErrors.SESSION_NOT_FOUND });
+            }
+            return of(true);
+        }
+        const timezone = momentjs__default.tz.guess();
+        if (!this.environment.csrf) {
+            return of(false);
+        }
+        if (this.resolveCSRF(token)) {
+            return of(true);
+        }
+        return this.terminalApi.postTerminalOpen({
+            token,
+            terminalOpenRequest: {
+                timezone
+            }
+        })
+            .pipe(catchError((err) => {
+            this.apiErrorsSrv.setLocalError(err.error);
+            return of({ csrf: null, defaultCountryISOCode: null });
+        }), map(({ csrf, defaultCountryISOCode }) => {
+            this.saveDefaultCountry(defaultCountryISOCode);
+            this.resolveCSRF(token, csrf);
+            return true;
+        }));
+    }
+    resolveCSRF(token, csrf) {
+        if (!csrf) {
+            if (token && this.cookieSrv.check(`${token}_${CSRF_COOKIE_NAME}`)) {
+                this.apiErrorsSrv.clear();
+                this.configuration.credentials.CSRF = this.cookieSrv.get(`${token}_${CSRF_COOKIE_NAME}`);
+                return true;
+            }
+        }
+        else {
+            this.apiErrorsSrv.clear();
+            this.cookieSrv.set(`${token}_${CSRF_COOKIE_NAME}`, csrf, momentjs__default().add(24, 'hours').toDate(), undefined, undefined, this.environment.production);
+            this.configuration.credentials.CSRF = csrf;
+            return true;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CSRFResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CSRFResolver }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CSRFResolver, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
-var CollectionType;
-(function (CollectionType) {
-    CollectionType[CollectionType["Banks"] = 1] = "Banks";
-    CollectionType[CollectionType["Documents"] = 2] = "Documents";
-})(CollectionType || (CollectionType = {}));
+class ErrorInterceptorService {
+    constructor() {
+        this.apiErrorSrv = inject(ApiErrorsService);
+    }
+    intercept(req, next) {
+        return next
+            .handle(req)
+            .pipe(catchError((err) => {
+            if (err.status === 404 || err.status === 500) {
+                this.apiErrorSrv.setLocalError();
+            }
+            return throwError(err);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorInterceptorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorInterceptorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const DELAY_INITIAL_LOADER_HIDING = 0;
+const LOADER_HIDE_CSS_CLASS = 'trm-loader-init--hide';
+function hideInitLoader() {
+    return of(false).pipe(first(), map(() => {
+        const loader = document.querySelector('.trm-loader-init');
+        if (!loader) {
+            return false;
+        }
+        loader.classList.add(LOADER_HIDE_CSS_CLASS);
+        return true;
+    }), delay(DELAY_INITIAL_LOADER_HIDING));
+}
+
+const insertRemoveTrigger = trigger('insertRemove', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('150ms', style({ opacity: 1 })),
+    ]),
+    transition(':leave', [
+        animate('150ms', style({ opacity: 0 }))
+    ])
+]);
 
 const removeSpecSymbols = (s) => s.replace(/[\+\(\)\-\s]+/g, '');
 const PHONE_MASKS = [
@@ -1903,44 +2072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-var PaymentFieldTypeEnum;
-(function (PaymentFieldTypeEnum) {
-    PaymentFieldTypeEnum["Amount"] = "amount";
-    PaymentFieldTypeEnum["Email"] = "email";
-    PaymentFieldTypeEnum["Text"] = "text";
-    PaymentFieldTypeEnum["Number"] = "number";
-    PaymentFieldTypeEnum["Date"] = "date";
-    PaymentFieldTypeEnum["Select"] = "select";
-    PaymentFieldTypeEnum["Iframe"] = "iframe";
-})(PaymentFieldTypeEnum || (PaymentFieldTypeEnum = {}));
-
-const DEFAULT_COUNTRY_LOCALHOST_KEY = 'TERMINAL_COUNTRY';
-const DEFAULT_METHOD_LOCALHOST_KEY = 'TERMINAL_METHOD';
-const DEFAULT_CURRENCY_LOCALHOST_KEY = 'TERMINAL_CURRENCY';
-
-const DELAY_INITIAL_LOADER_HIDING = 0;
-const LOADER_HIDE_CSS_CLASS = 'trm-loader-init--hide';
-function hideInitLoader() {
-    return of(false).pipe(first(), map(() => {
-        const loader = document.querySelector('.trm-loader-init');
-        if (!loader) {
-            return false;
-        }
-        loader.classList.add(LOADER_HIDE_CSS_CLASS);
-        return true;
-    }), delay(DELAY_INITIAL_LOADER_HIDING));
-}
-
-const insertRemoveTrigger = trigger('insertRemove', [
-    transition(':enter', [
-        style({ opacity: 0 }),
-        animate('150ms', style({ opacity: 1 })),
-    ]),
-    transition(':leave', [
-        animate('150ms', style({ opacity: 0 }))
-    ])
-]);
-
 function sortByTabIndex(list) {
     return list.sort((a, b) => {
         const index1 = +a.getAttribute('tabindex');
@@ -2060,6 +2191,23 @@ const warningConsole = () => {
     console.log("\n");
 };
 
+var PaymentFieldTypeEnum;
+(function (PaymentFieldTypeEnum) {
+    PaymentFieldTypeEnum["Amount"] = "amount";
+    PaymentFieldTypeEnum["Email"] = "email";
+    PaymentFieldTypeEnum["Text"] = "text";
+    PaymentFieldTypeEnum["Number"] = "number";
+    PaymentFieldTypeEnum["Date"] = "date";
+    PaymentFieldTypeEnum["Select"] = "select";
+    PaymentFieldTypeEnum["Iframe"] = "iframe";
+})(PaymentFieldTypeEnum || (PaymentFieldTypeEnum = {}));
+
+var CollectionType;
+(function (CollectionType) {
+    CollectionType[CollectionType["Banks"] = 1] = "Banks";
+    CollectionType[CollectionType["Documents"] = 2] = "Documents";
+})(CollectionType || (CollectionType = {}));
+
 const PHONE_FIELD = {
     name: 'add_phone_number',
     description: I18N_KEY.CONSTRUCTOR_DESCRIPTION_PHONE,
@@ -2098,6 +2246,7 @@ const FIELD_TEMPLATE = {
         type: PaymentFieldTypeEnum.Amount
     },
     CARD_TERMINAL: {
+        name: 'card_terminal',
         type: PaymentFieldTypeEnum.Iframe
     },
     EMAIL: EMAIL_FIELD,
@@ -2164,107 +2313,6 @@ const FIELD_TEMPLATE = {
     }
 };
 
-const FORMAT_DATE = 'YYYY-MM-DD';
-
-class CSRFResolver {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        this.cookieSrv = inject(CookieService);
-        this.apiErrorsSrv = inject(ApiErrorsService);
-        this.configuration = inject(CONFIGURATION_TOKEN, { optional: true }) || { credentials: {} };
-        this.terminalApi = inject(TERMINAL_SERVICE_TOKEN);
-        this.token = inject(SessionToken, { optional: true }) || 'token';
-        this.langStorage = inject(TranslateLangStorageService);
-        this.environment = inject(ENVIRONMENT);
-    }
-    get _localStorage() {
-        return this.document.defaultView.localStorage;
-    }
-    saveDefaultCountry(defaultCountryISOCode) {
-        if (defaultCountryISOCode) {
-            this._localStorage.setItem(DEFAULT_COUNTRY_LOCALHOST_KEY, defaultCountryISOCode);
-        }
-    }
-    get savedCountry() {
-        return this._localStorage.getItem(DEFAULT_COUNTRY_LOCALHOST_KEY);
-    }
-    resolve(route) {
-        const token = this.token;
-        if (!token) {
-            this.langStorage.setLanguageByCountry(this.savedCountry);
-            if (!this.apiErrorsSrv.hasError) {
-                this.apiErrorsSrv.setError({ code: ApiErrors.SESSION_NOT_FOUND });
-            }
-            return of(true);
-        }
-        const timezone = momentjs__default.tz.guess();
-        if (!this.environment.csrf) {
-            return of(false);
-        }
-        if (this.resolveCSRF(token)) {
-            this.langStorage.setLanguageByCountry(this.savedCountry);
-            return of(true);
-        }
-        return this.terminalApi.postTerminalOpen({
-            token,
-            terminalOpenRequest: {
-                timezone
-            }
-        })
-            .pipe(catchError((err) => {
-            this.apiErrorsSrv.setError(err.error);
-            return of({ csrf: null, defaultCountryISOCode: null });
-        }), map(({ csrf, defaultCountryISOCode }) => {
-            this.saveDefaultCountry(defaultCountryISOCode);
-            this.langStorage.setLanguageByCountry(this.savedCountry);
-            this.resolveCSRF(token, csrf);
-            return true;
-        }));
-    }
-    resolveCSRF(token, csrf) {
-        if (!csrf) {
-            if (token && this.cookieSrv.check(`${token}_${CSRF_COOKIE_NAME}`)) {
-                this.apiErrorsSrv.clear();
-                this.configuration.credentials.CSRF = this.cookieSrv.get(`${token}_${CSRF_COOKIE_NAME}`);
-                return true;
-            }
-        }
-        else {
-            this.apiErrorsSrv.clear();
-            this.cookieSrv.set(`${token}_${CSRF_COOKIE_NAME}`, csrf, momentjs__default().add(24, 'hours').toDate(), undefined, undefined, this.environment.production);
-            this.configuration.credentials.CSRF = csrf;
-            return true;
-        }
-        return false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CSRFResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CSRFResolver }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CSRFResolver, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class ErrorInterceptorService {
-    constructor() {
-        this.apiErrorSrv = inject(ApiErrorsService);
-    }
-    intercept(req, next) {
-        return next
-            .handle(req)
-            .pipe(catchError((err) => {
-            if (err.status === 404 || err.status === 500) {
-                this.apiErrorSrv.setError();
-            }
-            return throwError(err);
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorInterceptorService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ErrorInterceptorService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 const advcash = {
     confirmation: '',
     title: 'Advcash',
@@ -2273,6 +2321,15 @@ const advcash = {
     ]
 };
 
+var TerminalStep;
+(function (TerminalStep) {
+    TerminalStep[TerminalStep["Prepare"] = 0] = "Prepare";
+    TerminalStep[TerminalStep["Confirmation"] = 1] = "Confirmation";
+    TerminalStep[TerminalStep["Status"] = 2] = "Status";
+})(TerminalStep || (TerminalStep = {}));
+
+const FORMAT_DATE = 'YYYY-MM-DD';
+
 const alfabank = {
     confirmation: '',
     title: 'AlfaClick',
@@ -3426,7 +3483,7 @@ class SessionDataSource {
         this.cd = inject(ChangeDetectorRef);
         this.cardTerminalSdkFactory = inject(TERMINAL_SDK_FACTORY);
         this.data$ = new BehaviorSubject(undefined);
-        this.loading$ = new BehaviorSubject(null);
+        this.loading$ = new BehaviorSubject(true);
         this.loadingMethodInfo$ = new BehaviorSubject(true);
         this.loadingConfirm$ = new BehaviorSubject(false);
         this.configurations = new Map();
@@ -3494,7 +3551,7 @@ class SessionDataSource {
         return this.data$.getValue();
     }
     get() {
-        if (this.loading$.getValue() !== null) {
+        if (!this.loading$.getValue()) {
             this.loading$.next(true);
         }
         return this.terminalApi.getTerminalSessionInfo({
@@ -3532,14 +3589,14 @@ class SessionDataSource {
     }
     catchError(loading$) {
         return (err) => {
-            this.apiErrorsSrv.setError(err.error);
+            this.apiErrorsSrv.setLocalError(err.error);
             loading$?.next(false);
             this.cd.markForCheck();
             return throwError(err);
         };
     }
     prepare(data) {
-        if (this.loadingConfirm$.getValue() !== null) {
+        if (!this.loadingConfirm$.getValue()) {
             this.loadingConfirm$.next(true);
         }
         return this.terminalApi
@@ -3550,7 +3607,7 @@ class SessionDataSource {
             .pipe(catchError(this.catchError(this.loadingConfirm$)), tap(() => this.loadingConfirm$.next(false)));
     }
     confirm() {
-        if (this.loadingConfirm$.getValue() !== null) {
+        if (!this.loadingConfirm$.getValue()) {
             this.loadingConfirm$.next(true);
         }
         return this.terminalApi
@@ -3567,7 +3624,7 @@ class SessionDataSource {
         }));
     }
     close() {
-        if (this.loadingConfirm$.getValue() !== null) {
+        if (!this.loadingConfirm$.getValue()) {
             this.loadingConfirm$.next(true);
         }
         return this.terminalApi
@@ -3577,7 +3634,7 @@ class SessionDataSource {
             .pipe(catchError(this.catchError(this.loadingConfirm$)), map(() => {
             if (!this.returnBack()) {
                 const error = { code: I18N_KEY.SESSION_CLOSED };
-                this.apiErrorsSrv.setError(error);
+                this.apiErrorsSrv.setLocalError(error);
                 this.loadingConfirm$?.next(false);
                 this.cd.markForCheck();
                 throw error;
@@ -3618,7 +3675,7 @@ class ScriptLoader {
         this.document = inject(DOCUMENT);
         this.nonce = inject(CSP_NONCE);
         this.environment = inject(ENVIRONMENT);
-        this.HASH_MAP = new Map([
+        this.SCRIPT_HASH_MAP = new Map([
             [
                 'cde_sdk',
                 this.environment.production ? {
@@ -3631,9 +3688,6 @@ class ScriptLoader {
             ]
         ]);
     }
-    get window() {
-        return this.document.defaultView;
-    }
     fetchScript(id) {
         return new Promise((resolve, reject) => {
             let script;
@@ -3661,7 +3715,7 @@ class ScriptLoader {
                 script = template.content.children.item(0);
             }
             else {
-                const { src, hash } = this.HASH_MAP.get(id);
+                const { src, hash } = this.SCRIPT_HASH_MAP.get(id);
                 script = this.document.createElement('script');
                 script.type = 'text/javascript';
                 script.src = src;
@@ -3674,7 +3728,7 @@ class ScriptLoader {
             script.nonce = this.nonce;
             script.onload = () => resolve();
             script.onerror = (err) => reject(err);
-            this.document.body.append(script);
+            this.document.body.appendChild(script);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ScriptLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3698,16 +3752,9 @@ class TerminalTplComponent {
         FocusHandler.previousEnabled(ev);
     }
     ngOnInit() {
-        this.ready$.next(false);
-        this.langStorage.setAvailableLanguages();
-        combineLatest([
-            this.navigationEnd$(),
-            this.langStorage.setLanguage$()
-        ])
-            .pipe(switchMap(() => hideInitLoader()), first(), takeUntil(this.unSubscriber))
-            .subscribe(() => {
-            this.ready$.next(true);
-        });
+        this.navigationEnd$()
+            .pipe(switchMap(() => this.langStorage.setLanguage$({ save: false })), switchMap(() => hideInitLoader()), first(), takeUntil(this.unSubscriber))
+            .subscribe(() => this.ready$.next(true));
     }
     navigationEnd$() {
         if (this.router.navigated) {
@@ -4123,14 +4170,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 
 class TerminalLangSwitcherComponent {
     get translation_keys() {
-        return this.langStorageSrv.translations;
+        return this.langStorageSrv.TRANSLATION_LANG_KEYS;
     }
     constructor() {
+        this.versionSrv = inject(TERMINAL_VERSION_SERVICE_TOKEN);
         this.langStorageSrv = inject(TranslateLangStorageService);
         this.cd = inject(ChangeDetectorRef);
         this.unSubscriber = new Subject();
         this.loading = false;
-        this.change = new EventEmitter();
+        this.langChange = new EventEmitter();
         this.tabIndex = 0;
         this.langStorageSrv.onLangChange$
             .pipe(takeUntil(this.unSubscriber))
@@ -4140,26 +4188,26 @@ class TerminalLangSwitcherComponent {
         return this.langStorageSrv.currentLang;
     }
     get langs() {
-        return Object.keys(this.translation_keys);
+        return this.versionSrv.langs;
     }
     changeLang(lang) {
-        this.langStorageSrv.setLanguage$(lang);
+        this.langStorageSrv.setLanguage$({ lang, save: true });
         this.cd.markForCheck();
-        this.change.emit(lang);
+        this.langChange.emit(lang);
     }
     ngOnDestroy() {
         this.unSubscriber.next();
         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: { change: "change" }, 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) {\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 }); }
 }
 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"] }]
         }], ctorParameters: () => [], propDecorators: { loading: [{
                 type: Input
-            }], change: [{
+            }], langChange: [{
                 type: Output
             }], tabIndex: [{
                 type: Input
@@ -4169,14 +4217,14 @@ class TerminalLayoutTplComponent {
     constructor() {
         this.versionSrv = inject(TERMINAL_VERSION_SERVICE_TOKEN);
         this.document = inject(DOCUMENT);
-        this.translateLoader = inject(TranslateLoader);
+        this.translateSrv = inject(TranslateService);
         this.cd = inject(ChangeDetectorRef);
         this.translateStorageSrv = inject(TranslateLangStorageService);
         this.unSubscriber = new Subject();
         this.loading = true;
-        this.translateStorageSrv.translateSrv.onLangChange
+        this.translateSrv.onLangChange
             .pipe(takeUntil(this.unSubscriber))
-            .subscribe((e) => {
+            .subscribe(() => {
             this.cd.detectChanges();
         });
     }
@@ -4194,7 +4242,7 @@ 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: ["change"] }, { 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\">\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLayoutTplComponent, decorators: [{
             type: Component,
@@ -4378,18 +4426,20 @@ function removeEmptyProps(obj, options = { nullValue: true }) {
 class ConstructorFormService extends FormGroup {
     constructor() {
         super({
-            country: new FormControl(),
-            user_currency: new FormControl(),
-            method: new FormControl(),
-            currency: new FormControl(),
+            country: new FormControl(undefined, Validators.required),
+            method: new FormControl(undefined, Validators.required),
+            currency: new FormControl(undefined, Validators.required),
+            user_currency: new FormControl(undefined, Validators.required),
             payment: new FormGroup({})
         });
         this.sessionDS = inject(SessionDataSource);
         this.cd = inject(ChangeDetectorRef);
         this.configurationFactory = inject(TERMINAL_METHOD_CONFIGURATION_FACTORY, { optional: true }) || ((method, defaultConfig) => defaultConfig);
+        this._storage = inject(LocalStorage);
         this.cancelRequestsSubscriber = new Subject();
         this.unSubscriber = new Subject();
         this.fields = [];
+        this.ready = false;
         this.amountDynamic = false;
     }
     get methodInfoLoading() {
@@ -4409,6 +4459,8 @@ class ConstructorFormService extends FormGroup {
             .forEach((controlName) => this.payment.removeControl(controlName));
     }
     init() {
+        this.ready = false;
+        this.cd.detectChanges();
         if (this.configurationFactory) {
             this.config = this.configurationFactory(this.methodName, this.sessionDS.getConfiguration(this.methodName));
         }
@@ -4428,7 +4480,10 @@ class ConstructorFormService extends FormGroup {
             if (!field.name) {
                 return;
             }
-            const control = new FormControl(undefined);
+            const control = new FormControl({
+                value: field.type === PaymentFieldTypeEnum.Iframe ? undefined : null,
+                disabled: false,
+            });
             const validators = [];
             this.amountDynamic = methodInfo.amountDynamic;
             const isEditable = !methodInfo.amountDynamic && this.isAmountEditable();
@@ -4507,15 +4562,13 @@ class ConstructorFormService extends FormGroup {
                 validators.push(field.validator(this.payment));
             }
             control.setValidators(validators);
-            if (field.name) {
-                this.payment.addControl(field.name, control);
-            }
+            this.payment.addControl(field.name, control);
             this.fetchCollection(field)
                 .subscribe(() => {
                 control.updateValueAndValidity();
             });
         });
-        return methodInfo;
+        this.ready = true;
     }
     fetchCollection(field) {
         const EMPTY_LIST = of([]).pipe(first());
@@ -4573,22 +4626,22 @@ class ConstructorFormService extends FormGroup {
         return this.sessionDS.getTypeNameById(id);
     }
     saveDefaultCountry() {
-        this.sessionDS.document.defaultView.localStorage.setItem(DEFAULT_COUNTRY_LOCALHOST_KEY, this.country.value);
-    }
-    get defaultCountry() {
-        return this.sessionDS.document.defaultView.localStorage.getItem(DEFAULT_COUNTRY_LOCALHOST_KEY);
+        this._storage.saveDefaultCountry(this.country.value);
     }
     saveDefaultMethodName() {
-        this.sessionDS.document.defaultView.localStorage.setItem(DEFAULT_METHOD_LOCALHOST_KEY, this.methodName);
-    }
-    get defaultMethodName() {
-        return this.sessionDS.document.defaultView.localStorage.getItem(DEFAULT_METHOD_LOCALHOST_KEY);
+        this._storage.saveDefaultMethodName(this.methodName);
     }
     saveDefaultCurrency() {
-        this.sessionDS.document.defaultView.localStorage.setItem(DEFAULT_CURRENCY_LOCALHOST_KEY, this.currency.value);
+        this._storage.saveDefaultCurrency(this.currency.value);
+    }
+    get defaultCountry() {
+        return this._storage.defaultCountry;
+    }
+    get defaultMethodName() {
+        return this._storage.defaultMethodName;
     }
     get defaultCurrency() {
-        return this.sessionDS.document.defaultView.localStorage.getItem(DEFAULT_CURRENCY_LOCALHOST_KEY);
+        return this._storage.defaultCurrency;
     }
     cancelRequests() {
         this.cancelRequestsSubscriber.next();
@@ -4608,6 +4661,18 @@ class ConstructorFormService extends FormGroup {
         });
         return removeEmptyProps(data);
     }
+    updateValueAndValidityIframes() {
+        this.fields.forEach(({ name, type }) => {
+            if (type === PaymentFieldTypeEnum.Iframe) {
+                this.payment.get(name).updateValueAndValidity({ emitEvent: false });
+            }
+        });
+    }
+    get readyIframesSubmit() {
+        return this.fields
+            .filter(({ type }) => type !== PaymentFieldTypeEnum.Iframe)
+            .every(({ name, type }) => !this.payment.get(name).invalid);
+    }
     isAmountEditable() {
         return this.sessionDS.getSessionValue().amountEditable;
     }
@@ -4638,9 +4703,6 @@ class ConstructorFormService extends FormGroup {
         });
         this.updateValueAndValidity({ emitEvent: false });
     }
-    get isCDEFailed() {
-        return this.hasError('cde_error');
-    }
     distinctValueChanges() {
         return this.valueChanges.pipe(debounceTime(300), distinctUntilChanged((prev, curr) => {
             if (!prev ||
@@ -4716,134 +4778,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class ConstructorFieldIframeComponent {
-    get finished() {
-        return this._finished;
-    }
+class CardSdkService {
     constructor() {
-        this.translateSrv = inject(TranslateService);
-        this.sessionSrv = inject(SessionDataSource);
-        this.cd = inject(ChangeDetectorRef);
         this.scriptLoaderSrv = inject(ScriptLoader);
-        this.ID_CDE_CONTAINER = 'cde-container';
-        this.unSubscriber = new Subject();
-        this.loading = true;
-        this.I18N_KEY = I18N_KEY;
-        this.error = new EventEmitter();
-        this.paid = new EventEmitter();
-        this.ready = new EventEmitter();
-        this._iframeOnLoadHandler = () => {
-            this.loading = false;
-            this.cd.detectChanges();
-        };
-        this._ready = false;
-        this._finished = false;
-        this.submitted = false;
+        this.sessionSrv = inject(SessionDataSource);
+        this._pending = false;
+        this._submitted = false;
     }
-    ngAfterViewInit() {
-        this.scriptLoaderSrv
-            .fetchScript('cde_sdk')
-            .then(() => this._init(), () => this._onError());
+    markAsReady() {
+        this._pending = false;
     }
-    get lang() {
-        return this.translateSrv.currentLang;
+    markAsSubmitted() {
+        this._submitted = true;
     }
-    get iframe() {
-        return this._sdk?.iframe;
+    get pending() {
+        return this._pending;
     }
-    _init() {
-        this._sdk = this.sessionSrv.createCardTerminalSdk(this.lang, this.ID_CDE_CONTAINER, this.tabIndex);
-        if (!this.iframe) {
-            this._onError();
-            return;
+    submit() {
+        if (!this._submitted && this._sdk) {
+            this._sdk.submit();
+            this._pending = true;
         }
-        this.iframe
-            .addEventListener('load', this._iframeOnLoadHandler);
-        this._sdk
-            .onError((code) => this._onError(code));
+    }
+    get _ready$() {
+        return fromPromise(this.scriptLoaderSrv.fetchScript('cde_sdk'));
+    }
+    createCardTerminalSdk$(lang, id, tabindex) {
+        return this._ready$.pipe(map(() => (this._sdk = this.sessionSrv.createCardTerminalSdk(lang, id, tabindex))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CardSdkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CardSdkService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: CardSdkService, decorators: [{
+            type: Injectable
+        }] });
+
+class IframeValidatorDirectiveDirective {
+    constructor() {
+        this.cardSdkSrv = inject(CardSdkService);
+        this.submitting$ = new Subject();
+        this._validationSdkError = false;
+    }
+    registerSDK(sdk) {
+        if (!sdk) {
+            this._fatalError = I18N_KEY.ERROR_OCCUR_SDK;
+        }
+        else {
+            this._sdk = sdk;
+            this.handleSubmitting();
+        }
+    }
+    handleSubmitting() {
         this._sdk.onInputPending(() => {
-            setTimeout(() => {
-                this._sdk.refreshHeight();
-            });
-            this._ready = false;
+            this._validationSdkError = true;
         });
-        this._sdk.onInputReady(() => this._ready = true);
-        this._sdk
-            .onInputSubmitted(() => {
-            this._finished = true;
-            if (this.submitted) {
-                this.status = I18N_KEY.CDE_CARD_PAID;
-                this.paid.emit();
+        this._sdk.onError((code) => {
+            this._validationSdkError = false;
+            let codeError = I18N_KEY.ERROR_OCCUR;
+            if (code === 501) {
+                codeError = I18N_KEY.CDE_CARD_ERROR_501;
             }
-            else {
-                this.status = I18N_KEY.CDE_CARD_ERROR_ALREADY_PAID;
+            else if (code === 500) {
+                codeError = I18N_KEY.CDE_CARD_ERROR_500;
             }
-            this.cd.detectChanges();
-        });
-        this._sdk
-            .onTimeout(() => this.error.emit(I18N_KEY.CDE_CARD_ERROR_504));
-        this.translateSrv
-            .onLangChange
-            .pipe(takeUntil(this.unSubscriber))
-            .subscribe((options) => {
-            if (!options.lang) {
-                return;
+            else if (code === 504) {
+                codeError = I18N_KEY.CDE_CARD_ERROR_504;
             }
-            this._sdk.useLang(options.lang);
+            this._fatalError = codeError;
         });
-    }
-    submit() {
-        this.submitted = true;
-        const subscriptions = [];
-        return new Promise((resolve) => {
-            if (!this._ready) {
-                resolve(false);
-            }
-            else {
-                subscriptions.push(this._sdk.onInputPending(() => resolve(false)));
-                subscriptions.push(this._sdk.onError(() => resolve(false)));
-                subscriptions.push(this._sdk.onInputSubmitted(() => resolve(true)));
-            }
-            this._sdk.submit();
-        })
-            .then((result) => {
-            subscriptions.map(s => s.unsubscribe());
-            return result;
+        this._sdk.onInputReady(() => {
+            this._validationSdkError = false;
+            this.submitting$.next(null);
+        });
+        this._sdk.onInputSubmitted(() => {
+            this._validationSdkError = false;
+            this.submitting$.next(null);
+        });
+        this._sdk.onTimeout(() => {
+            this._validationSdkError = false;
+            this._fatalError = I18N_KEY.CDE_CARD_ERROR_504;
         });
     }
-    _onError(code) {
-        let codeError = I18N_KEY.ERROR_OCCUR;
-        if (code === 501) {
-            codeError = I18N_KEY.CDE_CARD_ERROR_501;
+    validate(control) {
+        if (this._fatalError) {
+            return of({ cde_error: this._fatalError });
         }
-        else if (code === 500) {
-            codeError = I18N_KEY.CDE_CARD_ERROR_500;
+        if (this._validationSdkError) {
+            return of({ cde_validation_error: true });
         }
-        else if (code === 504) {
-            codeError = I18N_KEY.CDE_CARD_ERROR_504;
+        if (this.cardSdkSrv.pending) {
+            return this.submitting$.asObservable();
         }
-        this.loading = false;
-        this.error.emit(codeError);
+        return of(null);
     }
-    ngOnDestroy() {
-        this.iframe?.removeEventListener('load', this._iframeOnLoadHandler);
-        this.unSubscriber.next();
-        this.unSubscriber.unsubscribe();
-        this._sdk?.unsubscribe();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IframeValidatorDirectiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: IframeValidatorDirectiveDirective, isStandalone: true, selector: "[appIframeValidatorDirective]", providers: [
+            {
+                provide: NG_ASYNC_VALIDATORS,
+                useExisting: forwardRef(() => IframeValidatorDirectiveDirective),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IframeValidatorDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appIframeValidatorDirective]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_ASYNC_VALIDATORS,
+                            useExisting: forwardRef(() => IframeValidatorDirectiveDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+const ID_CDE_CONTAINER = 'cde-container';
+class ConstructorFieldIframeComponent {
+    constructor() {
+        this._translateSrv = inject(TranslateService);
+        this._sessionSrv = inject(SessionDataSource);
+        this._cd = inject(ChangeDetectorRef);
+        this._injector = inject(Injector);
+        this._destroyRef = inject(DestroyRef);
+        this.viewReady = false;
+        this.validator = inject(IframeValidatorDirectiveDirective);
+        this.cardSdkSrv = inject(CardSdkService);
+        this._loading = true;
+        this.I18N_KEY = I18N_KEY;
+        this.ID_CDE_CONTAINER = ID_CDE_CONTAINER;
+    }
+    registerOnTouched(fn) { }
+    registerOnChange(fn) { }
+    writeValue() { }
+    get loading() {
+        return this._loading;
+    }
+    ngAfterViewInit() {
+        this._control = this._injector.get(NgControl).control;
+        this.cardSdkSrv
+            .createCardTerminalSdk$(this._translateSrv.currentLang, this.ID_CDE_CONTAINER, this.tabIndex)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: (sdk) => {
+                this._sdk = sdk;
+                this._destroyRef.onDestroy(() => this._sdk?.unsubscribe());
+                this.validator.registerSDK(sdk);
+                this._init();
+            },
+            error: () => {
+                this.validator.registerSDK();
+                this._updateValueAndValidity();
+            },
+        });
+    }
+    _updateValueAndValidity() {
+        this.cardSdkSrv.markAsReady();
+        this._control?.updateValueAndValidity({ onlySelf: true });
+        this._cd.detectChanges();
+        this.refreshHeight();
+    }
+    refreshHeight() {
+        setTimeout(() => {
+            this._sdk?.refreshHeight();
+            this.viewReady = true;
+            this._cd.detectChanges();
+        }, 100);
+    }
+    _init() {
+        this._sdk.onInputPending(() => {
+            this._loading = false;
+            this._updateValueAndValidity();
+        });
+        this._sdk.onInputReady(() => {
+            this._updateValueAndValidity();
+        });
+        this._sdk.onInputSubmitted(() => {
+            this._loading = false;
+            this.cardSdkSrv.markAsSubmitted();
+            this.status = I18N_KEY.CDE_CARD_ERROR_ALREADY_PAID;
+            this._updateValueAndValidity();
+        });
+        this._sdk.onTimeout(() => {
+            this._updateValueAndValidity();
+        });
+        this._sdk.onError(() => {
+            this._loading = false;
+            this._updateValueAndValidity();
+        });
+        this._translateSrv.onLangChange
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: (options) => {
+                if (!options.lang) {
+                    return;
+                }
+                this._sdk.useLang(options.lang);
+            },
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldIframeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorFieldIframeComponent, isStandalone: true, selector: "app-constructor-field-iframe", inputs: { tabIndex: "tabIndex" }, outputs: { error: "error", paid: "paid", ready: "ready" }, ngImport: i0, template: "@if (!status) {\r\n  <div [id]=\"ID_CDE_CONTAINER\"\r\n    [hidden]=\"loading\"\r\n  ></div>\r\n} @else {\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: [".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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorFieldIframeComponent, isStandalone: true, selector: "app-constructor-field-iframe", inputs: { tabIndex: "tabIndex" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldIframeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-constructor-field-iframe', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TranslateByKeyPipe, GmSkeletonComponent], template: "@if (!status) {\r\n  <div [id]=\"ID_CDE_CONTAINER\"\r\n    [hidden]=\"loading\"\r\n  ></div>\r\n} @else {\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: [".iframe-warning{font-weight:400;font-size:14px;line-height:22px;color:var(--color-base-350);margin-top:8px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { error: [{
-                type: Output
-            }], paid: [{
-                type: Output
-            }], ready: [{
-                type: Output
-            }], tabIndex: [{
+            args: [{ selector: 'app-constructor-field-iframe', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, animations: [insertRemoveTrigger], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ConstructorFieldIframeComponent),
+                            multi: true,
+                        },
+                        CardSdkService,
+                    ], imports: [TranslateByKeyPipe, GmSkeletonComponent], hostDirectives: [
+                        {
+                            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"] }]
+        }], propDecorators: { tabIndex: [{
                 type: Input
             }] } });
 
@@ -4885,6 +5045,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }] } });
 
 class PsSelectComponent {
+    constructor() {
+        this.cd = inject(ChangeDetectorRef);
+        this.methodTitlePipe = inject(MethodTitlePipe);
+        this.translatePipe = inject(TranslatePipe);
+        this.destroyRef = inject(DestroyRef);
+        this.I18N_KEY = I18N_KEY;
+        this.onChange = (_value) => {
+        };
+        this.onTouch = () => {
+        };
+        this.methods = [];
+        this.disabled = false;
+        this.otherMethodControl = new FormControl(undefined);
+    }
     get popularMethods() {
         if (this.disabled) {
             return null;
@@ -4908,24 +5082,10 @@ class PsSelectComponent {
             }
         });
     }
-    constructor() {
-        this.cd = inject(ChangeDetectorRef);
-        this.methodTitlePipe = inject(MethodTitlePipe);
-        this.translatePipe = inject(TranslatePipe);
-        this.unsub = new Subject();
-        this.I18N_KEY = I18N_KEY;
-        this.onChange = (_value) => {
-        };
-        this.onTouch = () => {
-        };
-        this.methods = [];
-        this.disabled = false;
-        this.otherMethodControl = new FormControl(undefined);
-    }
     ngOnInit() {
         this.otherMethodControl
             .valueChanges
-            .pipe(filter(m => !!m), takeUntil(this.unsub))
+            .pipe(filter(m => !!m), takeUntilDestroyed(this.destroyRef))
             .subscribe((method) => this.selectMethod(method));
     }
     selectMethod(method, options = { emitChange: true }) {
@@ -4966,10 +5126,6 @@ class PsSelectComponent {
         this.searchString = value;
         this.cd.markForCheck();
     }
-    ngOnDestroy() {
-        this.unsub.next();
-        this.unsub.unsubscribe();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PsSelectComponent, isStandalone: true, selector: "app-ps-select", inputs: { methods: "methods", tabIndex: "tabIndex" }, providers: [
             {
@@ -4992,13 +5148,22 @@ 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"] }]
-        }], ctorParameters: () => [], propDecorators: { methods: [{
+        }], propDecorators: { methods: [{
                 type: Input
             }], tabIndex: [{
                 type: Input
             }] } });
 
 class ConstructorFieldSelectComponent {
+    constructor() {
+        this.cd = inject(ChangeDetectorRef);
+        this.injector = inject(Injector);
+        this.I18N_KEY = I18N_KEY;
+        this.onChange = (_value) => {
+        };
+        this.onTouch = () => {
+        };
+    }
     get data() {
         if (!this.items) {
             return [];
@@ -5015,17 +5180,6 @@ class ConstructorFieldSelectComponent {
             }
         });
     }
-    constructor() {
-        this.cd = inject(ChangeDetectorRef);
-        this.injector = inject(Injector);
-        this.unsub = new Subject();
-        this.I18N_KEY = I18N_KEY;
-        this.onChange = (value) => {
-        };
-        this.onTouch = () => {
-        };
-        this.cd.detach();
-    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -5043,27 +5197,8 @@ class ConstructorFieldSelectComponent {
         return this.control?.getError('error');
     }
     ngAfterViewInit() {
-        this.control = this.injector.get(FormControlName).control;
-        this.cd.reattach();
+        this.control = this.injector.get(NgControl).control;
         this.cd.detectChanges();
-        this.ngDoCheck();
-    }
-    ngDoCheck() {
-        if (!this.control) {
-            return;
-        }
-        if (this.control.dirty) {
-            this.control.markAsDirty();
-            this.cd.detectChanges();
-        }
-        if (this.control.touched) {
-            this.control.markAsTouched();
-            this.cd.detectChanges();
-        }
-    }
-    ngOnDestroy() {
-        this.unsub.next();
-        this.unsub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorFieldSelectComponent, isStandalone: true, selector: "app-constructor-field-select", inputs: { config: "config", items: "items", tabIndex: "tabIndex" }, providers: [
@@ -5072,7 +5207,7 @@ class ConstructorFieldSelectComponent {
                 useExisting: forwardRef(() => ConstructorFieldSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<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", 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) {\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldSelectComponent, decorators: [{
             type: Component,
@@ -5082,8 +5217,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useExisting: forwardRef(() => ConstructorFieldSelectComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [TrmSelectComponent, FormsModule, ReactiveFormsModule, TranslateByKeyPipe], template: "<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", styles: [":host{display:block;width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
+                    ], 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"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], items: [{
                 type: Input
@@ -5148,7 +5283,7 @@ class ConstructorFieldTextComponent {
         this.dropSpecialCharacters = true;
         this.I18N_KEY = I18N_KEY;
         this.maskedValueChange = new EventEmitter();
-        this.onChange = (value) => {
+        this.onChange = (_value) => {
         };
         this.onTouch = () => {
         };
@@ -5168,7 +5303,9 @@ class ConstructorFieldTextComponent {
         this.control?.markAsUntouched();
         e.preventDefault();
         e.stopPropagation();
-        target.value = this.maskPipe.transform(target.value, this.mask, { patterns: this.maskPatterns }).replace(/^-|-$/, '');
+        target.value = this.maskPipe
+            .transform(target.value, this.mask, { patterns: this.maskPatterns })
+            .replace(/^-|-$/, '');
         setTimeout(() => {
             this.control?.updateValueAndValidity();
             if (selectionStart === selectionEnd && e.inputType !== 'deleteContentBackward') {
@@ -5187,7 +5324,7 @@ class ConstructorFieldTextComponent {
             return;
         }
         const value = t.value;
-        let content = e.clipboardData.getData('text');
+        let content = e.clipboardData?.getData('text') || '';
         let selectionStart = removeSpecSymbols(t.value.slice(0, t.selectionStart)).length + removeSpecSymbols(content).length;
         if (value) {
             const arr = Array.from(value);
@@ -5208,6 +5345,10 @@ class ConstructorFieldTextComponent {
             return;
         }
         const target = e.target;
+        if (this.type === PaymentFieldTypeEnum.Email) {
+            this._emitMaskedValueChanges(target);
+            return;
+        }
         const value = this.control?.value;
         let selectionStart = removeSpecSymbols(target.value.slice(0, target.selectionStart)).length;
         const mask = this.maskSrv.getMaskByValue(this.config.mask, value);
@@ -5379,19 +5520,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }] } });
 
 class ConstructorFieldDateComponent {
-    get startCalendarDate() {
-        return this.config.options?.startCalendarDate;
-    }
     constructor() {
         this.cd = inject(ChangeDetectorRef);
         this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         this.FORMAT_DATE = FORMAT_DATE;
-        this.unsub = new Subject();
-        this.onChange = (value) => {
+        this.onChange = (_value) => {
         };
         this.onTouch = () => {
         };
-        this.cd.detach();
+    }
+    get startCalendarDate() {
+        return this.config.options?.startCalendarDate;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -5400,48 +5540,36 @@ class ConstructorFieldDateComponent {
         this.onTouch = fn;
     }
     writeValue(value) {
-        this.control?.setValue(value, { emitEvent: false });
-        this.cd.markForCheck();
+        if (isMoment(value) || typeof value === 'string') {
+            if (isMoment(value)) {
+                this.control?.setValue(value.format(FORMAT_DATE), { emitEvent: false });
+            }
+            else {
+                this.control?.setValue(value, { emitEvent: false });
+            }
+            this.cd.markForCheck();
+        }
     }
     ngAfterViewInit() {
-        this.control = this.injector.get(FormControlName).control;
-        this.cd.reattach();
+        this.control = this.injector.get(NgControl).control;
         this.cd.detectChanges();
-        this.ngDoCheck();
         this.control
             .valueChanges
-            .pipe(takeUntil(this.unsub))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
             if (isMoment(value)) {
                 this.onChange(value.format(this.FORMAT_DATE));
             }
         });
     }
-    ngDoCheck() {
-        if (!this.control) {
-            return;
-        }
-        if (this.control.dirty) {
-            this.control.markAsDirty();
-            this.cd.detectChanges();
-        }
-        if (this.control.touched) {
-            this.control.markAsTouched();
-            this.cd.detectChanges();
-        }
-    }
-    ngOnDestroy() {
-        this.unsub.next();
-        this.unsub.unsubscribe();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: ConstructorFieldDateComponent, isStandalone: true, selector: "app-constructor-field-date", inputs: { config: "config", tabIndex: "tabIndex" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ConstructorFieldDateComponent, isStandalone: true, selector: "app-constructor-field-date", inputs: { config: "config", tabIndex: "tabIndex" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ConstructorFieldDateComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<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", 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) {\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ConstructorFieldDateComponent, decorators: [{
             type: Component,
@@ -5451,8 +5579,8 @@ 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: "<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", 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"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
+                    ], 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"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], tabIndex: [{
                 type: Input
@@ -5486,6 +5614,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }] } });
 
 class ConstructorFormComponent {
+    constructor() {
+        this.cd = inject(ChangeDetectorRef);
+        this.form = inject(ConstructorFormService);
+        this.translateSrv = inject(TranslateService);
+        this.countriesSortPipe = inject(CountriesSortPipe);
+        this.countryTranslatePipe = inject(CountryTranslatePipe);
+        this.ngScrollBar = inject(NgScrollbar);
+        this.versionSrv = inject(TERMINAL_VERSION_SERVICE_TOKEN);
+        this.unSubscriber = new Subject();
+        this.preparationStepFilled = false;
+        this.TERMINAL_STEP = TerminalStep;
+        this.CONSTRUCTOR_FIELD_TYPES = PaymentFieldTypeEnum;
+        this.loading = false;
+        this.types = [];
+        this.canReturnToProject = true;
+        this.amountChanged = new EventEmitter();
+        this.back = new EventEmitter();
+        this.prepare = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.onPaymentChanged = new EventEmitter();
+        this.I18N_KEY = I18N_KEY;
+    }
     get countriesList() {
         return this.countriesSortPipe
             .transform(this.types
@@ -5548,30 +5698,6 @@ class ConstructorFormComponent {
             this.form.userCurrency.disable();
         }
     }
-    hasFeeHint(options) {
-        return options.fee || options.fixedFee || options.min || options.max;
-    }
-    constructor() {
-        this.cd = inject(ChangeDetectorRef);
-        this.form = inject(ConstructorFormService);
-        this.translateSrv = inject(TranslateService);
-        this.countriesSortPipe = inject(CountriesSortPipe);
-        this.countryTranslatePipe = inject(CountryTranslatePipe);
-        this.ngScrollBar = inject(NgScrollbar);
-        this.versionSrv = inject(TERMINAL_VERSION_SERVICE_TOKEN);
-        this.unSubscriber = new Subject();
-        this.TERMINAL_STEP = TerminalStep;
-        this.CONSTRUCTOR_FIELD_TYPES = PaymentFieldTypeEnum;
-        this.loading = false;
-        this.types = [];
-        this.canReturnToProject = true;
-        this.amountChanged = new EventEmitter();
-        this.back = new EventEmitter();
-        this.prepare = new EventEmitter();
-        this.confirm = new EventEmitter();
-        this.onPaymentChanged = new EventEmitter();
-        this.I18N_KEY = I18N_KEY;
-    }
     get hasCurrencyMethodSelector() {
         return this.versionSrv.hasCurrencyMethodSelector === true;
     }
@@ -5586,7 +5712,19 @@ class ConstructorFormComponent {
             // Get configuration fields
             const countries = this.countriesList;
             const defaultCountry = this.form.defaultCountry;
-            this.form.country.setValue(countries.includes(defaultCountry) ? defaultCountry : countries[0]);
+            let country = null;
+            if (!countries.includes(defaultCountry)) {
+                if (countries.includes(OTHER_COUNTRY_CODE)) {
+                    country = OTHER_COUNTRY_CODE;
+                }
+            }
+            else {
+                country = defaultCountry;
+            }
+            this.form.country.setValue(country);
+            if (!country) {
+                return;
+            }
             if (countries.length === 1 && this.form.country.value) {
                 this.form.country.disable();
             }
@@ -5607,10 +5745,16 @@ class ConstructorFormComponent {
                 .subscribe(() => this.onPaymentChanged.emit(this.form.getRawValue()));
             this.fetchForm();
         }
+        if (changes.step?.currentValue && !changes.types && !changes.currency) {
+            this.fetchForm();
+        }
         if (changes.feeOptions && !changes.feeOptions.firstChange) {
             // need for triggering of the custom validator
             this.form.amount?.updateValueAndValidity();
         }
+        if (this.step === TerminalStep.Confirmation) {
+            this.preparationStepFilled = true;
+        }
     }
     ngAfterViewInit() {
         this.form
@@ -5651,6 +5795,10 @@ class ConstructorFormComponent {
         });
     }
     fetchForm() {
+        if (!this.form.method.value) {
+            this.form.ready = true;
+            return;
+        }
         this.form.cancelRequests();
         if (this.step !== this.TERMINAL_STEP.Prepare) {
             return;
@@ -5660,14 +5808,16 @@ class ConstructorFormComponent {
         this.form
             .init()
             .subscribe(() => {
-            if (!this.form.hasWhatToFill()) {
+            if (!this.preparationStepFilled && !this.form.hasWhatToFill()) {
                 this.send();
                 return;
             }
+            this.form.payment.updateValueAndValidity({ onlySelf: true });
             this.cd.detectChanges();
             this.scrollToRequisits();
             this.form.maskedWallet = '';
         }, (err) => {
+            this.form.payment.updateValueAndValidity({ onlySelf: true });
             this.cd.markForCheck();
         });
     }
@@ -5683,47 +5833,46 @@ class ConstructorFormComponent {
         return typeof this.form.config?.description === 'function' ? this.form.config?.description(this.form.getRawValue()) : this.form.config?.description;
     }
     submit() {
-        if (!this.check() && !this.loading) {
-            return;
-        }
-        if (this.form.methodName === 'card' && !this.cardIframe?.finished) {
-            this.form.continueLoaderOn();
-            this.cd.detectChanges();
-            this.cardIframe?.submit()
-                .then(success => !success && this.form.continueLoaderOff());
-            return;
-        }
-        this.send();
-    }
-    cardPaid() {
-        if (!this.check()) {
-            return;
-        }
-        this.send();
-    }
-    iframeError(code) {
-        this.form.setCDEError(code);
-        this.cd.detectChanges();
-    }
-    check() {
         if (this.step === TerminalStep.Confirmation) {
             this.confirm.emit();
-            return false;
+            return;
         }
-        if (this.form.config === null) {
-            return false;
+        if (this.form.config === null || !this.form.ready) {
+            return;
         }
-        if (!this.form.valid || this.error) {
-            Object.values(this.form.payment.controls)
-                .forEach((control) => {
+        this.triggerIframeSubmit();
+        if (this.form.invalid || this.error) {
+            Object.values(this.form.controls).forEach((control) => {
+                control.markAsDirty();
+                control.markAsTouched();
+            });
+            Object.values(this.form.payment.controls).forEach((control) => {
                 control.markAsDirty();
                 control.markAsTouched();
                 control.updateValueAndValidity({ emitEvent: false });
             });
             this.cd.detectChanges();
-            return false;
+            return;
         }
-        return true;
+        if (this.form.pending) {
+            this.form.statusChanges
+                .pipe(first(), takeUntil(this.unSubscriber))
+                .subscribe((status) => {
+                if (status === 'VALID') {
+                    this.send();
+                }
+            });
+        }
+        else {
+            this.send();
+        }
+    }
+    triggerIframeSubmit() {
+        if (!this.form.readyIframesSubmit) {
+            return;
+        }
+        this.sdkList?.forEach((sdk) => sdk.submit());
+        this.form.updateValueAndValidityIframes();
     }
     send() {
         const data = this.form.getPaymentValue();
@@ -5754,15 +5903,15 @@ 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: "cardIframe", first: true, predicate: ["cardIframe"], 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              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            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            @if (form.isCDEFailed) {\r\n              <div class=\"constructor__hint cde-error\"\r\n                app-ps-select-hint\r\n                @insertRemove\r\n                >\r\n                {{form.getError('cde_error') | trans }}\r\n              </div>\r\n            }\r\n          </app-ps-select>\r\n        }\r\n        @if (!form.methodInfoLoading) {\r\n          @if (form.paymentFormFieldNames.length) {\r\n            <div formGroupName=\"payment\"\r\n              #paymentRequisites\r\n              class=\"constructor__fields constructor__fields--reverse\">\r\n              @if (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                  <app-constructor-field-iframe\r\n                    [hidden]=\"form.isCDEFailed\"\r\n                    (paid)=\"cardPaid()\"\r\n                    #cardIframe\r\n                    (error)=\"iframeError($event)\"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\">\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                    [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                    [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                    [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                      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                    [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                  [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          }\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        [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      <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"], outputs: ["error", "paid", "ready"] }, { 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\"\r\n  [formGroup]=\"form\"\r\n  (ngSubmit)=\"submit()\"\r\n  >\r\n  @if (!loading) {\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 }); }
 }
 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              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            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            @if (form.isCDEFailed) {\r\n              <div class=\"constructor__hint cde-error\"\r\n                app-ps-select-hint\r\n                @insertRemove\r\n                >\r\n                {{form.getError('cde_error') | trans }}\r\n              </div>\r\n            }\r\n          </app-ps-select>\r\n        }\r\n        @if (!form.methodInfoLoading) {\r\n          @if (form.paymentFormFieldNames.length) {\r\n            <div formGroupName=\"payment\"\r\n              #paymentRequisites\r\n              class=\"constructor__fields constructor__fields--reverse\">\r\n              @if (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                  <app-constructor-field-iframe\r\n                    [hidden]=\"form.isCDEFailed\"\r\n                    (paid)=\"cardPaid()\"\r\n                    #cardIframe\r\n                    (error)=\"iframeError($event)\"\r\n                    [tabIndex]=\"form.fields.length - i + tabIndex\">\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                    [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                    [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                    [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                      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                    [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                  [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          }\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        [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      <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"] }]
-        }], ctorParameters: () => [], propDecorators: { step: [{
+                    ], 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) {\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"] }]
+        }], propDecorators: { step: [{
                 type: Input
             }], error: [{
                 type: Input
@@ -5800,9 +5949,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], hintMethod: [{
                 type: ViewChild,
                 args: ['hintMethod', { static: false }]
-            }], cardIframe: [{
-                type: ViewChild,
-                args: ['cardIframe', { static: false }]
+            }], sdkList: [{
+                type: ViewChildren,
+                args: [CardSdkService]
             }] } });
 
 class TerminalLayoutComponent {
@@ -5815,6 +5964,7 @@ class TerminalLayoutComponent {
         this.translateLoader = inject(TranslateLoader);
         this.cd = inject(ChangeDetectorRef);
         this.translateStorageSrv = inject(TranslateLangStorageService);
+        this.translateSrv = inject(TranslateService);
         this.adapter = inject(DateAdapter);
         this.apiErrorSrv = inject(ApiErrorsService);
         this.location = inject(Location);
@@ -5827,9 +5977,9 @@ class TerminalLayoutComponent {
         this._submitted = false;
         this.feeCalculateSubject = new Subject();
         this.feeLoading = false;
-        this.adapter.setLocale(this.translateStorageSrv.translateSrv.currentLang);
+        this.adapter.setLocale(this.translateSrv.currentLang);
         this._setTitle();
-        this.translateStorageSrv.translateSrv.onLangChange
+        this.translateSrv.onLangChange
             .pipe(takeUntil(this.unSubscriber))
             .subscribe((e) => {
             this.adapter.setLocale(e.lang);
@@ -5848,7 +5998,7 @@ class TerminalLayoutComponent {
         return this.versionSrv.footerText;
     }
     _setTitle() {
-        this.titleSrv.setTitle(this.versionSrv.pageTitle + this.translateStorageSrv.translateSrv.instant(getI18Key(I18N_KEY.TITLE_PAGE_INVOICE)));
+        this.titleSrv.setTitle(this.versionSrv.pageTitle + this.translateSrv.instant(getI18Key(I18N_KEY.TITLE_PAGE_INVOICE)));
     }
     changeLang() {
     }
@@ -5929,7 +6079,7 @@ class TerminalLayoutComponent {
     }
     checkFatalError() {
         // Clear form error when any values have changed.
-        if (!this.apiErrorSrv.hasFatalError && this.apiErrorSrv.getError()) {
+        if (!this.apiErrorSrv.hasFatalError && this.apiErrorSrv.getLocalError()) {
             this.apiErrorSrv.clear();
         }
     }
@@ -5959,7 +6109,7 @@ class TerminalLayoutComponent {
         this.cd.detectChanges();
     }
     get statusText() {
-        return this.apiErrorSrv.getError() || this._statusText;
+        return this.apiErrorSrv.getLocalError() || this._statusText;
     }
     get hasStatusError() {
         return this.apiErrorSrv.hasFatalError;
@@ -5973,6 +6123,7 @@ class TerminalLayoutComponent {
         }
         this.feeCalculateSubject.next();
         this.feeLoading = true;
+        this.feeOptions = {};
         this.cd.detectChanges();
         this.sessionDS
             .feeOptions(value)
@@ -5999,7 +6150,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 (change)=\"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) === null) {\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) || (sessionDS.loading$ | 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: ["change"] }, { 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\">\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TerminalLayoutComponent, decorators: [{
             type: Component,
@@ -6012,7 +6163,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 (change)=\"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) === null) {\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) || (sessionDS.loading$ | 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\">\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"] }]
         }], ctorParameters: () => [], propDecorators: { scrollComponent: [{
                 type: ViewChild,
                 args: ['scrollComponent']
@@ -6458,5 +6609,5 @@ const moment = momentjs;
  * Generated bundle index. Do not edit.
  */
 
-export { APP_READY_TOKEN, ApiErrors, ApiErrorsService, CHECKIN_SERVICE_TOKEN, CONFIGURATION_TOKEN, CSRFResolver, CSRF_COOKIE_NAME, CheckinDatasource, CheckinModeToken, CheckinModule, CheckinPageComponent, CollectionType, ConstructorFieldDateComponent, ConstructorFieldIframeComponent, ConstructorFieldSelectComponent, ConstructorFieldTextComponent, ConstructorFormComponent, ConstructorFormService, ConstructorPreparationComponent, ConstructorStatusComponent, CountriesSortPipe, CountryTranslatePipe, DEFAULT_COUNTRY_LOCALHOST_KEY, DEFAULT_CURRENCY_LOCALHOST_KEY, DEFAULT_LANG, DEFAULT_METHOD_LOCALHOST_KEY, ENVIRONMENT, ErrorComponent, ErrorInterceptorService, FATAL_ERROR_LIST, FIELD_TEMPLATE, FORMAT_DATE, FocusHandler, HtmlSanitizerPipe, I18N_COUNTRIES, I18N_KEY, INITIAL_PHONE_MASK, InputMaskCorrector, InvoiceStatus, LANGUAGE, LOCAL_LANG_KEY, MASKS, MaskResolver, MaskService, MethodAmountHintComponent, MethodTitlePipe, Mode, NgVarContext, NgVarDirective, OTHER_COUNTRY_CODE, PHONE_MASKS, PHONE_MASK_PATTERNS, PaymentFieldTypeEnum, PsSelectComponent, SanitizerPipe, ScriptLoader, ScrollbarSelectHeightDirective, SessionDataSource, SessionToken, SharedModule, TERMINAL_METHOD_CONFIGURATION_FACTORY, TERMINAL_SDK_FACTORY, TERMINAL_SERVICE_TOKEN, TERMINAL_VERSION_SERVICE_TOKEN, TabIndexFocusDirective, TerminalLangSwitcherComponent, TerminalLayoutComponent, TerminalLayoutTplComponent, TerminalModule, TerminalStep, TerminalTplComponent, TranslateByKeyPipe, TranslateLangStorageService, TrmCurrencyPipe, TrmSelectComponent, TrmSelectLabelTemplateDirective, VersionServiceBase, getI18Key, hideInitLoader, i18nMap, insertRemoveTrigger, isObject, isObjectTheSame, loadI18NData, moment, removeEmptyProps, removeSpecSymbols, warningConsole };
+export { APP_READY_TOKEN, ApiErrors, ApiErrorsService, CHECKIN_SERVICE_TOKEN, CONFIGURATION_TOKEN, CSRFResolver, CSRF_COOKIE_NAME, CardSdkService, CheckinDatasource, CheckinModeToken, CheckinModule, CheckinPageComponent, CollectionType, ConstructorFieldDateComponent, ConstructorFieldIframeComponent, ConstructorFieldSelectComponent, ConstructorFieldTextComponent, ConstructorFormComponent, ConstructorFormService, ConstructorPreparationComponent, ConstructorStatusComponent, CountriesSortPipe, CountryTranslatePipe, DEFAULT_COUNTRY_LOCALHOST_KEY, DEFAULT_CURRENCY_LOCALHOST_KEY, DEFAULT_LANG, DEFAULT_METHOD_LOCALHOST_KEY, ENVIRONMENT, ErrorComponent, ErrorInterceptorService, FIELD_TEMPLATE, FORMAT_DATE, FocusHandler, HtmlSanitizerPipe, I18N_COUNTRIES, I18N_KEY, INITIAL_PHONE_MASK, IframeValidatorDirectiveDirective, InputMaskCorrector, InvoiceStatus, LANGUAGE, LOCAL_LANG_KEY, MASKS, MaskResolver, MaskService, MethodAmountHintComponent, MethodTitlePipe, Mode, NgVarContext, NgVarDirective, OTHER_COUNTRY_CODE, PHONE_MASKS, PHONE_MASK_PATTERNS, PaymentFieldTypeEnum, PsSelectComponent, SanitizerPipe, ScriptLoader, ScrollbarSelectHeightDirective, SessionDataSource, SessionToken, SharedModule, TERMINAL_METHOD_CONFIGURATION_FACTORY, TERMINAL_SDK_FACTORY, TERMINAL_SERVICE_TOKEN, TERMINAL_VERSION_SERVICE_TOKEN, TabIndexFocusDirective, TerminalLangSwitcherComponent, TerminalLayoutComponent, TerminalLayoutTplComponent, TerminalModule, TerminalStep, TerminalTplComponent, TranslateByKeyPipe, TranslateLangStorageService, TrmCurrencyPipe, TrmSelectComponent, TrmSelectLabelTemplateDirective, VersionServiceBase, getI18Key, hideInitLoader, i18nMap, insertRemoveTrigger, isObject, isObjectTheSame, loadI18NData, moment, removeEmptyProps, removeSpecSymbols, warningConsole };
 //# sourceMappingURL=trm-tmpl.mjs.map