ng-easycommerce-v18 0.0.4 → 0.0.6

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, CUSTOM_ELEMENTS_SCHEMA, Input, Pipe, EventEmitter, Output, forwardRef, afterRender, ViewChild, Injector } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, RendererFactory2, afterNextRender, signal, EnvironmentInjector, runInInjectionContext, Component, CUSTOM_ELEMENTS_SCHEMA, Input, Pipe, EventEmitter, Output, forwardRef, afterRender, ViewChild, Injector, Directive, Inject } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, AsyncPipe, CommonModule, JsonPipe, UpperCasePipe, Location, TitleCasePipe } from '@angular/common';
 import { take, BehaviorSubject, shareReplay, map, catchError, of, filter, ReplaySubject, firstValueFrom, concatMap, switchMap, combineLatest, throwError } from 'rxjs';
@@ -218,6 +218,12 @@ class CoreConstantsService {
      * @returns
      */
     mediaUrl = (postMedia) => this.ASSETS_URL + (this.ASSETS_URL == this.apiConstants.API_URL ? 'media/' : '') + (postMedia ? postMedia : "image/");
+    /**
+     * Retorna la url donde se guarda las imagenes.
+     * @param postMedia
+     * @returns
+     */
+    mediaImageUrl = (postMedia) => this.ASSETS_URL + (this.ASSETS_URL == this.apiConstants.API_URL ? 'media/image' : '') + (postMedia ? postMedia : "image/");
     /**
      * Retorna la url del sitio.
      * @param postMedia
@@ -5983,11 +5989,11 @@ class PriceEcComponent {
      */
     saleprice;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PriceEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PriceEcComponent, isStandalone: true, selector: "app-price-ec", inputs: { price: "price", saleprice: "saleprice" }, ngImport: i0, template: "@if(saleprice){\r\n    <!--With saleprice-->\r\n  <div class=\"\">\r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price text-center p-0 mx-0 mx-md-3\">\r\n            <del class=\"text-center  price\">\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=\" text-center delete p-0 mx-0 mx-md-3\">\r\n            <del class=\" text-center delete\">\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=\"text-center  price p-0 mx-0 mx-md-3\">\r\n            {{ saleprice | ecCurrencySymbol }}\r\n       </div>\r\n    }\r\n</div>  \r\n}@else {\r\n    <!--Only Price-->\r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price\">\r\n            {{ price.split(' - ')[0] | ecCurrencySymbol }} -\r\n            {{ price.split(' - ')[1] | ecCurrencySymbol }}\r\n        </div> \r\n    } @else {\r\n        <!--Simple price-->\r\n        <div class=\"text-center price p-0 mx-0 mx-md-3\">\r\n            {{ price | ecCurrencySymbol }}\r\n        </div>\r\n    }\r\n}", styles: [""], dependencies: [{ kind: "pipe", type: EcCurrencySymbolPipe, name: "ecCurrencySymbol" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PriceEcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-price-ec', standalone: true, imports: [EcCurrencySymbolPipe], template: "@if(saleprice){\r\n    <!--With saleprice-->\r\n  <div class=\"\">\r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price text-center p-0 mx-0 mx-md-3\">\r\n            <del class=\"text-center  price\">\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=\" text-center delete p-0 mx-0 mx-md-3\">\r\n            <del class=\" text-center delete\">\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=\"text-center  price p-0 mx-0 mx-md-3\">\r\n            {{ saleprice | ecCurrencySymbol }}\r\n       </div>\r\n    }\r\n</div>  \r\n}@else {\r\n    <!--Only Price-->\r\n    @if(price && price.split(' - ').length > 1){\r\n        <div class=\"price\">\r\n            {{ price.split(' - ')[0] | ecCurrencySymbol }} -\r\n            {{ price.split(' - ')[1] | ecCurrencySymbol }}\r\n        </div> \r\n    } @else {\r\n        <!--Simple price-->\r\n        <div class=\"text-center price p-0 mx-0 mx-md-3\">\r\n            {{ price | ecCurrencySymbol }}\r\n        </div>\r\n    }\r\n}" }]
+            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>  " }]
         }], propDecorators: { price: [{
                 type: Input
             }], saleprice: [{
@@ -6034,11 +6040,11 @@ class ProductEcComponent {
         return this.product.saleprice && this.product.saleprice !== this.product.price;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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\">\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    @if (shouldShowPrice) {\r\n    <app-price-ec [price]=\"product.price\" [saleprice]=\"product.saleprice\" class=\"\" />\r\n    }@else {\r\n    <p class=\"noPrice mb-1 mt-2 pt-1\"></p>\r\n    }\r\n\r\n    <!-- Nombre del producto -->\r\n    <h6 class=\"my-0\">{{ product.name | titlecase }}</h6>\r\n\r\n    <p class=\"sku mt-2\" [innerHTML]=\"product.shortdetails\"></p>\r\n\r\n    <div class=\"fixBottom mt-1\">\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\" [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        }\r\n        <!-- Cuando tiene marca especial y el tipo no es 'standard' -->\r\n        @if(product?.special_mark?.[0]?.type !== 'standard'){\r\n        @for (item of product.special_mark; track $index) {\r\n        <!-- Caso 1: Agotado o Disponible muy pronto -->\r\n        @if (item.type === 'out_of_stock' || item.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>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>}\r\n        <!-- Caso 2: Contacto por WhatsApp -->\r\n        @if (item.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(item.whatsappContact)\">\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n\r\n        </button>\r\n        }\r\n        <!-- Caso 3: Solicitar m\u00E1s informaci\u00F3n -->\r\n        @if (item.type === 'more_info') {\r\n        <button *ngIf=\"\" class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>\r\n        }\r\n\r\n        }\r\n        }\r\n\r\n        <!-- </ng-container>\r\n        <ng-template #noStock>\r\n            <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n                <ng-container *ngIf=\"isCollection; else normalText\">\r\n                    <span>{{(\"out-of-stock-short\" | translate) | uppercase}}</span>\r\n                </ng-container>\r\n                <ng-template #normalText>\r\n                    {{(\"out-of-stock-short\" | translate) | uppercase}}\r\n                </ng-template>\r\n            </button>\r\n        </ng-template> -->\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.0", 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\">\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    }@else {\r\n    <p class=\"noPrice\"></p>\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\" [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        }\r\n        <!-- Cuando tiene marca especial y el tipo no es 'standard' -->\r\n        @if(product.special_mark?.[0]?.type !== 'standard'){\r\n        @for (item of product.special_mark; track $index) {\r\n        <!-- Caso 1: Agotado o Disponible muy pronto -->\r\n        @if (item.type === 'out_of_stock' || item.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>{{ item.name | uppercase }} </span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>}\r\n        <!-- Caso 2: Contacto por WhatsApp -->\r\n        @if (item.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(item.whatsappContact)\">\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n\r\n        </button>\r\n        }\r\n        <!-- Caso 3: Solicitar m\u00E1s informaci\u00F3n -->\r\n        @if (item.type === 'more_info') {\r\n        <button *ngIf=\"\" class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>\r\n        }\r\n\r\n        }\r\n        }\r\n\r\n        <!-- </ng-container>\r\n        <ng-template #noStock>\r\n            <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n                <ng-container *ngIf=\"isCollection; else normalText\">\r\n                    <span>{{(\"out-of-stock-short\" | translate) | uppercase}}</span>\r\n                </ng-container>\r\n                <ng-template #normalText>\r\n                    {{(\"out-of-stock-short\" | translate) | uppercase}}\r\n                </ng-template>\r\n            </button>\r\n        </ng-template> -->\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductEcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-ec', standalone: true, imports: [CommonModule, PriceEcComponent, RouterLink, TranslateModule], template: "<a [routerLink]=\"['/product', product.id]\" class=\"text-decoration-none\">\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    @if (shouldShowPrice) {\r\n    <app-price-ec [price]=\"product.price\" [saleprice]=\"product.saleprice\" class=\"\" />\r\n    }@else {\r\n    <p class=\"noPrice mb-1 mt-2 pt-1\"></p>\r\n    }\r\n\r\n    <!-- Nombre del producto -->\r\n    <h6 class=\"my-0\">{{ product.name | titlecase }}</h6>\r\n\r\n    <p class=\"sku mt-2\" [innerHTML]=\"product.shortdetails\"></p>\r\n\r\n    <div class=\"fixBottom mt-1\">\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\" [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        }\r\n        <!-- Cuando tiene marca especial y el tipo no es 'standard' -->\r\n        @if(product?.special_mark?.[0]?.type !== 'standard'){\r\n        @for (item of product.special_mark; track $index) {\r\n        <!-- Caso 1: Agotado o Disponible muy pronto -->\r\n        @if (item.type === 'out_of_stock' || item.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>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>}\r\n        <!-- Caso 2: Contacto por WhatsApp -->\r\n        @if (item.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(item.whatsappContact)\">\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n\r\n        </button>\r\n        }\r\n        <!-- Caso 3: Solicitar m\u00E1s informaci\u00F3n -->\r\n        @if (item.type === 'more_info') {\r\n        <button *ngIf=\"\" class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>\r\n        }\r\n\r\n        }\r\n        }\r\n\r\n        <!-- </ng-container>\r\n        <ng-template #noStock>\r\n            <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n                <ng-container *ngIf=\"isCollection; else normalText\">\r\n                    <span>{{(\"out-of-stock-short\" | translate) | uppercase}}</span>\r\n                </ng-container>\r\n                <ng-template #normalText>\r\n                    {{(\"out-of-stock-short\" | translate) | uppercase}}\r\n                </ng-template>\r\n            </button>\r\n        </ng-template> -->\r\n    </div>\r\n</a>" }]
+            args: [{ selector: 'app-product-ec', standalone: true, imports: [CommonModule, PriceEcComponent, RouterLink, TranslateModule], template: "<a [routerLink]=\"['/product', product.id]\" class=\"text-decoration-none\">\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    }@else {\r\n    <p class=\"noPrice\"></p>\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\" [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        }\r\n        <!-- Cuando tiene marca especial y el tipo no es 'standard' -->\r\n        @if(product.special_mark?.[0]?.type !== 'standard'){\r\n        @for (item of product.special_mark; track $index) {\r\n        <!-- Caso 1: Agotado o Disponible muy pronto -->\r\n        @if (item.type === 'out_of_stock' || item.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>{{ item.name | uppercase }} </span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>}\r\n        <!-- Caso 2: Contacto por WhatsApp -->\r\n        @if (item.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(item.whatsappContact)\">\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n\r\n        </button>\r\n        }\r\n        <!-- Caso 3: Solicitar m\u00E1s informaci\u00F3n -->\r\n        @if (item.type === 'more_info') {\r\n        <button *ngIf=\"\" class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n            @if(isCollection){\r\n            <span>{{ item.name | uppercase }}</span>\r\n            }@else {\r\n            {{ item.name | uppercase }}\r\n            }\r\n        </button>\r\n        }\r\n\r\n        }\r\n        }\r\n\r\n        <!-- </ng-container>\r\n        <ng-template #noStock>\r\n            <button class=\"btn\" [ngClass]=\"isCollection ? 'px-2 w-100 d-sm-block' : 'py-2 px-4'\">\r\n                <ng-container *ngIf=\"isCollection; else normalText\">\r\n                    <span>{{(\"out-of-stock-short\" | translate) | uppercase}}</span>\r\n                </ng-container>\r\n                <ng-template #normalText>\r\n                    {{(\"out-of-stock-short\" | translate) | uppercase}}\r\n                </ng-template>\r\n            </button>\r\n        </ng-template> -->\r\n    </div>\r\n</a>" }]
         }], propDecorators: { product: [{
                 type: Input,
                 args: [{
@@ -7168,9 +7174,12 @@ class FiltersEcComponent {
     filters = [];
     filter$ = this._filtersService.filters$;
     setSelect;
+    rangeMinRef;
+    rangeMaxRef;
+    priceGapPercentage = 0.1;
     constructor() {
         this.filter$.subscribe(res => {
-            this.filters = this._filtersService.getSpecificFilters(['attributes', 'categories', 'dynamics']);
+            this.filters = this._filtersService.getSpecificFilters(['attributes', 'categories', 'price_range', 'dynamics']);
         });
     }
     getSpecificFilter(type) {
@@ -7196,6 +7205,12 @@ class FiltersEcComponent {
     * - 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) {
@@ -7279,13 +7294,19 @@ class FiltersEcComponent {
         return true;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FiltersEcComponent, isStandalone: true, selector: "lib-filters-ec", inputs: { setSelect: "setSelect" }, ngImport: i0, template: "<p>filters-ec works!</p>\r\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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 {
@@ -7307,6 +7328,8 @@ class ProductDetailEcComponent {
     code = '';
     showFormContact = false;
     showReviews = false;
+    reset = false;
+    success = false;
     quantity = signal(1);
     parameters$ = this.parametersService.getParameters();
     hasParams = this.parametersService.hasParams;
@@ -7335,8 +7358,9 @@ class ProductDetailEcComponent {
         const currentUrl = this._consts.url() + this._location.path(true); // `true` incluye el query string
         this._meta.updateTag({ property: 'og:title', content: product.name || '' });
         this._meta.updateTag({ property: 'og:description', content: descripcionLimpia || '' });
-        this._meta.updateTag({ property: 'og:image', content: this._consts.mediaUrl(Array.isArray(product.picturesdefault) ? product.picturesdefault[0] : product.picturesdefault) || '' });
+        this._meta.updateTag({ property: 'og:image', content: this._consts.mediaImageUrl(Array.isArray(product.picturesdefault) ? product.picturesdefault[0] : product.picturesdefault) || '' });
         this._meta.updateTag({ property: 'og:url', content: currentUrl });
+        this._meta.updateTag({ property: 'og:type', content: 'product' });
     }
     sanitizedHtml(html) {
         return this._domSanitizer.bypassSecurityTrustHtml(html);
@@ -7379,6 +7403,10 @@ class ProductDetailEcComponent {
             }
         }, 500);
     }
+    resetForm = () => {
+        this.reset = !this.reset;
+        this.success = true;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductDetailEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: ProductDetailEcComponent, isStandalone: true, selector: "app-product-detail-ec", ngImport: i0, template: "", styles: [""] });
 }
@@ -7394,11 +7422,11 @@ class VariantsEcComponent {
         this._productDetailsService.setOption(optionCode, optionValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: VariantsEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: VariantsEcComponent, isStandalone: true, selector: "app-variants-ec", ngImport: i0, template: "@if(options$ | async; as options){\r\n    @if(options && options.length){\r\n        @for(option of options; track $index){\r\n            @switch (option.type) {\r\n                @case ('color') {\r\n                <h5>Colores disponibles</h5>\r\n                <div class=\"row w-100 mx-auto pb-3 mb-3\">\r\n                    @for(value of option.values; track $index; let x = $index){\r\n                    <a role=\"button\" [title]=\"value.description\" (click)=\"setOption(option.code, value.name)\"\r\n                        [class]=\"'item m-1 circle ' + (value.selected ? 'shadow' : '')\" [id]=\"x + value.name\"\r\n                        [style.background]=\"'#' + value.name\" [style.box-shadow]=\"(value.selected ? '0px 0px 0px 2px #000' : 'none')\">\r\n                    </a>\r\n                    }\r\n                </div>\r\n                }\r\n                @case ('size') {\r\n\r\n                }\r\n                @default {\r\n\r\n                }\r\n            }\r\n        }\r\n    } @else {\r\n    <p>loading</p>\r\n    }\r\n}\r\n\r\n<!-- <div *ngIf=\"(options$ | async) as options\">\r\n    <div *ngIf=\"options && options.length; else loading\">\r\n         <div *ngFor=\"let option of options; let i = index\">\r\n\r\n              <div [ngSwitch]=\"option.type\">\r\n                   <div *ngSwitchCase=\"'color'\">\r\n                        <h5>Colores disponibles</h5>\r\n                        <div class=\"row w-100 mx-auto pb-3 mb-3\">\r\n                            <a *ngFor=\"let value of option.values; let x = index\" role=\"button\"\r\n                                (click)=\"setOption(option.code, value.name)\" [class]=\"'item m-1 ' + (value.selected ? 'shadow' : '')\"\r\n                                [id]=\"x + value.name\"\r\n                                [style.background]=\"'#' + value.name\"\r\n                                [style.box-shadow]=\"(value.selected ? '0px 0px 0px 2px #000' : 'none')\">\r\n                            </a>\r\n                        </div>\r\n                   </div>\r\n                   <div *ngSwitchCase=\"'size'\">\r\n                        <h5>Talles displonibles</h5>\r\n                        <div class=\"row w-100 mx-auto pb-3\">\r\n                             <a *ngFor=\"let value of option.values; let x = index\" role=\"buttom\"\r\n                                  (click)=\"setOption(option.code, value.name)\"\r\n                                  [id]=\"x + value.name\"\r\n                                  [class]=\"'btn item m-1 ' + (value.selected ? 'selected-size' : 'unselected-size')\">\r\n                                  {{ value.name }}\r\n                             </a>\r\n                        </div>\r\n                   </div>\r\n              </div>\r\n         </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n    <div class=\"loading-container\">\r\n         <div id=\"loading\"></div>\r\n    </div>\r\n</ng-template> -->", styles: [".circle{width:32px;height:32px;border-radius:50%}.shadow{border:1px solid #000}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: VariantsEcComponent, isStandalone: true, selector: "app-variants-ec", ngImport: i0, template: "@if(options$ | async; as options){\r\n@if(options && options.length){\r\n@for(option of options; track $index){\r\n@switch (option.type) {\r\n@case ('color') {\r\n<h5>Colores disponibles</h5>\r\n<div class=\"row w-100 mx-auto pb-3 mb-3\">\r\n    @for(value of option.values; track $index; let x = $index){\r\n    <a role=\"button\" [title]=\"value.description\" (click)=\"setOption(option.code, value.name)\"\r\n        [class]=\"'item m-1 circle ' + (value.selected ? 'shadow' : '')\" [id]=\"x + value.name\"\r\n        [style.background]=\"'#' + value.name\" [style.box-shadow]=\"(value.selected ? '0px 0px 0px 2px #000' : 'none')\">\r\n    </a>\r\n    }\r\n</div>\r\n}\r\n@case ('size') {\r\n<h5>Talles displonibles</h5>\r\n<div class=\"row w-100 mx-auto pb-3\">\r\n    @for(value of option.values; track $index; let x = $index){\r\n    <a role=\"buttom\" (click)=\"setOption(option.code, value.name)\" [id]=\"x + value.name\"\r\n        [class]=\"'btn item m-1 ' + (value.selected ? 'selected-size' : 'unselected-size')\">\r\n        {{ value.name }}\r\n    </a>\r\n    }\r\n\r\n</div>\r\n}\r\n@default {\r\n\r\n}\r\n}\r\n}\r\n}\r\n}\r\n", styles: [".circle{width:32px;height:32px;border-radius:50%}.shadow{border:1px solid #000}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: VariantsEcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-variants-ec', standalone: true, imports: [AsyncPipe], template: "@if(options$ | async; as options){\r\n    @if(options && options.length){\r\n        @for(option of options; track $index){\r\n            @switch (option.type) {\r\n                @case ('color') {\r\n                <h5>Colores disponibles</h5>\r\n                <div class=\"row w-100 mx-auto pb-3 mb-3\">\r\n                    @for(value of option.values; track $index; let x = $index){\r\n                    <a role=\"button\" [title]=\"value.description\" (click)=\"setOption(option.code, value.name)\"\r\n                        [class]=\"'item m-1 circle ' + (value.selected ? 'shadow' : '')\" [id]=\"x + value.name\"\r\n                        [style.background]=\"'#' + value.name\" [style.box-shadow]=\"(value.selected ? '0px 0px 0px 2px #000' : 'none')\">\r\n                    </a>\r\n                    }\r\n                </div>\r\n                }\r\n                @case ('size') {\r\n\r\n                }\r\n                @default {\r\n\r\n                }\r\n            }\r\n        }\r\n    } @else {\r\n    <p>loading</p>\r\n    }\r\n}\r\n\r\n<!-- <div *ngIf=\"(options$ | async) as options\">\r\n    <div *ngIf=\"options && options.length; else loading\">\r\n         <div *ngFor=\"let option of options; let i = index\">\r\n\r\n              <div [ngSwitch]=\"option.type\">\r\n                   <div *ngSwitchCase=\"'color'\">\r\n                        <h5>Colores disponibles</h5>\r\n                        <div class=\"row w-100 mx-auto pb-3 mb-3\">\r\n                            <a *ngFor=\"let value of option.values; let x = index\" role=\"button\"\r\n                                (click)=\"setOption(option.code, value.name)\" [class]=\"'item m-1 ' + (value.selected ? 'shadow' : '')\"\r\n                                [id]=\"x + value.name\"\r\n                                [style.background]=\"'#' + value.name\"\r\n                                [style.box-shadow]=\"(value.selected ? '0px 0px 0px 2px #000' : 'none')\">\r\n                            </a>\r\n                        </div>\r\n                   </div>\r\n                   <div *ngSwitchCase=\"'size'\">\r\n                        <h5>Talles displonibles</h5>\r\n                        <div class=\"row w-100 mx-auto pb-3\">\r\n                             <a *ngFor=\"let value of option.values; let x = index\" role=\"buttom\"\r\n                                  (click)=\"setOption(option.code, value.name)\"\r\n                                  [id]=\"x + value.name\"\r\n                                  [class]=\"'btn item m-1 ' + (value.selected ? 'selected-size' : 'unselected-size')\">\r\n                                  {{ value.name }}\r\n                             </a>\r\n                        </div>\r\n                   </div>\r\n              </div>\r\n         </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n    <div class=\"loading-container\">\r\n         <div id=\"loading\"></div>\r\n    </div>\r\n</ng-template> -->", styles: [".circle{width:32px;height:32px;border-radius:50%}.shadow{border:1px solid #000}\n"] }]
+            args: [{ selector: 'app-variants-ec', standalone: true, imports: [AsyncPipe], template: "@if(options$ | async; as options){\r\n@if(options && options.length){\r\n@for(option of options; track $index){\r\n@switch (option.type) {\r\n@case ('color') {\r\n<h5>Colores disponibles</h5>\r\n<div class=\"row w-100 mx-auto pb-3 mb-3\">\r\n    @for(value of option.values; track $index; let x = $index){\r\n    <a role=\"button\" [title]=\"value.description\" (click)=\"setOption(option.code, value.name)\"\r\n        [class]=\"'item m-1 circle ' + (value.selected ? 'shadow' : '')\" [id]=\"x + value.name\"\r\n        [style.background]=\"'#' + value.name\" [style.box-shadow]=\"(value.selected ? '0px 0px 0px 2px #000' : 'none')\">\r\n    </a>\r\n    }\r\n</div>\r\n}\r\n@case ('size') {\r\n<h5>Talles displonibles</h5>\r\n<div class=\"row w-100 mx-auto pb-3\">\r\n    @for(value of option.values; track $index; let x = $index){\r\n    <a role=\"buttom\" (click)=\"setOption(option.code, value.name)\" [id]=\"x + value.name\"\r\n        [class]=\"'btn item m-1 ' + (value.selected ? 'selected-size' : 'unselected-size')\">\r\n        {{ value.name }}\r\n    </a>\r\n    }\r\n\r\n</div>\r\n}\r\n@default {\r\n\r\n}\r\n}\r\n}\r\n}\r\n}\r\n", styles: [".circle{width:32px;height:32px;border-radius:50%}.shadow{border:1px solid #000}\n"] }]
         }] });
 
 class BreadcrumbEcComponent {
@@ -7428,6 +7456,8 @@ class CartEcComponent {
     totalPromotionAmount$ = this._cartService.getTotalPromotionAmount();
     taxesAmount$ = this._cartService.getTaxesAmount();
     totalAmount$ = this._cartService.getTotalAmount();
+    _authService = inject(AuthService);
+    isAuthenticated$ = this._authService.isAuthenticated();
     removeCoupon() {
         this._cartService.removeCoupon();
     }
@@ -7448,6 +7478,7 @@ class CartItemEcComponent {
     mediaUrl = this._constants.mediaUrl();
     quantity = 0;
     variantsToShow = ['TALLE', 'COLOR'];
+    updateStock = false;
     ngOnInit() {
         this.quantity = this.item.quantity;
         console.log(this.item, this.mediaUrl);
@@ -7512,6 +7543,29 @@ class CartItemEcComponent {
             return null;
         }
     }
+    createDiscountMessage(saleprice, price) {
+        if (isNaN(saleprice) || isNaN(price) || saleprice >= price || saleprice <= 0 || price <= 0) {
+            return '';
+        }
+        let discountPercentage = Math.round(((price - saleprice) / price) * 100);
+        let discountMessage = `${discountPercentage}% OFF`;
+        return discountMessage;
+    }
+    checkStock(product) {
+        for (const variant of product.product.variants) {
+            if (product.variant_id === variant.code) {
+                if (variant.stock === 0) {
+                    this.updateStock = true;
+                    return '0';
+                }
+                else if (product.quantity > variant.stock) {
+                    this.updateStock = true;
+                    return variant.stock;
+                }
+            }
+        }
+        return false; // Solo se ejecuta si no se cumple la condición
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CartItemEcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: CartItemEcComponent, isStandalone: true, selector: "app-cart-item-ec", inputs: { item: "item", inSidebar: "inSidebar" }, ngImport: i0, template: "@if(!inSidebar){\r\n<p>cart-item-ec works!</p>\r\n}@else{\r\n\r\n<div class=\"row\">\r\n    <div class=\"col-2\">\r\n        @let product= item.product;\r\n        @if(item.variant_id && product.variants.length>0){\r\n            <img [src]=\"mediaUrl +  product.variants[0].images[0]\" alt=\"\" class=\"img-fluid\">\r\n        }@else{\r\n            <img [src]=\"mediaUrl +  product.picturesdefault[0]\" alt=\"\" class=\"img-fluid\">\r\n        }\r\n    </div>\r\n    <div class=\"col-8\">\r\n        <div class=\"info d-flex flex-column align-items-start\">\r\n            <a class=\"title text-dark text-decoration-none m-0 p-0 h6 mb-0\"\r\n                [routerLink]=\"['/product', item.variant_id]\">{{\r\n                item.product.name | titlecase\r\n                }}</a>\r\n            <div class=\"qty1\">\r\n                <span>{{ item.product.id}}</span>\r\n            </div>\r\n            <div class=\"price h6 fw-bold mb-0 pb-0\">{{ item.product.price | ecCurrencySymbol\r\n                }}</div>\r\n             @if(getVariants(item); as options){\r\n                <div class=\"d-flex align-items-center p-0\">\r\n                    @for(option of options; track $index){\r\n                        <span class=\"me-1\"> {{option.name | titlecase}}:</span>\r\n                        @if(option.name == 'COLOR'){\r\n                            <div class=\"p-2 rounded\" [style.background]=\"'#' + option.value\"></div>\r\n                        }@else{\r\n                            <b>{{option.value}}</b>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n            <div class=\"input-group mb-3\">\r\n                <button (click)=\"less(item.product.variants[0]?.stock)\" class=\"btn btn-outline-secondary\" type=\"button\" id=\"button-addon1\">\r\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\r\n                </button>\r\n                <input type=\"text\" class=\"form-control text-center\" placeholder=\"\" aria-label=\"Example text with button addon\"\r\n                    aria-describedby=\"button-addon1\" [value]=\"item.quantity\" min=\"1\" step=\"1\" [(ngModel)]=\"quantity\"\r\n                    (change)=\"updateQuantity(item.product.variants[0]?.stock)\">\r\n                <button (click)=\"plus(item.product.variants[0]?.stock)\" class=\"btn btn-outline-secondary\" type=\"button\" id=\"button-addon1\">\r\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-2\">\r\n        <a (click)=\"deleteCartItem()\" class=\"btn botBorrar\"><i class=\"fa fa-trash\" aria-hidden=\"true\"></i></a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n}", styles: [""], dependencies: [{ kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: EcCurrencySymbolPipe, name: "ecCurrencySymbol" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
@@ -8640,16 +8694,206 @@ const authInterceptor = (req, next) => {
     return next(req);
 };
 
+class ProductStockDirective {
+    templateRef;
+    viewContainer;
+    productDirective = null;
+    ecProductStockElse;
+    set ecProductStock(product) {
+        this.productDirective = product;
+        this.viewContainer.clear();
+        if (this.validateStock()) {
+            if (this.ecProductStockElse) {
+                this.viewContainer.createEmbeddedView(this.ecProductStockElse);
+            }
+            else {
+                console.error('falta definir el template de agotado');
+            }
+        }
+        else {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+    }
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    ngOnChanges() { }
+    validateStock = () => {
+        if (!this.productDirective || this.productDirective.special_mark == undefined || this.productDirective.variants == undefined) {
+            setTimeout(() => {
+                this.validateStock();
+            }, 1000);
+            return false; // Ensure a boolean is returned
+        }
+        else {
+            return this.checkValuesForStock();
+        }
+    };
+    checkValuesForStock = () => {
+        let existMark = false;
+        // Check special_mark
+        if (this.productDirective?.special_mark) {
+            this.productDirective.special_mark.forEach(special_mark => {
+                if (special_mark.type === 'out_of_stock') {
+                    existMark = true;
+                }
+            });
+        }
+        // Check variants
+        if (!existMark && this.productDirective) {
+            existMark = !!(this.productDirective.variant_id
+                ? this.productDirective.variants?.find(v => v.code === this.productDirective?.variant_id && v.stock > 0) === undefined
+                : this.productDirective.variants?.find(v => v.stock > 0) === undefined);
+        }
+        return existMark;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductStockDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ProductStockDirective, selector: "[ecProductStock]", inputs: { ecProductStockElse: "ecProductStockElse", ecProductStock: "ecProductStock" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductStockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[ecProductStock]"
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ecProductStockElse: [{
+                type: Input
+            }], ecProductStock: [{
+                type: Input
+            }] } });
+
+class ParamsContext {
+}
+class ProductOffDirective {
+    document;
+    elementRef;
+    renderer;
+    product;
+    classStr = "";
+    customMessageStr = "{discount}% OFF";
+    set ecProductOff(value) {
+        this.product = value;
+    }
+    set classStrSpacing(value) {
+        this.classStr = value;
+    }
+    set customMessage(value) {
+        this.customMessageStr = value;
+    }
+    constructor(document, elementRef, renderer) {
+        this.document = document;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngOnInit() { }
+    hasDiscount = (product) => {
+        if (!product.saleprice) {
+            return null;
+        }
+        if (typeof product.price === 'string' && product.price.includes("-") &&
+            typeof product.saleprice === 'string' && product.saleprice.includes("-")) {
+            let prices = product.price.split('-');
+            let saleprices = product.saleprice.split('-');
+            let saleBf = this.generateDiscount(prices[1]?.trim(), saleprices[1]?.trim());
+            let saleLt = this.generateDiscount(prices[0]?.trim(), saleprices[0]?.trim());
+            if (!saleBf && !saleLt) {
+                return null;
+            }
+            if (saleBf && saleLt && saleBf === saleLt) {
+                return `${saleBf}`;
+            }
+            if (saleBf && !saleLt) {
+                return `${saleBf}`;
+            }
+            if (!saleBf && saleLt) {
+                return `${saleLt}`;
+            }
+            return `${saleBf} - ${saleLt}`;
+        }
+        else {
+            if (parseInt(product.price) > parseInt(product.saleprice)) {
+                return this.generateDiscount(product.price, product.saleprice)?.toString() || null;
+            }
+        }
+        return null; // Ensure a return value in all code paths
+    };
+    generateDiscount = (price, saleprice) => {
+        if (parseFloat(price) > parseFloat(saleprice)) {
+            let result = ((parseFloat(price) - parseFloat(saleprice)) /
+                parseFloat(price)) *
+                100;
+            if (Number.isNaN(result)) {
+                return null;
+            }
+            else
+                return Math.round(result); //Math.floor(result);
+        }
+        return null;
+    };
+    ngOnChanges(changes) {
+        if (this.product.price) {
+            let discount = this.hasDiscount(this.product);
+            this.elementRef.nativeElement.childNodes.forEach((node) => {
+                this.renderer.removeChild(this.elementRef.nativeElement, node);
+            });
+            if (discount) {
+                this.renderer.appendChild(this.elementRef.nativeElement, this.createImage(discount));
+            }
+            // else {
+            //     this.renderer.removeChild(this.elementRef.nativeElement.parentElement, this.elementRef.nativeElement);
+            // }
+        }
+    }
+    createImage = (discount) => {
+        let popover = this.renderer.createElement("a");
+        this.customMessageStr = this.customMessageStr.replace('{discount}', discount);
+        this.renderer.setProperty(popover, "innerHTML", this.customMessageStr);
+        this.classStr?.split(" ").forEach((cl) => {
+            try {
+                this.renderer.addClass(popover, cl);
+            }
+            catch (error) {
+                console.log('add class directive -> ', error);
+            }
+        });
+        return popover;
+    };
+    ngOnDestroy() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductOffDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ProductOffDirective, selector: "[ecProductOff]", inputs: { ecProductOff: "ecProductOff", classStrSpacing: "classStrSpacing", customMessage: "customMessage" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProductOffDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[ecProductOff]",
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { ecProductOff: [{
+                type: Input
+            }], classStrSpacing: [{
+                type: Input
+            }], customMessage: [{
+                type: Input
+            }] } });
+
+//Directives base
+const directives = [
+    ProductOffDirective,
+    ProductStockDirective,
+];
+
 /*
  * Public API Surface of ng-easycommerce
  */
 //Components
-// Directives
-//export * from './lib/ec-directive/index';
 
 /**
  * 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, CoreConstantsService, CouponEcComponent, CurrencyService, DopplerService, ENVIRONMENT_TOKEN, EcCurrencySymbolPipe, FacebookPixelService, 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, PaymentService, PriceEcComponent, ProductDetailEcComponent, ProductDetailService, ProductEcComponent, ProductsService, ReCaptchaEcComponent, ReCaptchaService, RegisterFormEcComponent, RegisterWholesalerFormEcComponent, ShipmentService, SidebarEcComponent, SuccessEcComponent, TestService, ToastService, VariantsEcComponent, authGuard, authInterceptor, 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, CoreConstantsService, CouponEcComponent, CurrencyService, DopplerService, ENVIRONMENT_TOKEN, EcCurrencySymbolPipe, FacebookPixelService, 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, PaymentService, PriceEcComponent, ProductDetailEcComponent, ProductDetailService, ProductEcComponent, ProductOffDirective, ProductStockDirective, ProductsService, ReCaptchaEcComponent, ReCaptchaService, RegisterFormEcComponent, RegisterWholesalerFormEcComponent, ShipmentService, SidebarEcComponent, SuccessEcComponent, TestService, ToastService, VariantsEcComponent, authGuard, authInterceptor, directives, provideEnvironment };
 //# sourceMappingURL=ng-easycommerce-v18.mjs.map