ng-easycommerce-v18 0.2.0 → 0.2.2

package/fesm2022/ng-easycommerce-v18.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, RendererFactory2, afterNextRender, signal, EnvironmentInjector, runInInjectionContext, Component, ChangeDetectorRef, HostListener, CUSTOM_ELEMENTS_SCHEMA, Input, Pipe, EventEmitter, Output, forwardRef, afterRender, ViewChild, Injector, Renderer2, Directive, Inject } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, RendererFactory2, afterNextRender, signal, EnvironmentInjector, runInInjectionContext, Component, ChangeDetectorRef, HostListener, CUSTOM_ELEMENTS_SCHEMA, Input, Pipe, EventEmitter, Output, forwardRef, afterRender, ViewChild, Injector, computed, Renderer2, ChangeDetectionStrategy, Directive, Inject } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, AsyncPipe, CommonModule, TitleCasePipe, JsonPipe, UpperCasePipe, Location } from '@angular/common';
 import { take, BehaviorSubject, shareReplay, map, catchError, of, filter, ReplaySubject, firstValueFrom, concatMap, throwError, switchMap, combineLatest } from 'rxjs';
@@ -2852,6 +2852,64 @@ class SortFilter extends Filter {
     }
 }
 
+class PriceRangeFilter extends Filter {
+    _loaded = false;
+    minPrice = 0;
+    maxPrice = 0;
+    currentMinPrice = null;
+    currentMaxPrice = null;
+    type = () => 'price_range';
+    /** true cuando ya tengo un rango real */
+    get isLoaded() {
+        return this._loaded;
+    }
+    // Método para configurar el rango de precios inicial
+    setContent = (options) => {
+        if (options.minPrice != null && options.maxPrice != null) {
+            this.minPrice = options.minPrice;
+            this.maxPrice = options.maxPrice;
+            this.currentMinPrice = options.currentMinPrice ?? this.minPrice;
+            this.currentMaxPrice = options.currentMaxPrice ?? this.maxPrice;
+            this._loaded = true;
+        }
+    };
+    updatePrices(min, max) {
+        this.minPrice = min;
+        this.maxPrice = max;
+        if (this.currentMinPrice !== null && (this.currentMinPrice < min || this.currentMinPrice > max)) {
+            this.currentMinPrice = null;
+        }
+        if (this.currentMaxPrice !== null && (this.currentMaxPrice > max || this.currentMaxPrice < min)) {
+            this.currentMaxPrice = null;
+        }
+        this._loaded = true;
+    }
+    // Método para actualizar los valores seleccionados
+    setSelected = (min, max) => {
+        this.currentMinPrice = min !== this.minPrice ? min : null;
+        this.currentMaxPrice = max !== this.maxPrice ? max : null;
+    };
+    // Retorna los valores seleccionados (rango de precios)
+    getSelectedRange = () => ({
+        min: this.currentMinPrice ?? this.minPrice,
+        max: this.currentMaxPrice ?? this.maxPrice
+    });
+    // Genera los parámetros de la URL en base al rango de precios seleccionado
+    toUrlParams = () => {
+        let params = '';
+        if (this.currentMinPrice != null)
+            params += `&price_min=${this.currentMinPrice}`;
+        if (this.currentMaxPrice != null)
+            params += `&price_max=${this.currentMaxPrice}`;
+        return params;
+    };
+    // Restablece el filtro a los valores por defecto
+    reset = () => {
+        this.currentMinPrice = null;
+        this.currentMaxPrice = null;
+    };
+}
+
 class FilterFactory {
     create(filterType, productsFilter) {
         switch (filterType) {
@@ -2863,6 +2921,8 @@ class FilterFactory {
                 return new DynamicsFilter();
             case 'sort':
                 return new SortFilter();
+            case 'price_range':
+                return new PriceRangeFilter();
             default:
                 // console.error('Filter type not recognized:', filterType);
                 throw new Error("Not implemented");
@@ -3490,10 +3550,8 @@ class FiltersService {
             const extra = filter.toUrlParams();
             extra.split('=')[1] != '' ? extra_params += extra : null;
         });
-        console.log("extra_params", search_value);
         if (search_value)
             extra_params += ('&criteria[search][type]=contains&criteria[search][value]=' + search_value);
-        //console.log("extra_params",extra_params);
         return this.productsFilterApi(extra_params);
     }
     isUpdated(paginationSettings) {
@@ -3512,11 +3570,20 @@ class FiltersService {
     setFilters(paginationSettings, search_value) {
         this._paginationSettings = paginationSettings;
         let final_filters = [];
-        if (this._optionsFilters?.includes('all'))
-            this._optionsFilters = ['attributes', 'categories', 'dynamics', 'sort'];
+        let filtersToProcess = this._optionsFilters?.includes('all')
+            ? ['attributes', 'categories', 'dynamics', 'sort', 'price_range']
+            : this._optionsFilters;
         runInInjectionContext(this.environmentInjector, () => {
             const filterFactory = new FilterFactory();
-            this._optionsFilters?.forEach(filter => final_filters.push(filterFactory.create(filter, paginationSettings)));
+            filtersToProcess?.forEach(filterType => {
+                const filter = filterFactory.create(filterType, paginationSettings);
+                if (filter) {
+                    final_filters.push(filter);
+                }
+                else {
+                    // console.warn(`❌ Failed to create filter for type: ${filterType}`);
+                }
+            });
         });
         this._defaultFilters?.forEach(filterDefault => {
             let filter = final_filters.find(filter => filter.type() == filterDefault.filter_type);
@@ -3530,16 +3597,28 @@ class FiltersService {
         this._filtersInitialized = true;
         const settings = paginationSettings || this._paginationSettings;
         let final_filters = [];
-        if (this._optionsFilters?.includes('all'))
-            this._optionsFilters = ['attributes', 'categories', 'dynamics', 'sort'];
+        let filtersToProcess = this._optionsFilters?.includes('all')
+            ? ['attributes', 'categories', 'dynamics', 'sort', 'price_range']
+            : this._optionsFilters;
         runInInjectionContext(this.environmentInjector, () => {
             const filterFactory = new FilterFactory();
-            this._optionsFilters?.forEach(filter => final_filters.push(filterFactory.create(filter, settings)));
+            filtersToProcess?.forEach(filterType => {
+                // console.log('Creating filter for type:', filterType);
+                const filter = filterFactory.create(filterType, settings);
+                // console.log('Created filter:', filter);
+                if (filter) {
+                    final_filters.push(filter);
+                }
+                else {
+                    // console.warn(`Failed to create filter for type: ${filterType}`);
+                }
+            });
         });
         this._defaultFilters?.forEach(filterDefault => {
             let filter = final_filters.find(filter => filter.type() == filterDefault.filter_type);
             filter && filterDefault.codes.forEach(value => filter.setSelected(value));
         });
+        this._filtersSubject.next(final_filters);
         return final_filters;
     }
     getSpecificFilters(types) {
@@ -3548,9 +3627,11 @@ class FiltersService {
     }
     setFilterSelected(filterObj, filterElem) {
         let final_filters = this._filtersSubject.value;
-        let index = final_filters.findIndex(filter => filter.type() == filterObj.type());
-        final_filters[index].setSelected(filterElem, filterElem.value || filterElem.code);
-        console.log(index, final_filters);
+        if (filterObj.type() !== 'price_range') {
+            let index = final_filters.findIndex(filter => filter.type() == filterObj.type());
+            final_filters[index].setSelected(filterElem, filterElem.value || filterElem.code);
+            console.log(index, final_filters);
+        }
         this._filtersSubject.next(final_filters);
         // }
     }
@@ -3573,6 +3654,18 @@ class FiltersService {
             });
         });
     }
+    /**
+     * Actualiza internamente el rango de precio y re-emite
+     * el array de filtros para que PaginationService vuelva a llamar
+     */
+    updatePriceRangeFilter(min, max) {
+        const filters = this._filtersSubject.value;
+        const pr = filters.find(f => f.type() === 'price_range');
+        if (!pr)
+            return;
+        pr.setSelected(min, max);
+        this._filtersSubject.next([...filters]);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FiltersService, providedIn: 'root' });
 }
@@ -3604,7 +3697,9 @@ class PaginationService {
         pages: 0,
         total: 0,
         items: [],
-        called: false
+        called: false,
+        price_max: 0,
+        price_min: 0
     });
     _waiting = false;
     _finished = false;
@@ -3662,10 +3757,10 @@ class PaginationService {
         this._finished = (response.page == response.pages);
         this._waiting = false;
         // Emitir los valores de price_min y price_max a través de priceRangeSubject
-        // this.priceRangeSubject.next({
-        //     price_min: response.price_min,
-        //     price_max: response.price_max
-        // });
+        this.priceRangeSubject.next({
+            price_min: response.price_min,
+            price_max: response.price_max
+        });
     }
     /**
      * Marca el final de las paginas, es decir cuando ya no queda mas elementos que mostrar.
@@ -3721,7 +3816,6 @@ class PaginationService {
      * @returns
      */
     buildUrl(filters) {
-        console.log('entra aqui');
         if (this._constants.searchValue) {
             return this._filtersService.generateFinalApi(this._constants.searchValue);
         }
@@ -3778,9 +3872,22 @@ class ProductsService {
             this._productsSubject.next([...currentProducts, ...products]);
         });
         // Suscribirse a los cambios en el rango de precios
-        // this._paginationService.priceRange$.subscribe(range => {
-        //     this.updatePriceRangeFilter(range.price_min, range.price_max);
-        // });
+        this._paginationService.priceRange$.subscribe(range => {
+            let min = Math.floor(range.price_min);
+            let max = Math.ceil(range.price_max);
+            this.updatePriceRangeFilter(min, max);
+        });
+        this._filtersService.filters$.subscribe(filters => {
+            this.filtersSubject.next(filters);
+        });
+    }
+    updatePriceRangeFilter(min, max) {
+        const final_filters = this.filtersSubject.value;
+        const priceRangeFilter = final_filters.find(filter => filter instanceof PriceRangeFilter);
+        if (priceRangeFilter) {
+            priceRangeFilter.updatePrices(min, max);
+            this.filtersSubject.next(final_filters);
+        }
     }
     //API URL
     _shopApiUrl = this._apiConsts.SHOP_API_URL;
