ng-easycommerce 0.0.599 → 0.0.601

package/README.md

@@ -1,3 +1,9 @@
+# version 0.0.601
+- Se arregló un error en el checkout (`dataform-ec.component.ts`), que se intentaba agregar el código de la primera provincia, sin verificar que existieran provincias.
+# version 0.0.600
+- Se implementa la validación de documentos según el tipo seleccionado en el formulario de checkout.
+- Se agrega la lógica en `dataform-ec.component.ts` para establecer patrones de validación dinámicos de acuerdo con el tipo de documento.
+- Se obtiene el tipo de documento seleccionado y se aplica la validación correspondiente.
 # version 0.0.599
 - Traducciónes en español e ingles para los errores de codigo postal.
 # version 0.0.598

package/assets/ec-i18n/ct.json

@@ -130,6 +130,14 @@
      "state-help": "La província és requerida",
      "postal-code": "Codi postal",
      "postal-code-help": "El codi postal és requerit",
+     "postal-code-pattern-error": {
+        "numeric": "El codi postal ha de contenir només dígits numèrics.",
+        "default": "Format de codi postal invàlid."
+     },
+     "document-pattern-error": {
+        "numeric": "El número de document ha de contenir només dígits numèrics.",
+        "default": "Format de número de document invàlid."
+    },
      "profile": "Perfil",
      "account-info": "Informació de compte",
      "address-book": "directori",

package/assets/ec-i18n/en.json

@@ -228,14 +228,12 @@
 	"postal-code": "Postal Code",
 	"postal-code-help": "Postalcode is required",
     "postal-code-pattern-error": {
-        "ar": "The postal code in Argentina must have 4 numeric digits.",
-        "uy": "The postal code in Uruguay must have 5 numeric digits.",
-        "gb": "The postal code in the UK must follow the format SW1A 1AA.",
-        "es": "The postal code in Spain must have 5 numeric digits.",
-        "br": "The postal code in Brazil must follow the format 00000-000.",
-        "fr": "The postal code in France must have 5 numeric digits.",
-        "pt": "The postal code in Portugal must follow the format 0000-000.",
+        "numeric": "The postal code must contain only numeric digits.",
         "default": "Invalid postal code format."
+    },
+    "document-pattern-error": {
+        "numeric": "The document number must contain only numeric digits.",
+        "default": "Invalid document number format."
     },
 	"precious-jewellery": "precious jewellery",
 	"price": "Price",

package/assets/ec-i18n/es.json

@@ -230,14 +230,12 @@
     "postal-code": "Código postal",
     "postal-code-help": "El código postal es requerido",
     "postal-code-pattern-error": {
-        "ar": "El código postal en Argentina debe tener 4 dígitos numéricos.",
-        "uy": "El código postal en Uruguay debe tener 5 dígitos numéricos.",
-        "gb": "El código postal en Reino Unido debe seguir el formato SW1A 1AA.",
-        "es": "El código postal en España debe tener 5 dígitos numéricos.",
-        "br": "El código postal en Brasil debe seguir el formato 00000-000.",
-        "fr": "El código postal en Francia debe tener 5 dígitos numéricos.",
-        "pt": "El código postal en Portugal debe seguir el formato 0000-000.",
-        "default": "El formato del código postal es inválido."
+        "numeric": "El código postal debe contener solo dígitos numéricos.",
+        "default": "Formato de código postal inválido."
+    },
+    "document-pattern-error": {
+        "numeric": "El documento debe contener solo dígitos numéricos.",
+        "default": "Formato de documento inválido."
     },
     "precious-jewellery": "Joyería preciosa",
     "price": "Precio",

package/assets/ec-i18n/fr.json

@@ -128,6 +128,14 @@
      "state-help": "State is required",
      "postal-code": "Postal Code",
      "postal-code-help": "Postalcode is required",
+     "postal-code-pattern-error": {
+        "numeric": "Le code postal doit contenir uniquement des chiffres.",
+        "default": "Format de code postal invalide."
+     },
+     "document-pattern-error": {
+        "numeric": "Le document doit contenir uniquement des chiffres.",
+        "default": "Format de document invalide."
+    },
      "profile": "Profil",
      "account-info": "Informations de compte",
      "address-book": "Carnet d'adresses",

package/assets/ec-i18n/gl.json

@@ -130,6 +130,14 @@
      "state-help": "A provincia é necesaria",
      "postal-code": "Código postal",
      "postal-code-help": "O código postal é obrigatorio",
+     "postal-code-pattern-error": {
+        "numeric": "LO código postal debe conter só díxitos numéricos.",
+        "default": "Formato de código postal inválido."
+     },
+     "document-pattern-error": {
+        "numeric": "O número de documento debe conter só díxitos numéricos.",
+        "default": "Formato de documento inválido."
+     },
      "profile": "Perfil",
      "account-info": "Información da conta",
      "address-book": "Directorio",

package/assets/ec-i18n/pr.json

@@ -130,6 +130,14 @@
      "state-help": "A província é obrigatória",
      "postal-code": "Código postal",
      "postal-code-help": "CEP é obrigatório",
+     "postal-code-pattern-error": {
+        "numeric": "O código postal deve conter apenas dígitos numéricos.",
+        "default": "Formato de código postal inválido."
+     },
+     "document-pattern-error": {
+        "numeric": "O documento deve conter apenas dígitos numéricos.",
+        "default": "Formato de documento inválido."
+     },
      "profile": "Perfil",
      "account-info": "Informações da conta",
      "address-book": "Directorio",

package/bundles/ng-easycommerce.umd.js

@@ -8036,6 +8036,9 @@
             _this.params = {};
             _this.selectAddres = false;
             _this.postalCodeErrorMessage = "";
