@gardev/components 0.0.1 → 0.0.4

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/@ardev/components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,26 +1,12 @@
-{
-  "name": "@gardev/components",
-  "version": "0.0.1",
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ardev-components.mjs",
-  "typings": "types/ardev-components.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ardev-components.d.ts",
-      "default": "./fesm2022/ardev-components.mjs"
-    }
-  }
-}
+{
+  "name": "@gardev/components",
+  "version": "0.0.4",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/bottle/bottle.component.css

@@ -0,0 +1,4 @@
+.three-container {
+    width: 300px;
+    height: 600px;
+}

package/src/lib/components/bottle/bottle.component.html

@@ -0,0 +1 @@
+<div #container class="three-container"></div>

package/src/lib/components/bottle/bottle.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Bottle } from './bottle';
+
+describe('Bottle', () => {
+  let component: Bottle;
+  let fixture: ComponentFixture<Bottle>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Bottle]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Bottle);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/bottle/bottle.component.ts

@@ -0,0 +1,164 @@
+import { Component, ElementRef, AfterViewInit, ViewChild, Input } from '@angular/core';
+import * as THREE from 'three';
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+
+@Component({
+  selector: 'app-bottle',
+  standalone: true,
+  templateUrl: './bottle.component.html',
+  styleUrls: ['./bottle.component.css'],
+})
+export class BottleComponent implements AfterViewInit {
+
+  @Input() color: `#${string}` = '#868132';
+  @Input() wineColor: `#${string}` = '#fff6f5';
+  @ViewChild('container', { static: true }) container!: ElementRef<HTMLDivElement>;
+
+  private scene!: THREE.Scene;
+  private camera!: THREE.PerspectiveCamera;
+  private renderer!: THREE.WebGLRenderer;
+
+  private glassMaterial!: THREE.MeshPhysicalMaterial;
+  private liquidMaterial!: THREE.MeshPhysicalMaterial;
+  private foilMaterial!: THREE.MeshPhysicalMaterial;
+  ngAfterViewInit() {
+    this.glassMaterial = new THREE.MeshPhysicalMaterial({
+      color: new THREE.Color(this.color),
+      metalness: 0,
+      roughness: 0,
+      transmission: 1,
+      thickness: 0,
+      ior: 1.5,
+      clearcoat: 1.0,
+      clearcoatRoughness: 0.05,
+      opacity: 1,
+      side: THREE.FrontSide,
+      transparent: true,
+      depthWrite: false,
+      envMapIntensity: 2.5
+    });
+    this.liquidMaterial = new THREE.MeshPhysicalMaterial({
+      color: new THREE.Color('#e2d744'),
+      metalness: 0.4,
+      // roughness: 0.25,
+
+      transmission: 0.2,
+      thickness: 0.4,
+      ior: 1.5,
+      clearcoat: 1.0,
+      clearcoatRoughness: 0.05,
+      transparent: true,
+      opacity: 0.8,
+
+      depthWrite: false,      // 🔑 el líquid SÍ escriu profunditat
+      side: THREE.BackSide,
+      // envMapIntensity: 1.2,
+    });
+
+
+    this.foilMaterial = new THREE.MeshPhysicalMaterial({
+      color: 0x156289,
+      metalness: 0.25,
+      roughness: 0.3,
+      side: THREE.DoubleSide
+    });
+    this.createSceneAndLighting();
+    this.loadModelFromSVGFile();
+    this.animate();
+  }
+
+  private animate = () => {
+    requestAnimationFrame(this.animate);
+
+    if (this.camera) {
+      const t = Date.now() * 0.0002;
+      this.camera.position.x = Math.sin(t) * 50;
+      this.camera.position.z = Math.cos(t) * 50;
+      this.camera.lookAt(0, 0, 0);
+    }
+    this.renderer.shadowMap.enabled = true;
+    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+    this.renderer.render(this.scene, this.camera);
+  };
+
+  private loadModelFromSVGFile() {
+    const loader = new SVGLoader();
+
+    loader.load('assets/bitmap.svg', (data) => {
+      const bottleGroup = new THREE.Group();
+
+      data.paths.forEach((path, index) => {
+        const shapes = SVGLoader.createShapes(path);
+
+        shapes.forEach((shape) => {
+          const points = shape.getPoints().map(p => new THREE.Vector2(p.x * 0.1, -p.y * 0.1));
+
+          const geometry = new THREE.LatheGeometry(points, 128); // més segments → més suau
+          geometry.computeVertexNormals(); // normals correctes
+
+          const material = (index === 0) ? this.glassMaterial :
+            (index === 1) ? this.liquidMaterial : this.foilMaterial
+
+
+          const mesh = new THREE.Mesh(geometry, material);
+
+          const layerGroup = new THREE.Group();
+          layerGroup.add(mesh);
+          bottleGroup.add(layerGroup);
+        });
+      });
+
+      const box = new THREE.Box3().setFromObject(bottleGroup);
+      const center = box.getCenter(new THREE.Vector3());
+      bottleGroup.position.sub(center);
+
+      this.scene.add(bottleGroup);
+    });
+  }
+
+  private createSceneAndLighting() {
+    this.scene = new THREE.Scene();
+
+    const width = this.container.nativeElement.clientWidth;
+    const height = this.container.nativeElement.clientHeight;
+
+    this.camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 5000);
+    this.camera.position.set(30, 20, 50);
+    this.camera.lookAt(0, 0, 0);
+
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    this.renderer.setSize(width, height);
+    this.renderer.toneMapping = THREE.ACESFilmicToneMapping; // millora realisme colors
+    this.container.nativeElement.appendChild(this.renderer.domElement);
+
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    directionalLight.position.set(50, 80, 50);
+    directionalLight.castShadow = true;
+    directionalLight.shadow.mapSize.width = 2048;
+    directionalLight.shadow.mapSize.height = 2048;
+    directionalLight.shadow.radius = 4;
+    this.scene.add(directionalLight);
+
+    const backLight = new THREE.PointLight(0xffffff, 0.5);
+    backLight.position.set(-30, 40, -30);
+    this.scene.add(backLight);
+
+    const sideLight = new THREE.PointLight(0xffffff, 0.3);
+    sideLight.position.set(30, 10, -40);
+    this.scene.add(sideLight);
+
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.load('assets/environment-map.png', (texture) => {
+      texture.mapping = THREE.EquirectangularReflectionMapping;
+      this.scene.environment = texture;
+      //this.scene.background = texture;
+    });
+
+
+  }
+
+}

