ng-easycommerce-v18 0.0.1 → 0.0.2

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

@@ -1,46 +0,0 @@
-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

@@ -1,65 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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/loading/loading-full-ec/loading-full-ec.component.html

@@ -1,7 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

@@ -1,177 +0,0 @@
-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

@@ -1,47 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-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

@@ -1,6 +0,0 @@
-@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

@@ -1,70 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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