@@ -4548,47 +4655,62 @@ class ProductDetailService {
         this.variants.length > 0 ? this.generateAssociatedDataFromVariants() : this._toastService.show('selection-not-available');
     }
     /**
-     * Actualiza el observable de `associatedData` el cual se utiliza para mostrar los datos
-     * en el frontend segun el producto y/o variante elegida.
-     * Obtiene los datos de la variante y los formatea.
-     */
+ * Actualiza el observable de `associatedData` el cual se utiliza para mostrar los datos
+ * en el frontend según el producto y/o variante elegida.
+ * Obtiene los datos de la variante y los formatea.
+ */
     generateAssociatedDataFromVariants() {
-        let associated = {};
-        if (this.variants.length == 1) {
-            const variant = this.variants[0];
-            console.log(variant);
-            associated.stock = variant.stock;
-            associated.price = variant.price.toString();
-            associated.saleprice = variant.saleprice && variant.saleprice.toString() || undefined;
-            associated.discount = variant?.discount || undefined;
-            associated.properties = variant.properties ? this.beautifyProperties(variant.properties) : undefined;
-            associated.uniqueExternalCode = variant?.uniqueExternalCode || undefined;
-            associated.multipleQuantity = variant?.multipleQuantity || undefined;
+        const associated = {};
+        // Si sólo hay una variante, tomamos todos sus datos directamente
+        if (this.variants.length === 1) {
+            const v = this.variants[0];
+            associated.stock = v.stock;
+            associated.price = v.price.toString();
+            associated.saleprice = v.saleprice != null ? v.saleprice.toString() : undefined;
+            associated.discount = v.discount ?? undefined;
+            associated.properties = v.properties ? this.beautifyProperties(v.properties) : undefined;
+            associated.uniqueExternalCode = v.uniqueExternalCode ?? undefined;
+            associated.multipleQuantity = v.multipleQuantity ?? undefined;
+            // Límites de cantidad/stock
+            associated.maximumAmount = v.maximumAmount ?? 0;
+            associated.minimumAmount = v.minimumAmount ?? 0;
+            associated.maximumItemsQuantity = v.stock > 0 && 'maximumItemsQuantity' in v
+                ? v.maximumItemsQuantity
+                : v.stock;
+            associated.minimumItemsQuantity = v.stock > 0 && 'minimumItemsQuantity' in v && v.minimumItemsQuantity > 0
+                ? v.minimumItemsQuantity
+                : (v.multipleQuantity ?? 1);
+            // Precios al consumidor final
+            associated.finalConsumer = {
+                finalConsumerPrice: v.final_consumer_price,
+                originalFinalConsumerPrice: v.original_final_consumer_price
+            };
+            // Impuestos
+            associated.taxes = {
+                taxIncluded: v.taxIncluded,
+                taxCategory: v.taxCategory
+            };
+            associated.taxeAmount = v.taxes ?? undefined;
+            associated.taxRate = v.taxRate ?? undefined;
+            associated.priceWithoutTaxes = v.priceWithoutTaxes ?? undefined;
         }
         else {
+            // Si hay varias variantes, resumimos
             associated.price = this.createPrice();
             associated.saleprice = this.createSalePrice();
-            associated.stock = (this.variants.map(variant => variant.stock)).reduce((a, b) => a + b);
+            associated.stock = this.variants.map(v => v.stock).reduce((a, b) => a + b, 0);
             associated.discount = this.createDiscount();
         }
-        ('images' in this.variants[0] && this.variants[0].images.length > 0)
-            ? associated.picture = this.variants[0].images[0]
-            : associated.picture = (this._associatedDataSubject.value?.picture || (this._productSubject.value && this._productSubject.value?.picturesdefault?.[0] || []));
-        associated.maximumAmount = this.variants[0]?.maximumAmount || 0;
-        associated.minimumAmount = this.variants[0]?.minimumAmount || 0;
-        associated.maximumItemsQuantity = this.variants[0]?.stock > 0 && 'maximumItemsQuantity' in this.variants[0] ? this.variants[0]?.maximumItemsQuantity : this.variants[0]?.stock;
-        associated.minimumItemsQuantity = this.variants[0]?.stock > 0 && 'minimumItemsQuantity' in this.variants[0]
-            && this.variants[0]?.minimumItemsQuantity > 0 ? this.variants[0]?.minimumItemsQuantity
-            : (this.variants[0]?.multipleQuantity ? this.variants[0]?.multipleQuantity : 1);
-        associated.finalConsumer = {
-            finalConsumerPrice: this.variants[0]?.final_consumer_price,
-            originalFinalConsumerPrice: this.variants[0]?.original_final_consumer_price,
-        };
-        associated.taxes = {
-            taxIncluded: this.variants[0]?.taxIncluded,
-            taxCategory: this.variants[0]?.taxCategory,
-        };
-        //console.log(associated)
+        // Imagen principal
+        const first = this.variants[0];
+        if ('images' in first && first.images.length > 0) {
+            associated.picture = first.images[0];
+        }
+        else {
+            associated.picture = this._associatedDataSubject.value?.picture
+                ?? this._productSubject.value?.picturesdefault?.[0];
+        }
+        // Emitimos el objeto completo
         this._associatedDataSubject.next(associated);
     }
     /**
@@ -6195,24 +6317,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Componente para manejar la vista del precio de un producto.
  */
 class PriceEcComponent {
-    /**
-     * Precio de un producto.
-     */
+    // Precios
     price;
-    /**
-     * Precio de venta de un producto.
-     */
     saleprice;
+    basePrice;
+    taxeAmount;
+    taxes = { Name: '', taxeAmount: 0 };
+    // Opciones
+    priceSize = false;
+    showTaxLegendOnly = false;
+    disableTaxInfo = false;
+    // Templates personalizados (proyección)
+    customPriceTemplate = null;
+    customSalePriceTemplate = null;
+    customSimplePriceTemplate = null;
+    customSimpleSalePriceTemplate = null;
+    customTaxTemplate = null;
+    customOnlyTaxLabelTemplate = null;
+    _channelService = inject(ChannelService);
+    showTaxLegend = false;
+    hideTaxes = false;
+    ngOnInit() {
+        this._channelService.channel$.subscribe(cfg => {
+            this.showTaxLegend = !!cfg.showTaxLegend;
+            this.hideTaxes = !!cfg.hideTaxes;
+        });
+    }
+    /** Determina si mostrar la sección de impuestos */
+    get shouldShowTaxes() {
+        return !this.disableTaxInfo
+            && this.showTaxLegend
+            && !this.hideTaxes
+            && !!this.basePrice
+            && !!this.taxeAmount;
+    }
+    /** Clase CSS base según tamaño */
+    get priceClass() {
+        return this.priceSize ? 'price-sm' : 'price';
+    }
+    /** Helper para detectar rangos */
+    hasRange(value) {
+        return !!value && value.split(' - ').length === 2;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PriceEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PriceEcComponent, isStandalone: true, selector: "app-price-ec", inputs: { price: "price", saleprice: "saleprice" }, ngImport: i0, template: " <div class=\"price\">\r\n    @if(saleprice){\r\n    <!--With saleprice-->\r\n \r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price-whithSaleprice\">\r\n            <del class=\"\">\r\n                {{ price.split(' - ')[0] | ecCurrencySymbol }}\r\n                {{ price.split(' - ')[1] | ecCurrencySymbol }}\r\n            </del>\r\n        </div>\r\n    }@else {\r\n        <!--Simple Price Del-->\r\n        <div class=\"price-simpleDel\">\r\n            <del class=\"\">\r\n                {{ price | ecCurrencySymbol }}</del>\r\n        </div>\r\n    }\r\n    @if(saleprice && saleprice.split(' - ').length > 1){\r\n        <div class=\"\">\r\n            {{\r\n            saleprice.split(' - ')[0] | ecCurrencySymbol\r\n            }}\r\n            {{\r\n            saleprice.split(' - ')[1] | ecCurrencySymbol\r\n            }}\r\n        </div>\r\n    } @else {\r\n        <!--Simple saleprice-->\r\n        <div class=\"price-simpleSaleprice\">\r\n            {{ saleprice | ecCurrencySymbol }}\r\n       </div>\r\n    }\r\n\r\n}@else {\r\n    <!--Only Price-->\r\n\r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price-onlyPrice\">\r\n            {{ price.split(' - ')[0] | ecCurrencySymbol }} -\r\n            {{ price.split(' - ')[1] | ecCurrencySymbol }}\r\n        </div> \r\n    } @else {\r\n        <!--Simple price-->\r\n        <del>&nbsp;</del>\r\n        <div class=\"price-simplePrice\">\r\n            {{ price | ecCurrencySymbol }}\r\n        </div>\r\n    }\r\n}\r\n</div>  ", styles: [""], dependencies: [{ kind: "pipe", type: EcCurrencySymbolPipe, name: "ecCurrencySymbol" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PriceEcComponent, isStandalone: true, selector: "app-price-ec", inputs: { price: "price", saleprice: "saleprice", basePrice: "basePrice", taxeAmount: "taxeAmount", taxes: "taxes", priceSize: "priceSize", showTaxLegendOnly: "showTaxLegendOnly", disableTaxInfo: "disableTaxInfo", customPriceTemplate: "customPriceTemplate", customSalePriceTemplate: "customSalePriceTemplate", customSimplePriceTemplate: "customSimplePriceTemplate", customSimpleSalePriceTemplate: "customSimpleSalePriceTemplate", customTaxTemplate: "customTaxTemplate", customOnlyTaxLabelTemplate: "customOnlyTaxLabelTemplate" }, ngImport: i0, template: "<ng-container *ngIf=\"customSalePriceTemplate || customPriceTemplate; else defaultPriceBlock\">\r\n    <ng-container *ngTemplateOutlet=\"customSalePriceTemplate || customPriceTemplate\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #defaultPriceBlock>\r\n    <div class=\"price\">\r\n        <!-- Con precio de oferta -->\r\n        <div *ngIf=\"saleprice; else onlyPriceBlock\" class=\"line-height-custom\">\r\n\r\n            <!-- Precio original como rango o tachado simple -->\r\n            <div *ngIf=\"hasRange(price); else simplePriceDel\" class=\"price-whithSaleprice\">\r\n                <del class=\"\">\r\n                    {{\r\n                    price!.split(' - ')[0] | ecCurrencySymbol\r\n                    }}\r\n                    {{\r\n                    price!.split(' - ')[1] | ecCurrencySymbol\r\n                    }}\r\n                </del>\r\n            </div>\r\n\r\n            <!-- Oferta como rango o simple -->\r\n            <div *ngIf=\"hasRange(saleprice); else simpleSalePrice\" class=\"\">\r\n                {{\r\n                saleprice!.split(' - ')[0] | ecCurrencySymbol\r\n                }}\r\n                {{\r\n                saleprice!.split(' - ')[1] | ecCurrencySymbol\r\n                }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- S\u00F3lo precio sin oferta -->\r\n        <ng-template #onlyPriceBlock>\r\n            <div *ngIf=\"hasRange(price); else simplePrice\" class=\"price-onlyPrice\">\r\n                {{\r\n                price!.split(' - ')[0] | ecCurrencySymbol\r\n                }} -\r\n                {{\r\n                price!.split(' - ')[1] | ecCurrencySymbol\r\n                }}\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- Fallback simple price -->\r\n        <ng-template #simplePrice>\r\n            <ng-container *ngIf=\"customSimplePriceTemplate; else fallbackSimplePrice\">\r\n                <ng-container *ngTemplateOutlet=\"customSimplePriceTemplate\"></ng-container>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #fallbackSimplePrice>\r\n            <del>&nbsp;</del>\r\n            <div class=\"price-simplePrice\">\r\n                {{ price | ecCurrencySymbol }}\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- Fallback simple price-del -->\r\n        <ng-template #simplePriceDel>\r\n            <div class=\"price-simpleDel\">\r\n                <del class=\"\">{{ price | ecCurrencySymbol }}</del>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- Fallback simple saleprice -->\r\n        <ng-template #simpleSalePrice>\r\n            <ng-container *ngIf=\"customSimpleSalePriceTemplate; else fallbackSimpleSalePrice\">\r\n                <ng-container *ngTemplateOutlet=\"customSimpleSalePriceTemplate\"></ng-container>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #fallbackSimpleSalePrice>\r\n            <div class=\"price-simpleSaleprice\">\r\n                {{ saleprice | ecCurrencySymbol }}\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Secci\u00F3n de impuestos -->\r\n<ng-container *ngIf=\"shouldShowTaxes\">\r\n    <!-- S\u00F3lo leyenda -->\r\n    <ng-container *ngIf=\"showTaxLegendOnly; else detailedTaxBlock\">\r\n        <ng-container *ngIf=\"customOnlyTaxLabelTemplate; else defaultOnlyTaxLabel\">\r\n            <ng-container *ngTemplateOutlet=\"customOnlyTaxLabelTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultOnlyTaxLabel>\r\n            <p class=\"taxes-title\">\r\n                {{ 'price-without-national-taxes' | translate }}:\r\n                {{ basePrice! | ecCurrencySymbol }}\r\n            </p>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- Detalle impuestos -->\r\n    <ng-template #detailedTaxBlock>\r\n        <ng-container *ngIf=\"customTaxTemplate; else defaultTaxBlock\">\r\n            <ng-container *ngTemplateOutlet=\"customTaxTemplate\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n\r\n<ng-template #defaultTaxBlock>\r\n    <div class=\"taxes-section\">\r\n        <p class=\"taxes-title\">\r\n            {{ 'price-without-national-taxes' | translate }}:\r\n            {{ basePrice! | ecCurrencySymbol }}\r\n        </p>\r\n        <ul class=\"taxes-list\">\r\n            <li>\r\n                {{ taxes.Name }}: {{ taxeAmount | ecCurrencySymbol }}\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-template>", styles: [".price-sm{font-size:13px}.price{font-size:18px}.line-height-custom{line-height:1.2}.lnth{text-decoration:line-through;color:gray}.taxes-section{margin-top:.5rem;border-radius:.5rem;font-size:.95rem;color:#333;line-height:1.4;max-width:400px}.taxes-title{font-weight:500;margin-bottom:.2rem;font-size:.7rem;color:#222}.taxes-list{list-style:none;padding:0;margin:0}.taxes-list li{display:flex;justify-content:space-between;margin-bottom:.1rem;font-size:.65rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: EcCurrencySymbolPipe, name: "ecCurrencySymbol" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PriceEcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-price-ec', standalone: true, imports: [EcCurrencySymbolPipe], template: " <div class=\"price\">\r\n    @if(saleprice){\r\n    <!--With saleprice-->\r\n \r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price-whithSaleprice\">\r\n            <del class=\"\">\r\n                {{ price.split(' - ')[0] | ecCurrencySymbol }}\r\n                {{ price.split(' - ')[1] | ecCurrencySymbol }}\r\n            </del>\r\n        </div>\r\n    }@else {\r\n        <!--Simple Price Del-->\r\n        <div class=\"price-simpleDel\">\r\n            <del class=\"\">\r\n                {{ price | ecCurrencySymbol }}</del>\r\n        </div>\r\n    }\r\n    @if(saleprice && saleprice.split(' - ').length > 1){\r\n        <div class=\"\">\r\n            {{\r\n            saleprice.split(' - ')[0] | ecCurrencySymbol\r\n            }}\r\n            {{\r\n            saleprice.split(' - ')[1] | ecCurrencySymbol\r\n            }}\r\n        </div>\r\n    } @else {\r\n        <!--Simple saleprice-->\r\n        <div class=\"price-simpleSaleprice\">\r\n            {{ saleprice | ecCurrencySymbol }}\r\n       </div>\r\n    }\r\n\r\n}@else {\r\n    <!--Only Price-->\r\n\r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price-onlyPrice\">\r\n            {{ price.split(' - ')[0] | ecCurrencySymbol }} -\r\n            {{ price.split(' - ')[1] | ecCurrencySymbol }}\r\n        </div> \r\n    } @else {\r\n        <!--Simple price-->\r\n        <del>&nbsp;</del>\r\n        <div class=\"price-simplePrice\">\r\n            {{ price | ecCurrencySymbol }}\r\n        </div>\r\n    }\r\n}\r\n</div>  " }]
+            args: [{ selector: 'app-price-ec', standalone: true, imports: [CommonModule, EcCurrencySymbolPipe, TranslateModule], template: "<ng-container *ngIf=\"customSalePriceTemplate || customPriceTemplate; else defaultPriceBlock\">\r\n    <ng-container *ngTemplateOutlet=\"customSalePriceTemplate || customPriceTemplate\">\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #defaultPriceBlock>\r\n    <div class=\"price\">\r\n        <!-- Con precio de oferta -->\r\n        <div *ngIf=\"saleprice; else onlyPriceBlock\" class=\"line-height-custom\">\r\n\r\n            <!-- Precio original como rango o tachado simple -->\r\n            <div *ngIf=\"hasRange(price); else simplePriceDel\" class=\"price-whithSaleprice\">\r\n                <del class=\"\">\r\n                    {{\r\n                    price!.split(' - ')[0] | ecCurrencySymbol\r\n                    }}\r\n                    {{\r\n                    price!.split(' - ')[1] | ecCurrencySymbol\r\n                    }}\r\n                </del>\r\n            </div>\r\n\r\n            <!-- Oferta como rango o simple -->\r\n            <div *ngIf=\"hasRange(saleprice); else simpleSalePrice\" class=\"\">\r\n                {{\r\n                saleprice!.split(' - ')[0] | ecCurrencySymbol\r\n                }}\r\n                {{\r\n                saleprice!.split(' - ')[1] | ecCurrencySymbol\r\n                }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- S\u00F3lo precio sin oferta -->\r\n        <ng-template #onlyPriceBlock>\r\n            <div *ngIf=\"hasRange(price); else simplePrice\" class=\"price-onlyPrice\">\r\n                {{\r\n                price!.split(' - ')[0] | ecCurrencySymbol\r\n                }} -\r\n                {{\r\n                price!.split(' - ')[1] | ecCurrencySymbol\r\n                }}\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- Fallback simple price -->\r\n        <ng-template #simplePrice>\r\n            <ng-container *ngIf=\"customSimplePriceTemplate; else fallbackSimplePrice\">\r\n                <ng-container *ngTemplateOutlet=\"customSimplePriceTemplate\"></ng-container>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #fallbackSimplePrice>\r\n            <del>&nbsp;</del>\r\n            <div class=\"price-simplePrice\">\r\n                {{ price | ecCurrencySymbol }}\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- Fallback simple price-del -->\r\n        <ng-template #simplePriceDel>\r\n            <div class=\"price-simpleDel\">\r\n                <del class=\"\">{{ price | ecCurrencySymbol }}</del>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- Fallback simple saleprice -->\r\n        <ng-template #simpleSalePrice>\r\n            <ng-container *ngIf=\"customSimpleSalePriceTemplate; else fallbackSimpleSalePrice\">\r\n                <ng-container *ngTemplateOutlet=\"customSimpleSalePriceTemplate\"></ng-container>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #fallbackSimpleSalePrice>\r\n            <div class=\"price-simpleSaleprice\">\r\n                {{ saleprice | ecCurrencySymbol }}\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Secci\u00F3n de impuestos -->\r\n<ng-container *ngIf=\"shouldShowTaxes\">\r\n    <!-- S\u00F3lo leyenda -->\r\n    <ng-container *ngIf=\"showTaxLegendOnly; else detailedTaxBlock\">\r\n        <ng-container *ngIf=\"customOnlyTaxLabelTemplate; else defaultOnlyTaxLabel\">\r\n            <ng-container *ngTemplateOutlet=\"customOnlyTaxLabelTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultOnlyTaxLabel>\r\n            <p class=\"taxes-title\">\r\n                {{ 'price-without-national-taxes' | translate }}:\r\n                {{ basePrice! | ecCurrencySymbol }}\r\n            </p>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- Detalle impuestos -->\r\n    <ng-template #detailedTaxBlock>\r\n        <ng-container *ngIf=\"customTaxTemplate; else defaultTaxBlock\">\r\n            <ng-container *ngTemplateOutlet=\"customTaxTemplate\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n\r\n<ng-template #defaultTaxBlock>\r\n    <div class=\"taxes-section\">\r\n        <p class=\"taxes-title\">\r\n            {{ 'price-without-national-taxes' | translate }}:\r\n            {{ basePrice! | ecCurrencySymbol }}\r\n        </p>\r\n        <ul class=\"taxes-list\">\r\n            <li>\r\n                {{ taxes.Name }}: {{ taxeAmount | ecCurrencySymbol }}\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-template>", styles: [".price-sm{font-size:13px}.price{font-size:18px}.line-height-custom{line-height:1.2}.lnth{text-decoration:line-through;color:gray}.taxes-section{margin-top:.5rem;border-radius:.5rem;font-size:.95rem;color:#333;line-height:1.4;max-width:400px}.taxes-title{font-weight:500;margin-bottom:.2rem;font-size:.7rem;color:#222}.taxes-list{list-style:none;padding:0;margin:0}.taxes-list li{display:flex;justify-content:space-between;margin-bottom:.1rem;font-size:.65rem}\n"] }]
         }], propDecorators: { price: [{
                 type: Input
             }], saleprice: [{
                 type: Input
+            }], basePrice: [{
+                type: Input
+            }], taxeAmount: [{
+                type: Input
+            }], taxes: [{
+                type: Input
+            }], priceSize: [{
+                type: Input
+            }], showTaxLegendOnly: [{
+                type: Input
+            }], disableTaxInfo: [{
+                type: Input
+            }], customPriceTemplate: [{
+                type: Input
+            }], customSalePriceTemplate: [{
+                type: Input
+            }], customSimplePriceTemplate: [{
+                type: Input
+            }], customSimpleSalePriceTemplate: [{
+                type: Input
+            }], customTaxTemplate: [{
+                type: Input
+            }], customOnlyTaxLabelTemplate: [{
+                type: Input
             }] } });
 
 /**
@@ -6254,8 +6434,22 @@ class ProductEcComponent {
     get hasDiscount() {
         return this.product.saleprice && this.product.saleprice !== this.product.price;
     }
+    get discountPercentage() {
+        if (!this.hasDiscount) {
+            return null;
+        }
+        const originalPrice = parseFloat(this.product.price?.toString() || '0');
+        const salePrice = parseFloat(this.product.saleprice?.toString() || '0');
+        // Validar que los precios sean válidos
+        if (originalPrice <= 0 || salePrice <= 0 || salePrice >= originalPrice) {
+            return null;
+        }
+        // Calcular el porcentaje: ((precio_original - precio_oferta) / precio_original) * 100
+        const discount = ((originalPrice - salePrice) / originalPrice) * 100;
+        return Math.round(discount);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProductEcComponent, isStandalone: true, selector: "app-product-ec", inputs: { product: "product", isProductBox: "isProductBox", isCollection: "isCollection" }, outputs: { loaded: "loaded" }, ngImport: i0, template: "<a [routerLink]=\"['/product', product.id]\" class=\"text-decoration-none producto\">\r\n    <!-- Marca especial y descuento -->\r\n    <!-- <div *ngIf=\"product.saleprice || (product.special_mark && product.special_mark !== null && product.special_mark !== undefined && product.special_mark.length >0)\"\r\n        class=\"marcas\">\r\n        <div *ecProductStock=\"product\" [ecProductMini]=\"product.special_mark\"></div>\r\n        <ng-container *ngIf=\"shouldShowPrice\">\r\n            <div *ecProductStock=\"product\" [ngClass]=\"{'tag-dsc float-right': product.saleprice}\"\r\n                [ecProductOff]=\"product\">\r\n            </div>\r\n        </ng-container>\r\n    </div> -->\r\n\r\n    <!-- Imagen del producto -->\r\n    <div class=\"foto\">\r\n        @if(product.picturesdefault){\r\n        @if (product.picturesdefault && product.picturesdefault.length > 1 ) {\r\n        <img [src]=\"mediaUrl + product.picturesdefault[0]\" alt=\"Imagen principal\" class=\"w-100 pic01\" />\r\n        <img [src]=\"mediaUrl + product.picturesdefault[1]\" alt=\"Imagen secundaria\" class=\"w-100 pic02\" />\r\n        } @else {\r\n        <img [src]=\"mediaUrl + product.picturesdefault[0]\" alt=\"Imagen principal\" class=\"w-100 pic01\" />\r\n        }\r\n        }\r\n    </div>\r\n    <!-- Precio -->\r\n\r\n\r\n    <!-- Nombre del producto -->\r\n    <h6 class=\"title\">{{ product.name | titlecase }}</h6>\r\n\r\n    <div class=\"sku\" [innerHTML]=\"product.shortdetails\"></div>\r\n\r\n    @if (shouldShowPrice) {\r\n    <app-price-ec [price]=\"product.price\" [saleprice]=\"product.saleprice\" class=\"\" />\r\n    }\r\n\r\n    <div class=\"fixBottom\">\r\n\r\n        <!-- Bot\u00F3n de acciones -->\r\n        <!-- <ng-container *ecProductStock=\"product; else noStock\"> -->\r\n        <!-- Cuando no tiene marca especial o es de tipo 'standard' -->\r\n        @if (!product.special_mark || product.special_mark.length === 0 || product.special_mark[0]?.type ===\r\n        'standard') {\r\n        <button class=\"btn standard\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            <ng-container *ngIf=\"isCollection; else normalText\">\r\n                <span> {{(\"buy\" | translate) | uppercase}} </span>\r\n            </ng-container>\r\n            <ng-template #normalText>\r\n                {{(\"buy\" | translate) | uppercase}}\r\n            </ng-template>\r\n        </button>\r\n        }@else {\r\n        <!-- Caso 1: Agotado o Disponible muy pronto -->\r\n        @if (product.special_mark[0]?.type === 'out_of_stock' || product.special_mark[0]?.type === 'coming_soon') {\r\n        <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            @if(isCollection){\r\n            <span>{{ product.special_mark[0].name | uppercase }} </span>\r\n            }@else {\r\n            {{ product.special_mark[0]?.name | uppercase }}\r\n            }\r\n        </button>}\r\n        <!-- Caso 2: Contacto por WhatsApp -->\r\n        @if (product.special_mark[0].type === 'whatsapp_contact') {\r\n        <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\"\r\n            (click)=\"openWhatsApp(product.special_mark[0]?.whatsappContact)\">\r\n            @if(isCollection){\r\n            <span>{{ product.special_mark[0]?.name | uppercase }}</span>\r\n            }@else {\r\n            {{ product.special_mark[0]?.name | uppercase }}\r\n            }\r\n\r\n        </button>\r\n        }\r\n        <!-- Caso 3: Solicitar m\u00E1s informaci\u00F3n -->\r\n        @if (product.special_mark[0]?.type === 'more_info') {\r\n        <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            @if(isCollection){\r\n            <span>{{ product.special_mark[0]?.name | uppercase }}</span>\r\n            }@else {\r\n            {{ product.special_mark[0]?.name | uppercase }}\r\n            }\r\n        </button>\r\n    }\r\n        }\r\n    </div>\r\n</a>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "component", type: PriceEcComponent, selector: "app-price-ec", inputs: ["price", "saleprice"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProductEcComponent, isStandalone: true, selector: "app-product-ec", inputs: { product: "product", isProductBox: "isProductBox", isCollection: "isCollection" }, outputs: { loaded: "loaded" }, ngImport: i0, template: "<a [routerLink]=\"['/product', product.id]\" class=\"text-decoration-none producto\">\r\n    <!-- Marca especial y descuento -->\r\n    <!-- <div *ngIf=\"product.saleprice || (product.special_mark && product.special_mark !== null && product.special_mark !== undefined && product.special_mark.length >0)\"\r\n        class=\"marcas\">\r\n        <div *ecProductStock=\"product\" [ecProductMini]=\"product.special_mark\"></div>\r\n        <ng-container *ngIf=\"shouldShowPrice\">\r\n            <div *ecProductStock=\"product\" [ngClass]=\"{'tag-dsc float-right': product.saleprice}\"\r\n                [ecProductOff]=\"product\">\r\n            </div>\r\n        </ng-container>\r\n    </div> -->\r\n\r\n    <!-- Imagen del producto -->\r\n    <div class=\"foto\">\r\n        @if(product.picturesdefault){\r\n        @if (product.picturesdefault && product.picturesdefault.length > 1 ) {\r\n        <img [src]=\"mediaUrl + product.picturesdefault[0]\" alt=\"Imagen principal\" class=\"w-100 pic01\" />\r\n        <img [src]=\"mediaUrl + product.picturesdefault[1]\" alt=\"Imagen secundaria\" class=\"w-100 pic02\" />\r\n        } @else {\r\n        <img [src]=\"mediaUrl + product.picturesdefault[0]\" alt=\"Imagen principal\" class=\"w-100 pic01\" />\r\n        }\r\n        }\r\n    </div>\r\n    <!-- Precio -->\r\n\r\n\r\n    <!-- Nombre del producto -->\r\n    <h6 class=\"title\">{{ product.name | titlecase }}</h6>\r\n\r\n    <div class=\"sku\" [innerHTML]=\"product.shortdetails\"></div>\r\n\r\n    @if (shouldShowPrice) {\r\n    <app-price-ec [price]=\"product.price\" [saleprice]=\"product.saleprice\" class=\"\" />\r\n    }\r\n\r\n    <div class=\"fixBottom\">\r\n\r\n        <!-- Bot\u00F3n de acciones -->\r\n        <!-- <ng-container *ecProductStock=\"product; else noStock\"> -->\r\n        <!-- Cuando no tiene marca especial o es de tipo 'standard' -->\r\n        @if (!product.special_mark || product.special_mark.length === 0 || product.special_mark[0]?.type ===\r\n        'standard') {\r\n        <button class=\"btn standard\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            <ng-container *ngIf=\"isCollection; else normalText\">\r\n                <span> {{(\"buy\" | translate) | uppercase}} </span>\r\n            </ng-container>\r\n            <ng-template #normalText>\r\n                {{(\"buy\" | translate) | uppercase}}\r\n            </ng-template>\r\n        </button>\r\n        }@else {\r\n        <!-- Caso 1: Agotado o Disponible muy pronto -->\r\n        @if (product.special_mark[0]?.type === 'out_of_stock' || product.special_mark[0]?.type === 'coming_soon') {\r\n        <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            @if(isCollection){\r\n            <span>{{ product.special_mark[0].name | uppercase }} </span>\r\n            }@else {\r\n            {{ product.special_mark[0]?.name | uppercase }}\r\n            }\r\n        </button>}\r\n        <!-- Caso 2: Contacto por WhatsApp -->\r\n        @if (product.special_mark[0].type === 'whatsapp_contact') {\r\n        <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\"\r\n            (click)=\"openWhatsApp(product.special_mark[0]?.whatsappContact)\">\r\n            @if(isCollection){\r\n            <span>{{ product.special_mark[0]?.name | uppercase }}</span>\r\n            }@else {\r\n            {{ product.special_mark[0]?.name | uppercase }}\r\n            }\r\n\r\n        </button>\r\n        }\r\n        <!-- Caso 3: Solicitar m\u00E1s informaci\u00F3n -->\r\n        @if (product.special_mark[0]?.type === 'more_info') {\r\n        <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            @if(isCollection){\r\n            <span>{{ product.special_mark[0]?.name | uppercase }}</span>\r\n            }@else {\r\n            {{ product.special_mark[0]?.name | uppercase }}\r\n            }\r\n        </button>\r\n    }\r\n        }\r\n    </div>\r\n</a>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "component", type: PriceEcComponent, selector: "app-price-ec", inputs: ["price", "saleprice", "basePrice", "taxeAmount", "taxes", "priceSize", "showTaxLegendOnly", "disableTaxInfo", "customPriceTemplate", "customSalePriceTemplate", "customSimplePriceTemplate", "customSimpleSalePriceTemplate", "customTaxTemplate", "customOnlyTaxLabelTemplate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductEcComponent, decorators: [{
             type: Component,
@@ -6380,8 +6574,9 @@ class BlockProductsEcComponent extends BlockEcComponent {
             slidesPerGroup: 1, // Importante: moverse de uno en uno
             navigation: false, // Deshabilitamos la navegación por defecto
             pagination: false,
-            loop: false,
+            loop: true,
             grabCursor: true,
+            autoplay: true,
             breakpoints: {
                 320: {
                     slidesPerView: 1,
@@ -7045,10 +7240,6 @@ class CollectionEcComponent {
                     type: params['type'] || null,
                     value: params['value'] || null
                 };
-                //console.log(ready,"actualizar")
-                console.log(paginationSettings);
-                /* console.log(paginationSettings) */
-                // console.log('params',queryParams["search"])
                 this._productsService.getProductsForFilter(paginationSettings, queryParams["search"]);
             }
         });