package/src/lib/components/caroussel/caroussel-menu/caroussel-menu.component.css

@@ -0,0 +1,23 @@
+button {
+    width: calc(1rem - 4px);
+    height: calc(1rem - 4px);
+    background: black;
+    border: 0;
+    border-radius: 1rem;
+    z-index: 1;
+    margin: 2px;
+    cursor: pointer
+}
+
+#selectedIndex {
+    width: 1rem;
+    height: 1rem;
+    background: rgb(255, 255, 255);
+    border-radius: 1rem;
+    position: absolute;
+    z-index: 0;
+    transition:
+        transform 300ms cubic-bezier(0.35, 0, 0.25, 1),
+        width 300ms cubic-bezier(0.35, 0, 0.25, 1);
+    will-change: transform, width;
+}

package/src/lib/components/caroussel/caroussel-menu/caroussel-menu.component.html

@@ -0,0 +1,5 @@
+<div style="display: flex; gap: 1rem;">
+    <button #btn *ngFor="let _ of [].constructor(length); let i = index" (click)="selectIndex(i)">
+    </button>
+    <div #selectedIndex id="selectedIndex"></div>
+</div>

package/src/lib/components/caroussel/caroussel-menu/caroussel-menu.component.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  ElementRef,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  Output,
+  EventEmitter,
+  Input,
+  AfterViewInit
+} from '@angular/core';
+import { NgForOf } from '@angular/common';
+
+@Component({
+  selector: 'ard-caroussel-menu',
+  standalone: true,
+  imports: [NgForOf],
+  templateUrl: './caroussel-menu.component.html',
+  styleUrls: ['./caroussel-menu.component.css'],
+})
+export class CarousselMenuComponent implements AfterViewInit {
+  @Input() length = 0;
+
+  @ViewChildren('btn', { read: ElementRef })
+  buttons!: QueryList<ElementRef<HTMLButtonElement>>;
+
+  @ViewChild('selectedIndex')
+  selectedIndex!: ElementRef<HTMLElement>;
+
+  @Output() indexChange = new EventEmitter<number>();
+
+  private positions: number[] = [];
+  private resetWidthId?: number;
+
+  ngAfterViewInit() {
+    const btns = this.buttons.toArray();
+    const firstRight = btns[0]?.nativeElement.getBoundingClientRect().right ?? 0;
+
+    this.positions = btns.map(
+      b => b.nativeElement.getBoundingClientRect().right - firstRight
+    );
+  }
+
+  selectIndex(i: number) {
+    this.indexChange.emit(i);
+
+    const el = this.selectedIndex.nativeElement;
+    const x = this.positions[i] ?? 0;
+
+    el.style.transform = `translateX(${x}px)`;
+
+    const baseWidth = el.getBoundingClientRect().width;
+    el.style.width = `${baseWidth * 1.5}px`;
+
+    if (this.resetWidthId) {
+      clearTimeout(this.resetWidthId);
+    }
+
+    this.resetWidthId = window.setTimeout(() => {
+      el.style.width = `${baseWidth}px`;
+    }, 150);
+  }
+}

