ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-components/product-ec/product-ec.component.html

@@ -0,0 +1,31 @@
+@if(isProductBox){
+    <div class="position-relative h-100">
+        <div class="marcas position-absolute w-100">
+            <span>20 %OFF</span>
+        </div>
+        <div>
+            @if(product.picturesdefault){
+                <img [src]="mediaUrl+product.picturesdefault[0]" class="img-fluid mx-auto" />
+            }
+        </div>
+        <div class="d-flex flex-column justify-center align-items-center">
+            <h6 class="productName text-center">{{product.name}}aa</h6> 
+            <p class="productID">{{product.id}}</p>
+            @if(product.shortdetails){
+                <div class="shortdetails" [innerHTML]="product.shortdetails"></div>
+            }
+            @if(product.currentOption && product.currentOption.name){
+                <p class="currentOption" >{{product.currentOption.name}}</p>
+            }
+        </div>
+        <div class="d-flex flex-column justify-center alig-items-center">
+            @if(true){
+                <!--Servicio de auth para controlar si esta logueado o no-->
+                <app-price-ec [price]="product.price" [saleprice]="product.saleprice" class="" />
+            }
+            <button class="btn btn-primary" routerLink="{{'/product/' + product.id}}">Ver Producto</button>
+        </div>
+    </div>
+} @else {
+    
+}

package/projects/ng-easycommerce/src/lib/ec-components/product-ec/product-ec.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { Product } from '../../interfaces';
+import { CoreConstantsService } from '../../constants';
+import { AnalyticsService } from '../../ec-services';
+import { Router, RouterLink } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { PriceEcComponent } from "../widgets-ec/price-ec/price-ec.component";
+/**
+ * Componente que se encarga de manejar un producto.
+ * @class ProductEcComponent
+ */
+@Component({
+	selector: 'app-product-ec',
+	standalone: true,
+	imports: [CommonModule, PriceEcComponent, RouterLink],
+	templateUrl: './product-ec.component.html',
+	styleUrl: './product-ec.component.scss'
+})
+export class ProductEcComponent implements OnInit {
+	/**
+	 * Datos del producto.
+	 */
+	@Input({
+		required: true
+	})
+	product!: Product;
+	/**
+	 * Se usa para saber si el producto es de tipo Box o no y definir la vista adecuada.
+	 */
+	@Input() isProductBox:boolean = true;
+	/**
+	 * Constantes del core
+	 */
+	@Output() loaded = new EventEmitter<number>();
+
+	ngOnInit() {
+	  this.loaded.emit(this.product.id);
+	}
+	private consts:CoreConstantsService = inject(CoreConstantsService)
+	private analyticsService: AnalyticsService = inject(AnalyticsService)
+	private router:Router = inject(Router)
+	/**
+	 * URL para las imagenes del producto.
+	 */
+	public mediaUrl:string = this.consts.mediaUrl()
+}

package/projects/ng-easycommerce/src/lib/ec-components/variants-ec/variants-ec.component.html

@@ -0,0 +1,65 @@
+@if(options$ | async; as options){
+    @if(options && options.length){
+        @for(option of options; track $index){
+            @switch (option.type) {
+                @case ('color') {
+                <h5>Colores disponibles</h5>
+                <div class="row w-100 mx-auto pb-3 mb-3">
+                    @for(value of option.values; track $index; let x = $index){
+                    <a role="button" [title]="value.description" (click)="setOption(option.code, value.name)"
+                        [class]="'item m-1 circle ' + (value.selected ? 'shadow' : '')" [id]="x + value.name"
+                        [style.background]="'#' + value.name" [style.box-shadow]="(value.selected ? '0px 0px 0px 2px #000' : 'none')">
+                    </a>
+                    }
+                </div>
+                }
+                @case ('size') {
+
+                }
+                @default {
+
+                }
+            }
+        }
+    } @else {
+    <p>loading</p>
+    }
+}
+
+<!-- <div *ngIf="(options$ | async) as options">
+    <div *ngIf="options && options.length; else loading">
+         <div *ngFor="let option of options; let i = index">
+
+              <div [ngSwitch]="option.type">
+                   <div *ngSwitchCase="'color'">
+                        <h5>Colores disponibles</h5>
+                        <div class="row w-100 mx-auto pb-3 mb-3">
+                            <a *ngFor="let value of option.values; let x = index" role="button"
+                                (click)="setOption(option.code, value.name)" [class]="'item m-1 ' + (value.selected ? 'shadow' : '')"
+                                [id]="x + value.name"
+                                [style.background]="'#' + value.name"
+                                [style.box-shadow]="(value.selected ? '0px 0px 0px 2px #000' : 'none')">
+                            </a>
+                        </div>
+                   </div>
+                   <div *ngSwitchCase="'size'">
+                        <h5>Talles displonibles</h5>
+                        <div class="row w-100 mx-auto pb-3">
+                             <a *ngFor="let value of option.values; let x = index" role="buttom"
+                                  (click)="setOption(option.code, value.name)"
+                                  [id]="x + value.name"
+                                  [class]="'btn item m-1 ' + (value.selected ? 'selected-size' : 'unselected-size')">
+                                  {{ value.name }}
+                             </a>
+                        </div>
+                   </div>
+              </div>
+         </div>
+    </div>
+</div>
+
+<ng-template #loading>
+    <div class="loading-container">
+         <div id="loading"></div>
+    </div>
+</ng-template> -->

