@lluc_llull/ui-lib 0.12.5 → 0.14.1

package/fesm2022/lluc_llull-ui-lib-src-lib-effects.mjs

@@ -0,0 +1,144 @@
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as THREE from 'three';
+
+class SphereDeformEffect {
+    size;
+    rotationSpeed;
+    color;
+    mesh;
+    time = 0;
+    constructor(size, rotationSpeed, color) {
+        this.size = size;
+        this.rotationSpeed = rotationSpeed;
+        this.color = color;
+    }
+    init(scene, _options) {
+        const geometry = new THREE.SphereGeometry(this.size, 128, 128);
+        const material = this.color
+            ? new THREE.MeshStandardMaterial({ color: this.color, flatShading: true })
+            : new THREE.MeshNormalMaterial({ flatShading: true });
+        this.mesh = new THREE.Mesh(geometry, material);
+        scene.add(this.mesh);
+    }
+    animate() {
+        this.time += 0.02;
+        const positionAttr = this.mesh.geometry.attributes['position'];
+        const vertex = new THREE.Vector3();
+        for (let i = 0; i < positionAttr.count; i++) {
+            vertex.fromBufferAttribute(positionAttr, i);
+            const offset = Math.sin(vertex.x * 3 + this.time) * 0.2 +
+                Math.cos(vertex.y * 5 + this.time * 0.7) * 0.2;
+            vertex.normalize().multiplyScalar(this.size + offset);
+            positionAttr.setXYZ(i, vertex.x, vertex.y, vertex.z);
+        }
+        positionAttr.needsUpdate = true;
+        this.mesh.geometry.computeVertexNormals();
+        this.mesh.rotation.y += this.rotationSpeed;
+    }
+    dispose() {
+        this.mesh?.geometry.dispose();
+        this.mesh?.material?.dispose();
+    }
+}
+
+const EFFECT_REGISTRY = {
+    'sphere-deform': SphereDeformEffect,
+    // 'ring-transform': RingTransformEffect,
+    // 'particles': ParticlesEffect,
+};
+
+class DynamicBackgroundComponent {
+    canvasRef;
+    effect = 'sphere-deform';
+    rotationSpeed = 0.01;
+    size = 2;
+    backgroundColor = '#000000';
+    elementColor;
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    scene;
+    camera;
+    renderer;
+    animationId;
+    currentEffect;
+    ngOnInit() {
+        if (this.isBrowser) {
+            this.initScene();
+            this.loadEffect();
+            this.animate();
+            window.addEventListener('resize', this.onResize);
+        }
+    }
+    ngOnDestroy() {
+        if (this.isBrowser) {
+            cancelAnimationFrame(this.animationId);
+            this.renderer?.dispose();
+            this.currentEffect?.dispose();
+            window.removeEventListener('resize', this.onResize);
+        }
+    }
+    initScene() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(this.backgroundColor);
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+        this.camera.position.z = 5;
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: this.canvasRef.nativeElement,
+            antialias: true,
+        });
+        this.renderer.setSize(width, height);
+        const light = new THREE.DirectionalLight(0xffffff, 1);
+        light.position.set(5, 5, 5).normalize();
+        this.scene.add(light);
+    }
+    loadEffect() {
+        const EffectClass = EFFECT_REGISTRY[this.effect];
+        if (!EffectClass) {
+            throw new Error(`Efecto "${this.effect}" no está registrado en EFFECT_REGISTRY`);
+        }
+        this.currentEffect = new EffectClass(this.size, this.rotationSpeed, this.elementColor);
+        this.currentEffect.init(this.scene, {});
+    }
+    animate = () => {
+        this.animationId = requestAnimationFrame(this.animate);
+        this.currentEffect.animate();
+        this.renderer.render(this.scene, this.camera);
+    };
+    onResize = () => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicBackgroundComponent, isStandalone: true, selector: "lib-dynamic-background", inputs: { effect: "effect", rotationSpeed: "rotationSpeed", size: "size", backgroundColor: "backgroundColor", elementColor: "elementColor" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["bgCanvas"], descendants: true, static: true }], ngImport: i0, template: "<canvas #bgCanvas class=\"dynamic-bg-canvas\"></canvas>\n", styles: [".dynamic-bg-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dynamic-background', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas #bgCanvas class=\"dynamic-bg-canvas\"></canvas>\n", styles: [".dynamic-bg-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}\n"] }]
+        }], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['bgCanvas', { static: true }]
+            }], effect: [{
+                type: Input
+            }], rotationSpeed: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], elementColor: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DynamicBackgroundComponent };
+//# sourceMappingURL=lluc_llull-ui-lib-src-lib-effects.mjs.map