+            _this.postalCodeErrorMessageFacturacion = "";
+            _this.documentErrorMessage = "";
+            _this.documentErrorMessageFacturacion = "";
             /**
              * @description filtra los paises de acuerdo al a los codigos retornados en la funcion getCountries.
              * Casos de usos: Si getCountries es vacio, retorna el arreglo que ingresa por parametro.
@@ -8063,15 +8066,17 @@
                 _this.viewDataFacturacion = !_this.viewDataFacturacion;
                 if (!_this.viewDataFacturacion) {
                     _this.countriesFacturacion$.subscribe(function (res) {
-                        var _a, _b, _c, _d;
+                        var _a, _b, _c, _d, _e;
                         if (res && res.length > 0) {
                             _this.checkoutFormFacturacion.controls['countryCode'].setValue(res[0].code);
+                            _this.updatePostalCodeValidationFacturacion(res[0]);
                             // Provincia
                             _this.checkoutFormFacturacion.controls['provinceCode'].setValue((_a = res[0]) === null || _a === void 0 ? void 0 : _a.provinces[0].code);
                             _this.provincesFacturacionSubject.next((_b = res[0]) === null || _b === void 0 ? void 0 : _b.provinces);
                             // Documento
                             _this.checkoutFormFacturacion.controls['documentType'].setValue((_c = res[0]) === null || _c === void 0 ? void 0 : _c.documentTypes[0].code);
-                            _this.documentTypesFacturacionSubject.next((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes);
+                            _this.updateDocumentValidationFacturacion((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes[0]);
+                            _this.documentTypesFacturacionSubject.next((_e = res[0]) === null || _e === void 0 ? void 0 : _e.documentTypes);
                         }
                     });
                 }
@@ -8087,7 +8092,7 @@
                 _this.checkoutForm.controls['documentType'].setValue('');
                 var selectedCountry = _this.countriesSubject.value.find(function (country) { return country.code == value; });
                 if (selectedCountry) {
-                    _this.updatePostalCodeValidation(selectedCountry.code);
+                    _this.updatePostalCodeValidation(selectedCountry);
                 }
                 //Provinces
                 var provinces = value && value != 'null' ?
@@ -8095,38 +8100,61 @@
                     :
                         [];
                 _this.provincesSubject.next(provinces);
-                _this.checkoutForm.controls['provinceCode'].setValue(provinces[0].code);
+                if (provinces.length) {
+                    _this.checkoutForm.controls['provinceCode'].setValue(provinces[0].code);
+                }
                 //Document types
-                var documentTypes = value && value != 'null' ?
-                    _this.countriesSubject.value.find(function (country) { return country.code == value; }).documentTypes
-                    :
-                        [];
+                var documentTypes = selectedCountry ? selectedCountry.documentTypes : [];
                 _this.documentTypesSubject.next(documentTypes);
-                _this.checkoutForm.controls['documentType'].setValue(documentTypes[0].code);
+                if (documentTypes.length) {
+                    _this.checkoutForm.controls['documentType'].setValue(documentTypes[0].code);
+                }
+                var selectedDocumentType = documentTypes.find(function (doc) { return doc.code == _this.checkoutForm.controls['documentType'].value; });
+                if (selectedDocumentType) {
+                    _this.updateDocumentValidation(selectedDocumentType);
+                }
             };
             _this.onCountrySelectedFacturacion = function (value) {
                 _this.checkoutFormFacturacion.controls['countryCode'].setValue(value == 'null' ? null : value);
                 _this.checkoutFormFacturacion.controls['provinceCode'].setValue(null);
                 _this.checkoutFormFacturacion.controls['documentType'].setValue('');
-                //Provinces
-                var provinces = value && value != 'null' ?
-                    _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; }).provinces
-                    :
-                        [];
+                var selectedCountry = _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; });
+                if (selectedCountry) {
+                    _this.updatePostalCodeValidationFacturacion(selectedCountry);
+                }
+                // Provinces
+                var provinces = selectedCountry ? selectedCountry.provinces : [];
                 _this.provincesFacturacionSubject.next(provinces);
-                _this.checkoutFormFacturacion.controls['provinceCode'].setValue(provinces[0].code);
-                //Document types
-                var documentTypes = value && value != 'null' ?
-                    _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; }).documentTypes
-                    :
-                        [];
+                if (provinces.length) {
+                    _this.checkoutFormFacturacion.controls['provinceCode'].setValue(provinces[0].code);
+                }
+                // Document types
+                var documentTypes = selectedCountry ? selectedCountry.documentTypes : [];
                 _this.documentTypesFacturacionSubject.next(documentTypes);
-                _this.checkoutFormFacturacion.controls['documentType'].setValue(documentTypes[0].code);
+                if (documentTypes.length) {
+                    _this.checkoutFormFacturacion.controls['documentType'].setValue(documentTypes[0].code);
+                }
+                var selectedDocumentType = documentTypes.find(function (doc) { return doc.code == _this.checkoutFormFacturacion.controls['documentType'].value; });
+                if (selectedDocumentType) {
+                    _this.updateDocumentValidationFacturacion(selectedDocumentType);
+                }
             };
             _this.onProvincesSelected = function (value) { return _this.checkoutForm.controls['provinceCode'].setValue(value == 'null' ? null : value); };
             _this.onProvincesSelectedFacturacion = function (value) { return _this.checkoutFormFacturacion.controls['provinceCode'].setValue(value == 'null' ? null : value); };
-            _this.onDocumentTypesSelected = function (value) { return _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value); };
-            _this.onDocumentTypesSelectedFacturacion = function (value) { return _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value); };
+            _this.onDocumentTypesSelected = function (value) {
+                _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value);
+                var selectedDocumentType = _this.documentTypesSubject.value.find(function (doc) { return doc.code == value; });
+                if (selectedDocumentType) {
+                    _this.updateDocumentValidation(selectedDocumentType);
+                }
+            };
+            _this.onDocumentTypesSelectedFacturacion = function (value) {
+                _this.checkoutFormFacturacion.controls['documentType'].setValue(value == '' ? '' : value);
+                var selectedDocumentType = _this.documentTypesFacturacionSubject.value.find(function (doc) { return doc.code == value; });
+                if (selectedDocumentType) {
+                    _this.updateDocumentValidationFacturacion(selectedDocumentType);
+                }
+            };
             _this.verifyValidate = function (e, items) { return __awaiter$9(_this, void 0, void 0, function () {
                 return __generator$9(this, function (_a) {
                     //console.log("Verifying: ", e)
@@ -8300,7 +8328,7 @@
                         var selectedAddress = _this.addressBook.find(function (address) { return address.selected; });
                         if (selectedAddress) {
                             _this.checkoutForm.controls['countryCode'].setValue(selectedAddress.countryCode);
-                            _this.updatePostalCodeValidation(selectedAddress.countryCode);
+                            _this.updatePostalCodeValidation(selectedAddress);
                         }
                     }
                     else {
@@ -8309,16 +8337,17 @@
                 });
             }
             this.countries$.subscribe(function (res) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 if (res && res.length > 0) {
                     _this.checkoutForm.controls['countryCode'].setValue(res[0].code);
-                    _this.updatePostalCodeValidation(res[0].code);
+                    _this.updatePostalCodeValidation(res[0]);
                     // Provincia
                     _this.checkoutForm.controls['provinceCode'].setValue((_a = res[0]) === null || _a === void 0 ? void 0 : _a.provinces[0].code);
                     _this.provincesSubject.next((_b = res[0]) === null || _b === void 0 ? void 0 : _b.provinces);
                     // Documento
                     _this.checkoutForm.controls['documentType'].setValue((_c = res[0]) === null || _c === void 0 ? void 0 : _c.documentTypes[0].code);
-                    _this.documentTypesSubject.next((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes);
+                    _this.updateDocumentValidation((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes[0]);
+                    _this.documentTypesSubject.next((_e = res[0]) === null || _e === void 0 ? void 0 : _e.documentTypes);
                 }
             });
             this.ecOnInit();
@@ -8339,14 +8368,30 @@
         DataFormEcComponent.prototype.openModal = function (template) {
             this.modalRef = this.modalService.show(template, { class: 'modal-lg ', keyboard: false, backdrop: 'static' });
         };
-        DataFormEcComponent.prototype.updatePostalCodeValidation = function (countryCode) {
-            var postalCodeConfig = this.consts.getPostalCodePattern(countryCode) || { pattern: /.*/, errorKey: "postal-code-pattern-error.default" };
-            this.postalCodeErrorMessage = postalCodeConfig.errorKey;
-            this.checkoutForm.controls['postcode'].setValidators([
+        DataFormEcComponent.prototype.updateValidation = function (selectedItem, formControlName, form, errorMessageVar, isNumericKey, errorKeyPrefix) {
+            var _a;
+            if (!selectedItem)
+                return;
+            var isNumeric = (_a = selectedItem[isNumericKey], (_a !== null && _a !== void 0 ? _a : false));
+            var pattern = isNumeric ? /^\d+$/ : /.*/;
+            this[errorMessageVar] = isNumeric ? errorKeyPrefix + ".numeric" : errorKeyPrefix + ".default";
+            form.controls[formControlName].setValidators([
                 forms.Validators.required,
-                forms.Validators.pattern(postalCodeConfig.pattern)
+                forms.Validators.pattern(pattern)
             ]);
-            this.checkoutForm.controls['postcode'].updateValueAndValidity();
+            form.controls[formControlName].updateValueAndValidity();
+        };
+        DataFormEcComponent.prototype.updatePostalCodeValidation = function (selectedCountry) {
+            this.updateValidation(selectedCountry, 'postcode', this.checkoutForm, 'postalCodeErrorMessage', 'isPostalCodeNumeric', 'postal-code-pattern-error');
+        };
+        DataFormEcComponent.prototype.updatePostalCodeValidationFacturacion = function (selectedCountry) {
+            this.updateValidation(selectedCountry, 'postcode', this.checkoutFormFacturacion, 'postalCodeErrorMessageFacturacion', 'isPostalCodeNumeric', 'postal-code-pattern-error');
+        };
+        DataFormEcComponent.prototype.updateDocumentValidation = function (selectedDocumentType) {
+            this.updateValidation(selectedDocumentType, 'documentNumber', this.checkoutForm, 'documentErrorMessage', 'isNumeric', 'document-pattern-error');
+        };
+        DataFormEcComponent.prototype.updateDocumentValidationFacturacion = function (selectedDocumentType) {
+            this.updateValidation(selectedDocumentType, 'documentNumber', this.checkoutFormFacturacion, 'documentErrorMessageFacturacion', 'isNumeric', 'document-pattern-error');
         };
         DataFormEcComponent.prototype.prueba = function (x) {
             console.log(x);
@@ -8374,7 +8419,7 @@
         DataFormEcComponent = __decorate$Q([
             core.Component({
                 selector: 'app-dataform-ec',
-                template: "<ng-container *ngIf=\"this.channelConfig.channelType != 'b2b' || (this.channelConfig.channelType == 'b2b' && authService.isAuthenticated()); else pleaseLogin\">\n<ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null\">\n    <div class=\"container card p-4 mb-3\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-12 col-md-10 col-lg-8 text-center\">\n                <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\n                    <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\n                        <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\n                            (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\n                    </label>\n\n                    <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\" *ngIf=\"!getParamByChannelAndLanguage('btn_new_address_')\">\n                        <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n                        {{ 'new-address' | translate | titlecase}}\n                    </label>\n\n                    <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\" *ngIf=\"getParamByChannelAndLanguage('btn_new_address_') as param\">\n                        <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n                        {{ param.value}}\n                    </label>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"getMode(); else addressSelection\">\n    <div *ngIf=\"!require_login; else requireLoginView\">\n\n        <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_LOAD_ADDRESS'\">\n            <div class=\"checkout-title  my-2\">\n                <h3>{{'billing-details'|translate}}</h3>\n            </div>\n        </ng-container>\n\n        <form (submit)=\"verifyValidate(false,this.cartService.items)\">\n            <div class=\"row mt-df\"><!--Fila 1-->\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n                    <label class=\"field-label\">{{'first-name'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n                            class=\"required\">*</span></label>\n                    <input class=\"form-control\" type=\"text\" name=\"firstName\"\n                        [formControl]=\"checkoutForm.controls['firstName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.required\">\n                        <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.pattern\">\n                        <span class=\"text-danger\">\n                            {{'first-name-help2'|translate}}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n                    <label class=\"field-label\">{{'last-name'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n                            class=\"required\">*</span></label>\n                    <input class=\"form-control\" type=\"text\" name=\"lastName\"\n                        [formControl]=\"checkoutForm.controls['lastName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.required\">\n                        <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.pattern\">\n                        <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row mt-df\"><!--Fila 2-->\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n                    <label class=\"field-label\">{{'phone'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\n                        [formControl]=\"checkoutForm.controls['phoneNumber']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.required\">\n                        <span class=\"text-danger\">\n\n                            {{'phone-help1'|translate}}\n                        </span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.pattern\">\n                        <span class=\"text-danger\">\n                            {{'phone-help2'|translate}}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n                    <label class=\"field-label\">{{'email-address'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n                        [formControl]=\"checkoutForm.controls['email']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.required\">\n                        <span class=\"text-danger\">\n                            {{'email-address-help1'|translate}}\n                        </span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.email\">\n                        <span class=\"text-danger\">\n                            {{'email-address-help2'|translate}}\n                        </span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 3-->\n                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n                    <div class=\"form-group col-12 col-md-4\" *ngIf=\"(countries$ | async) as countries\">\n                        <label class=\"field-label\">{{'country'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n                                class=\"required\">*</span></label>\n                        <select class=\"form-select\" name=\"countryCode\"\n                            [formControl]=\"checkoutForm.controls['countryCode']\"\n                            (change)=\"onCountrySelected($event.target.value)\">\n                          <!--   <option selected [value]=\"countries[0].code\">{{ 'choose-country' | translate }}</option> -->\n                            <option *ngFor=\"let country of countries\" [value]=\"country.code\">{{ country.name }}</option>\n                        </select>\n                        <div *ngIf=\"checkoutForm.controls.countryCode.touched && checkoutForm.controls.countryCode.errors?.required\"\n                            class=\"text text-danger\">\n                            {{'country-help'|translate}}\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n                    <div class=\"form-group col-12 col-md-4\" *ngIf=\"(provinces$ | async) as provinces\">\n                        <label class=\"field-label\">{{'state'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n                                class=\"required\">*</span></label>\n                        <select class=\"form-select\" name=\"provinceCode\"\n                            (change)=\"onProvincesSelected($event.target.value)\"\n                            [formControl]=\"checkoutForm.controls['provinceCode']\">\n<!--                             <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option>\n -->                            <option *ngFor=\"let province of provinces\" [value]=\"province.code\">{{ province.name }}\n                            </option>\n                        </select>\n                        <div *ngIf=\"checkoutForm.controls.provinceCode.touched && checkoutForm.controls.provinceCode.errors?.required\"\n                            class=\"text text-danger\">\n                            {{'state-help'|translate}}\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"form-group col-12 col-md-4\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n                    <label class=\"field-label\">{{'town-city'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n                        [formControl]=\"checkoutForm.controls['city']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.city.touched && checkoutForm.controls.city.errors?.required\">\n                        <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 4-->\n                <div class=\"form-group col-12 col-md-8\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n                    <label class=\"field-label\">{{'address'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n                        [formControl]=\"checkoutForm.controls['street']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.required\">\n                        <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.maxlength\">\n                        <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n                    </div>\n                </div>\n\n                <!-- form direcci\u00F3n -->\n                <div class=\"form-group col-12 col-md-4\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n                    <label class=\"field-label\">{{'postal-code'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n                        [formControl]=\"checkoutForm.controls['postcode']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.required\">\n                        <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.pattern\">\n                        <span class=\"text-danger\"> {{postalCodeErrorMessage | translate}} </span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 5-->\n                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n                    <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypes$ | async) as documentTypes\">\n                        <label class=\"field-label\">{{'document-type'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n                                class=\"required\">*</span></label>\n                        <select name=\"documentType\" class=\"form-select\"\n                            (change)=\"onDocumentTypesSelected($event.target.value)\"\n                            [formControl]=\"checkoutForm.controls['documentType']\">\n<!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\n -->                            <option *ngFor=\"let item of documentTypes\" [value]=\"item.code\">{{item.name}}</option>\n                        </select>\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"checkoutForm.controls.documentType.touched && checkoutForm.controls.documentType.errors?.required\">\n                            <span class=\"text-danger\">\n                                {{'type-document-help'|translate}}\n                            </span>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"form-group col-12 col-md-4\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n                    <label class=\"field-label\">{{'document-number'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\"\n                        [type]=\"'text'\" name=\"documentNumber\"\n                        [formControl]=\"checkoutForm.controls['documentNumber']\" min=\"1\" max=\"99999999999\" value=\"\"\n                        placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.documentNumber.touched && checkoutForm.controls.documentNumber.errors?.required\">\n                        <span class=\"text-danger\">\n                            {{'document-number-help'|translate}}\n                        </span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 6-->\n                <div class=\"form-group col-12 col-md-12\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n\n                    <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                            class=\"required\">*</span></label>\n                    <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"><span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                            class=\"required\">*</span></label>\n\n                    <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                        [formControl]=\"checkoutForm.controls['notes']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                </div>\n            </div>\n            <div class=\"row mt-df\"><!--Fila 7-->\n                <div class=\"form-group col-12 col-md-12\">\n                    <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\n                            class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\n                            id=\"formFact\"></label>\n                </div>\n            </div>\n            <div class=\"row mt-df\">\n                <div class=\"col-12\">\n                    <p>\n                        <!-- <span class=\"required\"></span> -->\n                        <label class=\"required text-underline\">* {{ 'required-fields' | translate }}</label>\n                    </p>\n                </div>\n            </div>\n            <div class=\"row mt-df\">\n                <div class=\"form-group col-12 col-md-12\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.enabled\">\n                    <span *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.required\"\n                        class=\"required\">*</span>\n                    <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\n                            [formControl]=\"checkoutForm.controls['terms']\" type=\"checkbox\" required\n                            (change)=\"onInputChange()\" /> </label><br />\n                    <a (click)=\"openModal(template)\" role=\"button\" class=\"ms-3 nota-input text-dark\">{{ 'whats-this' |\n                        translate }}</a>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.terms.touched && !checkoutForm.controls.terms.value\">\n                        <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\" *ngIf=\"viewDataFacturacion ; else datosFormFacturacion\"> </div>\n            <div class=\"checkout-btn-unique text-end\">\n                <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">\n                    {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n                    'ready-form')) | translate}}</button>\n\n\n            </div>\n            <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                <app-loading-full-ec></app-loading-full-ec>\n            </div>\n        </form>\n    </div>\n</ng-container>\n\n<ng-template #addressSelection>\n\n    <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_ADDRESS_SELECTION'\">\n        <div class=\"checkout-title my-2\">\n            <h3>{{'address-selection'|translate}}</h3>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.addressBook; else addressBookNotResult\">\n\n        <ng-container *ngIf=\"this.addressBook?.length ;else addressBookLoading\">\n            <div class=\"container\">\n                <div class=\"row\">\n                    <div class=\"col-sm-6 col-12 my-3\" *ngFor=\"let item of addressBook; let i = index\">\n                        <div class=\"card p-3\">\n                            <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\n                                [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\n                            <div class=\"ms-5\">\n                                <h4 class=\"card-title\">\n                                    <strong>{{'address'|translate}}</strong><br>\n                                    <span class=\"text-uppercase h3\">{{item.street}}</span>\n                                </h4>\n                                <div class=\"row\">\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\n                                    </h5>\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\n                                    </h5>\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}\n                                    </h5>\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\n                                    </h5>\n                                </div>\n                                <div class=\"row px-3\">\n                                    <div class=\"card p-2 bg-light w-100\">\n                                        <div class=\"card-body\">\n                                            <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'first-name'|translate}}</strong>\n                                                {{item.addressContact.firstName}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'last-name'|translate}}</strong> {{item.addressContact.lastName}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'document-type'|translate}}</strong>\n                                                {{getDocumentType(item.addressContact.documentType)}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'document-number'|translate}}</strong>\n                                                {{item.addressContact.documentNumber}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'email-address'|translate}}</strong> {{item.addressContact.email}}\n                                            </h6>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                </div>\n\n                <div class=\"w-100\">\n                    <div class=\"row mt-df\">\n                        <div class=\"form-group col-12 col-md-12\">\n                            <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}}</label>\n                            <label class=\"field-label\"\n                                *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"></label>\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                                [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\n                                autocomplete=\"off\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"checkout-btn-unique text-end\">\n                    <button (click)=\"selectAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\">\n                        {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n                    'ready-form')) | translate}}\n                    </button>\n                </div>\n                <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-template>\n\n\n<ng-template #requireLoginView>\n    <div id=\"loginCheckout\">\n        <div class=\"d-flex flex-column jusitfy-content-center align-items-center\" *ngIf=\"require_login\">\n            <div class=\"col-12\">\n                <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\n                </app-login-form-ec>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #datosFormFacturacion>\n    <div class=\"container-fluid px-0 px-md-2\">\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"card \">\n                    <div class=\"card-header text-dark text-center\">\n                        <h3>{{'billing-data'|translate}}</h3>\n                    </div>\n                    <div class=\"card-body\">\n                        <form (submit)=\"verifyValidate()\">\n                            <div class=\"row mt-df\">\n                                <!--Fila 1-->\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n                                    <label class=\"field-label\">{{'first-name'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n                                            class=\"required\">*</span></label>\n                                    <input class=\"form-control\" type=\"text\" name=\"firstName\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['firstName']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.required\">\n                                        <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.pattern\">\n                                        <span class=\"text-danger\">\n                                            {{'first-name-help2'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n                                    <label class=\"field-label\">{{'last-name'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n                                            class=\"required\">*</span></label>\n                                    <input class=\"form-control\" type=\"text\" name=\"lastName\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['lastName']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.required\">\n                                        <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.pattern\">\n                                        <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 2-->\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n                                    <label class=\"field-label\">{{'phone'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\"\n                                        name=\"phoneNumber\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['phoneNumber']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'phone-help1'|translate}}\n                                        </span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.pattern\">\n                                        <span class=\"text-danger\">\n                                            {{'phone-help2'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n                                    <label class=\"field-label\">{{'email-address'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['email']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'email-address-help1'|translate}}\n                                        </span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.email\">\n                                        <span class=\"text-danger\">\n                                            {{'email-address-help2'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 3-->\n\n                                <ng-container\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n\n                                    <div class=\"form-group col-12 col-md-4\"\n                                        *ngIf=\"(countriesFacturacion$ | async) as countries\">\n                                        <label class=\"field-label\">{{'country'|translate}}<span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n                                                class=\"required\">*</span></label>\n                                        <select class=\"form-select\" name=\"countryCode\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['countryCode']\"\n                                            (change)=\"onCountrySelectedFacturacion($event.target.value)\">\n                                            <!-- <option selected [value]=\"null\">{{ 'choose-country' | translate }}</option> -->\n                                            <option *ngFor=\"let country of countries\" [value]=\"country.code\">\n                                                {{ country.name }}</option>\n                                        </select>\n                                        <div *ngIf=\"checkoutFormFacturacion.controls.countryCode.touched && checkoutFormFacturacion.controls.countryCode.errors?.required\"\n                                            class=\"text text-danger\">\n                                            {{'country-help'|translate}}\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n\n                                    <div class=\"form-group col-12 col-md-4\"\n                                        *ngIf=\"(provincesFacturacion$ | async) as provinces\">\n                                        <label class=\"field-label\">{{'state'|translate}}<span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n                                                class=\"required\">*</span></label>\n                                        <select class=\"form-select\" name=\"provinceCode\"\n                                            (change)=\"onProvincesSelectedFacturacion($event.target.value)\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['provinceCode']\">\n                                            <!-- <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option> -->\n                                            <option *ngFor=\"let province of provinces\" [value]=\"province.code\">\n                                                {{ province.name }}\n                                            </option>\n                                        </select>\n                                        <div *ngIf=\"checkoutFormFacturacion.controls.provinceCode.touched && checkoutFormFacturacion.controls.provinceCode.errors?.required\"\n                                            class=\"text text-danger\">\n                                            {{'state-help'|translate}}\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <div class=\"form-group col-12 col-md-4\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n                                    <label class=\"field-label\">{{'town-city'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['city']\" value=\"\" placeholder=\"\"\n                                        autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.city.touched && checkoutFormFacturacion.controls.city.errors?.required\">\n                                        <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 4-->\n                                <div class=\"form-group col-12 col-md-8\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n                                    <label class=\"field-label\">{{'address'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['street']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.required\">\n                                        <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.maxlength\">\n                                        <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-4\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n                                    <label class=\"field-label\">{{'postal-code'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['postcode']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.required\">\n                                        <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.pattern\">\n                                        <span class=\"text-danger\">{{postalCodeErrorMessage |translate}}</span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 5-->\n                                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n                                <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n                                    <label class=\"field-label\">{{'document-type'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n                                            class=\"required\">*</span></label>\n                                    <select name=\"documentType\" class=\"form-select\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['documentType']\">\n                                        <!-- <option [value]=\"''\" selected>{{'document-type'|translate}}</option> -->\n                                        <option\n                                            *ngFor=\"let item of documentTypes\"\n                                            [value]=\"item.code\">{{item.name}}</option>\n                                    </select>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.documentType.touched && checkoutFormFacturacion.controls.documentType.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'type-document-help'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-4\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n                                    <label class=\"field-label\">{{'document-number'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\"\n                                        [type]=\"(this.addressingService.typeForms == 'EUR' ? 'text' : 'number') \"\n                                        name=\"documentNumber\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\" min=\"1\"\n                                        max=\"99999999999\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.documentNumber.touched && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'document-number-help'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                </ng-container>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <div class=\"form-group col-12 col-md-12\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n                                    <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                            class=\"required\">*</span></label>\n                                            <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelNotesHtml\">\n                                             <div [innerHTML]=\"labelNotesHtml\"></div>\n                                             <span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span>\n                                           </label>\n\n                                    <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['notes']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #template>\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n            </button>\n        </div>\n    </div>\n\n    <div class=\"modal-body scrol-if\">\n        <app-section-container-ec [name]=\"'terminos-y-condiciones'\"> </app-section-container-ec>\n    </div>\n\n</ng-template>\n\n\n<ng-template #addressBookNotResult>\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-12 text-center my-2\">\n                <h4> {{'address-book-not-result' | translate }} </h4>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #addressBookLoading>\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-12 text-center my-2\">\n                <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n</ng-container>\n\n<ng-template #pleaseLogin>\n    <div class=\"container\">\n        <p>Por favor <a [routerLink]=\"['/auth/login']\" > Inicie Sesi\u00F3n</a></p>\n    </div>\n</ng-template>",
+                template: "<ng-container *ngIf=\"this.channelConfig.channelType != 'b2b' || (this.channelConfig.channelType == 'b2b' && authService.isAuthenticated()); else pleaseLogin\">\n<ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null\">\n    <div class=\"container card p-4 mb-3\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-12 col-md-10 col-lg-8 text-center\">\n                <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\n                    <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\n                        <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\n                            (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\n                    </label>\n\n                    <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\" *ngIf=\"!getParamByChannelAndLanguage('btn_new_address_')\">\n                        <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n                        {{ 'new-address' | translate | titlecase}}\n                    </label>\n\n                    <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\" *ngIf=\"getParamByChannelAndLanguage('btn_new_address_') as param\">\n                        <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n                        {{ param.value}}\n                    </label>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"getMode(); else addressSelection\">\n    <div *ngIf=\"!require_login; else requireLoginView\">\n\n        <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_LOAD_ADDRESS'\">\n            <div class=\"checkout-title  my-2\">\n                <h3>{{'billing-details'|translate}}</h3>\n            </div>\n        </ng-container>\n\n        <form (submit)=\"verifyValidate(false,this.cartService.items)\">\n            <div class=\"row mt-df\"><!--Fila 1-->\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n                    <label class=\"field-label\">{{'first-name'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n                            class=\"required\">*</span></label>\n                    <input class=\"form-control\" type=\"text\" name=\"firstName\"\n                        [formControl]=\"checkoutForm.controls['firstName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.required\">\n                        <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.pattern\">\n                        <span class=\"text-danger\">\n                            {{'first-name-help2'|translate}}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n                    <label class=\"field-label\">{{'last-name'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n                            class=\"required\">*</span></label>\n                    <input class=\"form-control\" type=\"text\" name=\"lastName\"\n                        [formControl]=\"checkoutForm.controls['lastName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.required\">\n                        <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.pattern\">\n                        <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row mt-df\"><!--Fila 2-->\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n                    <label class=\"field-label\">{{'phone'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\n                        [formControl]=\"checkoutForm.controls['phoneNumber']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.required\">\n                        <span class=\"text-danger\">\n\n                            {{'phone-help1'|translate}}\n                        </span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.pattern\">\n                        <span class=\"text-danger\">\n                            {{'phone-help2'|translate}}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"form-group col-12 col-md-6\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n                    <label class=\"field-label\">{{'email-address'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n                        [formControl]=\"checkoutForm.controls['email']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.required\">\n                        <span class=\"text-danger\">\n                            {{'email-address-help1'|translate}}\n                        </span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.email\">\n                        <span class=\"text-danger\">\n                            {{'email-address-help2'|translate}}\n                        </span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 3-->\n                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n                    <div class=\"form-group col-12 col-md-4\" *ngIf=\"(countries$ | async) as countries\">\n                        <label class=\"field-label\">{{'country'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n                                class=\"required\">*</span></label>\n                        <select class=\"form-select\" name=\"countryCode\"\n                            [formControl]=\"checkoutForm.controls['countryCode']\"\n                            (change)=\"onCountrySelected($event.target.value)\">\n                          <!--   <option selected [value]=\"countries[0].code\">{{ 'choose-country' | translate }}</option> -->\n                            <option *ngFor=\"let country of countries\" [value]=\"country.code\">{{ country.name }}</option>\n                        </select>\n                        <div *ngIf=\"checkoutForm.controls.countryCode.touched && checkoutForm.controls.countryCode.errors?.required\"\n                            class=\"text text-danger\">\n                            {{'country-help'|translate}}\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n                    <div class=\"form-group col-12 col-md-4\" *ngIf=\"(provinces$ | async) as provinces\">\n                        <label class=\"field-label\">{{'state'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n                                class=\"required\">*</span></label>\n                        <select class=\"form-select\" name=\"provinceCode\"\n                            (change)=\"onProvincesSelected($event.target.value)\"\n                            [formControl]=\"checkoutForm.controls['provinceCode']\">\n<!--                             <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option>\n -->                            <option *ngFor=\"let province of provinces\" [value]=\"province.code\">{{ province.name }}\n                            </option>\n                        </select>\n                        <div *ngIf=\"checkoutForm.controls.provinceCode.touched && checkoutForm.controls.provinceCode.errors?.required\"\n                            class=\"text text-danger\">\n                            {{'state-help'|translate}}\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"form-group col-12 col-md-4\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n                    <label class=\"field-label\">{{'town-city'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n                        [formControl]=\"checkoutForm.controls['city']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.city.touched && checkoutForm.controls.city.errors?.required\">\n                        <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 4-->\n                <div class=\"form-group col-12 col-md-8\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n                    <label class=\"field-label\">{{'address'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n                        [formControl]=\"checkoutForm.controls['street']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.required\">\n                        <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.maxlength\">\n                        <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n                    </div>\n                </div>\n\n                <!-- form direcci\u00F3n -->\n                <div class=\"form-group col-12 col-md-4\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n                    <label class=\"field-label\">{{'postal-code'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n                        [formControl]=\"checkoutForm.controls['postcode']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.required\">\n                        <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.pattern\">\n                        <span class=\"text-danger\"> {{postalCodeErrorMessage | translate}} </span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 5-->\n                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n                    <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypes$ | async) as documentTypes\">\n                        <label class=\"field-label\">{{'document-type'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n                                class=\"required\">*</span></label>\n                        <select name=\"documentType\" class=\"form-select\"\n                            (change)=\"onDocumentTypesSelected($event.target.value)\"\n                            [formControl]=\"checkoutForm.controls['documentType']\">\n<!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\n -->                            <option *ngFor=\"let item of documentTypes\" [value]=\"item.code\">{{item.name}}</option>\n                        </select>\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"checkoutForm.controls.documentType.touched && checkoutForm.controls.documentType.errors?.required\">\n                            <span class=\"text-danger\">\n                                {{'type-document-help'|translate}}\n                            </span>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"form-group col-12 col-md-4\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n                    <label class=\"field-label\">{{'document-number'|translate}}<span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                            class=\"required\">*</span></label>\n                    <input (change)=\"onInputChange()\" class=\"form-control\"\n                        [type]=\"'text'\" name=\"documentNumber\"\n                        [formControl]=\"checkoutForm.controls['documentNumber']\"\n                        placeholder=\"\" autocomplete=\"off\">\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.documentNumber.touched && checkoutForm.controls.documentNumber.errors?.required\">\n                        <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                    </div>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.documentNumber.touched && checkoutForm.controls.documentNumber.errors?.pattern\">\n                        <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mt-df\"><!--Fila 6-->\n                <div class=\"form-group col-12 col-md-12\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n\n                    <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                            class=\"required\">*</span></label>\n                    <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"><span\n                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                            class=\"required\">*</span></label>\n\n                    <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                        [formControl]=\"checkoutForm.controls['notes']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n                </div>\n            </div>\n            <div class=\"row mt-df\"><!--Fila 7-->\n                <div class=\"form-group col-12 col-md-12\">\n                    <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\n                            class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\n                            id=\"formFact\"></label>\n                </div>\n            </div>\n            <div class=\"row mt-df\">\n                <div class=\"col-12\">\n                    <p>\n                        <!-- <span class=\"required\"></span> -->\n                        <label class=\"required text-underline\">* {{ 'required-fields' | translate }}</label>\n                    </p>\n                </div>\n            </div>\n            <div class=\"row mt-df\">\n                <div class=\"form-group col-12 col-md-12\"\n                    *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.enabled\">\n                    <span *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.required\"\n                        class=\"required\">*</span>\n                    <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\n                            [formControl]=\"checkoutForm.controls['terms']\" type=\"checkbox\" required\n                            (change)=\"onInputChange()\" /> </label><br />\n                    <a (click)=\"openModal(template)\" role=\"button\" class=\"ms-3 nota-input text-dark\">{{ 'whats-this' |\n                        translate }}</a>\n                    <div class=\"text-danger-container\"\n                        *ngIf=\"checkoutForm.controls.terms.touched && !checkoutForm.controls.terms.value\">\n                        <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\" *ngIf=\"viewDataFacturacion ; else datosFormFacturacion\"> </div>\n            <div class=\"checkout-btn-unique text-end\">\n                <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">\n                    {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n                    'ready-form')) | translate}}</button>\n\n\n            </div>\n            <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                <app-loading-full-ec></app-loading-full-ec>\n            </div>\n        </form>\n    </div>\n</ng-container>\n\n<ng-template #addressSelection>\n\n    <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_ADDRESS_SELECTION'\">\n        <div class=\"checkout-title my-2\">\n            <h3>{{'address-selection'|translate}}</h3>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.addressBook; else addressBookNotResult\">\n\n        <ng-container *ngIf=\"this.addressBook?.length ;else addressBookLoading\">\n            <div class=\"container\">\n                <div class=\"row\">\n                    <div class=\"col-sm-6 col-12 my-3\" *ngFor=\"let item of addressBook; let i = index\">\n                        <div class=\"card p-3\">\n                            <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\n                                [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\n                            <div class=\"ms-5\">\n                                <h4 class=\"card-title\">\n                                    <strong>{{'address'|translate}}</strong><br>\n                                    <span class=\"text-uppercase h3\">{{item.street}}</span>\n                                </h4>\n                                <div class=\"row\">\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\n                                    </h5>\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\n                                    </h5>\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}\n                                    </h5>\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\n                                    </h5>\n                                </div>\n                                <div class=\"row px-3\">\n                                    <div class=\"card p-2 bg-light w-100\">\n                                        <div class=\"card-body\">\n                                            <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'first-name'|translate}}</strong>\n                                                {{item.addressContact.firstName}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'last-name'|translate}}</strong> {{item.addressContact.lastName}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'document-type'|translate}}</strong>\n                                                {{getDocumentType(item.addressContact.documentType)}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'document-number'|translate}}</strong>\n                                                {{item.addressContact.documentNumber}}\n                                            </h6>\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\n                                                <strong>{{'email-address'|translate}}</strong> {{item.addressContact.email}}\n                                            </h6>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                </div>\n\n                <div class=\"w-100\">\n                    <div class=\"row mt-df\">\n                        <div class=\"form-group col-12 col-md-12\">\n                            <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}}</label>\n                            <label class=\"field-label\"\n                                *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"></label>\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                                [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\n                                autocomplete=\"off\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"checkout-btn-unique text-end\">\n                    <button (click)=\"selectAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\">\n                        {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n                    'ready-form')) | translate}}\n                    </button>\n                </div>\n                <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-template>\n\n\n<ng-template #requireLoginView>\n    <div id=\"loginCheckout\">\n        <div class=\"d-flex flex-column jusitfy-content-center align-items-center\" *ngIf=\"require_login\">\n            <div class=\"col-12\">\n                <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\n                </app-login-form-ec>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #datosFormFacturacion>\n    <div class=\"container-fluid px-0 px-md-2\">\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"card \">\n                    <div class=\"card-header text-dark text-center\">\n                        <h3>{{'billing-data'|translate}}</h3>\n                    </div>\n                    <div class=\"card-body\">\n                        <form (submit)=\"verifyValidate()\">\n                            <div class=\"row mt-df\">\n                                <!--Fila 1-->\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n                                    <label class=\"field-label\">{{'first-name'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n                                            class=\"required\">*</span></label>\n                                    <input class=\"form-control\" type=\"text\" name=\"firstName\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['firstName']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.required\">\n                                        <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.pattern\">\n                                        <span class=\"text-danger\">\n                                            {{'first-name-help2'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n                                    <label class=\"field-label\">{{'last-name'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n                                            class=\"required\">*</span></label>\n                                    <input class=\"form-control\" type=\"text\" name=\"lastName\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['lastName']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.required\">\n                                        <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.pattern\">\n                                        <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 2-->\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n                                    <label class=\"field-label\">{{'phone'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\"\n                                        name=\"phoneNumber\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['phoneNumber']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'phone-help1'|translate}}\n                                        </span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.pattern\">\n                                        <span class=\"text-danger\">\n                                            {{'phone-help2'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-6\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n                                    <label class=\"field-label\">{{'email-address'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['email']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'email-address-help1'|translate}}\n                                        </span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.email\">\n                                        <span class=\"text-danger\">\n                                            {{'email-address-help2'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 3-->\n\n                                <ng-container\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n\n                                    <div class=\"form-group col-12 col-md-4\"\n                                        *ngIf=\"(countriesFacturacion$ | async) as countries\">\n                                        <label class=\"field-label\">{{'country'|translate}}<span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n                                                class=\"required\">*</span></label>\n                                        <select class=\"form-select\" name=\"countryCode\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['countryCode']\"\n                                            (change)=\"onCountrySelectedFacturacion($event.target.value)\">\n                                            <!-- <option selected [value]=\"null\">{{ 'choose-country' | translate }}</option> -->\n                                            <option *ngFor=\"let country of countries\" [value]=\"country.code\">\n                                                {{ country.name }}</option>\n                                        </select>\n                                        <div *ngIf=\"checkoutFormFacturacion.controls.countryCode.touched && checkoutFormFacturacion.controls.countryCode.errors?.required\"\n                                            class=\"text text-danger\">\n                                            {{'country-help'|translate}}\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n\n                                    <div class=\"form-group col-12 col-md-4\"\n                                        *ngIf=\"(provincesFacturacion$ | async) as provinces\">\n                                        <label class=\"field-label\">{{'state'|translate}}<span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n                                                class=\"required\">*</span></label>\n                                        <select class=\"form-select\" name=\"provinceCode\"\n                                            (change)=\"onProvincesSelectedFacturacion($event.target.value)\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['provinceCode']\">\n                                            <!-- <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option> -->\n                                            <option *ngFor=\"let province of provinces\" [value]=\"province.code\">\n                                                {{ province.name }}\n                                            </option>\n                                        </select>\n                                        <div *ngIf=\"checkoutFormFacturacion.controls.provinceCode.touched && checkoutFormFacturacion.controls.provinceCode.errors?.required\"\n                                            class=\"text text-danger\">\n                                            {{'state-help'|translate}}\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <div class=\"form-group col-12 col-md-4\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n                                    <label class=\"field-label\">{{'town-city'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['city']\" value=\"\" placeholder=\"\"\n                                        autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.city.touched && checkoutFormFacturacion.controls.city.errors?.required\">\n                                        <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 4-->\n                                <div class=\"form-group col-12 col-md-8\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n                                    <label class=\"field-label\">{{'address'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['street']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.required\">\n                                        <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.maxlength\">\n                                        <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-4\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n                                    <label class=\"field-label\">{{'postal-code'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['postcode']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.required\">\n                                        <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.pattern\">\n                                        <span class=\"text-danger\">{{postalCodeErrorMessage |translate}}</span>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <!--Fila 5-->\n                                <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n                                <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n                                    <label class=\"field-label\">{{'document-type'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n                                            class=\"required\">*</span></label>\n                                    <select name=\"documentType\" class=\"form-select\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['documentType']\"\n                                        (change)=\"onDocumentTypesSelectedFacturacion($event.target.value)\">\n                                        <!-- <option [value]=\"''\" selected>{{'document-type'|translate}}</option> -->\n                                        <option\n                                            *ngFor=\"let item of documentTypes\"\n                                            [value]=\"item.code\">{{item.name}}</option>\n                                    </select>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.documentType.touched && checkoutFormFacturacion.controls.documentType.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'type-document-help'|translate}}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"form-group col-12 col-md-4\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n                                    <label class=\"field-label\">{{'document-number'|translate}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                                            class=\"required\">*</span></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\"\n                                    [type]=\"'text'\" name=\"documentNumber\"\n                                    [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                    placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.documentNumber.touched && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                        <span class=\"text-danger\">\n                                            {{'document-number-help'|translate}}\n                                        </span>\n                                    </div>\n                                    <div class=\"text-danger-container\"\n                                        *ngIf=\"checkoutFormFacturacion.controls.documentNumber.touched && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                        <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                    </div>\n                                </div>\n                                </ng-container>\n                            </div>\n                            <div class=\"row mt-df\">\n                                <div class=\"form-group col-12 col-md-12\"\n                                    *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n                                    <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                            class=\"required\">*</span></label>\n                                            <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelNotesHtml\">\n                                             <div [innerHTML]=\"labelNotesHtml\"></div>\n                                             <span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span>\n                                           </label>\n\n                                    <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                                        [formControl]=\"checkoutFormFacturacion.controls['notes']\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #template>\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n            </button>\n        </div>\n    </div>\n\n    <div class=\"modal-body scrol-if\">\n        <app-section-container-ec [name]=\"'terminos-y-condiciones'\"> </app-section-container-ec>\n    </div>\n\n</ng-template>\n\n\n<ng-template #addressBookNotResult>\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-12 text-center my-2\">\n                <h4> {{'address-book-not-result' | translate }} </h4>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #addressBookLoading>\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-12 text-center my-2\">\n                <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n</ng-container>\n\n<ng-template #pleaseLogin>\n    <div class=\"container\">\n        <p>Por favor <a [routerLink]=\"['/auth/login']\" > Inicie Sesi\u00F3n</a></p>\n    </div>\n</ng-template>",
                 providers: [modal.BsModalService],
                 styles: [".mt-df{margin:10px auto 0}.btn.btn-outline-secondary.active,.btn.btn-outline-secondary:hover{color:#fff!important}.required{color:red}.field-label{color:#000}.btn.valid-btn{background-color:#000;color:#fff;margin-right:-3px;margin-bottom:10px}label{color:#000}.input-size-lg{width:1.8rem;height:1.8rem}"]
             })