package/src/lib/components/caroussel/caroussel-menu/caroussel-menu.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarousselMenuComponent } from './caroussel-menu.component';
+
+describe('CarousselMenuComponent', () => {
+  let component: CarousselMenuComponent;
+  let fixture: ComponentFixture<CarousselMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CarousselMenuComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(CarousselMenuComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/caroussel/caroussel.component.css

@@ -0,0 +1,11 @@
+.image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    transition: opacity 0.5s ease-in-out;
+    /* <-- transició suau */
+}

package/src/lib/components/caroussel/caroussel.component.html

@@ -0,0 +1,8 @@
+<div style="position: relative; top: 0; width: 100%; height: 100%; overflow: hidden;">
+    <img *ngFor="let img of images; let i = index" [src]="img" [style.opacity]="i === index ? 1 : 0" class="image"
+        alt="">
+
+    <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px;">
+        <ard-caroussel-menu (indexChange)="goTo($event)" [length]="images.length"></ard-caroussel-menu>
+    </div>
+</div>

package/src/lib/components/caroussel/caroussel.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { NgForOf } from "@angular/common";
+import { CarousselMenuComponent } from './caroussel-menu/caroussel-menu.component';
+
+@Component({
+  selector: 'ard-caroussel',
+  imports: [NgForOf, CarousselMenuComponent],
+  templateUrl: './caroussel.component.html',
+  styleUrl: './caroussel.component.css',
+})
+export class CarousselComponent {
+  @Input() images: string[] = [];
+
+  index = 0;
+
+  next() {
+    this.index = (this.index + 1) % this.images.length;
+  }
+
+  goTo(i: number) {
+    this.index = i;
+  }
+
+}

package/src/lib/components/cronogram/cronogram.component.css

@@ -0,0 +1,58 @@
+.left-container.odd {
+    padding: 0 1rem
+}
+
+.right-container.even {
+    padding: 0 1rem;
+}
+
+.left-container,
+.right-container {
+    padding: 0 1rem;
+    max-width: 35ch;
+}
+
+.general-container {
+    transition: opacity 0.6s;
+
+}
+
+.line {
+    background: var(--color-text);
+    width: 100%;
+    position: absolute;
+    border-radius: 1rem 1rem 0 0;
+    animation-timing-function: ease-out;
+    width: 0.4rem
+}
+
+.bullet {
+    width: 0.4rem;
+    min-height: 0.4rem;
+    background: var(--color-text);
+    outline: 3px solid var(--color-text);
+    border-radius: 2rem;
+    position: absolute;
+}
+
+.hidden {
+    opacity: 0;
+}
+
+.visible {
+    opacity: 1;
+}
+
+.center {
+    position: relative;
+}
+
+
+
+.left-container {
+    display: flex;
+    justify-content: end;
+    text-align: end;
+    justify-self: end;
+    flex-flow: column
+}

package/src/lib/components/cronogram/cronogram.component.html

@@ -0,0 +1,47 @@
+<h4>cronogram.component.ts</h4>
+
+<p>
+    en la vista mobile, estarà tot en un mateix costat?
+</p>
+
+<div #wrapper>
+
+
+
+    @for(day of items; track day.date; let i = $index;) {
+
+    <div style="display: grid; grid-template-columns: 1fr 0fr 1fr;" class="general-container" #CronogramContent>
+
+
+        <div class="left-container" [ngClass]="i % 2 == 0  ? 'odd' : 'even'">
+            @if(i % 2 === 0) {
+            <h3>{{day.date}}</h3>
+            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit
+                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>
+            }
+        </div>
+
+
+        <div class="center" style="height: 100%; display: flex; width: 1rem; flex-flow: column; position: relative">
+            <div class="bullet" style="z-index: 2">
+            </div>
+
+            @if (i == 0) {
+            <div class="line" #line>
+
+            </div>
+            }
+
+        </div>
+        <div class="right-container cronogram-content" [ngClass]="i % 2 == 0  ? 'odd' : 'even'">
+            @if(i % 2 !== 0) {
+            <h3>{{day.date}}</h3>
+            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit
+                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>
+
+            }
+        </div>
+
+    </div>
+    }
+</div>

package/src/lib/components/cronogram/cronogram.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CronogramComponent } from './cronogram.component';
+
+describe('CronogramComponent', () => {
+  let component: CronogramComponent;
+  let fixture: ComponentFixture<CronogramComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CronogramComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CronogramComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/cronogram/cronogram.component.ts

@@ -0,0 +1,99 @@
+import { Component, ElementRef, HostListener, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { NgClass } from "@angular/common";
+
+@Component({
+  selector: 'ard-cronogram',
+  imports: [NgClass],
+  templateUrl: './cronogram.component.html',
+  styleUrl: './cronogram.component.css',
+})
+export class CronogramComponent {
+  @ViewChild('wrapper', { read: ElementRef }) wrapper!: ElementRef<HTMLElement>;
+  @ViewChild('line', { read: ElementRef }) line!: ElementRef<HTMLElement>;
+
+  @ViewChildren('CronogramContent', { read: ElementRef })
+  children!: QueryList<ElementRef>;
+  items = [
+    { date: 2000, content: 'Lorem ipsum dolor sit amet', image: 'lorem' },
+    { date: 2001, content: 'Lorem ipsum dolor sit amet', image: 'lorem' },
+    { date: 2002, content: 'Lorem ipsum dolor sit amet', image: 'lorem' }
+  ]
+
+  positionsY: number[] = []
+
+  ngAfterViewInit() {
+    this.positionsY = this.children.map(i => i.nativeElement.getBoundingClientRect().y)
+
+    this.line.nativeElement.style.maxHeight = `${this.wrapper.nativeElement.getBoundingClientRect().height}px`
+  }
+
+  lastScrollY = window.scrollY;
+
+  @HostListener('window:scroll', [])
+  onScroll() {
+    const scrollPosition = window.scrollY;
+
+    if (scrollPosition > this.lastScrollY) {
+      this.onScrollDown(scrollPosition);
+    } else if (scrollPosition < this.lastScrollY) {
+      this.onScrollUp(scrollPosition);
+    }
+
+    this.lastScrollY = scrollPosition;
+
+    this.line.nativeElement.style.height = `${this.visibleHeight(this.wrapper.nativeElement)}px`
+
+
+  }
+  onScrollDown(scrollPosition: number) {
+    let index = this.positionsY.findIndex(pos => pos > scrollPosition - 100);
+
+    if (index === -1) {
+      index = this.positionsY.length;
+    }
+
+    this.children.forEach((child, i) => {
+      const el = child.nativeElement as HTMLElement;
+
+      if (i < index) {
+        el.classList.remove("hidden");
+        el.classList.add("visible");
+      }
+    });
+
+    this.line.nativeElement.style.transition = 'height 1.2s';
+
+  }
+  onScrollUp(scrollPosition: number) {
+    let index = this.positionsY.findIndex(pos => pos > scrollPosition - 50);
+
+    if (index === -1) {
+      index = this.positionsY.length;
+    }
+
+    this.children.forEach((child, i) => {
+      const el = child.nativeElement as HTMLElement;
+
+      if (i >= index) {
+        el.classList.add("hidden");
+        el.classList.remove("visible");
+      }
+    });
+
+    this.line.nativeElement.style.transition = 'height 0s';
+
+  }
+
+
+
+  visibleHeight(el: HTMLElement) {
+    const rect = el.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+
+    const topVisible = Math.max(rect.top, 0);
+    const bottomVisible = Math.min(rect.bottom, viewportHeight);
+
+    return Math.max(0, bottomVisible - topVisible);
+  }
+
+}

package/src/lib/components/stack-caroussel/stack-caroussel.css

@@ -0,0 +1,25 @@
+:host {
+    --anim-speed: 300ms;
+    /* VARIABLE DE VELOCITAT */
+}
+
+.stack-container {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    cursor: pointer;
+}
+
+.stack-image {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    transition:
+        transform var(--anim-speed) ease,
+        opacity var(--anim-speed) ease;
+}
+
+.stack-image.move-out {
+    transform: translate(200px, 0px) !important;
+}

package/src/lib/components/stack-caroussel/stack-caroussel.html

@@ -0,0 +1,4 @@
+<div class="stack-container" (click)="rotateStack()">
+    <img *ngFor="let img of images; let i = index; let last = last" [src]="img" [ngStyle]="getOffset(i)"
+        [class.img-last]="last" class="stack-image" />
+</div>