package/fesm2022/lluc_llull-ui-lib-src-lib-effects.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-src-lib-effects.mjs","sources":["../../../projects/ui-lib/src/lib/effects/dynamic-background/effects/sphere-deform/sphere-deform.effect.ts","../../../projects/ui-lib/src/lib/effects/dynamic-background/effects/effect-registry.ts","../../../projects/ui-lib/src/lib/effects/dynamic-background/dynamic-background.component.ts","../../../projects/ui-lib/src/lib/effects/dynamic-background/dynamic-background.component.html","../../../projects/ui-lib/src/lib/effects/lluc_llull-ui-lib-src-lib-effects.ts"],"sourcesContent":["import * as THREE from 'three';\nimport { DynamicEffect } from '../dynamic-effect.interface';\n\nexport class SphereDeformEffect implements DynamicEffect {\n    private mesh!: THREE.Mesh;\n    private time = 0;\n\n    constructor(\n        private size: number,\n        private rotationSpeed: number,\n        private color?: string,\n    ) {}\n\n    init(scene: THREE.Scene, _options: any): void {\n        const geometry = new THREE.SphereGeometry(this.size, 128, 128);\n\n        const material = this.color\n            ? new THREE.MeshStandardMaterial({ color: this.color, flatShading: true })\n            : new THREE.MeshNormalMaterial({ flatShading: true });\n\n        this.mesh = new THREE.Mesh(geometry, material);\n        scene.add(this.mesh);\n    }\n\n    animate(): void {\n        this.time += 0.02;\n        const positionAttr = this.mesh.geometry.attributes['position'] as THREE.BufferAttribute;\n        const vertex = new THREE.Vector3();\n\n        for (let i = 0; i < positionAttr.count; i++) {\n            vertex.fromBufferAttribute(positionAttr, i);\n\n            const offset =\n                Math.sin(vertex.x * 3 + this.time) * 0.2 +\n                Math.cos(vertex.y * 5 + this.time * 0.7) * 0.2;\n\n            vertex.normalize().multiplyScalar(this.size + offset);\n\n            positionAttr.setXYZ(i, vertex.x, vertex.y, vertex.z);\n        }\n\n        positionAttr.needsUpdate = true;\n        this.mesh.geometry.computeVertexNormals();\n\n        this.mesh.rotation.y += this.rotationSpeed;\n    }\n\n    dispose(): void {\n        this.mesh?.geometry.dispose();\n        (this.mesh?.material as THREE.Material)?.dispose();\n    }\n}\n","import { DynamicEffect } from './dynamic-effect.interface';\nimport { SphereDeformEffect } from './sphere-deform/sphere-deform.effect';\n// import { RingTransformEffect } from './ring-transform/ring-transform.effect';\n// import { ParticlesEffect } from './particles/particles.effect';\n\nexport type EffectKey = 'sphere-deform' | 'ring-transform' | 'particles';\n\nexport const EFFECT_REGISTRY: Partial<Record<EffectKey, new (...args: any[]) => DynamicEffect>> = {\n    'sphere-deform': SphereDeformEffect,\n    // 'ring-transform': RingTransformEffect,\n    // 'particles': ParticlesEffect,\n};\n","import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Input,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    ViewChild,\n    inject,\n} from '@angular/core';\nimport * as THREE from 'three';\nimport { DynamicEffect } from './effects/dynamic-effect.interface';\nimport { EFFECT_REGISTRY, EffectKey } from './effects/effect-registry';\n\n@Component({\n    selector: 'lib-dynamic-background',\n    standalone: true,\n    imports: [CommonModule],\n    templateUrl: './dynamic-background.component.html',\n    styleUrl: './dynamic-background.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DynamicBackgroundComponent implements OnInit, OnDestroy {\n    @ViewChild('bgCanvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;\n\n    @Input() effect: EffectKey = 'sphere-deform';\n    @Input() rotationSpeed = 0.01;\n    @Input() size = 2;\n    @Input() backgroundColor = '#000000';\n    @Input() elementColor?: string;\n\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    private scene!: THREE.Scene;\n    private camera!: THREE.PerspectiveCamera;\n    private renderer!: THREE.WebGLRenderer;\n    private animationId!: number;\n\n    private currentEffect!: DynamicEffect;\n\n    ngOnInit(): void {\n        if (this.isBrowser) {\n            this.initScene();\n            this.loadEffect();\n            this.animate();\n            window.addEventListener('resize', this.onResize);\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.isBrowser) {\n            cancelAnimationFrame(this.animationId);\n            this.renderer?.dispose();\n            this.currentEffect?.dispose();\n            window.removeEventListener('resize', this.onResize);\n        }\n    }\n\n    private initScene(): void {\n        const width = window.innerWidth;\n        const height = window.innerHeight;\n\n        this.scene = new THREE.Scene();\n        this.scene.background = new THREE.Color(this.backgroundColor);\n\n        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);\n        this.camera.position.z = 5;\n\n        this.renderer = new THREE.WebGLRenderer({\n            canvas: this.canvasRef.nativeElement,\n            antialias: true,\n        });\n        this.renderer.setSize(width, height);\n\n        const light = new THREE.DirectionalLight(0xffffff, 1);\n        light.position.set(5, 5, 5).normalize();\n        this.scene.add(light);\n    }\n\n    private loadEffect(): void {\n        const EffectClass = EFFECT_REGISTRY[this.effect];\n        if (!EffectClass) {\n            throw new Error(`Efecto \"${this.effect}\" no está registrado en EFFECT_REGISTRY`);\n        }\n        this.currentEffect = new EffectClass(this.size, this.rotationSpeed, this.elementColor);\n        this.currentEffect.init(this.scene, {});\n    }\n\n    private animate = (): void => {\n        this.animationId = requestAnimationFrame(this.animate);\n        this.currentEffect.animate();\n        this.renderer.render(this.scene, this.camera);\n    };\n\n    private onResize = (): void => {\n        const width = window.innerWidth;\n        const height = window.innerHeight;\n        this.camera.aspect = width / height;\n        this.camera.updateProjectionMatrix();\n        this.renderer.setSize(width, height);\n    };\n}\n","<canvas #bgCanvas class=\"dynamic-bg-canvas\"></canvas>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/lluc_llull-ui-lib-src-lib-sliders.mjs

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { Input, Directive } from '@angular/core';
+import Swiper from 'swiper';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+
+Swiper.use([Navigation, Pagination, Autoplay]);
+class SwiperDirective {
+    el;
+    swiperConfig;
+    swiperInstance;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        this.swiperInstance = new Swiper(this.el.nativeElement, {
+            spaceBetween: 16,
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+            pagination: { clickable: true },
+            breakpoints: {
+                0: { slidesPerView: 1 }, // móviles
+                480: { slidesPerView: 1 }, // small tablets
+                768: { slidesPerView: 3 }, // tablets
+                1024: { slidesPerView: 4 }, // laptops
+                1280: { slidesPerView: 7 }, // desktop → máximo 7
+            },
+            ...this.swiperConfig,
+        });
+    }
+    ngOnDestroy() {
+        this.swiperInstance?.destroy(true, true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SwiperDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: SwiperDirective, isStandalone: true, selector: "[appSwiper]", inputs: { swiperConfig: "swiperConfig" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SwiperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appSwiper]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { swiperConfig: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SwiperDirective };
+//# sourceMappingURL=lluc_llull-ui-lib-src-lib-sliders.mjs.map

package/fesm2022/lluc_llull-ui-lib-src-lib-sliders.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-src-lib-sliders.mjs","sources":["../../../projects/ui-lib/src/lib/sliders/swiper.directive.ts","../../../projects/ui-lib/src/lib/sliders/lluc_llull-ui-lib-src-lib-sliders.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';\nimport Swiper from 'swiper';\nimport { Autoplay, Navigation, Pagination } from 'swiper/modules';\n\nSwiper.use([Navigation, Pagination, Autoplay]);\n\n@Directive({\n    selector: '[appSwiper]',\n    standalone: true,\n})\nexport class SwiperDirective implements AfterViewInit, OnDestroy {\n    @Input() swiperConfig: any;\n\n    private swiperInstance?: Swiper;\n\n    constructor(private el: ElementRef) {}\n\n    ngAfterViewInit(): void {\n        this.swiperInstance = new Swiper(this.el.nativeElement, {\n            spaceBetween: 16,\n            navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n            },\n            pagination: { clickable: true },\n            breakpoints: {\n                0: { slidesPerView: 1 }, // móviles\n                480: { slidesPerView: 1 }, // small tablets\n                768: { slidesPerView: 3 }, // tablets\n                1024: { slidesPerView: 4 }, // laptops\n                1280: { slidesPerView: 7 }, // desktop → máximo 7\n            },\n            ...this.swiperConfig,\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.swiperInstance?.destroy(true, true);\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;MAMjC,eAAe,CAAA;AAKJ,IAAA,EAAA;AAJX,IAAA,YAAY;AAEb,IAAA,cAAc;AAEtB,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAA,CAAA,EAAE,GAAF,EAAE;IAAe;IAErC,eAAe,GAAA;QACX,IAAI,CAAC,cAAc,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;AACpD,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,UAAU,EAAE;AACR,gBAAA,MAAM,EAAE,qBAAqB;AAC7B,gBAAA,MAAM,EAAE,qBAAqB;AAChC,aAAA;AACD,YAAA,UAAU,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE;AAC/B,YAAA,WAAW,EAAE;AACT,gBAAA,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AACvB,gBAAA,GAAG,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AACzB,gBAAA,GAAG,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AACzB,gBAAA,IAAI,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AAC1B,gBAAA,IAAI,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AAC7B,aAAA;YACD,GAAG,IAAI,CAAC,YAAY;AACvB,SAAA,CAAC;IACN;IAEA,WAAW,GAAA;QACP,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;IAC5C;wGA5BS,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA;+EAEY,YAAY,EAAA,CAAA;sBAApB;;;ACXL;;AAEG;;;;"}