@@ -7194,11 +7385,11 @@ class LoginFormEcComponent {
             : this._router.navigateByUrl(this.redirectTo);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginFormEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LoginFormEcComponent, isStandalone: true, selector: "app-login-form-ec", inputs: { redirect: "redirect", redirectTo: "redirectTo", inCart: "inCart" }, outputs: { ready: "ready" }, ngImport: i0, template: "<div class=\"d-flex flex-column position-relative\">\r\n    <h1 class=\"right-line ff-ubuntu-light mb-2\"><span>Ingresar</span></h1>\r\n    <p class=\"ff-ubuntu-light font-sm pr-4\">\r\n        Si ya est\u00E1s registrado. Ingresa en tu cuenta con tu email y la\r\n        contrase\u00F1a adecuada.\r\n    </p>\r\n    <div class=\"w-md-50 w-100 text-center\">\r\n        <form [formGroup]=\"loginForm()\" (submit)=\"login($event)\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"email\" formControlName=\"username\"\r\n                placeholder=\"Correo Electr\u00F3nico\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"password\" formControlName=\"password\"\r\n                placeholder=\"Contrase\u00F1a\">\r\n\r\n            <div class=\"row d-flex flex-column\">\r\n                <div class=\"col-12\">\r\n                    <button type=\"submit\"\r\n                        class=\"bg-gray border-0 px-4 py-2 color-white ff-ubuntu-light\">INGRESAR</button>\r\n                </div>\r\n                <div class=\"col-12 d-flex justify-content-center align-items-center\">\r\n                    <a [routerLink]=\"'/auth/forgot-password'\" class=\"font-md ff-ubuntu-light\">\r\n                        \u00BFOlvid\u00F3 su contrase\u00F1a?\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    @if(loading){\r\n    <app-loading-section-ec></app-loading-section-ec>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: LoadingSectionEcComponent, selector: "app-loading-section-ec" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LoginFormEcComponent, isStandalone: true, selector: "app-login-form-ec", inputs: { redirect: "redirect", redirectTo: "redirectTo", inCart: "inCart" }, outputs: { ready: "ready" }, ngImport: i0, template: "<div class=\"d-flex flex-column position-relative\">\r\n    <h1 class=\"right-line ff-ubuntu-light mb-4\"><span>Ingresar</span></h1>\r\n    <p class=\"ff-ubuntu-light font-sm pr-4 mb-4\">\r\n        Si ya est\u00E1s registrado. Ingresa en tu cuenta con tu email y la\r\n        contrase\u00F1a adecuada.\r\n    </p>\r\n    <div class=\"w-md-50 w-100 text-center\">\r\n        <form [formGroup]=\"loginForm()\" (submit)=\"login($event)\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"email\" formControlName=\"username\"\r\n                placeholder=\"Correo Electr\u00F3nico\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"password\" formControlName=\"password\"\r\n                placeholder=\"Contrase\u00F1a\">\r\n\r\n            <div class=\"row d-flex flex-column\">\r\n                <div class=\"col-12 mb-4\">\r\n                    <button type=\"submit\"\r\n                        class=\"bg-gray border-0 px-4 py-2 color-white ff-ubuntu-light\">INGRESAR</button>\r\n                </div>\r\n                <div class=\"col-12 d-flex justify-content-center align-items-center\">\r\n                    <a [routerLink]=\"'/auth/forgot-password'\" class=\"font-md ff-ubuntu-light\">\r\n                        \u00BFOlvid\u00F3 su contrase\u00F1a?\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    @if(loading){\r\n    <app-loading-section-ec></app-loading-section-ec>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: LoadingSectionEcComponent, selector: "app-loading-section-ec" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginFormEcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-login-form-ec', standalone: true, imports: [LoadingSectionEcComponent, ReactiveFormsModule, RouterLink, JsonPipe], template: "<div class=\"d-flex flex-column position-relative\">\r\n    <h1 class=\"right-line ff-ubuntu-light mb-2\"><span>Ingresar</span></h1>\r\n    <p class=\"ff-ubuntu-light font-sm pr-4\">\r\n        Si ya est\u00E1s registrado. Ingresa en tu cuenta con tu email y la\r\n        contrase\u00F1a adecuada.\r\n    </p>\r\n    <div class=\"w-md-50 w-100 text-center\">\r\n        <form [formGroup]=\"loginForm()\" (submit)=\"login($event)\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"email\" formControlName=\"username\"\r\n                placeholder=\"Correo Electr\u00F3nico\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"password\" formControlName=\"password\"\r\n                placeholder=\"Contrase\u00F1a\">\r\n\r\n            <div class=\"row d-flex flex-column\">\r\n                <div class=\"col-12\">\r\n                    <button type=\"submit\"\r\n                        class=\"bg-gray border-0 px-4 py-2 color-white ff-ubuntu-light\">INGRESAR</button>\r\n                </div>\r\n                <div class=\"col-12 d-flex justify-content-center align-items-center\">\r\n                    <a [routerLink]=\"'/auth/forgot-password'\" class=\"font-md ff-ubuntu-light\">\r\n                        \u00BFOlvid\u00F3 su contrase\u00F1a?\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    @if(loading){\r\n    <app-loading-section-ec></app-loading-section-ec>\r\n    }\r\n</div>" }]