package/projects/ng-easycommerce/src/lib/ec-components/variants-ec/variants-ec.component.scss

@@ -0,0 +1,8 @@
+.circle{
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+.shadow{
+    border: 1px solid #000;
+}

package/projects/ng-easycommerce/src/lib/ec-components/variants-ec/variants-ec.component.ts

@@ -0,0 +1,20 @@
+import { Component, inject, Input } from '@angular/core';
+import { ProductDetailService } from '../../ec-services';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-variants-ec',
+  standalone: true,
+  imports: [AsyncPipe],
+  templateUrl: './variants-ec.component.html',
+  styleUrl: './variants-ec.component.scss'
+})
+export class VariantsEcComponent {
+	private _productDetailsService: ProductDetailService = inject(ProductDetailService);
+	public options$ = this._productDetailsService.options$;
+	
+	setOption(optionCode:any, optionValue:any) {
+    this._productDetailsService.setOption(optionCode, optionValue);
+  }
+	
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/index.ts

@@ -0,0 +1,4 @@
+export * from './loading';
+export * from './price-ec/price-ec.component';
+export * from './re-captcha-ec/re-captcha-ec.component';
+export * from './magnizoom-ec/magnizoom-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/index.ts

@@ -0,0 +1,3 @@
+export * from './loading-full-ec/loading-full-ec.component';
+export * from './loading-section-ec/loading-section-ec.component';
+export * from './loading-inline-ec/loading-inline-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/loading-full-ec/loading-full-ec.component.html

@@ -0,0 +1,7 @@
+<div [class]="'d-flex w-100'">
+    <div class="w-100 h-100 d-flex flex-row justify-content-center align-items-center">
+        <div class="spinner-border text-dark spinner-color" id="loading" role="status">
+            <span class="visually-hidden">{{ 'loading' }}</span><!-- | translate  -->
+        </div>
+    </div>
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/loading-full-ec/loading-full-ec.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+	selector: 'app-loading-full-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './loading-full-ec.component.html',
+	styleUrl: './loading-full-ec.component.scss'
+})
+export class LoadingFullEcComponent {
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/loading-inline-ec/loading-inline-ec.component.html

@@ -0,0 +1,5 @@
+<div class="loading-inline-container">
+    <div [class]="'spinner-'+type+' text-dark spinner-colo'" id="loading" role="status">
+        <span class="visually-hidden">{{ 'loading' | translate }}</span>
+   </div>
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/loading-inline-ec/loading-inline-ec.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-loading-inline-ec',
+    standalone: true,
+    imports: [TranslateModule],
+    templateUrl: './loading-inline-ec.component.html',
+    styleUrl: './loading-inline-ec.component.scss'
+})
+export class LoadingInlineEcComponent {
+    @Input() type:'border' | 'grow' = 'border';
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/loading-section-ec/loading-section-ec.component.html

@@ -0,0 +1,3 @@
+<div id="sectionLoading" class="d-flex flex-column position-absolute top-0 opacity-75 bg-white w-100 h-100 justify-content-center align-items-center">
+    <app-loading-full-ec></app-loading-full-ec>
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/loading/loading-section-ec/loading-section-ec.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { LoadingFullEcComponent } from '../loading-full-ec/loading-full-ec.component';
+
+@Component({
+  selector: 'app-loading-section-ec',
+  standalone: true,
+  imports: [LoadingFullEcComponent],
+  templateUrl: './loading-section-ec.component.html',
+  styleUrl: './loading-section-ec.component.scss'
+})
+export class LoadingSectionEcComponent {
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/magnizoom-ec/magnizoom-ec.component.html

@@ -0,0 +1,11 @@
+<canvas #mainCanvas
+  class="main-canvas"
+  [ngClass]="imageClass"
+  [ngStyle]="imageStyle"
+  [width]="canvasWidth"
+  [height]="canvasHeight"
+  (mouseleave)="onMouseLeave($event)"
+  (mouseenter)="onMouseEnterOrMove($event)"
+  (mousemove)="onMouseEnterOrMove($event)"
+  (wheel)="onMouseScroll($event)">
+</canvas>

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/magnizoom-ec/magnizoom-ec.component.ts

@@ -0,0 +1,177 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { afterNextRender, afterRender, Component, ElementRef, inject, Input, OnInit, ViewChild } from '@angular/core';
+
+interface Size2D { width: number; height: number; }
+type Point2D = { x: number, y: number } | null;
+
+@Component({
+	selector: '[app-magnizoom-ec]',
+	standalone: true,
+	imports: [CommonModule],
+	templateUrl: './magnizoom-ec.component.html',
+	styleUrl: './magnizoom-ec.component.scss'
+})
+export class MagnizoomEcComponent implements OnInit {
+	private document:Document = inject(DOCUMENT);
+
+	private imageSrc:string='';
+    @Input() set ImageSrc(value:string) { 
+        this.imageSrc = value; 
+        this.loadImage(this.imageSrc); 
+    }
+    @Input() zoomMode: 'LENS' | 'COVER' = 'COVER';
+    @Input() minZoomFactor = 1.2;
+    @Input() maxZoomFactor = 3;
+
+    @Input()
+	imageStyle!: { [x: string]: any; };
+    @Input() imageClass: any;
+
+    @ViewChild('mainCanvas', { static: true }) mainCanvasRef!: ElementRef;
+
+    canvas!: HTMLCanvasElement;
+    context!: CanvasRenderingContext2D | null;
+    image!: HTMLImageElement;
+
+    mousePosition: Point2D = null;
+    lensSize: Size2D = { width: 400, height: 300 };
+    zoomFactor = 2;
+
+    get canvasWidth() { return this.image && this.image.width || 800; }
+    get canvasHeight() { return this.image && this.image.height || 600; }
+
+    constructor() {
+		afterRender(()=> {
+			this.initContext();
+			this.loadImage(this.imageSrc);
+		})
+	 }
+    
+    ngOnInit() {
+       /*  this.initContext();
+        this.loadImage(this.imageSrc); */
+    }
+
+    initContext() {
+        
+        this.canvas = (this.mainCanvasRef.nativeElement as HTMLCanvasElement);
+        this.context = this.canvas.getContext('2d');
+    }
+
+    loadImage(src: string) {
+		if(this.document){
+			this.image = this.document.createElement('img');
+			this.image.onload = () => {
+				this.lensSize = { width: this.image.width / 2, height: this.image.height / 2 };
+				setTimeout(() => this.render());
+			};
+			this.image.src = src;
+		}
+    }
+
+    render() {
+		if(this.context){
+			this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // clear canvas
+			this.context.lineWidth = 1; // border width
+			this.context.drawImage(this.image, 0, 0); // bg image
+
+			if (this.mousePosition) {
+				switch (this.zoomMode) {
+					case 'LENS': this.renderLensMode(); break;
+					case 'COVER': this.renderCoverMode(); break;
+				}
+			}
+		}
+    }
+
+    renderLensMode() {
+		if(this.context){
+        this.context.lineWidth = 5; // border width
+        const zoomRect = this.getZoomRect();
+        this.context.fillRect(zoomRect.x, zoomRect.y, zoomRect.w, zoomRect.h); // bg (clear)
+        const clippingRect = this.getClippingRect();
+        // zoom image
+        this.context.drawImage(
+            this.image,
+            clippingRect.x, clippingRect.y, clippingRect.w, clippingRect.h,
+            zoomRect.x, zoomRect.y, zoomRect.w, zoomRect.h
+        );
+        this.context.strokeRect(zoomRect.x, zoomRect.y, zoomRect.w, zoomRect.h); // border
+	}
+	}
+
+    renderCoverMode() {
+        const covertRect = this.getCoverRect();
+        this.context && this.context.drawImage(
+            this.image,
+            covertRect.x, covertRect.y, covertRect.w, covertRect.h,
+            0, 0, this.canvasWidth, this.canvasHeight
+        ); // cover image
+    }
+
+    getZoomRect() {
+        const w = this.lensSize.width;
+        const h = this.lensSize.height;
+        const x = this.mousePosition!.x - (w / 2);
+        const y = this.mousePosition!.y - (h / 2);
+        return this.clampRect(x, y, w, h);
+    }
+
+    getClippingRect() {
+        const w = this.lensSize.width / this.zoomFactor;
+        const h = this.lensSize.height / this.zoomFactor;
+        const x = this.mousePosition!.x - (w / 2);
+        const y = this.mousePosition!.y - (h / 2);
+        return this.clampRect(x, y, w, h);
+    }
+
+    getCoverRect() {
+        const w = this.canvasWidth / this.zoomFactor;
+        const h = this.canvasHeight / this.zoomFactor;
+        // const x = this.mousePosition.x - (w / 2);
+        // const y = this.mousePosition.y - (h / 2);
+        const x = this.mousePosition!.x - this.mousePosition!.x / this.zoomFactor;
+        const y = this.mousePosition!.y - this.mousePosition!.y / this.zoomFactor;
+        return this.clampRect(x, y, w, h);
+    }
+
+    clampRect(x: number, y: number, w: number, h: number) {
+        if (x <= 0) { x = 0; }
+        if (x + w >= this.canvasWidth) { x = this.canvasWidth - w; }
+        if (y < 0) { y = 0; }
+        if (y + h >= this.canvasHeight) { y = this.canvasHeight - h; }
+        return { x, y, w, h };
+    }
+
+    calculateMousePosition(clientX: number, clientY: number) {
+        const boundingRect = this.canvas.getBoundingClientRect();
+        const viewToModelX = this.canvasWidth / boundingRect.width;
+        const viewToModelY = this.canvasHeight / boundingRect.height;
+        const x = (clientX - boundingRect.left) * viewToModelX;
+        const y = (clientY - boundingRect.top) * viewToModelY;
+        this.mousePosition = { x, y };
+    }
+
+    onMouseLeave(event: MouseEvent) {
+        this.mousePosition = null;
+        this.render();
+    }
+
+    onMouseEnterOrMove(event: MouseEvent) {
+        this.calculateMousePosition(event.clientX, event.clientY);
+        this.render();
+    }
+
+    onMouseScroll(event: WheelEvent) {
+        let newZoomFactor = this.zoomFactor;
+        newZoomFactor -= event.deltaY / 1000;
+        if (newZoomFactor < this.minZoomFactor) { newZoomFactor = this.minZoomFactor; }
+        if (newZoomFactor > this.maxZoomFactor) { newZoomFactor = this.maxZoomFactor; }
+        if (this.zoomFactor !== newZoomFactor) {
+            this.zoomFactor = newZoomFactor;
+            this.render();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/price-ec/price-ec.component.html

@@ -0,0 +1,47 @@
+@if(saleprice){
+    <!--With saleprice-->
+  <div class="">
+    @if(price && price.split(' - ').length > 1){
+        <div class="price text-center p-0 mx-0 mx-md-3">
+            <del class="text-center  price">
+                {{ price.split(' - ')[0] | ecCurrencySymbol }}
+                {{ price.split(' - ')[1] | ecCurrencySymbol }}
+            </del>
+        </div>
+    }@else {
+        <!--Simple Price Del-->
+        <div class=" text-center delete p-0 mx-0 mx-md-3">
+            <del class=" text-center delete">
+                {{ price | ecCurrencySymbol }}</del>
+        </div>
+    }
+    @if(saleprice && saleprice.split(' - ').length > 1){
+        <div class="">
+            {{
+            saleprice.split(' - ')[0] | ecCurrencySymbol
+            }}
+            {{
+            saleprice.split(' - ')[1] | ecCurrencySymbol
+            }}
+        </div>
+    } @else {
+        <!--Simple saleprice-->
+        <div class="text-center  price p-0 mx-0 mx-md-3">
+            {{ saleprice | ecCurrencySymbol }}
+       </div>
+    }
+</div>  
+}@else {
+    <!--Only Price-->
+    @if(price && price.split(' - ').length > 1){
+        <div class="price">
+            {{ price.split(' - ')[0] | ecCurrencySymbol }} -
+            {{ price.split(' - ')[1] | ecCurrencySymbol }}
+        </div> 
+    } @else {
+        <!--Simple price-->
+        <div class="text-center price p-0 mx-0 mx-md-3">
+            {{ price | ecCurrencySymbol }}
+        </div>
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/price-ec/price-ec.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { EcCurrencySymbolPipe } from "../../../ec-pipe/ec-currency-symbol.pipe";
+/**
+ * Componente para manejar la vista del precio de un producto.
+ */
+@Component({
+  selector: 'app-price-ec',
+  standalone: true,
+  imports: [EcCurrencySymbolPipe],
+  templateUrl: './price-ec.component.html',
+  styleUrl: './price-ec.component.scss'
+})
+export class PriceEcComponent {
+  /**
+   * Precio de un producto.
+   */
+	@Input() price: any;
+  /**
+   * Precio de venta de un producto.
+   */
+	@Input() saleprice: any;
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/re-captcha-ec/re-captcha-ec.component.html

@@ -0,0 +1,6 @@
+@if(captcha.siteKey){
+        <re-captcha (resolved)="resolved($event)" siteKey="{{captcha.siteKey}}">
+        </re-captcha>
+}@else {
+    <app-loading-full-ec></app-loading-full-ec>
+}

package/projects/ng-easycommerce/src/lib/ec-components/widgets-ec/re-captcha-ec/re-captcha-ec.component.ts

@@ -0,0 +1,70 @@
+import { Component, forwardRef, inject, Input, OnInit, Signal } from '@angular/core';
+import { LoadingFullEcComponent } from "../loading/loading-full-ec/loading-full-ec.component";
+import { RecaptchaModule} from "ng-recaptcha-2";
+import { ReCaptchaService } from '../../../ec-services';
+import { ControlValueAccessor, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+	selector: 're-captcha-ec',
+	standalone: true,
+	imports: [LoadingFullEcComponent, RecaptchaModule, ReactiveFormsModule],
+	templateUrl: './re-captcha-ec.component.html',
+	styleUrl: './re-captcha-ec.component.scss',
+	providers:[
+		{
+			provide:NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => ReCaptchaEcComponent),
+			multi: true
+		}
+	]
+
+})
+export class ReCaptchaEcComponent implements OnInit, ControlValueAccessor {
+	/**
+	 * Formulario que contiene al captcha.
+	 
+	@Input({required: true}) form!:any;*/
+	/**
+	 * Clave para el captcha.
+	 */
+	@Input() siteKey:string | undefined;
+
+	private _recaptchaService: ReCaptchaService = inject(ReCaptchaService);
+
+	public captcha:any;
+
+	private onChange!:(value:string) => void;
+	private onTouched!:() => void;
+
+	ngOnInit():void {
+		this._recaptchaService.recaptcha$.subscribe( res => {
+			console.log('recaptcha', res);
+			this.captcha = res;
+			this.updateSiteKey();
+		})
+	}
+	
+	updateSiteKey() {
+		if(this.siteKey) this.captcha.siteKey = this.siteKey;;
+	}
+
+	resolved(captchaResponse:any){
+		//this.form['recaptcha'] = captchaResponse;
+		this.onChange(captchaResponse);
+		this.onTouched();
+	}
+
+	writeValue(obj: any): void {
+		//throw new Error('Method not implemented.');
+	}
+	registerOnChange(fn: any): void {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn: any): void {
+		this.onTouched = fn;
+	}
+	setDisabledState?(isDisabled: boolean): void {
+		//throw new Error('Method not implemented.');
+	}
+
+}

package/projects/ng-easycommerce/src/lib/ec-guards/auth.guard.ts

@@ -0,0 +1,19 @@
+import { inject, Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivateFn, Router } from '@angular/router';
+import { AuthService } from '../ec-services';
+/**
+ * Guarda que controla que el usuario este logueado a no.
+ * @param route 
+ * @param state 
+ * @returns 
+ */
+export const authGuard: CanActivateFn = (route:ActivatedRouteSnapshot, state) => {
+	const authService = inject(AuthService)
+	const router = inject(Router);
+	const redirectTo = route.data["redirectTo"] || '/'
+
+	if(!authService.isAuthenticated())
+		router.navigateByUrl(redirectTo)
+
+	return authService.isAuthenticated();
+};

package/projects/ng-easycommerce/src/lib/ec-guards/index.ts

@@ -0,0 +1 @@
+export * from './auth.guard';