@gardev/components 0.0.6 → 0.0.8

package/fesm2022/gardev-components.mjs

@@ -0,0 +1,575 @@
+import * as i0 from '@angular/core';
+import { ViewChild, Input, Component, EventEmitter, ElementRef, Output, ViewChildren, HostListener, inject, ViewContainerRef, Injectable } from '@angular/core';
+import * as THREE from 'three';
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+import * as i1 from '@angular/common';
+import { NgForOf, NgClass, NgStyle, CommonModule } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+
+class BottleComponent {
+    color = '#868132';
+    wineColor = '#fff6f5';
+    container;
+    scene;
+    camera;
+    renderer;
+    glassMaterial;
+    liquidMaterial;
+    foilMaterial;
+    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();
+    }
+    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);
+    };
+    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);
+        });
+    }
+    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;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BottleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BottleComponent, isStandalone: true, selector: "app-bottle", inputs: { color: "color", wineColor: "wineColor" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div #container class=\"three-container\"></div>", styles: [".three-container{width:300px;height:600px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BottleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-bottle', standalone: true, template: "<div #container class=\"three-container\"></div>", styles: [".three-container{width:300px;height:600px}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], wineColor: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }] } });
+
+class CarousselMenuComponent {
+    length = 0;
+    buttons;
+    selectedIndex;
+    indexChange = new EventEmitter();
+    positions = [];
+    resetWidthId;
+    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) {
+        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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarousselMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CarousselMenuComponent, isStandalone: true, selector: "ard-caroussel-menu", inputs: { length: "length" }, outputs: { indexChange: "indexChange" }, viewQueries: [{ propertyName: "selectedIndex", first: true, predicate: ["selectedIndex"], descendants: true }, { propertyName: "buttons", predicate: ["btn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div style=\"display: flex; gap: 1rem;\">\r\n    <button #btn *ngFor=\"let _ of [].constructor(length); let i = index\" (click)=\"selectIndex(i)\">\r\n    </button>\r\n    <div #selectedIndex id=\"selectedIndex\"></div>\r\n</div>", styles: ["button{width:calc(1rem - 4px);height:calc(1rem - 4px);background:#000;border:0;border-radius:1rem;z-index:1;margin:2px;cursor:pointer}#selectedIndex{width:1rem;height:1rem;background:#fff;border-radius:1rem;position:absolute;z-index:0;transition:transform .3s cubic-bezier(.35,0,.25,1),width .3s cubic-bezier(.35,0,.25,1);will-change:transform,width}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarousselMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-caroussel-menu', standalone: true, imports: [NgForOf], template: "<div style=\"display: flex; gap: 1rem;\">\r\n    <button #btn *ngFor=\"let _ of [].constructor(length); let i = index\" (click)=\"selectIndex(i)\">\r\n    </button>\r\n    <div #selectedIndex id=\"selectedIndex\"></div>\r\n</div>", styles: ["button{width:calc(1rem - 4px);height:calc(1rem - 4px);background:#000;border:0;border-radius:1rem;z-index:1;margin:2px;cursor:pointer}#selectedIndex{width:1rem;height:1rem;background:#fff;border-radius:1rem;position:absolute;z-index:0;transition:transform .3s cubic-bezier(.35,0,.25,1),width .3s cubic-bezier(.35,0,.25,1);will-change:transform,width}\n"] }]
+        }], propDecorators: { length: [{
+                type: Input
+            }], buttons: [{
+                type: ViewChildren,
+                args: ['btn', { read: ElementRef }]
+            }], selectedIndex: [{
+                type: ViewChild,
+                args: ['selectedIndex']
+            }], indexChange: [{
+                type: Output
+            }] } });
+
+class CarousselComponent {
+    images = [];
+    index = 0;
+    next() {
+        this.index = (this.index + 1) % this.images.length;
+    }
+    goTo(i) {
+        this.index = i;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarousselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CarousselComponent, isStandalone: true, selector: "ard-caroussel", inputs: { images: "images" }, ngImport: i0, template: "<div style=\"position: relative; top: 0; width: 100%; height: 100%; overflow: hidden;\">\r\n    <img *ngFor=\"let img of images; let i = index\" [src]=\"img\" [style.opacity]=\"i === index ? 1 : 0\" class=\"image\"\r\n        alt=\"\">\r\n\r\n    <div style=\"position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px;\">\r\n        <ard-caroussel-menu (indexChange)=\"goTo($event)\" [length]=\"images.length\"></ard-caroussel-menu>\r\n    </div>\r\n</div>", styles: [".image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .5s ease-in-out}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CarousselMenuComponent, selector: "ard-caroussel-menu", inputs: ["length"], outputs: ["indexChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarousselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-caroussel', imports: [NgForOf, CarousselMenuComponent], template: "<div style=\"position: relative; top: 0; width: 100%; height: 100%; overflow: hidden;\">\r\n    <img *ngFor=\"let img of images; let i = index\" [src]=\"img\" [style.opacity]=\"i === index ? 1 : 0\" class=\"image\"\r\n        alt=\"\">\r\n\r\n    <div style=\"position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px;\">\r\n        <ard-caroussel-menu (indexChange)=\"goTo($event)\" [length]=\"images.length\"></ard-caroussel-menu>\r\n    </div>\r\n</div>", styles: [".image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .5s ease-in-out}\n"] }]
+        }], propDecorators: { images: [{
+                type: Input
+            }] } });
+
+class CronogramComponent {
+    wrapper;
+    line;
+    children;
+    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 = [];
+    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;
+    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) {
+        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;
+            if (i < index) {
+                el.classList.remove("hidden");
+                el.classList.add("visible");
+            }
+        });
+        this.line.nativeElement.style.transition = 'height 1.2s';
+    }
+    onScrollUp(scrollPosition) {
+        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;
+            if (i >= index) {
+                el.classList.add("hidden");
+                el.classList.remove("visible");
+            }
+        });
+        this.line.nativeElement.style.transition = 'height 0s';
+    }
+    visibleHeight(el) {
+        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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CronogramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CronogramComponent, isStandalone: true, selector: "ard-cronogram", host: { listeners: { "window:scroll": "onScroll()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef }, { propertyName: "line", first: true, predicate: ["line"], descendants: true, read: ElementRef }, { propertyName: "children", predicate: ["CronogramContent"], descendants: true, read: ElementRef }], ngImport: i0, template: "<h4>cronogram.component.ts</h4>\r\n\r\n<p>\r\n    en la vista mobile, estar\u00E0 tot en un mateix costat?\r\n</p>\r\n\r\n<div #wrapper>\r\n\r\n\r\n\r\n    @for(day of items; track day.date; let i = $index;) {\r\n\r\n    <div style=\"display: grid; grid-template-columns: 1fr 0fr 1fr;\" class=\"general-container\" #CronogramContent>\r\n\r\n\r\n        <div class=\"left-container\" [ngClass]=\"i % 2 == 0  ? 'odd' : 'even'\">\r\n            @if(i % 2 === 0) {\r\n            <h3>{{day.date}}</h3>\r\n            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit\r\n                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>\r\n            }\r\n        </div>\r\n\r\n\r\n        <div class=\"center\" style=\"height: 100%; display: flex; width: 1rem; flex-flow: column; position: relative\">\r\n            <div class=\"bullet\" style=\"z-index: 2\">\r\n            </div>\r\n\r\n            @if (i == 0) {\r\n            <div class=\"line\" #line>\r\n\r\n            </div>\r\n            }\r\n\r\n        </div>\r\n        <div class=\"right-container cronogram-content\" [ngClass]=\"i % 2 == 0  ? 'odd' : 'even'\">\r\n            @if(i % 2 !== 0) {\r\n            <h3>{{day.date}}</h3>\r\n            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit\r\n                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>\r\n\r\n            }\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n</div>", styles: [".left-container.odd,.right-container.even{padding:0 1rem}.left-container,.right-container{padding:0 1rem;max-width:35ch}.general-container{transition:opacity .6s}.line{background:var(--color-text);width:100%;position:absolute;border-radius:1rem 1rem 0 0;animation-timing-function:ease-out;width:.4rem}.bullet{width:.4rem;min-height:.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}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CronogramComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-cronogram', imports: [NgClass], template: "<h4>cronogram.component.ts</h4>\r\n\r\n<p>\r\n    en la vista mobile, estar\u00E0 tot en un mateix costat?\r\n</p>\r\n\r\n<div #wrapper>\r\n\r\n\r\n\r\n    @for(day of items; track day.date; let i = $index;) {\r\n\r\n    <div style=\"display: grid; grid-template-columns: 1fr 0fr 1fr;\" class=\"general-container\" #CronogramContent>\r\n\r\n\r\n        <div class=\"left-container\" [ngClass]=\"i % 2 == 0  ? 'odd' : 'even'\">\r\n            @if(i % 2 === 0) {\r\n            <h3>{{day.date}}</h3>\r\n            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit\r\n                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>\r\n            }\r\n        </div>\r\n\r\n\r\n        <div class=\"center\" style=\"height: 100%; display: flex; width: 1rem; flex-flow: column; position: relative\">\r\n            <div class=\"bullet\" style=\"z-index: 2\">\r\n            </div>\r\n\r\n            @if (i == 0) {\r\n            <div class=\"line\" #line>\r\n\r\n            </div>\r\n            }\r\n\r\n        </div>\r\n        <div class=\"right-container cronogram-content\" [ngClass]=\"i % 2 == 0  ? 'odd' : 'even'\">\r\n            @if(i % 2 !== 0) {\r\n            <h3>{{day.date}}</h3>\r\n            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit\r\n                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>\r\n\r\n            }\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n</div>", styles: [".left-container.odd,.right-container.even{padding:0 1rem}.left-container,.right-container{padding:0 1rem;max-width:35ch}.general-container{transition:opacity .6s}.line{background:var(--color-text);width:100%;position:absolute;border-radius:1rem 1rem 0 0;animation-timing-function:ease-out;width:.4rem}.bullet{width:.4rem;min-height:.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}\n"] }]
+        }], propDecorators: { wrapper: [{
+                type: ViewChild,
+                args: ['wrapper', { read: ElementRef }]
+            }], line: [{
+                type: ViewChild,
+                args: ['line', { read: ElementRef }]
+            }], children: [{
+                type: ViewChildren,
+                args: ['CronogramContent', { read: ElementRef }]
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
+class MenuComponent {
+    cdr;
+    justifySelf = 'end';
+    menu = [];
+    direction = 'horizontal';
+    menuContainer;
+    unorderedList;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    collapsed = false;
+    listWidth = 0;
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.getWidth();
+        });
+    }
+    getWidth() {
+        const containerWidth = this.menuContainer.nativeElement.getBoundingClientRect().width;
+        if (!this.collapsed)
+            this.listWidth = this.unorderedList?.nativeElement?.scrollWidth;
+        this.collapsed = containerWidth < this.listWidth;
+        this.cdr.detectChanges();
+        console.log(containerWidth, this.listWidth, this.collapsed);
+    }
+    //#region overlay
+    overlay = inject(Overlay);
+    overlayRef;
+    menuOverlay; // Template del menú
+    trigger; // Botó
+    toggleMenu() {
+        console.log('toggleMenu');
+        this.overlayRef ? this.closeMenu() : this.openMenu();
+    }
+    viewContainerRef = inject(ViewContainerRef);
+    openMenu() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.trigger)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top'
+            }
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+        this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
+        const portal = new TemplatePortal(this.menuOverlay, this.viewContainerRef); // ✅ SI
+        this.overlayRef.attach(portal);
+    }
+    closeMenu() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+    }
+    action(value) {
+        console.log(value);
+        this.closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MenuComponent, isStandalone: true, selector: "ard-menu", inputs: { justifySelf: "justifySelf", menu: "menu", direction: "direction" }, host: { listeners: { "window:resize": "getWidth()" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "unorderedList", first: true, predicate: ["unorderedList"], descendants: true }, { propertyName: "menuOverlay", first: true, predicate: ["menuOverlay"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["overlayTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #menuContainer id=\"menu-container\">\r\n    @if(!collapsed) {\r\n    <ul #unorderedList [style.flexFlow]=\"direction == 'horizontal' ? 'row' : 'column'\"\r\n        [style.justifySelf]=\"justifySelf\">\r\n        @for (i of menu; track i.label) {\r\n        <li><a [href]=\"i.path\">{{i.label}}</a></li>\r\n        }\r\n    </ul>\r\n    } @else {\r\n    <button #overlayTrigger [style.justifySelf]=\"justifySelf\" (click)=\"toggleMenu()\">Menu</button>\r\n\r\n    <ng-template #menuOverlay>\r\n        <div id=\"dropdown\">\r\n            @for (i of menu; track i.label) {\r\n            <li><a [href]=\"i.path\">{{i.label}}</a></li>\r\n            }\r\n        </div>\r\n    </ng-template>\r\n    }\r\n\r\n</div>", styles: ["ul{list-style-type:none;display:flex;margin:0;padding:0}a{color:var(--menu-text);text-decoration:none;font-weight:400}a:hover{text-decoration:underline}button{display:flex;justify-self:end}li:after{content:\"\";margin-left:1rem}#menu-container{width:100%;height:100%;overflow:hidden}:host{width:100%;overflow:hidden}#dropdown{background:#fff;border-radius:1rem;border:1px solid black;padding:1rem;margin:0 1rem}#dropdown li{list-style-type:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-menu', template: "<div #menuContainer id=\"menu-container\">\r\n    @if(!collapsed) {\r\n    <ul #unorderedList [style.flexFlow]=\"direction == 'horizontal' ? 'row' : 'column'\"\r\n        [style.justifySelf]=\"justifySelf\">\r\n        @for (i of menu; track i.label) {\r\n        <li><a [href]=\"i.path\">{{i.label}}</a></li>\r\n        }\r\n    </ul>\r\n    } @else {\r\n    <button #overlayTrigger [style.justifySelf]=\"justifySelf\" (click)=\"toggleMenu()\">Menu</button>\r\n\r\n    <ng-template #menuOverlay>\r\n        <div id=\"dropdown\">\r\n            @for (i of menu; track i.label) {\r\n            <li><a [href]=\"i.path\">{{i.label}}</a></li>\r\n            }\r\n        </div>\r\n    </ng-template>\r\n    }\r\n\r\n</div>", styles: ["ul{list-style-type:none;display:flex;margin:0;padding:0}a{color:var(--menu-text);text-decoration:none;font-weight:400}a:hover{text-decoration:underline}button{display:flex;justify-self:end}li:after{content:\"\";margin-left:1rem}#menu-container{width:100%;height:100%;overflow:hidden}:host{width:100%;overflow:hidden}#dropdown{background:#fff;border-radius:1rem;border:1px solid black;padding:1rem;margin:0 1rem}#dropdown li{list-style-type:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { justifySelf: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], menuContainer: [{
+                type: ViewChild,
+                args: ['menuContainer']
+            }], unorderedList: [{
+                type: ViewChild,
+                args: ['unorderedList']
+            }], getWidth: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], menuOverlay: [{
+                type: ViewChild,
+                args: ['menuOverlay']
+            }], trigger: [{
+                type: ViewChild,
+                args: ['overlayTrigger', { read: ElementRef }]
+            }] } });
+
+class NavbarComponent {
+    nav;
+    navFiller;
+    navContent;
+    onScrollCallback;
+    type = 'regular';
+    sticky = true;
+    navHeight = '100vhh';
+    lastScrollY = 0;
+    initialNavHeight;
+    ngAfterViewInit() {
+        this.initialNavHeight = this.navFiller.nativeElement.offsetHeight;
+    }
+    onScroll() {
+        if (this.type == 'hero')
+            this.nav.nativeElement.style.height = `calc(${this.navHeight} - ${window.scrollY}px)`;
+        if (this.sticky == 'onScrollUp') {
+            this.nav.nativeElement.style.minHeight = window.scrollY < this.lastScrollY
+                ? this.navContent.nativeElement.clientHeight + 'px'
+                : '0px';
+            this.lastScrollY = window.scrollY;
+        }
+        let navScrollRatio = window.scrollY / (this.initialNavHeight - 100); //100: alçada temptativa del navbar
+        navScrollRatio > 1 - this.nav.nativeElement.offsetHeight ? this.nav.nativeElement.style.transition = 'min-height 0.3s ease' : this.nav.nativeElement.style.transition = 'min-height 0s ease';
+        if (this.onScrollCallback)
+            this.onScrollCallback(navScrollRatio);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NavbarComponent, isStandalone: true, selector: "ard-navbar", inputs: { onScrollCallback: "onScrollCallback", type: "type", sticky: "sticky", navHeight: "navHeight" }, host: { listeners: { "window:scroll": "onScroll()" } }, viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }, { propertyName: "navFiller", first: true, predicate: ["navFiller"], descendants: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<div id=\"nav-container\" style=\"z-index: 1\">\r\n  <nav #nav [style.height]=\"navHeight\" [style.minHeight]=\"sticky ? 'fit-content' : 0 \"\r\n    [ngClass]=\"`nav_sticky--` + sticky\">\r\n    <div #navContent id=\"nav-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </nav>\r\n</div>\r\n<div #navFiller id=\"nav-filler\" [style.height]=\"navHeight\">\r\n</div>", styles: [":host{width:100%}#nav-container{height:0;position:sticky;top:0;will-change:transform,opacity}#nav-container nav{will-change:transform,opacity;position:relative;bottom:0;will-change:transform;display:flex;flex-flow:column;justify-content:end;align-items:center;border-bottom:1px solid grey}#nav-container nav #nav-content{will-change:transform,opacity;min-height:fit-content;display:flex;width:100%;justify-content:center;align-items:center;flex:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-navbar', imports: [NgClass], standalone: true, template: "<div id=\"nav-container\" style=\"z-index: 1\">\r\n  <nav #nav [style.height]=\"navHeight\" [style.minHeight]=\"sticky ? 'fit-content' : 0 \"\r\n    [ngClass]=\"`nav_sticky--` + sticky\">\r\n    <div #navContent id=\"nav-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </nav>\r\n</div>\r\n<div #navFiller id=\"nav-filler\" [style.height]=\"navHeight\">\r\n</div>", styles: [":host{width:100%}#nav-container{height:0;position:sticky;top:0;will-change:transform,opacity}#nav-container nav{will-change:transform,opacity;position:relative;bottom:0;will-change:transform;display:flex;flex-flow:column;justify-content:end;align-items:center;border-bottom:1px solid grey}#nav-container nav #nav-content{will-change:transform,opacity;min-height:fit-content;display:flex;width:100%;justify-content:center;align-items:center;flex:1}\n"] }]
+        }], propDecorators: { nav: [{
+                type: ViewChild,
+                args: ['nav']
+            }], navFiller: [{
+                type: ViewChild,
+                args: ['navFiller']
+            }], navContent: [{
+                type: ViewChild,
+                args: ['navContent']
+            }], onScrollCallback: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], sticky: [{
+                type: Input
+            }], navHeight: [{
+                type: Input
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
+class PageLayoutComponent {
+    headerBackground = '';
+    title = 'Lorem ipsum';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: PageLayoutComponent, isStandalone: true, selector: "ard-page-layout", inputs: { headerBackground: "headerBackground", title: "title" }, ngImport: i0, template: "<header class=\"page-header\" [ngStyle]=\"{\r\n    'background': headerBackground\r\n      ? `linear-gradient(color-mix(in srgb, var(--color-bg) 40%, transparent), color-mix(in srgb, var(--color-bg) 40%, transparent)),\r\n    url('${headerBackground}') center/cover no-repeat`\r\n      : 'none'\r\n  }\" style=\"position: relative\">\r\n    <div class=\"layout_max-width\">\r\n        <h1>\r\n            {{title}}\r\n        </h1>\r\n    </div>\r\n    <div class=\"custom-shape-divider-top-1770151990\" style=\"position: absolute; bottom: 0; height: 25px; width: 100%\">\r\n        <svg data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\"\r\n            style=\"height: 40px; width: 100%\">\r\n            <path\r\n                d=\"M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\"\r\n                style=\"fill: var(--color-bg)\"></path>\r\n        </svg>\r\n    </div>\r\n</header>\r\n\r\n<main class=\"page-main\">\r\n    <div class=\"layout_max-width\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</main>\r\n\r\n<section class=\"page-sections\">\r\n    <div class=\"layout_max-width\">\r\n        <ng-content select=\"[sections]\"></ng-content>\r\n    </div>\r\n</section>", styles: [".page-header{height:66vh;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center}.header-content{width:100%}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PageLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-page-layout', imports: [NgStyle,], template: "<header class=\"page-header\" [ngStyle]=\"{\r\n    'background': headerBackground\r\n      ? `linear-gradient(color-mix(in srgb, var(--color-bg) 40%, transparent), color-mix(in srgb, var(--color-bg) 40%, transparent)),\r\n    url('${headerBackground}') center/cover no-repeat`\r\n      : 'none'\r\n  }\" style=\"position: relative\">\r\n    <div class=\"layout_max-width\">\r\n        <h1>\r\n            {{title}}\r\n        </h1>\r\n    </div>\r\n    <div class=\"custom-shape-divider-top-1770151990\" style=\"position: absolute; bottom: 0; height: 25px; width: 100%\">\r\n        <svg data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\"\r\n            style=\"height: 40px; width: 100%\">\r\n            <path\r\n                d=\"M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\"\r\n                style=\"fill: var(--color-bg)\"></path>\r\n        </svg>\r\n    </div>\r\n</header>\r\n\r\n<main class=\"page-main\">\r\n    <div class=\"layout_max-width\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</main>\r\n\r\n<section class=\"page-sections\">\r\n    <div class=\"layout_max-width\">\r\n        <ng-content select=\"[sections]\"></ng-content>\r\n    </div>\r\n</section>", styles: [".page-header{height:66vh;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center}.header-content{width:100%}\n"] }]
+        }], propDecorators: { headerBackground: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class ScrollReactiveSectionComponent {
+    container;
+    content;
+    ngAfterViewInit() {
+        this.update();
+    }
+    update() {
+        const containerEl = this.container.nativeElement;
+        const contentEl = this.content.nativeElement;
+        const rect = containerEl.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const visibleTop = Math.max(rect.top, 0);
+        const visibleBottom = Math.min(rect.bottom, viewportHeight);
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const maxHeight = containerEl.offsetHeight;
+        const height = Math.min(visibleHeight, maxHeight);
+        contentEl.style.height = `${height}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ScrollReactiveSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ScrollReactiveSectionComponent, isStandalone: true, selector: "ard-scroll-reactive-section", host: { listeners: { "window:scroll": "update()", "window:resize": "update()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div style=\"position: sticky; top:0; height: 0; z-index: 0;\">\r\n    <div #content\r\n        style=\"background: gray; display: flex; justify-content: center; align-items: center;overflow: hidden;\">\r\n        <ng-content></ng-content>\r\n\r\n    </div>\r\n</div>\r\n<div style=\"position: relative; height: 100vh; pointer-events: none;\" #container>\r\n\r\n</div>" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ScrollReactiveSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-scroll-reactive-section', standalone: true, template: "<div style=\"position: sticky; top:0; height: 0; z-index: 0;\">\r\n    <div #content\r\n        style=\"background: gray; display: flex; justify-content: center; align-items: center;overflow: hidden;\">\r\n        <ng-content></ng-content>\r\n\r\n    </div>\r\n</div>\r\n<div style=\"position: relative; height: 100vh; pointer-events: none;\" #container>\r\n\r\n</div>" }]
+        }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container']
+            }], content: [{
+                type: ViewChild,
+                args: ['content']
+            }], update: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class SectionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: SectionComponent, isStandalone: true, selector: "ard-section", ngImport: i0, template: "<section class=\"layout_max-width\">\r\n  <h2>Secci\u00F3</h2>\r\n  <div style=\"display: flex;\">\r\n    <!-- <app-bottle [color]=\"'#5b8940'\"></app-bottle> -->\r\n    <!-- <app-bottle [color]=\"'#b4862a'\"></app-bottle>\r\n    <app-bottle [color]=\"'#121e10'\"></app-bottle>\r\n    <app-bottle [wineColor]=\"'#ffffff'\"></app-bottle> -->\r\n    <!-- <app-bottle [color]=\"'#868132'\" [wineColor]=\"'#e2d744'\"></app-bottle> -->\r\n  </div>\r\n</section>", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-section', imports: [], standalone: true, template: "<section class=\"layout_max-width\">\r\n  <h2>Secci\u00F3</h2>\r\n  <div style=\"display: flex;\">\r\n    <!-- <app-bottle [color]=\"'#5b8940'\"></app-bottle> -->\r\n    <!-- <app-bottle [color]=\"'#b4862a'\"></app-bottle>\r\n    <app-bottle [color]=\"'#121e10'\"></app-bottle>\r\n    <app-bottle [wineColor]=\"'#ffffff'\"></app-bottle> -->\r\n    <!-- <app-bottle [color]=\"'#868132'\" [wineColor]=\"'#e2d744'\"></app-bottle> -->\r\n  </div>\r\n</section>" }]
+        }] });
+
+class StackCaroussel {
+    images = [];
+    atmospheric = false;
+    animating = false;
+    getOffset(index) {
+        return {
+            transform: `translate(${index * 16}px, ${index * 16}px)`,
+            zIndex: this.images.length - index,
+            opacity: this.atmospheric
+                ? 1 - (this.images.length - index * 0.08)
+                : 1
+        };
+    }
+    rotateStack() {
+        if (this.animating || this.images.length === 0)
+            return;
+        this.animating = true;
+        const last = this.images[this.images.length - 1];
+        const rest = this.images.slice(0, this.images.length - 1);
+        // Fase 1
+        const el = document.querySelector('.img-last');
+        if (el) {
+            el.classList.add('move-out');
+        }
+        setTimeout(() => {
+            // Reordenem array
+            this.images = [last, ...rest];
+            setTimeout(() => {
+                this.animating = false;
+            }, 50);
+        }, 300);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StackCaroussel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: StackCaroussel, isStandalone: true, selector: "ard-stack-caroussel", inputs: { images: "images", atmospheric: "atmospheric" }, ngImport: i0, template: "<div class=\"stack-container\" (click)=\"rotateStack()\">\r\n    <img *ngFor=\"let img of images; let i = index; let last = last\" [src]=\"img\" [ngStyle]=\"getOffset(i)\"\r\n        [class.img-last]=\"last\" class=\"stack-image\" />\r\n</div>", styles: [":host{--anim-speed: .3s}.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)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StackCaroussel, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-stack-caroussel', imports: [CommonModule], template: "<div class=\"stack-container\" (click)=\"rotateStack()\">\r\n    <img *ngFor=\"let img of images; let i = index; let last = last\" [src]=\"img\" [ngStyle]=\"getOffset(i)\"\r\n        [class.img-last]=\"last\" class=\"stack-image\" />\r\n</div>", styles: [":host{--anim-speed: .3s}.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)!important}\n"] }]
+        }], propDecorators: { images: [{
+                type: Input
+            }], atmospheric: [{
+                type: Input
+            }] } });
+
+class ThemeService {
+    ngOnInit() {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.body.classList.toggle('dark', prefersDark);
+    }
+    toggle() {
+        document.body.classList.toggle('dark');
+    }
+    setDark() {
+        document.body.classList.add('dark');
+    }
+    setLight() {
+        document.body.classList.remove('dark');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ * Public API Surface of @ardev/components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BottleComponent, CarousselComponent, CronogramComponent, MenuComponent, NavbarComponent, PageLayoutComponent, ScrollReactiveSectionComponent, SectionComponent, StackCaroussel, ThemeService };
+//# sourceMappingURL=gardev-components.mjs.map