+            args: [{ selector: 'app-login-form-ec', standalone: true, imports: [LoadingSectionEcComponent, ReactiveFormsModule, RouterLink, JsonPipe], template: "<div class=\"d-flex flex-column position-relative\">\r\n    <h1 class=\"right-line ff-ubuntu-light mb-4\"><span>Ingresar</span></h1>\r\n    <p class=\"ff-ubuntu-light font-sm pr-4 mb-4\">\r\n        Si ya est\u00E1s registrado. Ingresa en tu cuenta con tu email y la\r\n        contrase\u00F1a adecuada.\r\n    </p>\r\n    <div class=\"w-md-50 w-100 text-center\">\r\n        <form [formGroup]=\"loginForm()\" (submit)=\"login($event)\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"email\" formControlName=\"username\"\r\n                placeholder=\"Correo Electr\u00F3nico\">\r\n            <input class=\"form-control mb-4 radius-0\" type=\"password\" formControlName=\"password\"\r\n                placeholder=\"Contrase\u00F1a\">\r\n\r\n            <div class=\"row d-flex flex-column\">\r\n                <div class=\"col-12 mb-4\">\r\n                    <button type=\"submit\"\r\n                        class=\"bg-gray border-0 px-4 py-2 color-white ff-ubuntu-light\">INGRESAR</button>\r\n                </div>\r\n                <div class=\"col-12 d-flex justify-content-center align-items-center\">\r\n                    <a [routerLink]=\"'/auth/forgot-password'\" class=\"font-md ff-ubuntu-light\">\r\n                        \u00BFOlvid\u00F3 su contrase\u00F1a?\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    @if(loading){\r\n    <app-loading-section-ec></app-loading-section-ec>\r\n    }\r\n</div>" }]
         }], propDecorators: { redirect: [{
                 type: Input
             }], redirectTo: [{
@@ -7646,9 +7837,8 @@ class FiltersEcComponent {
     filters = [];
     filter$ = this._filtersService.filters$;
     setSelect;
-    rangeMinRef;
-    rangeMaxRef;
-    priceGapPercentage = 0.1;
+    ngOnInit() {
+    }
     constructor() {
         this._filtersService.filters$.subscribe((filters) => {
             this.filters = filters;
@@ -7656,7 +7846,7 @@ class FiltersEcComponent {
     }
     getSpecificFilter(type) {
         const filter = this.filters.find(f => f.type() === type);
-        if (!(filter instanceof Filter)) {
+        if (type === 'price_range' && filter && !(filter instanceof Filter)) {
             console.error(`Expected a Filter instance but got`, filter);
         }
         return filter || null;
@@ -7680,8 +7870,6 @@ class FiltersEcComponent {
             console.error('filter.setSelected is not a function. Filter might not be an instance of the expected class:', filter);
             return;
         }
-        console.log("Setting selected filter:", filter);
-        console.log("Setting selected element:", selected);
         try {
             // this._filtersService.setFilterSelected(filter, selected);
             if (selected.path) {
@@ -7692,33 +7880,12 @@ class FiltersEcComponent {
             console.error("Error while setting selected filter:", error);
         }
     }
-    /**
-    * Redondea al múltiplo de 'step' respetando el redondeo entero:
-    * - Mínimo: redondea hacia abajo.
-    * - Máximo: redondea hacia arriba.
-    */
-    onRangeChange(event, type, filter) {
-        const input = event.target;
-        let value = parseInt(input.value, 10);
-        value = this.roundToNearest(value, 5, type, filter);
-        this.updateFilterPrices(type, value, filter, this.priceGapPercentage);
-    }
-    roundToNearest(value, step, type, filter) {
-        let rounded = Math.round(value / step) * step;
-        if (type === 'max' && rounded < filter.maxPrice) {
-            rounded = Math.ceil(value / step) * step;
-        }
-        if (type === 'min' && rounded > filter.minPrice) {
-            rounded = Math.floor(value / step) * step;
-        }
-        return rounded;
-    }
     uniqueSelection(filter, filterChild) {
         // Buscar si hay un filtro de tipo PriceRangeFilter en la lista de filtros
-        // const priceRangeFilter = this.filters.find(f => f instanceof PriceRangeFilter);
-        // if (priceRangeFilter) {
-        // 	priceRangeFilter.reset();
-        // }
+        const priceRangeFilter = this.filters.find(f => f instanceof PriceRangeFilter);
+        if (priceRangeFilter) {
+            priceRangeFilter.reset();
+        }
         filter.data.forEach(filterElement => {
             if (filterElement.selected) {
                 filterElement.selected = false;
@@ -7730,75 +7897,45 @@ class FiltersEcComponent {
             });
         });
     }
-    /**
-   * Actualiza los valores del filtro permitiendo que un input empuje al otro.
-  */
-    updateFilterPrices(type, value, filter, priceGap) {
-        const globalMin = filter.minPrice ?? 0;
-        const globalMax = filter.maxPrice;
-        let currentMin = filter.currentMinPrice ?? globalMin;
-        let currentMax = filter.currentMaxPrice ?? globalMax;
-        if (type === 'min') {
-            let newMin = Math.min(Math.max(value, globalMin), globalMax);
-            if (newMin + priceGap > currentMax) {
-                let newMaxCandidate = newMin + priceGap;
-                if (newMaxCandidate <= globalMax) {
-                    currentMax = newMaxCandidate;
-                }
-                else {
-                    newMin = globalMax - priceGap;
-                }
-            }
-            filter.currentMinPrice = newMin;
-            filter.currentMaxPrice = currentMax;
-        }
-        else if (type === 'max') {
-            let newMax = Math.max(Math.min(value, globalMax), globalMin);
-            if (newMax - priceGap < currentMin) {
-                let newMinCandidate = newMax - priceGap;
-                if (newMinCandidate >= globalMin) {
-                    currentMin = newMinCandidate;
-                }
-                else {
-                    newMax = globalMin + priceGap;
-                }
-            }
-            filter.currentMaxPrice = newMax;
-            filter.currentMinPrice = currentMin;
-        }
-    }
-    // Método para actualizar los valores de precio seleccionados
-    // updatePriceRange(min: number, max: number, priceFilter: PriceRangeFilter) {
-    // 	priceFilter.setSelected(min, max);
-    // 	this.setSelect(priceFilter);
-    // }
-    // Métodos para actualizar la barra del filtro por precio
-    calculateLeftPercentage(currentMinPrice, minPrice, maxPrice) {
-        const minVal = Math.max(minPrice, Math.min(currentMinPrice ?? minPrice, maxPrice));
-        return Math.max(0, Math.min(((minVal - minPrice) / (maxPrice - minPrice)) * 100, 100));
-    }
-    calculateRightPercentage(currentMaxPrice, minPrice, maxPrice) {
-        const maxVal = Math.max(minPrice, Math.min(currentMaxPrice ?? maxPrice, maxPrice));
-        return Math.max(0, Math.min(100 - ((maxVal - minPrice) / (maxPrice - minPrice)) * 100, 100));
-    }
+    //  close = () => {
+    //       this.document.getElementById("filtros").classList.remove('in');
+    //       return true;
+    //  };
+    close = () => {
+        // this.consts.mobile()
+        //      ? this.document.getElementById("accordionExample").classList.remove('show')
+        //      : this.document.getElementById(accordion_id).classList.remove('show');
+        return true;
+    };
     scrollUp = () => {
         window.scroll(0, 0);
         return true;
     };
+    hasAppliedFilters() {
+        return this.filters?.some((filter) => {
+            if (filter.type?.() === 'price_range') {
+                const minSet = filter.currentMinPrice !== null && filter.currentMinPrice !== 0;
+                const maxSet = filter.currentMaxPrice !== null && filter.currentMaxPrice !== filter.maxPrice;
+                if (minSet || maxSet) {
+                    return true;
+                }
+            }
+            return filter.data?.some((filterElement) => {
+                if (Array.isArray(filterElement.children)) {
+                    return filterElement.children.some((child) => child.selected);
+                }
+                return filterElement.selected;
+            });
+        }) ?? false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FiltersEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FiltersEcComponent, isStandalone: true, selector: "lib-filters-ec", inputs: { setSelect: "setSelect" }, viewQueries: [{ propertyName: "rangeMinRef", first: true, predicate: ["rangeMin"], descendants: true }, { propertyName: "rangeMaxRef", first: true, predicate: ["rangeMax"], descendants: true }], ngImport: i0, template: "<p>filters-ec works!</p>\r\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FiltersEcComponent, isStandalone: true, selector: "lib-filters-ec", inputs: { setSelect: "setSelect" }, ngImport: i0, template: "<p>filters-ec works!</p>\r\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FiltersEcComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-filters-ec', standalone: true, imports: [], template: "<p>filters-ec works!</p>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { setSelect: [{
                 type: Input
-            }], rangeMinRef: [{
-                type: ViewChild,
-                args: ['rangeMin']
-            }], rangeMaxRef: [{
-                type: ViewChild,
-                args: ['rangeMax']
             }] } });
 
 class ProductDetailEcComponent {
@@ -7826,9 +7963,12 @@ class ProductDetailEcComponent {
     success = false;
     categories = [];
     quantity = signal(1);
+    isAddingToCart = signal(false);
     parameters$ = this.parametersService.getParameters();
     hasParams = this.parametersService.hasParams;
     creditAccountShowPrices = null;
+    // Agregar esta propiedad al inicio de la clase
+    productSignal = signal(null);
     constructor() {
         this._activedRoute.params.subscribe(queryParams => {
             this.code = queryParams["id"];
@@ -7847,6 +7987,9 @@ class ProductDetailEcComponent {
         this._cartService.showPrice$.subscribe((showPrice) => {
             this.creditAccountShowPrices = showPrice;
         });
+        this.product$.subscribe(product => {
+            this.productSignal.set(product);
+        });
     }
     ngOnInit() {
         this.product$.subscribe(product => {
@@ -7874,7 +8017,13 @@ class ProductDetailEcComponent {
         return this._domSanitizer.bypassSecurityTrustHtml(decodedHtml);
     }
     addToCart() {
-        this.quantity() > 0 && this._productDetailService.addToCart(this.quantity());
+        if (this.isAddingToCart() || this.quantity() <= 0)
+            return;
+        this.isAddingToCart.set(true);
+        this._productDetailService.addToCart(this.quantity());
+        setTimeout(() => {
+            this.isAddingToCart.set(false);
+        }, 2000);
     }
     plus(stock, multipleQuantity) {
         if (multipleQuantity && multipleQuantity > 0) {
@@ -7915,6 +8064,30 @@ class ProductDetailEcComponent {
         this.reset = !this.reset;
         this.success = true;
     };
+    // Computed signals más eficientes
+    hasDiscount = computed(() => {
+        const product = this.productSignal();
+        if (!product?.saleprice || !product?.price) {
+            return false;
+        }
+        const originalPrice = parseFloat(product.price.toString());
+        const salePrice = parseFloat(product.saleprice.toString());
+        return salePrice > 0 && originalPrice > salePrice;
+    });
+    discountPercentage = computed(() => {
+        if (!this.hasDiscount())
+            return null;
+        const product = this.productSignal();
+        if (!product)
+            return null;
+        const originalPrice = parseFloat(product.price?.toString() || '0');
+        const salePrice = parseFloat(product.saleprice?.toString() || '0');
+        if (originalPrice <= 0 || salePrice <= 0 || salePrice >= originalPrice) {
+            return null;
+        }
+        const discount = ((originalPrice - salePrice) / originalPrice) * 100;
+        return Math.round(discount);
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDetailEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDetailEcComponent, isStandalone: true, selector: "app-product-detail-ec", ngImport: i0, template: "", styles: [""] });
 }
@@ -8007,6 +8180,14 @@ class CartEcComponent {
             return false;
         }
     };
+    returnBooleanMinimumAmount = (value) => {
+        if (value >= this.getMinimumPurchaseAmount()) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartEcComponent, isStandalone: true, selector: "lib-cart-ec", ngImport: i0, template: "<p>cart-ec works!</p>\r\n", styles: [""] });
 }
@@ -8158,11 +8339,11 @@ class CouponEcComponent {
     }
     setLoading = () => this.loading = true;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CouponEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CouponEcComponent, isStandalone: true, selector: "app-coupon-ec", ngImport: i0, template: "<div class=\"border border-bottom card p-2\">\r\n    <p class=\"w-100 mb-1\">C\u00F3digo de descuento</p>\r\n    \r\n    @if(coupon$ | async; as coupon){\r\n        <div class=\"d-flex justify-content-between align-items-center px-1\">\r\n        <p class=\"m-0\">{{coupon.code | uppercase}}</p>\r\n        <button class=\"btn\" (click)=\"removeCoupon()\"><i class=\"bi bi-trash\"></i></button>\r\n        </div>\r\n    }@else {\r\n       <form class=\"campo d-flex align-items-center\">\r\n        <input type='text' class=\"elcampo\" [(ngModel)]=\"couponValue\" name=\"coupon_value\" />\r\n        <input type='button'  value='VALIDAR' class=\"btn btn-primary btnSend py-1\"\r\n            (click)=\" addCoupon()\" />\r\n    </form> \r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CouponEcComponent, isStandalone: true, selector: "app-coupon-ec", ngImport: i0, template: "<div class=\"border border-bottom card p-2\">\r\n    <p class=\"w-100 mb-1\">C\u00F3digo de descuento</p>\r\n    \r\n    @if(coupon$ | async; as coupon){\r\n        <div class=\"d-flex justify-content-between align-items-center px-1\">\r\n        <p class=\"m-0\">{{coupon.code}}</p>\r\n        <button class=\"btn\" (click)=\"removeCoupon()\"><i class=\"bi bi-trash\"></i></button>\r\n        </div>\r\n    }@else {\r\n       <form class=\"campo d-flex align-items-center\">\r\n        <input type='text' class=\"elcampo\" [(ngModel)]=\"couponValue\" name=\"coupon_value\" />\r\n        <input type='button'  value='VALIDAR' class=\"btn btn-primary btnSend py-1\"\r\n            (click)=\" addCoupon()\" />\r\n    </form> \r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CouponEcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-coupon-ec', standalone: true, imports: [AsyncPipe, FormsModule, UpperCasePipe], template: "<div class=\"border border-bottom card p-2\">\r\n    <p class=\"w-100 mb-1\">C\u00F3digo de descuento</p>\r\n    \r\n    @if(coupon$ | async; as coupon){\r\n        <div class=\"d-flex justify-content-between align-items-center px-1\">\r\n        <p class=\"m-0\">{{coupon.code | uppercase}}</p>\r\n        <button class=\"btn\" (click)=\"removeCoupon()\"><i class=\"bi bi-trash\"></i></button>\r\n        </div>\r\n    }@else {\r\n       <form class=\"campo d-flex align-items-center\">\r\n        <input type='text' class=\"elcampo\" [(ngModel)]=\"couponValue\" name=\"coupon_value\" />\r\n        <input type='button'  value='VALIDAR' class=\"btn btn-primary btnSend py-1\"\r\n            (click)=\" addCoupon()\" />\r\n    </form> \r\n    }\r\n</div>" }]
+            args: [{ selector: 'app-coupon-ec', standalone: true, imports: [AsyncPipe, FormsModule, UpperCasePipe], template: "<div class=\"border border-bottom card p-2\">\r\n    <p class=\"w-100 mb-1\">C\u00F3digo de descuento</p>\r\n    \r\n    @if(coupon$ | async; as coupon){\r\n        <div class=\"d-flex justify-content-between align-items-center px-1\">\r\n        <p class=\"m-0\">{{coupon.code}}</p>\r\n        <button class=\"btn\" (click)=\"removeCoupon()\"><i class=\"bi bi-trash\"></i></button>\r\n        </div>\r\n    }@else {\r\n       <form class=\"campo d-flex align-items-center\">\r\n        <input type='text' class=\"elcampo\" [(ngModel)]=\"couponValue\" name=\"coupon_value\" />\r\n        <input type='button'  value='VALIDAR' class=\"btn btn-primary btnSend py-1\"\r\n            (click)=\" addCoupon()\" />\r\n    </form> \r\n    }\r\n</div>" }]
         }] });
 
 class ContactEcComponent {
@@ -8259,6 +8440,27 @@ class DataformEcComponent {
                 this.addressBook = res && res || null;
                 this.addressBook == null && this.setMode('carga');
             }).catch(err => console.error(err.error.message));
+        // Para formulario principal
+        this.countries$.subscribe(countries => {
+            if (countries && countries.length > 0) {
+                this.setDefaultCountry(countries[0], false);
+            }
+        });
+    }
+    setDefaultCountry(country, isBilling = false) {
+        const form = isBilling ? this.checkoutFormFacturacion : this.checkoutForm;
+        const currentCountry = form.get('countryCode')?.value;
+        if (!currentCountry) {
+            console.log('Setting default country:', country.name);
+            form.patchValue({
+                countryCode: country.code
+            });
+            // Cargar provincias automáticamente
+            const fakeEvent = {
+                target: { value: country.code }
+            };
+            this.onCountrySelected(fakeEvent, isBilling);
+        }
     }
     isAuthenticated() {
         return this._authService.isAuthenticated();
@@ -8429,7 +8631,7 @@ class DataformEcComponent {
         this._checkoutService.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataformEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DataformEcComponent, isStandalone: true, selector: "app-dataform-ec", ngImport: i0, template: "@if(channel$ | async; as channelConfig){\r\n    @if(channelConfig.channelType != 'b2b' || (channelConfig.channelType == 'b2b' && isAuthenticated())){\r\n        @if( modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && isAuthenticated() && this.addressBook != null){\r\n            <!--Selector de modos-->\r\n            <div class=\"container card p-4 mb-3\">\r\n                <div class=\"row justify-content-center\">\r\n                    <div class=\"col-12 col-md-10 col-lg-8 text-center\">\r\n                        <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\r\n                                    (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\r\n                            </label>\r\n                            @if(!getParamByChannelAndLanguage('btn_new_address_')){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ 'new-address' | translate | titlecase}}\r\n                            </label>\r\n                            }\r\n                            @if(getParamByChannelAndLanguage('btn_new_address_'); as param){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ param.value}}\r\n                            </label>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if(getMode()){\r\n            @if(!require_login){\r\n            <div>\r\n                @if(modeSelectAddress == 'ONLY_LOAD_ADDRESS'){\r\n                    <div class=\"checkout-title  my-2\">\r\n                        <h3>{{'billing-details'|translate}}</h3>\r\n                    </div>\r\n                }\r\n                <!--Formulario-->\r\n                <form [formGroup]=\"checkoutForm\" (submit)=\"verifyValidate($event)\"> <!-- //this.cartService.items -->\r\n                    <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                        @if(getTypeForm().viewForms.firstName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <!--Si es required-->\r\n                            <label class=\"form-label\">{{'first-name'|translate}}\r\n                                @if(getTypeForm().viewForms.firstName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <!--Input-->\r\n                            <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            <!--Error info-->\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'first-name-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.lastName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'last-name'|translate}}\r\n                                @if(getTypeForm().viewForms.lastName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['lastName'].touched &&\r\n                            checkoutForm.controls['lastName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['lastName'].touched && checkoutForm.controls['lastName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 2-->\r\n                        @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'phone'|translate}}\r\n                                @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.email.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'email-address'|translate}}\r\n                                @if(getTypeForm().viewForms.email.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['email']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 3-->\r\n                        @if(getTypeForm().viewForms.countryCode.enabled){\r\n                        @if(countries$ | async; as countries){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'country'|translate}}\r\n                                @if(getTypeForm().viewForms.countryCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                (change)=\"onCountrySelected($event)\">\r\n                                @for(country of countries; track $index){\r\n                                <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['countryCode'].touched &&\r\n                            checkoutForm.controls['countryCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'country-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                        @if(provinces$ | async; as provinces){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'state'|translate}}\r\n                                @if(getTypeForm().viewForms.provinceCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"provinceCode\" (change)=\"onProvincesSelected($event, provinces)\"\r\n                                formControlName='provinceCode'>\r\n                                @for(province of provinces; track $index){\r\n                                <option [value]=\"province.code\">{{ province.name }}\r\n                                </option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['provinceCode'].touched &&\r\n                            checkoutForm.controls['provinceCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'state-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.city.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'town-city'|translate}}\r\n                                @if(getTypeForm().viewForms.city.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\" formControlName='city'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['city'].touched && checkoutForm.controls['city'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 4-->\r\n                        @if(getTypeForm().viewForms.street.enabled){\r\n                        <div class=\"form-group col-12 col-md-8\">\r\n                            <label class=\"field-label\">{{'address'|translate}}\r\n                                @if(getTypeForm().viewForms.street.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['maxlength']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n\r\n                        <!-- form direcci\u00F3n -->\r\n                        @if(getTypeForm().viewForms.postcode.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                @if(getTypeForm().viewForms.postcode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['postcode'].touched &&\r\n                            checkoutForm.controls['postcode'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['postcode'].touched && checkoutForm.controls['postcode'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 5-->\r\n                        @if(getTypeForm().viewForms.documentType.enabled){\r\n                        @if(documentTypes$ | async; as documentTypes){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-type'|translate}}\r\n                                @if(getTypeForm().viewForms.documentType.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event)\"\r\n                                formControlName='documentType'>\r\n                                <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                --> @for(item of documentTypes; track $index){\r\n                                <option [value]=\"item.code\">{{item.name}}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['documentType'].touched &&\r\n                            checkoutForm.controls['documentType'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'type-document-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-number'|translate}}\r\n                                @if(getTypeForm().viewForms.documentNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['documentNumber'].touched &&\r\n                            checkoutForm.controls['documentNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'document-number-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 6-->\r\n                        @if(getTypeForm().viewForms.notes.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"field-label\">{{'notes'|translate}}\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\" formControlName='notes'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 7-->\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\r\n                                    class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\r\n                                    id=\"formFact\"></label>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"col-12\">\r\n                            <p>\r\n                                <label class=\"required text-underline text-danger\">* {{ 'required-fields' | translate }}</label>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        @if(getTypeForm().viewForms.terms.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(getTypeForm().viewForms.terms.required){\r\n                            <span class=\"required\">*</span>\r\n                            }\r\n                            <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\r\n                                    formControlName='terms' type=\"checkbox\" required (change)=\"onInputChange()\" /> </label><br />\r\n                            <button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\"\r\n                                data-bs-target=\"#terminos-y-condiciones\">\r\n                                {{ 'whats-this' | translate }}\r\n                            </button>\r\n                            @if(checkoutForm.controls['terms'].touched && !checkoutForm.controls['terms'].value){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    @if(!viewDataFacturacion){\r\n                    <!--Formulario de Facturaci\u00F3n-->\r\n                    <div class=\"card\">\r\n                        <div class=\"card-header text-center\">\r\n                            <h2>{{ 'billing-data' | translate }}</h2>\r\n                        </div>\r\n                        <div class=\"card-body\">\r\n                            <form [formGroup]=\"checkoutFormFacturacion\">\r\n                                <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                                    @if(getTypeForm().viewForms.firstName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <!--Si es required-->\r\n                                        <label class=\"form-label\">{{'first-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.firstName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <!--Input-->\r\n                                        <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\"\r\n                                            value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        <!--Error info-->\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'first-name-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.lastName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'last-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.lastName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 2-->\r\n                                    @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'phone'|translate}}\r\n                                            @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                            formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.email.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'email-address'|translate}}\r\n                                            @if(getTypeForm().viewForms.email.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['email']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 3-->\r\n                                    @if(getTypeForm().viewForms.countryCode.enabled){\r\n                                    @if(countries$ | async; as countries){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'country'|translate}}\r\n                                            @if(getTypeForm().viewForms.countryCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                            (change)=\"onCountrySelected($event, true)\">\r\n                                            @for(country of countries; track $index){\r\n                                            <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['countryCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['countryCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'country-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                                    @if(provinces$ | async; as provinces){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'state'|translate}}\r\n                                            @if(getTypeForm().viewForms.provinceCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"provinceCode\"\r\n                                            (change)=\"onProvincesSelected($event, provinces, true)\" formControlName='provinceCode'>\r\n                                            @for(province of provinces; track $index){\r\n                                            <option [value]=\"province.code\">{{ province.name }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['provinceCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['provinceCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'state-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.city.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'town-city'|translate}}\r\n                                            @if(getTypeForm().viewForms.city.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\r\n                                            formControlName='city' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['city'].touched &&\r\n                                        checkoutFormFacturacion.controls['city'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 4-->\r\n                                    @if(getTypeForm().viewForms.street.enabled){\r\n                                    <div class=\"form-group col-12 col-md-8\">\r\n                                        <label class=\"field-label\">{{'address'|translate}}\r\n                                            @if(getTypeForm().viewForms.street.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                            formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['maxlength']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n\r\n                                    <!-- form direcci\u00F3n -->\r\n                                    @if(getTypeForm().viewForms.postcode.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                            @if(getTypeForm().viewForms.postcode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                            formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 5-->\r\n                                    @if(getTypeForm().viewForms.documentType.enabled){\r\n                                    @if(documentTypes$ | async; as documentTypes){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-type'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentType.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event, true)\"\r\n                                            formControlName='documentType'>\r\n                                            <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                            --> @for(item of documentTypes; track $index){\r\n                                            <option [value]=\"item.code\">{{item.name}}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['documentType'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentType'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'type-document-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-number'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                            formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                            autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['documentNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'document-number-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 6-->\r\n                                    @if(getTypeForm().viewForms.notes.enabled){\r\n                                    <div class=\"form-group col-12 col-md-12\">\r\n                                        @if(!getLabelNotesParam()){\r\n                                        <label class=\"field-label\">{{'notes'|translate}}\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n                                        @if(getLabelNotesParam(); as labelnotes){\r\n                                        <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                            formControlName='notes' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"row d-flex flex-row\">\r\n                        <div class=\"col-12 d-flex justify-content-end\">\r\n                            <button type=\"submit\" class=\"btn btn-primary text-white\" [disabled]=\"checkoutForm.invalid\">{{(isLastOne\r\n                                ? 'finish-checkout' : (allready_data ? 'update' :\r\n                                'ready-form')) | translate}}\r\n                                <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    @if(loading){\r\n                    <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                        <app-loading-full-ec></app-loading-full-ec>\r\n                    </div>\r\n                    }\r\n\r\n                </form>\r\n            </div>\r\n            } @else {\r\n            <div id=\"loginCheckout\">\r\n                @if(require_login){\r\n                <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                    <div class=\"col-12\">\r\n                        <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\r\n                        </app-login-form-ec>\r\n                    </div>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        } @else {\r\n        @if(modeSelectAddress == 'ONLY_ADDRESS_SELECTION'){\r\n        <div class=\"checkout-title my-2\">\r\n            <h3>{{'address-selection'|translate}}</h3>\r\n        </div>\r\n        }\r\n\r\n        @if(this.addressBook){\r\n            @if(this.addressBook?.length){\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    @for(item of addressBook; track $index; let i = $index){\r\n                    <div class=\"col-sm-6 col-12 my-3\">\r\n                        <div class=\"card p-3\">\r\n                            <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\r\n                                [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\r\n                            <div class=\"ms-5\">\r\n                                <h4 class=\"card-title\">\r\n                                    <strong>{{'address'|translate}}</strong><br>\r\n                                    <span class=\"text-uppercase h3\">{{item.street}}</span>\r\n                                </h4>\r\n                                <div class=\"row\">\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\r\n                                    </h5>\r\n                                </div>\r\n                                <div class=\"row px-3\">\r\n                                    <div class=\"card p-2 bg-light w-100\">\r\n                                        <div class=\"card-body\">\r\n                                            <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'first-name'|translate}}</strong>\r\n                                                {{item.addressContact.firstName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'last-name'|translate}}</strong>\r\n                                                {{item.addressContact.lastName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-type'|translate}}</strong>\r\n                                                {{getDocumentType(item.addressContact.documentType)}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-number'|translate}}</strong>\r\n                                                {{item.addressContact.documentNumber}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'email-address'|translate}}</strong>\r\n                                                {{item.addressContact.email}}\r\n                                            </h6>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                <div class=\"w-100\">\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"form-label\">{{'notes'|translate}}</label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"form-label\" [innerHTML]=\"labelnotes.value\"></label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            }\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"row d-flex flex-row\">\r\n                    <div class=\"col-12 d-flex justify-content-end\">\r\n                        <button (click)=\"onSelectAddress(cartItems)\" class=\"btn btn-primary text-white\" [disabled]=\"loadingStep\">{{(isLastOne\r\n                            ? 'finish-checkout' : (allready_data ? 'update' :\r\n                            'ready-form')) | translate}}\r\n                            <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                        </button>\r\n                        \r\n                    </div>\r\n                </div>\r\n                @if(loading){\r\n                <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\r\n                    <app-loading-full-ec></app-loading-full-ec>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else {\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-12 text-center my-2\">\r\n                        <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                            <app-loading-full-ec></app-loading-full-ec>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            }\r\n        } @else {\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12 text-center my-2\">\r\n                    <h4> {{'address-book-not-result' | translate }} </h4>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        }\r\n\r\n    }\r\n    @else {\r\n    <div class=\"container\">\r\n        <p>Por favor <a [routerLink]=\"['/auth/login']\"> Inicie Sesi\u00F3n</a></p>\r\n    </div>\r\n    }\r\n}\r\n@if(getTypeForm().viewForms.terms.enabled){\r\n<div class=\"modal fade\" id=\"terminos-y-condiciones\" tabindex=\"-1\" aria-labelledby=\"modalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-xl modal-dialog-scrollable\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"modalLabel\">T\u00E9rminos y condiciones</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <app-blocks-ec [section]=\"'terminos-y-condiciones'\" />\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoginFormEcComponent, selector: "app-login-form-ec", inputs: ["redirect", "redirectTo", "inCart"], outputs: ["ready"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: LoadingFullEcComponent, selector: "app-loading-full-ec" }, { kind: "component", type: BlocksEcComponent, selector: "app-blocks-ec", inputs: ["templates", "show_loading", "section", "blockFilters"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DataformEcComponent, isStandalone: true, selector: "app-dataform-ec", ngImport: i0, template: "@if(channel$ | async; as channelConfig){\r\n    @if(channelConfig.channelType != 'b2b' || (channelConfig.channelType == 'b2b' && isAuthenticated())){\r\n        @if( modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && isAuthenticated() && this.addressBook != null){\r\n            <!--Selector de modos-->\r\n            <div class=\"container card p-4 mb-3\">\r\n                <div class=\"row justify-content-center\">\r\n                    <div class=\"col-12 col-md-10 col-lg-8 text-center\">\r\n                        <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\r\n                                    (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\r\n                            </label>\r\n                            @if(!getParamByChannelAndLanguage('btn_new_address_')){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ 'new-address' | translate | titlecase}}\r\n                            </label>\r\n                            }\r\n                            @if(getParamByChannelAndLanguage('btn_new_address_'); as param){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ param.value}}\r\n                            </label>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if(getMode()){\r\n            @if(!require_login){\r\n            <div>\r\n                @if(modeSelectAddress == 'ONLY_LOAD_ADDRESS'){\r\n                    <div class=\"checkout-title  my-2\">\r\n                        <h3>{{'billing-details'|translate}}</h3>\r\n                    </div>\r\n                }\r\n                <!--Formulario-->\r\n                <form [formGroup]=\"checkoutForm\" (submit)=\"verifyValidate($event)\"> <!-- //this.cartService.items -->\r\n                    <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                        @if(getTypeForm().viewForms.firstName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <!--Si es required-->\r\n                            <label class=\"form-label\">{{'first-name'|translate}}\r\n                                @if(getTypeForm().viewForms.firstName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <!--Input-->\r\n                            <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            <!--Error info-->\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'first-name-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.lastName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'last-name'|translate}}\r\n                                @if(getTypeForm().viewForms.lastName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['lastName'].touched &&\r\n                            checkoutForm.controls['lastName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['lastName'].touched && checkoutForm.controls['lastName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 2-->\r\n                        @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'phone'|translate}}\r\n                                @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.email.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'email-address'|translate}}\r\n                                @if(getTypeForm().viewForms.email.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['email']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 3-->\r\n                        @if(getTypeForm().viewForms.countryCode.enabled){\r\n                        @if(countries$ | async; as countries){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'country'|translate}}\r\n                                @if(getTypeForm().viewForms.countryCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                (change)=\"onCountrySelected($event)\">\r\n                                @for(country of countries; track $index){\r\n                                <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['countryCode'].touched &&\r\n                            checkoutForm.controls['countryCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'country-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                        @if(provinces$ | async; as provinces){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'state'|translate}}\r\n                                @if(getTypeForm().viewForms.provinceCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"provinceCode\" (change)=\"onProvincesSelected($event, provinces)\"\r\n                                formControlName='provinceCode'>\r\n                                @for(province of provinces; track $index){\r\n                                <option [value]=\"province.code\">{{ province.name }}\r\n                                </option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['provinceCode'].touched &&\r\n                            checkoutForm.controls['provinceCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'state-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.city.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'town-city'|translate}}\r\n                                @if(getTypeForm().viewForms.city.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\" formControlName='city'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['city'].touched && checkoutForm.controls['city'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 4-->\r\n                        @if(getTypeForm().viewForms.street.enabled){\r\n                        <div class=\"form-group col-12 col-md-8\">\r\n                            <label class=\"field-label\">{{'address'|translate}}\r\n                                @if(getTypeForm().viewForms.street.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['maxlength']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n\r\n                        <!-- form direcci\u00F3n -->\r\n                        @if(getTypeForm().viewForms.postcode.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                @if(getTypeForm().viewForms.postcode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['postcode'].touched &&\r\n                            checkoutForm.controls['postcode'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['postcode'].touched && checkoutForm.controls['postcode'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 5-->\r\n                        @if(getTypeForm().viewForms.documentType.enabled){\r\n                        @if(documentTypes$ | async; as documentTypes){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-type'|translate}}\r\n                                @if(getTypeForm().viewForms.documentType.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event)\"\r\n                                formControlName='documentType'>\r\n                                <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                --> @for(item of documentTypes; track $index){\r\n                                <option [value]=\"item.code\">{{item.name}}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['documentType'].touched &&\r\n                            checkoutForm.controls['documentType'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'type-document-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-number'|translate}}\r\n                                @if(getTypeForm().viewForms.documentNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['documentNumber'].touched &&\r\n                            checkoutForm.controls['documentNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'document-number-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 6-->\r\n                        @if(getTypeForm().viewForms.notes.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"field-label\">{{'notes'|translate}}\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\" formControlName='notes'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 7-->\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\r\n                                    class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\r\n                                    id=\"formFact\"></label>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"col-12\">\r\n                            <p>\r\n                                <label class=\"required text-underline text-danger\">* {{ 'required-fields' | translate }}</label>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        @if(getTypeForm().viewForms.terms.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(getTypeForm().viewForms.terms.required){\r\n                            <span class=\"required\">*</span>\r\n                            }\r\n                            <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\r\n                                    formControlName='terms' type=\"checkbox\" required (change)=\"onInputChange()\" /> </label><br />\r\n                            <button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\"\r\n                                data-bs-target=\"#terminos-y-condiciones\">\r\n                                {{ 'whats-this' | translate }}\r\n                            </button>\r\n                            @if(checkoutForm.controls['terms'].touched && !checkoutForm.controls['terms'].value){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    @if(!viewDataFacturacion){\r\n                    <!--Formulario de Facturaci\u00F3n-->\r\n                    <div class=\"card\">\r\n                        <div class=\"card-header text-center\">\r\n                            <h2>{{ 'billing-data' | translate }}</h2>\r\n                        </div>\r\n                        <div class=\"card-body\">\r\n                            <form [formGroup]=\"checkoutFormFacturacion\">\r\n                                <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                                    @if(getTypeForm().viewForms.firstName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <!--Si es required-->\r\n                                        <label class=\"form-label\">{{'first-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.firstName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <!--Input-->\r\n                                        <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\"\r\n                                            value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        <!--Error info-->\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'first-name-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.lastName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'last-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.lastName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 2-->\r\n                                    @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'phone'|translate}}\r\n                                            @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                            formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.email.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'email-address'|translate}}\r\n                                            @if(getTypeForm().viewForms.email.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['email']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 3-->\r\n                                    @if(getTypeForm().viewForms.countryCode.enabled){\r\n                                    @if(countries$ | async; as countries){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'country'|translate}}\r\n                                            @if(getTypeForm().viewForms.countryCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                            (change)=\"onCountrySelected($event, true)\">\r\n                                            @for(country of countries; track $index){\r\n                                            <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['countryCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['countryCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'country-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                                    @if(provinces$ | async; as provinces){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'state'|translate}}\r\n                                            @if(getTypeForm().viewForms.provinceCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"provinceCode\"\r\n                                            (change)=\"onProvincesSelected($event, provinces, true)\" formControlName='provinceCode'>\r\n                                            @for(province of provinces; track $index){\r\n                                            <option [value]=\"province.code\">{{ province.name }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['provinceCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['provinceCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'state-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.city.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'town-city'|translate}}\r\n                                            @if(getTypeForm().viewForms.city.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\r\n                                            formControlName='city' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['city'].touched &&\r\n                                        checkoutFormFacturacion.controls['city'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 4-->\r\n                                    @if(getTypeForm().viewForms.street.enabled){\r\n                                    <div class=\"form-group col-12 col-md-8\">\r\n                                        <label class=\"field-label\">{{'address'|translate}}\r\n                                            @if(getTypeForm().viewForms.street.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                            formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['maxlength']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n\r\n                                    <!-- form direcci\u00F3n -->\r\n                                    @if(getTypeForm().viewForms.postcode.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                            @if(getTypeForm().viewForms.postcode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                            formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 5-->\r\n                                    @if(getTypeForm().viewForms.documentType.enabled){\r\n                                    @if(documentTypes$ | async; as documentTypes){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-type'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentType.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event, true)\"\r\n                                            formControlName='documentType'>\r\n                                            <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                            --> @for(item of documentTypes; track $index){\r\n                                            <option [value]=\"item.code\">{{item.name}}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['documentType'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentType'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'type-document-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-number'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                            formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                            autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['documentNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'document-number-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 6-->\r\n                                    @if(getTypeForm().viewForms.notes.enabled){\r\n                                    <div class=\"form-group col-12 col-md-12\">\r\n                                        @if(!getLabelNotesParam()){\r\n                                        <label class=\"field-label\">{{'notes'|translate}}\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n                                        @if(getLabelNotesParam(); as labelnotes){\r\n                                        <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                            formControlName='notes' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"row d-flex flex-row\">\r\n                        <div class=\"col-12 d-flex justify-content-end\">\r\n                            <button type=\"submit\" class=\"btn btn-primary text-white\" [disabled]=\"checkoutForm.invalid\">{{(isLastOne\r\n                                ? 'finish-checkout' : (allready_data ? 'update' :\r\n                                'ready-form')) | translate}}\r\n                                <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    @if(loading){\r\n                    <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                        <app-loading-full-ec></app-loading-full-ec>\r\n                    </div>\r\n                    }\r\n\r\n                </form>\r\n            </div>\r\n            } @else {\r\n            <div id=\"loginCheckout\">\r\n                @if(require_login){\r\n                <div class=\"d-flex flex-column justify-content-center align-items-center my-5 \">\r\n                    <div class=\"col-12 col-md-6 \">\r\n                        <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\r\n                        </app-login-form-ec>\r\n                    </div>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        } @else {\r\n        @if(modeSelectAddress == 'ONLY_ADDRESS_SELECTION'){\r\n        <div class=\"checkout-title my-2\">\r\n            <h3>{{'address-selection'|translate}}</h3>\r\n        </div>\r\n        }\r\n\r\n        @if(this.addressBook){\r\n            @if(this.addressBook?.length){\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    @for(item of addressBook; track $index; let i = $index){\r\n                    <div class=\"col-sm-6 col-12 my-3\">\r\n                        <div class=\"card p-3\">\r\n                            <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\r\n                                [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\r\n                            <div class=\"ms-5\">\r\n                                <h4 class=\"card-title\">\r\n                                    <strong>{{'address'|translate}}</strong><br>\r\n                                    <span class=\"text-uppercase h3\">{{item.street}}</span>\r\n                                </h4>\r\n                                <div class=\"row\">\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\r\n                                    </h5>\r\n                                </div>\r\n                                <div class=\"row px-3\">\r\n                                    <div class=\"card p-2 bg-light w-100\">\r\n                                        <div class=\"card-body\">\r\n                                            <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'first-name'|translate}}</strong>\r\n                                                {{item.addressContact.firstName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'last-name'|translate}}</strong>\r\n                                                {{item.addressContact.lastName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-type'|translate}}</strong>\r\n                                                {{getDocumentType(item.addressContact.documentType)}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-number'|translate}}</strong>\r\n                                                {{item.addressContact.documentNumber}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'email-address'|translate}}</strong>\r\n                                                {{item.addressContact.email}}\r\n                                            </h6>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                <div class=\"w-100\">\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"form-label\">{{'notes'|translate}}</label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"form-label\" [innerHTML]=\"labelnotes.value\"></label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            }\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"row d-flex flex-row\">\r\n                    <div class=\"col-12 d-flex justify-content-end\">\r\n                        <button (click)=\"onSelectAddress(cartItems)\" class=\"btn btn-primary text-white\" [disabled]=\"loadingStep\">{{(isLastOne\r\n                            ? 'finish-checkout' : (allready_data ? 'update' :\r\n                            'ready-form')) | translate}}\r\n                            <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                        </button>\r\n                        \r\n                    </div>\r\n                </div>\r\n                @if(loading){\r\n                <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\r\n                    <app-loading-full-ec></app-loading-full-ec>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else {\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-12 text-center my-2\">\r\n                        <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                            <app-loading-full-ec></app-loading-full-ec>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            }\r\n        } @else {\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12 text-center my-2\">\r\n                    <h4> {{'address-book-not-result' | translate }} </h4>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        }\r\n\r\n    }\r\n    @else {\r\n    <div class=\"container\">\r\n        <p>Por favor <a [routerLink]=\"['/auth/login']\"> Inicie Sesi\u00F3n</a></p>\r\n    </div>\r\n    }\r\n}\r\n@if(getTypeForm().viewForms.terms.enabled){\r\n<div class=\"modal fade\" id=\"terminos-y-condiciones\" tabindex=\"-1\" aria-labelledby=\"modalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-xl modal-dialog-scrollable\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"modalLabel\">T\u00E9rminos y condiciones</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <app-blocks-ec [section]=\"'terminos-y-condiciones'\" />\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoginFormEcComponent, selector: "app-login-form-ec", inputs: ["redirect", "redirectTo", "inCart"], outputs: ["ready"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: LoadingFullEcComponent, selector: "app-loading-full-ec" }, { kind: "component", type: BlocksEcComponent, selector: "app-blocks-ec", inputs: ["templates", "show_loading", "section", "blockFilters"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataformEcComponent, decorators: [{
             type: Component,
@@ -8444,7 +8646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LoadingFullEcComponent,
                         JsonPipe,
                         BlocksEcComponent
-                    ], template: "@if(channel$ | async; as channelConfig){\r\n    @if(channelConfig.channelType != 'b2b' || (channelConfig.channelType == 'b2b' && isAuthenticated())){\r\n        @if( modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && isAuthenticated() && this.addressBook != null){\r\n            <!--Selector de modos-->\r\n            <div class=\"container card p-4 mb-3\">\r\n                <div class=\"row justify-content-center\">\r\n                    <div class=\"col-12 col-md-10 col-lg-8 text-center\">\r\n                        <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\r\n                                    (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\r\n                            </label>\r\n                            @if(!getParamByChannelAndLanguage('btn_new_address_')){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ 'new-address' | translate | titlecase}}\r\n                            </label>\r\n                            }\r\n                            @if(getParamByChannelAndLanguage('btn_new_address_'); as param){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ param.value}}\r\n                            </label>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if(getMode()){\r\n            @if(!require_login){\r\n            <div>\r\n                @if(modeSelectAddress == 'ONLY_LOAD_ADDRESS'){\r\n                    <div class=\"checkout-title  my-2\">\r\n                        <h3>{{'billing-details'|translate}}</h3>\r\n                    </div>\r\n                }\r\n                <!--Formulario-->\r\n                <form [formGroup]=\"checkoutForm\" (submit)=\"verifyValidate($event)\"> <!-- //this.cartService.items -->\r\n                    <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                        @if(getTypeForm().viewForms.firstName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <!--Si es required-->\r\n                            <label class=\"form-label\">{{'first-name'|translate}}\r\n                                @if(getTypeForm().viewForms.firstName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <!--Input-->\r\n                            <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            <!--Error info-->\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'first-name-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.lastName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'last-name'|translate}}\r\n                                @if(getTypeForm().viewForms.lastName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['lastName'].touched &&\r\n                            checkoutForm.controls['lastName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['lastName'].touched && checkoutForm.controls['lastName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 2-->\r\n                        @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'phone'|translate}}\r\n                                @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.email.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'email-address'|translate}}\r\n                                @if(getTypeForm().viewForms.email.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['email']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 3-->\r\n                        @if(getTypeForm().viewForms.countryCode.enabled){\r\n                        @if(countries$ | async; as countries){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'country'|translate}}\r\n                                @if(getTypeForm().viewForms.countryCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                (change)=\"onCountrySelected($event)\">\r\n                                @for(country of countries; track $index){\r\n                                <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['countryCode'].touched &&\r\n                            checkoutForm.controls['countryCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'country-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                        @if(provinces$ | async; as provinces){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'state'|translate}}\r\n                                @if(getTypeForm().viewForms.provinceCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"provinceCode\" (change)=\"onProvincesSelected($event, provinces)\"\r\n                                formControlName='provinceCode'>\r\n                                @for(province of provinces; track $index){\r\n                                <option [value]=\"province.code\">{{ province.name }}\r\n                                </option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['provinceCode'].touched &&\r\n                            checkoutForm.controls['provinceCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'state-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.city.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'town-city'|translate}}\r\n                                @if(getTypeForm().viewForms.city.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\" formControlName='city'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['city'].touched && checkoutForm.controls['city'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 4-->\r\n                        @if(getTypeForm().viewForms.street.enabled){\r\n                        <div class=\"form-group col-12 col-md-8\">\r\n                            <label class=\"field-label\">{{'address'|translate}}\r\n                                @if(getTypeForm().viewForms.street.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['maxlength']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n\r\n                        <!-- form direcci\u00F3n -->\r\n                        @if(getTypeForm().viewForms.postcode.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                @if(getTypeForm().viewForms.postcode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['postcode'].touched &&\r\n                            checkoutForm.controls['postcode'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['postcode'].touched && checkoutForm.controls['postcode'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 5-->\r\n                        @if(getTypeForm().viewForms.documentType.enabled){\r\n                        @if(documentTypes$ | async; as documentTypes){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-type'|translate}}\r\n                                @if(getTypeForm().viewForms.documentType.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event)\"\r\n                                formControlName='documentType'>\r\n                                <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                --> @for(item of documentTypes; track $index){\r\n                                <option [value]=\"item.code\">{{item.name}}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['documentType'].touched &&\r\n                            checkoutForm.controls['documentType'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'type-document-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-number'|translate}}\r\n                                @if(getTypeForm().viewForms.documentNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['documentNumber'].touched &&\r\n                            checkoutForm.controls['documentNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'document-number-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 6-->\r\n                        @if(getTypeForm().viewForms.notes.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"field-label\">{{'notes'|translate}}\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\" formControlName='notes'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 7-->\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\r\n                                    class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\r\n                                    id=\"formFact\"></label>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"col-12\">\r\n                            <p>\r\n                                <label class=\"required text-underline text-danger\">* {{ 'required-fields' | translate }}</label>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        @if(getTypeForm().viewForms.terms.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(getTypeForm().viewForms.terms.required){\r\n                            <span class=\"required\">*</span>\r\n                            }\r\n                            <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\r\n                                    formControlName='terms' type=\"checkbox\" required (change)=\"onInputChange()\" /> </label><br />\r\n                            <button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\"\r\n                                data-bs-target=\"#terminos-y-condiciones\">\r\n                                {{ 'whats-this' | translate }}\r\n                            </button>\r\n                            @if(checkoutForm.controls['terms'].touched && !checkoutForm.controls['terms'].value){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    @if(!viewDataFacturacion){\r\n                    <!--Formulario de Facturaci\u00F3n-->\r\n                    <div class=\"card\">\r\n                        <div class=\"card-header text-center\">\r\n                            <h2>{{ 'billing-data' | translate }}</h2>\r\n                        </div>\r\n                        <div class=\"card-body\">\r\n                            <form [formGroup]=\"checkoutFormFacturacion\">\r\n                                <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                                    @if(getTypeForm().viewForms.firstName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <!--Si es required-->\r\n                                        <label class=\"form-label\">{{'first-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.firstName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <!--Input-->\r\n                                        <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\"\r\n                                            value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        <!--Error info-->\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'first-name-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.lastName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'last-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.lastName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 2-->\r\n                                    @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'phone'|translate}}\r\n                                            @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                            formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.email.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'email-address'|translate}}\r\n                                            @if(getTypeForm().viewForms.email.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['email']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 3-->\r\n                                    @if(getTypeForm().viewForms.countryCode.enabled){\r\n                                    @if(countries$ | async; as countries){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'country'|translate}}\r\n                                            @if(getTypeForm().viewForms.countryCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                            (change)=\"onCountrySelected($event, true)\">\r\n                                            @for(country of countries; track $index){\r\n                                            <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['countryCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['countryCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'country-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                                    @if(provinces$ | async; as provinces){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'state'|translate}}\r\n                                            @if(getTypeForm().viewForms.provinceCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"provinceCode\"\r\n                                            (change)=\"onProvincesSelected($event, provinces, true)\" formControlName='provinceCode'>\r\n                                            @for(province of provinces; track $index){\r\n                                            <option [value]=\"province.code\">{{ province.name }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['provinceCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['provinceCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'state-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.city.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'town-city'|translate}}\r\n                                            @if(getTypeForm().viewForms.city.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\r\n                                            formControlName='city' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['city'].touched &&\r\n                                        checkoutFormFacturacion.controls['city'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 4-->\r\n                                    @if(getTypeForm().viewForms.street.enabled){\r\n                                    <div class=\"form-group col-12 col-md-8\">\r\n                                        <label class=\"field-label\">{{'address'|translate}}\r\n                                            @if(getTypeForm().viewForms.street.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                            formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['maxlength']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n\r\n                                    <!-- form direcci\u00F3n -->\r\n                                    @if(getTypeForm().viewForms.postcode.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                            @if(getTypeForm().viewForms.postcode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                            formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 5-->\r\n                                    @if(getTypeForm().viewForms.documentType.enabled){\r\n                                    @if(documentTypes$ | async; as documentTypes){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-type'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentType.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event, true)\"\r\n                                            formControlName='documentType'>\r\n                                            <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                            --> @for(item of documentTypes; track $index){\r\n                                            <option [value]=\"item.code\">{{item.name}}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['documentType'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentType'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'type-document-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-number'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                            formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                            autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['documentNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'document-number-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 6-->\r\n                                    @if(getTypeForm().viewForms.notes.enabled){\r\n                                    <div class=\"form-group col-12 col-md-12\">\r\n                                        @if(!getLabelNotesParam()){\r\n                                        <label class=\"field-label\">{{'notes'|translate}}\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n                                        @if(getLabelNotesParam(); as labelnotes){\r\n                                        <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                            formControlName='notes' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"row d-flex flex-row\">\r\n                        <div class=\"col-12 d-flex justify-content-end\">\r\n                            <button type=\"submit\" class=\"btn btn-primary text-white\" [disabled]=\"checkoutForm.invalid\">{{(isLastOne\r\n                                ? 'finish-checkout' : (allready_data ? 'update' :\r\n                                'ready-form')) | translate}}\r\n                                <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    @if(loading){\r\n                    <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                        <app-loading-full-ec></app-loading-full-ec>\r\n                    </div>\r\n                    }\r\n\r\n                </form>\r\n            </div>\r\n            } @else {\r\n            <div id=\"loginCheckout\">\r\n                @if(require_login){\r\n                <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                    <div class=\"col-12\">\r\n                        <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\r\n                        </app-login-form-ec>\r\n                    </div>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        } @else {\r\n        @if(modeSelectAddress == 'ONLY_ADDRESS_SELECTION'){\r\n        <div class=\"checkout-title my-2\">\r\n            <h3>{{'address-selection'|translate}}</h3>\r\n        </div>\r\n        }\r\n\r\n        @if(this.addressBook){\r\n            @if(this.addressBook?.length){\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    @for(item of addressBook; track $index; let i = $index){\r\n                    <div class=\"col-sm-6 col-12 my-3\">\r\n                        <div class=\"card p-3\">\r\n                            <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\r\n                                [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\r\n                            <div class=\"ms-5\">\r\n                                <h4 class=\"card-title\">\r\n                                    <strong>{{'address'|translate}}</strong><br>\r\n                                    <span class=\"text-uppercase h3\">{{item.street}}</span>\r\n                                </h4>\r\n                                <div class=\"row\">\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\r\n                                    </h5>\r\n                                </div>\r\n                                <div class=\"row px-3\">\r\n                                    <div class=\"card p-2 bg-light w-100\">\r\n                                        <div class=\"card-body\">\r\n                                            <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'first-name'|translate}}</strong>\r\n                                                {{item.addressContact.firstName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'last-name'|translate}}</strong>\r\n                                                {{item.addressContact.lastName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-type'|translate}}</strong>\r\n                                                {{getDocumentType(item.addressContact.documentType)}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-number'|translate}}</strong>\r\n                                                {{item.addressContact.documentNumber}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'email-address'|translate}}</strong>\r\n                                                {{item.addressContact.email}}\r\n                                            </h6>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                <div class=\"w-100\">\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"form-label\">{{'notes'|translate}}</label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"form-label\" [innerHTML]=\"labelnotes.value\"></label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            }\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"row d-flex flex-row\">\r\n                    <div class=\"col-12 d-flex justify-content-end\">\r\n                        <button (click)=\"onSelectAddress(cartItems)\" class=\"btn btn-primary text-white\" [disabled]=\"loadingStep\">{{(isLastOne\r\n                            ? 'finish-checkout' : (allready_data ? 'update' :\r\n                            'ready-form')) | translate}}\r\n                            <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                        </button>\r\n                        \r\n                    </div>\r\n                </div>\r\n                @if(loading){\r\n                <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\r\n                    <app-loading-full-ec></app-loading-full-ec>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else {\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-12 text-center my-2\">\r\n                        <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                            <app-loading-full-ec></app-loading-full-ec>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            }\r\n        } @else {\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12 text-center my-2\">\r\n                    <h4> {{'address-book-not-result' | translate }} </h4>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        }\r\n\r\n    }\r\n    @else {\r\n    <div class=\"container\">\r\n        <p>Por favor <a [routerLink]=\"['/auth/login']\"> Inicie Sesi\u00F3n</a></p>\r\n    </div>\r\n    }\r\n}\r\n@if(getTypeForm().viewForms.terms.enabled){\r\n<div class=\"modal fade\" id=\"terminos-y-condiciones\" tabindex=\"-1\" aria-labelledby=\"modalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-xl modal-dialog-scrollable\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"modalLabel\">T\u00E9rminos y condiciones</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <app-blocks-ec [section]=\"'terminos-y-condiciones'\" />\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}" }]
+                    ], template: "@if(channel$ | async; as channelConfig){\r\n    @if(channelConfig.channelType != 'b2b' || (channelConfig.channelType == 'b2b' && isAuthenticated())){\r\n        @if( modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && isAuthenticated() && this.addressBook != null){\r\n            <!--Selector de modos-->\r\n            <div class=\"container card p-4 mb-3\">\r\n                <div class=\"row justify-content-center\">\r\n                    <div class=\"col-12 col-md-10 col-lg-8 text-center\">\r\n                        <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\r\n                                    (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\r\n                            </label>\r\n                            @if(!getParamByChannelAndLanguage('btn_new_address_')){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ 'new-address' | translate | titlecase}}\r\n                            </label>\r\n                            }\r\n                            @if(getParamByChannelAndLanguage('btn_new_address_'); as param){\r\n                            <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\">\r\n                                <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\r\n                                {{ param.value}}\r\n                            </label>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if(getMode()){\r\n            @if(!require_login){\r\n            <div>\r\n                @if(modeSelectAddress == 'ONLY_LOAD_ADDRESS'){\r\n                    <div class=\"checkout-title  my-2\">\r\n                        <h3>{{'billing-details'|translate}}</h3>\r\n                    </div>\r\n                }\r\n                <!--Formulario-->\r\n                <form [formGroup]=\"checkoutForm\" (submit)=\"verifyValidate($event)\"> <!-- //this.cartService.items -->\r\n                    <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                        @if(getTypeForm().viewForms.firstName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <!--Si es required-->\r\n                            <label class=\"form-label\">{{'first-name'|translate}}\r\n                                @if(getTypeForm().viewForms.firstName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <!--Input-->\r\n                            <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            <!--Error info-->\r\n                            @if(checkoutForm.controls['firstName'].touched &&\r\n                            checkoutForm.controls['firstName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'first-name-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.lastName.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'last-name'|translate}}\r\n                                @if(getTypeForm().viewForms.lastName.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['lastName'].touched &&\r\n                            checkoutForm.controls['lastName'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['lastName'].touched && checkoutForm.controls['lastName'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 2-->\r\n                        @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'phone'|translate}}\r\n                                @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['phoneNumber'].touched &&\r\n                            checkoutForm.controls['phoneNumber'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'phone-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        @if(getTypeForm().viewForms.email.enabled){\r\n                        <div class=\"form-group col-12 col-md-6\">\r\n                            <label class=\"form-label\">{{'email-address'|translate}}\r\n                                @if(getTypeForm().viewForms.email.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help1'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['email']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'email-address-help2'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-2\"><!--Fila 3-->\r\n                        @if(getTypeForm().viewForms.countryCode.enabled){\r\n                        @if(countries$ | async; as countries){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'country'|translate}}\r\n                                @if(getTypeForm().viewForms.countryCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                (change)=\"onCountrySelected($event)\">\r\n                                @for(country of countries; track $index){\r\n                                <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['countryCode'].touched &&\r\n                            checkoutForm.controls['countryCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'country-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                        @if(provinces$ | async; as provinces){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'state'|translate}}\r\n                                @if(getTypeForm().viewForms.provinceCode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select class=\"form-select\" name=\"provinceCode\" (change)=\"onProvincesSelected($event, provinces)\"\r\n                                formControlName='provinceCode'>\r\n                                @for(province of provinces; track $index){\r\n                                <option [value]=\"province.code\">{{ province.name }}\r\n                                </option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['provinceCode'].touched &&\r\n                            checkoutForm.controls['provinceCode'].errors?.['required']){\r\n                            <div class=\"text text-danger\">\r\n                                {{'state-help'|translate}}\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.city.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"form-label\">{{'town-city'|translate}}\r\n                                @if(getTypeForm().viewForms.city.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\" formControlName='city'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['city'].touched && checkoutForm.controls['city'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 4-->\r\n                        @if(getTypeForm().viewForms.street.enabled){\r\n                        <div class=\"form-group col-12 col-md-8\">\r\n                            <label class=\"field-label\">{{'address'|translate}}\r\n                                @if(getTypeForm().viewForms.street.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['maxlength']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n\r\n                        <!-- form direcci\u00F3n -->\r\n                        @if(getTypeForm().viewForms.postcode.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                @if(getTypeForm().viewForms.postcode.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['postcode'].touched &&\r\n                            checkoutForm.controls['postcode'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                            </div>\r\n                            }\r\n                            @if(checkoutForm.controls['postcode'].touched && checkoutForm.controls['postcode'].errors?.['pattern']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 5-->\r\n                        @if(getTypeForm().viewForms.documentType.enabled){\r\n                        @if(documentTypes$ | async; as documentTypes){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-type'|translate}}\r\n                                @if(getTypeForm().viewForms.documentType.required){\r\n                                <span class=\"required\">*</span>\r\n                                }</label>\r\n                            <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event)\"\r\n                                formControlName='documentType'>\r\n                                <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                --> @for(item of documentTypes; track $index){\r\n                                <option [value]=\"item.code\">{{item.name}}</option>\r\n                                }\r\n                            </select>\r\n                            @if(checkoutForm.controls['documentType'].touched &&\r\n                            checkoutForm.controls['documentType'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'type-document-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                        }\r\n                        @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                        <div class=\"form-group col-12 col-md-4\">\r\n                            <label class=\"field-label\">{{'document-number'|translate}}\r\n                                @if(getTypeForm().viewForms.documentNumber.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            @if(checkoutForm.controls['documentNumber'].touched &&\r\n                            checkoutForm.controls['documentNumber'].errors?.['required']){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">\r\n                                    {{'document-number-help'|translate}}\r\n                                </span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 6-->\r\n                        @if(getTypeForm().viewForms.notes.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"field-label\">{{'notes'|translate}}\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                @if(getTypeForm().viewForms.notes.required){\r\n                                <span class=\"required\">*</span>\r\n                                }\r\n                            </label>\r\n                            }\r\n\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\" formControlName='notes'\r\n                                value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <div class=\"row mt-df\"><!--Fila 7-->\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\r\n                                    class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\r\n                                    id=\"formFact\"></label>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"col-12\">\r\n                            <p>\r\n                                <label class=\"required text-underline text-danger\">* {{ 'required-fields' | translate }}</label>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row mt-df\">\r\n                        @if(getTypeForm().viewForms.terms.enabled){\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(getTypeForm().viewForms.terms.required){\r\n                            <span class=\"required\">*</span>\r\n                            }\r\n                            <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\r\n                                    formControlName='terms' type=\"checkbox\" required (change)=\"onInputChange()\" /> </label><br />\r\n                            <button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\"\r\n                                data-bs-target=\"#terminos-y-condiciones\">\r\n                                {{ 'whats-this' | translate }}\r\n                            </button>\r\n                            @if(checkoutForm.controls['terms'].touched && !checkoutForm.controls['terms'].value){\r\n                            <div class=\"text-danger-container\">\r\n                                <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    @if(!viewDataFacturacion){\r\n                    <!--Formulario de Facturaci\u00F3n-->\r\n                    <div class=\"card\">\r\n                        <div class=\"card-header text-center\">\r\n                            <h2>{{ 'billing-data' | translate }}</h2>\r\n                        </div>\r\n                        <div class=\"card-body\">\r\n                            <form [formGroup]=\"checkoutFormFacturacion\">\r\n                                <div class=\"row mt-2\"><!--Fila 1-->\r\n\r\n                                    @if(getTypeForm().viewForms.firstName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <!--Si es required-->\r\n                                        <label class=\"form-label\">{{'first-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.firstName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <!--Input-->\r\n                                        <input class=\"form-control\" type=\"text\" name=\"firstName\" formControlName=\"firstName\"\r\n                                            value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        <!--Error info-->\r\n                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&\r\n                                        checkoutFormFacturacion.controls['firstName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'first-name-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.lastName.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'last-name'|translate}}\r\n                                            @if(getTypeForm().viewForms.lastName.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input class=\"form-control\" type=\"text\" name=\"lastName\" formControlName=\"lastName\" value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&\r\n                                        checkoutFormFacturacion.controls['lastName'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 2-->\r\n                                    @if(getTypeForm().viewForms.phoneNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'phone'|translate}}\r\n                                            @if(getTypeForm().viewForms.phoneNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\r\n                                            formControlName='phoneNumber' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'phone-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.email.enabled){\r\n                                    <div class=\"form-group col-12 col-md-6\">\r\n                                        <label class=\"form-label\">{{'email-address'|translate}}\r\n                                            @if(getTypeForm().viewForms.email.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input class=\"form-control\" type=\"email\" name=\"email\" formControlName='email' value=\"\"\r\n                                            placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help1'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['email'].touched &&\r\n                                        checkoutFormFacturacion.controls['email'].errors?.['email']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'email-address-help2'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-2\"><!--Fila 3-->\r\n                                    @if(getTypeForm().viewForms.countryCode.enabled){\r\n                                    @if(countries$ | async; as countries){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'country'|translate}}\r\n                                            @if(getTypeForm().viewForms.countryCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"countryCode\" formControlName='countryCode'\r\n                                            (change)=\"onCountrySelected($event, true)\">\r\n                                            @for(country of countries; track $index){\r\n                                            <option [value]=\"country.code\">{{ country.name }}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['countryCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['countryCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'country-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.provinceCode.enabled){\r\n                                    @if(provinces$ | async; as provinces){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'state'|translate}}\r\n                                            @if(getTypeForm().viewForms.provinceCode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select class=\"form-select\" name=\"provinceCode\"\r\n                                            (change)=\"onProvincesSelected($event, provinces, true)\" formControlName='provinceCode'>\r\n                                            @for(province of provinces; track $index){\r\n                                            <option [value]=\"province.code\">{{ province.name }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['provinceCode'].touched &&\r\n                                        checkoutFormFacturacion.controls['provinceCode'].errors?.['required']){\r\n                                        <div class=\"text text-danger\">\r\n                                            {{'state-help'|translate}}\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.city.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"form-label\">{{'town-city'|translate}}\r\n                                            @if(getTypeForm().viewForms.city.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\r\n                                            formControlName='city' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['city'].touched &&\r\n                                        checkoutFormFacturacion.controls['city'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 4-->\r\n                                    @if(getTypeForm().viewForms.street.enabled){\r\n                                    <div class=\"form-group col-12 col-md-8\">\r\n                                        <label class=\"field-label\">{{'address'|translate}}\r\n                                            @if(getTypeForm().viewForms.street.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\r\n                                            formControlName='street' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help1'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['street'].touched &&\r\n                                        checkoutFormFacturacion.controls['street'].errors?.['maxlength']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'address-help2'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n\r\n                                    <!-- form direcci\u00F3n -->\r\n                                    @if(getTypeForm().viewForms.postcode.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'postal-code'|translate}}\r\n                                            @if(getTypeForm().viewForms.postcode.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\r\n                                            formControlName='postcode' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\r\n                                        </div>\r\n                                        }\r\n                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&\r\n                                        checkoutFormFacturacion.controls['postcode'].errors?.['pattern']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\"> {{'postal-code-pattern-error' | translate}} </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 5-->\r\n                                    @if(getTypeForm().viewForms.documentType.enabled){\r\n                                    @if(documentTypes$ | async; as documentTypes){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-type'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentType.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }</label>\r\n                                        <select name=\"documentType\" class=\"form-select\" (change)=\"onDocumentTypesSelected($event, true)\"\r\n                                            formControlName='documentType'>\r\n                                            <!--                             <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\r\n                            --> @for(item of documentTypes; track $index){\r\n                                            <option [value]=\"item.code\">{{item.name}}</option>\r\n                                            }\r\n                                        </select>\r\n                                        @if(checkoutFormFacturacion.controls['documentType'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentType'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'type-document-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                    @if(getTypeForm().viewForms.documentNumber.enabled){\r\n                                    <div class=\"form-group col-12 col-md-4\">\r\n                                        <label class=\"field-label\">{{'document-number'|translate}}\r\n                                            @if(getTypeForm().viewForms.documentNumber.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\" name=\"documentNumber\"\r\n                                            formControlName='documentNumber' min=\"1\" max=\"99999999999\" value=\"\" placeholder=\"\"\r\n                                            autocomplete=\"off\">\r\n                                        @if(checkoutFormFacturacion.controls['documentNumber'].touched &&\r\n                                        checkoutFormFacturacion.controls['documentNumber'].errors?.['required']){\r\n                                        <div class=\"text-danger-container\">\r\n                                            <span class=\"text-danger\">\r\n                                                {{'document-number-help'|translate}}\r\n                                            </span>\r\n                                        </div>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row mt-df\"><!--Fila 6-->\r\n                                    @if(getTypeForm().viewForms.notes.enabled){\r\n                                    <div class=\"form-group col-12 col-md-12\">\r\n                                        @if(!getLabelNotesParam()){\r\n                                        <label class=\"field-label\">{{'notes'|translate}}\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n                                        @if(getLabelNotesParam(); as labelnotes){\r\n                                        <label class=\"field-label\" [innerHTML]=\"labelnotes.value\">\r\n                                            @if(getTypeForm().viewForms.notes.required){\r\n                                            <span class=\"required\">*</span>\r\n                                            }\r\n                                        </label>\r\n                                        }\r\n\r\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                            formControlName='notes' value=\"\" placeholder=\"\" autocomplete=\"off\">\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"row d-flex flex-row\">\r\n                        <div class=\"col-12 d-flex justify-content-end\">\r\n                            <button type=\"submit\" class=\"btn btn-primary text-white\" [disabled]=\"checkoutForm.invalid\">{{(isLastOne\r\n                                ? 'finish-checkout' : (allready_data ? 'update' :\r\n                                'ready-form')) | translate}}\r\n                                <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    @if(loading){\r\n                    <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                        <app-loading-full-ec></app-loading-full-ec>\r\n                    </div>\r\n                    }\r\n\r\n                </form>\r\n            </div>\r\n            } @else {\r\n            <div id=\"loginCheckout\">\r\n                @if(require_login){\r\n                <div class=\"d-flex flex-column justify-content-center align-items-center my-5 \">\r\n                    <div class=\"col-12 col-md-6 \">\r\n                        <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\r\n                        </app-login-form-ec>\r\n                    </div>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        } @else {\r\n        @if(modeSelectAddress == 'ONLY_ADDRESS_SELECTION'){\r\n        <div class=\"checkout-title my-2\">\r\n            <h3>{{'address-selection'|translate}}</h3>\r\n        </div>\r\n        }\r\n\r\n        @if(this.addressBook){\r\n            @if(this.addressBook?.length){\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    @for(item of addressBook; track $index; let i = $index){\r\n                    <div class=\"col-sm-6 col-12 my-3\">\r\n                        <div class=\"card p-3\">\r\n                            <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\r\n                                [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\r\n                            <div class=\"ms-5\">\r\n                                <h4 class=\"card-title\">\r\n                                    <strong>{{'address'|translate}}</strong><br>\r\n                                    <span class=\"text-uppercase h3\">{{item.street}}</span>\r\n                                </h4>\r\n                                <div class=\"row\">\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}\r\n                                    </h5>\r\n                                    <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\r\n                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\r\n                                    </h5>\r\n                                </div>\r\n                                <div class=\"row px-3\">\r\n                                    <div class=\"card p-2 bg-light w-100\">\r\n                                        <div class=\"card-body\">\r\n                                            <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'first-name'|translate}}</strong>\r\n                                                {{item.addressContact.firstName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'last-name'|translate}}</strong>\r\n                                                {{item.addressContact.lastName}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-type'|translate}}</strong>\r\n                                                {{getDocumentType(item.addressContact.documentType)}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'document-number'|translate}}</strong>\r\n                                                {{item.addressContact.documentNumber}}\r\n                                            </h6>\r\n                                            <h6 class=\"card-subtitle mb-2 text-muted\">\r\n                                                <strong>{{'email-address'|translate}}</strong>\r\n                                                {{item.addressContact.email}}\r\n                                            </h6>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                <div class=\"w-100\">\r\n                    <div class=\"row mt-df\">\r\n                        <div class=\"form-group col-12 col-md-12\">\r\n                            @if(!getLabelNotesParam()){\r\n                            <label class=\"form-label\">{{'notes'|translate}}</label>\r\n                            }\r\n                            @if(getLabelNotesParam(); as labelnotes){\r\n                            <label class=\"form-label\" [innerHTML]=\"labelnotes.value\"></label>\r\n                            <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\r\n                                [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\r\n                                autocomplete=\"off\">\r\n                            }\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"row d-flex flex-row\">\r\n                    <div class=\"col-12 d-flex justify-content-end\">\r\n                        <button (click)=\"onSelectAddress(cartItems)\" class=\"btn btn-primary text-white\" [disabled]=\"loadingStep\">{{(isLastOne\r\n                            ? 'finish-checkout' : (allready_data ? 'update' :\r\n                            'ready-form')) | translate}}\r\n                            <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->\r\n                        </button>\r\n                        \r\n                    </div>\r\n                </div>\r\n                @if(loading){\r\n                <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\r\n                    <app-loading-full-ec></app-loading-full-ec>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else {\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-12 text-center my-2\">\r\n                        <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n                            <app-loading-full-ec></app-loading-full-ec>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            }\r\n        } @else {\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12 text-center my-2\">\r\n                    <h4> {{'address-book-not-result' | translate }} </h4>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        }\r\n\r\n    }\r\n    @else {\r\n    <div class=\"container\">\r\n        <p>Por favor <a [routerLink]=\"['/auth/login']\"> Inicie Sesi\u00F3n</a></p>\r\n    </div>\r\n    }\r\n}\r\n@if(getTypeForm().viewForms.terms.enabled){\r\n<div class=\"modal fade\" id=\"terminos-y-condiciones\" tabindex=\"-1\" aria-labelledby=\"modalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-xl modal-dialog-scrollable\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"modalLabel\">T\u00E9rminos y condiciones</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <app-blocks-ec [section]=\"'terminos-y-condiciones'\" />\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n}" }]
         }], ctorParameters: () => [] });
 
 class ShipmentEcComponent {
@@ -9225,7 +9427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-sidebar-ec', standalone: true, imports: [RouterLink, AsyncPipe, CouponEcComponent, CartItemEcComponent, EcCurrencySymbolPipe, CouponEcComponent], template: "<div class=\"nav nav-sidebar py-4 mx-0 position-relative text-center shadow-sm border-bottom d-flex justify-content-center\">\r\n    <h2 class=\"row text-center\">Mi pedido</h2>\r\n    <div class=\" me-3 closeCart position-absolute end-0\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\">\r\n        <i class=\"fa fa-times-circle fs-5\" aria-hidden=\"true\"></i>\r\n    </div>\r\n</div>\r\n\r\n\r\n@if(cartItems$ | async; as items){\r\n    @if(items.length > 0){\r\n    <!-- PRODUCTO -->\r\n    <div class=\"d-flex flex-column mb-4 items border-bottom\">\r\n        @for(item of items; track $index; let i = $index){\r\n        <div class=\"productoCarrito mt-1 mb-2 w-100\">\r\n            <app-cart-item-ec [inSidebar]=\"true\" [item]=\"item\"></app-cart-item-ec>\r\n        </div>\r\n        }\r\n    </div>\r\n    <div class=\"d-flex mx-4 justify-content-between mt-2 \">\r\n        <p class=\"fw-bold\">Subtotal</p>\r\n        <p class=\"fw-700\">{{ (subTotalAmount$ | async) | ecCurrencySymbol}}</p>\r\n    </div>\r\n    <div class=\"mx-4 bordeBot py-2\">\r\n        <app-coupon-ec></app-coupon-ec>\r\n    </div>\r\n    <div class=\"d-flex mx-4 justify-content-between bordeBot2 mt-2\">\r\n        <p class=\"fw-bold\">Descuentos:</p>\r\n        <p>{{ (totalPromotionAmount$ | async) |ecCurrencySymbol }}</p>\r\n    </div>\r\n\r\n    <div class=\"d-flex mx-4 justify-content-between bordeBot2 pt-2\">\r\n        <!--  @if(this._cartService.cart.source.value.couponCode){\r\n                <a class=\"quitar-cupon text-dark\" role=\"button\"\r\n                (click)=\"removeCoupon()\">(Quitar cup\u00F3n)</a>\r\n            } -->\r\n    </div>\r\n    <div class=\"d-flex mx-4 justify-content-between mb-3 mt-2\">\r\n        <p class=\"fw-bold h5\">TOTAL</p>\r\n     <p class=\"fw-bold h5\">{{(totalAmount$ | async) | ecCurrencySymbol}}</p>\r\n    </div>\r\n    <div class=\"d-flex flex-column mx-4 justify-content-between mb-3\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\">\r\n        <a [routerLink]=\"['/cart']\" class=\"btn btnPedido mb-2\">FINALIZAR PEDIDO</a>\r\n        <a [routerLink]=\"['/collection']\" class=\"btn btnSeguir mb-3\">SEGUIR COMPRANDO</a>\r\n    </div>\r\n\r\n\r\n    } @else {\r\n    <div class=\"container-lg px-lg-0 px-md-4 my-5\">\r\n        <div class=\"row\">\r\n            <div class=\"col-12\">\r\n                <h5 class=\"text-center mb-sm-4 text-uppercase\"> \u00B7 Su carrito se\r\n                    encuentra vac\u00EDo \u00B7 </h5>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n}" }]
         }] });
 
-class RelatedProductsEcComponent {
+class RelatedProductsEcComponent extends BlockEcComponent {
     _productsService = inject(ProductsService);
     _analyticsService = inject(AnalyticsService);
     _router = inject(Router);
@@ -9243,10 +9445,12 @@ class RelatedProductsEcComponent {
     _relatedProductsSubject = new BehaviorSubject([]);
     relatedProducts$ = this._relatedProductsSubject.asObservable();
     keywordsToCompare = ['compare', 'comparar', 'comparacion', 'comparación', 'compared'];
-    swiperRelatedOptions = () => {
+    swiperOptions = () => {
         return {
             navigation: true,
             loop: true,
+            autoHeight: true,
+            autoplay: true,
             breakpoints: {
                 0: {
                     slidesPerView: 1
@@ -9255,10 +9459,10 @@ class RelatedProductsEcComponent {
                     slidesPerView: 2
                 },
                 768: {
-                    slidesPerView: 3,
+                    slidesPerView: 2,
                 },
                 992: {
-                    slidesPerView: 4,
+                    slidesPerView: 3,
                 },
                 1200: {
                     slidesPerView: 4,
@@ -9267,18 +9471,11 @@ class RelatedProductsEcComponent {
         };
     };
     constructor() {
+        super();
         if (isPlatformBrowser(this.platformId)) {
             this.document = document;
         }
-        afterNextRender(() => {
-            const swiperElemConstructor = this.document?.querySelector('#relatedProductsSwiper');
-            console.log('swiperElemConstructor', swiperElemConstructor);
-            if (swiperElemConstructor) {
-                Object.assign(swiperElemConstructor, this.swiperRelatedOptions());
-                this.swiperElement.set(swiperElemConstructor);
-                this.swiperElement()?.initialize();
-            }
-        });
+        // Swiper initialization moved to initSwiper() method called after data loads
     }
     ngOnInit() {
         console.log(this.productID);
@@ -9290,8 +9487,23 @@ class RelatedProductsEcComponent {
             const relatedProducts = res.filter((elem) => !this.includeKeyword(elem.title.toLowerCase()));
             this._relatedProductsSubject.next(relatedProducts);
             res.map((products) => this._analyticsService.callEvent('view_item_list', { products: products.items, item_list_name: products.title || 'Related Products', item_list_id: products.id || 'related-products' }));
+            // Inicializar swiper después de que los datos estén disponibles
+            setTimeout(() => {
+                this.initSwiper();
+            }, 100);
         });
     }
+    initSwiper() {
+        if (isPlatformBrowser(this.platformId)) {
+            const swiperElemConstructor = this.document?.querySelector('#relatedProductsSwiper');
+            console.log('swiperElemConstructor', swiperElemConstructor);
+            if (swiperElemConstructor) {
+                Object.assign(swiperElemConstructor, this.swiperOptions());
+                this.swiperElement.set(swiperElemConstructor);
+                this.swiperElement()?.initialize();
+            }
+        }
+    }
     includeKeyword = (word) => {
         let result = false;
         this.keywordsToCompare.forEach(keyword => {
@@ -9300,7 +9512,7 @@ class RelatedProductsEcComponent {
         return result;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RelatedProductsEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RelatedProductsEcComponent, isStandalone: true, selector: "app-related-products-ec", inputs: { appProduct: "appProduct", productID: "productID" }, ngImport: i0, template: "\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RelatedProductsEcComponent, isStandalone: true, selector: "app-related-products-ec", inputs: { appProduct: "appProduct", productID: "productID" }, usesInheritance: true, ngImport: i0, template: "\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RelatedProductsEcComponent, decorators: [{
             type: Component,
@@ -10139,6 +10351,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-store-ec', standalone: true, imports: [TranslateModule], template: "<!-- <div class=\"row w-100 mx-auto my-4 px-3 bb-s bt-md-s py-1\">\r\n    <strong>{{ 'stores' | translate }}</strong>\r\n</div>\r\n@if(stores){\r\n<div class=\"row\">\r\n    <div class=\"col-12 col-md-3 order-1 order-md-1\">\r\n        <div class=\"row\">\r\n            <div class=\"form-group w-100\">\r\n                <select (change)=\"selectChange($event.target.value)\" class=\"rounded-0 form-control form-control-sm\"\r\n                    id=\"exampleFormControlSelect1\">\r\n                    <option selected [value]=\"''\">Seleccione provincia</option>\r\n                    <option [value]=\"item.code\" *ngFor=\"let item of getProvices(stores)\"> {{item.name}}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-12 col-md-3 order-3 order-md-2\">\r\n        <div class=\"container-fluid scrolleable\" *ngIf=\"filterStores && filterStores.length\">\r\n            <div class=\"row mb-1\" *ngFor=\"let store of filterStores; let i = index\">\r\n                <div class=\"col-12\">\r\n                    <h6 class=\"\"><strong>{{ store.name }}</strong></h6>\r\n                    <label>{{ store.address }}</label>\r\n                    <label>{{ store.phone }}</label>\r\n                    <div [innerHtml]=\"store.note\"></div>\r\n                    <div class=\"text-right\">\r\n\r\n                        <a *ngIf=\"store.urlMap\" (click)=\"updateMap (store.urlMap)\" class=\"custom-a\">Ver mapa</a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-12 col-md-6 order-2 order-md-3 my-4 mt-md-0\">\r\n\r\n        <iframe id=\"map-iframe\" [src]=\"urlmap\" frameborder=\"0\"></iframe>\r\n    </div>\r\n</div>\r\n}@else {\r\n<div class=\"d-flex flex-row justify-content-center my-5 align-items-center alto-total\">\r\n    <h5 class=\"text-center\">{{ 'no-stores' | translate }}</h5>\r\n</div>\r\n}\r\n\r\n\r\n\r\n<ng-template #loading>\r\n    <div class=\"container\">\r\n        <div class=\"row\">\r\n            <div class=\"col-12 align-items-center\">\r\n                <div class=\"d-flex flex-column justify-content-center align-items-center my-5\">\r\n                    <app-loading-full-ec></app-loading-full-ec>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template> -->", styles: [".scrolleable{height:70vh;overflow:auto}@media screen and (max-width: 768px){.scrolleable{height:auto}}.background-white{background-color:#fff}.alto-total{height:60vh}.custom-a{color:#000}#map-iframe{width:100%;border:0;height:100%}@media screen and (max-width: 425px){#map-iframe{height:400px}}\n"] }]
         }], ctorParameters: () => [{ type: StoresService }, { type: CoreConstantsService }, { type: i3.DomSanitizer }] });
 
+class PriceRangeFilterComponent {
+    _filtersService = inject(FiltersService);
+    priceGap = 1;
+    roundStep = 5;
+    filter;
+    rangeChanged = new EventEmitter();
+    getSliderStyle(filter) {
+        if (!(filter instanceof PriceRangeFilter))
+            return { left: '0%', right: '0%' };
+        const left = this.calculateLeftPercentage(filter);
+        const right = this.calculateRightPercentage(filter);
+        return { left: `${left}%`, right: `${right}%` };
+    }
+    // Métodos para actualizar la barra del filtro por precio
+    calculateLeftPercentage(filter) {
+        if (!(filter instanceof PriceRangeFilter))
+            return 0;
+        const min = filter.minPrice;
+        const max = filter.maxPrice;
+        const currentMin = filter.currentMinPrice ?? min;
+        const clampedMin = Math.max(min, Math.min(currentMin, max));
+        return Math.max(0, Math.min(((clampedMin - min) / (max - min)) * 100, 100));
+    }
+    calculateRightPercentage(filter) {
+        if (!(filter instanceof PriceRangeFilter))
+            return 0;
+        const min = filter.minPrice;
+        const max = filter.maxPrice;
+        const currentMax = filter.currentMaxPrice ?? max;
+        const clampedMax = Math.max(min, Math.min(currentMax, max));
+        return Math.max(0, Math.min(100 - ((clampedMax - min) / (max - min)) * 100, 100));
+    }
+    // Método para actualizar los valores de precio seleccionados
+    updatePriceRange(filter) {
+        if (!(filter instanceof PriceRangeFilter))
+            return;
+        const min = filter.currentMinPrice ?? filter.minPrice;
+        const max = filter.currentMaxPrice ?? filter.maxPrice;
+        this._filtersService.updatePriceRangeFilter(min, max);
+    }
+    getMinValue(filter) {
+        return (filter instanceof PriceRangeFilter && filter.currentMinPrice != null)
+            ? filter.currentMinPrice
+            : filter.minPrice;
+    }
+    getMaxValue(filter) {
+        return (filter instanceof PriceRangeFilter && filter.currentMaxPrice != null)
+            ? filter.currentMaxPrice
+            : filter.maxPrice;
+    }
+    /**
+    * Redondea al múltiplo de 'step' respetando el redondeo entero:
+    * - Mínimo: redondea hacia abajo.
+    * - Máximo: redondea hacia arriba.
+    */
+    onRangeChange(event, type, filter) {
+        const input = event.target;
+        let value = parseFloat(input.value);
+        value = this.roundToNearest(value, this.roundStep, type, filter);
+        this.updateFilterPrices(type, value, filter, this.priceGap);
+    }
+    roundToNearest(value, step, type, filter) {
+        let rounded = Math.round(value / step) * step;
+        if (type === 'max' && rounded < filter.maxPrice) {
+            rounded = Math.ceil(value / step) * step;
+        }
+        if (type === 'min' && rounded > filter.minPrice) {
+            rounded = Math.floor(value / step) * step;
+        }
+        return rounded;
+    }
+    /**
+    * Actualiza los valores del filtro permitiendo que un input empuje al otro.
+    */
+    updateFilterPrices(type, value, filter, priceGap) {
+        const globalMin = filter.minPrice ?? 0;
+        const globalMax = filter.maxPrice;
+        let currentMin = filter.currentMinPrice ?? globalMin;
+        let currentMax = filter.currentMaxPrice ?? globalMax;
+        if (type === 'min') {
+            let newMin = Math.min(Math.max(value, globalMin), globalMax);
+            if (newMin + priceGap > currentMax) {
+                let newMaxCandidate = newMin + priceGap;
+                if (newMaxCandidate <= globalMax) {
+                    currentMax = newMaxCandidate;
+                }
+                else {
+                    newMin = globalMax - priceGap;
+                }
+            }
+            filter.currentMinPrice = newMin;
+            filter.currentMaxPrice = currentMax;
+        }
+        else if (type === 'max') {
+            let newMax = Math.max(Math.min(value, globalMax), globalMin);
+            if (newMax - priceGap < currentMin) {
+                let newMinCandidate = newMax - priceGap;
+                if (newMinCandidate >= globalMin) {
+                    currentMin = newMinCandidate;
+                }
+                else {
+                    newMax = globalMin + priceGap;
+                }
+            }
+            filter.currentMaxPrice = newMax;
+            filter.currentMinPrice = currentMin;
+        }
+    }
+    scrollUp = () => {
+        window.scroll(0, 0);
+        return true;
+    };
+    getFormattedMinPrice(filter) {
+        const value = (filter instanceof PriceRangeFilter && filter.currentMinPrice != null)
+            ? filter.currentMinPrice
+            : filter.minPrice;
+        return value;
+    }
+    getFormattedMaxPrice(filter) {
+        const value = (filter instanceof PriceRangeFilter && filter.currentMaxPrice != null)
+            ? filter.currentMaxPrice
+            : filter.maxPrice;
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PriceRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PriceRangeFilterComponent, isStandalone: true, selector: "lib-price-range-filter", inputs: { filter: "filter" }, outputs: { rangeChanged: "rangeChanged" }, ngImport: i0, template: "<div class=\"slider\">\r\n    <div class=\"slider\">\r\n        <div class=\"progress\" [ngStyle]=\"getSliderStyle(filter)\">\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"range-input d-flex gap-2\">\r\n    <input #rangeMin type=\"range\" class=\"range-min\" [min]=\"filter.minPrice\" [max]=\"filter.maxPrice\"\r\n        [value]=\"getMinValue(filter)\" (input)=\"onRangeChange($event, 'min', filter)\"\r\n        (change)=\"updatePriceRange(filter); scrollUp()\">\r\n    <input #rangeMax type=\"range\" class=\"range-max\" [min]=\"filter.minPrice\" [max]=\"filter.maxPrice\"\r\n        [value]=\"getMaxValue(filter)\" (input)=\"onRangeChange($event, 'max', filter)\"\r\n        (change)=\"updatePriceRange(filter); scrollUp()\">\r\n</div>\r\n<!-- precios M\u00EDnimo / M\u00E1ximo -->\r\n<div class=\"price-container mt-2\">\r\n    <div class=\"price-label-wrapper\">\r\n        <span class=\"price-label\">M\u00EDnimo:</span>\r\n        <span class=\"price-value\">\r\n            {{ (getFormattedMinPrice(filter) | ecCurrencySymbol) || '0' }}\r\n        </span>\r\n    </div>\r\n    <div class=\"price-label-wrapper\">\r\n        <span class=\"price-label\">M\u00E1ximo:</span>\r\n        <span class=\"price-value price-value-right\">\r\n            {{ getFormattedMaxPrice(filter) | ecCurrencySymbol }}\r\n        </span>\r\n    </div>\r\n</div>", styles: [":root{--slider-bg: #ddd;--slider-progress-bg: #0FA3AF;--thumb-bg: #0FA3AF;--thumb-border: #fff;--text-color: #131716;--label-color: #0FA3AF;--shadow-color: rgba(15, 163, 175, .4)}.slider{height:6px;border-radius:5px;background:var(--slider-bg);position:relative;overflow:hidden}.slider .progress{height:6px;position:absolute;left:0;right:0;border-radius:5px;background:var(--slider-progress-bg)}.range-input{position:relative;margin-bottom:14px}.range-input input[type=range]{position:absolute;top:-5px;width:100%;height:5px;background:none;pointer-events:none;-webkit-appearance:none}.range-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;height:20px;width:20px;border-radius:50%;background:var(--thumb-bg);border:3px solid var(--thumb-border);cursor:pointer;box-shadow:0 4px 8px #0003}.range-input input[type=range]::-moz-range-thumb{-moz-appearance:none;pointer-events:auto;height:20px;width:20px;border-radius:50%;background:var(--thumb-bg);border:3px solid var(--thumb-border);cursor:pointer;box-shadow:0 4px 8px #0003}.range-input input[type=range]:focus::-webkit-slider-thumb,.range-input input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 4px var(--shadow-color);outline:none}.price-container{display:flex;flex-wrap:wrap;gap:1rem}.price-label-wrapper{display:flex;flex-direction:column;flex:0 1 auto;min-width:0}.price-label{font-weight:600;color:var(--label-color);margin-bottom:.25rem}.price-value{white-space:nowrap;font-weight:700;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;font-size:14px}.price-value-right{text-align:right}\n"], dependencies: [{ kind: "pipe", type: EcCurrencySymbolPipe, name: "ecCurrencySymbol" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PriceRangeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-price-range-filter', standalone: true, imports: [EcCurrencySymbolPipe, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slider\">\r\n    <div class=\"slider\">\r\n        <div class=\"progress\" [ngStyle]=\"getSliderStyle(filter)\">\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"range-input d-flex gap-2\">\r\n    <input #rangeMin type=\"range\" class=\"range-min\" [min]=\"filter.minPrice\" [max]=\"filter.maxPrice\"\r\n        [value]=\"getMinValue(filter)\" (input)=\"onRangeChange($event, 'min', filter)\"\r\n        (change)=\"updatePriceRange(filter); scrollUp()\">\r\n    <input #rangeMax type=\"range\" class=\"range-max\" [min]=\"filter.minPrice\" [max]=\"filter.maxPrice\"\r\n        [value]=\"getMaxValue(filter)\" (input)=\"onRangeChange($event, 'max', filter)\"\r\n        (change)=\"updatePriceRange(filter); scrollUp()\">\r\n</div>\r\n<!-- precios M\u00EDnimo / M\u00E1ximo -->\r\n<div class=\"price-container mt-2\">\r\n    <div class=\"price-label-wrapper\">\r\n        <span class=\"price-label\">M\u00EDnimo:</span>\r\n        <span class=\"price-value\">\r\n            {{ (getFormattedMinPrice(filter) | ecCurrencySymbol) || '0' }}\r\n        </span>\r\n    </div>\r\n    <div class=\"price-label-wrapper\">\r\n        <span class=\"price-label\">M\u00E1ximo:</span>\r\n        <span class=\"price-value price-value-right\">\r\n            {{ getFormattedMaxPrice(filter) | ecCurrencySymbol }}\r\n        </span>\r\n    </div>\r\n</div>", styles: [":root{--slider-bg: #ddd;--slider-progress-bg: #0FA3AF;--thumb-bg: #0FA3AF;--thumb-border: #fff;--text-color: #131716;--label-color: #0FA3AF;--shadow-color: rgba(15, 163, 175, .4)}.slider{height:6px;border-radius:5px;background:var(--slider-bg);position:relative;overflow:hidden}.slider .progress{height:6px;position:absolute;left:0;right:0;border-radius:5px;background:var(--slider-progress-bg)}.range-input{position:relative;margin-bottom:14px}.range-input input[type=range]{position:absolute;top:-5px;width:100%;height:5px;background:none;pointer-events:none;-webkit-appearance:none}.range-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;height:20px;width:20px;border-radius:50%;background:var(--thumb-bg);border:3px solid var(--thumb-border);cursor:pointer;box-shadow:0 4px 8px #0003}.range-input input[type=range]::-moz-range-thumb{-moz-appearance:none;pointer-events:auto;height:20px;width:20px;border-radius:50%;background:var(--thumb-bg);border:3px solid var(--thumb-border);cursor:pointer;box-shadow:0 4px 8px #0003}.range-input input[type=range]:focus::-webkit-slider-thumb,.range-input input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 4px var(--shadow-color);outline:none}.price-container{display:flex;flex-wrap:wrap;gap:1rem}.price-label-wrapper{display:flex;flex-direction:column;flex:0 1 auto;min-width:0}.price-label{font-weight:600;color:var(--label-color);margin-bottom:.25rem}.price-value{white-space:nowrap;font-weight:700;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;font-size:14px}.price-value-right{text-align:right}\n"] }]
+        }], propDecorators: { filter: [{
+                type: Input
+            }], rangeChanged: [{
+                type: Output
+            }] } });
+
 //Types
 
 /**
@@ -10388,5 +10736,5 @@ const directives = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccountEcComponent, AddressingService, AnalyticsService, AuthEcComponent, AuthService, AuthStorageService, BlockBannerBoxEcComponent, BlockBannerFullEcComponent, BlockFormContactEcComponent, BlockHtmlEcComponent, BlockNewsletterEcComponent, BlockProductsEcComponent, BlocksEcComponent, BlocksRepositoryService, BlocksService, BreadcrumbEcComponent, CartEcComponent, CartItemEcComponent, CartService, ChannelService, CheckoutEcComponent, CheckoutService, CollectionEcComponent, ConfirmAccountEcComponent, ContactEcComponent, CoreConstantsService, CouponEcComponent, CurrencyService, DopplerService, ENVIRONMENT_TOKEN, EcCurrencySymbolPipe, FacebookPixelService, FaqsEcComponent, FiltersEcComponent, FiltersService, FiltersSortEcComponent, FooterEcComponent, ForgotPasswordEcComponent, FormService, GTMService, GoogleAnalyticsService, HeaderEcComponent, HomeEcComponent, LoadingFullEcComponent, LoadingInlineEcComponent, LoadingSectionEcComponent, LocalStorageService, LoginFormEcComponent, MagnizoomEcComponent, MetricoolPixelService, NgxLocalStorageService, OptionsService, OrderEcComponent, OrderUtilityService, OrdersListEcComponent, OrdersService, PaginationService, ParametersService, ParamsContext, PasswordResetEcComponent, PaymentService, PriceEcComponent, ProductDetailEcComponent, ProductDetailService, ProductEcComponent, ProductOffDirective, ProductStockDirective, ProductsService, ReCaptchaEcComponent, ReCaptchaService, RegisterFormEcComponent, RegisterWholesalerFormEcComponent, RelatedProductsEcComponent, ReviewsEcComponent, ReviewsFormEcComponent, SectionContainerEcComponent, ShareEcComponent, ShipmentService, SidebarEcComponent, StoresEcComponent, SuccessEcComponent, TestService, ToastService, VariantsEcComponent, authGuard, authInterceptor, directives, provideEnvironment };
+export { AccountEcComponent, AddressingService, AnalyticsService, AuthEcComponent, AuthService, AuthStorageService, BlockBannerBoxEcComponent, BlockBannerFullEcComponent, BlockFormContactEcComponent, BlockHtmlEcComponent, BlockNewsletterEcComponent, BlockProductsEcComponent, BlocksEcComponent, BlocksRepositoryService, BlocksService, BreadcrumbEcComponent, CartEcComponent, CartItemEcComponent, CartService, ChannelService, CheckoutEcComponent, CheckoutService, CollectionEcComponent, ConfirmAccountEcComponent, ContactEcComponent, CoreConstantsService, CouponEcComponent, CurrencyService, DopplerService, ENVIRONMENT_TOKEN, EcCurrencySymbolPipe, FacebookPixelService, FaqsEcComponent, FiltersEcComponent, FiltersService, FiltersSortEcComponent, FooterEcComponent, ForgotPasswordEcComponent, FormService, GTMService, GoogleAnalyticsService, HeaderEcComponent, HomeEcComponent, LoadingFullEcComponent, LoadingInlineEcComponent, LoadingSectionEcComponent, LocalStorageService, LoginFormEcComponent, MagnizoomEcComponent, MetricoolPixelService, NgxLocalStorageService, OptionsService, OrderEcComponent, OrderUtilityService, OrdersListEcComponent, OrdersService, PaginationService, ParametersService, ParamsContext, PasswordResetEcComponent, PaymentService, PriceEcComponent, PriceRangeFilterComponent, ProductDetailEcComponent, ProductDetailService, ProductEcComponent, ProductOffDirective, ProductStockDirective, ProductsService, ReCaptchaEcComponent, ReCaptchaService, RegisterFormEcComponent, RegisterWholesalerFormEcComponent, RelatedProductsEcComponent, ReviewsEcComponent, ReviewsFormEcComponent, SectionContainerEcComponent, ShareEcComponent, ShipmentService, SidebarEcComponent, StoresEcComponent, SuccessEcComponent, TestService, ToastService, VariantsEcComponent, authGuard, authInterceptor, directives, provideEnvironment };
 //# sourceMappingURL=ng-easycommerce-v18.mjs.map